/* Top navigation, binder library and sets pages. Owned by the shell (see app.js, library.js, sets-page.js). */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }

/* =================================================================== top nav
   FOUNDATION-OWNED (app.js drives it; see also .topbar in app.css). A pill row
   with one indicator that slides between items — please leave it to the shell. */
.topnav {
  position: relative;
  display: flex; align-items: stretch; align-self: stretch;
  gap: 2px; min-width: 0; margin-left: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }

/* The sliding indicator: app.js FLIPs it from item to item. */
.nav-pill {
  position: absolute; top: 9px; bottom: 9px; left: 0; width: 0;
  z-index: 0; pointer-events: none;
  border-radius: var(--radius-pill);
  transform-origin: left center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 16%, transparent);
}

.nav-item {
  position: relative; isolation: isolate; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; min-width: 0;
  color: var(--ink-2); text-decoration: none;
  font-size: 13.5px; font-weight: 550; white-space: nowrap;
  outline: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-1) var(--ease-out);
}
/* hover / focus pill, behind the item's own content */
.nav-item::before {
  content: ""; position: absolute; inset: 9px 0; z-index: -1;
  border-radius: var(--radius-pill); background: transparent;
  transition: background var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
.nav-item:hover { color: var(--ink); }
.nav-item:hover::before { background: var(--bg-3); }
.nav-item:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }
.nav-item[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav-item[aria-current="page"]:hover::before { background: transparent; }
.nav-item[aria-current="page"] .nav-icon { color: var(--accent); opacity: 1; }

.nav-icon { width: 17px; height: 17px; flex: none; opacity: .85; }

.nav-binder { flex: 0 1 auto; max-width: 300px; }
.nav-binder:has(.nav-binder-group:not([hidden])) { max-width: 400px; }
.nav-binder-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the binder's group, as a breadcrumb in front of its name */
.nav-binder-group {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 2 auto; min-width: 0; max-width: 45%;
  margin-right: -2px; color: var(--ink-3); font-weight: 550;
}
.nav-binder-group-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-binder-sep { flex: none; font-weight: 700; }
.nav-dirty { color: var(--gold); font-weight: 800; margin-left: -4px; }

/* shared (read-only) links: brand + this label only */
.shared-label {
  display: flex; align-items: center; gap: 9px; min-width: 0; margin-left: 6px;
  font-size: 13.5px; font-weight: 600;
}
.shared-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.shared-pill {
  flex: none; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 99px;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.shared-exit {
  flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px;
  border-radius: 99px; font-size: 12px; font-weight: 650; white-space: nowrap; text-decoration: none;
  color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.shared-exit:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.shared-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =================================================================== views
   The Binders shelf and the Sets gallery. Both build on design.css: tokens,
   buttons, chips, skeletons and the motion layer come from there, so anything
   here is only what these two pages add. */
.view-library,
.view-sets {
  height: calc(100vh - 52px - var(--pfbar-h, 0px));
  height: calc(100dvh - 52px - var(--pfbar-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg);
}
/* A faint glow over the shelf so the library reads as a place, not a list. */
.view-library {
  background:
    radial-gradient(1200px 380px at 50% -160px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg);
}
.view-sets {
  background:
    radial-gradient(1000px 320px at 78% -150px, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%),
    var(--bg);
}

.view-wrap { max-width: 1240px; margin: 0 auto; padding: 26px 32px 84px; }
.view-head { margin-bottom: 20px; }
.view-title { margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.view-lede { margin: 7px 0 0; color: var(--ink-2); font-size: 13.5px; max-width: 620px; }
.lib-eyebrow {
  margin: 0 0 6px; font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text);
}

/* the leatherette grain both pages use for binder boards (generated, never fetched) */
.lib-view, .sets-view {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* shared toolbar fields */
.field-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 340px; }
.field-search > .ico { position: absolute; left: 11px; color: var(--ink-3); pointer-events: none; }
.field-search .input { padding-left: 33px; padding-right: 30px; height: 34px; }
.field-search .input::-webkit-search-cancel-button { display: none; }
.field-clear {
  position: absolute; right: 5px; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--ink-3); cursor: pointer;
  transition: color var(--t-1) var(--ease-out), background var(--t-1) var(--ease-out);
}
.field-clear:hover { color: var(--ink); background: var(--bg-3); }
.field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.field-inline .input { width: auto; height: 34px; color: var(--ink); font-weight: 400; }
.toolbar-spacer { flex: 1; }

/* ================================================================= library */
.lib-view { position: relative; }

/* --------------------------------------------------------------- the head */
/* As Collections' (collection.css .coll-head): which portfolio over the title,
   and the four totals beside them as small tiles. A total's note (12 pages in
   all, incl. estimated) is its tooltip. */
.lib-hero {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px;
  margin-bottom: 18px;
}
.lib-hero-copy { min-width: 0; }
.lib-kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-kicker:empty { display: none; }
.lib-hero .view-title { margin: 2px 0 0; font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.lib-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-stat {
  position: relative; min-width: 96px; padding: 9px 14px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--line-soft, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.lib-stat-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700;
}
.lib-stat-label .ico { color: var(--ink-3); opacity: .8; }
.lib-stat-value {
  margin-top: 3px; font-size: 19px; font-weight: 780; letter-spacing: -.01em; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-stat-value.is-gold { color: var(--gold-text); }
.lib-stat-value.is-muted { font-size: 15px; color: var(--ink-3); }
.lib-stat-sub { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* average master-set completion, under its number */
.lib-stat-meter { margin-top: 6px; height: 2px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.lib-stat-meter i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width var(--t-4) var(--ease-out);
}

/* group totals reuse the tile, drawn flatter */
.lib-group-stats .lib-stat { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }

.lib-toolbar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 9px 10px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}

/* ---------------------------------------------------- the toolbar
   Search, sort, the layout and the tools on one line, unboxed as Collections'
   are; a total's short word on a phone. */
.lib-hero .lib-stat-label .ico { display: none; }
.lib-hero .lib-stat-sub { display: none; }
.lib-stat-short { display: none; }
@media (max-width: 640px) { .lib-hero .lib-stat-short { display: inline; } }

.lib-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 0; border: 0; background: none; }
.lib-layout { flex: none; }
/* On a desk: New Portfolio, From a Set and Import as icons, their words their tooltips (library.js). */
@media (min-width: 641px) {
  .lib-tools .lib-btn-t { display: none; }
  .lib-tools .lib-icon-btn { padding: 0 11px; }
}
.lib-tools { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
/* the search gives way first, so the tools keep to the one line beside it */
.lib-toolbar > .field-search { flex: 1 1 180px; min-width: 150px; max-width: 360px; }
@media (min-width: 641px) and (max-width: 1100px) { .lib-tools { flex-wrap: wrap; } }
.lib-tools .btn, .lib-toolbar > .btn { flex: none; white-space: nowrap; }
.lib-chips { margin-bottom: 14px; }
/* A portfolio's Loose Cards (library.js paintLoose): cards with no binder, a way to them above the binders. */
.lib-loose { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.lib-loose-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 11px;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px;
  font-size: 13px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.lib-loose-link b { color: var(--ink); font-weight: 700; }
.lib-loose-link > span:not(.lib-loose-ico)::before { content: "·"; margin-right: 8px; color: var(--ink-3); }
.lib-loose-ico { display: grid; color: var(--accent-text); }
.lib-loose-v { color: var(--gold-text); font-weight: 700; }
.lib-loose-link:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); }

@media (max-width: 980px) {
  .lib-hero { align-items: stretch; gap: 12px; }
  .lib-hero .lib-summary { flex-basis: 100%; }
}
/* A phone: the totals as one strip under the title; the search beside New
   Binder; the other tools in a row that scrolls sideways under them. */
@media (max-width: 640px) {
  /* the worth is the long one: it gets the room, as on Collections */
  .lib-hero .lib-summary { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .lib-hero .lib-stat-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lib-hero .lib-stat { min-width: 0; padding: 8px 10px 9px; border-radius: 12px; }
  .lib-hero .lib-stat-label { font-size: 9px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lib-hero .lib-stat-label > span { overflow: hidden; text-overflow: ellipsis; }
  .lib-hero .lib-stat-value { font-size: 15.5px; }
  .lib-toolbar { flex-wrap: wrap; }
  .lib-toolbar .field-search { flex: 1 1 0; max-width: none; }
  .lib-tools {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -8px; padding: 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 18px), transparent);
  }
  .lib-tools::-webkit-scrollbar { display: none; }
  .lib-tools .toolbar-spacer { display: none; }
  .lib-tools .field-inline { flex: none; }
}

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 20px 18px; }

/* ------------------------------------------------------------ binder tile */
/* A small physical binder: board, spine and rings, the page it lies open at,
   and the page edges on the opening side. It lifts, tilts and catches light. */
.bcard {
  --cover: #2f6f4f;
  --edges: 3;
  position: relative;
  display: flex; flex-direction: column;
  padding: 11px 11px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, var(--bg-2)), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-edge), var(--shadow-1);
  transition: transform var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out),
    border-color var(--t-2) var(--ease-out);
}
.bcard:hover,
.bcard:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line));
  box-shadow: var(--glass-edge), var(--shadow-2);
}
/* The tile carries the pointer effects; the cover wears them. The tile's own
   transform stays free for the hover lift, and the tile-wide foil wash that
   design.css would paint is turned off — the cover gets its own, below. */
