/* ===========================================================================
   app.css — the global shell: top bar, the binder view's frame (sidebar,
   toolbar, stage and desk), the Value tab, the menus that hang off the toolbar,
   and the print sheet.

   Tokens and the shared component layer are in design.css, which loads first.
   The binder itself — boards, pockets, cards, page arrows, the page turn and
   the card peek — is in binder.css. The library and sets pages are in
   shell.css, the search sidebar in search.css, arranging pages in arrange.css.
   =========================================================================== */

/* ================================================================== topbar */
/* brand | main nav (or the shared-binder label) | source, privacy, theme,
   preferences, help. Glass, so the app reads as one surface with depth; the nav
   items themselves are in shell.css. */
/* Until boot knows who is here, the app's own bar stays out of sight: a
   visitor who is not signed in gets the landing page, never a flash of the app. */
body.is-booting > .topbar { visibility: hidden; }
.topbar {
  height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  /* Sticky, and opaque — the glass's colour laid over the page's (the views
     scroll inside themselves, below the bar, so nothing was ever behind it to
     blur). Since iOS 26, Safari fills the status bar with a blur that runs a
     row or two down into the page, and ignores theme-color; it paints a solid
     colour there instead only when a fixed or sticky box with a background
     covers the top edge, and takes that box's colour. */
  position: sticky; top: 0;
  z-index: 40;
  background: linear-gradient(var(--glass), var(--glass)), var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--glass-edge);
}
/* the faint violet-blue cast the whole direction rests on */
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 70%);
}
.brand {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; letter-spacing: -0.02em; font-size: 15px;
  color: inherit; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-sm); padding: 4px 8px 4px 4px; margin-left: -2px;
}
.brand[href]:hover .brand-mark { transform: rotate(-6deg); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-mark {
  width: 26px; height: 26px; color: var(--accent-text); flex: none;
  transition: transform var(--t-2) var(--ease-spring);
}
/* a foil sweep over the wordmark, once, on hover */
.brand[href]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--foil); background-size: 240% 100%;
  opacity: 0; mix-blend-mode: color-dodge;
  transition: opacity var(--t-3) var(--ease-out);
}
.brand[href]:hover::after { opacity: .16; animation: brand-sweep 900ms var(--ease-out); }
@keyframes brand-sweep { from { background-position: -80% 0; } to { background-position: 180% 0; } }
:root[data-motion="reduced"] .brand[href]:hover::after,
:root[data-motion="off"] .brand[href]:hover::after { opacity: 0; animation: none; }

.topbar-right { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

.dot-cover {
  width: 11px; height: 14px; border-radius: 2px; flex: none;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.35);
}

/* =================================================================== atoms */
/* Buttons, inputs, chips, badges, toasts and the dialog shell are in design.css. */
.hint { color: var(--ink-3); font-size: var(--fs-sm); margin: 10px 2px; }
.panel-lede { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 12px; }
.panel-h {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 18px 0 8px; font-weight: 650;
}

/* =================================================================== shell */
/* The binder view. Its siblings (#view-home, #view-library, #view-sets) get
   their height here; their contents are styled in home.css and shell.css. */
.shell {
  display: grid;
  grid-template-columns: 330px 1fr;
  height: calc(100vh - 52px - var(--pfbar-h, 0px));
  height: calc(100dvh - 52px - var(--pfbar-h, 0px));
  min-height: 0;
}

.view-home {
  height: calc(100vh - 52px - var(--pfbar-h, 0px));
  height: calc(100dvh - 52px - var(--pfbar-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(900px 420px at 18% -180px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    radial-gradient(760px 380px at 86% -120px, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 72%),
    var(--bg);
}

/* ================================================================= sidebar */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  box-shadow: inset -1px 0 0 var(--hairline);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}

.tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
.tab {
  position: relative; flex: 1; height: 42px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 13px; font-weight: 600;
  transition: color var(--t-1) var(--ease-out);
}
.tab::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--accent);
  transform: scaleX(0); transition: transform var(--t-2) var(--ease-out);
}
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { transform: scaleX(1); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius-sm); }

.panel { display: none; flex-direction: column; min-height: 0; padding: 14px; overflow: hidden; flex: 1; }
.panel.is-active { display: flex; }

.field-row { margin-bottom: 8px; }
.field-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.index-status { margin: 10px 0 4px; }
.index-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); margin-bottom: 5px; }
.progress { height: 5px; background: var(--bg-3); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar {
  height: 100%; width: 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  transition: width var(--t-3) var(--ease-out);
}

.results { flex: 1; overflow-y: auto; margin: 8px -6px 0; padding: 0 6px; min-height: 0; }

/* search result rows */
.res {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px;
  align-items: center; padding: 7px; border-radius: var(--radius-sm);
  cursor: grab; border: 1px solid transparent;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out);
}
.res:hover { background: var(--bg-3); border-color: var(--line); }
.res:active { cursor: grabbing; }
/* pan-y keeps the list scrollable by touch while a sideways drag starts a card drag */
.res { touch-action: pan-y; }
.res-img {
  width: 42px; aspect-ratio: var(--card-ratio); object-fit: cover;
  border-radius: 4px; background: var(--pocket); box-shadow: var(--shadow-1);
}
.res-body { min-width: 0; }
.res-name { font-size: 12.8px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-meta { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-price { font-size: 12.5px; font-weight: 650; color: var(--gold-text); font-variant-numeric: tabular-nums; }

.set-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out);
}
.set-row:hover { background: var(--bg-3); border-color: var(--line); }
.set-name { font-size: 13px; font-weight: 550; }
.set-meta { font-size: 11.5px; color: var(--ink-3); }
.set-go { font-size: 11.5px; color: var(--accent-text); opacity: 0; }
.set-row:hover .set-go { opacity: 1; }

