/* Arranging the cards (js/arrange.js): ✏️ Arrange in the top bar, and the list of cards (from the
   right on computers, from the bottom on phones). */

/* ✏️ Arrange: one of the page's tools (with ✓ Fact check and 🔊 Listen; on phones, in their ⋯ menu when
   there's more than one: js/navbar.js) */
.person-bar > .ar-toggle { order: 11; }
/* (the bar's violet glass, as the other tools': css/theme.css) */
body .person-bar > .ar-toggle { border: 0 !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  background: rgba(var(--nav-glass), var(--nav-glass-a)) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(25, 10, 90, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 18px rgba(30, 26, 103, .13), 0 1px 2px rgba(30, 26, 103, .08) !important; transition: filter .2s; }
body .person-bar > .ar-toggle:hover { filter: brightness(1.08) saturate(1.1); }
@media (max-width: 700px) {
  .person-bar > .ar-toggle { width: var(--nav-h); padding: 0; justify-content: center; }
  .person-bar > .ar-toggle .ar-toggle-label { display: none; }
  .person-bar.has-more > .ar-toggle { display: none; }
}

/* the list */
.ar-panel { position: fixed; top: 76px; right: 18px; bottom: 18px; z-index: 4050; width: 340px; box-sizing: border-box; display: flex; flex-direction: column;
  border-radius: 24px; background: #fff; color: #1e1a67; box-shadow: 0 18px 50px rgba(30, 26, 103, .32), 0 0 0 1px #e4def9;
  font: 15px/1.3 var(--font-read, system-ui, sans-serif); animation: ar-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ar-in { from { opacity: 0; transform: translateX(40px); } }
body.ar-open { padding-right: 370px; }
body.ar-open .pf-editbar { display: none; }   /* (the profile's own bar, back once the list closes) */
.ar-top { padding: 18px 20px 10px; }
.ar-top h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #1e1a67; }
.ar-top p { margin: 0; color: #6b6890; font-size: 13.5px; }
.ar-list { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 6px 12px; list-style: none; display: grid; align-content: start; gap: 6px; }
.ar-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 16px; background: #f5f3ff;
  user-select: none; -webkit-user-select: none; cursor: grab; }
.ar-row b { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; }
.ar-row button { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: #e6e1fd; color: #21167c; font: 800 17px/1 system-ui, sans-serif; cursor: pointer; }
.ar-row button:hover:not(:disabled) { background: #d3cdfb; }
.ar-row button:disabled { opacity: .3; cursor: default; }
.ar-row button:focus-visible, .ar-btns button:focus-visible { outline: 3px solid var(--btn-ring, #4232d4); outline-offset: 1px; }
.ar-row .ar-grip { background: none; font-size: 20px; cursor: grab; touch-action: none; }
.ar-n { flex: none; width: 22px; color: #8d86c2; font-size: 12px; font-weight: 800; text-align: center; }
.ar-row.is-pin { background: linear-gradient(120deg, #2a1d8f, #4b36c9); color: #fff; cursor: default; }
.ar-row.is-pin .ar-n, .ar-row.is-pin small { color: rgba(255, 255, 255, .72); }
.ar-row.is-pin small { font-size: 12px; white-space: nowrap; }
.ar-lock { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.ar-row.is-dragging { z-index: 2; background: #fff; box-shadow: 0 12px 30px rgba(30, 26, 103, .28); pointer-events: none; }
body.ar-dragging, body.ar-dragging * { cursor: grabbing !important; }
.ar-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid #eeeafd; }
.ar-btns-r { display: flex; gap: 8px; margin-left: auto; }
.ar-btn { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--btn-tint, #d3cdfb); color: var(--btn-ink, #150e5e); font: 700 14px/1.1 var(--font-read, system-ui, sans-serif); cursor: pointer; }
.ar-btn:hover:not(:disabled) { background: var(--btn-tint-hover, #c4bcf8); }
.ar-btn.is-go { background: var(--btn-go, #21167c); color: #fff; }
.ar-btn.is-go:hover:not(:disabled) { background: var(--btn-go-hover, #180f5c); }
.ar-btn:disabled { opacity: .6; cursor: default; }
.ar-reset { padding: 8px 4px; border: 0; background: none; color: #4232d4; font: 700 14px/1.1 var(--font-read, system-ui, sans-serif); cursor: pointer; }
.ar-reset:hover:not(:disabled) { text-decoration: underline; }
.ar-reset:disabled { color: #a9a4cf; cursor: default; }
@media (pointer: coarse) { .ar-row button { width: 44px; height: 44px; } .ar-btn, .ar-reset { min-height: 44px; } }

/* the cards on the page while the list is open: the one pointed at, and the one just moved */
.ar-hover { outline: 3px solid #967dfc !important; outline-offset: 2px !important; }
.ar-flash { animation: ar-flash .9s ease-out; }
@keyframes ar-flash { 0%, 30% { outline: 3px solid #967dfc; outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 2px; } }

.ar-toast { position: fixed; left: 50%; bottom: 24px; z-index: 4060; translate: -50% 0; margin: 0; padding: 12px 18px; border-radius: 16px; background: #21167c; color: #fff;
  box-shadow: 0 12px 32px rgba(30, 26, 103, .35); font: 700 14px/1.35 var(--font-read, system-ui, sans-serif); animation: ar-up .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ar-up { from { opacity: 0; transform: translateY(20px); } }

/* phones and tablets: from the bottom, over the tabs; the page scrolls above it */
@media (max-width: 900px) {
  body.ar-open { padding-right: 0; padding-bottom: 62vh; }
  .ar-panel { top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 58vh; animation-name: ar-in-up; }
  @keyframes ar-in-up { from { opacity: 0; transform: translateY(40px); } }
  body.ar-open .tabbar { display: none; }
  .ar-toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .ar-panel, .ar-toast, .ar-flash { animation: none; } }