.bcard[data-tilt] { transform: none; transform-style: flat; }
.bcard[data-tilt].is-tilting {
  transition: transform var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out),
    border-color var(--t-2) var(--ease-out);
}
.bcard[data-foil]::after,
.bcard[data-foil].is-foil::before { content: none; }

.bcard.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bcard.is-current:not(:hover) { box-shadow: var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow-1); }
/* the entrance: once, when a tile is first drawn */
.bcard.is-fresh { animation: bcard-in var(--t-3) var(--ease-out) both; }
@keyframes bcard-in { from { opacity: 0; transform: translateY(10px); } }

/* The frame a binder stands in on its tile: one shape for every tile, so the
   shelf lines up, with the binder in it at its own proportions (a 4 × 3 binder
   is wider than a 3 × 3 one), centred — library.js shutBinder. */
.bcard-cover {
  position: relative; isolation: isolate;
  aspect-ratio: .76;
  container-type: size;
  display: grid; place-items: center;
}
/* The binder shut. Its spine and its cover are binder.css's own .spine.is-shut
   and .bcover — the object its page shows when it is shut — fitted to the frame;
   only its shadow on the tile and the tile's tilt and foil are the shelf's. */
.bcard-binder {
  position: relative; display: flex;
  width: min(100cqw, calc(100cqh * var(--shut-r, .76)));
  aspect-ratio: var(--shut-r, .76);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 24px -12px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.32);
  /* the 3D tilt, driven by the --rx / --ry the tile inherits from motion.js */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1));
  transition: transform var(--t-3) var(--ease-spring);
}
:root[data-theme="light"] .bcard-binder { box-shadow: 0 12px 22px -12px rgba(20,24,32,.45), 0 3px 8px rgba(20,24,32,.14); }
.bcard.is-tilting .bcard-binder { transition: none; }
.bcard-binder > .spine { width: var(--spine-part, 5.8%); }
.bcard-binder > .bcover {
  flex: 1; min-width: 0; padding: 0; cursor: inherit;
  /* binder.css sizes the window and the lettering from the board (--cover-w,
     --cover-h): here the board is the tile's, so they are its own width */
  container-type: inline-size;
  --cover-w: 100cqi;
  --cover-h: calc(100cqi / var(--board-r, .717));
}
/* the holo sheen, masked to a soft ellipse under the pointer (design.css's recipe) */
.bcard-binder::after {
  content: ""; position: absolute; inset: 0; z-index: 7;
  pointer-events: none; border-radius: inherit;
  background: var(--foil);
  background-size: 260% 260%;
  background-position: calc(var(--mx, 50%) * 0.6 + 20%) calc(var(--my, 50%) * 0.6 + 20%);
  mix-blend-mode: color-dodge;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 62% 48% at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 48% at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,.35) 48%, transparent 76%);
  transition: opacity var(--t-3) var(--ease-out);
}
.bcard.is-foil .bcard-binder::after { opacity: .2; }
/* The whole tile is the link, so the cover's own hover is the tile's. */
.bcard:hover .cover-hint { color: rgba(255,255,255,.9); }
.bcard:hover .cover-hint::after { transform: translateX(3px) rotate(45deg); }
.bcard-cover .cover-window.is-pending { animation: lib-breathe 1.6s ease-in-out infinite; }
/* The same lettering, allowed smaller: binder.css's floors are for a page-sized
   cover on a phone, and a tile's cover is smaller still — kept, they crowd it. */
.bcard-binder .cover-title { font-size: clamp(7.5px, calc(var(--cover-w) * .026), 14px); }
.bcard-binder .cover-name { font-size: clamp(11px, calc(var(--cover-w) * .076), 42px); }
.bcard-binder .cover-name.is-long { font-size: clamp(10px, calc(var(--cover-w) * .062), 34px); }
.bcard-binder .cover-name.is-longer { font-size: clamp(9px, calc(var(--cover-w) * .05), 28px); }
.bcard-binder .cover-hint { font-size: clamp(7.5px, calc(var(--cover-w) * .024), 11px); gap: 6px; }

/* What the shelf says about a binder, under its cover rather than over it. */
.bcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.lib-tag {
  font-size: 9.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.lib-tag.is-current { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.lib-tag.is-locked { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }

/* the completion ring, beside the progress it stands for: one fill, once, when the tile is drawn */
.bcard-ring {
  position: relative; flex: none;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.bcard-ring-art { position: absolute; inset: 0; }
.bcard-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.bcard-ring .ring-track { fill: none; stroke: var(--line); stroke-width: 4.4; }
.bcard-ring .ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 4.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: bcard-ring-fill var(--t-4) var(--ease-out) forwards;
}
@keyframes bcard-ring-fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: calc(100 - var(--pct, 0)); } }
.bcard-ring.is-unknown .ring-fill { animation: none; }
.bcard-ring.is-done { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent)); }
.bcard-ring.is-done .ring-fill { stroke: var(--accent); }
/* The ring is small beside the words: the percentage is said in them instead (.bcard-progress-pct). */
.bcard-ring-n { display: none; }