/* ---------------------------------------------------------- the Value tab */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 12px;
  box-shadow: var(--glass-edge), var(--shadow-1);
}
.stat-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 650;
}
.stat-value {
  font-size: 19px; font-weight: 650; margin-top: 3px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.stat-value.accent { color: var(--gold-text); }
.stat-value.is-muted { color: var(--ink-3); font-size: 15px; font-weight: 600; line-height: 1.55; }
.stat-sub { margin-top: 1px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* in place of the rankings and page values while amounts are hidden */
.value-hidden {
  margin: 14px 0 0; padding: 12px 13px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2);
  background: var(--bg-3); border: 1px dashed var(--line); border-radius: var(--radius);
}

.toplist { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 240px; }
.top-row {
  display: grid; grid-template-columns: 20px 30px 1fr auto; gap: 8px; align-items: center;
  padding: 4px 2px; cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--t-1) var(--ease-out);
}
.top-row:hover { background: var(--bg-3); }
/* rank medals: the first three stand out, the rest stay quiet */
.top-rank {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.top-row:nth-child(1) .top-rank,
.top-row:nth-child(2) .top-rank,
.top-row:nth-child(3) .top-rank { color: #22180a; box-shadow: var(--glass-edge), var(--shadow-1); }
.top-row:nth-child(1) .top-rank { background: linear-gradient(150deg, #ffe6a3, var(--gold) 55%, #9a7320); }
.top-row:nth-child(2) .top-rank { background: linear-gradient(150deg, #f2f4f8, #b7bdc9 55%, #7d8697); }
.top-row:nth-child(3) .top-rank { background: linear-gradient(150deg, #f0c9a6, #c08552 55%, #8a5a33); }
.top-img { width: 30px; aspect-ratio: var(--card-ratio); object-fit: cover; border-radius: 3px; background: var(--pocket); }
.top-name { font-size: 12.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-price { font-size: 12.3px; font-weight: 650; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.top-price.is-est { font-weight: 550; opacity: .82; }

.pagebars { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 200px; }
.pagebar { display: grid; grid-template-columns: 42px 1fr 58px; gap: 8px; align-items: center; cursor: pointer; }
.pagebar:hover .pagebar-track { background: var(--line); }
.pagebars.has-names .pagebar { grid-template-columns: 96px 1fr 58px; }
.pagebar-label { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagebar-track {
  position: relative; display: flex; height: 9px; overflow: hidden;
  background: var(--bg-3); border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pagebar-fill {
  flex: none; height: 100%; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 60%, transparent), var(--gold));
}
/* the estimated part of a page's value: the striped end of its bar */
.pagebar-fill:has(+ .pagebar-fill.is-est) { border-radius: 0; }
.pagebar-fill.is-est {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--gold) 75%, transparent) 0 3px, color-mix(in srgb, var(--gold) 30%, transparent) 3px 6px);
}
/* The biggest page catches the light. stats.js can mark it with .is-max; until
   it does, a bar shimmers while the pointer is on its row. */
.pagebar.is-max .pagebar-fill::after,
.pagebar:hover .pagebar-fill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.45) 50%, transparent 66%);
  transform: translateX(-100%);
  animation: bar-shimmer 1.8s var(--ease-in-out) infinite;
}
@keyframes bar-shimmer { to { transform: translateX(100%); } }
:root[data-motion="reduced"] .pagebar .pagebar-fill::after,
:root[data-motion="off"] .pagebar .pagebar-fill::after { content: none; }
.pagebar-val { font-size: 11.5px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.empty { color: var(--ink-3); font-size: var(--fs-sm); text-align: center; padding: 26px 12px; }

/* =================================================================== stage */
.stage {
  position: relative;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  /* The desk: a lit surface with a soft vignette, so the binder sits on something. */
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent-2) 5%, transparent), transparent 62%),
    radial-gradient(100% 120% at 50% 50%, transparent 30%, color-mix(in srgb, #000 30%, transparent) 100%),
    var(--bg);
}
:root[data-theme="light"] .stage {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 62%),
    radial-gradient(100% 120% at 50% 50%, transparent 40%, rgba(20,24,32,.07) 100%),
    var(--bg);
}

.toolbar {
  /* positioned, so labels hidden for screen readers inside it stay within its scroll area
     instead of widening the whole page */
  position: relative; z-index: 3;
  height: 46px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  overflow-x: auto; scrollbar-width: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toolbar { background: var(--bg-2); }
}
.toolbar::-webkit-scrollbar { display: none; }
/* Grouped segments: each cluster of controls reads as one piece of hardware. */
.tool-group {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 3px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.tool-group.grow { flex: 1; justify-content: center; background: none; box-shadow: none; }
.tool-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 650; }
/* Narrower desks: the grid select reads "3 × 3" by itself, and the room goes to the currency picker. */
@media (max-width: 1280px) {
  .tool-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
/* Tighter still: the same controls in less room, and the value pill's amount stands alone. */
@media (max-width: 1180px) {
  .toolbar { gap: 10px; padding: 0 10px; }
  .tool-group { gap: 4px; }
  .value-pill-word { display: none; }
}

/* the page counter, which opens the jump-to-page menu */
.page-indicator {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  /* wide enough for "Pages 88–89 of 99", so the arrows beside it hold still while paging */
  height: 28px; min-width: 150px; padding: 0 9px 0 10px;
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.page-indicator::after {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .65;
}
.page-indicator:hover { color: var(--ink); background: var(--bg-3); border-color: var(--line); }
.page-indicator[aria-expanded="true"] {
  color: var(--ink); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-3));
}
.page-indicator:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* jump-to-page menu (pagemenu.js): fixed, since the toolbar clips what overflows it */
.pmenu {
  position: fixed; z-index: 55;
  display: flex; flex-direction: column;
  width: min(272px, calc(100vw - 16px));
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--shadow-2);
  animation: pmenu-in var(--t-2) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pmenu { background: var(--bg-2); }
}
@keyframes pmenu-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .pmenu { animation: none; }
  button.page-name, .page-name-ico { transition: none; }
}
.pmenu-head {
  flex: none; padding: 9px 12px 7px; border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.pmenu-list {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1px; padding: 4px;
}
.pmenu-item {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: 8px;
  flex: none; width: 100%; height: 30px; padding: 0 10px 0 4px;
  background: transparent; border: none; border-radius: 7px;
  font-size: 13px; text-align: left; cursor: pointer;
}
.pmenu-item:hover,
.pmenu-item:focus { background: var(--bg-3); outline: none; }
.pmenu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pmenu-item[aria-current] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.pmenu-item[aria-current]:focus-visible { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 2px var(--accent); }
.pmenu-no { text-align: right; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pmenu-item[aria-current] .pmenu-no { color: var(--accent-text); }
.pmenu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pmenu-name:not(:empty)::before { content: "·"; margin-right: 7px; color: var(--ink-3); }
.pmenu-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The binder's cover, above the pages — where it is in the binder itself. */
.pmenu-top { flex: none; padding: 4px; border-bottom: 1px solid var(--line-soft); }
.pmenu-item.pmenu-cover .pmenu-name::before { content: none; }
/* "Arrange pages…", below the scrolling list */
.pmenu-foot { flex: none; padding: 4px; border-top: 1px solid var(--line-soft); }
.pmenu-item.pmenu-arrange { grid-template-columns: 2.4em minmax(0, 1fr); font-weight: 550; }
.pmenu-ico { display: grid; place-items: center; justify-self: end; margin-right: 1px; color: var(--accent-text); line-height: 0; }

.value-pill {
  font-size: 13px; font-weight: 650; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  padding: 3px 12px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums;
}
/* One line wherever the toolbar has the room (narrower, it wraps rather than push more off it). */
@media (min-width: 1181px) {
  .value-pill { white-space: nowrap; }
}
.value-pill.subtle { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
/* A total that counts estimated prices: "incl. ~$56 est." in small type under it, which
   takes less of the toolbar than the same words beside it would. */
.value-pill.has-est {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 2px 12px 3px; border-radius: 11px; line-height: 1.15; white-space: nowrap;
}
.value-pill-est { font-size: 10.5px; font-weight: 550; opacity: .8; }
/* Below this the toolbar has no room to spare: the currency picker shows its code alone. */
@media (max-width: 1500px) {
  .value-pill { padding-left: 10px; padding-right: 10px; }
  .toolbar .cur-btn { padding: 0 7px; }
  .toolbar .cur-btn::after { display: none; }
}

/* The display currency: a quiet button beside the value, like the page counter. */
.cur-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 8px 0 9px;
  font-size: 12px; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.cur-btn::after {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .65;
}
.cur-btn:hover { color: var(--ink); background: var(--bg-3); border-color: var(--ink-3); }
.cur-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); }
.cur-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cur-btn.is-field { height: 34px; padding: 0 10px 0 11px; font-size: 13px; color: var(--ink); background: var(--bg); }

/* its menu (currency.js): a filter box over the list of currencies */
.pmenu.cur-menu { width: min(300px, calc(100vw - 16px)); }
.cur-search { flex: none; padding: 8px 8px 4px; }
.cur-search .input { width: 100%; height: 30px; }
.cur-list { gap: 0; }
.cur-group {
  flex: none; padding: 8px 8px 4px;
  font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.cur-opt {
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 1em; align-items: center; gap: 8px;
  flex: none; height: 30px; padding: 0 10px 0 8px; border-radius: 7px;
  font-size: 13px; cursor: pointer;
}
.cur-opt:hover { background: var(--bg-3); }
.cur-opt.is-active { background: var(--bg-3); box-shadow: inset 0 0 0 2px var(--accent); }
.cur-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cur-opt[aria-selected="true"].is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.cur-opt-code { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cur-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cur-opt-tick { color: var(--accent-text); font-weight: 800; text-align: right; }
.cur-foot { flex: none; padding: 7px 12px 9px; border-top: 1px solid var(--line-soft); }
.cur-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.cur-note.is-warn { color: var(--gold-text); }

/* Privacy mode (the top bar's coin): the value pill says the value is hidden. */
.value-pill.is-hidden {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); background: var(--bg-3); border-color: var(--line);
}
.value-pill-eye { display: inline-grid; line-height: 0; }
.privacy-btn.is-on { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--bg-3)); }

/* Quick view: All · Owned · Missing (binders that track owned cards), one quiet control. */
.quick-view {
  display: inline-flex; flex: none; padding: 2px; gap: 2px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.quick-view button {
  height: 24px; padding: 0 9px; border: none; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--ink-3); background: transparent; white-space: nowrap;
  transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.quick-view button:hover { color: var(--ink); background: var(--bg-3); }
.quick-view button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-fill); }
.quick-view button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The padlock (Binder settings → Protection): quiet when open, gold and labelled when locked. */
.lock-btn { gap: 6px; padding: 0 9px; }
.lock-btn .lock-shut, .lock-btn .lock-label { display: none; }
.lock-btn.is-locked .lock-open { display: none; }
.lock-btn.is-locked .lock-shut, .lock-btn.is-locked .lock-label { display: inline; }
.lock-btn.is-locked {
  color: var(--gold-text); font-weight: 650;
  background: color-mix(in srgb, var(--gold) 14%, var(--bg-3));
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
}
.lock-btn.is-locked:hover { background: color-mix(in srgb, var(--gold) 22%, var(--bg-3)); border-color: var(--gold); }

