/* Arrange pages (arrange.js): the binder's pages as a grid of little pages to
   drag into order, insert between and delete. It takes the binder's place in
   the stage; the sidebar stays. */

.arrange { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* The toolbar's Pages button: its icon alone once the toolbar gets crowded (the name stays for screen readers). */
@media (max-width: 1280px) {
  #btn-arrange { width: 32px; padding: 0; justify-content: center; }
  #btn-arrange .btn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ------------------------------------------------------------------- bar */
/* 46px, the same as the binder toolbar it stands in for */
.ar-bar {
  height: 46px; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.ar-bar::-webkit-scrollbar { display: none; }
.ar-bar .btn { flex: none; }
.ar-heading { display: flex; align-items: center; gap: 9px; min-width: 0; flex: none; }
.ar-heading > .ar-ico { color: var(--accent); }
.ar-title { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.ar-sub { font-weight: 500; color: var(--ink-2); }
.ar-count { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-spacer { flex: 1; }
.ar-bar .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.ar-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }

/* ---------------------------------------------------------------- the grid */
.ar-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.ar-lede { margin: 16px 22px 0; font-size: 12.5px; color: var(--ink-3); max-width: 760px; }

/* Every page is the same size, so arrange.js can tell where a dragged page
   would land by arithmetic. --ar-min, --ar-cols, --ar-rows, --ar-ratio and
   --cover are set per binder. */
.ar-grid {
  --ar-gap-x: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ar-min, 150px), 1fr));
  gap: 24px var(--ar-gap-x);
  padding: 14px 22px 56px;
  user-select: none; -webkit-user-select: none;
}

.ar-item { position: relative; min-width: 0; }

/* The page: its pockets and caption. A container, so the little page is drawn
   in units of its own width and keeps a binder page's proportions at any size. */
.ar-thumb {
  container-type: inline-size;
  position: relative; display: block;
  border-radius: 10px; outline: none; cursor: grab;
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.ar-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* A binder page in miniature — the same materials as the binder itself
   (binder.css §7), at a tenth of the size: the cover's leatherette grain over
   its colour, a stitched rim, the pocket sheet's welded grid, the three ring
   holes down its spine edge and a metal ring through each of them. Off-screen
   pages are not painted at all (content-visibility), and the aspect ratio still
   gives them their size. One light, from the top left, as everywhere else. */
.ar-sheet {
  position: relative;
  aspect-ratio: var(--ar-ratio, 100 / 130);
  display: grid;
  grid-template-columns: repeat(var(--ar-cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ar-rows, 3), minmax(0, 1fr));
  gap: 2.6cqi;
  padding: 4cqi 4cqi 4cqi 8cqi;
  border-radius: 7px;
  background-color: var(--cover, #2f6f4f);
  background-image:
    var(--grain, none),
    radial-gradient(120% 95% at 2% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--cover, #2f6f4f) 90%, #fff) 0%,
      var(--cover, #2f6f4f) 42%,
      color-mix(in srgb, var(--cover, #2f6f4f) 76%, #000) 100%);
  background-size: 54px 54px, auto, auto;
  background-blend-mode: overlay, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset -1px -1px 0 rgba(0,0,0,.4),
    inset 0 0 14px rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.3), 0 8px 18px -10px rgba(0,0,0,.6);
  content-visibility: auto;
  transition: transform .16s ease, box-shadow .16s ease;
}
/* The holes down the spine edge and the metal rings through them: a dark
   punched slot with a lit lower lip, and a short bar of metal lying across it
   with the same highlight-core-shade as the binder's own D-rings. As many as
   the binder is bound with — arrange.js makes one .ar-ring per ring with its
   own --i, and --rings comes off the grid, exactly as the binder's own rings
   and punch holes are spaced (binder.css), so the two always agree. Drawn on
   the page itself, so a lifted or deleted copy carries them. */
.ar-rings {
  position: absolute; z-index: 1; inset: 0;
  pointer-events: none;
}
.ar-ring {
  position: absolute; left: 4cqi;
  /* 6% clear of each end, then evenly spaced: three rings land on 20 / 50 / 80% */
  top: calc(6% + (100% - 12%) * (var(--i, 0) + .5) / var(--rings, 3));
  width: 4cqi; height: 4cqi; margin: -2cqi 0 0 -2cqi;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.8) 62%, rgba(255,255,255,.26) 78%, transparent 84%);
}
/* the metal lying across the hole */
.ar-ring::after {
  content: ""; position: absolute; left: -2.8cqi; top: 50%;
  width: 8cqi; height: 2cqi; margin-top: -1cqi;
  border-radius: 1cqi;
  background: linear-gradient(180deg, #f6f8fc 0 16%, #aab1be 44%, #4e545f 66%, #949ba8);
}
/* the stitched rim, one thread in from the board's edge */
.ar-sheet::before {
  content: ""; position: absolute; inset: 2.2cqi;
  border: 1px dashed rgba(255,255,255,.26); border-radius: 4px;
  pointer-events: none;
}
.ar-cell {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: max(1.5px, 1.2cqi);
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.26) 14%, rgba(0,0,0,.34));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 0 rgba(255,255,255,.07);
}
.ar-cell.is-filled {
  background: var(--pocket);
  box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.4);
}
/* the plastic passing over each little card */
.ar-cell.is-filled::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg,
    rgba(255,255,255,0) 36%, rgba(255,255,255,.055) 44%, rgba(255,255,255,.012) 50%, rgba(255,255,255,0) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.ar-cell.is-loading { background: rgba(255,255,255,.1); box-shadow: none; }
.ar-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-cell.is-missing img { filter: grayscale(1) brightness(.5); }

/* The binder's settings, in miniature (data-* on the grid, copied onto a lifted page). */
[data-missing="grey"] .ar-cell.is-missing img { filter: grayscale(1); }
[data-missing="dim"] .ar-cell.is-missing img { filter: none; opacity: .32; }
[data-missing="badge"] .ar-cell.is-missing img { filter: none; }
[data-missing="badge"] .ar-cell.is-missing::after {
  content: ""; position: absolute; top: 6%; left: 8%; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
[data-missing="hidden"] .ar-cell.is-missing { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
[data-missing="hidden"] .ar-cell.is-missing img { visibility: hidden; }
[data-empty="plain"] .ar-cell:not(.is-filled) { box-shadow: none; }
[data-empty="back"] .ar-cell:not(.is-filled) {
  background:
    radial-gradient(ellipse 34% 24% at 50% 50%, color-mix(in srgb, var(--gold) 55%, transparent) 0 70%, transparent 76%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, color-mix(in srgb, var(--cover, #2f6f4f) 45%, #10131c), color-mix(in srgb, var(--cover, #2f6f4f) 25%, #06070b));
}
/* card holders: clear plastic round the card, the card set in */
[data-holder="toploader"] .ar-cell.is-filled,
[data-holder="penny"] .ar-cell.is-filled,
[data-holder="slab"] .ar-cell.is-filled {
  background: rgba(225,233,244,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4);
}
[data-holder="toploader"] .ar-cell.is-filled { padding: 8% 6% 4%; }
[data-holder="penny"] .ar-cell.is-filled { padding: 3% 2.5% 1%; }
[data-holder="slab"] .ar-cell.is-filled { padding: 24% 12% 5%; }
[data-holder="slab"] .ar-cell.is-filled::before {
  content: ""; position: absolute; top: 4%; left: 7%; right: 7%; height: 15%; border-radius: 1px; background: #e7ebf1;
}
[data-holder="toploader"] .ar-cell img, [data-holder="penny"] .ar-cell img, [data-holder="slab"] .ar-cell img { border-radius: 1px; }

/* A background behind the pockets (backdrop.js puts a .bg-layer first inside
   the page, at z -1): the sheet isolates, so the rings still sit over it. */
.ar-sheet { isolation: isolate; }

@media (hover: hover) {
  .ar-thumb:hover .ar-sheet {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.25), 0 16px 26px -12px rgba(0,0,0,.65);
  }
}

/* caption: number and name, then cards and value — two fixed lines, so every page is one height */
.ar-cap { display: flex; flex-direction: column; gap: 1px; padding: 8px 2px 0; min-width: 0; }
.ar-line { display: flex; align-items: baseline; gap: 7px; height: 18px; min-width: 0; }
.ar-no { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ar-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 550; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-here {
  display: none; flex: none;
  font-size: 9.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.ar-meta { height: 17px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ar-meta b { font-weight: 650; color: var(--gold); }
.ar-meta b.is-est { font-weight: 550; opacity: .85; }

/* the page(s) that were on screen */
.ar-item.is-current .ar-here { display: inline; }
.ar-item.is-current .ar-sheet {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 8px 18px -10px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------- page actions */
/* move earlier / later, delete, more — on hover or focus, always on touch */
.ar-actions {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2;
  display: flex; justify-content: space-between; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.ar-acts { display: flex; gap: 4px; }
@media (hover: hover) {
  /* the page itself, not the insert gap beside it */
  .ar-thumb:hover ~ .ar-actions, .ar-actions:hover { opacity: 1; pointer-events: auto; }
}
/* keyboard focus on the page or one of its buttons (a click leaves them to the hover) */
.ar-item:has(:focus-visible) .ar-actions,
.ar-actions:focus-within { opacity: 1; pointer-events: auto; }
.ar-act {
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 7px; cursor: pointer;
  background: rgba(8,10,14,.8); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: background .12s;
}
.ar-act:hover { background: rgba(8,10,14,.96); }
.ar-act.is-danger:hover { background: var(--danger); }
.ar-act[aria-disabled="true"] { opacity: .38; cursor: default; }
.ar-act[aria-disabled="true"]:hover { background: rgba(8,10,14,.8); }
.ar-act[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.ar-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------ insert targets */
/* A slim "+" in the gap before every page (the grid's side padding holds the first one). */
.ar-gap {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(-1 * var(--ar-gap-x)); width: var(--ar-gap-x);
  padding: 0; margin: 0; border: none; background: none; cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ar-gap::before {
  content: ""; position: absolute; top: 2px; bottom: 44px; left: 50%;
  width: 2px; margin-left: -1px; border-radius: 2px;
  background: var(--accent);
}
.ar-gap-plus {
  position: absolute; left: 50%; top: 38%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--bg), var(--shadow-1);
  transition: transform .12s ease;
}
.ar-gap:hover, .ar-gap:focus-visible { opacity: 1; }
.ar-gap:hover .ar-gap-plus { transform: scale(1.12); }
.ar-gap:focus-visible { outline: none; }
.ar-gap:focus-visible .ar-gap-plus { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.ar-grid.is-full .ar-gap { cursor: not-allowed; }
.ar-grid.is-full .ar-gap::before, .ar-grid.is-full .ar-gap-plus { background: var(--ink-3); }

/* the last tile: a blank page to add at the end */
.ar-add {
  container-type: inline-size;
  display: flex; flex-direction: column; width: 100%;
  padding: 0; margin: 0; border: none; background: none;
  color: var(--ink-3); font: inherit; text-align: left; cursor: pointer;
  border-radius: 10px;
}
.ar-add-sheet {
  aspect-ratio: var(--ar-ratio, 100 / 130);
  display: grid; place-items: center;
  border: 2px dashed var(--line); border-radius: 7px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  transition: border-color .12s, background .12s, color .12s;
}
.ar-add-plus {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line);
}
.ar-add-plus svg { width: 14px; height: 14px; }
.ar-add-cap { padding: 8px 2px 0; height: 42px; font-size: 13px; font-weight: 600; }
.ar-add:hover { color: var(--accent); }
.ar-add:hover .ar-add-sheet { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ar-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.ar-add[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.ar-add[aria-disabled="true"]:hover { color: var(--ink-3); }
.ar-add[aria-disabled="true"]:hover .ar-add-sheet { border-color: var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); }

/* a page just inserted, or brought back by Undo */
.ar-item.is-new .ar-sheet { animation: ar-new 1.5s ease-out; }
@keyframes ar-new {
  0%, 35% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold), 0 0 0 10px color-mix(in srgb, var(--gold) 30%, transparent); }
}

/* ----------------------------------------------------------------- dragging */
/* Where the carried page will land. */
.ar-item.is-placeholder::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: var(--ar-ratio, 100 / 130);
  border: 2px dashed color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.ar-item.is-placeholder .ar-thumb,
.ar-item.is-placeholder .ar-actions { visibility: hidden; }
.arrange.is-dragging .ar-gap,
.arrange.is-dragging .ar-actions,
.arrange.is-grabbing .ar-gap { visibility: hidden; }
body.is-arranging-page, body.is-arranging-page * { cursor: grabbing !important; }

/* The page in the air: a copy, fixed, following the pointer. */
.ar-lift { position: fixed; z-index: 58; pointer-events: none; will-change: transform; }
.ar-lift-page { container-type: inline-size; position: relative; width: 100%; height: 100%; }
.ar-lift .ar-sheet {
  content-visibility: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 2px var(--accent), 0 24px 44px -12px rgba(0,0,0,.7), 0 8px 16px -6px rgba(0,0,0,.4);
}
.ar-lift-tag {
  position: absolute; left: 7cqi; bottom: -12px; max-width: calc(100% - 7cqi);
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-2);
}
.ar-lift-name { font-weight: 600; }

/* picked up with the keyboard: raised in place */
.ar-item.is-grabbed .ar-sheet {
  transform: translateY(-6px) scale(1.035);
  box-shadow: 0 0 0 2px var(--accent), 0 22px 38px -14px rgba(0,0,0,.7);
}
.ar-item.is-grabbed .ar-thumb:focus-visible { outline-style: dashed; }

/* a deleted page shrinking away */
.ar-ghost { position: fixed; z-index: 20; pointer-events: none; container-type: inline-size; }
.ar-ghost .ar-sheet { content-visibility: visible; }

/* ------------------------------------------------------------ actions menu */
.ar-menu { width: auto; min-width: 214px; padding: 4px; gap: 1px; }
.ar-menu .pmenu-item { grid-template-columns: 18px minmax(0, 1fr); gap: 9px; padding: 0 12px 0 9px; color: var(--ink); }
.ar-menu .pmenu-item .ar-ico { color: var(--ink-2); }
.ar-menu .pmenu-item.is-danger, .ar-menu .pmenu-item.is-danger .ar-ico { color: var(--danger); }
.ar-menu .pmenu-item[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .ar-grid { --ar-gap-x: 18px; gap: 20px var(--ar-gap-x); padding: 12px 18px 44px; }
  .ar-lede { margin: 12px 18px 0; }
}

/* Phones: two columns; the actions sit under the caption so they never cover a page. */
@media (max-width: 640px) {
  .ar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --ar-gap-x: 18px; gap: 18px var(--ar-gap-x); padding: 10px 18px 40px;
  }
  .ar-lede { margin: 10px 18px 0; font-size: 12px; }
  .ar-sub, .ar-count { display: none; }
  .ar-bar { gap: 8px; padding: 0 10px; }
}

/* --------------------------------------------------------------- tiles / table */
/* The bar's switch. Remembered, so the next visit opens the same way. */
.ar-views {
  display: inline-flex; flex: none; align-items: center;
  padding: 2px; gap: 2px;
  border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
}
.ar-view {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 640;
}
.ar-view .ar-ico svg { width: 13px; height: 13px; }
.ar-view:hover { color: var(--ink); }
.ar-view.is-on {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 var(--hairline, rgba(255,255,255,.08));
}
:root[data-theme="light"] .ar-view.is-on { background: #fff; box-shadow: 0 1px 3px rgba(20,24,32,.14); }
.ar-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Table: one row per page, under a sticky heading. The rows stay one height,
   so dragging still lands by the same arithmetic as the tiles. */
.arrange[data-view="table"] .ar-scroll { overflow-x: auto; }
.arrange[data-view="table"] .ar-lede {
  position: sticky; left: 22px; z-index: 1;
  width: fit-content; max-width: min(760px, calc(100vw - 48px));
  background: var(--bg);
}
.arrange[data-view="table"] .ar-board { min-width: 740px; padding-inline: 22px; }
.ar-thead[hidden] { display: none; }
.ar-thead:not([hidden]) {
  display: grid;
  grid-template-columns: var(--ar-table-cols);
  align-items: end;
  position: sticky; top: 0; z-index: 3;
  padding: 8px 132px 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ar-th { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ar-th.is-num { align-items: flex-end; }
.ar-th-k {
  min-height: 12px;
  font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.ar-th-l { font-size: 12px; font-weight: 650; color: var(--ink-2); }

.ar-grid.is-table {
  display: flex; flex-direction: column;
  gap: 0; padding: 0 0 40px;
}
.ar-grid.is-table .ar-item:not(.is-add) {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 0 132px 0 12px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
}
/* Same tracks as the heading, on a real box so the row can be focused and dragged. */
.ar-grid.is-table .ar-thumb {
  display: grid;
  grid-template-columns: var(--ar-table-cols);
  align-items: center;
  min-height: 44px;
  border-radius: 0;
}
.ar-grid.is-table .ar-thumb:focus-visible { outline-offset: -2px; }
.ar-grid.is-table .ar-no { height: auto; font-size: 13px; }
.ar-grid.is-table .ar-name {
  display: flex; align-items: baseline; gap: 8px;
  flex: none; height: auto; padding: 0;
  font-size: 13px; font-weight: 550; color: var(--ink);
}
.ar-grid.is-table .ar-name-t {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-stat {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.ar-stat.is-num { text-align: right; }
.ar-stat.is-missing { color: var(--ink-2); }
.ar-stat.is-total { font-weight: 720; color: var(--gold); }
.ar-stat.is-est { font-weight: 550; cursor: help; }
.ar-grid.is-table .ar-item.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ar-grid.is-table .ar-item.is-current .ar-sheet { box-shadow: none; }
@media (hover: hover) {
  .ar-grid.is-table .ar-item:not(.is-add):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .ar-grid.is-table .ar-item.is-current:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
.ar-grid.is-table .ar-actions {
  position: absolute; top: 50%; right: 8px; left: auto;
  width: auto; margin: 0;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
}
.ar-grid.is-table .ar-item:hover .ar-actions,
.ar-grid.is-table .ar-item:focus-within .ar-actions,
.ar-grid.is-table .ar-actions:hover,
.ar-grid.is-table .ar-actions:focus-within {
  opacity: 1; pointer-events: auto;
}
.ar-grid.is-table .ar-gap {
  left: 0; right: 132px; top: -8px; bottom: auto;
  width: auto; height: 16px;
}
.ar-grid.is-table .ar-gap::before {
  top: 50%; bottom: auto; left: 8px; right: 8px;
  width: auto; height: 2px; margin: -1px 0 0;
}
.ar-grid.is-table .ar-gap-plus { top: 50%; }
.ar-grid.is-table .ar-item.is-placeholder::before {
  aspect-ratio: auto; inset: 3px 8px;
}
.ar-grid.is-table .ar-item.is-new { animation: ar-row-new 1.5s ease-out; }
@keyframes ar-row-new {
  0%, 35% { background: color-mix(in srgb, var(--gold) 26%, transparent); }
}
.ar-grid.is-table .ar-item.is-grabbed {
  outline: 2px dashed var(--accent); outline-offset: -2px;
}
.ar-foot[hidden] { display: none !important; }
.ar-grid.is-table .ar-foot:not([hidden]) {
  padding: 0 132px 0 12px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.ar-foot-row {
  display: grid;
  grid-template-columns: var(--ar-table-cols);
  align-items: center;
  min-height: 46px;
}
.ar-foot-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.ar-foot-sub {
  font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
.ar-grid.is-table .ar-foot .ar-stat { font-weight: 700; }
.ar-grid.is-table .ar-item.is-add {
  display: block; padding: 10px 8px 0; border: 0;
}
.ar-grid.is-table .ar-add {
  flex-direction: row; align-items: center; gap: 10px;
  width: fit-content; text-align: left;
}
.ar-grid.is-table .ar-add-sheet { aspect-ratio: auto; width: 36px; height: 36px; }
.ar-grid.is-table .ar-add-cap { height: auto; padding: 0; white-space: nowrap; }
.ar-lift-page.is-row { display: flex; align-items: center; }
.ar-lift-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 100%; padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-2); color: var(--ink);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--accent), 0 16px 32px -12px rgba(0,0,0,.7);
}
.ar-lift-row b { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .ar-view > span:not(.ar-ico) {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ar-view { width: 30px; padding: 0; justify-content: center; }
}

@media (hover: none) {
  .ar-grid.is-table .ar-actions {
    position: absolute; top: 50%; right: 8px; margin-top: 0;
    transform: translateY(-50%);
    opacity: 1; pointer-events: auto;
  }
  .ar-grid.is-table .ar-act { flex: none; width: 28px; min-width: 28px; }
}

@media (hover: none) {
  .ar-actions { position: static; opacity: 1; pointer-events: auto; margin-top: 6px; }
  .ar-act {
    width: auto; min-width: 32px; height: 32px; flex: 1;
    background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none;
  }
  .ar-acts { flex: 1; }
  .ar-act:hover { background: var(--bg-3); }
  .ar-act[aria-disabled="true"]:hover { background: var(--bg-3); }
  .ar-gap { opacity: .9; }
  .ar-gap::before { display: none; }
  .ar-gap-plus { width: 18px; height: 18px; margin: -9px 0 0 -9px; box-shadow: 0 0 0 2px var(--bg), var(--shadow-1); }
  .ar-thumb { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-sheet, .ar-actions, .ar-gap, .ar-gap-plus, .ar-add-sheet, .ar-act { transition: none; }
  .ar-thumb:hover .ar-sheet, .ar-gap:hover .ar-gap-plus { transform: none; }
  .ar-item.is-grabbed .ar-sheet { transform: none; }
  .ar-item.is-new .ar-sheet { animation: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
}

/* Phones: the wide columns become a card per page, so every figure and the
   row's buttons are on screen. The headings hide; each figure names itself. */
@media (max-width: 640px) {
  .arrange[data-view="table"] .ar-scroll { overflow-x: hidden; }
  .arrange[data-view="table"] .ar-lede {
    position: static; left: auto; width: auto; max-width: none;
  }
  .arrange[data-view="table"] .ar-board { min-width: 0; padding-inline: 12px; }
  .arrange[data-view="table"] .ar-thead { display: none !important; }

  .ar-grid.is-table { gap: 8px; padding: 8px 0 28px; }
  .ar-grid.is-table .ar-item:not(.is-add) {
    padding: 8px 8px 42px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  }
  .ar-grid.is-table .ar-item.is-current {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  }
  .ar-grid.is-table .ar-thumb {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 12px; row-gap: 8px;
    min-height: 0;
  }
  .ar-grid.is-table .ar-no { flex: none; font-size: 15px; }
  /* The name takes the rest of the first line, so the figures wrap beneath it. */
  .ar-grid.is-table .ar-name { flex: 1 0 calc(100% - 2.6rem); min-width: 0; }
  .ar-grid.is-table .ar-stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    flex: 1 1 calc(33.33% - 12px); min-width: 5.2rem;
    text-align: left; font-size: 14px;
  }
  .ar-grid.is-table .ar-stat.is-num { text-align: left; }
  .ar-grid.is-table .ar-stat::before {
    content: attr(data-label);
    font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  }
  .ar-grid.is-table .ar-actions {
    position: absolute; top: auto; bottom: 6px; left: 6px; right: 6px;
    width: auto; margin: 0; transform: none;
    justify-content: flex-end;
    opacity: 1; pointer-events: auto;
  }
  .ar-grid.is-table .ar-gap { right: 0; }
  .ar-grid.is-table .ar-foot:not([hidden]) {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .ar-grid.is-table .ar-foot .ar-no { display: none; }
  .ar-foot-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 12px; min-height: 0;
  }
  .ar-foot-label { flex: 1 0 100%; }
}

@media print {
  .arrange, .ar-lift, .ar-ghost, .ar-menu { display: none !important; }
}