.bcard-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: 12px 4px 4px; }
.bcard-name { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; min-width: 0; }
.bcard-link {
  display: block; color: var(--ink); text-decoration: none; outline: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard:hover .bcard-link { color: var(--ink); }
/* The name is the tile's link; stretch it so the whole tile opens the binder. */
.bcard-link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--radius-lg); }
.bcard-link:focus-visible::after {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bcard-meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bcard-progress { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; }
.bcard-progress-pct { font-size: 12px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.bcard-progress-pct.is-done { color: var(--accent-text); }
.bcard-progress-label { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcard-progress-of { font-size: 11.5px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bcard-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 10px; margin-top: auto; padding-top: 8px;
}
.bcard-value { font-size: 15px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bcard-value.is-muted { font-size: 12.5px; font-weight: 550; color: var(--ink-3); letter-spacing: 0; }
.bcard-value.is-waiting { color: var(--ink-3); }
/* "incl. ~$12 est." after a value that counts estimated prices */
.bcard-est { margin-left: 6px; font-size: 11px; font-weight: 550; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.bcard-updated { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* move / rename / duplicate / delete float over the cover; always shown on touch screens */
.bcard-actions {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  display: flex; gap: 4px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.bcard:hover .bcard-actions,
.bcard:focus-within .bcard-actions { opacity: 1; transform: none; }
.bcard-act {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(8,10,14,.7); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.bcard-act:hover { background: rgba(8,10,14,.94); transform: translateY(-1px); }
.bcard-act.is-danger:hover { background: var(--danger); }
.bcard-act:focus-visible { outline: 2px solid rgba(255,255,255,.92); outline-offset: 2px; }

/* A touch screen has no hover to bring them up, and always-on buttons would sit
   on the cover's window: they are a quiet row under the tile's words instead.
   (After the rules above, which they must outrank.) Nor does a cover need its
   "Open ›" there: the whole tile opens the binder, and on a small tile a long
   name wrapped onto a third line ran into it. */
@media (hover: none) {
  .bcard-actions {
    position: relative; top: auto; right: auto;
    justify-content: flex-end; margin-top: 6px;
    opacity: 1; transform: none;
  }
  .bcard-act {
    width: 36px; height: 36px;
    background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2);
    box-shadow: inset 0 0 0 1px var(--line);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .bcard-act:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); transform: none; }
  .bcard-act:focus-visible { outline-color: var(--accent); }
  .bcard-binder .cover-hint { display: none; }
}

/* loading placeholders */
.bcard.is-skeleton,
.stile.is-skeleton { pointer-events: none; box-shadow: none; }
.bcard.is-skeleton { border-style: dashed; }
.bcard.is-skeleton .bcard-cover { background: var(--bg-3); border-radius: var(--radius-lg); }
.skel-line { display: block; height: 10px; width: 80%; border-radius: 5px; background: var(--bg-3); }
.skel-line.short { width: 45%; }
.bcard.is-skeleton .skel-line { margin: 5px 0; }

@keyframes lib-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ------------------------------------------------ empty, error, no matches */
.lib-panel {
  padding: 44px 28px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.lib-panel h2 { margin: 0 0 6px; font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.015em; }
.lib-panel p { margin: 0 auto; max-width: 480px; color: var(--ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.lib-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.lib-panel.is-error { border-style: solid; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.lib-panel.is-error h2 { color: var(--danger); }

/* a quiet glyph above the words */
.lib-panel-art {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; color: var(--ink-3);
  background: var(--bg-3); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--line-soft);
}
.lib-panel-art.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-3)); }
.lib-panel-art.is-error::before { content: "!"; font-size: 24px; font-weight: 750; }
.lib-panel-art.is-sets::before {
  content: ""; width: 22px; height: 26px; border-radius: 3px;
  border: 1.5px solid currentColor;
  box-shadow: 4px -4px 0 -1.5px var(--bg-3), 4px -4px 0 0 currentColor;
}

/* nothing on the shelf at all: three binders waiting to be filled */
.lib-empty { padding: 56px 28px 48px; }
.lib-empty h2 { font-size: 22px; }
.shelf-art { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 96px; margin-bottom: 22px; }
.shelf-art-binder {
  --cover: #2f6f4f;
  position: relative; display: flex; align-items: stretch;
  width: 52px; height: calc(74px + var(--i) * 6px);
  border-radius: 3px 7px 7px 3px;
  background: linear-gradient(118deg, color-mix(in srgb, var(--cover) 70%, #000), var(--cover) 50%, color-mix(in srgb, var(--cover) 60%, #000));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.16);
  transform: rotate(calc((var(--i) - 1) * 2.5deg));
}
.shelf-art-spine {
  flex: none; width: 11px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  border-radius: 3px 0 0 3px;
}
.shelf-art-spine i { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(180deg, #e8ecf3, #79808d); }
.shelf-art-page { flex: 1; margin: 7px 6px; border-radius: 2px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lib-empty-hints {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin: 24px 0 0; padding: 0; list-style: none;
}
.lib-empty-hints li {
  font-size: 12px; color: var(--ink-3);
  padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}

/* ------------------------------------------------------- groups on the shelf */
/* library.js: one section per group (header, then its binders), then Ungrouped. */
.lib-body { position: relative; display: flex; flex-direction: column; gap: 22px; }
.lib-body > .lib-panel { width: 100%; }

.lib-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 16px; padding: 9px 10px 9px 14px; border-radius: var(--radius); font-size: 13px;
  background: color-mix(in srgb, var(--gold) 9%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
}
.lib-notice > span { flex: 1 1 260px; }

/* the group chips: All · each group · Ungrouped (they are drop targets too) */
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.lib-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 260px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2);
  box-shadow: var(--glass-edge);
  font-size: 12.5px; font-weight: 600; 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), transform var(--t-1) var(--ease-out);
}
.lib-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.lib-chip[aria-pressed="true"] {
  color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.lib-chip-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.lib-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-chip-n { font-size: 11px; font-weight: 550; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Ungrouped with nothing in it only shows up as a target while a binder is being dragged. */
.lib-chip.is-vacant { display: none; }
.lib-view.is-dragging-binder .lib-chip.is-vacant { display: inline-flex; border-style: dashed; }
.lib-chip.is-drop-target {
  color: var(--ink); border-color: var(--accent); border-style: solid;
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-2)); transform: scale(1.06);
}

/* a section, with its group's colour as a spine rail down the side */
.lib-group {
  --group: var(--ink-3);
  position: relative; padding-left: 16px; border-radius: var(--radius-lg);
  transition: background var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out);
}
.lib-group::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--group), color-mix(in srgb, var(--group) 22%, transparent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--group) 28%, transparent);
}
.lib-group.is-ungrouped::before {
  background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
  box-shadow: none;
}
.lib-group.is-collapsed::before { bottom: 8px; }

.lib-group-head {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  min-height: 44px; margin-bottom: 14px; padding: 3px 0 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--group) 30%, var(--line-soft));
}
.lib-group.is-ungrouped .lib-group-head { border-bottom-color: var(--line-soft); }
.lib-group.is-collapsed .lib-group-head { margin-bottom: 0; border-bottom-color: transparent; }
/* tiles and headers are dragged by the shelf itself, not selected as text */
.bcard, .lib-group-head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.lib-group-toggle {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 12px 0 7px; margin-right: auto;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--t-1) var(--ease-out);
}
.lib-group-toggle:hover { background: var(--bg-2); }
.lib-group:not(.is-ungrouped) .lib-group-toggle { cursor: grab; }
.lib-group-chev { display: grid; place-items: center; color: var(--ink-3); transform: rotate(90deg); transition: transform var(--t-2) var(--ease-out); }
.lib-group.is-collapsed .lib-group-chev { transform: none; }
/* the group's colour as a little binder spine */
.lib-group-swatch {
  flex: none; width: 12px; height: 16px; border-radius: 2px 4px 4px 2px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--group) 70%, #000), var(--group));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), var(--shadow-1);
}
.lib-group-swatch.is-none { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink-3); }
.lib-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.lib-group-count { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-group-meta { flex: none; display: flex; gap: 12px; padding: 0 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lib-group-value { color: var(--gold-text); font-weight: 650; }
.lib-group-done { color: var(--ink-2); }
.lib-group-btn {
  flex: none; height: 30px; padding: 0 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; 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);
}
.lib-group-btn:hover, .lib-group-btn[aria-expanded="true"] { color: var(--ink); background: var(--bg-3); border-color: var(--line); }
.lib-group-btn.is-icon { width: 32px; padding: 0; display: grid; place-items: center; }

/* a group's totals, opened from its header */
.lib-group-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -2px 0 16px; }
.lib-group-stats .lib-stat { padding: 9px 13px 10px; }
.lib-group-stats .lib-stat-value { font-size: 18px; }
.lib-group-stats .lib-stat-value.is-muted { font-size: 15px; }