/* Toolbar labels give way, step by step, when its contents would not fit (app.js fitToolbar):
   first the button labels, then the smaller words, then the first / last page buttons. */
.toolbar .btn-label { white-space: nowrap; }
.toolbar.fit-1 .tool-group > .btn:not(.lock-btn) .btn-label,
.toolbar.fit-1 .lock-btn .lock-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.toolbar.fit-1 .tool-group > .btn:has(> .btn-label) { width: 32px; padding: 0; justify-content: center; }
.toolbar.fit-1 .lock-btn { width: 32px; padding: 0; justify-content: center; }
.toolbar.fit-2 .tool-label,
.toolbar.fit-2 .value-pill-word,
.toolbar.fit-2 .cp-word {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.toolbar.fit-2 { gap: 10px; }
.toolbar.fit-2 .quick-view button { padding: 0 7px; }
.toolbar.fit-3 #page-first, .toolbar.fit-3 #page-last { display: none; }
/* Last: the currency (also in Preferences) and the completion (also in the Value tab) step
   aside, Spread becomes its icon, and the quick view shows its current choice, which a
   click moves on (All → Owned → Missing). */
.toolbar.fit-4 #btn-currency, .toolbar.fit-4 #completion-pill { display: none !important; }
.toolbar.fit-4 .page-indicator { min-width: 0; }
.toolbar.fit-4 #spread-toggle { width: 32px; padding: 0; justify-content: center; }
.toolbar.fit-4 #spread-toggle .btn-label-late {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.toolbar.fit-4 .quick-view button:not([aria-pressed="true"]) { display: none; }
.toolbar.fit-4 .quick-view button[aria-pressed="true"] { display: inline-flex; align-items: center; gap: 5px; }
.toolbar.fit-4 .quick-view button[aria-pressed="true"]::after {
  content: ""; width: 4px; height: 4px; margin-top: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
#spread-toggle svg { display: none; }
.toolbar.fit-4 #spread-toggle svg { display: block; }
.value-pill.subtle { white-space: nowrap; }

/* ============================================================ the rail
   On a wide desk the toolbar stands beside the binder instead of over it: the
   same controls (one DOM, so everything that presses or reads them still
   does), arranged in sections — the pages, the binder's value with its owned,
   missing and total (stats.js totalsNode) and how complete it is, the view,
   and the binder's actions as labelled buttons. The section labels, the
   totals and the Settings label are the rail's alone; narrower, the toolbar is
   the bar over the binder it always was (below 1360px, where the binder needs
   the width), and a phone's Actions sheet has the totals (more-panel.js). */
.rail-h, .bt-host, .rail-label, .rail-top, .rail-portfolio { display: none; }

/* the totals block, wherever it is drawn */
.bt { display: flex; flex-direction: column; gap: 2px; }
.bt-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px;
  padding: 5px 2px; font-variant-numeric: tabular-nums;
}
.bt-row + .bt-row { border-top: 1px solid var(--hairline, var(--line)); }
.bt-k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.bt-n { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-v { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bt-row.is-owned .bt-v { color: var(--gold-text); }
.bt-row.is-missing .bt-v { color: var(--danger); }
.bt-row.is-total .bt-k, .bt-row.is-total .bt-v { color: var(--ink); }
.bt-done { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bt-bar { display: block; height: 7px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--hairline); }
.bt-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, transparent), var(--accent)); }
.bt-pct { font-size: 12px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
/* in the phone's Actions sheet: a card of its own above the commands */
#more-panel > .bt { padding: 6px 12px 10px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.bt-where { margin: 0 2px 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bt-none { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* From here the binder keeps a comfortable size beside the sidebar and the rail. */
@media (min-width: 1360px) {
  .stage {
    --rail-w: 272px;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); grid-template-rows: minmax(0, 1fr);
  }
  .stage > .binder-frame { grid-column: 1; grid-row: 1; min-width: 0; }
  /* Arranging pages takes the whole desk, as it took the toolbar's place and the binder's before. */
  .stage > .arrange { grid-column: 1 / -1; grid-row: 1; }
  .stage > .toolbar {
    grid-column: 2; grid-row: 1;
    height: auto; min-height: 0;
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; align-items: center;
    gap: 7px; padding: 16px 14px 22px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    border-bottom: 0; border-left: 1px solid var(--line);
  }
  /* The sections lay their controls straight into the rail's grid; the pages keep their row. */
  .stage > .toolbar > .tool-group:not(.tool-pages) { display: contents; }
  .stage > .toolbar > .tool-pages {
    order: 1; grid-column: 1 / -1; justify-content: space-between;
  }
  .stage > .toolbar #page-first, .stage > .toolbar #page-last { display: none; }
  .stage > .toolbar .page-indicator { flex: 1; min-width: 0; }

  .stage > .toolbar .rail-h {
    display: block; grid-column: 1 / -1; margin: 14px 2px 1px;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  }
  .stage > .toolbar .rail-h-value { order: 2; }
  .stage > .toolbar #value-pill {
    order: 3; grid-column: 1 / -1; justify-self: stretch;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 9px 14px; border-radius: var(--radius); font-size: 20px; font-weight: 750; text-align: left; white-space: normal;
  }
  .stage > .toolbar #value-pill.has-est { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stage > .toolbar #value-pill .value-pill-word { display: inline; font-size: 12px; font-weight: 600; opacity: .75; }
  .stage > .toolbar #value-pill .value-pill-est { font-size: 11.5px; }
  .stage > .toolbar .bt-host { display: block; order: 4; grid-column: 1 / -1; padding: 2px 2px 0; }
  /* how complete it is: the totals' bar says it, so the pill does not */
  .stage > .toolbar #completion-pill { display: none !important; }

  /* Binder Value, Binder Actions, Display Settings, and the most valuable cards last. */
  .stage > .toolbar .rail-h-view { order: 7; }
  .stage > .toolbar #btn-view { order: 8; grid-column: 1 / -1; max-width: none; justify-content: flex-start; height: 34px; }
  .stage > .toolbar #btn-view .view-btn-name { flex: 1; text-align: left; }
  .stage > .toolbar .tool-grid .tool-label { display: none; }
  .stage > .toolbar #layout-select { order: 9; width: 100%; height: 34px; }
  .stage > .toolbar #spread-toggle { order: 9; height: 34px; justify-content: center; gap: 6px; }
  .stage > .toolbar #spread-toggle svg { display: block; }

  .stage > .toolbar .rail-h-actions { order: 5; }
  .stage > .toolbar .tool-actions > .btn {
    order: 6; width: 100%; height: 36px; padding: 0 10px; justify-content: flex-start; gap: 8px;
  }
  .stage > .toolbar .tool-actions > .btn .btn-label,
  .stage > .toolbar .rail-label { display: inline; }
  .stage > .toolbar #btn-settings { width: 100%; }
  .stage > .toolbar .lock-btn:not(.is-locked)::after { content: "Lock"; }

  /* which portfolio it is in, under its value */
  .stage > .toolbar .rail-h-portfolio { order: 4; }
  .stage > .toolbar .rail-h-portfolio[hidden] { display: none; }
  .stage > .toolbar .rail-portfolio {
    order: 4; grid-column: 1 / -1; display: flex; align-items: center; gap: 9px;
    width: 100%; height: 36px; padding: 0 12px; justify-content: flex-start; text-align: left;
  }
  .stage > .toolbar .rail-portfolio[hidden] { display: none; }
  .rail-portfolio-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  .rail-portfolio-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
  .rail-portfolio-act { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
  .rail-portfolio:hover .rail-portfolio-act { color: var(--accent-text); }

  /* the binder's most valuable cards, last */
  .stage > .toolbar .rail-h-top { order: 12; }
  .stage > .toolbar .rail-h-top[hidden] { display: none; }
  .stage > .toolbar .rail-top { order: 13; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
  .stage > .toolbar .rail-top[hidden] { display: none; }
  .rail-top-row {
    display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; padding: 5px 6px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font: inherit; color: var(--ink); text-align: left;
  }
  .rail-top-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .rail-top-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .rail-top-rank { font-size: 11px; font-weight: 750; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
  .rail-top-img { width: 30px; aspect-ratio: var(--card-ratio); object-fit: cover; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); background: var(--pocket); }
  .rail-top-t { display: flex; flex-direction: column; min-width: 0; }
  .rail-top-t b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-top-t span { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-top-v { font-size: 12.5px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
}

/* ============================================================= the desk
   The binder and its side arrows. The scroller is only as wide as the binder
   (it scrolls once the binder is wider than the room left), so the arrows sit
   right beside it, tucked into its padding; binder.js leaves room for them.
   The binder itself, and the arrows, are in binder.css. */
.binder-frame {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.binder-scroll {
  flex: 0 1 auto; align-self: stretch; min-width: 0;
  overflow: auto; padding: 26px; display: flex;
  /* The binder casts its own shadow (binder.css): a filter here re-rasterised
     the whole subtree on every repaint inside it, which is what made dragging
     and page turns drop frames. --desk-shadow lives on, used there. */
}
:root { --desk-shadow: 0 22px 48px rgba(0,0,0,.45); }
:root[data-theme="light"] { --desk-shadow: 0 18px 38px rgba(20,24,32,.22); }

/* a background on the desk around the binder rather than on its pages (backdrop.js) */
.binder-frame > .bg-layer.is-desk { z-index: 0; border-radius: 0; }
.binder-frame > .binder-scroll { position: relative; z-index: 1; }

/* A locked binder says so above its pages (the toolbar's padlock unlocks it). */
.lock-chip {
  position: absolute; z-index: 4; top: 4px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); pointer-events: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: var(--shadow-1);
}
.binder-frame:not(.is-locked) > .lock-chip { display: none; }

/* ================================================================== dialogs
   The shell (.modal-root, .modal) is in design.css; what follows is the inside
   of a dialog, and belongs to the dialogs engineer (settings, preferences, card
   details, help — see dialogs.css). Left as it was. */
.modal-head { padding: 16px 18px 0; }
.modal-head h2 { margin: 0 0 3px; font-size: 16px; }
.modal-head p { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 0 18px 16px; display: flex; gap: 8px; justify-content: flex-end; }

.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row > label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.form-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.check.settings-check { font-size: 13.5px; color: var(--ink); }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 28px; height: 34px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; box-shadow: var(--shadow-1); padding: 0; }
.swatch.is-on { border-color: var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.share-url { display: flex; gap: 7px; }
.share-url .input { font-family: var(--mono); font-size: 12px; }

.kbd { font-family: var(--mono); font-size: 11px; background: var(--bg-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
.help-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.help-list li { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.help-list span:last-child { color: var(--ink-2); text-align: right; }
/* One column on a phone (the list wraps): the words read from the left there. */
@media (max-width: 560px) { .help-list span:last-child { text-align: left; } }

/* ================================================================ responsive */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 44vh) minmax(0, 1fr); }
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); box-shadow: none; }
  .binder-scroll { padding: 14px; }
  .topbar { gap: 8px; }
  .brand span { display: none; }
  #source-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-view button, .tab, .tab::after, .brand-mark { transition: none; }
  .pagebar .pagebar-fill::after { content: none; }
}

/* ==================================================================== print
   Only the binder prints. The page setup lives here; the pockets and cards are
   at the bottom of binder.css. */
@media print {
  @page { size: letter portrait; margin: 0.4in; }
  body { overflow: visible; background: #fff; }
  /* Never the nav, the home page, the library or the sets page. */
  .topbar, .sidebar, .toolbar, .view-home, .view-library, .view-sets, .modal-root, .toast-stack,
  .pmenu, .lock-chip { display: none !important; }
  .shell { display: block; height: auto; }
  .stage { background: #fff !important; }
  .binder-frame { display: block; }
  .binder-scroll { display: block; overflow: visible; padding: 0; filter: none; }
}

/* ==================================================== the side panels' look
   The binder page's two panels wear what the card dialog set: the accent
   washed into their top corner, headings with an accent bar, figures as tiles,
   actions with their icons on tiles of their own colour, and the binder's
   value large and lit in gold. The search panel (left) and the rail beside the
   binder on a wide desk (right) alike; the phone's sheet is the same panel. */

/* ---- the search panel (left) */
.sidebar {
  background:
    radial-gradient(140% 32% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    var(--bg-2);
}
/* its tabs: a track, the one showing a raised pill with its icon lit */
.sidebar .tabs {
  gap: 3px; margin: 10px 10px 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
:root[data-theme="light"] .sidebar .tabs { box-shadow: inset 0 1px 2px rgba(20, 24, 32, .08); }
.sidebar .tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 9px; color: var(--ink-2);
  transition: color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.sidebar .tab::after { display: none; }
.sidebar .tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sidebar .tab.is-active {
  color: var(--ink); background: var(--bg-3);
  box-shadow: inset 0 1px 0 var(--hairline), 0 2px 10px rgba(0, 0, 0, .3), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
:root[data-theme="light"] .sidebar .tab.is-active { background: var(--bg-2); box-shadow: 0 1px 4px rgba(20, 24, 32, .14), 0 0 0 1px var(--line); }
.tab-ico { display: inline-grid; place-items: center; flex: none; }
.tab-ico svg { display: block; }
.sidebar .tab.is-active .tab-ico { color: var(--accent-text); }
@media (max-width: 380px) { .tab-ico { display: none; } }

/* its search results: rows that lift under the pointer, the art lit as they do */
.sidebar .srch .res { border-radius: 12px; transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out); }
@media (hover: hover) {
  .sidebar .srch .res:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .7); }
  .sidebar .srch .res:hover .res-img { box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6), 0 0 16px -4px color-mix(in srgb, var(--accent) 50%, transparent); }
}
.sidebar .srch .res-img { border-radius: 5px; transition: box-shadow var(--t-1) var(--ease-out); }

/* the Sets tab's rows */
.set-row { border-radius: 12px; }
.set-row:hover { background: color-mix(in srgb, var(--bg-3) 85%, transparent); box-shadow: var(--glass-edge); }

/* a panel's section heading, with the accent bar (the Value tab's, the rail's) */
.panel-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 720; letter-spacing: -0.005em; text-transform: none; color: var(--ink);
}
.panel-h::before {
  content: ""; flex: none; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* the Value tab: its figures as tiles, the binder's value the lit one */
.stat {
  border-radius: 14px; padding: 12px 13px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  box-shadow: var(--glass-edge);
}
.stat:has(.stat-value.accent) {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
  background:
    radial-gradient(130% 140% at 0% 0%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow: var(--glass-edge), 0 14px 30px -20px color-mix(in srgb, var(--gold) 70%, transparent);
}
.stat-value { font-size: 21px; font-weight: 750; }
.top-row { padding: 5px 6px; border-radius: 12px; }
.top-img { width: 32px; border-radius: 4px; box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .55); }
.pagebar-track { height: 10px; }
.pagebar-fill { box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 40%, transparent); }

/* ---- the totals block (the rail's, and the phone's Actions sheet's): figures as tiles */
.bt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bt-where, .bt-done { grid-column: 1 / -1; }
.bt-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 9px 11px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  border: 1px solid var(--line); box-shadow: var(--glass-edge);
}
.bt-row + .bt-row { border-top: 1px solid var(--line); }
.bt-k { order: 0; font-size: 10px; }
.bt-v { order: 1; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bt-n { order: 2; font-size: 11px; max-width: 100%; }
.bt-row.is-slots { grid-column: 1 / -1; }
.bt:has(.is-owned) .bt-row.is-total { grid-column: 1 / -1; }
.bt-row.is-owned { border-color: color-mix(in srgb, var(--gold) 28%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, color-mix(in srgb, var(--bg-3) 70%, transparent)); }
.bt-row.is-missing { border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); }
/* how full the pockets are, under the Slots figures */
.bt-fill { order: 3; display: block; align-self: stretch; height: 6px; margin-top: 5px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.bt-fill > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.bt-bar { height: 8px; }
.bt-bar > span { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
/* the phone's Actions sheet: the tiles are the cards now, with no card around them */
#more-panel > .bt { padding: 0; background: none; border: 0; }

/* ---- the rail beside the binder (right), on a wide desk */
@media (min-width: 1360px) {
  /* A little wider than it was, for the icon tiles; two even columns that may
     shrink (a long label ellipsizes rather than pushing past the padding); and
     a thin gutter of its own for the scrollbar, so nothing ever meets the edge. */
  .stage { --rail-w: 292px; }
  .stage > .toolbar {
    background:
      radial-gradient(150% 30% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
      var(--glass);
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-right: 12px;
    scrollbar-width: thin; scrollbar-gutter: stable;
  }
  .stage > .toolbar > * { min-width: 0; }
  /* its section headings: the accent bar */
  .stage > .toolbar .rail-h {
    display: flex; align-items: center; gap: 8px; margin: 16px 2px 2px;
    font-size: 13.5px; font-weight: 720; letter-spacing: -0.005em; text-transform: none; color: var(--ink);
  }
  .stage > .toolbar .rail-h[hidden] { display: none; }
  .stage > .toolbar .rail-h::before {
    content: ""; flex: none; width: 4px; height: 14px; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  /* the pages: a pill to say where you are, between the two arrows */
  .stage > .toolbar .page-indicator { height: 34px; border-radius: var(--radius-pill); }
  /* the binder's value, large and lit in gold, as the card dialog shows a card's */
  .stage > .toolbar #value-pill {
    padding: 14px 16px 15px; border-radius: 16px; font-size: 28px; letter-spacing: -0.03em;
    color: var(--gold-text);
    background:
      radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%),
      color-mix(in srgb, var(--bg) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
    box-shadow: var(--glass-edge), 0 16px 34px -22px color-mix(in srgb, var(--gold) 75%, transparent);
  }
  .stage > .toolbar #value-pill .value-pill-word { letter-spacing: .02em; text-transform: uppercase; font-size: 10.5px; font-weight: 700; }
  /* which portfolio: a pill with its colour lit */
  .stage > .toolbar .rail-portfolio { height: 40px; border-radius: 12px; }
  .rail-portfolio-dot { width: 11px; height: 11px; box-shadow: 0 0 10px currentColor, inset 0 0 0 1px rgba(255, 255, 255, .2); }
  /* the binder's actions: each icon on a tile in its own colour (--tone) */
  .stage > .toolbar .tool-actions > .btn {
    --tone: var(--accent);
    min-width: 0; height: 44px; padding: 0 7px 0 6px; gap: 7px; border-radius: 12px; font-size: 12.5px;
    background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  }
  .stage > .toolbar .tool-actions > .btn .btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stage > .toolbar .tool-actions > .btn > svg {
    box-sizing: border-box; flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent);
    transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
  }
  .stage > .toolbar .tool-actions > .btn:hover {
    border-color: color-mix(in srgb, var(--tone) 45%, var(--line));
    background: color-mix(in srgb, var(--tone) 8%, var(--bg-3));
  }
  .stage > .toolbar .tool-actions > .btn:hover > svg { color: #0b0d12; background: var(--tone); }
  .stage > .toolbar #btn-addpage { --tone: #4ade80; }
  .stage > .toolbar #btn-arrange { --tone: #22d3ee; }
  .stage > .toolbar #btn-share { --tone: #60a5fa; }
  .stage > .toolbar #btn-import { --tone: #a78bfa; }
  .stage > .toolbar #btn-photos { --tone: #38bdf8; }
  .stage > .toolbar #btn-copybinder { --tone: #2dd4bf; }
  .stage > .toolbar #btn-export { --tone: #818cf8; }
  .stage > .toolbar #btn-lock { --tone: #fbbf24; }
  .stage > .toolbar #btn-settings { --tone: #c084fc; }
  :root[data-theme="light"] .stage > .toolbar .tool-actions > .btn > svg { color: color-mix(in srgb, var(--tone) 60%, #000); }
  :root[data-theme="light"] .stage > .toolbar .tool-actions > .btn:hover > svg { color: #fff; }
  /* the view, the grid and the spread */
  .stage > .toolbar #btn-view, .stage > .toolbar #layout-select, .stage > .toolbar #spread-toggle { min-width: 0; height: 38px; border-radius: 12px; }
  /* the most valuable cards: medals for the first three, the art lit */
  .stage > .toolbar .rail-top { gap: 4px; }
  .rail-top-row {
    grid-template-columns: 22px 34px minmax(0, 1fr) auto; padding: 6px 8px; border-radius: 12px;
    background: color-mix(in srgb, var(--bg-3) 45%, transparent); border: 1px solid transparent;
    transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
  }
  .rail-top-row:hover { background: color-mix(in srgb, var(--bg-3) 85%, transparent); border-color: var(--line); transform: translateX(2px); }
  .rail-top-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; }
  .rail-top-row:nth-child(-n + 3) .rail-top-rank { color: #22180a; box-shadow: var(--glass-edge), var(--shadow-1); }
  .rail-top-row:nth-child(1) .rail-top-rank { background: linear-gradient(150deg, #ffe6a3, var(--gold) 55%, #9a7320); }
  .rail-top-row:nth-child(2) .rail-top-rank { background: linear-gradient(150deg, #f2f4f8, #b7bdc9 55%, #7d8697); }
  .rail-top-row:nth-child(3) .rail-top-rank { background: linear-gradient(150deg, #f0c9a6, #c08552 55%, #8a5a33); }
  .rail-top-img { width: 34px; border-radius: 4px; box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .6); }
}

/* ======================================================= the bar over the binder
   Below the rail's width the toolbar is a bar under the top bar, made as the
   Home page's portfolio bar is (portfolio.css .pfbar): no hard line between the
   two, the top bar's soft shadow on it, a shade lighter, lifted off the page.
   Its controls are capsules: the pager, the value (labelled, as Home's numbers
   are), the view, the grid and the tools. */
@media (max-width: 1359px) {
  body:has(> #view-binder:not([hidden])) > .topbar {
    border-bottom-color: transparent;
    box-shadow: var(--glass-edge), 0 5px 12px -7px var(--pfbar-shade);
  }
  .stage > .toolbar {
    height: 48px;
    background: linear-gradient(180deg, var(--pfbar-from), var(--pfbar-bg) 30px, var(--pfbar-bg));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    box-shadow:
      0 2px 5px -2px var(--pfbar-shade),
      0 14px 30px -14px var(--pfbar-shade-far);
  }
  /* the faint violet cast the top bar rests on, under the controls */
  .stage > .toolbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 3%, transparent), transparent 60%);
  }

  /* a capsule of glass around each cluster, its buttons round inside it */
  .stage > .toolbar .tool-group:not(.grow) {
    height: 36px; padding: 2px; gap: 2px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-2) 80%, transparent);
    box-shadow: var(--glass-edge), inset 0 0 0 1px var(--line);
  }
  .stage > .toolbar .tool-group.grow { gap: 8px; }
  .stage > .toolbar .tool-group > .btn {
    height: 30px; min-width: 30px; border-radius: var(--radius-pill); box-shadow: none;
    font-size: 12.5px; font-weight: 600;
  }
  .stage > .toolbar .tool-group > .btn-icon { width: 30px; padding: 0; }
  .stage > .toolbar .tool-group > .btn:not(.is-on):not(.is-locked) {
    color: var(--ink-2); background: transparent; border-color: transparent;
  }
  @media (hover: hover) {
    .stage > .toolbar .tool-group > .btn:not(.is-on):not(.is-locked):not(:disabled):hover {
      color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent);
    }
  }
  .stage > .toolbar .tool-group > .btn:disabled { opacity: .35; }
  .stage > .toolbar.fit-1 .tool-group > .btn:has(> .btn-label),
  .stage > .toolbar.fit-1 .lock-btn { width: 30px; }

  /* the pager: ‹ Page 3 of 8 › */
  .stage > .toolbar .page-indicator {
    height: 30px; padding: 0 10px 0 12px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 650; color: var(--ink);
  }
  .stage > .toolbar .page-indicator:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: transparent; }
  .stage > .toolbar .page-indicator[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

  /* the grid's select, at home in its capsule */
  .stage > .toolbar #layout-select {
    height: 30px; border-radius: var(--radius-pill); padding-left: 11px;
    font-weight: 600; background-color: transparent; border-color: transparent; box-shadow: none;
  }
  @media (hover: hover) { .stage > .toolbar #layout-select:hover { background-color: color-mix(in srgb, var(--ink) 8%, transparent); } }

  /* the value: a gold capsule, its amount under a label */
  .stage > .toolbar #value-pill {
    display: inline-grid; grid-template-columns: auto auto; align-content: center; justify-items: start;
    column-gap: 6px; row-gap: 0;
    height: 36px; padding: 0 15px; border-radius: var(--radius-pill); line-height: 1.15;
    font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; text-align: left;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 15%, var(--bg-2)), color-mix(in srgb, var(--gold) 6%, var(--bg-2)));
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    box-shadow: var(--glass-edge), 0 8px 18px -12px color-mix(in srgb, var(--gold) 70%, transparent);
    cursor: pointer;
  }
  .stage > .toolbar #value-pill::before {
    content: "Value"; grid-column: 1 / -1;
    font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: color-mix(in srgb, var(--gold-text) 62%, var(--ink-3));
  }
  .stage > .toolbar #value-pill .value-pill-word { display: none; }
  .stage > .toolbar .value-pill-est { align-self: baseline; font-size: 11px; font-weight: 550; color: var(--ink-3); opacity: 1; }
  .stage > .toolbar #value-pill.is-hidden { color: var(--ink-2); background: color-mix(in srgb, var(--bg-2) 80%, transparent); border-color: var(--line); box-shadow: var(--glass-edge); }
  .stage > .toolbar #value-pill.is-hidden::before { color: var(--ink-3); }
  @media (hover: hover) { .stage > .toolbar button#value-pill:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); } }
  .stage > .toolbar #completion-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; box-shadow: var(--glass-edge); }

  /* the view: the same glass as the portfolio switcher */
  .stage > .toolbar .view-btn {
    height: 36px; font-size: 12.5px; color: var(--ink);
    background: color-mix(in srgb, var(--bg-2) 80%, transparent);
    border-color: var(--line); box-shadow: var(--glass-edge);
  }
  .stage > .toolbar .view-btn > svg:first-child { color: var(--accent-text); }
  @media (hover: hover) { .stage > .toolbar .view-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } }
  .stage > .toolbar .view-btn.is-filtered {
    color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  }
}
/* tighter, the estimate's note is the value's title alone */
@media (max-width: 1180px) {
  .stage > .toolbar #value-pill .value-pill-est { display: none; }
}
@media (max-width: 980px) {
  .stage > .toolbar { height: 46px; }
}