.lib-group-empty {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  padding: 26px 16px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
  color: var(--ink-3); font-size: 13px; text-align: center;
}
/* Ungrouped with nothing in it: only there to drop a binder on */
.lib-group.is-vacant { display: none; }
.lib-view.is-dragging-binder .lib-group.is-vacant { display: block; }

/* dragging (library.js): what is carried, where it would land */
.lib-view.is-dragging-binder .lib-group:not(.is-vacant) .lib-group-head { border-bottom-style: dashed; }
.lib-group.is-drop-target {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent), 0 0 0 7.5px var(--accent);
}
.lib-group.is-drop-target .lib-group-name { color: var(--accent-text); }
.bcard.is-drag-source { opacity: .38; }
.lib-group.is-lifted { opacity: .45; }
/* a tilted cover must not follow the pointer while a tile is being carried */
body.is-dragging-shelf .bcard-binder { transform: none !important; }
.lib-drop-line {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none; opacity: 0;
}
.lib-drop-line.is-shown { opacity: 1; }
body.is-dragging-shelf, body.is-dragging-shelf * { cursor: grabbing !important; }

.lib-ghost {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: 280px;
  padding: 7px 12px 7px 7px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--accent); color: var(--ink);
  box-shadow: var(--shadow-2), 0 16px 34px -10px rgba(0,0,0,.5);
  font-size: 13px; font-weight: 600;
  will-change: transform;
}
.lib-ghost.is-group { padding: 8px 14px 8px 11px; }
.lib-ghost-cover {
  --cover: #2f6f4f;
  flex: none; width: 34px; aspect-ratio: var(--card-ratio); overflow: hidden; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(118deg, color-mix(in srgb, var(--cover) 72%, #000), var(--cover) 50%, color-mix(in srgb, var(--cover) 62%, #000));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.lib-ghost-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-ghost-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-ghost-count {
  flex: none; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 750;
}

/* Select: tick binders, then Move or Delete them together from the bar */
.lib-selectbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 8px 10px 8px 14px; border-radius: var(--radius);
  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 color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.lib-sel-count { margin-right: 4px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lib-selectbar .toolbar-spacer { flex: 1; }
.lib-toolbar .btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-3));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink);
}

.bcard-check {
  display: none; position: absolute; top: 17px; left: 17px; z-index: 5;
  width: 30px; height: 30px; place-items: center; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(8,10,14,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lib-view.is-selecting .bcard-check { display: grid; }
.bcard-check-input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bcard-check:has(.bcard-check-input:focus-visible) { outline: 2px solid rgba(255,255,255,.92); outline-offset: 2px; }
.lib-view.is-selecting .bcard-actions { display: none; }
.lib-view.is-selecting .bcard { cursor: pointer; }
.bcard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); }
.bcard.is-selected:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }

/* the Move to group and group ⋯ menus */
.pmenu.lib-menu { width: min(250px, calc(100vw - 16px)); padding-bottom: 4px; }
.lib-menu .pmenu-head { margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmenu-item.lib-menu-item { width: auto; margin: 1px 4px 0; grid-template-columns: 22px minmax(0, 1fr) auto; padding: 0 10px 0 6px; }
.lib-menu-ico { display: grid; place-items: center; color: var(--ink-2); line-height: 0; }
.lib-menu-swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.lib-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-menu-note { color: var(--accent-text); font-weight: 750; }
.lib-menu-item[aria-disabled="true"] { cursor: default; }
.lib-menu-item[aria-disabled="true"]:not([aria-current]) { opacity: .5; }
.lib-menu-item.is-danger, .lib-menu-item.is-danger .lib-menu-ico { color: var(--danger); }
.lib-menu-sep { height: 1px; margin: 4px 8px 3px; background: var(--line-soft); }

.group-swatches .swatch { width: 30px; height: 30px; border-radius: 50%; }

/* ------------------------------------------------ most valuable, all binders */
.lib-section { margin-top: 48px; }
.lib-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 16px; }
.lib-section-head h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.lib-section-head p { margin: 0; font-size: 12px; color: var(--ink-3); }

.mv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.mv-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 7px 7px 9px; border-radius: var(--radius);
  color: inherit; text-decoration: none; outline: none;
  transition: background var(--t-1) var(--ease-out);
}
.mv-card:hover { background: var(--bg-2); }
.mv-card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.mv-art {
  position: relative; display: block; margin-bottom: 6px;
  aspect-ratio: var(--card-ratio); overflow: hidden;
  border-radius: var(--radius-sm); background: var(--pocket); box-shadow: var(--shadow-card);
  transition: transform var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out);
}
.mv-card:hover .mv-art,
.mv-card:focus-visible .mv-art { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.5); }
.mv-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-rank {
  position: absolute; z-index: 2; left: 6px; top: 6px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
  background: rgba(8,10,14,.78); color: #fff;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* the top three get a medal */
.mv-rank.is-medal { color: #1a1408; background: linear-gradient(160deg, #f6dfa4, #d8b160 45%, #a8802f); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.mv-price {
  position: absolute; z-index: 2; right: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(8,10,14,.84); color: var(--gold);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* an estimate, as on the binder's pocket badges */
.mv-price.is-est {
  padding: 1px 6px; font-weight: 650;
  color: color-mix(in srgb, var(--gold) 78%, #fff); background: rgba(8,10,14,.68);
  border: 1px dashed color-mix(in srgb, var(--gold) 72%, transparent);
}
.mv-name { font-size: 12.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mv-line .mv-name { flex: 1 1 auto; min-width: 0; }
.mv-spark { width: 40px; height: 14px; }
.mv-sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ sets page */
.sets-head { margin-bottom: 18px; }
.sets-toolbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 9px 10px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.field-game .input { max-width: 260px; }
.sets-count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sets-body { margin-top: 18px; }
.sets-body > .lib-panel { margin-top: 10px; }

/* one section per year: the year on a timeline rail, its sets beside it */
.sets-section { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 20px; }
.sets-section + .sets-section { margin-top: 6px; }
.sets-rail { position: relative; padding: 18px 0 26px; }
/* the line down the rail, and the dot at this year */
.sets-rail::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--ink) 16%, var(--line)) 12%,
    color-mix(in srgb, var(--ink) 16%, var(--line)) 88%,
    transparent);
}
.sets-section:first-child .sets-rail::before { top: 22px; }
.sets-section:last-child .sets-rail::before { bottom: auto; height: 60px; }
.sets-year {
  position: sticky; top: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  margin: 0; padding-right: 16px; text-align: right;
}
.sets-year::after {
  content: ""; position: absolute; right: -4px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink-3);
}
.sets-section:first-child .sets-year::after { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 24%, var(--bg)); }
.sets-year-n { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sets-year-c { font-size: 11px; font-weight: 550; color: var(--ink-3); white-space: nowrap; }

.sets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px;
  padding: 18px 0 26px;
}
.sets-body > .sets-grid { padding-top: 0; }

/* a set card: quiet depth, tinted with the cover a new binder for it would take */
.stile {
  --tint: var(--accent);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--shadow-1);
  overflow: hidden;
  transition: border-color var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out),
    box-shadow var(--t-2) var(--ease-out);
}
/* the set's colour as a thin strip along the top, with a faint wash under it */
.stile::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 30%, transparent));
  opacity: .9;
}
.stile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 62%);
  opacity: .8;
}
.stile:hover, .stile:focus-within {
  border-color: color-mix(in srgb, var(--tint) 45%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
.stile.has-binder { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.stile.is-skeleton { min-height: 116px; padding: 14px; gap: 10px; }
.stile.is-skeleton::before, .stile.is-skeleton::after { content: none; }
.stile.is-skeleton .skel-line { margin: 0; }

.stile-main {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; gap: 7px;
  width: 100%; min-width: 0; padding: 14px 15px 12px;
  background: none; border: 0; border-radius: inherit;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.stile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.stile-abbr {
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px;
}
.stile-abbr.is-none { opacity: .45; }
.stile-date { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stile-name {
  font-size: 14px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.stile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.stile-meta:empty { display: none; }
.stile-cards { font-variant-numeric: tabular-nums; }
.stile-go {
  display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 650; color: var(--accent-text);
  opacity: .62; transition: opacity var(--t-1) var(--ease-out);
}
.stile-go i { font-style: normal; transition: transform var(--t-2) var(--ease-out); }
.stile:hover .stile-go,
.stile-main:focus-visible .stile-go { opacity: 1; }
/* No hover to bring it up on a touch screen: always at full strength there. */
@media (hover: none) { .stile-go { opacity: 1; } }
.stile:hover .stile-go i { transform: translateX(4px); }

.sets-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-2);
}
.sets-tag.is-upcoming { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* "in your binders", with how far along it is */
.stile-have {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  margin: 0 12px 12px; padding: 5px 10px 5px 8px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 650; text-decoration: none; white-space: nowrap;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out);
}
.stile-have:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.stile-have-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stile-have-meter {
  flex: 0 1 54px; min-width: 20px; height: 3px; margin-left: 2px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 18%, transparent); overflow: hidden;
}
.stile-have-meter i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }

/* ------------------------------------------- new master-set binder dialog */
.ms-head { padding-bottom: 4px; }
.ms-eyebrow {
  display: block; margin-bottom: 4px;
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-text);
}
.ms-head h2 { font-size: var(--fs-h2); overflow-wrap: anywhere; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ms-chip {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--glass-edge);
  font-variant-numeric: tabular-nums;
}
.ms-chip.is-code { font-family: var(--mono); font-size: 10.5px; }
/* the plan: what the binder will hold, before anything is created */
.dlg-note.ms-plan {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 0; padding: 11px 13px; border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line-soft));
}
.dlg-note.ms-plan::before {
  content: ""; flex: none; width: 3px; align-self: stretch; border-radius: var(--radius-pill);
  background: var(--accent); opacity: .75;
}
.dlg-note.ms-plan.is-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line-soft));
}
.dlg-note.ms-plan.is-error::before { background: var(--danger); }

/* ------------------------------------------------------------ touch targets */
/* On a touchscreen every control on these two pages is at least 36px. */
@media (hover: none) {
  .lib-chip { height: 36px; padding: 0 14px; }
  .lib-group-btn { height: 36px; }
  .lib-group-btn.is-icon { width: 36px; }
  .bcard-check, .bcard-act { width: 36px; height: 36px; }
  .lib-toolbar .input, .sets-toolbar .input, .lib-toolbar .cur-btn { height: 40px; }
  .field-clear { width: 36px; height: 36px; right: 2px; }
  .lib-group-empty .btn, .lib-panel .btn { height: 36px; }
  .stile-have { padding-top: 9px; padding-bottom: 9px; }
  .stile-go { padding-top: 14px; padding-bottom: 3px; }
  .lib-stat { padding-bottom: 14px; }
}
/* Two columns of tiles on a phone: the four buttons share the tile's width. */
@media (hover: none) and (max-width: 560px) {
  .bcard-actions { justify-content: space-between; }
  .bcard-act { width: auto; flex: 1; max-width: 40px; }
  .bcard-check { top: 12px; left: 12px; }
}

/* ------------------------------------------------- calmer and quieter motion */
:root[data-motion="reduced"] .bcard:hover,
:root[data-motion="off"] .bcard:hover,
:root[data-motion="reduced"] .stile:hover,
:root[data-motion="off"] .stile:hover,
:root[data-motion="reduced"] .mv-card:hover .mv-art,
:root[data-motion="off"] .mv-card:hover .mv-art,
:root[data-motion="reduced"] .bcard:hover .bcard-pocket img,
:root[data-motion="off"] .bcard:hover .bcard-pocket img,
:root[data-motion="reduced"] .lib-chip.is-drop-target,
:root[data-motion="off"] .lib-chip.is-drop-target { transform: none; }
:root[data-motion="reduced"] .bcard.is-pending .bcard-pocket:empty,
:root[data-motion="off"] .bcard.is-pending .bcard-pocket:empty { animation: none; opacity: .7; }
:root[data-motion="reduced"] .bcard.is-fresh { animation-duration: 120ms; }
:root[data-motion="off"] .bcard.is-fresh { animation: none; }
:root[data-motion="reduced"] .bcard-ring .ring-fill { animation-duration: 160ms; }
:root[data-motion="off"] .bcard-ring .ring-fill { animation: none; stroke-dashoffset: calc(100 - var(--pct, 0)); }

/* ================================================================= dialogs */
.modal.modal-form { width: min(560px, 100%); }
.modal.modal-card { width: min(640px, 100%); }
.modal-foot { flex-wrap: wrap; }
.foot-spacer { flex: 1; }

.dlg-note { margin: 0; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dlg-note.is-error { color: var(--danger); }

/* grid layout picker: radio tiles, each a tiny page */
.layout-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.layout-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px 7px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s, color .12s;
}
.layout-opt:hover { border-color: var(--ink-3); color: var(--ink); }
.layout-opt.is-on {
  border-color: var(--accent); color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}
.layout-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.layout-glyph-box { height: 36px; display: grid; place-items: center; }
/* 26px across, or narrower when that would make it taller than its box (a 3 × 4 page). */
.layout-glyph {
  display: grid; gap: 2px;
  width: min(26px, calc((30px - (var(--rows, 3) - 1) * 2px) / var(--rows, 3) * var(--card-ratio) * var(--cols, 3) + (var(--cols, 3) - 1) * 2px));
}
.layout-glyph i { display: block; aspect-ratio: var(--card-ratio); border-radius: 1.5px; background: currentColor; opacity: .4; }
.layout-opt.is-on .layout-glyph i { background: var(--accent); opacity: 1; }

/* card dialog */
.card-dlg { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: start; }
.card-dlg-img {
  width: 160px; aspect-ratio: var(--card-ratio); object-fit: cover; display: block;
  border-radius: 8px; background: var(--pocket); box-shadow: var(--shadow-card);
}
.card-dlg-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card-dlg-flag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line);
}
.card-prices { display: flex; flex-direction: column; gap: 7px; }
.price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.price-row span { color: var(--ink-3); }
.price-row b { font-variant-numeric: tabular-nums; }
.price-row.is-market b { color: var(--gold); font-size: 15px; }
/* the estimate standing in for a missing market price */
.price-row.is-est span { color: var(--ink-2); }
.price-row.is-est b {
  padding: 0 6px; border-radius: 5px; font-weight: 650;
  border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.card-dlg-est { margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.card-dlg-link { justify-content: center; margin-top: 2px; }

.card-details {
  margin: 0; padding: 12px 14px;
  display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 7px 16px;
  max-height: 240px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.card-details dt { color: var(--ink-3); font-weight: 600; }
.card-details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ===================================================== binder settings / prefs */
/* Binder settings (settings.js): sections down the side, one showing at a time, with
   a live preview drawn by the binder's own card styles at the top of the ones it helps. */
.modal.modal-settings {
  width: min(840px, 100%); height: min(740px, 90vh); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.settings { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.set-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.set-titles { min-width: 0; }
.set-titles p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.set-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.set-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
  border-right: 1px solid var(--line); overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 55%, var(--bg-2));
}
.set-tab {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 36px; padding: 0 12px; border: none; border-radius: 8px;
  background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 550; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.set-tab:hover { background: var(--bg-3); color: var(--ink); }
.set-tab[aria-selected="true"] {
  color: var(--ink); background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.set-tab[aria-selected="true"] .set-ico { color: var(--accent); }
.set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-panels { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 22px; }
.set-panel { display: flex; flex-direction: column; gap: 18px; }
.set-sec-head h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.set-sec-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

.sf-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sf-row.is-off > :not(.set-label) { opacity: .5; }
.set-label { font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.set-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set-num { width: 96px; }
.set-sub { display: flex; flex-direction: column; gap: 16px; padding-left: 14px; border-left: 2px solid var(--line-soft); }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.set-note { margin: 0; font-size: 12.5px; color: var(--ink-2); padding: 10px 12px; border-radius: var(--radius); background: var(--bg-3); }
.set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.set-lock-note { color: var(--gold); }
.form-help.is-warn { color: var(--gold); }

/* a switch: a real checkbox, drawn as a track and thumb */
.sf-row-switch { gap: 4px; }
.set-switch-label { position: relative; display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; cursor: pointer; }
.set-switch-label .set-label { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.set-switch { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; width: 34px; height: 20px; margin: 0; pointer-events: none; }
.set-switch-track {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px;
  background: var(--bg-3); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.set-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-3); transition: transform .15s ease, background .15s;
}
.set-switch:checked + .set-switch-track { background: var(--accent); border-color: transparent; }
.set-switch:checked + .set-switch-track::after { transform: translateX(14px); background: var(--accent-ink); }
.set-switch:focus-visible + .set-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-row-switch .form-help { padding-left: 45px; }

/* a few choices as one control */
.seg-choice {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 2px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
.seg-opt {
  position: relative;
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px;
  font-size: 13px; font-weight: 550; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.seg-opt:hover { color: var(--ink); background: var(--bg-3); }
.seg-opt.is-on { color: var(--accent-ink); background: var(--accent); font-weight: 650; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* picture tiles: each option drawn with the real card styles */
.opt-tiles { display: grid; grid-template-columns: repeat(var(--opt-cols, 5), minmax(0, 1fr)); gap: 8px; }
.opt-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  padding: 8px 6px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.opt-tile:hover { border-color: var(--ink-3); }
.opt-tile.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: inset 0 0 0 1px var(--accent); }
.opt-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-tiles.is-off .opt-tile { cursor: default; opacity: .5; }
.opt-visual { display: grid; place-items: center; width: 100%; margin-bottom: 3px; }
.opt-page {
  display: block; width: 58px; padding: 6px; border-radius: 7px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cover, #2f6f4f) 90%, #000), var(--cover, #2f6f4f) 45%, color-mix(in srgb, var(--cover, #2f6f4f) 80%, #000));
}
.opt-name { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.opt-help { font-size: 11px; line-height: 1.3; color: var(--ink-3); }
.opt-help:empty { display: none; }
.opt-swatch { position: relative; display: block; width: 100%; height: 46px; overflow: hidden; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.opt-swatch .bg-art { inset: 0; filter: none; }
/* cards in the dialog are pictures, not things to pick up */
.settings .slot-card { cursor: inherit; transition: none; }
.settings .slot-card:hover { transform: none; }

/* a stand-in card when the binder has no art loaded */
.set-sample-art {
  position: absolute; top: var(--in-t); left: var(--in-x); right: var(--in-x); bottom: var(--in-b);
  border-radius: var(--in-r);
  background:
    radial-gradient(ellipse 60% 34% at 50% 38%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.35) 62% 64%, transparent 64%),
    linear-gradient(150deg, #5d7bd6, #8a5dd6 45%, #d65d9a);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}
.slot-card.is-missing .set-sample-art { filter: grayscale(1) brightness(.42); }
[data-missing="grey"] .slot-card.is-missing .set-sample-art { filter: grayscale(1); }
[data-missing="dim"] .slot-card.is-missing .set-sample-art { filter: none; opacity: .32; }
[data-missing="badge"] .slot-card.is-missing .set-sample-art { filter: none; }
[data-missing="hidden"] .slot-card.is-missing .set-sample-art { visibility: hidden; }

/* background picture: a drop target that is also a button */
.dropzone {
  display: flex; align-items: center; gap: 14px; min-height: 76px; width: 100%;
  padding: 10px 14px; border: 2px dashed var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink-2); font-size: 13px; font-weight: 550; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone.is-busy { opacity: .6; pointer-events: none; }
.drop-thumb { display: none; flex: none; width: 96px; height: 58px; border-radius: 6px; background: var(--bg-3) center / cover no-repeat; box-shadow: var(--shadow-1); }
.dropzone.has-image .drop-thumb { display: block; }
.drop-body { display: flex; align-items: center; gap: 9px; }
.drop-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.set-range-row { display: flex; align-items: center; gap: 12px; }
.set-range { flex: 1; max-width: 320px; accent-color: var(--accent); }
.set-out { min-width: 3.4em; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* the live preview: a page (and its desk) with an owned card, a missing one and an empty pocket */
.set-preview-box {
  position: sticky; top: -16px; z-index: 5;
  margin: -4px -20px 0; padding: 8px 20px 12px;
  background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
}
.set-preview-tag { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.set-desk {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center; padding: 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line-soft);
}
.set-desk > .bg-layer.is-desk { z-index: 0; border-radius: inherit; }
.set-preview-note { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }
.set-preview-note:empty { display: none; }

.settings > .modal-foot { padding-top: 12px; border-top: 1px solid var(--line); }

/* Preferences: three short groups; each choice's name beside it, its help under it */
.modal.modal-prefs {
  width: min(640px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.prefs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.prefs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 16px; }
.prefs > .modal-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.prefs-group { display: flex; flex-direction: column; gap: 14px; }
.prefs-group + .prefs-group { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.prefs-group h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.prefs .sf-row:not(.sf-row-switch) {
  display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 6px 16px;
}
.prefs .sf-row:not(.sf-row-switch) > .form-help { grid-column: 2; margin-top: -2px; }
.prefs .sf-row > .set-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.prefs .sf-row > .input { max-width: 360px; }
.prefs .seg-choice { justify-self: start; }
@media (max-width: 640px) {
  .prefs .sf-row:not(.sf-row-switch) { grid-template-columns: minmax(0, 1fr); }
  .prefs .sf-row:not(.sf-row-switch) > .form-help { grid-column: 1; }
}

/* card dialog: a locked binder's note, and its way out */
.card-dlg-flag.is-locked { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--bg-3)); }

/* a pocket the library sent you to ("Most valuable") */
.pocket.is-flash { z-index: 4; animation: pocket-flash 1.8s ease-out; }
@keyframes pocket-flash {
  0%, 35% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent); }
  100% { box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07), 0 0 0 14px transparent; }
}

/* ============================================================== responsive */
@media (max-width: 1100px) {
  .mv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sets-section { grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; }
}

@media (max-width: 800px) {
  .lib-summary:not(.lib-hero .lib-summary) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .view-wrap { padding: 22px 18px 64px; }
  .lib-hero { padding: 0; }
  /* the toolbar keeps to one row: the selects say what they are to a screen reader */
  .lib-toolbar .field-inline > span[aria-hidden="true"] { display: none; }
  .lib-toolbar .field-inline > span:not([aria-hidden]) { display: none; }
  .field-search { flex-basis: 180px; }
  .topnav { margin-left: 0; }
  .nav-item { padding: 0 11px; }
  .nav-binder { max-width: 32vw; }
  .shared-label { margin-left: 0; }
}

/* A laptop's width (to 1360px, where the binder gets its rail): the places the
   nav is not on show their icons alone (their names are still their links'
   names, and their tooltips), so all of them fit beside the bar's buttons; the
   one you are on keeps its name. */
@media (min-width: 641px) and (max-width: 1360px) {
  .nav-item:not([aria-current="page"]):not(.nav-binder) .nav-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nav-item:not([aria-current="page"]):not(.nav-binder) { padding: 0 10px; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 8px; gap: 4px; }
  /* icons only for the fixed items; the binder keeps its (shortened) name */
  .nav-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nav-item { padding: 0 10px; gap: 7px; }
  .nav-binder, .nav-binder:has(.nav-binder-group:not([hidden])) { max-width: 38vw; }
  /* no room for the breadcrumb; the title still names the group */
  .nav-binder-group { display: none; }
  .lib-group-meta { display: none; }
  .lib-group-name { font-size: 14.5px; }
  .lib-group-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-selectbar { padding: 7px 8px 7px 12px; }
  .lib-sel-count { flex-basis: 100%; }
  .shared-name { display: none; }
  /* With the way out beside it, "read-only" gives way: the page under says it is shared. */
  .shared-label:has(.shared-exit:not([hidden])) .shared-pill { display: none; }
  .view-title { font-size: 22px; }
  .lib-stat-value { font-size: 21px; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 14px 12px; }
  .bcard { padding: 8px 8px 4px; }
  .bcard-name { font-size: 13.5px; }
  .field-search { max-width: none; flex-basis: 100%; }
  .toolbar-spacer { display: none; }
  .sets-count { margin-left: 0; }
  .mv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* the year rail lies down: its label sits above its sets */
  .sets-section { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sets-rail { padding: 16px 0 6px; }
  .sets-rail::before { display: none; }
  .sets-year {
    position: sticky; top: 0; z-index: 3;
    flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 9px;
    padding: 6px 0 8px; text-align: left;
    background: var(--bg); border-bottom: 1px solid var(--line-soft);
  }
  .sets-year::after { display: none; }
  .sets-year-n { font-size: 15px; }
  .sets-grid { padding: 14px 0 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .shelf-art { height: 84px; }
  .shelf-art-binder { width: 44px; }
  .layout-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-dlg { grid-template-columns: 1fr; justify-items: center; }
  .card-dlg-side { width: 100%; }
  .card-details { grid-template-columns: 1fr; gap: 2px; }

  /* Binder settings takes the whole screen; its sections become a row of tabs along the top. */
  .modal.modal-settings {
    position: fixed; inset: 0; width: auto; height: auto; max-height: none;
    border: none; border-radius: 0;
  }
  .set-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .set-nav {
    flex-direction: row; overflow-x: auto; scrollbar-width: none;
    padding: 6px 8px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-tab { height: 34px; padding: 0 11px; gap: 7px; font-size: 13px; }
  .set-tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .set-panels { padding: 14px 14px 18px; }
  .set-preview-box { top: -14px; margin: -4px -14px 0; padding: 8px 14px 10px; }
  .opt-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .set-pair { grid-template-columns: minmax(0, 1fr); }
  .sf-row-switch .form-help { padding-left: 0; }
  .drop-actions { flex-direction: column; }
}

@media (max-width: 430px) {
  .lib-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lib-stat { padding: 10px 12px 11px; }
  .lib-stat-value { font-size: 19px; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sets-grid { grid-template-columns: minmax(0, 1fr); }
  .lib-empty { padding: 40px 16px 36px; }
  .lib-panel { padding: 34px 16px; }
}

@media print {
  .lib-ghost, .lib-drop-line, .lib-aurora { display: none !important; }
  .bcard, .stile, .lib-stat { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .set-tab, .set-switch-track, .set-switch-track::after, .seg-opt, .opt-tile, .dropzone { transition: none; }
  .pocket.is-flash { animation: none; box-shadow: inset 0 0 0 2px var(--gold); }
}

/* ------------------------------------------------ the month's line (spark.js)
   A product's last month of market prices beside its price: the Watchlist, the
   card dialog, the Binders page's top cards, Insights' movers. */
.spark { display: inline-block; flex: none; width: 56px; height: 18px; vertical-align: middle; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark.is-up { color: #22b865; }
.spark.is-down { color: var(--danger); }
.spark.is-none { width: 0; }

/* ---- the top nav's More (bottomnav.js openLauncher): a button among the
   links, set off from them by a hairline; current on a page the nav does not
   name (router.js). */
.nav-launch {
  margin-left: 8px; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer;
}
.nav-launch::after {
  content: ""; position: absolute; left: -5px; top: 50%; width: 1px; height: 18px;
  translate: 0 -50%; background: var(--line);
}
.nav-launch[aria-expanded="true"] { color: var(--ink); }
.nav-admin-flag { display: none; }

/* ========================================== page heroes, as Insights has them
   Every main page opens as Insights does (insights.css .ins-hero): a gold
   kicker, the title, the page's worth large in gold where it has one (Binders,
   Shelves, Collections lift their value out of their tiles for it), the other
   figures in one glass card beside it, and the gold and violet glow of the
   page's sky behind it all. Pages with no worth set their title at display
   size instead. Each page keeps its own markup; .pg-hero is added to its head. */
main:is(.view-library, .view-sets, .view-shelves, .view-collection, .view-find, .view-grading, .view-trades, .view-feedback) {
  background:
    radial-gradient(1000px 380px at 22% -170px, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
    radial-gradient(820px 360px at 88% -120px, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 72%),
    var(--bg);
}

.pg-hero { position: relative; isolation: isolate; }
/* the sky: a gold glow and a violet one, soft, still, thinning into the page */
.pg-hero::before, .pg-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(320px, 56%, 780px); aspect-ratio: 1.6; border-radius: 50%; filter: blur(10px);
}
.pg-hero::before { left: -16%; top: -150px; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 24%, transparent), transparent); }
.pg-hero::after { right: -12%; top: -130px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent); }
:root[data-theme="light"] .pg-hero::before, :root[data-theme="light"] .pg-hero::after { opacity: .55; }
/* the Shelves aurora glows into the page instead of filling a box. A canvas sized
   `auto` takes its size from its own pixels, which motion.ambient sets from its
   size: it would grow for ever. So its size is said outright. */
.pg-hero > .lib-aurora {
  z-index: -1; inset: auto; left: -14vw; top: -90px;
  width: calc(100% + 28vw); height: calc(100% + 130px);
  /* thinning out at the foot and at both sides, so it has no edge to see */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent), linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 45%, transparent), linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
          mask-composite: intersect;
}

.pg-kicker, .pg-hero .lib-eyebrow {
  margin: 0 0 6px; font-size: var(--fs-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--gold-text);
}
/* the title: bold and set tight; at display size where there is no worth under it */
.pg-hero :is(.view-title, .coll-title h1) { font-size: clamp(26px, 1.4vw + 17px, 38px); font-weight: 760; letter-spacing: -0.035em; line-height: 1.08; }
.pg-hero .pg-display {
  margin: 0; font-size: clamp(32px, 3vw + 14px, 54px); line-height: 1.04;
  font-weight: 740; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance;
}
.pg-hero :is(.view-lede, .grd-sub, .trd-sub, .fb-sub) { margin-top: 12px; color: var(--ink-2); font-size: clamp(13.5px, .3vw + 12.5px, 15px); line-height: 1.55; max-width: 60ch; }

/* the worth: the value tile unboxed, its figure large and in gold, as Insights' */
.pg-hero .is-worth {
  min-width: 0; margin: 8px 0 0; padding: 0;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.coll-worth { margin: 0; }
/* its label is said, not shown: the title over it says what it is */
.pg-hero .is-worth :is(.lib-stat-label, dt) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pg-hero .is-worth :is(.lib-stat-value, dd) {
  margin: 0; overflow: visible;
  font-size: clamp(40px, 3.4vw + 18px, 76px); line-height: 1.04; font-weight: 720; letter-spacing: -0.045em;
  color: var(--gold-text); font-variant-numeric: normal;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pg-hero .is-worth :is(.lib-stat-value:not(.is-muted), dd) {
    background: linear-gradient(100deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 55%, #fff) 36%, var(--gold) 58%,
      color-mix(in srgb, var(--gold) 70%, #5a3a08) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    padding-bottom: .06em;
  }
  :root[data-theme="light"] .pg-hero .is-worth :is(.lib-stat-value:not(.is-muted), dd) {
    background-image: linear-gradient(100deg, #7a5712 0%, #a67c22 45%, #8a6519 70%, #664609 100%);
  }
}
.pg-hero .is-worth .lib-stat-value.is-muted { font-size: clamp(24px, 1.6vw + 14px, 34px); color: var(--ink-3); }
.pg-hero .is-worth .lib-stat-sub { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-3); white-space: normal; }
.pg-hero .is-worth .lib-stat-short { display: none !important; }

/* the other figures: one glass card of rows beside the worth, as Insights' glance */
.pg-hero :is(.lib-summary, .coll-stats) {
  display: grid; gap: 0; align-self: flex-end;
  width: clamp(250px, 26vw, 330px); margin: 0; padding: 4px 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: var(--glass-edge), var(--shadow-1);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
:root[data-theme="light"] .pg-hero :is(.lib-summary, .coll-stats) { background: color-mix(in srgb, #fff 78%, transparent); border-color: rgba(20, 24, 32, .09); }
.pg-hero :is(.lib-summary > .lib-stat, .coll-stats > .coll-stat) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 12px;
  min-width: 0; padding: 11px 0; border-radius: 0;
  background: none; border: 0; box-shadow: none;
}
.pg-hero :is(.lib-summary > .lib-stat + .lib-stat, .coll-stats > .coll-stat + .coll-stat) { border-top: 1px solid var(--line-soft); }
.pg-hero :is(.lib-summary .lib-stat-label, .coll-stats dt) {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.pg-hero :is(.lib-summary .lib-stat-value, .coll-stats dd) { margin: 0; justify-self: end; font-size: 18px; font-weight: 720; letter-spacing: -0.02em; color: var(--ink); }
.pg-hero .lib-summary .lib-stat-meter { grid-column: 1 / -1; }

/* Watchlist and Search: the hero over the search, which keeps to the top */
.find-hero { padding: clamp(14px, 2vw, 26px) 0 clamp(8px, 1.2vw, 14px); }
.find .find-head { padding-top: 12px; }

/* narrower: the figures' card under the worth, the width of the page, its figures side by side */
@media (max-width: 980px) {
  .pg-hero :is(.lib-summary, .coll-stats) {
    width: 100%; flex-basis: 100%; padding: 2px 4px;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  .pg-hero :is(.lib-summary > .lib-stat, .coll-stats > .coll-stat) { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2px; padding: 10px 12px; }
  .pg-hero :is(.lib-summary > .lib-stat + .lib-stat, .coll-stats > .coll-stat + .coll-stat) { border-top: 0; border-left: 1px solid var(--line-soft); }
  .pg-hero :is(.lib-summary .lib-stat-value, .coll-stats dd) { justify-self: start; }
}
@media (max-width: 640px) {
  .pg-hero .is-worth :is(.lib-stat-value, dd) { font-size: clamp(36px, 11vw, 52px); }
  .pg-hero :is(.lib-summary .lib-stat-label, .coll-stats dt) { font-size: 11px; }
  .pg-hero :is(.lib-summary .lib-stat-value, .coll-stats dd) { font-size: 16px; }
}