/* NumiCrown — "Marketplace Light" theme (Design A, approved Jul 2026).
   The previous "Modern Registry" theme is preserved in /design-backup-classic/ —
   see the README there to restore it. */
:root {
  --bg: #eef2f8;
  --card: #ffffff;
  --ink: #16223a;
  --muted: #64748b;
  --line: #e3e9f2;
  --navy: #1e2f4d;
  --accent: #2563eb;
  --accent-strong: #1d4fd7;
  --accent-soft: #eaf0fd;
  --row: #f0f2f7;
  --thead: #f6f8fc;
  --danger: #b13a3a;
  --green: #1f7a4d;
  --amber-bg: #fdf5e3;
  --amber-line: #ecd9a8;
  --amber-ink: #7a5c15;
  --shadow: 0 10px 30px rgba(30,47,77,.06);
  --shadow-hover: 0 12px 28px rgba(30,47,77,.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

h1, h2, h3 { letter-spacing: -.015em; }
a { color: var(--accent); }
img { max-width: 100%; }

.container { width: min(1150px, 100% - 2rem); margin-inline: auto; }
main.container { flex: 1; padding-bottom: 3rem; }

/* ---------- header: navy strip + white brand row ---------- */
.top-strip { background: var(--navy); font-size: .86rem; }
.top-strip-inner { display: flex; align-items: center; gap: 1.4rem; padding: .45rem 0; flex-wrap: wrap; }
.top-strip a { color: #c6d2e5; text-decoration: none; font-weight: 500; }
.top-strip a:hover { color: #fff; }

.header-main { background: var(--card); border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex; align-items: center;
  gap: 1rem; padding: .7rem 0; flex-wrap: wrap;
}
/* The wordmark, set in the same tracked uppercase the slider's kicker line uses, over the
   tagline. The rounded crown tile that used to sit beside it is gone from the pages —
   the favicon in the document head still carries the crown. */
.brand { display: flex; flex-direction: column; gap: .18rem; text-decoration: none; }
.brand-text {
  font-size: 1.05rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
}
.brand-text em { font-style: normal; color: var(--accent); }
.brand-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* The tagline is the first thing to go when the header runs out of room — the wordmark alone
   still identifies the site, and the nav matters more than the strapline. 900px, not a smaller
   number: the tagline takes the brand from ~150px to 269px, and on a page carrying the nav
   search (469px of nav) that is enough to push the nav onto a second row and double the height
   of the header on every page. Measured, not guessed. */
@media (max-width: 900px) {
  .brand-tag { display: none; }
}
@media (max-width: 560px) {
  .brand-text { font-size: 1rem; letter-spacing: .14em; }
}

.main-nav { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-left: auto; }
.main-nav > a { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600; }
.main-nav > a:hover { color: var(--accent); }
.admin-link { opacity: .6; font-weight: 500 !important; }

.site-header .nav-search { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.site-header .nav-search input {
  border: none; padding: .4rem .75rem;
  width: 220px; margin: 0; font-size: .88rem; background: transparent; font-family: inherit;
}
.site-header .nav-search input:focus { outline: none; }
.site-header .nav-search:focus-within { border-color: var(--accent); }
.site-header .nav-search button {
  border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0 .7rem; font-size: .9rem;
}
.site-header .nav-search button:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   The blue brand row (2026-08-25). Carried by every page EXCEPT the homepage,
   where the slider's band starts right underneath and two blues in a row would
   read as one thick slab — partials/header.php decides and adds .header-blue.

   Same gradient family as the slider band, so the two are recognisably one
   masthead. It sits under the darker .top-strip, which reads as a deliberate
   two-tone rather than an accident.
   --------------------------------------------------------------------------- */
.header-blue {
  background: linear-gradient(158deg, #2a4f8d 0%, #23427c 60%, #1f3a6c 100%);
  border-bottom: none;
}
.header-blue .brand-text { color: #fff; }
.header-blue .brand-text em { color: #a8c6ff; }
.header-blue .brand-tag { color: #b6c8e6; }

/* Everything below is written as `.main-nav > a.thing` on purpose. The plain-link rule that
   follows is `.header-blue .main-nav > a` — one element more specific than a bare
   `.header-blue .thing` — so a two-class selector loses to it and the buttons come out
   wearing the link colour. The Register button was white-on-white (1.25:1) that way. */
.header-blue .main-nav > a { color: #dbe7fb; }
.header-blue .main-nav > a:hover { color: #fff; }
.header-blue .main-nav > a.admin-link { color: #c2d2ea; opacity: 1; }
.header-blue .main-nav > a.admin-link:hover { color: #fff; }

/* the search box becomes the translucent one the band uses */
.header-blue .nav-search { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.header-blue .nav-search input { color: #fff; }
.header-blue .nav-search input::placeholder { color: #a3b6d6; }
.header-blue .nav-search:focus-within { border-color: #9dc0ff; background: rgba(255,255,255,.18); }
.header-blue .nav-search button { color: #b6c8e6; }
.header-blue .nav-search button:hover { color: #fff; }

/* Register is a solid accent-blue button — nearly invisible on a blue ground, so it inverts */
.header-blue .main-nav > a.btn-outline-light { background: #fff; color: #1f3a6c; }
.header-blue .main-nav > a.btn-outline-light:hover { background: #dbe7fb; color: #16223a; }
.header-blue .main-nav > a.btn-gold { background: rgba(255,255,255,.16); color: #fff; }
.header-blue .main-nav > a.btn-gold:hover { background: rgba(255,255,255,.26); }
.header-blue .main-nav > a.user-chip { background: rgba(255,255,255,.16); color: #fff !important; }
.header-blue .main-nav > a.user-chip:hover { background: rgba(255,255,255,.26); }
.header-blue .logout-form-nav button { color: #b6c8e6; }
.header-blue .logout-form-nav button:hover { color: #fff; }

/* ---------- hero / home ---------- */
/* ============================================================================
   HOMEPAGE SLIDER (added 2026-08-25)
   Replaced the old .hero / .usp-strip / .featured-note block. The markup is in
   views/index.php, the panels are built by app/homepage_slides.php, and the
   behaviour is in views/partials/slider.php.
   ============================================================================ */

/* a row of big figures — also used by the admin dashboard, so it outlived the hero */
.hero-stats { display: flex; gap: 1.9rem; margin-top: 1.7rem; flex-wrap: wrap; align-items: flex-end; }
.stat strong { display: block; font-size: 1.9rem; color: var(--navy); font-weight: 800; line-height: 1.15; }
.stat span { color: var(--muted); font-size: .9rem; }
/* the serial-number / sales counts — what this catalog has that others don't */
.stat-split { width: 1px; align-self: stretch; background: var(--line); margin: .2rem 0; }
.stat-key strong { color: var(--accent); }
.stat-key span { color: var(--ink); }
@media (max-width: 560px) { .stat-split { display: none; } .hero-stats { gap: 1.1rem 1.6rem; } }

/* ---------- the stage: a blue band running edge to edge ---------- */
.stage {
  /* 100vw counts the scrollbar and .container does not, so a plain 100vw band hangs past
     the right edge and gives the page a horizontal scrollbar. --vw is the real content
     width, set in partials/slider; 100vw is the no-script fallback. */
  width: var(--vw, 100vw);
  margin-left: calc(50% - var(--vw, 100vw) / 2);
  margin-top: -1px;
  background:
    radial-gradient(820px 470px at 86% 6%, rgba(96,165,250,.38), transparent 62%),
    radial-gradient(620px 400px at 4% 98%, rgba(59,130,246,.22), transparent 66%),
    linear-gradient(158deg, #2a4f8d 0%, #22417a 48%, #1d3768 100%);
  color: #eef3fc; padding: 1.5rem 0 1.6rem; overflow: hidden;
}
.stage-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.stage-copy h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.18; margin: 0 0 .35rem; }
.stage-copy p { color: #d5e2f6; font-size: .98rem; line-height: 1.5; margin: 0; }

/* ---------- the five feature cards: a small picture of a real page, a click enlarges it ---------- */
.feats { margin-top: 1.7rem; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 1.3rem 1.5rem 1.5rem; }
.feats > h2 { color: var(--navy); font-size: 1.3rem; letter-spacing: -.02em; margin: 0 0 .9rem; }
.feat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.feat-card { display: flex; flex-direction: column; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0; overflow: hidden; font: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.feat-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.feat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feat-mini { display: block; height: 150px; overflow: hidden; background: var(--thead); pointer-events: none; }
.feat-mini .shot { zoom: .4; border: 0; border-radius: 0; box-shadow: none; min-height: 100%; }
.feat-text { display: flex; flex-direction: column; flex: 1; padding: .6rem .8rem .75rem; }
.feat-text b { color: var(--navy); font-size: .94rem; }
.feat-text span { color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: .15rem; flex: 1; }
.feat-text em { color: var(--accent); font-size: .76rem; font-style: normal; font-weight: 700; margin-top: .4rem; }
.feat-dialog { margin: auto; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 0; border-radius: 16px; padding: 1rem; background: var(--bg); color: var(--ink); }
.feat-dialog::backdrop { background: rgba(15,25,45,.6); }
.feat-dialog-close { display: block; margin: 0 0 .6rem auto; }
@media (max-width: 1040px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .stage-in { grid-template-columns: minmax(0, 1fr); gap: .9rem; } }
/* a phone: each card is one short row, picture beside the words */
@media (max-width: 640px) {
  .feats { padding: 1rem; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .feat-card { flex-direction: row; align-items: stretch; }
  .feat-mini { flex: 0 0 112px; height: auto; min-height: 92px; }
  .feat-mini .shot { zoom: .22; }
  .feat-text { padding: .5rem .7rem; }
  .feat-text span { flex: none; }
  .feat-text em { margin-top: .2rem; }
}

.stage-search {
  display: flex; gap: .4rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px; padding: .4rem;
}
.stage-search input {
  flex: 1; min-width: 0; border: none; border-radius: 10px; background: #fff; color: var(--ink); font: inherit;
  font-size: 1rem; padding: .55rem .8rem;
}
.stage-search input::placeholder { color: var(--muted); opacity: 1; }
.stage-search input:focus { outline: none; }
.stage-search:focus-within { border-color: #9dc0ff; background: rgba(255,255,255,.18); }

/* ---------- the "shot": a framed piece of a real page ---------- */
.shot {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 55px rgba(16,32,60,.34);
  /* The band sets a near-white colour for its own copy. Table cells and anything else in
     here that has no colour of its own would inherit it and vanish against the white page,
     so the frame resets to the site's normal ink first. */
  color: var(--ink);
}
.shot-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .7rem; background: #f3f6fb; border-bottom: 1px solid var(--line);
}
.shot-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d3dcec; margin-right: 4px; }
.shot-url {
  font-size: .68rem; color: #8b9ab5; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: .1rem .6rem; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-body { padding: .8rem .9rem .9rem; }
.shot-h { font-size: .88rem; font-weight: 800; color: var(--navy); margin-bottom: .5rem; }
.shot-h-sub { font-weight: 500; color: var(--muted); font-size: .8rem; }
.shot-foot { margin-top: .45rem; font-size: .68rem; color: var(--muted); line-height: 1.45; }
.shot-foot strong { color: var(--ink); }
.shot .fake-link { color: var(--accent); }

/* everything inside the frame is a real page's furniture, shrunk to fit */
.shot .note-grid { gap: .4rem; margin-top: 0; grid-template-columns: repeat(4, 1fr); }
.shot .note-card { border-radius: 9px; pointer-events: none; }
.shot .note-thumb { height: 56px; padding: 4px; }
.shot .note-card-body { padding: .25rem .4rem .3rem; gap: .05rem; line-height: 1.35; }
.shot .note-card-top { gap: .25rem; }
.shot .note-card-top strong { font-size: .66rem; }
.shot .note-year { font-size: .56rem; }
.shot .note-meta {
  font-size: .55rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot .reg-stats { font-size: .58rem; gap: .25rem .7rem; margin: 0 0 .4rem; padding: .25rem .45rem; }
.shot .varieties-table { font-size: .62rem; }
.shot .varieties-table th, .shot .varieties-table td { padding: .22rem .32rem; vertical-align: top; }
.shot .varieties-table thead th { font-size: .52rem; }
.shot .seller-lot, .shot .price-multi, .shot .serial-note { font-size: .5rem; }
.shot .price-multi { max-width: 8rem; }
.shot .chip-coll, .shot .chip-reoffer, .shot .chip-kind { font-size: .48rem; padding: .05rem .3rem; }
.shot .serial-toggle { font-size: .5rem; padding: .06rem .3rem; }
.shot .seen-n { margin-right: .25rem; }
.shot .pip { width: 5px; height: 5px; margin-right: 2px; }
.shot .arch-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: 0; }
.shot .arch-card { border-radius: 9px; pointer-events: none; }
.shot .arch-thumb { height: 66px; padding: 5px; }
.shot .arch-card-body { padding: .3rem .45rem .4rem; gap: .1rem; }
.shot .arch-card-top strong { font-size: .72rem; }
.shot .arch-card-year { font-size: .6rem; }
.shot .arch-card-desc { font-size: .58rem; line-height: 1.3; -webkit-line-clamp: 1; }
.shot .arch-card-bottom { padding-top: .3rem; gap: .3rem; }
.shot .arch-kind-badge { font-size: .5rem; padding: .08rem .4rem; }
.shot .arch-card-ref { font-size: .52rem; }

/* the fuller pictures (2026-11-04): normal reading sizes, not the shrunken ones above */
.shot.shot-full .wv-tiles { margin-bottom: .8rem; }
.shot.shot-full .table-scroll { overflow: visible; }
.shot.shot-full .varieties-table { font-size: .82rem; }
.shot.shot-full .varieties-table th, .shot.shot-full .varieties-table td { padding: .4rem .45rem; }
.shot.shot-full .varieties-table thead th { font-size: .68rem; }
.shot.shot-full .seller-lot, .shot.shot-full .price-multi, .shot.shot-full .serial-note { font-size: .72rem; }
.shot.shot-full .chip-coll, .shot.shot-full .chip-reoffer, .shot.shot-full .chip-kind { font-size: .68rem; padding: .08rem .4rem; }
.shot.shot-full .serial-toggle { font-size: .7rem; padding: .12rem .45rem; white-space: nowrap; }
.shot.shot-full .pip { width: 6px; height: 6px; }
.shot.shot-full .serial-chain { font-size: .76rem; margin: 0; }
.shot.shot-full tr.shot-chain td { padding: 0 .45rem .6rem 1.2rem; }
.shot.shot-full .grid-band { margin: .9rem 0 .35rem; padding-top: .55rem; }
.shot.shot-full .grid-band-first { margin-top: 0; padding-top: 0; border-top: 0; }
.shot.shot-full .note-grid { gap: .55rem; }
.shot.shot-full .note-thumb { height: 84px; padding: 5px; }
.shot.shot-full .note-card-body { padding: .35rem .5rem .45rem; }
.shot.shot-full .note-card-top strong { font-size: .8rem; }
.shot.shot-full .note-year { font-size: .68rem; }
.shot.shot-full .note-meta { font-size: .68rem; }
.shot.shot-full .shot-foot { font-size: .78rem; }
@media (max-width: 640px) {
  .shot.shot-full .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot.shot-full .wv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a table's rows stack on a phone: nothing scrolls sideways or gets cut off */
  .shot.shot-full .varieties-table, .shot.shot-full .varieties-table tbody { display: block; }
  .shot.shot-full .varieties-table thead { display: none; }
  .shot.shot-full .varieties-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; padding: .5rem 0; border-bottom: 1px solid var(--row); }
  .shot.shot-full .varieties-table td { display: block; padding: 0; border: 0; }
  .shot.shot-full tr.shot-chain { padding-top: 0; }
  .shot.shot-full tr.shot-chain td { padding: 0; width: 100%; }
  .shot.shot-full .varieties-table td.serial-toggle-cell { display: none; }
  /* the small picture on the card stays one short row, however tall the full picture is */
  .feat-mini { max-height: 120px; }
}
/* on the card itself the small picture starts at the notes or the table, not the figures above them */
.feat-mini .shot-full .wv-tiles { display: none; }

/* the price ladder on the "what it's worth" panel */
.pricebars { display: flex; flex-direction: column; gap: .4rem; }
.pricebar { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: .5rem .6rem; font-size: .72rem; }
.pb-grade { font-weight: 700; color: var(--navy); white-space: nowrap; }
.pb-track { height: 9px; border-radius: 5px; background: #eef2f8; overflow: hidden; }
.pb-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6f9bf0, var(--accent)); }
.pb-price { font-weight: 800; color: var(--navy); white-space: nowrap; }
.pb-where { grid-column: 2 / -1; font-size: .64rem; color: var(--muted); margin-top: -.25rem; }

/* a frame taller than its slot fades out at the foot rather than being cut off */
/* ---------- below the stage: the figures (owner's choice, 2026-11-04) ----------
   The heading beside five numbers, split into what is catalogued and what is recorded. */
.figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.6rem; align-items: center;
  margin-top: 1.7rem; background: var(--card); border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: var(--shadow); }
.figs-copy h2 { font-size: 1.3rem; color: var(--navy); letter-spacing: -.02em; }
.figs-lead { color: var(--muted); font-size: .95rem; margin-top: .3rem; }
.figs .figures-foot { margin-top: .9rem; }
.figs-nums { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.figs-group { background: var(--thead); border-radius: 12px; padding: .8rem 1rem; }
.figs-key { background: var(--accent-soft); }
.figs-group h3 { color: #4f5d73; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .35rem; }
.figs-row { display: flex; align-items: baseline; gap: .55rem; padding: .18rem 0; }
.figs-row strong { color: var(--navy); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.figs-key .figs-row strong { color: var(--accent-strong); }
.figs-row span { color: var(--ink); font-size: .86rem; }
@media (max-width: 900px) { .figs { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; } }
@media (max-width: 560px) { .figs-nums { grid-template-columns: minmax(0, 1fr); } }

.figures-foot {
  display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .89rem;
}
.figures-foot .live { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; }
.figures-foot .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* ---------- rarity spotlight, at the foot of the page ---------- */
.rarity-eyebrow {
  font-size: .74rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em;
}
.rarity-band {
  margin-top: 1.6rem; background: var(--card); border-radius: 18px;
  padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--shadow);
}
.rb-head { max-width: 46rem; }
.rb-head h2 { font-size: 1.25rem; color: var(--navy); margin: .2rem 0 .35rem; }
.rb-head p { color: var(--muted); font-size: .92rem; }
.rb-head p strong { color: var(--ink); font-weight: 700; }
.rb-card {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 1.4rem; align-items: center;
  margin-top: 1.1rem; padding: 1rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 16px; background: #fbfcfe;
  transition: box-shadow .15s, border-color .15s;
}
.rb-card:hover { border-color: #c9d8f2; box-shadow: var(--shadow-hover); }
.rb-img { display: block; border-radius: 11px; overflow: hidden; background: #f3f5f9; padding: 8px; }
.rb-img img { width: 100%; display: block; }
.rb-body { display: flex; flex-direction: column; gap: .3rem; }
.rb-chip {
  align-self: flex-start; background: var(--navy); color: #fff; font-size: .74rem; font-weight: 600;
  border-radius: 8px; padding: .18rem .6rem;
}
.rb-body strong { color: var(--ink); font-size: 1.2rem; line-height: 1.25; }
.rb-sub { color: var(--muted); font-size: .88rem; }
.rb-why { color: var(--muted); font-size: .93rem; line-height: 1.55; margin-top: .35rem; }
.rb-more { color: var(--accent); font-weight: 700; font-size: .88rem; margin-top: .3rem; }
.rb-card:hover .rb-more span { display: inline-block; transform: translateX(3px); transition: transform .12s; }
@media (max-width: 760px) { .rb-card { grid-template-columns: 1fr; } }

/* ============================================================================
   HOMEPAGE COUNTRY LISTS: a flag and a name, nothing that opens on hover (2026-11-04).
   The search page still uses the bordered .country-card below; only the
   homepage grid uses these.
   ============================================================================ */
.cgrid { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ccard {
  display: block; position: relative; border-radius: 12px; padding: .6rem .8rem;
  text-decoration: none; border: 1px solid transparent; transition: background .12s;
}
.ccard:hover { background: #f1f5fb; }
.ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ccard-row { display: flex; align-items: center; gap: .7rem; }
.ccard-name { font-weight: 600; color: var(--ink); flex: 1; font-size: .93rem; line-height: 1.25; }
/* territories with nothing catalogued yet stay quiet until pointed at */
.ccard-empty { opacity: .5; }
.ccard-empty:hover { opacity: 1; }
/* A country in development: not a button, no figures, just its name and a small tag. */
.soon-tag { flex: none; color: var(--amber-ink); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 999px; padding: .05rem .5rem; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.ccard-soon { cursor: default; }
div.ccard-soon:hover { background: none; }
.ccard-soon .ccard-name { color: var(--muted); font-weight: 500; }
.ccard-soon .country-flag { filter: grayscale(1); opacity: .55; }
/* The admin's own "done editing" marker — a plain green outline, rendered for no one else. */
.ccard-done { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* Cards or list: the switch above the countries, and the plain list */
#countries + .cview { margin-top: 1.6rem; }
.cview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cview[hidden] { display: none; }
.cview h2 { color: var(--navy); font-size: 1.3rem; letter-spacing: -.02em; }
.cview-btns { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .2rem; gap: .15rem; }
.cview-btns button { background: transparent; border: 0; border-radius: 8px; color: var(--navy); font: inherit; font-size: .88rem; font-weight: 600; padding: .32rem .9rem; cursor: pointer; }
.cview-btns button:hover { background: var(--thead); }
.cview-btns button.on { background: var(--navy); color: #fff; }
.cview-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clist { columns: 3; column-gap: 1rem; margin-top: 1rem; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 1.1rem 1.2rem .4rem; }
.clist-block { break-inside: avoid; margin-bottom: 1.1rem; }
.clist-block h3 { color: var(--navy); font-size: .92rem; font-weight: 800; margin: 0 0 .3rem; padding-bottom: .25rem; border-bottom: 2px solid var(--line); }
.clist-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .22rem .3rem; border-radius: 6px; text-decoration: none; }
a.clist-row:hover { background: var(--accent-soft); }
.clist-name { color: var(--accent-strong); font-size: .9rem; line-height: 1.3; }
.clist-soon .clist-name { color: var(--muted); }
@media (max-width: 900px) { .clist { columns: 2; } }
@media (max-width: 560px) { .clist { columns: 1; } }

.region-block {
  margin-top: 1.6rem; background: var(--card); border-radius: 18px;
  padding: 1.3rem 1.5rem 1.5rem; box-shadow: var(--shadow);
}
.region-title {
  font-size: .82rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .8rem;
}
.country-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
/* each card: flag + name + note count up top, then a four-column strip of the
   country's registers (varieties / serials / auctions / archive) underneath */
.country-card {
  display: flex; flex-direction: column; gap: .55rem;
  border: 1px solid var(--line); border-radius: 13px; background: #fff;
  padding: .7rem .85rem .65rem; text-decoration: none;
  transition: box-shadow .12s, border-color .12s;
}
.country-card:hover { border-color: #c9d8f2; box-shadow: var(--shadow-hover); }
.country-card-top { display: flex; align-items: center; gap: .65rem; }
.country-flag img, .flag-placeholder { width: 38px; height: 26px; object-fit: cover; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.18); flex-shrink: 0; }
.flag-placeholder {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: .68rem; font-weight: 700; letter-spacing: .5px; box-shadow: none;
}
.country-name { font-weight: 600; color: var(--ink); flex: 1; font-size: .93rem; line-height: 1.25; }
.country-count { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.country-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem;
  border-top: 1px solid var(--line); padding-top: .5rem;
}
.country-stat { text-align: center; }
.country-stat strong { display: block; font-size: .88rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.country-stat span { display: block; font-size: .62rem; color: var(--muted); letter-spacing: .01em; }
/* registers a country doesn't have yet stay quiet */
.country-stat-zero strong, .country-stat-zero span { color: #b6c2d4; }
/* territories with no notes yet: greyed out until they get content */
.country-card-empty { opacity: .45; }
.country-card-empty .country-flag img, .country-card-empty .flag-placeholder { filter: grayscale(1); }
.country-card-empty:hover { opacity: 1; }
.country-card-empty:hover .country-flag img, .country-card-empty:hover .flag-placeholder { filter: none; }

/* A country in development is on the grid for everyone, under a hatched amber wash saying so.
   The card still links through — a visitor lands on the country's "no banknotes cataloged yet"
   page. Only the admin's card has real counts under the wash, so only that one fades on hover. */
.country-card-dev { position: relative; overflow: hidden; border-color: var(--amber-line); }
.country-card-dev .dev-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  text-align: center; border-radius: 12px;
  background:
    repeating-linear-gradient(-45deg, rgba(122,92,21,.10) 0 10px, rgba(122,92,21,0) 10px 20px),
    rgba(253,245,227,.86);
  transition: opacity .12s;
}
.country-card-dev-admin:hover .dev-overlay { opacity: .12; }
.dev-overlay-tag {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber-ink); background: #fff; border: 1px solid var(--amber-line);
  border-radius: 999px; padding: .2rem .6rem;
}
.dev-overlay-sub { font-size: .68rem; color: var(--amber-ink); }

/* ---------- breadcrumbs & page head ---------- */
/* Each ancestor is a small white button (chip) so the trail visibly reads as
   clickable — chosen from public/designs/breadcrumb-options.html, option 1
   (2026-08-28, the owner's pick). The chips are 36px tall for a real tap
   target; the current page stays flat navy text, so "go here" and "you are
   here" are distinguishable without reading a word. */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.2rem 0 .5rem; font-size: .85rem; color: var(--muted); }
/* lot pages have no breadcrumbs: the Go back button takes their place below the header */
.lot-back { margin: 1.6rem 0 .9rem; }
.breadcrumbs a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: .34rem .8rem; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--accent); font-size: .9rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(30,47,77,.07);
  transition: background .12s, border-color .12s;
}
.breadcrumbs a:hover, .breadcrumbs a:focus-visible {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong);
}
.breadcrumbs .sep { color: #9dabc2; font-size: 1rem; line-height: 1; }
.breadcrumbs .here { padding: .34rem .3rem; color: var(--navy); font-weight: 700; font-size: .9rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.page-head h1 { color: var(--navy); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.page-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.country-desc { color: var(--muted); margin: .4rem 0 1.6rem; max-width: 720px; }
.country-notice { display: flex; gap: .6rem; align-items: flex-start; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); padding: .75rem 1rem; border-radius: 10px; margin: .2rem 0 1.4rem; max-width: 720px; font-size: .92rem; line-height: 1.5; }
.country-notice-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }
/* A standing caution on one variety (varieties.caution) — a note whose authenticity, base
   date or status is open to question. Deliberately louder than .country-notice: that one is
   housekeeping ("still being worked on"), this one is a warning about the note itself. */
.variety-caution {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #fdf4f3; border: 1px solid #eccdc9; border-left: 4px solid var(--danger);
  color: #6f2b2b; padding: .85rem 1.1rem; border-radius: 10px;
  margin: 0 0 1.5rem; max-width: 860px; font-size: .92rem; line-height: 1.55;
}
.variety-caution-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; color: var(--danger); }
.variety-caution strong { display: block; color: var(--danger); font-size: .95rem; letter-spacing: -.01em; margin-bottom: .2rem; }
.variety-caution p + p { margin-top: .5rem; }
/* the "spotted something wrong?" note above Member comments on pick and variety pages */
.corrections-note {
  background: #f6f8fb; border: 1px solid #e2e8f0; border-left: 4px solid var(--accent);
  color: #475569; padding: .75rem 1rem; border-radius: 10px;
  margin: 1.5rem 0; max-width: 860px; font-size: .88rem; line-height: 1.55;
}
.corrections-note strong { color: #1e293b; margin-right: .25rem; }
.corrections-note a { font-weight: 600; }
/* the same banner for a different message (varieties.caution_kind = 'identification'): two
   varieties a photograph cannot separate, so sales may sit on the wrong one of the pair. Blue,
   not red, and no warning triangle: nothing here says the note is doubtful. */
.variety-caution-id { background: #f1f6fe; border-color: #cfdcf5; border-left-color: var(--accent); color: #24406f; }
.variety-caution-id .variety-caution-icon, .variety-caution-id strong { color: var(--accent); }
/* Issue/system headings label the grid *below* them, so the gap above is much larger
   than the gap below — that space is what separates one issue from the previous one.
   An issue heading also carries the rule that closes off the issue above it, sitting in
   the middle of that gap. A heading that *opens* a block (first thing after a system
   heading or a part head) drops back to a small gap and loses the rule; there is nothing
   above it to separate it from. */
.system-heading { color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: 4.5rem 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--line); display: flex; align-items: baseline; gap: .6rem; scroll-margin-top: 1.2rem; }
.system-heading .system-range { color: var(--muted); font-size: .88rem; font-weight: 600; }
.issue-heading { color: var(--navy); font-size: 1.05rem; font-weight: 700; letter-spacing: -.005em; margin: 3.25rem 0 .85rem; padding: 1.6rem 0 .35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; scroll-margin-top: 1.2rem; }
.issue-heading .issue-range { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
h3.issue-heading { font-size: .98rem; }
.system-heading + .issue-heading { margin-top: 1.5rem; }
.system-heading:first-child, .issue-heading:first-child,
.part-head + .system-heading, .part-desc + .system-heading,
.part-head + .issue-heading, .part-desc + .issue-heading { margin-top: 1.4rem; }
/* the first heading on the page follows the intro blurb, not another issue */
.country-desc + .system-heading, .country-notice + .system-heading, .part-jump + .system-heading, .issue-jump + .system-heading, .page-head + .system-heading,
.country-desc + .issue-heading, .country-notice + .issue-heading, .part-jump + .issue-heading, .issue-jump + .issue-heading, .page-head + .issue-heading { margin-top: 2rem; }
/* no closing rule on a heading that opens a block */
.system-heading + .issue-heading, .issue-heading:first-child,
.part-head + .issue-heading, .part-desc + .issue-heading,
.country-desc + .issue-heading, .country-notice + .issue-heading,
.part-jump + .issue-heading, .issue-jump + .issue-heading, .page-head + .issue-heading { border-top: 0; padding-top: 0; }
/* A sub-section inside an issue (banknotes.subseries) — one issue name, two designs. It has to
   read as a step *below* the issue heading, so it drops the rules entirely and leans on a short
   accent bar and a lighter weight instead. */
.subissue-heading { color: var(--navy); font-size: .93rem; font-weight: 600; margin: 2.2rem 0 .8rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; }
.subissue-heading .subissue-name { display: flex; align-items: baseline; gap: .55rem; }
.subissue-heading .subissue-name::before { content: ""; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; align-self: center; }
.subissue-heading .subissue-range { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.issue-heading + .subissue-heading { margin-top: 1.1rem; }

.pick-line { color: var(--muted); margin-bottom: .6rem; }
.parent-pick-link { margin: -.2rem 0 1.2rem; font-size: .93rem; }
.parent-pick-link a { text-decoration: none; font-weight: 600; }
.parent-pick-link a:hover { text-decoration: underline; }

/* fact chips */
.chips { display: flex; gap: .45rem; margin: .55rem 0 1rem; flex-wrap: wrap; }
.chip {
  background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 600;
  border-radius: 999px; padding: .25rem .8rem; white-space: nowrap;
}
.chip.plain { background: #e8ecf3; color: var(--muted); }

/* ---------- note / variety cards ---------- */
.note-grid {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.note-card {
  background: var(--card); border: 1px solid #eef1f6; border-radius: 14px;
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.note-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.note-thumb { display: block; background: #f3f5f9; height: 160px; padding: 8px; }
.note-thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb-placeholder { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .85rem; }
.note-card-body { padding: .7rem .9rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.note-card-top { display: flex; justify-content: space-between; gap: .5rem; }
.note-card-top strong { color: var(--accent); }
.note-year { color: var(--muted); white-space: nowrap; }
.note-denom { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.note-meta { color: var(--muted); font-size: .8rem; }
.note-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: .45rem; }
.variety-badge {
  background: var(--accent-soft); border-radius: 20px;
  font-size: .72rem; padding: .12rem .6rem; color: var(--accent); font-weight: 600;
}
.note-value { color: var(--green); font-weight: 600; font-size: .9rem; }

.variety-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.variety-thumb { height: 130px; }

/* ---------- note detail ---------- */
.note-layout { margin-top: .5rem; }

/* two-column top: gallery left, information right */
.detail-top { display: grid; grid-template-columns: 7fr 5fr; gap: 1.4rem; align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .detail-top { grid-template-columns: 1fr; } }
.detail-top .info-section, .detail-top .gallery, .detail-top .empty-box { margin-top: 0; }
.detail-top .note-comments { margin-top: 2.2rem; }
.note-comments p { font-size: .9rem; line-height: 1.55; margin: 0; }

.gallery {
  background: var(--card); border-radius: 16px; padding: 1rem;
  box-shadow: var(--shadow);
}
.gallery-main {
  display: grid; place-items: center; min-height: 220px;
}
.gallery-main img { max-height: 420px; object-fit: contain; border-radius: 10px; }
.gallery-caption { color: var(--muted); font-size: .85rem; text-align: center; margin-top: .5rem; overflow-wrap: anywhere; }
.gallery-source { color: var(--muted); font-size: .8rem; text-align: center; margin-top: .25rem; overflow-wrap: anywhere; }
.img-source { color: var(--muted); font-size: .8rem; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery-thumb {
  width: 92px; height: 60px; padding: 2px; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px; background: #f3f5f9;
}
.gallery-thumb.active { border-color: var(--accent); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }

/* every content section is a white panel */
.info-section {
  margin-top: 1.4rem;
  background: var(--card); border-radius: 16px;
  padding: 1.3rem 1.5rem 1.5rem;
  box-shadow: var(--shadow);
}
/* the pick's own commentary when it runs in the main column instead of the rail —
   long-form prose, so it reads at body size with paragraph spacing */
.note-notes p { font-size: .95rem; line-height: 1.65; max-width: 78ch; }
.note-notes p + p { margin-top: .85rem; }
/* East Caribbean States P-17..P-55: detail crops of the identifying features, shown under the commentary */
.note-notes p strong { color: var(--navy); }
.note-notes .tell-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin-top: 1.6rem; }
/* crops placed inside the text by a [[details N-M]] paragraph: clear air before the words that follow */
.note-notes .tell-figs + p { margin-top: 2.2rem; }
.note-notes .tell-fig { margin: 0; background: var(--card); border-radius: 10px; padding: .5rem; box-shadow: var(--shadow); }
.note-notes .tell-fig img { display: block; width: 100%; height: auto; border-radius: 6px; border: 3px solid transparent; cursor: zoom-in; }
.note-notes .tell-own img { border-color: #2e9e4f; }
.note-notes .tell-other img { border-color: #d0342c; }
.note-notes .tell-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 4px; color: #fff; background: #2e9e4f; margin-right: .3rem; }
.note-notes .tell-other .tell-tag { background: #d0342c; }
/* a crop labelled with its variety (Jamaica 1964: "Detail (P-52a), …") — all this pick's own, so neutral blue */
.note-notes .tell-var img { border-color: var(--accent-strong); }
.note-notes .tell-var .tell-tag { background: var(--accent-strong); text-transform: none; letter-spacing: .02em; }
.note-notes .tell-fig figcaption { font-size: .78rem; line-height: 1.4; color: var(--muted); margin-top: .45rem; }

.info-section h2 {
  color: var(--navy); font-size: 1.05rem; font-weight: 800;
  margin-bottom: .8rem; letter-spacing: -.01em;
}
/* a section whose heading carries a fold button: the h2's own bottom margin moves to the row
   so the button lines up with the words rather than sitting below them */
.section-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.section-head h2 { margin-bottom: 0; }
.btn.section-toggle { margin-left: auto; padding: .28rem .7rem; font-size: .79rem; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { padding: .5rem .2rem; border-bottom: 1px solid var(--row); text-align: left; font-size: .92rem; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }
.info-table th { width: 190px; color: var(--muted); font-weight: 500; vertical-align: top; }
.info-table td { font-weight: 600; }

.sides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 700px) { .sides-grid { grid-template-columns: 1fr; } }
.side-box {
  background: #f8f9fc; border-radius: 12px;
  padding: .9rem 1rem;
}
.side-box p + p { margin-top: .5rem; }
/* bullet lists inside an "About this variety" description */
.desc-list { margin: .5rem 0 0; padding-left: 1.15rem; }
.desc-list li { margin-top: .3rem; }
.desc-list li:first-child { margin-top: 0; }
.desc-list + p { margin-top: .5rem; }
.side-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); margin-bottom: .45rem; border: none; padding: 0;
}
.lettering { font-size: .88rem; color: var(--muted); }
.lettering-label { font-weight: 600; color: var(--ink); }

.table-scroll { overflow-x: auto; }
.varieties-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  font-size: .9rem; border-radius: 10px; overflow: hidden;
}
.varieties-table th, .varieties-table td { border-bottom: 1px solid var(--row); padding: .55rem .7rem; text-align: left; }
.varieties-table tr:last-child td { border-bottom: none; }
.varieties-table thead th {
  background: var(--thead); color: var(--muted); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.varieties-table .value-head, .varieties-table .grade { text-align: center; }
.varieties-table td.grade { white-space: nowrap; }
.v-comment { display: block; color: var(--muted); font-size: .8rem; }
.v-date { white-space: nowrap; }
/* the sales-table Grade cell: a holder grade ("PMG 66 EPQ") stays on one line, a long house grade
   ("good about uncirculated to uncirculated") wraps instead of widening the table (owner 2026-09-23) */
.v-grade { white-space: normal; min-width: 6.5rem; max-width: 10rem; overflow-wrap: break-word; }

/* click-to-sort headings (partials/table_sort.php wraps the heading text in .th-sort at
   runtime, so a browser without scripting keeps the plain heading and no arrow) */
.varieties-table thead th.is-sortable { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: .35rem; width: 100%;
  padding: .55rem .7rem; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
}
.th-sort::after { content: '\2195'; opacity: .3; font-size: .95em; }
.th-sort:hover { color: var(--ink); }
.th-sort:hover::after { opacity: .6; }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--ink); }
th[aria-sort="ascending"] .th-sort::after { content: '\2191'; opacity: 1; }
th[aria-sort="descending"] .th-sort::after { content: '\2193'; opacity: 1; }

/* client-side filter box above long variety tables (see note.php) */
.table-filter { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 .8rem; flex-wrap: wrap; }
.table-filter-input {
  flex: 1; min-width: 220px; max-width: 420px;
  padding: .45rem .75rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.table-filter-input::placeholder { color: var(--muted); }
.table-filter-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.table-filter .hint { margin-left: auto; white-space: nowrap; }
tr.filter-hidden { display: none; }
/* ten rows to a page inside the serial and auction tables (partials/table_pager.php). The
   pager box and the note beside the count are both written at runtime, so both start hidden. */
tr.page-hidden { display: none; }
.varieties-table th.row-num-head, .varieties-table td.row-num {
  width: 1%; text-align: right; white-space: nowrap;
  color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums;
}
.varieties-table td.row-num { padding-right: .55rem; }

/* ---------- pick varieties list: kind groups (2026-08-28) ---------- */
/* One band per kind of variety heads its run of rows, so the old Name column — the same
   word repeated down 90 rows — could go. The band reuses the thead fill so it reads as a
   heading, not as data. */
.varieties-table tr.v-group > td { background: var(--thead); border-top: 2px solid #d5deee; border-bottom: 1px solid var(--line); padding: .5rem .7rem; }
.varieties-table tr.v-group-first > td { border-top: none; }
.v-group-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.v-group-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); }
.v-group-count { background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: .04rem .5rem; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-group-note { color: var(--muted); font-size: .82rem; font-weight: 400; }
/* one word ("Show"/"Hide"), so the button can sit a shade smaller than a normal btn-sm —
   the count it used to spell out is the chip beside the group's title */
.btn.v-group-toggle { margin-left: auto; align-self: center; padding: .28rem .7rem; font-size: .79rem; }
/* a faint hover keeps the eye on its row across the wide comment column */
.varieties-table tbody tr.v-row:hover > td { background: #fafbfe; }
/* the same faint hover on the serial register and the sales history — those rows are just
   as wide, so the eye needs the same guide across them (variety pages and pick pages) */
#variety-serials-table tbody tr:hover > td,
#variety-auctions-table tbody tr:hover > td,
#note-serials-table tbody tr:hover > td,
#note-auctions-table tbody tr:hover > td { background: #fafbfe; }
/* nowrap keeps a two- or three-name pair together; sigCellHtml() breaks longer boards into two lines itself */
.v-sig { white-space: nowrap; }
/* what a cell has nothing to say, said quietly — "no signature", a dash */
.v-none { color: #b9c3d3; }
/* the serial clause leads the comment in bold, the commentary follows muted underneath,
   so a column of prefixes reads down the page like a register */
.v-comment-cell { max-width: 34rem; }
.v-pfx { display: block; }
.v-pfx-word { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .4rem; }
.v-pfx b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.v-rest { display: block; color: var(--muted); font-size: .83rem; margin-top: .12rem; }
.v-rest strong, .v-comment-cell > strong { color: var(--ink); font-weight: 700; }
/* "On record": photographs, serial numbers and sales, three marks in one cell. A zero is
   printed greyed rather than dropped — the column is meant to read as a work list, and a
   variety with four photographs and no serials is exactly what it is telling you. */
.varieties-table th.vl-rec-head, .varieties-table td.v-rec { width: 1%; text-align: right; white-space: nowrap; }
.v-mk { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.v-mk + .v-mk { margin-left: .62rem; }
.v-mk svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.v-mk.is-zero { color: #c8d0de; font-weight: 600; }
/* the count is the whole cell visually; a screen reader needs it said in words */
.sr-only {
  position: absolute; 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;
}
/* the caution chip says only that there is something to read — the full text is the red
   banner on the variety's own page, and the pick page does not repeat it */
.v-caution-chip { display: inline-block; font-size: .7rem; font-weight: 700; white-space: nowrap; padding: .05rem .42rem; border-radius: 5px; margin-left: .35rem; cursor: help; background: #faeaea; color: var(--danger); border: 1px solid #ecc9c9; vertical-align: .08em; }
.v-caution-chip-id { background: #eaf1fd; color: var(--accent); border-color: #cfdcf5; }
/* Pick varieties list: the variety number is a button (owner's choice, option A, 2026-11-05). Any chip sits under it,
   so a chip never widens the column and pushes the table to the right. */
.v-btn { display: inline-flex; align-items: center; gap: .35rem; box-sizing: border-box; padding: .3rem .6rem; border: 1px solid var(--accent); border-radius: 8px; background: #fff; color: var(--accent); font-size: .86rem; line-height: 1.25; white-space: nowrap; text-decoration: none; }
.v-btn strong { color: inherit; }
.v-btn span { font-weight: 700; }
.v-btn:hover { background: var(--accent); color: #fff; text-decoration: none; }
.v-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-var-cell .v-caution-chip { display: block; width: max-content; margin: .3rem 0 0; }
/* the hidden words in "On record" are placed absolutely: without this they escape the scrolling box and widen the whole page on a phone */
#varieties-list .table-scroll { position: relative; }
@media (max-width: 560px) { .v-btn { padding: .42rem .6rem; } }
/* two ways a data row leaves the page: folded under its band's "Show all" button, or
   filtered out by the search box. Kept as two classes so one cannot undo the other. */
tr.vl-collapsed, tr.vl-hidden { display: none; }
/* the same kind bands over the card grid, drawn as a rule rather than a filled row */
.grid-band { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: 1.6rem 0 .1rem; padding-top: .7rem; border-top: 2px solid #d5deee; }
.grid-band-first { margin-top: .9rem; padding-top: 0; border-top: none; }
.grid-band .grid-band-toggle { margin-left: auto; }
/* the band's Hide button sets the hidden attribute, and `display: grid` above outranks the
   browser's own [hidden] rule — without this line the button changed nothing on screen */
.note-grid[hidden] { display: none; }

/* the varieties-list intro: the sentence on the left, the jump to the photographs on the right */
.vl-intro { display: flex; align-items: center; gap: .8rem .9rem; flex-wrap: wrap; }
.vl-intro > span { flex: 1 1 26rem; }
.vl-intro .btn { white-space: nowrap; padding: .28rem .7rem; font-size: .79rem; }

/* the Hide/Show button partials/section_fold.php writes into each section heading of the
   pick page. Floated so it sits top right whatever the h2 holds; a folded section keeps
   only its heading on screen. Sections always load open — the reader does the hiding. */
.info-section > h2 .sec-fold-btn { float: right; margin-left: .6rem; font-weight: 600; }
.info-section.sec-folded > *:not(h2) { display: none; }
.info-section.sec-folded > h2 { margin-bottom: 0; }

/* ---------- serial registry: provenance columns ---------- */
/* One row per note, always. A note's chain of appearances lives in a <div> inside its own
   last cell, never in a sibling <tr> — table_sort moves whole rows and table_pager counts
   them, so a detail row would be torn off its parent and would eat a slot in the page. */
.reg-stats {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: baseline;
  padding: .55rem .7rem; margin-bottom: .5rem;
  background: var(--thead); border-radius: 10px;
  font-size: .85rem; color: var(--muted);
}
.reg-stats b { color: var(--ink); font-weight: 700; }

/* the prefix quietened so the numbers line up and a prefix run reads at a glance */
.serial-cell { white-space: nowrap; }
.serial-pfx { color: var(--muted); font-weight: 600; }
/* the island or series letter some colonies print AFTER the number — East Caribbean States
   "A 557693 A", British Honduras P-14 — reads as quietly as the prefix, so the digits still
   line up down the column. Kept as its own class so it can be told apart later. */
.serial-sfx { color: var(--muted); font-weight: 600; }
.serial-num { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* what the row says about the note itself — "unconfirmed, the sale photograph is too small
   to read the serial" — kept under the number, not in the source column */
.serial-note { display: block; white-space: normal; font-weight: 400; font-size: .78rem; color: var(--muted); max-width: 22rem; }

.serial-seen { white-space: nowrap; }
.seen-n { font-weight: 700; margin-right: .4rem; font-variant-numeric: tabular-nums; }
.pip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 3px; }
.pip-off { background: #cbd5e5; }

.chip-coll {
  display: inline-block; font-size: .74rem; font-weight: 600; white-space: nowrap;
  padding: .05rem .38rem; border-radius: 5px; margin-left: .3rem;
  background: var(--accent-soft); color: var(--accent-strong);
}
.reg-muted { color: var(--muted); }

/* a named button, not a bare arrow: it says what it will do and how many are behind it */
.serial-toggle-cell { width: 1%; white-space: nowrap; }
.serial-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; font-size: .8rem; line-height: 1.35; border-radius: 8px;
}
.serial-toggle .caret { display: inline-block; font-size: .8em; transition: transform .12s ease; }
.serial-toggle[aria-expanded="true"] { background: var(--accent-soft); }
.serial-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.serial-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.serial-chain { margin: .5rem 0 .15rem; padding: .1rem 0 .1rem .8rem; border-left: 2px solid var(--line); }
.serial-chain li { list-style: none; padding: .2rem 0; font-size: .85rem; }
.serial-chain .chain-date { color: var(--muted); display: inline-block; min-width: 6.4rem; font-variant-numeric: tabular-nums; }
.serial-chain li:last-child .chain-date { color: var(--ink); font-weight: 600; }
.chain-note { font-size: .8rem; color: var(--muted); margin: .35rem 0 .1rem; }

/* ---------- price guide ("What it's worth", under a variety's sales history) ----------
   Every bar starts at zero and ends at the typical price for its grade, so two bars can be
   compared by length alone. The figure is printed at the end of the bar and again in words
   underneath, because the number is what most readers actually want — the bar is only there
   to make the shape of the ladder visible at a glance. */
.wiw-block + .wiw-block { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.wiw-cur { font-size: .92rem; color: var(--muted); margin: 0 0 .8rem; }
.wiw-cur b { color: var(--ink); font-weight: 700; }

.wiw-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.wiw-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: .1rem .9rem; align-items: center; }
.wiw-label b { display: block; font-size: .96rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.wiw-label span { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }

.wiw-barwrap { display: flex; align-items: center; gap: .6rem; min-height: 26px; }
.wiw-bar {
  display: block; height: 22px; border-radius: 4px; min-width: 4px;
  background: var(--accent); flex: 0 0 auto;
}
.wiw-val { font-size: 1.05rem; font-weight: 800; color: var(--navy); white-space: nowrap; }

.wiw-detail { grid-column: 2; margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }

/* the scale the bars are drawn against, so their length is not an unexplained abstraction */
.wiw-scale {
  display: flex; justify-content: space-between; margin: .7rem 0 0 calc(200px + .9rem);
  padding-top: .35rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--muted);
}

@media (max-width: 640px) {
  .wiw-row { grid-template-columns: 1fr; gap: .3rem; }
  .wiw-detail { grid-column: 1; }
  .wiw-scale { margin-left: 0; }
}

/* ---------- sales history ---------- */
.seller-lot { display: block; font-size: .78rem; color: var(--muted); }
/* a multi-note lot's price covers the whole lot, so it must never read as this note's price */
.price-multi { display: block; font-size: .74rem; color: var(--amber-ink); white-space: normal; max-width: 11rem; }
/* the house's own words, as against a third-party certified grade */
.grade-house { color: var(--muted); }
.chip-kind {
  display: inline-block; font-size: .74rem; font-weight: 600; white-space: nowrap;
  padding: .05rem .38rem; border-radius: 5px;
  background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-line);
}
/* The label is only the lot and the date; "the same note sold as…" is in the title, so the
   cursor has to say a tooltip is there to be read. */
.chip-reoffer {
  display: inline-block; font-size: .74rem; font-weight: 600; white-space: nowrap;
  padding: .05rem .38rem; border-radius: 5px; text-decoration: none;
  background: #eaf4ee; color: var(--green); cursor: help;
}

.table-pager { margin-top: .55rem; }
.pager-status { margin: 0; color: var(--muted); font-size: .85rem; }
.table-pager .pager { margin: .4rem 0 0; }
button.pager-btn { font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.pager-note { color: var(--muted); }
/* the Sales history intro: one short paragraph per point, a little air between them */
.sales-intro { margin-bottom: .6rem; }
.sales-intro .hint { margin: .75rem 0 0; line-height: 1.5; }
.filter-empty { color: var(--muted); font-style: italic; }
/* the "no matches" row is the real last child, so the last data row needs the rule instead */
.varieties-table tbody tr[data-filter]:last-of-type td { border-bottom: none; }
/* PMG population census: one column per grade, counts centered under the grade heads */
.pmg-table th, .pmg-table td { text-align: center; }
.pmg-table th:last-child, .pmg-table td:last-child { border-left: 1px solid var(--row); }
/* Add `scroll-visible` next to `table-scroll` on any wide table (PMG census, auction results)
   to keep its horizontal scrollbar permanently on show. macOS Chrome/Safari hide the overlay
   scrollbar by default, so styling ::-webkit-scrollbar forces the classic always-visible bar
   that reserves space (it still only appears when the table actually overflows).
   IMPORTANT: do NOT set the standard scrollbar-width/-color here — in Chrome 121+ they take over
   and switch OFF ::-webkit-scrollbar, giving back the auto-hiding overlay bar. Firefox (which has
   no ::-webkit-scrollbar) gets those properties via the @supports fallback below. */
.scroll-visible::-webkit-scrollbar { height: 12px; }
.scroll-visible::-webkit-scrollbar-track { background: var(--row); border-radius: 6px; }
.scroll-visible::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 6px; border: 2px solid var(--row); }
@supports not selector(::-webkit-scrollbar) {
  .scroll-visible { scrollbar-width: thin; scrollbar-color: var(--muted) var(--row); }
}
.auction-table td, .auction-table th { font-size: .86rem; }

/* ---------- generic ---------- */
.empty-box {
  background: var(--card); border: 1px dashed var(--line); border-radius: 14px;
  padding: 1.6rem; text-align: center; color: var(--muted); margin-top: 1rem;
}
.info-section .empty-box { border-color: var(--row); background: #f8f9fc; margin-top: 0; }
.btn {
  display: inline-block; border: none; cursor: pointer; text-decoration: none;
  padding: .5rem 1.1rem; border-radius: 10px; font-size: .92rem; font-weight: 600;
  transition: background .12s;
}
.btn-sm { padding: .34rem .85rem; font-size: .84rem; }
.btn-navy { background: var(--accent); color: #fff; }
.btn-navy:hover { background: var(--accent-strong); }
.btn-gold { background: var(--accent-soft); color: var(--accent); }
.btn-gold:hover { background: #dbe7fb; }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }

.list-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  font-size: .92rem; margin-top: .6rem;
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.list-table th, .list-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--row); text-align: left; }
.list-table thead th {
  background: var(--thead); color: var(--muted); font-weight: 600;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
}
.list-table tr:last-child td { border-bottom: none; }
.row-link { cursor: pointer; }
.row-link:hover { background: #f7fafd; }
.cell-thumb img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; }
.cell-actions { white-space: nowrap; }
.cell-actions a { margin-right: .2rem; }
.inline-form { display: inline; }
.link-danger { background: none; border: none; color: var(--danger); cursor: pointer; font-size: .9rem; padding: 0; text-decoration: underline; }

.big-search {
  display: flex; gap: .4rem; margin: 1rem 0 1.5rem; max-width: 620px;
  background: var(--card); border-radius: 14px; padding: .45rem;
  box-shadow: var(--shadow);
}
.big-search input { flex: 1; padding: .5rem .8rem; border: none; background: transparent; border-radius: 10px; font-size: 1rem; font-family: inherit; margin: 0; }
.big-search input:focus { outline: none; }

/* ---------- forms / admin ---------- */
.login-box {
  max-width: 400px; margin: 3rem auto; background: var(--card);
  border-radius: 18px; padding: 1.8rem;
  box-shadow: var(--shadow);
}
.login-box h1 { color: var(--navy); margin-bottom: .8rem; font-size: 1.4rem; font-weight: 800; }

label { display: block; margin-top: .7rem; font-weight: 600; font-size: .88rem; color: var(--ink); }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: .5rem .7rem; margin-top: .25rem;
  border: 1px solid #d4dcea; border-radius: 10px; font-size: .95rem; font-family: inherit;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[type=file] { margin-top: .3rem; font-size: .9rem; }

.form-card {
  background: var(--card); border-radius: 16px;
  padding: 1.3rem 1.5rem 1.5rem; margin-top: 1.2rem; box-shadow: var(--shadow);
}
.form-card h2 { color: var(--navy); font-size: 1.08rem; margin-top: 1rem; font-weight: 800; }
.form-card h2:first-child { margin-top: 0; }
.form-card h3 { color: var(--ink); margin-top: 1.2rem; font-size: .98rem; }
.form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grades-grid { grid-template-columns: repeat(6, minmax(70px, 1fr)); }
.form-buttons { margin-top: 1.2rem; display: flex; gap: .6rem; }
.form-error { background: #fbe9e9; border: 1px solid #e5b8b8; color: var(--danger); padding: .5rem .8rem; border-radius: 10px; margin: .6rem 0; font-size: .9rem; }
.form-success { background: #e8f3ec; border: 1px solid #b9d8c5; color: var(--green); padding: .5rem .8rem; border-radius: 10px; margin: .6rem 0; font-size: .9rem; }
.hint { color: var(--muted); font-size: .85rem; margin-top: .5rem; font-weight: 400; }
.hint code { background: var(--accent-soft); color: var(--accent); padding: .05rem .35rem; border-radius: 5px; }
.flag-preview { height: 22px; vertical-align: middle; }

.admin-nav {
  display: flex; gap: .3rem; align-items: center;
  background: var(--card); border-radius: 14px;
  padding: .45rem .6rem; margin-top: 1.1rem; font-size: .92rem; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.admin-nav a {
  text-decoration: none; font-weight: 600; color: var(--ink);
  padding: .3rem .8rem; border-radius: 99px;
}
.admin-nav a:hover { background: var(--accent-soft); color: var(--accent); }
.logout-form { margin-left: auto; }
.logout-form button { background: none; border: none; color: var(--muted); cursor: pointer; text-decoration: underline; font-size: .9rem; }

.admin-stats { justify-content: flex-start; margin: 1.2rem 0; }
.admin-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }

.admin-image-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: .8rem; }
.admin-image-card { border: 1px solid var(--line); border-radius: 12px; padding: .6rem; background: #f8f9fc; }
.admin-image-card img { width: 100%; height: 110px; object-fit: contain; background: #fff; border-radius: 8px; }
.caption-form { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .4rem; }
.caption-form input { margin-top: 0; flex: 1 1 100%; }
.caption-form button { margin-left: auto; }
.copy-to-note-form { margin: 0 0 .4rem; }
.copy-to-note-form button { width: 100%; }

.variety-edit-table input { margin-top: 0; }
.variety-edit-table .in-sm { width: 80px; }
.variety-edit-table .in-xs { width: 64px; }
.variety-add-form { margin-top: .4rem; }

/* varieties quick-edit table on the banknote page */
.variety-quick-table th, .variety-quick-table td { padding: .45rem .45rem; }
.variety-quick-table td { vertical-align: middle; }
.variety-quick-table input { min-width: 110px; }
.variety-quick-table .in-code { min-width: 100px; width: 120px; }
.variety-quick-table .in-date { min-width: 90px; width: 105px; }
.variety-quick-table .in-name { min-width: 150px; }
.variety-quick-table .cell-actions .btn { margin-right: .35rem; }
.variety-quick-table .cell-thumb img { max-width: none; width: 56px; height: 32px; }

/* jump links to the sections of a long admin edit page */
.section-jump { display: flex; gap: .35rem; flex-wrap: wrap; margin: .6rem 0 .2rem; font-size: .85rem; }
.section-jump a {
  text-decoration: none; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 99px; padding: .22rem .75rem;
}
.section-jump a:hover { background: #dbe7fb; }
.section-jump .n { opacity: .7; font-weight: 500; font-size: .78rem; }
.section-jump .jump-danger { background: #fbe9e9; color: var(--danger); }
.section-jump .jump-danger:hover { background: #f5d9d9; }

.filter-form { margin: .6rem 0; max-width: 340px; }
.danger-zone { border: 1px solid #e5b8b8; }

.note-form h2 { border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin-top: 1.4rem; }

/* ---------- users / comments / auction results ---------- */
.user-chip {
  background: var(--accent-soft); color: var(--accent) !important; text-decoration: none;
  padding: .25rem .8rem; border-radius: 20px; font-size: .86rem; font-weight: 600;
}
.user-chip:hover { background: #dbe7fb; }
.btn-outline-light { background: var(--accent); border: none; color: #fff; border-radius: 10px; }
.btn-outline-light:hover { background: var(--accent-strong); }
.logout-form-nav { display: inline; }
.logout-form-nav button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .85rem; text-decoration: underline; }

.members-box {
  background: linear-gradient(120deg, var(--navy), #2c4370);
  border-radius: 14px; color: #d8e1f0;
  padding: 1.4rem 1.5rem; text-align: center;
}
.members-box p { color: #b9c6dc; }
.members-box p strong { color: #fff; }
.members-box .hint { color: #93a5c2; }
.members-box .btn-navy { background: #fff; color: var(--navy); }
.members-box .btn-navy:hover { background: #e8edf6; }
.members-box .btn-outline { border-color: #7f92b4; color: #e5ebf5; }
.members-box .btn-outline:hover { background: rgba(255,255,255,.1); }

.comment-rules {
  background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 12px;
  padding: .6rem .9rem; font-size: .87rem; color: var(--amber-ink); margin-bottom: .8rem;
}
.comment-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .5rem; }
.comment {
  background: #f8f9fc; border-radius: 12px;
  padding: .8rem 1rem;
}
.comment-pending { border: 1px dashed var(--amber-line); background: #fffdf6; }
.comment-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.comment-body { white-space: pre-line; font-size: .95rem; }
.comment-actions { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; }
.comment-form { margin-top: 1rem; }

.badge { font-size: .72rem; padding: .12rem .55rem; border-radius: 20px; white-space: nowrap; font-weight: 600; }
.badge-ok { background: #e8f3ec; border: 1px solid #b9d8c5; color: var(--green); }
.badge-wait { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .profile-grid { grid-template-columns: 1fr; } }

/* ---------- media sections (watermark / signatures) ---------- */
.media-images { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: .6rem; }
.media-figure { margin: 0; max-width: 220px; }
.media-figure img { border-radius: 8px; border: 1px solid var(--line); background: #fff; max-height: 160px; object-fit: contain; }
.media-figure figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-top: .25rem; }

/* ---------- signatures table ---------- */
.sig-table td { vertical-align: middle; }
.sig-table .sig-name { font-weight: 600; white-space: nowrap; }
.sig-table .sig-title { color: var(--muted); }
/* a combined panel names three to five people; run them down the cell so the
   plate stays beside the names instead of being pushed off to the right */
.sig-table .sig-name-multi { white-space: normal; }
.sig-table .sig-name-multi span { display: block; white-space: nowrap; }
/* the plate belongs beside the names, so let the columns size to their content
   instead of stretching the title column across the page */
.sig-table { width: auto; max-width: 100%; }
.sig-table .sig-image { white-space: nowrap; }
.sig-table .sig-image img { max-height: 44px; max-width: 160px; object-fit: contain; }
/* every signature opens in the lightbox — they are small at thumbnail size */
.sig-table .sig-zoom {
  display: inline-block; padding: 0; border: 0; background: none;
  line-height: 0; cursor: zoom-in; border-radius: 4px;
}
.sig-table .sig-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sig-table .sig-zoom:hover img { opacity: .78; }
.sig-admin-img { max-height: 36px; max-width: 140px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; }

/* ---------- admin ordering controls ---------- */
.check-label { display: flex; align-items: center; gap: .55rem; font-weight: 400; margin-top: .55rem; }
.check-label input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent); }
.move-btns { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.move-btns .btn[disabled] { opacity: .35; cursor: default; }
.cell-move { white-space: nowrap; }
.cell-move form { display: inline; }
.front-badge { position: absolute; margin: .3rem; }
.admin-image-card { position: relative; }

/* ---------- footer ---------- */
.site-footer { background: var(--card); color: var(--muted); margin-top: 2rem; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; padding: 1.1rem 0; font-size: .85rem; flex-wrap: wrap; gap: .5rem; }
.site-footer a { color: var(--accent); }

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--accent);
  box-shadow: var(--shadow); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.to-top:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow-hover); }
.to-top[hidden] { display: none; }

@media (max-width: 640px) {
  .to-top { right: 1rem; bottom: 1rem; }
  .hero h1 { font-size: 1.7rem; }
  .site-header .nav-search input { width: 140px; }
  .grades-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- news & changelog ---------- */
.news-head { margin-top: 1.6rem; max-width: 860px; }
.news-head h1 { color: var(--navy); font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.news-head .hint { margin-top: .3rem; font-size: .95rem; }

.news-kicker {
  color: var(--accent); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: .25rem;
}

.news-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; color: var(--muted); font-size: .84rem; margin-top: .35rem; }
.news-meta > * + *::before { content: "\00b7"; margin-right: .55rem; color: var(--line); font-weight: 700; }
.news-meta a { color: var(--muted); }
.news-meta a:hover { color: var(--accent); }

/* featured (latest) post on the news index */
.news-featured {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: 18px; padding: 1.6rem 1.8rem;
  margin-top: 1.3rem; max-width: 860px; box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}
.news-featured-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.news-featured-title a { color: var(--navy); text-decoration: none; }
.news-featured-title a:hover { color: var(--accent); }
.news-featured .news-card-preview { max-width: 680px; }
.news-featured-btn { margin-top: 1rem; }

.news-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1rem; max-width: 860px;
}
@media (max-width: 720px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--card); border-radius: 16px; padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.news-card-title { font-size: 1.12rem; margin: 0; font-weight: 800; letter-spacing: -.01em; }
.news-card-title a { color: var(--ink); text-decoration: none; }
.news-card-title a:hover { color: var(--accent); }
.news-card-preview { margin-top: .55rem; line-height: 1.55; }
.news-card-more { display: inline-block; margin-top: auto; padding-top: .7rem; font-size: .9rem; font-weight: 600; text-decoration: none; }
.news-card-more:hover { text-decoration: underline; }

/* single post */
.news-post { background: var(--card); border-radius: 18px; padding: 1.8rem 2rem; margin-top: .6rem; max-width: 940px; box-shadow: var(--shadow); }
.news-post h1 { margin: 0; color: var(--navy); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.news-post .news-meta { margin-top: .55rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.news-post-body { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.7; }
.news-post-body p + p { margin-top: .9rem; }
.news-comments { max-width: 940px; }

/* comments with initial-letter avatars */
.news-comments .comment { display: flex; gap: .8rem; align-items: flex-start; }
.comment-avatar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; font-size: .95rem;
}
.comment-main { min-width: 0; }

/* "More news" strip below a post */
.news-more { max-width: 940px; margin-top: 2rem; }
.news-more h2 { font-size: 1.05rem; color: var(--navy); }
.news-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .7rem; }
@media (max-width: 720px) { .news-more-grid { grid-template-columns: 1fr; } }
.news-more-card {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--card); border-radius: 14px; padding: .9rem 1.1rem;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.news-more-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.news-more-date { color: var(--muted); font-size: .78rem; }
.news-more-title { color: var(--ink); font-weight: 700; font-size: .92rem; line-height: 1.35; }
.news-more-card:hover .news-more-title { color: var(--accent); }
.badge-draft { display: inline-block; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; vertical-align: middle; }
.changelog { max-width: 760px; margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.changelog-entry { background: var(--card); border-radius: 16px; padding: 1.1rem 1.4rem; box-shadow: var(--shadow); }
.changelog-date { font-size: .88rem; color: var(--accent); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.changelog-entry ul { margin-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; line-height: 1.5; }

/* ---------- members, profiles, private messages, collections ---------- */
.badge-unread {
  display: inline-block; background: var(--danger); color: #fff;
  border-radius: 99px; font-size: .72rem; font-weight: 700; padding: .02rem .48rem;
}
.member-link { text-decoration: none; }
.member-link:hover { text-decoration: underline; }
.members-table td { vertical-align: middle; }
.comment-author { color: var(--ink); text-decoration: none; }
.comment-author:hover { color: var(--accent); text-decoration: underline; }

.collect-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: -.3rem 0 1rem; }
.collect-bar form { display: inline; margin: 0; }

.scam-warning {
  background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 12px;
  padding: .7rem 1rem; font-size: .9rem; color: var(--amber-ink); margin: .8rem 0 1rem;
  max-width: 760px; line-height: 1.5;
}

.convo-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; max-width: 760px; }
.convo {
  display: flex; gap: .9rem; align-items: center;
  background: var(--card); border-radius: 14px; padding: .75rem 1.1rem;
  text-decoration: none; box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.convo:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.convo-main { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.convo-top strong { color: var(--ink); }
.convo-preview { display: block; color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-thread { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 1.2rem; max-width: 760px; }
.msg {
  max-width: 78%; background: var(--card); border-radius: 14px 14px 14px 4px;
  padding: .55rem .85rem .45rem; box-shadow: var(--shadow); align-self: flex-start;
}
.msg-mine { background: var(--accent-soft); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.msg-body { white-space: pre-line; font-size: .95rem; }
.msg-meta { font-size: .72rem; color: var(--muted); margin-top: .15rem; text-align: right; }
.msg-form { max-width: 760px; }

.collection-card .note-card-body { gap: .3rem; }
.collection-card-title { text-decoration: none; display: flex; flex-direction: column; gap: .15rem; }
.collection-remove .link-danger { font-size: .8rem; }

/* ---------- note page: "Reference desk" layout (Option A, Jul 2026) ----------
   Main reading column + sticky right rail (specs, stats, page nav, related picks).
   The previous note page is preserved in /design-backup-note-v1/. */
/* note/variety pages get a wider container so the main column fits
   three variety cards per row next to the 340px rail */
main.container:has(.note-cols) { width: min(1260px, 100% - 2rem); }

.note-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 1.4rem; align-items: start; margin-top: 1rem; }
.note-gallery-cell { grid-column: 1; grid-row: 1; min-width: 0; }
.note-gallery-cell .empty-box { margin-top: 0; }
.note-rest { grid-column: 1; grid-row: 2; min-width: 0; }
.note-rail {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: start;
  display: flex; flex-direction: column; gap: .9rem;
}
@media (min-width: 951px) { .note-rest > :first-child { margin-top: 0; } }

.rail-card { background: var(--card); border-radius: 14px; padding: 1rem 1.15rem; box-shadow: var(--shadow); }
.rail-card h2 {
  font-size: .95rem; font-weight: 700; color: var(--navy);
  letter-spacing: -.01em; margin-bottom: .55rem;
}
.note-rail .collect-bar { margin: 0; gap: .45rem; }

.rail-spec { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rail-spec th { text-align: left; color: var(--muted); font-weight: 400; padding: .3rem .6rem .3rem 0; vertical-align: top; white-space: nowrap; }
.rail-spec td { padding: .3rem 0; font-weight: 500; }
.rail-spec tr + tr th, .rail-spec tr + tr td { border-top: 1px solid var(--row); }
/* The NumiCrown ID at the head of "At a glance". Monospaced so the letters and digits stay
   separable, and selectable as one word for copying into a lot description. */
.rail-spec .nc-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; letter-spacing: .02em; color: var(--muted); }

.rail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rail-stat { background: var(--accent-soft); border-radius: 10px; text-align: center; padding: .55rem .25rem .5rem; }
.rail-stat b { display: block; font-size: 1.12rem; color: var(--navy); font-weight: 700; line-height: 1.2; }
.rail-stat span { display: block; font-size: .7rem; color: var(--muted); line-height: 1.25; }

.rail-toc { list-style: none; font-size: .86rem; }
.rail-toc li { border-bottom: 1px solid var(--row); }
.rail-toc li:last-child { border-bottom: none; }
.rail-toc a { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .34rem 0; text-decoration: none; color: var(--ink); }
.rail-toc a:hover { color: var(--accent); }
.rail-toc .n { color: var(--muted); font-size: .76rem; }

.rail-products { list-style: none; margin: 0; padding: 0; }
.rail-products li { margin: .35rem 0; font-size: .88rem; }
.rail-products li a { font-weight: 700; text-decoration: none; }
.rail-products li span { display: block; color: var(--muted); font-size: .76rem; }
.rail-related { display: flex; justify-content: space-between; gap: .8rem; }
.rail-related a { text-decoration: none; font-weight: 700; font-size: .88rem; }
.rail-related a span { display: block; color: var(--muted); font-weight: 400; font-size: .76rem; }
.rail-related .rel-next { text-align: right; }

/* rail cards holding prose (catalog comments, watermark, obverse/reverse):
   smaller type so they read as sidebar rather than article */
.note-rail .rail-text { font-size: .85rem; line-height: 1.55; }
.note-rail .rail-text + .rail-text { margin-top: .5rem; }
.note-rail .lettering { font-size: .8rem; margin-top: .4rem; }
.note-rail .hint { font-size: .8rem; }

/* obverse / reverse stack in the narrow rail instead of sitting side by side */
.note-rail .rail-sides { display: grid; gap: .6rem; }
.note-rail .side-box { padding: .7rem .8rem; }
.note-rail .side-title { font-size: .72rem; margin-bottom: .35rem; }

/* watermark images fill the rail width */
.note-rail .rail-media { gap: .5rem; margin-bottom: .5rem; }
.note-rail .rail-media .media-figure { max-width: 100%; flex: 1 1 100%; }
.note-rail .rail-media .media-figure img { width: 100%; max-height: 190px; }

/* below 950px the rail is full width again, so the two sides fit side by side */
@media (max-width: 950px) { .note-rail .rail-sides { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .note-rail .rail-sides { grid-template-columns: 1fr; } }

/* both members-only sections gated: compact side-by-side teasers */
.gate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 700px) { .gate-pair { grid-template-columns: 1fr; } }
.members-box-sm { padding: 1rem 1.15rem 1.1rem; text-align: left; }
.members-box-sm h3 { color: #fff; font-size: .95rem; margin-bottom: .15rem; }
.members-box-sm p { font-size: .85rem; }
.members-box-sm .gate-actions { margin-top: .65rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* two info sections side by side (catalog comments + watermark) */
.section-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; align-items: stretch; }
.section-pair > .info-section { margin-top: 0; }
.section-pair-single { grid-template-columns: 1fr; }
@media (max-width: 700px) { .section-pair { grid-template-columns: 1fr; } }

/* click the main gallery image to view it large */
.gallery-main img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(13, 20, 38, .9);
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(1500px, 96vw); max-height: 92vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

/* anchor targets shouldn't hide behind the viewport edge when jumped to */
#gallery, #about, #obverse-reverse, #watermark, #signatures, #varieties-list, #varieties,
#siblings, #auction-results, #serials, #comments,
#details, #images, #signatories, #danger { scroll-margin-top: 1rem; }

@media (max-width: 950px) {
  .note-cols { display: block; }
  .note-rail { margin-top: 1.4rem; }
}

/* ===== Admin quality-of-life: pagination, edit history, image trash, dev mode (Jul 2026) ===== */

/* filter bar (admin lists): country select + search + apply on one line */
.filter-bar { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin: .8rem 0; }
.filter-bar label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.filter-bar select, .filter-bar input { min-width: 200px; }
.filter-bar .btn { margin-bottom: 1px; }
.showing-line { margin: .5rem 0 .4rem; }

/* pagination */
.pager { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.pager-btn, .pager-current {
  display: inline-block; min-width: 2.1rem; text-align: center; padding: .32rem .6rem;
  border-radius: 8px; font-size: .85rem; font-weight: 600; text-decoration: none;
}
.pager-btn { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.pager-btn:hover { border-color: var(--accent); color: var(--accent); }
.pager-current { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.pager-gap { color: var(--muted); padding: 0 .1rem; }

/* edit history */
.history-table td { vertical-align: top; }
.history-when { white-space: nowrap; color: var(--muted); font-size: .82rem; }
.history-what { min-width: 220px; }
.history-entity { font-size: .78rem; color: var(--muted); font-weight: 600; margin-left: .25rem; }
.history-filter-note { margin-top: .4rem; }
.badge-edit { background: var(--accent-soft); border: 1px solid #c4d4f7; color: var(--accent-strong); }
.badge-del { background: #fbeaea; border: 1px solid #e7c1c1; color: var(--danger); }
ul.chg { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
ul.chg li { font-size: .84rem; line-height: 1.45; }
.chg-field { font-weight: 700; }
ul.chg del { background: #fbeaea; color: var(--danger); text-decoration: line-through; border-radius: 4px; padding: 0 .25rem; }
ul.chg ins { background: #e8f3ec; color: var(--green); text-decoration: none; border-radius: 4px; padding: 0 .25rem; }
ul.chg em { color: var(--muted); font-style: italic; }
.chg-arrow { color: var(--muted); padding: 0 .15rem; }

/* image trash */
.trash-card img { cursor: zoom-in; }
.trash-meta { font-size: .8rem; margin-top: .5rem; line-height: 1.45; overflow-wrap: anywhere; }
.trash-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }

/* development mode */
.badge-dev { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
span.country-card { cursor: default; }

/* ---------- Registry pages (/auctions, /serials) ---------- */
.page-intro { max-width: 70ch; color: var(--muted, #5b6675); margin-bottom: 1rem; }
.registry-filter {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
  background: #fff; border: 1px solid var(--line, #dde3ec); border-radius: 10px;
  padding: .75rem .9rem; margin-bottom: .9rem;
}
.registry-field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.registry-field > span { color: var(--muted, #5b6675); font-weight: 500; }
.registry-field select, .registry-field input { padding: .4rem .5rem; border: 1px solid var(--line, #dde3ec); border-radius: 6px; font: inherit; }
.registry-field-grow { flex: 1 1 16rem; }
.registry-field-grow input { width: 100%; }
.registry-count { margin-left: auto; align-self: center; }
.registry-table th { white-space: nowrap; }
.registry-table .registry-country { font-weight: 600; white-space: nowrap; }
.registry-table .registry-denom { display: block; font-size: .82rem; color: var(--muted, #5b6675); }
.registry-table .registry-sub { display: block; font-size: .8rem; color: var(--muted, #5b6675); font-weight: 400; }
.registry-table tr.registry-group-start > td { border-top: 2px solid var(--line, #dde3ec); }
@media (max-width: 700px) {
  .registry-count { margin-left: 0; }
}

/* ---------- country page sections (one page covering several successive states) ---------- */
.part-jump { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1rem; }
.part-jump a {
  display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none;
  background: var(--card, #fff); border: 1px solid var(--line, #dde3ec); border-radius: 999px;
  padding: .3rem .85rem; font-size: .84rem; font-weight: 600; color: var(--navy, #1e2f4d);
}
.part-jump a:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.part-jump .part-jump-years { font-weight: 500; font-size: .76rem; color: var(--muted, #5b6675); }
.part-jump .n {
  background: var(--accent-soft, #eaf0fd); color: var(--accent, #2563eb);
  border-radius: 999px; padding: .05rem .45rem; font-size: .71rem; font-weight: 700;
}

/* Table of contents for the issues on a country page. Sits under .part-jump on a
   sectioned country, and is deliberately a step smaller than it: the section links are
   the primary navigation, these are the level below. */
.issue-jump { display: block; margin: 0 0 2.2rem; }
.issue-jump-body { display: flex; flex-direction: column; gap: .55rem; }
.issue-jump-toggle { display: none; }
.issue-jump-group { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.issue-jump-label {
  flex: 0 0 100%; color: var(--muted, #5b6675); font-size: .71rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.issue-jump-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.issue-jump a {
  display: inline-flex; align-items: baseline; gap: .35rem; text-decoration: none;
  background: var(--card, #fff); border: 1px solid var(--line, #dde3ec); border-radius: 999px;
  padding: .22rem .7rem; font-size: .79rem; font-weight: 600; color: var(--navy, #1e2f4d);
}
.issue-jump a:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.issue-jump .ij-range { color: var(--muted, #5b6675); font-size: .71rem; font-weight: 600; white-space: nowrap; }
.issue-jump a:hover .ij-range { color: var(--accent, #2563eb); }
@media (max-width: 700px) {
  /* on a phone the full list is a screenful, so it folds behind its summary */
  .issue-jump-toggle {
    display: inline-flex; align-items: center; gap: .4rem; width: fit-content; cursor: pointer;
    list-style: none; background: var(--card, #fff); border: 1px solid var(--line, #dde3ec);
    border-radius: 999px; padding: .32rem .9rem; font-size: .82rem; font-weight: 600; color: var(--navy, #1e2f4d);
  }
  .issue-jump-toggle::-webkit-details-marker { display: none; }
  .issue-jump-toggle::after { content: '\25be'; color: var(--muted, #5b6675); }
  .issue-jump-box[open] > .issue-jump-toggle { margin-bottom: .75rem; }
  .issue-jump-box[open] > .issue-jump-toggle::after { content: '\25b4'; }
  .issue-jump-toggle .n {
    background: var(--accent-soft, #eaf0fd); color: var(--accent, #2563eb);
    border-radius: 999px; padding: .05rem .45rem; font-size: .71rem; font-weight: 700;
  }
}
.country-part { margin: 0 0 4rem; scroll-margin-top: 1rem; }
.country-part + .country-part { padding-top: 2.4rem; border-top: 1px solid var(--line, #dde3ec); }
.part-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.part-name {
  color: var(--navy, #1e2f4d); font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em;
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
}
.part-name .part-years { font-size: .95rem; font-weight: 600; color: var(--accent, #2563eb); }
.part-count { color: var(--muted, #5b6675); font-size: .85rem; font-weight: 600; margin-left: auto; white-space: nowrap; }
.part-desc { max-width: 78ch; color: var(--muted, #5b6675); margin: .55rem 0 .2rem; line-height: 1.6; }
h4.issue-heading { font-size: .95rem; }
@media (max-width: 700px) {
  .part-count { margin-left: 0; }
  .part-name { font-size: 1.25rem; }
}

/* ===== Design archive (Aug 2026) =====
   Material made around a country's banknotes but never issued as money. It has no Pick
   number, so it lives on one page per country instead of in the note grid: a banner at the
   top of the country page leads there, and each piece renders as a titled panel of plates
   plus an essay. The layout borrows the note page's main-column + 340px rail grid, so all
   the .rail-card / .note-rail styling above applies unchanged. */

/* --- the card at the top of a country page ---
   A compact card rather than a full-width banner: it takes only the width it needs and drops
   the shadow, so it reads as one object above the typographic issue headings instead of
   competing with them. The tag carries the piece count, not "P-Unlisted" — half of what the
   page holds (numismatic products) is catalogued under BNP/PCS numbers and is not unlisted. */
.archive-link {
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1.8rem; padding: .7rem 1.1rem .7rem .75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.archive-link:hover { border-color: #cbdafa; box-shadow: var(--shadow); }
.archive-link-tag {
  background: var(--accent-soft); color: var(--accent);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  border-radius: 7px; padding: .28rem .65rem; white-space: nowrap;
}
.archive-link-label { color: var(--navy); font-weight: 700; font-size: 1rem; }
.archive-link-n { color: var(--muted); font-size: .85rem; }
.archive-link-go { color: var(--accent); font-weight: 700; font-size: 1.05rem; line-height: 1; }
.archive-link-empty { opacity: .75; }
.archive-link-empty .archive-link-tag { background: var(--amber-bg); color: var(--amber-ink); }

/* --- the archive page: main column + rail, same proportions as a note page --- */
main.container:has(.archive-cols) { width: min(1260px, 100% - 2rem); }
.archive-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; margin-top: 1rem; }
.archive-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.archive-main > .info-section:first-child { margin-top: 0; }
@media (max-width: 950px) {
  .archive-cols { display: block; }
  .archive-cols .note-rail { margin-top: 1.4rem; }
}
.archive-item { scroll-margin-top: 1rem; }

/* --- one piece: head, plates, facts, essay, appearances --- */
.archive-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.archive-head-main { flex: 1 1 20rem; min-width: 0; }
.archive-head-side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.archive-kind {
  display: inline-block; background: var(--navy, #1e2f4d); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 5px; padding: .18rem .55rem; margin-bottom: .4rem;
}
.archive-item h2 { color: var(--navy, #1e2f4d); font-size: 1.15rem; font-weight: 800; margin-bottom: .2rem; }
.archive-sub { color: var(--muted, #64748b); font-size: .88rem; }
.archive-ref {
  background: var(--accent-soft, #eaf0fd); color: var(--accent, #2563eb);
  font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
}

/* Plates sit on a tinted board so a cut-and-pasted model reads against the white panel.
   A front/back pair splits the row evenly; anything else wraps. */
.archive-plates { display: flex; gap: .9rem; flex-wrap: wrap; }
.archive-plates-pair,
.archive-plates-quad { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .archive-plates-pair,
  .archive-plates-quad { grid-template-columns: 1fr; }
}
.archive-plate { margin: 0; min-width: 0; flex: 1 1 15rem; }
.plate-zoom {
  display: block; width: 100%; padding: .5rem; cursor: zoom-in;
  background: #f3f5f9; border: 1px solid var(--line, #e3e9f2); border-radius: 10px;
}
.plate-zoom img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.archive-plate figcaption { font-size: .8rem; color: var(--muted, #64748b); text-align: center; margin-top: .35rem; line-height: 1.45; }
.archive-plate figcaption strong { color: var(--ink, #16223a); }
.archive-plate figcaption .img-source { display: block; }

/* facts read as a wrapping row of label-over-value pairs, not a table — most pieces
   only fill three or four of them */
.archive-facts {
  display: flex; flex-wrap: wrap; gap: .1rem 2rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--row, #f0f2f7);
}
.archive-facts > div { min-width: 0; padding: .25rem 0; }
.archive-facts dt { color: var(--muted, #64748b); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.archive-facts dd { font-size: .9rem; font-weight: 600; }

.archive-text { margin-top: 1rem; line-height: 1.65; max-width: 78ch; }
.archive-facts + .archive-text { padding-top: .9rem; border-top: 1px solid var(--row, #f0f2f7); }


/* archive titles are sentences, not pick numbers, so the rail index stacks the kind
   above the title instead of running them across the row like a count */
.archive-toc a { display: block; padding: .45rem 0; }
.archive-toc-kind { display: block; color: var(--muted, #64748b); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.archive-toc-title { display: block; font-size: .85rem; line-height: 1.4; }
.archive-toc-group a { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-weight: 700; color: var(--navy, #1e2f4d); }
.archive-toc-group + li a { padding-top: .3rem; }
.archive-toc-group:not(:first-child) a { margin-top: .35rem; }

/* --- the page's two halves --- */
.archive-group + .archive-group { margin-top: 2.6rem; }
.archive-group-head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding-bottom: .45rem; border-bottom: 2px solid var(--line, #e3e9f2);
  scroll-margin-top: 1rem;
}
.archive-group-name { color: var(--navy, #1e2f4d); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.archive-group-n { color: var(--muted, #64748b); font-size: .85rem; font-weight: 600; margin-left: auto; }
.archive-group-intro { color: var(--muted, #64748b); font-size: .9rem; line-height: 1.6; margin: .7rem 0 0; max-width: 78ch; }

/* --- the archive index: pieces as clickable cards, grouped by kind (Aug 2026 redesign; the
   old one-long-page layout is kept in design-backup-archive-v1/) --- */
.arch-kind-head {
  display: flex; align-items: baseline; gap: .6rem; margin-top: 1.6rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line, #e3e9f2);
}
.arch-kind-name { color: var(--navy, #1e2f4d); font-size: 1rem; font-weight: 700; }
.arch-kind-n { color: var(--muted, #64748b); font-size: .8rem; font-weight: 600; }
.arch-grid {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.arch-card {
  background: var(--card, #fff); border: 1px solid #eef1f6; border-radius: 14px;
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.arch-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.arch-thumb { display: block; background: #f3f5f9; height: 170px; padding: 8px; }
.arch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.arch-card-body { padding: .7rem .9rem .85rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.arch-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.arch-card-top strong { color: var(--ink, #16223a); font-size: 1.02rem; }
.arch-card-year { color: var(--muted, #64748b); white-space: nowrap; font-size: .88rem; }
.arch-card-desc {
  color: var(--muted, #64748b); font-size: .82rem; line-height: 1.45; margin-top: .1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arch-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .55rem; }
.arch-kind-badge {
  background: var(--accent-soft, #e8effc); border-radius: 20px; font-size: .7rem;
  padding: .14rem .6rem; color: var(--accent, #2563eb); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.arch-kind-badge.arch-kind-product { background: #fdf3e0; color: #9a6a1c; }
.arch-card-ref { color: var(--muted, #64748b); font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

/* --- one piece's own page: the entry block promoted to a full page, plus a pager --- */
.archive-item-page .plate-zoom img { max-height: 520px; }
.archive-item-page .archive-head h1 { color: var(--navy, #1e2f4d); font-size: 1.45rem; font-weight: 800; margin-bottom: .2rem; letter-spacing: -.01em; }
.arch-pager { display: flex; gap: .7rem; margin-top: 1.2rem; }
.arch-pager a {
  flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  background: var(--card, #fff); border: 1px solid #eef1f6; border-radius: 12px;
  padding: .6rem .85rem; text-decoration: none; transition: box-shadow .15s;
}
.arch-pager a:hover { box-shadow: var(--shadow); }
.arch-pager .dir { color: var(--muted, #64748b); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.arch-pager .what { color: var(--navy, #1e2f4d); font-weight: 600; font-size: .85rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arch-pager .arch-pager-next { text-align: right; }
.archive-group-intro + .info-section { margin-top: 1.1rem; }
.archive-kind-product { background: var(--green, #1f7a4d); }

/* the picks a numismatic product contains */
.archive-contains { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--row, #f0f2f7); }
.archive-contains h4 {
  font-size: .8rem; font-weight: 700; color: var(--muted, #64748b);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
  display: flex; align-items: baseline; gap: .45rem;
}
.archive-contains h4 .n { background: var(--accent-soft, #eaf0fd); color: var(--accent, #2563eb); border-radius: 999px; padding: .02rem .45rem; font-size: .72rem; }
.archive-contains-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.archive-contains-list a {
  display: flex; align-items: baseline; gap: .35rem; text-decoration: none;
  background: var(--accent-soft, #eaf0fd); border-radius: 8px; padding: .28rem .6rem; font-size: .84rem;
}
.archive-contains-list a:hover { background: #dde7fb; }
.archive-contains-list a strong { color: var(--accent, #2563eb); }
.archive-contains-list a span { color: var(--muted, #64748b); }

/* admin: which half of the page a piece belongs to */
.cat-choice { border: 0; margin-bottom: .3rem; }
.cat-choice legend { font-size: .8rem; font-weight: 700; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; }
.cat-option { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: .7rem .85rem; margin-bottom: .5rem; cursor: pointer; font-size: .86rem; line-height: 1.5; }
.cat-option:has(input:checked) { border-color: var(--accent, #2563eb); background: var(--accent-soft, #eaf0fd); }
.cat-option input { margin-top: .25rem; }
.cat-option strong { color: var(--navy, #1e2f4d); }

/* admin: tick the picks a set contains */
.note-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .2rem .8rem; max-height: 20rem; overflow-y: auto; border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: .6rem .8rem; }
.note-pick { display: flex; align-items: baseline; gap: .45rem; font-size: .85rem; font-weight: 400; padding: .12rem 0; cursor: pointer; }
.note-pick strong { color: var(--accent, #2563eb); }

/* match count beside a search-results heading */
.region-title .result-n {
  background: var(--accent-soft, #eaf0fd); color: var(--accent, #2563eb);
  border-radius: 999px; padding: .05rem .5rem; margin-left: .3rem;
  font-size: .78rem; letter-spacing: 0;
}

/* ======================================================================
   NumiCrown Pro (2026-09-02): gate boxes, locked gallery tiles, the plans
   page, the Pro chip, and the admin's Pro-image controls.
   ====================================================================== */
.pro-chip, .pro-tag {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: .1rem .42rem; border-radius: 6px; vertical-align: middle; line-height: 1.5;
  background: linear-gradient(120deg, #c99a2e, #e7c465); color: #2b2205;
}
.top-strip .top-pro { font-weight: 700; color: #f1d98a; }
.badge-pro { background: #fbf1d3; border: 1px solid #e7c465; color: #6b4f0a; }

/* ---- the gate box: same navy panel as before, with the Pro tag and a lock ---- */
.gate-box { position: relative; }
.gate-box .gate-tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 6px; margin-right: .45rem; vertical-align: middle;
  background: rgba(255,255,255,.14); color: #f1d98a; border: 1px solid rgba(241,217,138,.45);
}
.gate-box.gate-pro .gate-tag { background: linear-gradient(120deg, #c99a2e, #e7c465); color: #2b2205; border-color: transparent; }
.gate-box .gate-lead { font-size: 1rem; }
.gate-box .gate-lead strong { color: #fff; }
.gate-box .gate-actions { margin-top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.gate-box.members-box-sm .gate-actions { justify-content: flex-start; }
.gate-box.members-box-sm h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gate-box.members-box-sm h3 .gate-tag { margin: 0; font-size: .6rem; }
.gate-box .gate-count { color: #e5ebf5; }

/* ---- locked photographs in the gallery ---- */
.gallery-thumb-locked {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  background: linear-gradient(135deg, #1e2f4d, #2c4370); border: 2px dashed #7f92b4; color: #f1d98a;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.gallery-thumb-locked svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.gallery-thumb-locked:hover, .gallery-thumb-locked.active { border-style: solid; border-color: #e7c465; }
.gallery-main { position: relative; }
.gallery-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; text-align: center;
  min-height: 260px; padding: 1.6rem 1.4rem; border-radius: 10px;
  background: linear-gradient(120deg, var(--navy), #2c4370); color: #b9c6dc;
}
.gallery-locked strong { color: #fff; font-size: 1.05rem; }
.gallery-locked span { font-size: .88rem; max-width: 34rem; }
.gallery-locked .btn-navy { background: #fff; color: var(--navy); margin-top: .3rem; }
.gallery-locked .btn-navy:hover { background: #e8edf6; }
.gallery-lock-icon { width: 34px; height: 34px; fill: none; stroke: #e7c465; stroke-width: 1.8; }
.gallery-pro-note { margin-top: .55rem; font-size: .82rem; color: var(--muted); text-align: center; }
.rail-media .gallery-pro-note { text-align: left; flex-basis: 100%; }

/* ---- the /pro page ---- */
.pro-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a67c1a; }
.pro-hero { margin-top: 1.6rem; background: var(--card); border-radius: 18px; padding: 1.8rem 1.9rem 1.6rem; box-shadow: var(--shadow); }
.pro-hero h1 { color: var(--navy); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: .25rem 0 .6rem; }
.pro-lead { color: var(--muted); font-size: 1.02rem; max-width: 46rem; line-height: 1.6; }
.pro-need { margin-top: .9rem; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); padding: .55rem .85rem; border-radius: 10px; font-size: .92rem; display: inline-block; }
.pro-status { margin-top: 1rem; background: var(--accent-soft); border: 1px solid #d6e3fb; color: var(--ink); padding: .65rem .95rem; border-radius: 10px; font-size: .93rem; }
.pro-status-on { background: #e8f3ec; border-color: #b9d8c5; }
.pro-h2 { color: var(--navy); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .8rem; }
.pro-plans { margin-top: 1.6rem; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.3rem 1.2rem;
  display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow);
}
.plan-featured { border: 2px solid var(--accent); }
.plan-flag { position: absolute; top: -.7rem; left: 1.1rem; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 99px; }
.plan-card h3 { color: var(--navy); font-size: 1.05rem; }
.plan-price { font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; margin-top: .25rem; }
.plan-cur { font-size: .8rem; font-weight: 700; color: var(--muted); margin-left: .35rem; letter-spacing: .04em; }
.plan-per { color: var(--muted); font-size: .88rem; }
.plan-per b { color: var(--green); }
.plan-blurb { color: var(--ink); font-size: .92rem; flex: 1; margin: .35rem 0 .8rem; line-height: 1.5; }
.pro-fineprint { margin-top: .9rem; max-width: 52rem; }
.pro-features { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; margin-top: 1.8rem; }
@media (max-width: 760px) { .pro-features { grid-template-columns: 1fr; } }
.pro-col { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; }
.pro-col-key { background: var(--accent-soft); border-color: #d6e3fb; }
.pro-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.pro-list li { display: flex; flex-direction: column; gap: .12rem; padding-left: 1.5rem; position: relative; }
.pro-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent-strong); font-weight: 800; }
.pro-list-plain li::before { color: var(--green); }
.pro-list strong { color: var(--navy); }
.pro-list span { color: var(--ink); font-size: .92rem; line-height: 1.5; }
.pro-list em { font-style: normal; font-size: .8rem; color: var(--accent-strong); font-weight: 700; }
.pro-faq { margin-top: 1.8rem; max-width: 52rem; }
.pro-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .5rem; }
.pro-faq summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.pro-faq p { margin-top: .5rem; color: var(--ink); font-size: .93rem; line-height: 1.55; }

/* ---- checkout & thanks ---- */
.checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 760px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-card h1 { color: var(--navy); font-size: 1.5rem; font-weight: 800; margin: .2rem 0 .9rem; }
.checkout-summary { width: 100%; margin-bottom: 1rem; }
.checkout-summary th { text-align: left; color: var(--muted); font-weight: 600; padding: .4rem .6rem .4rem 0; width: 8rem; vertical-align: top; }
.checkout-summary td { padding: .4rem 0; }
.checkout-notice { margin: .6rem 0 1rem; }
.checkout-aside { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; align-self: start; }
.checkout-aside .hint { margin-top: .9rem; }
.checkout-thanks { max-width: 560px; }
.checkout-thanks h1 { font-size: 1.35rem; }

/* ---- profile ---- */
.pro-card { margin-bottom: 1.2rem; }
.pro-card-on { border: 1px solid #e7c465; background: #fffbf0; }
.pro-card h3 { margin-top: 1rem; }

/* ---- admin: Pro-only images ---- */
.admin-image-card.is-pro { border-color: #e7c465; background: #fffbf0; }
.pro-badge { position: absolute; margin: .3rem; right: 0; }
.pro-check { margin: .3rem 0 .4rem; font-size: .82rem; }
.pro-toggle { margin: .3rem 0; }
.pro-split { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; background: #fffbf0; border: 1px solid #e7c465; border-radius: 10px; padding: .55rem .8rem; margin: .5rem 0 .8rem; font-size: .88rem; }
.pro-split label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 500; }
.pro-split .in-xs { width: 4rem; margin: 0; padding: .25rem .4rem; }
.pro-split .hint { flex-basis: 100%; margin: 0; }
/* display:flex on the locked panel outranks the browser's own [hidden] rule — same trap as
   .note-grid[hidden]; without these two lines the panel shows under every gallery */
.gallery-locked[hidden] { display: none; }
#gallery-main-img[hidden] { display: none; }

/* ---------- member collections (rebuilt 2026-09-10) ----------
   Organised by country: the overview is one card per country, a country page lays the whole
   catalogue of that country out pick by pick with every variety marked owned / wanted /
   missing, and one item page per note the member owns. The country page flips between a
   list (the default — reads like a register) and a grid of the member's own photographs. */
.coll-eyebrow { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .15rem; }
.coll-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.coll-flag { width: 26px; height: 18px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.18); vertical-align: -3px; }
.coll-flag-lg { width: 46px; height: 32px; border-radius: 6px; }

/* the hero: who, the headline figures */
.coll-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
  background: var(--card); border-radius: 18px; padding: 1.4rem 1.6rem; margin-top: .9rem; box-shadow: var(--shadow);
}
.coll-hero-main { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.coll-hero h1 { color: var(--navy); font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.coll-avatar {
  width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center;
  background: linear-gradient(158deg, #2a4f8d, #1f3a6c); color: #fff; font-size: 1.5rem; font-weight: 800;
}
.coll-sub { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.coll-stats { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: .55rem; }
.coll-stats-wide { flex: 1 1 520px; }
.coll-stat { background: var(--accent-soft); border-radius: 12px; text-align: center; padding: .7rem .5rem .6rem; }
.coll-stat b { display: block; font-size: 1.35rem; color: var(--navy); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.coll-stat b small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.coll-stat span { display: block; font-size: .72rem; color: var(--muted); line-height: 1.25; margin-top: .15rem; }
.coll-stat-bar .coll-progress { margin: .4rem auto .1rem; width: 80%; }
.coll-hero-country { flex-direction: column; align-items: stretch; gap: .9rem; }
.coll-hero-country .coll-stats { flex: none; }
.coll-scope-line { font-size: .9rem; color: var(--ink); display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.coll-scope-word { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.coll-scope-notes { color: var(--muted); }
.coll-scope-change { font-size: .82rem; font-weight: 600; }
.coll-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 .2rem; background: var(--card); border-radius: 14px; padding: .75rem 1rem; box-shadow: var(--shadow); }
.coll-actions-hint { margin: 0 0 0 auto; text-align: right; }
@media (max-width: 760px) { .coll-actions-hint { margin-left: 0; text-align: left; flex-basis: 100%; } }
.coll-section-head { margin-top: 1.8rem; }
.coll-section-head h2 { color: var(--navy); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.coll-section-head h2 a { color: inherit; text-decoration: none; }
.coll-section-head h2 a:hover { color: var(--accent); }

/* progress bar, shared by the cards and the country hero */
.coll-progress { display: block; height: 7px; border-radius: 99px; background: #e4eaf4; overflow: hidden; }
.coll-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #5b8def); border-radius: 99px; transition: width .3s; }

/* one card per country */
.coll-country-grid { display: grid; gap: 1rem; margin-top: .9rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.coll-country {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid #eef1f6; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s;
}
.coll-country:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.coll-country-photo { display: block; height: 150px; background: #f3f5f9; padding: 10px; }
.coll-country-photo img { width: 100%; height: 100%; object-fit: contain; }
.coll-country-nophoto { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .85rem; }
.coll-country-empty .coll-country-photo { background: repeating-linear-gradient(45deg, #f3f5f9, #f3f5f9 8px, #eef1f7 8px, #eef1f7 16px); }
.coll-country-body { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .95rem .9rem; }
.coll-country-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.coll-country-name { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--navy); font-size: 1.05rem; letter-spacing: -.01em; }
.coll-country-n { color: var(--accent); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.coll-country-meta { color: var(--muted); font-size: .82rem; }
.coll-country-meta b { color: var(--ink); font-weight: 700; }
.coll-country-chips { display: flex; gap: .35rem; flex-wrap: wrap; min-height: 1.2rem; }
.coll-chip { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .12rem .6rem; white-space: nowrap; }
.coll-chip-missing { background: #fdf0ee; color: var(--danger); }
.coll-chip-wanted { background: var(--amber-bg); color: var(--amber-ink); }
.coll-chip-plain { background: #eef1f6; color: var(--muted); }
.coll-country-scope { color: var(--muted); font-size: .78rem; border-top: 1px solid var(--row); padding-top: .45rem; margin-top: .1rem; }
.coll-start-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.coll-start-form select { width: auto; min-width: 260px; margin: 0; }

/* country page head */
.coll-country-head { align-items: flex-end; }
.coll-country-title { display: flex; align-items: center; gap: .9rem; }
.coll-country-title .coll-eyebrow { margin-bottom: .05rem; }

/* the two fold-out panels: what I collect, add a note */
.coll-panel { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); margin-top: .9rem; }
.coll-panel > summary { cursor: pointer; padding: .8rem 1.15rem; font-weight: 700; color: var(--navy); list-style: none; display: flex; align-items: center; gap: .5rem; }
.coll-panel > summary::-webkit-details-marker { display: none; }
.coll-panel > summary::before { content: "\25B8"; color: var(--accent); font-size: .9rem; transition: transform .15s; }
.coll-panel[open] > summary::before { transform: rotate(90deg); }
.coll-panel[open] > summary { border-bottom: 1px solid var(--row); }
.coll-panel form { padding: .9rem 1.15rem 1.15rem; }
.coll-kind-grid { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.coll-kind { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .88rem; background: #fbfcfe; }
.coll-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.coll-kind input { margin-top: .2rem; }
.coll-kind small { display: block; color: var(--muted); font-weight: 400; font-size: .76rem; }
.coll-kind-none { opacity: .65; }
.coll-range { margin-top: .4rem; }
.coll-add-form { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; }
.coll-add-form label { margin: 0; flex: 1 1 280px; }
.coll-add-form select { margin-top: .25rem; }
.coll-add-form .btn { margin-bottom: 2px; }

/* the toolbar: search, view, kinds, layout */
.coll-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--card); border-radius: 14px; padding: .6rem .75rem; margin-top: 1.1rem; box-shadow: var(--shadow);
}
.coll-search { flex: 1 1 240px; margin: 0; padding: .48rem .75rem; font-size: .92rem; }
.coll-view-label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.coll-view-label select { width: auto; margin: 0; padding: .42rem .6rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.coll-kinds { display: flex; gap: .3rem; flex-wrap: wrap; }
.coll-kind-btn {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: #f0f3f8; color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: .28rem .75rem;
}
.coll-kind-btn:hover { color: var(--accent); background: var(--accent-soft); }
.coll-kind-btn.is-on { background: var(--navy); color: #fff; }
.coll-layout { display: flex; gap: .2rem; margin-left: auto; background: #f0f3f8; border-radius: 9px; padding: .2rem; }
.coll-layout-btn { width: 34px; height: 30px; border: none; border-radius: 7px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.coll-layout-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.coll-layout-btn.is-on { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(30,47,77,.15); }
.coll-showing { color: var(--muted); font-size: .84rem; margin: .7rem .2rem .2rem; }

/* the listing: issue headings, pick blocks, variety rows */
.coll-issue { color: var(--navy); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid #d5deee; }
.coll-issue:first-child { margin-top: 1.2rem; }
.cv-pick { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); margin-top: .8rem; overflow: hidden; }
.cv-pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .65rem 1rem; background: var(--thead); border-bottom: 1px solid var(--line); }
.cv-pick-title { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.cv-pick-title:hover .cv-pick-denom { color: var(--accent); }
.cv-pick-no { font-weight: 800; color: var(--navy); font-size: .95rem; }
.cv-pick-denom { font-weight: 700; font-size: .95rem; }
.cv-pick-year { color: var(--muted); font-size: .82rem; }
.cv-pick-n { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.cv-pick-out .cv-pick-head { background: #f6f7fa; }
.cv-rows { display: flex; flex-direction: column; }
.cv-row {
  display: grid; grid-template-columns: 96px minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--row);
}
.cv-row:last-child { border-bottom: none; }
.cv-row:hover { background: #fafbfe; }
.cv-row:not(.is-owned) .cv-thumb img { opacity: .7; filter: grayscale(.45); }
.cv-row:not(.is-owned):hover .cv-thumb img { opacity: 1; filter: none; }
.cv-row.is-none .cv-main { color: var(--muted); }
.cv-thumb { position: relative; display: block; height: 54px; border-radius: 8px; background: #f3f5f9; overflow: hidden; }
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-thumb-mine { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-noimg { display: grid; place-items: center; height: 100%; color: #b3bfd2; font-size: .7rem; }
.cv-thumb-tag { display: none; }
.cv-main { min-width: 0; }
.cv-title { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: .93rem; }
.cv-title > a { font-weight: 700; text-decoration: none; }
.cv-title > a:hover { text-decoration: underline; }
.cv-kind { background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; white-space: nowrap; }
.cv-date { color: var(--muted); font-size: .82rem; }
.cv-sub { color: var(--muted); font-size: .8rem; display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .1rem; }
.cv-sig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cv-pfx-word { text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; }
.cv-pfx b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-mine { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cv-note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; text-decoration: none; color: var(--ink); font-size: .86rem; }
.cv-note:hover .cv-serial { color: var(--accent); }
.cv-serial { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-serial i { color: var(--muted); font-weight: 400; font-style: italic; font-family: inherit; }
.cv-grade { background: #eef7f1; color: var(--green); font-size: .72rem; font-weight: 700; border-radius: 6px; padding: .08rem .45rem; white-space: nowrap; }
.cv-photos { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.cv-none { color: #a7b2c5; font-size: .82rem; font-style: italic; }
.cv-act { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; white-space: nowrap; }
.cv-status { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .14rem .6rem; }
.cv-status-owned { background: #e6f4ea; color: var(--green); }
.cv-status-wanted { background: var(--amber-bg); color: var(--amber-ink); }
.cv-status-missing { background: #fdf0ee; color: var(--danger); }
.cv-status-none { background: #eef1f6; color: var(--muted); }
.cv-act .btn { padding: .26rem .6rem; font-size: .78rem; }
.cv-want { margin: 0; }
.cv-want .btn { min-width: 34px; }

/* grid layout: every row becomes a card led by the photograph */
.coll-body[data-layout="grid"] .cv-pick { background: transparent; box-shadow: none; overflow: visible; }
.coll-body[data-layout="grid"] .cv-pick-head { background: transparent; border-bottom: none; padding: .4rem .2rem; margin-top: .4rem; }
.coll-body[data-layout="grid"] .cv-rows { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.coll-body[data-layout="grid"] .cv-row {
  display: flex; flex-direction: column; align-items: stretch; gap: .45rem; padding: 0 0 .7rem;
  background: var(--card); border: 1px solid #eef1f6; border-radius: 14px; overflow: hidden; transition: box-shadow .15s, transform .15s;
}
.coll-body[data-layout="grid"] .cv-row:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); background: var(--card); }
.coll-body[data-layout="grid"] .cv-row.is-missing, .coll-body[data-layout="grid"] .cv-row.is-none { border-style: dashed; }
.coll-body[data-layout="grid"] .cv-thumb { height: 140px; border-radius: 0; padding: 8px; background: #f3f5f9; outline: none; }
.coll-body[data-layout="grid"] .cv-thumb img { object-fit: contain; }
.coll-body[data-layout="grid"] .cv-thumb-tag {
  display: block; position: absolute; left: 8px; top: 8px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent); color: #fff; border-radius: 6px; padding: .12rem .45rem;
}
.coll-body[data-layout="grid"] .cv-thumb-tag-cat { background: rgba(22,34,58,.55); }
.coll-body[data-layout="grid"] .cv-main, .coll-body[data-layout="grid"] .cv-mine, .coll-body[data-layout="grid"] .cv-act { padding: 0 .85rem; }
.coll-body[data-layout="grid"] .cv-act { justify-content: space-between; margin-top: auto; }
.coll-body[data-layout="grid"] .cv-sig { white-space: normal; }

/* item page */
.coll-nophotos { background: var(--card); border-radius: 16px; padding: 1.2rem; box-shadow: var(--shadow); text-align: center; color: var(--muted); }
.coll-nophotos-img { max-height: 300px; object-fit: contain; margin-bottom: .6rem; opacity: .85; }
.coll-nophotos p { font-size: .9rem; margin-bottom: .6rem; }
.coll-notes-text { margin-top: .6rem; white-space: pre-line; }
.rail-spec .coll-mono { font-size: .84rem; }
.coll-photo-grid { margin-bottom: 1rem; }
.coll-upload label { margin-top: .2rem; }

/* add page */
.coll-add-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; margin-top: .6rem; }
@media (max-width: 900px) { .coll-add-layout { grid-template-columns: 1fr; } }
.coll-add-card { margin-top: .6rem; }
.coll-add-aside { display: flex; flex-direction: column; gap: .9rem; margin-top: .6rem; }
.coll-add-what { display: flex; gap: 1rem; align-items: center; background: #f8f9fc; border: 1px solid var(--row); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem; }
.coll-add-thumb { flex: none; width: 120px; height: 68px; border-radius: 8px; background: #eef1f6; overflow: hidden; display: block; }
.coll-add-thumb img { width: 100%; height: 100%; object-fit: cover; }
.coll-add-what strong { display: block; color: var(--navy); }
.coll-add-var { display: block; color: var(--muted); font-size: .88rem; margin-top: .1rem; }
.coll-var-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.coll-var { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; background: #fbfcfe; }
.coll-var:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.coll-var-thumb { flex: none; width: 74px; height: 42px; border-radius: 6px; background: #eef1f6; overflow: hidden; }
.coll-var-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-var-body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.coll-var-title { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: .92rem; }
.coll-var-sub { color: var(--muted); font-size: .8rem; }
.coll-var-unknown { border-style: dashed; }
.coll-tips { padding-left: 1.1rem; font-size: .84rem; color: var(--muted); display: flex; flex-direction: column; gap: .4rem; }
.coll-fields input.coll-mono { font-size: .95rem; }

/* wish list */
.coll-wish-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; }

@media (max-width: 760px) {
  .coll-stats { grid-template-columns: repeat(2, 1fr); }
  .cv-row { grid-template-columns: 72px minmax(0, 1fr); row-gap: .35rem; }
  .cv-thumb { height: 42px; }
  .cv-mine, .cv-act { grid-column: 2; }
  .cv-act { justify-content: flex-start; }
  .coll-layout { display: none; }
}

/* the view switch: one segmented control with live counts, in place of a select */
.coll-views { display: flex; gap: .2rem; background: #f0f3f8; border-radius: 10px; padding: .2rem; flex-wrap: wrap; }
.coll-view-btn { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--muted); border-radius: 8px; padding: .34rem .7rem; white-space: nowrap; }
.coll-view-btn .n { font-size: .74rem; opacity: .75; font-variant-numeric: tabular-nums; }
.coll-view-btn:hover { color: var(--navy); }
.coll-view-btn.is-on { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(30,47,77,.15); }
.coll-view-btn.is-on .n { color: var(--accent); opacity: 1; }
.coll-toolbar .coll-kinds { flex-basis: 100%; }
.coll-kind-btn[hidden] { display: none; }
/* what the list is, said once above it */
.coll-list-head { margin: 1.3rem .2rem .2rem; }
.coll-list-head h2 { color: var(--navy); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.coll-list-intro { color: var(--muted); font-size: .88rem; margin-top: .15rem; max-width: 70ch; }
.coll-list-intro b { color: var(--ink); font-weight: 700; }
.coll-list-head .coll-showing { margin: .35rem 0 0; }
/* the three steps shown while a country collection is still empty */
.coll-guide { background: linear-gradient(158deg, #2a4f8d 0%, #23427c 60%, #1f3a6c 100%); color: #fff; border-radius: 16px; padding: 1.2rem 1.4rem 1.3rem; margin-top: 1rem; box-shadow: var(--shadow); }
.coll-guide h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .6rem; }
.coll-guide-steps { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; counter-reset: step; font-size: .9rem; line-height: 1.5; color: #dbe7fb; }
.coll-guide-steps li { position: relative; padding-left: 2.2rem; }
.coll-guide-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.coll-guide-steps b { color: #fff; }
.coll-guide-link { color: #fff; font-weight: 700; }
.coll-guide-btn { display: inline-block; background: #fff; color: #1f3a6c; font-weight: 700; font-size: .78rem; border-radius: 7px; padding: .08rem .5rem; }
/* the filter sets the hidden attribute, and the display rules above outrank the browser's own
   [hidden] rule — without this line a filtered row stayed on screen */
.cv-row[hidden], .cv-pick[hidden], .coll-issue[hidden], .coll-view-btn[hidden] { display: none !important; }

/* ---------- member collections, second pass (2026-09-10) ---------- */
.coll-stats-5 { grid-template-columns: repeat(5, minmax(96px, 1fr)); }
.coll-stat-value b { font-size: 1.05rem; padding-top: .2rem; }
.coll-stat-value span a { color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 50%; padding: 0 .3rem; font-size: .65rem; }
.coll-value-note { max-width: 70ch; margin: 1.2rem .2rem 0; }
.coll-typeset { margin-top: .6rem; }
.coll-upgrade-box { margin-top: .8rem; }
/* jump strip: one chip per pick, coloured by completion */
.coll-jump { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .7rem .1rem 0; }
.coll-jump-chip { text-decoration: none; font-size: .76rem; font-weight: 700; padding: .2rem .55rem; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-variant-numeric: tabular-nums; }
.coll-jump-chip:hover { border-color: var(--accent); color: var(--accent); }
.coll-jump-chip.is-done { background: #e6f4ea; border-color: #bfe0cb; color: var(--green); }
.coll-jump-chip.is-partial { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.coll-jump-chip.is-none { background: #fdf0ee; border-color: #f0cfca; color: var(--danger); }
.coll-jump-chip.is-out { color: var(--muted); border-style: dashed; }
.coll-jump-key { margin-left: auto; color: var(--muted); font-size: .72rem; display: flex; gap: .35rem; align-items: center; }
.coll-jump-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }
.coll-jump-key .is-done { background: #e6f4ea; border-color: #bfe0cb; } .coll-jump-key .is-partial { background: var(--amber-bg); border-color: var(--amber-line); } .coll-jump-key .is-none { background: #fdf0ee; border-color: #f0cfca; }
.coll-list-head-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.coll-fold-all { display: flex; gap: .35rem; }
.coll-fold-all .btn { padding: .26rem .65rem; font-size: .78rem; }
/* the pick as a summary bar that folds its rows */
.cv-pick-head { gap: .6rem; align-items: center; }
.cv-pick-fold { flex: none; width: 26px; height: 26px; border: none; border-radius: 7px; background: transparent; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.cv-pick-fold:hover { background: #e8edf6; color: var(--navy); }
.cv-pick-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cv-folded .cv-pick-fold svg { transform: rotate(-90deg); }
.cv-folded .cv-rows { display: none !important; }
.cv-pick-sum { display: flex; align-items: center; gap: .55rem; margin-left: auto; min-width: 0; }
.cv-pick-bar { width: 80px; height: 6px; flex: none; }
.cv-pick-figures { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.cv-pick-figures b { color: var(--ink); }
.cv-pick-figures em { color: var(--danger); font-style: normal; font-weight: 600; }
.cv-pick-figures-out { font-style: italic; }
.cv-pick.is-done .cv-pick-head { background: #f1f8f3; }
.cv-pick.is-done .cv-pick-no::after { content: " \2713"; color: var(--green); }
.cv-pick-n { display: none; }
.coll-body[data-layout="grid"] .cv-pick-head { background: var(--card); border-radius: 12px; padding: .5rem .8rem; box-shadow: var(--shadow); }
/* statuses added in the second pass */
.cv-status-covered { background: #eef3ee; color: #4a7a5a; }
.cv-upgrade { background: var(--amber-bg); color: var(--amber-ink); font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .06rem .45rem; white-space: nowrap; }
.cv-value { color: var(--green); font-size: .78rem; font-weight: 700; white-space: nowrap; }
/* the inline "I own this" form */
.cv-quick-slot { display: none; grid-column: 1 / -1; }
.cv-row.cv-quick-open .cv-quick-slot { display: block; }
.cv-row.cv-quick-open { background: var(--accent-soft); }
.cv-quick { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: flex-end; padding: .55rem .2rem .3rem; }
.cv-quick-title { flex-basis: 100%; font-size: .82rem; color: var(--muted); }
.cv-quick-title b { color: var(--navy); }
.cv-quick label { margin: 0; flex: 1 1 150px; font-size: .78rem; color: var(--muted); }
.cv-quick input { margin-top: .15rem; padding: .4rem .6rem; font-size: .9rem; }
.cv-quick-btns { display: flex; gap: .4rem; align-items: center; }
.cv-quick-cancel { background: transparent; color: var(--muted); }
.cv-quick .coll-serial-check { flex-basis: 100%; }
.coll-serial-check { margin: .45rem 0 .2rem; padding: .6rem .8rem; border-radius: 10px; background: #f8f9fc; border: 1px solid var(--line); font-size: .84rem; }
.csc-line { margin: 0; } .csc-line + .csc-line, .csc-sales + .csc-line { margin-top: .4rem; }
.csc-hit { color: var(--green); } .csc-hit b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.csc-src { color: var(--muted); } .csc-none { color: var(--muted); font-style: italic; }
.csc-sales { margin: .3rem 0 0 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
/* compact layout: one line per variety, no photographs */
.coll-body[data-layout="compact"] .cv-thumb { display: none; }
.coll-body[data-layout="compact"] .cv-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; padding: .32rem 1rem; gap: .7rem; }
.coll-body[data-layout="compact"] .cv-sub { display: inline-flex; margin: 0 0 0 .5rem; }
.coll-body[data-layout="compact"] .cv-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .4rem; }
.coll-body[data-layout="compact"] .cv-rest { display: none; }
.coll-body[data-layout="compact"] .cv-act .btn { padding: .18rem .5rem; font-size: .74rem; }
.coll-sort { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.coll-sort select { width: auto; margin: 0; padding: .42rem .6rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.coll-body .cv-flat[hidden] { display: none !important; }
.coll-body[data-layout="grid"] .cv-flat { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1rem; }
/* the missing-everywhere list */
.cm-country { margin-top: .4rem; }
.cm-list { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; margin-top: .6rem; }
.cm-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .45rem 1rem; border-bottom: 1px solid var(--row); font-size: .9rem; }
.cm-row:last-child { border-bottom: none; }
.cm-row:hover { background: #fafbfe; }
.cm-pick { font-weight: 700; text-decoration: none; white-space: nowrap; }
.cm-what { min-width: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.cm-row .btn { padding: .22rem .6rem; font-size: .76rem; }
.cm-row[hidden] { display: none !important; }
@media (max-width: 760px) {
  .coll-stats-5 { grid-template-columns: repeat(2, 1fr); }
  .cm-row { grid-template-columns: 70px minmax(0, 1fr); }
  .cm-status, .cm-row .btn { grid-column: 2; justify-self: start; }
  .coll-body[data-layout="compact"] .cv-row { grid-template-columns: 1fr; }
}

/* ---------- the collection tour (/collection/guide) ---------- */
.coll-guide-cta { margin-left: .8rem; background: #fff; color: #1f3a6c; font-size: .78rem; vertical-align: middle; }
.coll-guide-cta:hover { background: #dbe7fb; }
.guide-toc { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 1.4rem; }
.guide-toc a { text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem .28rem .5rem; display: inline-flex; align-items: center; gap: .4rem; }
.guide-toc a:hover { border-color: var(--accent); color: var(--accent); }
.guide-toc .n { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: .72rem; }
.guide-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.6rem 2.2rem; align-items: start; background: var(--card); border-radius: 18px; padding: 1.5rem 1.7rem; margin-top: 1.1rem; box-shadow: var(--shadow); scroll-margin-top: 1rem; }
@media (max-width: 900px) { .guide-sec { grid-template-columns: 1fr; } }
.guide-text h2 { color: var(--navy); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.guide-num { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: linear-gradient(158deg, #2a4f8d, #1f3a6c); color: #fff; font-size: .9rem; display: grid; place-items: center; flex: none; }
.guide-text p { font-size: .95rem; line-height: 1.6; max-width: 52ch; }
.guide-text p + p { margin-top: .6rem; }
.guide-list { margin: .4rem 0 .6rem 1.1rem; font-size: .93rem; line-height: 1.55; display: flex; flex-direction: column; gap: .4rem; max-width: 52ch; }
.guide-try { display: inline-block; margin-top: .8rem; font-weight: 700; text-decoration: none; background: var(--accent-soft); color: var(--accent); border-radius: 9px; padding: .38rem .85rem; font-size: .88rem; }
.guide-try:hover { background: #dbe7fb; }
.guide-example { margin: 0; background: #f6f8fc; border: 1px dashed #c9d4e6; border-radius: 14px; padding: 1rem 1.1rem 1.1rem; min-width: 0; pointer-events: none; user-select: none; }
.guide-example figcaption { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .7rem; }
.guide-example a { color: var(--accent); }
.guide-example .btn { cursor: default; }
.guide-example-plain { background: transparent; border: none; padding: .4rem 0 0; }
.guide-one { grid-template-columns: minmax(0, 320px); margin-top: 0; }
.guide-photo { font-style: italic; }
.guide-kinds { grid-template-columns: repeat(2, 1fr); }
.guide-range { margin-top: .6rem; }
.guide-range input, .guide-serial-label input { margin-top: .25rem; }
.guide-jump { margin: 0 0 .7rem; }
.guide-body .cv-pick { margin-top: 0; }
.guide-body .cv-thumb .cv-noimg { font-style: italic; }
.guide-quick-row { border-radius: 12px; }
.guide-serial-label { margin: 0 0 .1rem; }
.guide-rail { max-width: 360px; }
.guide-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.guide-toolbar { position: static; margin-top: 0; }
.guide-privacy { max-width: 420px; }
.guide-end { margin-top: 1.4rem; }
.guide-end p { color: #dbe7fb; font-size: .98rem; }
.guide-end a { color: #fff; font-weight: 700; }
@media (max-width: 760px) { .guide-example .cv-row { grid-template-columns: 60px minmax(0, 1fr); } }
/* the plain view: cards only */
.sc-jump { margin-bottom: .4rem; }
.sc-jump .coll-jump-chip .n { color: var(--muted); font-weight: 600; margin-left: .2rem; }
.sc-country { margin-top: .6rem; }
.sc-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: .6rem; }
.sc-card { color: var(--ink); }
.sc-thumb { position: relative; height: 150px; }
.sc-thumb-cat img { opacity: .75; filter: grayscale(.3); }
.sc-cat-tag { position: absolute; left: 10px; bottom: 8px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(22,34,58,.55); color: #fff; border-radius: 6px; padding: .1rem .42rem; }
.sc-line { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; font-size: .86rem; }
.sc-line .cv-serial i { color: var(--muted); font-weight: 400; font-family: inherit; }

/* ---------- country page, third pass: summary strip + pick rail + checklist ---------- */
.coll-summary { background: var(--card); border-radius: 16px; padding: 1rem 1.3rem 1rem; margin-top: .8rem; box-shadow: var(--shadow); }
.coll-summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.coll-summary-big b { font-size: 1.6rem; color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
.coll-summary-big span { color: var(--muted); font-size: .92rem; }
.coll-summary-pct { color: var(--accent); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.coll-summary-bar { height: 9px; margin: .45rem 0 .6rem; }
.coll-summary-line { display: flex; gap: .5rem 1.4rem; flex-wrap: wrap; color: var(--muted); font-size: .88rem; }
.coll-summary-line b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.coll-summary-value a { color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 50%; padding: 0 .3rem; font-size: .65rem; }
.coll-summary .coll-scope-line { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--row); }
.coll-scope-editor { padding: 0; margin-top: .8rem; }
.coll-scope-editor[hidden] { display: none !important; }
.coll-scope-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.coll-scope-editor-head h2 { color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.coll-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1rem; }
.coll-rail { position: sticky; top: .8rem; max-height: calc(100vh - 1.6rem); overflow: auto; background: var(--card); border-radius: 14px; padding: .8rem .6rem .7rem; box-shadow: var(--shadow); }
.coll-rail-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 .5rem .45rem; }
.coll-rail-title .n { font-weight: 600; opacity: .8; }
.coll-rail-list { display: flex; flex-direction: column; gap: 1px; }
.coll-rail-pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .82rem; border-left: 3px solid transparent; }
.coll-rail-pick:hover { background: var(--accent-soft); }
.coll-rail-pick.is-current { background: var(--accent-soft); }
.coll-rail-no { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coll-rail-denom { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-rail-n { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.coll-rail-pick.is-done { border-left-color: #6cc48a; } .coll-rail-pick.is-done .coll-rail-n { color: var(--green); font-weight: 700; }
.coll-rail-pick.is-partial { border-left-color: #e2b84a; }
.coll-rail-pick.is-none { border-left-color: #e08a80; }
.coll-rail-pick.is-out { opacity: .55; }
.coll-rail-key { display: flex; gap: .3rem; align-items: center; color: var(--muted); font-size: .7rem; padding: .6rem .5rem 0; }
.coll-rail-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: .2rem; }
.coll-rail-key .is-done { background: #6cc48a; } .coll-rail-key .is-partial { background: #e2b84a; } .coll-rail-key .is-none { background: #e08a80; }
.coll-main { min-width: 0; }
.coll-main .coll-toolbar { margin-top: 0; flex-direction: column; align-items: stretch; gap: .45rem; padding: .55rem .7rem; }
.coll-toolbar-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.coll-toolbar-row .coll-search { flex: 1 1 160px; }
.coll-toolbar-row .coll-layout { margin-left: 0; }
.coll-toolbar-sub { border-top: 1px solid var(--row); padding-top: .45rem; }
.coll-toolbar-sub .coll-kinds { flex-basis: auto; }
.coll-toolbar-sub #cv-kinds[hidden] { display: none; }
.coll-toolbar-sub .coll-showing { margin: 0; margin-left: auto; font-size: .8rem; }
.coll-textbtn { font: inherit; font-size: .78rem; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: .1rem .3rem; }
.coll-textbtn:hover { text-decoration: underline; }
.coll-main .coll-list-intro { margin: .6rem .2rem .2rem; font-size: .84rem; }
.coll-main .coll-issue:first-of-type { margin-top: 1rem; }
.coll-main .coll-issue { margin-top: 1.8rem; }
@media (max-width: 900px) {
  .coll-cols { grid-template-columns: 1fr; }
  .coll-rail { position: static; max-height: none; padding: .6rem .6rem; }
  .coll-rail-list { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .coll-rail-pick { grid-template-columns: auto auto; padding: .2rem .5rem; border: 1px solid var(--line); border-left-width: 3px; }
  .coll-rail-denom { display: none; }
  .coll-rail-title, .coll-rail-key { display: none; }
}
.guide-rail-demo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: .8rem; align-items: start; }
.guide-rail-mini { position: static; max-height: none; padding: .6rem .45rem; }
@media (max-width: 700px) { .guide-rail-demo { grid-template-columns: 1fr; } }

/* ---------- collections, third pass: recent strip, stats, batch, wish details, offers ---------- */
.coll-summary-pct small { font-size: .78rem; color: var(--muted); font-weight: 600; }
.coll-summary .coll-scope-line a { font-weight: 600; text-decoration: none; }
.coll-summary .coll-scope-line a:hover { text-decoration: underline; }
.coll-recent { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: .6rem; }
.coll-recent-card { display: flex; gap: .7rem; align-items: center; background: var(--card); border: 1px solid #eef1f6; border-radius: 12px; padding: .5rem .6rem; text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s; min-width: 0; }
.coll-recent-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.coll-recent-thumb { flex: none; width: 82px; height: 48px; border-radius: 7px; background: #f3f5f9; overflow: hidden; }
.coll-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-recent-thumb.is-cat img { opacity: .7; filter: grayscale(.4); }
.coll-recent-body { display: flex; flex-direction: column; gap: .05rem; font-size: .8rem; min-width: 0; color: var(--muted); }
.coll-recent-body b { color: var(--navy); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-recent-serial { display: flex; gap: .4rem; align-items: center; color: var(--ink); }
.coll-country-add { border-style: dashed; background: transparent; box-shadow: none; justify-content: center; }
.coll-country-add:hover { transform: none; box-shadow: none; background: var(--card); }
.coll-country-add-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1rem; }
.coll-country-add-body b { color: var(--navy); font-size: 1.05rem; }
.coll-country-add-body select { margin: 0; }
.coll-country-add-body .btn { align-self: flex-start; }
/* stats */
.stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-top: .4rem; }
.stats-card { margin-top: 0; }
.stats-bars { display: flex; flex-direction: column; gap: .35rem; }
.stats-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .84rem; text-decoration: none; color: var(--ink); }
a.stats-row:hover .stats-label { color: var(--accent); }
.stats-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-track { height: 10px; border-radius: 99px; background: #e4eaf4; overflow: hidden; }
.stats-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #5b8def); border-radius: 99px; }
.stats-val { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.stats-val b { color: var(--ink); }
/* batch entry */
.coll-batch { padding-top: .8rem; }
.coll-batch-table td { vertical-align: top; padding: .4rem .45rem; }
.coll-batch-table select, .coll-batch-table input { margin: 0; padding: .4rem .55rem; font-size: .88rem; }
.coll-batch-table .b-fit { display: block; font-size: .74rem; }
.coll-batch-table .link-danger { font-size: 1.1rem; text-decoration: none; }
.coll-batch .form-buttons { align-items: center; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; background: #eef1f6; border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; }
/* prefix fit marks on the variety chooser */
.coll-var.is-fit { border-color: #6cc48a; background: #f1f8f3; }
.coll-var.is-nofit { opacity: .55; }
.coll-var-fit { font-size: .72rem; font-weight: 700; color: var(--green); }
.coll-var.is-nofit .coll-var-fit { color: var(--danger); }
.csc-dup, .csc-nofit { color: var(--danger); }
/* wish details */
.wish-card { position: relative; }
.wish-prio { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .1rem .45rem; background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-line); }
.wish-prio-3 { background: #fdf0ee; color: var(--danger); border-color: #f0cfca; }
.wish-detail { color: var(--muted); font-size: .8rem; }
.wish-edit { font-size: .8rem; }
.wish-edit summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.wish-edit form { display: flex; flex-direction: column; gap: .2rem; margin: .3rem 0 .2rem; }
.wish-edit label { margin: 0; font-size: .74rem; color: var(--muted); }
.wish-edit input, .wish-edit select { margin-top: .1rem; padding: .3rem .5rem; font-size: .84rem; }
.wish-edit .btn { align-self: flex-start; margin-top: .2rem; }
/* recorded history + offering a serial */
.coll-history { list-style: none; display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; }
.coll-history li { padding-left: .9rem; position: relative; }
.coll-history li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.coll-offer { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.coll-offer input { flex: 1 1 240px; margin: 0; }
.coll-camera { display: none; }
@media (pointer: coarse) { .coll-camera { display: block; } }
.coll-scope-live { margin: .6rem 0 0; font-size: .86rem; font-weight: 600; color: var(--navy); }
.coll-featured { margin-top: .2rem; }

/* ---- collection showcase: the kind bar and the issue grouping (2026-09-12) -------------
   The bar filters the whole page by variety kind; the headings mirror the country page's
   own organisation (section, then issue) so a collection reads like the catalogue does. */
.sc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .2rem;
          padding: .55rem .7rem; background: var(--panel, #f6f7fa); border: 1px solid var(--line, #e2e5ec); border-radius: 10px; }
.sc-bar-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sc-bar-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sc-kind { font: inherit; font-size: .85rem; line-height: 1.2; cursor: pointer; border: 1px solid var(--line, #d9dde6);
           background: #fff; color: var(--ink); border-radius: 999px; padding: .3rem .6rem; display: inline-flex; align-items: center; gap: .35rem; }
.sc-kind:hover { border-color: #9fb4d8; }
.sc-kind .n { font-size: .76rem; font-weight: 700; color: var(--muted); }
.sc-kind.is-on { background: var(--accent, #2a78d6); border-color: var(--accent, #2a78d6); color: #fff; }
.sc-kind.is-on .n { color: rgba(255,255,255,.82); }
.sc-bar-count { margin-left: auto; font-size: .82rem; color: var(--muted); }
.sc-none { margin-top: 1rem; }

.sc-section { margin: 1.1rem 0 .2rem; font-size: 1rem; letter-spacing: .01em; }
.sc-section-years { font-weight: 400; color: var(--muted); margin-left: .4rem; font-size: .88rem; }
.sc-issue { margin-top: .8rem; }
.sc-issue-head { display: flex; align-items: baseline; gap: .5rem; padding-bottom: .28rem; border-bottom: 1px solid var(--line, #e6e9f0); }
.sc-issue-head h4 { margin: 0; font-size: .95rem; font-weight: 700; }
.sc-issue-none { font-weight: 400; color: var(--muted); }
.sc-issue-picks { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-issue-n { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-issue .sc-grid { margin-top: .5rem; }
.sc-card[hidden] { display: none !important; }
@media (max-width: 640px) { .sc-bar-count { margin-left: 0; width: 100%; } }
/* the showcase bar carries two filter rows (kind, country) since 2026-09-12 */
.sc-bar { flex-direction: column; align-items: stretch; gap: .45rem; }
.sc-bar-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.sc-bar-row .sc-bar-label { min-width: 4.6rem; }
.sc-country-chip { font: inherit; font-size: .85rem; line-height: 1.2; cursor: pointer; border: 1px solid var(--line, #d9dde6);
                   background: #fff; color: var(--ink); border-radius: 999px; padding: .3rem .6rem; display: inline-flex; align-items: center; gap: .35rem; }
.sc-country-chip:hover { border-color: #9fb4d8; }
.sc-country-chip .n { font-size: .76rem; font-weight: 700; color: var(--muted); }
.sc-country-chip.is-on { background: var(--accent, #2a78d6); border-color: var(--accent, #2a78d6); color: #fff; }
.sc-country-chip.is-on .n { color: rgba(255,255,255,.82); }
.sc-bar-count { margin: .1rem 0 0; font-size: .82rem; color: var(--muted); text-align: right; }
.sc-kind[hidden], .sc-country-chip[hidden] { display: none !important; }
@media (max-width: 640px) { .sc-bar-row .sc-bar-label { min-width: 0; width: 100%; } .sc-bar-count { text-align: left; } }
/* a collection territory that is one section of a shared catalogue country (2026-09-12) */
.coll-terr-of { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); }
.coll-terr-of a { color: inherit; text-decoration: underline; }

/* ---- collection overview: country jump strip, card flag, value chip (2026-09-12) ------- */
.coll-country-jump { margin: .6rem 0 .2rem; }
.coll-country-jump .coll-jump-chip { display: inline-flex; align-items: center; gap: .4rem; }
.coll-jump-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px;
                  box-shadow: 0 1px 2px rgba(0,0,0,.2); flex: none; }
.coll-country-jump .coll-jump-chip .n { color: var(--muted); font-weight: 700; font-size: .76rem; }

/* the flag rides on the card picture, bottom-left, clear of the note itself */
/* The country cards carry NO picture (the owner's call, 2026-09-12: the note photo and the flag
   both read as clutter at card size) — they are text buttons. .coll-country-photo and its flag
   rule are gone with it; the empty-card hatch moved onto the card itself. */
.coll-country-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.coll-country-empty { background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 8px, #f4f6fa 8px, #f4f6fa 16px); }
.coll-country-name { font-size: 1rem; }

.coll-chip-value { background: #eaf4ec; color: #1f6b3a; font-variant-numeric: tabular-nums; }

/* Free Pro trial page (/free-trial) and its callout on /pro, 2026-09-30 */
.trial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .trial-grid { grid-template-columns: 1fr; } }
.trial-grid .pro-col p { font-size: .93rem; line-height: 1.55; }
.trial-h3 { color: var(--navy); font-size: 1.02rem; font-weight: 800; margin-bottom: .4rem; }
.trial-steps { margin: 0 0 0 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.trial-steps li strong { display: block; color: var(--navy); }
.trial-steps li span { display: block; font-size: .93rem; line-height: 1.55; color: var(--ink); }
.pro-trial-callout { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  background: #e8f3ec; border: 1px solid #b9d8c5; border-radius: 14px; padding: .95rem 1.2rem; }
.pro-trial-callout p { margin: 0; max-width: 44rem; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.pro-trial-callout strong { color: var(--navy); }
.trial-card { display: flex; flex-direction: column; }
.trial-card.has-thumb { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* where the two-up cards get narrow, the picture goes above the text instead of squeezing it */
@media (max-width: 1000px) { .trial-card.has-thumb { grid-template-columns: 1fr; } .trial-card.has-thumb .trial-thumb { max-width: 260px; } }
.trial-thumb { margin: 0; }
.trial-thumb a { display: block; border-radius: 8px; overflow: hidden; background: #f3f4f8; aspect-ratio: 3 / 4; box-shadow: var(--shadow); }
.trial-thumb img, .trial-example-pic img { display: block; width: 100%; cursor: zoom-in; transition: opacity .15s ease; }
.trial-thumb img { height: 100%; object-fit: cover; object-position: center top; }
.trial-thumb a:hover img, .trial-example-pic a:hover img { opacity: .82; }
.trial-thumb figcaption, .trial-example-pic figcaption { font-size: .72rem; color: var(--muted); margin-top: .35rem; text-align: center; }
.trial-cap { margin-top: .6rem; font-size: .8rem; color: var(--muted); font-style: italic; }
.trial-example { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.2rem; margin-top: 1.8rem; align-items: start; }
@media (max-width: 760px) { .trial-example { grid-template-columns: 1fr; } .trial-example-pic { max-width: 320px; } }
.trial-example-pic { margin: 0; }
.trial-example-pic a { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.trial-example-pic img { height: auto; }
.trial-example-text p { font-size: .95rem; line-height: 1.55; }

/* ---------- Country category pages (2026-09-30) ----------
   A sectioned country opens on .cat-card tiles, one per section, each a fan of up to three note
   pictures from inside it; the Archive link at the top is the same card, drawn wide. */
.cat-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1.2rem; }
.cat-stat { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .4rem .75rem; font-size: .84rem; color: var(--muted); }
.cat-stat b { color: var(--navy); font-size: 1rem; font-weight: 800; }
.cat-stat-key { background: var(--accent-soft); border-color: #cfdcf7; }
.cat-stat-key b { color: var(--accent); }
.cat-heading { color: var(--navy); font-size: 1.15rem; font-weight: 800; margin: 1.4rem 0 .8rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.cat-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.cat-card:hover, .cat-card:focus-visible { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: #cdd8ea; }
.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the picture fan */
.cat-pics { position: relative; display: block; height: 168px; background: linear-gradient(160deg, #f4f7fc, #e6ecf6); overflow: hidden; }
.cat-pics img { position: absolute; top: 50%; left: 50%; width: 50%; max-height: 112px; object-fit: contain; background: #fff;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(20,34,58,.22); transition: transform .25s ease; }
.cat-pics-1 img { width: 72%; max-height: 132px; transform: translate(-50%, -50%) rotate(-2deg); }
.cat-pics-2 img:nth-child(1) { transform: translate(-72%, -55%) rotate(-6deg); }
.cat-pics-2 img:nth-child(2) { transform: translate(-28%, -45%) rotate(5deg); }
.cat-pics-3 img:nth-child(1) { transform: translate(-92%, -54%) rotate(-8deg); z-index: 1; }
.cat-pics-3 img:nth-child(3) { transform: translate(-8%, -46%) rotate(8deg); z-index: 2; }
.cat-pics-3 img:nth-child(2) { width: 58%; max-height: 124px; transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }
.cat-card:hover .cat-pics-3 img:nth-child(1) { transform: translate(-98%, -54%) rotate(-11deg); }
.cat-card:hover .cat-pics-3 img:nth-child(3) { transform: translate(-2%, -46%) rotate(11deg); }
.cat-card:hover .cat-pics-2 img:nth-child(1) { transform: translate(-80%, -55%) rotate(-9deg); }
.cat-card:hover .cat-pics-2 img:nth-child(2) { transform: translate(-20%, -45%) rotate(8deg); }
.cat-pics-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; }

.cat-body { display: flex; flex-direction: column; gap: .25rem; padding: .95rem 1.1rem 1.1rem; flex: 1; }
.cat-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a7b2c; }
.cat-name { font-size: 1.08rem; font-weight: 800; color: var(--navy); line-height: 1.3; }
.cat-meta { font-size: .86rem; color: var(--muted); }
.cat-blurb { font-size: .86rem; color: var(--ink); margin-top: .15rem; }
.cat-issues { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.cat-issues span { font-size: .74rem; background: var(--accent-soft); color: #28436f; border-radius: 999px; padding: .12rem .55rem; }
.cat-issues .cat-issues-more { background: var(--row); color: var(--muted); }
.cat-go { position: absolute; right: .9rem; bottom: .8rem; width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800;
  transition: background .18s ease, color .18s ease; }
.cat-card:hover .cat-go { background: var(--accent); color: #fff; }
.cat-card .cat-body { padding-right: 3rem; }

/* the wide Archive card at the top of every country page */
.cat-card-wide { flex-direction: row; align-items: stretch; margin: .4rem 0 1.2rem; }
.cat-card-wide .cat-pics { flex: 0 0 240px; height: auto; min-height: 128px; }
.cat-card-wide .cat-pics img { width: 58%; max-height: 96px; }
.cat-card-wide .cat-body { justify-content: center; }
.cat-card-archive .cat-pics { background: linear-gradient(160deg, #fbf6ea, #efe4c8); }
/* an upright essay or photograph keeps its own shape, with no white bars beside it */
.cat-card-archive .cat-pics img { width: auto; max-width: 58%; background: none; }
.cat-card-archive .cat-kicker { color: #8a6a1c; }
.cat-card-empty { opacity: .75; border-style: dashed; }
@media (max-width: 620px) {
  .cat-card-wide { flex-direction: column; }
  .cat-card-wide .cat-pics { flex-basis: auto; height: 140px; }
}

/* a section's own page */
.cat-h1-years { font-size: .6em; font-weight: 700; color: var(--muted); margin-left: .35rem; white-space: nowrap; }
.cat-parent { margin: -.3rem 0 .8rem; font-size: .92rem; }
.cat-switch { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 1.4rem; }
.cat-switch a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--navy); font-size: .86rem; font-weight: 600; text-decoration: none; }
.cat-switch a:hover { border-color: #b9c8e2; }
.cat-switch a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cat-switch-years { font-weight: 400; opacity: .75; font-size: .8rem; }
.cat-switch .n { font-size: .74rem; background: var(--row); color: var(--muted); border-radius: 999px; padding: 0 .45rem; }
.cat-switch a.active .n { background: rgba(255,255,255,.18); color: #fff; }
.cat-prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cat-prevnext a { font-weight: 700; text-decoration: none; }

/* section card, second version (2026-09-30): years badge on the pictures, stat tiles with the
   variety count highlighted, dates and values, issue chips, and a "View" footer */
.cat-years-badge { position: absolute; left: .7rem; top: .7rem; z-index: 5; background: rgba(30,47,77,.88); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: .03em; padding: .22rem .6rem; border-radius: 999px; }
.cat-card .cat-body { padding: .9rem 1.1rem .4rem; gap: .35rem; }
.cat-issuer { font-size: .84rem; color: var(--muted); margin-top: -.1rem; }
.cat-tiles { display: grid; grid-template-columns: 1fr 1.1fr 1.5fr; gap: .45rem; margin: .45rem 0 .2rem; }
.cat-tile { display: flex; flex-direction: column; align-items: flex-start; background: #f5f7fb; border: 1px solid var(--line);
  border-radius: 10px; padding: .45rem .6rem; min-width: 0; }
.cat-tile b { font-size: 1.15rem; font-weight: 800; color: var(--navy); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cat-tile small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-top: .1rem; }
.cat-tile-key { background: var(--accent-soft); border-color: #cfdcf7; }
.cat-tile-key b { color: var(--accent); font-size: 1.35rem; }
.cat-tile-range b { font-size: .98rem; padding-top: .15rem; }
.cat-dash { margin: 0 .1rem; color: var(--muted); font-weight: 600; }
.cat-facts { display: flex; flex-direction: column; gap: .15rem; font-size: .83rem; color: var(--ink); }
.cat-facts em { font-style: normal; font-weight: 700; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .3rem; }
.cat-issues { margin-top: .35rem; }
.cat-foot { display: flex; justify-content: space-between; align-items: center; margin: .6rem 1.1rem .95rem; padding-top: .7rem;
  border-top: 1px solid var(--line); font-size: .86rem; font-weight: 700; color: var(--accent); }
.cat-card:hover .cat-foot { color: var(--accent-strong); }
.cat-card-wide .cat-go { position: absolute; }

/* ---------- Country page sections, one per line (owner's choice, 2026-11-04) ----------
   Each section: name, figures and a button, then its notes, which wrap instead of scrolling. */
.sec-rows { display: flex; flex-direction: column; gap: 1rem; }
.sec-row { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; }
.sec-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.sec-row-title { min-width: 0; }
.sec-row-title h3 { color: var(--navy); font-size: 1.12rem; font-weight: 800; line-height: 1.25; margin: 0; }
.sec-row-title h3 a { color: inherit; text-decoration: none; }
.sec-row-title h3 a:hover { color: var(--accent-strong); }
.sec-row-title p { color: var(--muted); font-size: .85rem; line-height: 1.4; margin: .1rem 0 0; }
.sec-row-btn { flex: none; white-space: nowrap; }
.sec-row-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .9rem .7rem; }
.sec-note { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; border-radius: 10px; }
.sec-note-pic { display: flex; align-items: center; justify-content: center; height: 118px; padding: .5rem; background: linear-gradient(160deg, #f4f7fc, #e6ecf6); border-radius: 10px; }
.sec-note-pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 3px 10px rgba(30,47,77,.2); transition: transform .15s; }
.sec-note:hover .sec-note-pic img { transform: scale(1.04); }
.sec-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-note-denom { color: var(--navy); font-size: .9rem; font-weight: 700; line-height: 1.25; margin-top: .4rem; }
.sec-note:hover .sec-note-denom { color: var(--accent-strong); }
.sec-note-pick { color: var(--muted); font-size: .77rem; line-height: 1.35; }
.sec-note-more { align-items: center; justify-content: center; height: 118px; background: var(--accent-soft); color: var(--accent); font-size: .8rem; }
.sec-note-more b { font-size: 1.3rem; }
@media (max-width: 640px) {
  .sec-row { padding: .85rem .85rem .95rem; }
  .sec-row-head { flex-direction: column; gap: .55rem; }
  .sec-row-notes { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .sec-note-pic, .sec-note-more { height: 96px; }
}

/* ---------- Archive pages (reworked 2026-11-04) ----------
   The index: each kind on its own line as a .sec-row, with its pieces in a grid that wraps.
   A piece: a plain head, the photographs on their own panel, the facts in the rail. */
.arch-jump { margin-bottom: 1.4rem; }
.arch-jump-product { background: var(--amber-bg) !important; border-color: var(--amber-line) !important; color: var(--amber-ink) !important; }
.arch-jump-product span { color: var(--amber-ink) !important; }
.arch-group + .arch-group { margin-top: 2.2rem; }
.arch-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.arch-group-head h2 { color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.arch-group-head span { color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.arch-group-intro { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: .3rem 0 .9rem; max-width: 760px; }
.arch-group-product .arch-group-head h2 { color: var(--amber-ink); }
.arch-row { scroll-margin-top: 1rem; }
.arch-row + .arch-row { margin-top: 1rem; }
.arch-row-head { margin-bottom: .85rem; }
.arch-row-head h3 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; color: var(--navy); font-size: 1.08rem; font-weight: 800; line-height: 1.25; margin: 0; }
.arch-row-head h3 span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.arch-row-head p { color: var(--muted); font-size: .85rem; line-height: 1.45; margin: .15rem 0 0; max-width: 760px; }
.arch-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem .8rem; }
.arch-tile { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; border-radius: 10px; }
.arch-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arch-tile-pic { display: flex; align-items: center; justify-content: center; height: 136px; padding: .5rem; background: linear-gradient(160deg, #f4f7fc, #e6ecf6); border-radius: 10px; }
.arch-group-product .arch-tile-pic { background: linear-gradient(160deg, #fbf6ea, #efe4c8); }
.arch-tile-pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 3px 10px rgba(30,47,77,.2); transition: transform .15s; }
.arch-tile:hover .arch-tile-pic img { transform: scale(1.04); }
.arch-tile-blank { color: var(--muted); font-size: .76rem; }
.arch-tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .45rem; }
.arch-tile-top strong { color: var(--navy); font-size: .92rem; font-weight: 700; line-height: 1.25; min-width: 0; }
.arch-tile:hover .arch-tile-top strong { color: var(--accent-strong); }
.arch-tile-top span { flex: none; max-width: 55%; color: var(--muted); font-size: .76rem; text-align: right; line-height: 1.3; }
.arch-tile-desc { color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: .1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arch-tile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .3rem; }
.arch-tile-tags .arch-kind-badge { white-space: normal; }
.arch-tile-tags .arch-card-ref { min-width: 0; white-space: normal; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .arch-tiles { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .9rem .6rem; }
  .arch-tile-pic { height: 100px; }
  .arch-tile-top { flex-direction: column; gap: 0; }
  .arch-tile-top span { max-width: none; text-align: left; }
}

.piece-kicker { color: #8a6a1c; }
.piece-kicker-product { color: var(--amber-ink); }
.piece-head { align-items: flex-start; flex-wrap: nowrap; }
.piece-head h1 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.22; min-width: 0; letter-spacing: -.01em; }
.piece-head-side { flex: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.piece-sub { color: var(--muted); margin: .25rem 0 0; max-width: 760px; }
.piece-cols { margin-top: 1rem; }
.piece-cols .archive-main > .info-section + .info-section { margin-top: 1rem; }
.piece-plates { padding: 1rem; }
.piece-plates .plate-zoom { background: linear-gradient(160deg, #f4f7fc, #e6ecf6); border: 0; padding: .9rem; }
.piece-plates .plate-zoom img { max-height: 520px; box-shadow: 0 4px 14px rgba(30,47,77,.18); width: auto; max-width: 100%; margin-inline: auto; }
.piece-text { margin-top: 0; line-height: 1.65; max-width: 78ch; }
.piece-cols .rail-spec td { overflow-wrap: anywhere; }
.piece-cols .note-rail .btn { display: block; text-align: center; }
.piece-cols .note-rail .btn + .btn { margin-top: .45rem; }
.piece-rail-links { margin-top: .7rem; }
.piece-sales-note { margin-top: .6rem; }
@media (max-width: 640px) {
  .piece-head { flex-wrap: wrap; }
  .piece-plates { padding: .7rem; }
  /* the sales table stacks on a phone, so nothing has to scroll sideways */
  #archive-sales-table, #archive-sales-table tbody { display: block; width: 100%; min-width: 0; }
  #archive-sales-table thead, #archive-sales-table .row-num { display: none; }
  #archive-sales-table tr:not(.page-hidden):not(.filter-hidden):not([hidden]) { display: block; padding: .6rem 0; border-bottom: 1px solid var(--row); }
  #archive-sales-table td { display: block; padding: .08rem 0; border: 0; white-space: normal; background: none; }
}

/* ---------- Section pages and the archive page (reworked 2026-11-04) ----------
   The plain head a country page has, then every section as a chip that wraps. */
.sec-kicker { color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: .6rem 0 0; }
.sec-head { margin-top: .1rem; }
.sec-head-desc { margin-bottom: .9rem; }
.sec-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sec-nav-item { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .8rem; font-size: .84rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.sec-nav-item:hover { border-color: #b9c8e2; background: var(--thead); }
.sec-nav-item.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sec-nav-arch { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.sec-nav-arch:hover { background: var(--amber-bg); border-color: #d9bd72; }
.sec-nav-arch.on { background: var(--amber-ink); border-color: var(--amber-ink); color: #fff; }

/* The tiles and the fan below are also used by the upcoming auction pages. */
.sec-eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #e7c873; }
.sec-desc { color: #d4ddf0; max-width: 52ch; font-size: .95rem; line-height: 1.55; }
.sec-tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.sec-tile { display: flex; flex-direction: column; min-width: 92px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: .5rem .8rem; }
.sec-tile b { color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.sec-tile small { color: #b8c6e3; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-top: .1rem; }
.sec-tile-key { background: #e7c873; border-color: #e7c873; }
.sec-tile-key b, .sec-tile-key small { color: #1e2f4d; }
.sec-fan { position: relative; height: 190px; }
.sec-fan img { position: absolute; top: 50%; left: 50%; width: 54%; max-height: 132px; object-fit: contain; background: #fff;
  border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.sec-fan-1 img { width: 76%; max-height: 170px; transform: translate(-50%, -50%) rotate(-2deg); }
.sec-fan-2 img:nth-child(1) { transform: translate(-78%, -54%) rotate(-6deg); }
.sec-fan-2 img:nth-child(2) { transform: translate(-24%, -46%) rotate(5deg); }
.sec-fan-3 img:nth-child(1) { transform: translate(-94%, -54%) rotate(-8deg); }
.sec-fan-3 img:nth-child(2) { width: 62%; max-height: 150px; transform: translate(-50%, -50%); z-index: 3; }
.sec-fan-3 img:nth-child(3) { transform: translate(-6%, -46%) rotate(8deg); z-index: 2; }
.sec-admin { margin: .7rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }


.sec-issues { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; }
.sec-issues a { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .75rem; font-size: .84rem;
  text-decoration: none; color: var(--navy); }
.sec-issues a:hover { border-color: #b9c8e2; }
.sec-issues a span { color: var(--muted); margin-left: .4rem; }
@media (max-width: 760px) {
  .sec-fan { height: 150px; }
  .sec-fan img { max-height: 104px; }
}

/* ---------- news & research (rebuilt 2026-10-28) ----------
   /news: banner, category tabs, featured post + "Upcoming rarity at auction", card grid with a
   side column. /news/{slug}: header, cover, prose with an "In this article" / sale box column.
   Each category has its own colour, used on its chip, its tab and a card without a picture. */
:root {
  --cat-announcements: #2563eb; --cat-announcements-bg: #eaf0fd;
  --cat-news: #1e2f4d;          --cat-news-bg: #e7ebf3;
  --cat-auctions: #8a6410;      --cat-auctions-bg: #fbf1d8;
  --cat-market: #1f7a4d;        --cat-market-bg: #e5f3eb;
  --cat-research: #6a3fb5;      --cat-research-bg: #efe8fb;
}
.nw-banner { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 1.4rem; align-items: end;
  margin-top: 1.4rem; background: linear-gradient(135deg, #1e2f4d, #2c4775); color: #fff; border-radius: 20px;
  padding: 1.7rem 1.9rem; box-shadow: 0 16px 40px rgba(30,47,77,.18); }
.nw-banner h1 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 .35rem; }
.nw-search { display: flex; gap: .4rem; margin-top: 1.1rem; max-width: 460px; }
.nw-search input { flex: 1; min-width: 0; padding: .5rem .8rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; font-size: .92rem; }
.nw-search input::placeholder { color: #c3cfe6; }
.nw-search input:focus { outline: 2px solid #e7c873; outline-offset: 1px; background: rgba(255,255,255,.18); }
.nw-search .btn { background: #e7c873; color: #1e2f4d; }
.nw-search .btn:hover { background: #f1d78f; }
.nw-tiles { margin-top: 0; justify-content: flex-end; }
@media (max-width: 760px) { .nw-banner { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; } .nw-tiles { justify-content: flex-start; } }

.nw-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.nw-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .9rem;
  text-decoration: none; box-shadow: 0 1px 2px rgba(30,47,77,.06); transition: border-color .12s, background .12s; }
.nw-tab:hover { border-color: var(--accent); color: var(--accent-strong); }
.nw-tab-n { font-size: .75rem; color: var(--muted); background: var(--row); border-radius: 99px; padding: .02rem .45rem; font-weight: 700; }
.nw-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.nw-tab.is-on .nw-tab-n { background: rgba(255,255,255,.18); color: #fff; }

.nw-chip { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .16rem .55rem; border-radius: 99px; text-decoration: none; color: var(--cat-news); background: var(--cat-news-bg); }
.nw-chip-announcements { color: var(--cat-announcements); background: var(--cat-announcements-bg); }
.nw-chip-auctions { color: var(--cat-auctions); background: var(--cat-auctions-bg); }
.nw-chip-market { color: var(--cat-market); background: var(--cat-market-bg); }
.nw-chip-research { color: var(--cat-research); background: var(--cat-research-bg); }
.nw-chip:hover { filter: brightness(.95); text-decoration: underline; }
.badge-placeholder { display: inline-block; background: #fde8e8; border: 1px dashed #e0a3a3; color: #9b2c2c; font-size: .68rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .08rem .45rem; border-radius: 6px; vertical-align: middle; }

/* the featured post and the upcoming-rarity spotlight */
.nw-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.nw-top-one { grid-template-columns: 1fr; }
@media (max-width: 900px) { .nw-top { grid-template-columns: 1fr; } }
.nw-feature { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.nw-feature-img { display: block; aspect-ratio: 16 / 7; background: var(--navy); overflow: hidden; }
.nw-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.nw-feature:hover .nw-feature-img img { transform: scale(1.02); }
.nw-feature-body { padding: 1.3rem 1.6rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.nw-feature-kicker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); font-weight: 600; }
.nw-feature h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.22; margin: .5rem 0 0; }
.nw-feature h2 a { color: var(--navy); text-decoration: none; }
.nw-feature h2 a:hover { color: var(--accent); }
.nw-excerpt { margin-top: .5rem; line-height: 1.55; color: #3a4762; }
.nw-feature-btn { align-self: flex-start; margin-top: 1rem; }

.nw-spot { display: flex; flex-direction: column; border-radius: 18px; padding: 1.2rem 1.3rem 1.3rem; color: #fff;
  background: linear-gradient(160deg, #4a3a12, #7a5c15 70%, #8f6d1d); box-shadow: 0 16px 40px rgba(74,58,18,.22); }
.nw-spot-eyebrow { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #f3d98d; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.nw-spot-img { display: block; margin-top: .8rem; background: #fff; border-radius: 10px; padding: .45rem; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.nw-spot-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.nw-spot h2 { font-size: 1.15rem; line-height: 1.3; margin: .85rem 0 0; font-weight: 800; }
.nw-spot h2 a { color: #fff; text-decoration: none; }
.nw-spot h2 a:hover { text-decoration: underline; }
.nw-spot-facts { display: grid; gap: .3rem; margin-top: .7rem; font-size: .86rem; }
.nw-spot-facts div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem; }
.nw-spot-facts dt { color: #f0e2bc; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding-top: .12rem; }
.nw-spot-facts dd { color: #fff; font-weight: 600; }
.nw-spot-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.nw-countdown { display: inline-block; background: #fff3cf; color: #4a3a12; font-weight: 800; font-size: .82rem; padding: .25rem .7rem; border-radius: 99px; }
.nw-spot-btn { background: #fff; color: #4a3a12; }
.nw-spot-btn:hover { background: #fff3cf; }

/* grid + side column */
.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; margin-top: 1.6rem; align-items: start; }
@media (max-width: 960px) { .nw-layout { grid-template-columns: 1fr; } }
.nw-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nw-main-head h2 { font-size: 1.15rem; color: var(--navy); }
.nw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.nw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .nw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nw-grid, .nw-grid-3 { grid-template-columns: 1fr; } }
.nw-card { display: flex; flex-direction: column; background: var(--card); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.nw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.nw-card-img { position: relative; display: block; text-decoration: none; aspect-ratio: 16 / 8; overflow: hidden; background: #dfe5ef; }
.nw-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-card-img-none { display: grid; place-items: center; background: linear-gradient(135deg, var(--cat-news-bg), #fff); }
.nw-card-img-label { font-weight: 800; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cat-news); opacity: .55; }
.nw-card-img-announcements { background: linear-gradient(135deg, var(--cat-announcements-bg), #fff); }
.nw-card-img-announcements .nw-card-img-label { color: var(--cat-announcements); }
.nw-card-img-auctions { background: linear-gradient(135deg, var(--cat-auctions-bg), #fff); }
.nw-card-img-auctions .nw-card-img-label { color: var(--cat-auctions); }
.nw-card-img-market { background: linear-gradient(135deg, var(--cat-market-bg), #fff); }
.nw-card-img-market .nw-card-img-label { color: var(--cat-market); }
.nw-card-img-research { background: linear-gradient(135deg, var(--cat-research-bg), #fff); }
.nw-card-img-research .nw-card-img-label { color: var(--cat-research); }
.nw-datebadge { position: absolute; left: .7rem; top: .7rem; display: flex; flex-direction: column; align-items: center;
  background: #fff; color: var(--cat-auctions); border-radius: 10px; padding: .25rem .55rem; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 12px rgba(0,0,0,.15); line-height: 1.15; }
.nw-datebadge b { font-size: 1.25rem; color: var(--ink); }
.nw-card-body { padding: .95rem 1.15rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.nw-card-kicker { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.nw-card h3 { font-size: 1.05rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; margin: .5rem 0 0; }
.nw-card h3 a { color: var(--ink); text-decoration: none; }
.nw-card h3 a:hover { color: var(--accent); }
.nw-card .nw-excerpt { font-size: .92rem; }
.nw-card .news-meta { margin-top: auto; padding-top: .6rem; }
.nw-empty { margin-top: .8rem; }

.nw-side { display: flex; flex-direction: column; gap: 1rem; }
.nw-side-card { background: var(--card); border-radius: 16px; padding: 1.05rem 1.2rem; box-shadow: var(--shadow); }
.nw-side-card h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; margin-bottom: .7rem; }
.nw-side-more { display: inline-block; margin-top: .7rem; font-size: .86rem; font-weight: 600; text-decoration: none; }
.nw-side-more:hover { text-decoration: underline; }
.nw-cal { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.nw-cal li { display: flex; gap: .7rem; align-items: flex-start; }
.nw-cal-date { flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; border-radius: 10px;
  background: var(--cat-auctions-bg); color: var(--cat-auctions); font-size: .66rem; font-weight: 800; text-transform: uppercase; padding: .2rem 0; line-height: 1.1; }
.nw-cal-date b { font-size: 1.15rem; color: var(--ink); }
.nw-cal-text { min-width: 0; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.3; }
.nw-cal-text a { font-weight: 700; color: var(--ink); text-decoration: none; }
.nw-cal-text a:hover { color: var(--accent); }
.nw-cal-text small { color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.nw-topics { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.nw-topics a { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .92rem; }
.nw-topics a:hover { color: var(--accent); }
.nw-topics small { margin-left: auto; color: var(--muted); font-weight: 600; }
.nw-topics p { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: .1rem 0 0 1.15rem; }
.nw-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--cat-news); flex: none; }
.nw-dot-announcements { background: var(--cat-announcements); }
.nw-dot-auctions { background: var(--cat-auctions); }
.nw-dot-market { background: var(--cat-market); }
.nw-dot-research { background: var(--cat-research); }
.nw-research { margin-left: 1.1rem; display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; line-height: 1.35; }
.nw-research a { font-weight: 600; color: var(--ink); text-decoration: none; }
.nw-research a:hover { color: var(--accent); }
.nw-research small { display: block; color: var(--muted); font-size: .76rem; }
.nw-side-cta { background: linear-gradient(160deg, var(--accent-soft), #fff); border: 1px solid #d3e0fb; }
.nw-side-cta p { font-size: .88rem; line-height: 1.5; color: #3a4762; margin-bottom: .8rem; }

/* one article */
.nw-crumbs { margin-top: 1.3rem; }
.nw-article { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); margin-top: .4rem; }
.nw-article-head { padding: 1.8rem 2.1rem 1.2rem; max-width: 860px; }
.nw-article-head h1 { color: var(--navy); font-size: clamp(1.55rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin-top: .6rem; }
.nw-dek { font-size: 1.12rem; line-height: 1.55; color: #3a4762; margin-top: .6rem; }
.nw-article-head .news-meta { margin-top: .8rem; }
.nw-cover { margin: 0; background: var(--navy); }
.nw-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.nw-cover figcaption { background: #f6f8fc; color: var(--muted); font-size: .82rem; padding: .5rem 2.1rem; }
.nw-article-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2rem; padding: 1.6rem 2.1rem 2rem; }
.nw-article-solo { grid-template-columns: minmax(0, 760px); }
@media (max-width: 900px) {
  .nw-article-cols { grid-template-columns: 1fr; }
  .nw-article-side { order: -1; }
  .nw-article-head, .nw-article-cols { padding-left: 1.2rem; padding-right: 1.2rem; }
  .nw-cover figcaption { padding: .5rem 1.2rem; }
}
.nw-prose { margin-top: 0; font-size: 1.04rem; line-height: 1.75; color: #22304b; }
.nw-prose > * + * { margin-top: 1rem; }
.nw-prose h2 { color: var(--navy); font-size: 1.4rem; font-weight: 800; margin-top: 2rem; scroll-margin-top: 1rem; line-height: 1.3; }
.nw-prose h3 { color: var(--navy); font-size: 1.12rem; font-weight: 800; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.nw-prose ul, .nw-prose ol { margin-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.nw-prose strong { color: var(--ink); }
.news-callout { background: var(--cat-research-bg); border-left: 4px solid var(--cat-research); border-radius: 0 12px 12px 0;
  padding: .9rem 1.1rem; font-size: .98rem; line-height: 1.6; }
.news-figs { margin-top: 1.4rem; margin-bottom: 1.4rem; }
.news-fig-row { display: grid; gap: .8rem; }
.news-fig-2 { grid-template-columns: 1fr 1fr; }
.news-fig-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .news-fig-2, .news-fig-3 { grid-template-columns: 1fr; } }
.news-fig { margin: 0; }
.news-fig img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.news-fig figcaption { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: .45rem; }
.news-table-wrap { overflow-x: auto; }
.news-table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.news-table th { text-align: left; background: var(--thead); color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.news-table th, .news-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--row); vertical-align: top; }
.news-table tbody tr:hover { background: #f8fafd; }
.nw-article-foot { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.nw-article-side { display: flex; flex-direction: column; gap: 1rem; }
.nw-toc { position: sticky; top: 1rem; background: #f6f8fc; border-radius: 14px; padding: 1rem 1.1rem; }
.nw-toc p { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; margin-bottom: .5rem; }
.nw-toc ol { margin-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .88rem; line-height: 1.35; }
.nw-toc a { color: var(--ink); text-decoration: none; }
.nw-toc a:hover { color: var(--accent); }
.nw-salebox { border-radius: 14px; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(160deg, #4a3a12, #7a5c15); }
.nw-narrow { max-width: 940px; }
.nw-more { margin-top: 2rem; }
.nw-more h2 { font-size: 1.15rem; color: var(--navy); }

/* the admin post form */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
.post-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .6rem 1rem 1rem; margin: 1rem 0; }
.post-fieldset legend { font-weight: 700; color: var(--navy); padding: 0 .4rem; }
.post-help { margin: .4rem 0 1rem; font-size: .88rem; }
.post-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.post-help ul { margin: .5rem 0 0 1.2rem; display: flex; flex-direction: column; gap: .25rem; color: var(--muted); }
.news-meta > * + *::before { display: inline-block; text-decoration: none; }
.news-table td a { white-space: nowrap; }

/* ---------- upcoming auctions (2026-10-28) ----------
   /upcoming-auctions: banner (the news banner), one card per sale, the Pro pitch, recently held.
   /upcoming-auctions/{slug}: banner, summary line, toolbar, one row per lot. */
/* .tint-banner — the header of the upcoming auctions pages and of /news: a light blue-grey tint one step deeper than the page,
   navy type, white figure tiles (option E of public/designs/upcoming-header-options.html, the owner's
   choice of 2026-10-28; the dark navy and the cream versions were both turned down) */
.tint-banner { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 1.4rem; align-items: center;
  margin-top: 1.4rem; padding: 1.6rem 1.9rem; border-radius: 20px; background: #dfe7f2; border: 1px solid #cfdae9; }
@media (max-width: 760px) { .tint-banner { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; } }
.tint-banner .sec-eyebrow { color: var(--accent-strong); }
.tint-banner h1 { color: var(--navy); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 .35rem; }
.tint-banner .sec-desc { color: #3f4d68; max-width: 60ch; }
.tint-banner .sec-tiles { margin-top: 0; justify-content: flex-end; }
@media (max-width: 760px) { .tint-banner .sec-tiles { justify-content: flex-start; } }
.tint-banner .sec-tile, .tint-banner .sec-tile-key { background: #fff; border: none; }
.tint-banner .sec-tile b, .tint-banner .sec-tile-key b { color: var(--navy); }
.tint-banner .sec-tile small, .tint-banner .sec-tile-key small { color: var(--muted); }
.tint-banner .nw-countdown { background: #fff; color: var(--navy); }
.tint-banner .nw-spot-btn { background: var(--navy); color: #fff; }
.tint-banner .nw-spot-btn:hover { background: #2c4775; }
.up-desc { margin-top: .4rem; }
.up-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.3rem; }
.up-card { display: grid; grid-template-columns: 84px minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start;
  background: var(--card); border-radius: 18px; padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
@media (max-width: 860px) { .up-card { grid-template-columns: 64px minmax(0, 1fr); } .up-card-side { grid-column: 1 / -1; } }
.up-date { display: flex; flex-direction: column; align-items: center; border-radius: 14px; padding: .55rem 0 .5rem;
  background: var(--cat-auctions-bg); color: var(--cat-auctions); text-decoration: none; line-height: 1.1; }
.up-date b { font-size: 1.8rem; color: var(--ink); font-weight: 800; }
.up-date span { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.up-date small { font-size: .72rem; font-weight: 600; }
.up-house { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cat-auctions);
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.up-card h2 { font-size: 1.3rem; line-height: 1.25; margin: .2rem 0 0; }
.up-card h2 a { color: var(--navy); text-decoration: none; }
.up-card h2 a:hover { color: var(--accent); }
.up-counts { margin-top: .55rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.up-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.up-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--ink);
  background: var(--row); border-radius: 99px; padding: .15rem .6rem; text-decoration: none; }
a.up-chip:hover { background: var(--accent-soft); color: var(--accent-strong); }
.up-chip small { color: var(--muted); font-weight: 700; }
.up-chip-more { color: var(--muted); }
.up-actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.up-card .gate-tag { margin-left: .3rem; }
.up-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.up-fan { width: 100%; height: 150px; }
.up-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.up-btn-ghost:hover { background: rgba(255,255,255,.2); }
.up-pitch { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.6rem;
  border-radius: 18px; padding: 1.4rem 1.6rem; color: #fff; background: linear-gradient(160deg, #4a3a12, #7a5c15 70%, #8f6d1d); }
.up-pitch h2 { color: #fff; font-size: 1.3rem; margin: .2rem 0 .6rem; }
.up-pitch ul { margin-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; color: #f3e8cc; font-size: .93rem; max-width: 70ch; }
.up-pitch strong { color: #fff; }
.up-past { margin-top: 1.8rem; }
.up-past h2 { font-size: 1.1rem; color: var(--navy); }
.up-past ul { list-style: none; margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.up-past li { display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; }
.up-teaser { margin-top: 1.2rem; }

.up-summary { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; }
.up-summary span { background: var(--card); border-radius: 99px; padding: .35rem .9rem; font-size: .88rem; box-shadow: var(--shadow); }
.up-summary b { color: var(--navy); }
.up-sum-new b { color: var(--cat-research); }
.up-sum-seen b { color: var(--cat-market); }
.up-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: .5rem 0; }
.up-toolbar input, .up-toolbar select { padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; }
.up-toolbar input { flex: 1; min-width: 220px; }
.up-lots { list-style: none; display: flex; flex-direction: column; gap: .8rem; margin-top: .6rem; }
.up-lot { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: 1.2rem; background: var(--card); border-radius: 16px;
  padding: 1rem 1.2rem; box-shadow: var(--shadow); scroll-margin-top: 4rem; }
.up-lot[hidden] { display: none; }
@media (max-width: 960px) { .up-lot { grid-template-columns: 140px minmax(0, 1fr); } .up-lot-side { grid-column: 1 / -1; } }
@media (max-width: 560px) { .up-lot { grid-template-columns: 1fr; } }
.up-lot-img img { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: block; }
.up-noimg { display: grid; place-items: center; height: 110px; border-radius: 8px; background: var(--row); color: var(--muted); font-size: .8rem; }
.up-lot-top { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.up-lotno { font-weight: 800; color: var(--navy); font-size: .95rem; margin-right: .2rem; }
.up-flag { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 99px; padding: .14rem .55rem; }
.up-flag-new { background: var(--cat-research-bg); color: var(--cat-research); }
.up-flag-seen { background: var(--cat-market-bg); color: var(--cat-market); }
.up-lot h3 { font-size: 1.02rem; line-height: 1.35; margin: .4rem 0 0; color: var(--ink); }
.up-desc-box { margin-top: .35rem; font-size: .88rem; color: #3a4762; }
.up-desc-box summary { cursor: pointer; line-height: 1.5; }
.up-desc-box[open] summary { color: var(--muted); }
.up-desc-box p { margin-top: .4rem; line-height: 1.55; }
.up-lot-facts { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .55rem; font-size: .88rem; align-items: baseline; }
.up-lot-facts small, .up-lot-side small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.up-seen { margin-top: .55rem; font-size: .86rem; background: var(--cat-market-bg); border-radius: 10px; padding: .45rem .7rem; }
.up-lot-side { display: flex; flex-direction: column; gap: .65rem; border-left: 1px solid var(--line); padding-left: 1.1rem; }
@media (max-width: 960px) { .up-lot-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: .7rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.up-est b { font-size: 1.15rem; color: var(--ink); }
.up-worth b { font-size: 1.15rem; color: var(--green); margin-right: .3rem; }
.up-worth .hint { display: block; font-size: .78rem; }
.up-vs { display: inline-block; margin-top: .3rem; font-size: .72rem; font-weight: 700; border-radius: 99px; padding: .12rem .55rem; }
.up-vs-below { background: #e5f3eb; color: var(--green); }
.up-vs-in-line { background: var(--row); color: var(--muted); }
.up-vs-above { background: var(--amber-bg); color: var(--amber-ink); }
.up-cat a { font-weight: 700; }
.up-foot { margin-top: 1rem; max-width: 80ch; }
.up-admin-table td { vertical-align: top; }
.up-admin-form { display: flex; flex-direction: column; gap: .3rem; min-width: 220px; }
.up-admin-form input { padding: .3rem .5rem; font-size: .84rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; }

/* wish list matches on the upcoming auctions pages (2026-10-28) */
.up-foryou { margin-top: 1.2rem; background: var(--card); border-radius: 18px; padding: 1.1rem 1.4rem; box-shadow: var(--shadow); border-left: 5px solid #d4a72c; }
.up-foryou-head { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.up-foryou-head h2 { font-size: 1.15rem; color: var(--navy); }
.up-foryou-head p { margin: 0; }
.up-foryou-empty { margin-top: .5rem; font-size: .93rem; }
.up-foryou-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .7rem; margin-top: .8rem; }
.up-foryou-list li { display: flex; gap: .7rem; align-items: center; background: #fbf8ef; border-radius: 12px; padding: .5rem .7rem; }
.up-foryou-img { flex: none; width: 84px; }
.up-foryou-img img { width: 84px; border-radius: 6px; display: block; }
.up-foryou-list div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; align-items: flex-start; }
.up-foryou-title { font-weight: 700; color: var(--ink); text-decoration: none; font-size: .92rem; line-height: 1.3; }
.up-foryou-title:hover { color: var(--accent); }
.up-foryou-list small { color: var(--muted); font-size: .78rem; }
.up-flag-mine { background: #fff1c2; color: #7a5c15; }
.up-flag-missing { background: var(--accent-soft); color: var(--accent-strong); }
.up-flag-upgrade { background: var(--cat-market-bg); color: var(--cat-market); }
.up-lot-mine { box-shadow: 0 0 0 2px #e7c873, var(--shadow); }
.up-wishmax { margin-top: .35rem; font-size: .85rem; color: #7a5c15; font-weight: 600; }
.up-sum-mine b { color: #8a6410; }
.up-mine-teaser { margin-top: 1rem; background: #fff7dc; border: 1px solid #ecd9a8; border-radius: 12px; padding: .7rem 1rem; font-size: .93rem; }
.wish-auction { display: inline-block; margin-top: .35rem; font-size: .8rem; font-weight: 700; color: #7a5c15; background: #fff1c2; border-radius: 99px; padding: .15rem .6rem; text-decoration: none; }
.wish-auction:hover { background: #ffe79a; }

/* ---------- /news, magazine layout (the owner's choice, 2026-11-04) ----------
   No outlines and no side column: the title on the page itself, plain categories, a lead article, cards
   three across, then the sales coming up across. Examples: design/site-mockups/news-2026-11/. */
.nw3 { --nw3-shadow: 0 1px 2px rgba(30,47,77,.03), 0 12px 32px rgba(30,47,77,.05); padding-top: 1.8rem; }
.nw3-head h1 { color: var(--navy); font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.nw3-head p { color: #566480; font-size: 1.02rem; line-height: 1.55; margin-top: .55rem; max-width: 58ch; }
.nw3-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.8rem; border-bottom: 1px solid #e6ebf3; }
.nw3-tabs a { display: inline-flex; gap: .4rem; align-items: baseline; padding: .55rem 0 .7rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #4d5b76; font-size: .95rem; font-weight: 600; text-decoration: none; }
.nw3-tabs a span { color: #7a879d; font-size: .8rem; font-weight: 600; }
.nw3-tabs a:hover { color: var(--navy); }
.nw3-tabs a.is-on { color: var(--navy); border-bottom-color: var(--navy); }
.nw3-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.nw3-meta { color: #6b7891; font-size: .84rem; line-height: 1.45; margin-top: .5rem; }
.nw3-excerpt { color: #4f5d78; font-size: .97rem; line-height: 1.6; margin-top: .55rem; }
.nw3-more { display: inline-block; margin-top: .9rem; font-size: .93rem; font-weight: 700; text-decoration: none; }
.nw3-more:hover { text-decoration: underline; }
.nw3-label { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: #6b7891; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem; }
.nw3-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 3.2rem 0 1.3rem; }
.nw3-sec-head h2 { color: var(--navy); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.nw3-sec-head .nw3-meta { margin: 0; }
.nw3-empty { color: var(--muted); padding: .4rem 0; }
.nw3-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.8rem; align-items: center; margin-top: 2.4rem; }
.nw3-lead-plain { grid-template-columns: minmax(0, 1fr); }
.nw3-lead-img { display: block; min-height: 340px; overflow: hidden; border-radius: 18px; background: #e8edf5; box-shadow: var(--nw3-shadow); }
.nw3-lead-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nw3-lead-body { display: flex; flex-direction: column; align-items: flex-start; }
.nw3-lead-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.24; margin-top: .75rem; }
.nw3-lead-body h2 a, .nw3-card h3 a, .nw3-panel h3 a { text-decoration: none; }
.nw3-lead-body h2 a { color: var(--navy); }
.nw3-card h3 a, .nw3-panel h3 a { color: var(--ink); }
.nw3-lead-body h2 a:hover, .nw3-card h3 a:hover, .nw3-panel h3 a:hover { color: var(--accent); }
.nw3-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.nw3-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: var(--nw3-shadow); }
.nw3-card-pic { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: #edf1f7; text-decoration: none; }
.nw3-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw3-card-pic-none { aspect-ratio: auto; height: 104px; }
.nw3-tint-announcements { background: var(--cat-announcements-bg); }
.nw3-tint-auctions { background: var(--cat-auctions-bg); }
.nw3-tint-market { background: var(--cat-market-bg); }
.nw3-tint-research { background: var(--cat-research-bg); }
.nw3-word { color: #5f6c85; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nw3-date { display: flex; flex-direction: column; align-items: center; color: var(--cat-auctions); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.nw3-date b { color: var(--ink); font-size: 1.8rem; line-height: 1.1; }
.nw3-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem 1.4rem 1.4rem; }
.nw3-card h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.32; margin-top: .55rem; }
.nw3-card .nw3-excerpt { flex: 1; font-size: .92rem; }
.nw3-coming { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.8rem; align-items: start; }
.nw3-coming-one { grid-template-columns: minmax(0, 1fr); }
.nw3-panel { border-radius: 16px; background: var(--card); box-shadow: var(--nw3-shadow); padding: 1.6rem 1.7rem; }
.nw3-panel h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.32; margin-top: .85rem; }
.nw3-rarity-img { display: block; padding: .6rem; border-radius: 12px; background: #f5f7fb; }
.nw3-rarity-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.nw3-cal { display: flex; flex-direction: column; gap: 1.05rem; list-style: none; }
.nw3-cal li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .8rem; align-items: start; }
.nw3-cal-date { display: flex; flex-direction: column; align-items: center; padding: .28rem 0; border-radius: 10px; background: var(--cat-auctions-bg); color: var(--cat-auctions); font-size: .66rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.nw3-cal-date b { color: var(--ink); font-size: 1.1rem; }
.nw3-cal-text a { color: var(--navy); font-size: .95rem; font-weight: 700; text-decoration: none; }
.nw3-cal-text a:hover { color: var(--accent); }
.nw3-cal-text small { display: block; color: #6b7891; font-size: .82rem; line-height: 1.4; margin-top: .1rem; }
.nw3-cta { max-width: 68ch; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid #e6ebf3; }
.nw3-cta p:not(.nw3-label) { color: #4f5d78; font-size: .93rem; line-height: 1.6; }
@media (max-width: 960px) {
  .nw3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .nw3-coming { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nw3-lead { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
  .nw3-lead-img { min-height: 210px; }
  .nw3-cards { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .nw3-tabs { gap: .1rem 1.1rem; }
  .nw3-sec-head { margin-top: 2.4rem; }
  .nw3-panel { padding: 1.3rem; }
}
/* ---------- /upcoming-auctions, cards across (the owner's choice, 2026-11-04) ----------
   The same shape as /news: the title on the page itself, plain figures, soft cards with the notes on top, no outlines.
   A sale's own page shares the head; its lot list for Pro is still .up-lot. Examples: design/site-mockups/upcoming-2026-11/. */
.up2 { --up2-shadow: 0 1px 2px rgba(30,47,77,.03), 0 12px 32px rgba(30,47,77,.05); padding-top: 1.8rem; }
.breadcrumbs + .up2 { padding-top: .6rem; }
.up2-head h1, .up2-sale-head h1 { color: var(--navy); font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.up2-head > p { color: #566480; font-size: 1.02rem; line-height: 1.55; margin-top: .55rem; max-width: 70ch; }
.up2-figs { display: flex; flex-wrap: wrap; gap: .4rem 2rem; list-style: none; margin-top: 1.1rem; color: #566480; font-size: .95rem; }
.up2-figs b { color: var(--navy); font-size: 1.3rem; font-weight: 800; margin-right: .2rem; }
.up2-house { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; color: var(--cat-auctions); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.up2-house em { border-radius: 999px; background: var(--cat-auctions-bg); color: var(--cat-auctions); font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: 0; padding: .08rem .55rem; text-transform: none; }
.up2-when { color: #5f6c85; font-size: .9rem; line-height: 1.5; margin-top: .35rem; }
.up2-lots { color: var(--ink); font-size: .95rem; margin-top: .75rem; }
.up2-lots b { font-weight: 800; }
.up2-lots span { color: #6b7891; font-size: .88rem; }
.up2-countries { color: #4f5d78; font-size: .88rem; line-height: 1.65; margin-top: .4rem; }
.up2-countries span { color: #6f7c93; font-size: .8rem; }
.up2-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.up2-actions .gate-tag { margin-left: .3rem; }
/* the Pro lot list: search and filters on one line, the search taking what is left */
.up2 .up-toolbar { flex-wrap: nowrap; }
.up2 .up-toolbar input { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.up2 .up-toolbar select { flex: 0 0 auto; width: 190px; margin-top: 0; }
.up2 .up-toolbar .hint { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.up2 .up-toolbar .hint:empty { display: none; }
@media (max-width: 760px) {
  .up2 .up-toolbar { flex-wrap: wrap; }
  .up2 .up-toolbar input { flex: 1 1 100%; }
  .up2 .up-toolbar select { flex: 1 1 calc(50% - .25rem); width: calc(50% - .25rem); min-width: 0; }
}
.up2-label { color: #6b7891; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.up2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; margin-top: 2rem; }
.up2-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: var(--up2-shadow); }
.up2-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; align-items: center; min-height: 170px; padding: .8rem; background: #eef2f8; text-decoration: none; }
.up2-pics img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 6px; }
.up2-pics-none { grid-template-columns: minmax(0, 1fr); place-items: center; color: #5f6c85; font-size: .86rem; font-weight: 600; }
.up2-body { flex: 1; display: flex; flex-direction: column; padding: 1.3rem 1.4rem 1.4rem; }
.up2-card h2 { font-size: 1.14rem; font-weight: 800; line-height: 1.3; margin-top: .45rem; }
.up2-card h2 a { color: var(--navy); text-decoration: none; }
.up2-card h2 a:hover { color: var(--accent); }
.up2-body .up2-actions { margin-top: auto; padding-top: 1rem; }
.up2-pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.5rem; margin-top: 2.6rem; padding: 1.8rem 2rem; border-radius: 18px; background: var(--card); box-shadow: var(--up2-shadow); }
.up2-pitch > div { flex: 1 1 420px; min-width: 0; }
.up2-pitch h2 { color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: .3rem 0 .7rem; }
.up2-pitch ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; list-style: none; color: #4f5d78; font-size: .92rem; line-height: 1.5; }
.up2-pitch strong { color: var(--ink); }
.up2-sale-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.4rem; align-items: center; }
.up2-sale-head-plain { grid-template-columns: minmax(0, 1fr); }
.up2-sale-head h1 { margin-top: .4rem; }
.up2-desc { color: #566480; line-height: 1.55; margin-top: .7rem; max-width: 66ch; }
.up2-sale-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.up2-sale-pics img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 8px; background: #f3f6fb; }
.up2-panel { margin-top: 2.4rem; padding: 1.8rem 2rem; border-radius: 18px; background: var(--card); box-shadow: var(--up2-shadow); }
.up2-panel h2 { color: var(--navy); font-size: 1.2rem; font-weight: 800; }
.up2-note { color: #6b7891; font-size: .9rem; margin-top: .2rem; }
.up2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .1rem 2rem; margin-top: 1rem; }
.up2-grid a { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid #edf1f7; color: var(--ink); font-size: .93rem; text-decoration: none; }
.up2-grid a:hover span { color: var(--accent); }
.up2-grid b { color: #6b7891; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the one gate box on the site in the light look: this page has no dark banners */
.up2-gate .gate-box { margin-top: 1.8rem; padding: 1.7rem 2rem; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--up2-shadow); color: #4f5d78; text-align: left; }
.up2-gate .gate-box strong { color: var(--navy); }
.up2-gate .gate-box p { color: #4f5d78; }
.up2-gate .gate-actions { justify-content: flex-start; }
.up2-gate .gate-actions .hint { color: #6b7891; }
.up2-gate .gate-actions .btn-outline { background: #fff; color: var(--accent-strong); border-color: var(--accent); }
@media (max-width: 1040px) {
  .up2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up2-sale-head { grid-template-columns: minmax(0, 1fr); }
  .up2-sale-pics { max-width: 380px; }
}
@media (max-width: 680px) {
  .up2-cards { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .up2-pitch, .up2-panel, .up2-gate .gate-box { padding: 1.4rem; }
  .up2-pitch ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- /contact (2026-11-04) ---------- the form beside what helps most; soft panels with no outlines, as on /news */
.ct { padding-top: 1.8rem; }
.ct-head h1 { color: var(--navy); font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ct-head p { color: #566480; font-size: 1.02rem; line-height: 1.55; margin-top: .55rem; max-width: 62ch; }
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.8rem; align-items: start; margin-top: 1.8rem; }
.ct-side { display: flex; flex-direction: column; gap: 1.4rem; }
.ct-panel { padding: 1.7rem 1.9rem; border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px rgba(30,47,77,.03), 0 12px 32px rgba(30,47,77,.05); }
.ct-side .ct-panel { padding: 1.4rem 1.5rem; }
.ct-panel h2 { color: var(--navy); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.ct-side .ct-panel h2 { font-size: 1rem; margin-bottom: .5rem; }
.ct-form label { margin-top: 1.1rem; }
.ct-form input[type=text], .ct-form input[type=email], .ct-form select, .ct-form textarea { width: 100%; padding: .65rem .85rem; margin-top: .3rem; border: 1px solid #d4dcea; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: .97rem; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ct-form [aria-invalid="true"] { border-color: #c2410c; }
.ct-form textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.ct-error { color: #b4380a; font-size: .84rem; margin-top: .3rem; }
.ct-about { color: #5f6c85; font-size: .86rem; margin-top: .6rem; overflow-wrap: anywhere; }
.ct-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; margin-top: 1.3rem; }
.ct-send p { flex: 1 1 220px; color: #6b7891; font-size: .82rem; line-height: 1.4; }
.ct-sent { padding: .6rem 0; }
.ct-sent p { color: #4f5d78; margin: .4rem 0 1rem; line-height: 1.55; }
.ct-helps { display: flex; flex-direction: column; gap: .65rem; list-style: none; color: #4f5d78; font-size: .9rem; line-height: 1.5; }
.ct-helps b { color: var(--ink); }
.ct-more { display: inline-block; margin-top: .9rem; font-size: .9rem; font-weight: 700; text-decoration: none; }
.ct-more:hover { text-decoration: underline; }
.ct-note { color: #5f6c85; font-size: .88rem; line-height: 1.5; margin-top: .4rem; }
.ct-inbox { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.ct-msg { padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.ct-msg-new { border-left: 4px solid var(--accent); }
.ct-msg header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; }
.ct-msg-topic { color: #5f6c85; font-size: .85rem; margin-top: .2rem; overflow-wrap: anywhere; }
.ct-msg-body { margin-top: .6rem; line-height: 1.55; overflow-wrap: anywhere; }
.ct-msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; }
@media (max-width: 900px) { .ct-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ct-two { grid-template-columns: minmax(0, 1fr); } .ct-panel { padding: 1.3rem; } }

/* pictures that open in the shared lightbox (partials/gallery_script) */
[data-zoom], [data-zoom] img { cursor: zoom-in; }
.nw-cover a { display: block; }

/* ---------- features in development (ACCESS_LEVELS level 'admin', 2026-10-30) ----------
   Only the admin ever sees these: partials/dev_banner.php at the top of a page of the feature,
   partials/dev_badge.php beside a button or section of it on an ordinary page. Same hatched
   amber as a country in development mode (.ccard-dev). */
.dev-banner {
  display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: baseline;
  margin: 1rem 0 1.2rem; padding: .7rem 1rem; border-radius: 10px;
  border: 1px dashed #c9a24a; color: var(--amber-ink); font-size: .9rem; line-height: 1.5;
  background:
    repeating-linear-gradient(-45deg, rgba(122,92,21,.07) 0 10px, rgba(122,92,21,0) 10px 20px),
    var(--amber-bg);
}
.dev-banner code { font-size: .85em; background: rgba(255,255,255,.7); padding: 0 .25rem; border-radius: 4px; }
.dev-banner-tag, .dev-badge {
  display: inline-block; flex: none; white-space: nowrap;
  background: var(--amber-ink); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
}
.dev-badge { font-size: .62rem; padding: .1rem .42rem; vertical-align: middle; margin-left: .35rem; cursor: help; }
.header-blue .main-nav > a .dev-badge { background: #f4d58d; color: #3d2d07; }

/* ---------- the search page (2026-11-04): the rules for what it finds are in app/lib/search.php ---------- */
.sr-search { display: flex; gap: .4rem; margin: 1.3rem 0 .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: .4rem; }
.sr-search:focus-within { border-color: #9dc0ff; }
.sr-search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; padding: .55rem .8rem; }
.sr-search input:focus { outline: none; }
.sr-search input::placeholder { color: var(--muted); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-start { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 1.4rem 1.6rem; }
.sr-start h1, .sr-none h1 { color: var(--navy); font-size: 1.3rem; letter-spacing: -.02em; }
.sr-start p, .sr-none p { color: var(--muted); margin-top: .3rem; }
.sr-tries { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.sr-tries a { background: var(--thead); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; color: var(--navy); font-size: .88rem; font-weight: 600; text-decoration: none; }
.sr-tries a:hover { background: var(--accent-soft); border-color: #cfdcf7; }
.sr-none { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 1.4rem 1.6rem; margin-top: .9rem; }
.sr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.sr-chips-label { color: var(--muted); font-size: .84rem; }
.sr-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent-soft); border: 1px solid #cfdcf7; border-radius: 999px; padding: .22rem .65rem; color: var(--accent-strong); font-size: .86rem; font-weight: 600; text-decoration: none; }
.sr-chip:hover { border-color: var(--accent); }
.sr-chip > span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: .7; }
.sr-note { background: var(--thead); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; color: var(--ink); font-size: .88rem; margin-bottom: .8rem; }
.sr-note-warn { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.sr-block { margin-bottom: 1.2rem; }
.sr-block > h2 { color: var(--navy); font-size: 1.05rem; font-weight: 800; margin-bottom: .55rem; }
.sr-cols { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.sr-cols:not(:has(.sr-rail)) { grid-template-columns: minmax(0, 1fr); }
.sr-rail { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: .8rem .9rem; font-size: .88rem; }
.sr-rail > summary { display: none; }
.sr-rail h3 { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: .7rem 0 .25rem; }
.sr-rail h3:first-of-type { margin-top: 0; }
.sr-rail ul { list-style: none; margin: 0; padding: 0; }
.sr-rail li a { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .22rem .45rem; border-radius: 7px; color: var(--navy); text-decoration: none; }
.sr-rail li a:hover { background: var(--thead); }
.sr-rail li a.on { background: var(--navy); color: #fff; }
.sr-rail li a.on small { color: #d5e2f6; }
.sr-rail li small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sr-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .84rem; padding: .3rem .45rem; }
.sr-main { min-width: 0; }
.sr-country { display: flex; align-items: center; gap: .8rem; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: .75rem 1rem; margin-bottom: 1rem; text-decoration: none; }
.sr-country:hover { box-shadow: var(--shadow-hover); }
.sr-flag { width: 44px; height: 30px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(30,47,77,.1); }
.sr-country span { flex: 1; min-width: 0; }
.sr-country b { display: block; color: var(--navy); font-size: 1.05rem; }
.sr-country small { color: var(--muted); font-size: .84rem; }
.sr-country i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; font-weight: 700; }
.sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.sr-head h1, .sr-head h2 { color: var(--navy); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.sr-head span { color: var(--muted); font-size: .84rem; }
.sr-head-sub { margin-top: 1.3rem; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.sr-card { display: flex; flex-direction: column; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; padding-bottom: .65rem; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sr-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.sr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-pic { display: flex; align-items: center; justify-content: center; height: 118px; padding: .55rem; margin-bottom: .5rem; background: linear-gradient(160deg, #f4f7fc, #e6ecf6); }
.sr-pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 3px 10px rgba(30,47,77,.2); }
.sr-card b { color: var(--navy); font-size: .92rem; line-height: 1.25; padding: 0 .75rem; }
.sr-card > span:not(.sr-pic) { color: var(--ink); font-size: .85rem; line-height: 1.3; padding: .1rem .75rem 0; }
.sr-card small { color: var(--muted); font-size: .76rem; line-height: 1.3; padding: .15rem .75rem 0; }
.sr-limit { margin-top: 1rem; }
.sr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; margin-top: 1.2rem; }
.sr-page, .sr-page-step { display: inline-block; min-width: 2.3rem; text-align: center; padding: .38rem .55rem; border-radius: 9px; background: var(--card); border: 1px solid var(--line); color: var(--navy); font-size: .9rem; font-weight: 600; text-decoration: none; }
a.sr-page:hover, .sr-page-step:hover { border-color: #b9c8e2; background: var(--thead); }
.sr-page.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sr-page-gap { color: var(--muted); padding: 0 .2rem; }
@media (max-width: 760px) {
  .sr-cols { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .sr-rail > summary { display: block; cursor: pointer; color: var(--navy); font-weight: 700; }
  .sr-rail[open] > summary { margin-bottom: .5rem; }
  .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .sr-pic { height: 92px; }
}

/* ---------- no photograph yet (option C, 2026-11-04): noImageImg() and the request under it ---------- */
.gallery-none .gallery-main img { cursor: default; width: 100%; max-width: 620px; height: auto; margin: 0 auto; display: block; }
img.no-image { box-shadow: none !important; }
.note-thumb img.no-image { width: 100%; height: 100%; object-fit: contain; }
.no-photo-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; background: var(--accent-soft); border-radius: 12px; padding: .8rem 1rem; margin: .8rem 0 1rem; }
.no-photo-ask > div { flex: 1 1 280px; min-width: 0; }
.no-photo-ask b { color: var(--navy); }
.no-photo-ask p { color: #4f5d73; font-size: .9rem; line-height: 1.45; margin: .15rem 0 0; }


/* ---------- What it's worth (option C, 2026-11-04): partials/price_guide.php ---------- */
.wv-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.wv-controls:empty { display: none; }
.wv-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.wv-chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .26rem .7rem; color: var(--navy); font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer; }
.wv-chip:hover { background: var(--thead); }
.wv-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.wv-conv { background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 12px; padding: .6rem .85rem; margin-bottom: .9rem; color: var(--amber-ink); font-size: .84rem; line-height: 1.45; }
.wv-conv[hidden] { display: none; }
.wv-conv p + p { margin-top: .25rem; }
.wv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.wv-tile { background: var(--thead); border-radius: 12px; padding: .65rem .85rem; min-width: 0; }
.wv-tile-key { background: var(--accent-soft); }
.wv-tile small { display: block; color: #4f5d73; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wv-tile b { display: block; color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wv-tile-key b { color: var(--accent-strong); }
.wv-tile span { display: block; color: #4f5d73; font-size: .76rem; line-height: 1.3; }
.wv-body { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }
.wv-chartcol { flex: 999 1 420px; min-width: 0; }
.wv-chart svg { display: block; max-width: 100%; }
.wv-grid { stroke: var(--line); stroke-width: 1; }
.wv-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wv-band { fill: rgba(30,47,77,.08); }
.wv-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wv-dot { stroke: #fff; stroke-width: 1.5; }
.wv-dot-none { fill: #fff; stroke: #94a3b8; }
.wv-hit { fill: transparent; cursor: pointer; }
.wv-empty { color: var(--muted); padding: 1.5rem; text-align: center; }
.wv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; margin-bottom: .4rem; }
.wv-lg { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; border-radius: 6px; padding: .15rem .35rem; color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.wv-lg:hover { background: var(--thead); }
.wv-lg.off { opacity: .4; text-decoration: line-through; }
.wv-lg i { width: 10px; height: 10px; border-radius: 50%; }
.wv-lg-none { background: #fff; box-shadow: inset 0 0 0 1.5px #94a3b8; }
.wv-lg small { color: var(--muted); }
.wv-check { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .84rem; margin-top: .3rem; cursor: pointer; }
.wv-check[hidden] { display: none; }
.wv-tip { position: absolute; z-index: 60; display: flex; flex-direction: column; background: var(--navy); color: #d5e2f6; border-radius: 8px; padding: .4rem .6rem; font-size: .78rem; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px rgba(15,25,45,.3); }
.wv-tip[hidden] { display: none; }
.wv-tip b { color: #fff; font-size: .92rem; }
.wv-side { flex: 1 1 340px; min-width: 0; }
.wv-side h3 { color: var(--navy); font-size: .92rem; font-weight: 800; margin: .2rem 0 .4rem; }
.wv-side table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.wv-side th { color: var(--muted); font-size: .72rem; font-weight: 700; text-align: left; padding: .25rem .3rem; border-bottom: 1px solid var(--line); }
.wv-side td { padding: .34rem .3rem; border-bottom: 1px solid var(--row); color: var(--ink); }
.wv-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.wv-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; background: var(--accent-soft); border-radius: 10px; padding: .4rem .75rem; margin-bottom: .7rem; color: var(--ink); font-size: .88rem; }
.wv-filter[hidden] { display: none; }
.wv-filter b { color: var(--navy); }
.wv-clear, .wv-more { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .22rem .7rem; color: var(--navy); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.wv-clear:hover, .wv-more:hover { background: var(--thead); }
.wv-hint { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 0 0 .4rem; }
.wv-grade { background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.wv-side tr[data-band] { cursor: pointer; }
.wv-side tr[data-band]:hover td { background: var(--thead); }
.wv-side tr.on td { background: var(--accent-soft); }
.wv-side tr.on .wv-grade { color: var(--navy); font-weight: 800; text-decoration: none; }
.wv-side tr.wv-few td, .wv-side tr.wv-few td b, .wv-side tr.wv-few .wv-grade { color: var(--muted); font-weight: 400; }
.wv-fewnote { color: var(--muted); font-size: .76rem; line-height: 1.4; margin-top: .45rem; }
.wv-resold { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.wv-resold[hidden] { display: none; }
.wv-resold h3 { color: var(--navy); font-size: .92rem; font-weight: 800; margin: 0 0 .15rem; }
.wv-resold ul, .wv-rs-steps { list-style: none; margin: 0; padding: 0; }
.wv-rs { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--row); font-size: .86rem; }
.wv-rs-serial { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wv-rs-serial span { color: var(--muted); font-weight: 400; }
.wv-rs-steps { display: flex; flex-wrap: wrap; gap: .25rem .4rem; }
.wv-rs-steps li { display: inline-flex; flex-direction: column; min-width: 0; }
.wv-rs-steps li + li { position: relative; padding-left: 1.3rem; }
.wv-rs-steps li + li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--muted); }
.wv-rs-steps b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.wv-rs-steps span { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.wv-rs-change { color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wv-more { margin-top: .6rem; }
.wv-foot { color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: .7rem; }
@media (max-width: 960px) {
  .wv-body { flex-direction: column; }
  .wv-side { flex: none; width: 100%; }
  .wv-rs { grid-template-columns: minmax(0, 1fr) auto; }
  .wv-rs-steps { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Pick and variety pages: the owner's twelve changes, 2026-11-05 (examples: design/site-mockups/pick-improvements-2026-11/) ===== */

/* Wider lower sections. The side column floats, and each section is its own block beside it: a section that starts
   beside the column keeps to the narrow width, and one that starts below it takes the full page width. No script, so
   nothing moves after the page loads. collection_item.php keeps the plain grid. */
@media (min-width: 951px) {
  .note-cols-flow { display: flow-root; }
  .note-cols-flow > .note-gallery-cell { float: left; width: calc(100% - 340px - 1.4rem); }
  /* the bottom margin keeps the gap to a section below: a section that clears a float loses its own top margin */
  .note-cols-flow > .note-rail { float: right; width: 340px; margin-left: 1.4rem; margin-bottom: 1.4rem; }
  .note-cols-flow > .note-rest { clear: left; padding-top: 1.4rem; }
  .note-cols-flow > .note-rest > :not(.gate-pair):not([hidden]):not(script):not(style) { display: flow-root; }
  /* the list always starts below the side column, so it always has the full width */
  .note-cols-flow > .note-rest > #varieties-list, .note-cols-flow > .note-rest > #varieties { clear: right; }
}

#variety-filter-clear[hidden] { display: none; }

/* Obverse & Reverse when it has moved into the main column (partials/rail_move.php), matching the sections around it */
.note-cols-flow > .note-rest > .rail-card.rail-moved { margin-top: 1.4rem; padding: 1.3rem 1.5rem 1.5rem; border-radius: 16px; }
.rail-moved > h2 { color: var(--navy); font-size: 1.05rem; font-weight: 800; margin-bottom: .8rem; letter-spacing: -.01em; }
.rail-moved .rail-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.rail-moved .side-box { margin: 0; }
.rail-moved .rail-text { font-size: .92rem; line-height: 1.55; margin: 0; }

/* List / Photos */
.vl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 .9rem; }
.vl-switch { display: inline-flex; padding: 3px; gap: 3px; background: #e6ecf7; border: 1px solid #cdd8ec; border-radius: 10px; }
.vl-switch[hidden] { display: none; }
.vl-switch button { font: inherit; font-size: .88rem; font-weight: 700; color: var(--navy); background: none; border: 0; border-radius: 7px; padding: .36rem 1.15rem; cursor: pointer; }
.vl-switch button:hover { background: #d7e1f4; }
.vl-switch button.on, .vl-switch button.on:hover { background: var(--accent); color: #fff; }
.vl-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the search box sits on the right of the same row; it searches the list, so it goes in the Photos view */
.vl-controls .table-filter { margin: 0 0 0 auto; flex-wrap: nowrap; }
.vl-controls .table-filter-input { width: 400px; max-width: 100%; min-width: 0; }
.vl-controls .table-filter .hint { margin-left: .2rem; }
.vl-view-photos #variety-filter-bar { display: none; }

/* Signature buttons and the icon key above the list */
.vl-sigs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; font-size: .84rem; color: var(--muted); }
.vl-sigs[hidden] { display: none; }
.vl-sigs button { font: inherit; font-size: .82rem; font-weight: 600; color: var(--navy); background: var(--thead); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; cursor: pointer; }
.vl-sigs button i { font-style: normal; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.vl-sigs button:hover { border-color: var(--accent); }
.vl-sigs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vl-sigs button.on i { color: #dbe7fb; }
.vl-key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0 0 .7rem; font-size: .82rem; color: var(--muted); }
.vl-key b { color: var(--ink); font-weight: 600; }
.vl-key span { display: inline-flex; align-items: center; gap: .3rem; }
.vl-key svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }

/* Quiet Hide and Show buttons, so the variety button is the one that stands out */
.btn.sec-fold-btn, .btn.v-group-toggle, .btn.grid-band-toggle, .btn.section-toggle,
.info-section > h2 .btn.sec-fold-btn { background: none; border-color: transparent; color: var(--muted); font-weight: 500; padding: .2rem .3rem; }
.btn.sec-fold-btn:hover, .btn.v-group-toggle:hover, .btn.grid-band-toggle:hover, .btn.section-toggle:hover { background: none; color: var(--accent); }
.btn.sec-fold-btn::after, .btn.v-group-toggle::after, .btn.grid-band-toggle::after, .btn.section-toggle::after { content: " \25B4"; font-size: .85em; }
.btn.sec-fold-btn[aria-expanded="false"]::after, .btn.v-group-toggle[aria-expanded="false"]::after, .btn.grid-band-toggle[aria-expanded="false"]::after, .btn.section-toggle[aria-expanded="false"]::after { content: " \25BE"; }

/* Plain text under the pick title; only the count is a link */
.pick-facts { display: flex; flex-wrap: wrap; align-items: center; margin: .55rem 0 1rem; color: var(--muted); font-size: .95rem; font-weight: 500; }
.pick-facts > * + *::before { content: "\00B7"; display: inline-block; margin: 0 .55rem; color: var(--muted); }
.pick-facts a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* The key facts under a variety's title */
.v-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, auto)); justify-content: start; gap: .7rem 2.2rem; margin: .5rem 0 1.1rem; padding: .85rem 1.15rem; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); }
.v-facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.v-facts dd { margin: 0; font-weight: 600; color: var(--navy); font-size: .96rem; }

.rail-fold-btn { display: none; }
@media (max-width: 560px) {
  /* Each variety is a small stacked card, no sideways scrolling. The hidden states are repeated because the id
     outranks tr.vl-hidden and tr.vl-collapsed. */
  #varieties-list .table-scroll { overflow: visible; }
  #varieties-table, #varieties-table tbody { display: block; width: 100%; min-width: 0; }
  #varieties-table thead { display: none; }
  #varieties-table tr.v-group, #varieties-table tr.v-group > td { display: block; }
  #varieties-table tr.v-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem .6rem; align-items: start; width: 100%; box-sizing: border-box; padding: .8rem .15rem; border-bottom: 1px solid var(--row); }
  #varieties-table tr.vl-hidden, #varieties-table tr.vl-collapsed { display: none; }
  #varieties-table tr.v-row > td { display: block; padding: 0; border: 0; background: none; width: auto; max-width: none; white-space: normal; text-align: left; }
  #varieties-table tr.v-row > td.row-num { display: none; }
  #varieties-table tr.v-row > td.v-var-cell { grid-column: 1; grid-row: 1; }
  #varieties-table tr.v-row > td.v-date:not(.v-var-cell) { grid-column: 2; grid-row: 1; text-align: right; color: var(--muted); font-size: .86rem; padding-top: .35rem; white-space: nowrap; }
  #varieties-table tr.v-row > td.v-sig, #varieties-table tr.v-row > td.v-comment-cell, #varieties-table tr.v-row > td.v-rec { grid-column: 1 / -1; }

  .vl-controls .table-filter { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .vl-controls .table-filter-input { flex: 1 1 100%; width: auto; }

  /* A shorter top of the page, on every page: the header and breadcrumb are shared. The search box takes what is
     left of its row; a logged-in member's extra links wrap beneath it. The Admin link is still in the footer. */
  .top-strip-inner { flex-wrap: nowrap; overflow-x: auto; gap: 1.05rem; white-space: nowrap; scrollbar-width: none; }
  .main-nav { width: 100%; margin-left: 0; gap: .55rem; }
  .main-nav .nav-search { flex: 1 1 150px; min-width: 0; }
  .main-nav .nav-search input { width: 100%; min-width: 0; }
  .main-nav > a { white-space: nowrap; flex: none; }
  .admin-link { display: none; }
  .breadcrumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; margin: .7rem 0 .3rem; scrollbar-width: none; }
  .breadcrumbs a { flex: none; }

  /* Side cards folded until tapped (partials/rail_fold.php) */
  .rail-fold > h2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; cursor: pointer; }
  .rail-fold-btn { display: inline; font: inherit; font-size: .8rem; color: var(--muted); background: none; border: 0; padding: 0 .1rem; cursor: pointer; }
  .rail-fold.rail-open .rail-fold-btn { transform: rotate(180deg); }
  .rail-fold:not(.rail-open) > *:not(h2) { display: none; }
  .rail-fold.rail-open > h2 { margin-bottom: .6rem; }
  .note-rail { gap: .55rem; }
}

/* Our records (2026-11-05): /our-records, the overview and the Pro page */
.ov { display: grid; gap: 1.3rem; margin-top: 1.4rem; min-width: 0; }
.ov h2 { color: var(--navy); font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.ov-head h1 { margin-bottom: .3rem; }
.ov-cta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.ov-figs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.ov-figs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-figs > div { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: .8rem .9rem; }
.ov-figs b { display: block; color: var(--navy); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ov-figs b::first-letter { text-transform: uppercase; }
.ov-figs span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.3; margin-top: .15rem; }
.ov-figs small { display: block; color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.ov-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 1.2rem 1.4rem 1.4rem; min-width: 0; scroll-margin-top: 1rem; }
.ov-lead { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 0 .8rem; max-width: 62rem; }
.ov-h3 { color: var(--navy); font-size: .95rem; font-weight: 800; margin: 1rem 0 .4rem; }
.ov-text { font-size: .9rem; color: var(--ink); margin: 0 0 .4rem; }
.ov-sample-in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-top: .5rem; }
.ov-sample-in img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ov-sample-name { font-size: 1rem; margin: 0 0 .45rem; }
.ov-chain { list-style: none; margin: 0 0 .5rem; padding: 0; border-top: 1px solid var(--row); }
.ov-chain li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--row); font-size: .92rem; }
.ov-chain-y { font-weight: 800; color: var(--navy); }
.ov-chain-p { font-weight: 700; white-space: nowrap; }
.ov-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: .5rem; }
.ov-kind { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: .85rem .95rem; }
.ov-kind h3 { color: var(--navy); font-size: .95rem; font-weight: 800; margin: 0 0 .3rem; }
.ov-kind p { color: var(--muted); font-size: .85rem; line-height: 1.42; margin: 0; }
.ov-tag-pro, .ov-tag-free { display: inline-block; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .03rem .45rem; vertical-align: .08em; margin-left: .15rem; }
.ov-tag-pro { background: var(--accent-soft); color: var(--accent); }
.ov-tag-free { background: #e8f4ed; color: var(--green); }
.ov-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ov-chips li { background: var(--thead); border-radius: 999px; padding: .2rem .7rem; font-size: .86rem; }
.ov-pro { background: var(--accent-soft); border-radius: 16px; padding: 1.2rem 1.4rem 1.3rem; }
.ov-pro ul { margin: .4rem 0 0 1.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.6rem; font-size: .92rem; }
.ov-pro b { font-weight: 600; }
.ov-pro .hint { margin-top: .6rem; }
.ov-switch { margin-top: .9rem; text-align: right; }
.ov-jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.ov-jump a { background: var(--card); box-shadow: var(--shadow); border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.ov-jump a:hover { color: var(--accent); }
.ov-table { width: 100%; }
.ov-num-cell b { font-weight: 700; }
.ov-table td:last-child { white-space: nowrap; }
.ov .table-filter [data-filter-clear][hidden] { display: none; }
.ov-small { font-size: .82rem; color: var(--muted); }
.ov-show-sm { display: none; }
.ov-bar { display: block; height: 6px; background: var(--row); border-radius: 3px; overflow: hidden; min-width: 80px; margin-top: .2rem; }
.ov-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ov-srcs { list-style: none; margin: 0; padding: 0; }
.ov-srcs li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .3rem 1.2rem; padding: .5rem 0; border-bottom: 1px solid var(--row); align-items: baseline; }
.ov-srcs b { font-size: .93rem; font-weight: 600; }
.ov-srcs span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.ov-srcs p { color: var(--ink); font-size: .86rem; line-height: 1.4; margin: 0; }
.ov-decades { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.ov-decades li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 5rem; gap: .6rem; align-items: center; padding: .22rem 0; font-size: .9rem; }
.ov-decades .ov-bar { height: 12px; margin: 0; border-radius: 4px; }
.ov-decades .ov-bar i { border-radius: 4px; }
.ov-decades b { text-align: right; }
@media (max-width: 1040px) { .ov-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-figs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .ov-figs, .ov-figs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-kinds, .ov-sample-in, .ov-srcs li, .ov-pro ul { grid-template-columns: minmax(0, 1fr); }
  .ov-card, .ov-pro { padding: 1rem; }
  .ov-table .ov-hide-sm { display: none; }
  .ov-table { font-size: .84rem; }
  .varieties-table.ov-table thead th { white-space: normal; letter-spacing: 0; padding: .4rem .3rem; font-size: .7rem; line-height: 1.2; }
  .varieties-table.ov-table td { white-space: normal; padding: .45rem .3rem; }
  .varieties-table.ov-table td:last-child { white-space: nowrap; }
  .ov-show-sm { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; margin-top: .1rem; }
  .ov-bar { min-width: 50px; }
}
.figs-more { margin: .55rem 0 0; font-size: .95rem; font-weight: 700; }
.figs-more a { color: var(--accent); text-decoration: none; }
.figs-more a:hover { text-decoration: underline; }

/* The home page cards, layout C (2026-11-05): .feat-list beside one picture. .feat-grid above is kept for the old examples. */
.feats-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .75rem; }
.feats-head h2 { color: var(--navy); font-size: 1.3rem; letter-spacing: -.02em; margin: 0; }
.feats-jump { font-size: .9rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.feats-jump:hover { text-decoration: underline; }
.feat-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9rem; align-items: stretch; }
.feat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; align-content: start; }
.feat-item { font: inherit; text-align: left; background: var(--thead); border: 0; border-radius: 10px; padding: .42rem .7rem; cursor: pointer; line-height: 1.25; }
.feat-item b { display: block; color: var(--navy); font-size: .9rem; }
.feat-item span { display: block; color: var(--muted); font-size: .76rem; }
.feat-item:hover { background: var(--accent-soft); }
.feat-item.on { background: var(--accent); }
.feat-item.on b, .feat-item.on span { color: #fff; }
.feat-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feat-stage { min-width: 0; }
.feat-big { width: 100%; height: 100%; position: relative; }
.feat-big[hidden] { display: none; }
.feat-big .feat-mini { height: 100%; min-height: 268px; max-height: 300px; }
.feat-big .feat-mini .shot { zoom: .62; }
.feat-enlarge { position: absolute; right: .55rem; bottom: .5rem; background: var(--accent); color: #fff; font-size: .72rem; font-style: normal; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; }
@media (max-width: 1040px) { .feat-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .feat-item span { display: none; }
  .feat-big .feat-mini { min-height: 190px; flex: 1 1 auto; }
  .feat-big .feat-mini .shot { zoom: .5; }
}
/* new home page cards */
.hc-prov { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.hc-prov img { width: 42%; max-width: 280px; height: auto; border-radius: 6px; display: block; }
.hc-serial { font: 800 1.15rem/1.2 var(--mono, ui-monospace, Menlo, monospace); color: var(--navy); margin: 0; }
.hc-span { color: var(--muted); font-size: .82rem; margin: .15rem 0 0; }
.hc-chain { list-style: none; margin: 0 0 .8rem; padding: 0; border-top: 1px solid var(--row); }
.hc-chain li { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid var(--row); font-size: .84rem; line-height: 1.35; }
.hc-year { font-weight: 800; color: var(--navy); }
.hc-price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.hc-tiles-2.wv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-tiles-3.wv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .7rem; }
.hc-h { font-size: .8rem; font-weight: 800; color: var(--navy); margin: .1rem 0 .35rem; }
.hc-colls { display: flex; flex-wrap: wrap; gap: .3rem; }
.hc-coll { background: var(--thead); border-radius: 999px; padding: .12rem .55rem; font-size: .74rem; color: var(--ink); }
.hc-coll i { font-style: normal; color: var(--muted); }
.hc-ups { list-style: none; margin: 0; padding: 0; }
.hc-up { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; gap: .7rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--row); }
.hc-up:first-child { padding-top: 0; }
.hc-up > img { width: 100%; height: auto; border-radius: 5px; display: block; }
.hc-up-main p { margin: 0 0 .2rem; }
.hc-up-title { font-weight: 700; color: var(--navy); font-size: .84rem; line-height: 1.3; }
.hc-up-facts { font-size: .76rem; color: var(--muted); }
.hc-up .up-seen { font-size: .74rem; line-height: 1.35; }
.hc-up-side { font-size: .78rem; display: grid; gap: .35rem; }
.hc-up-side small { display: block; color: var(--muted); font-size: .68rem; }
.hc-up-side b { color: var(--navy); }
.hc-up-side .hint { display: block; font-size: .68rem; }
.hc-up-side .up-vs { display: inline-block; font-size: .66rem; margin-top: .15rem; }
.hc-beyond { list-style: none; margin: 0; padding: 0; }
.hc-beyond li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .65rem; align-items: start; padding: .45rem 0; border-bottom: 1px solid var(--row); }
.hc-beyond li:first-child { padding-top: 0; }
.hc-b-pic img { width: 100%; height: auto; max-height: 76px; object-fit: contain; object-position: left top; display: block; border-radius: 4px; }
.hc-b-main { font-size: .8rem; line-height: 1.35; }
.hc-kind { display: inline-block; background: #e6ecf7; color: var(--navy); font-weight: 700; font-size: .68rem; border-radius: 5px; padding: .03rem .4rem; }
.hc-b-yr { color: var(--navy); }
.hc-b-text { color: var(--ink); }
.hc-b-note { color: var(--muted); font-size: .74rem; }
.hc-b-credit { color: var(--muted); font-size: .66rem; }
.hc-figs { display: grid; gap: .6rem; }
.hc-figs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-fig { margin: 0; background: var(--thead); border-radius: 8px; padding: .35rem; }
.hc-fig img { display: block; width: 100%; height: 118px; object-fit: contain; background: #fff; border-radius: 5px; }
.hc-fig figcaption { font-size: .74rem; line-height: 1.32; color: var(--muted); margin-top: .3rem; }
.hc-fig figcaption b { color: var(--navy); }
.hc-fake .hc-fig:first-child figcaption b { color: var(--danger); }
.hc-mt { margin-top: .85rem; }
.hc-mt0 { margin-top: .65rem; }
.hc-mt0:first-child { margin-top: 0; }
.hc-story { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: .75rem; align-items: start; }
.hc-story img { width: 100%; height: auto; border-radius: 5px; display: block; }
.hc-story p { font-size: .8rem; line-height: 1.45; color: var(--ink); margin: 0; }
@media (max-width: 640px) {
  .hc-up { grid-template-columns: 90px minmax(0, 1fr); }
  .hc-up-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .hc-figs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-story { grid-template-columns: minmax(0, 1fr); }
  .hc-tiles-3.wv-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* The home page cards as images (HOME_CARDS_AS_IMAGES). The small one shows the top of the picture. */
.feat-big .feat-mini > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feat-dialog .feat-full { display: block; width: 100%; height: auto; border-radius: 10px; }

/* The Pro page (2026-11) */
.pv { display: grid; gap: 1.5rem; margin-top: 1.5rem; min-width: 0; }
.pv h2 { color: var(--navy); font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.pv-sub { color: var(--muted); font-size: .96rem; line-height: 1.5; margin: 0 0 .85rem; max-width: 60rem; }
.pv-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.8rem; align-items: center; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 1.8rem 1.9rem; }
.pv-hero h1 { color: var(--navy); font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; margin: .25rem 0 .7rem; }
.pv-lead { color: var(--ink); font-size: 1.04rem; line-height: 1.55; margin: 0; }
.pv-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .55rem; }
.pv-hero .pro-status { margin-top: .9rem; }
.pv-pic { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--thead); cursor: zoom-in; overflow: hidden; }
.pv-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pv-pic > em { position: absolute; right: .5rem; bottom: .45rem; background: var(--accent); color: #fff; font-size: .7rem; font-style: normal; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; }
.pv-hero-pic .pv-pic { height: 320px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.pv-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.pv-figs > div { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: .8rem .95rem; }
.pv-figs b { display: block; color: var(--navy); font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pv-figs span { display: block; color: var(--muted); font-size: .84rem; margin-top: .12rem; }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.pv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.pv-card > .pv-pic { height: 190px; flex: none; }
.pv-grid-4 .pv-card > .pv-pic { height: 140px; }
.pv-card-text { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.pv-card h3 { color: var(--navy); font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; }
.pv-h3-next { margin-top: .8rem !important; }
.pv-card p { color: var(--ink); font-size: .88rem; line-height: 1.45; margin: 0; }
.pv-grid-4 .pv-card p { color: var(--muted); font-size: .85rem; }
.pv-card small { color: var(--accent-strong); font-size: .78rem; font-weight: 700; margin-top: .5rem; }
.pv-card-go { background: var(--accent-soft); box-shadow: none; }
.pv-card-go .btn { margin-top: .8rem; }
.pv-compare { padding: 1.2rem 1.4rem 1.3rem; }
.pv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pv-table thead th { color: var(--navy); font-size: .84rem; font-weight: 800; text-align: center; padding: .4rem .5rem .55rem; }
.pv-table tbody th { font-weight: 500; text-align: left; color: var(--ink); padding: .46rem .7rem .46rem 0; line-height: 1.3; }
.pv-table td { text-align: center; padding: .46rem .5rem; color: var(--muted); font-size: .84rem; width: 14%; }
.pv-table tbody tr { border-top: 1px solid var(--row); }
.pv-pro-col { background: var(--accent-soft); color: var(--navy) !important; font-weight: 700; }
.pv-table thead .pv-pro-col { border-radius: 8px 8px 0 0; }
.pv-yes { color: var(--green); font-weight: 800; font-size: 1rem; }
.pv-no { color: #b6bfcc; }
.pv-faq { margin-top: 0; }
@media (max-width: 1040px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pv-hero { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; } .pv-hero-pic .pv-pic { height: auto; } .pv-hero-pic .pv-pic > img { height: auto; } }
@media (max-width: 640px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .pv-grid-4 .pv-card > .pv-pic { height: 100px; }
  .pv-grid-4 .pv-card p { display: none; }
  .pv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-compare { padding: 1rem .8rem; }
  .pv-table { font-size: .82rem; }
  .pv-table thead th { font-size: .72rem; padding: .3rem .15rem .45rem; }
  .pv-table td { font-size: .72rem; padding: .4rem .15rem; width: 17%; }
}
@media (min-width: 1041px) { .pv-grid > .pv-card-go:nth-child(3n+2) { grid-column: span 2; } }

/* the museum and published records beside a Sales history count (2026-11-05) */
.sh-records{font-size:.62em;font-weight:500;color:var(--muted,#667);margin-left:.35em;white-space:normal}

/* ---------- Terms, Privacy and Refund pages (2026-11-06, views/terms.php, privacy.php, refunds.php, policies.php) ---------- */
.legal-page { max-width: 760px; margin: 1.4rem 0 2.4rem; }
.legal-page h1 { margin-bottom: .6rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem; }
.legal-tab { display: inline-block; padding: .3rem .75rem; border: 1px solid #d5dbe7; border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--navy, #1b2b4b); background: #fff; }
.legal-tab:hover { border-color: #9fb0cf; }
.legal-tab.is-here { background: var(--navy, #1b2b4b); border-color: var(--navy, #1b2b4b); color: #fff; }
.legal-updated { color: #5f6c85; font-size: .88rem; margin-bottom: 1rem; }
.legal-page section { padding: 1rem 0; border-top: 1px solid #e6eaf2; }
.legal-page h2 { font-size: 1.12rem; margin-bottom: .45rem; }
.legal-page p { line-height: 1.6; }
.legal-page p + p { margin-top: .55rem; }
.legal-page ul { margin: .4rem 0 0 1.2rem; display: flex; flex-direction: column; gap: .4rem; line-height: 1.55; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .93rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid #e6eaf2; line-height: 1.5; }
.legal-table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #5f6c85; }
.legal-table td:first-child { width: 55%; }
.legal-note { color: #5f6c85; font-size: .9rem; margin-top: .7rem; }
.legal-index { list-style: none; margin: 0 !important; gap: 0 !important; }
.legal-index li { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 0; border-top: 1px solid #e6eaf2; }
.legal-index span { color: #5f6c85; font-size: .92rem; }
mark.legal-missing { background: #fff1a8; color: #5b4500; padding: 0 .2rem; border-radius: 3px; }
.checkout-legal { margin-top: .8rem; line-height: 1.5; }
@media (max-width: 560px) {
  .legal-table thead { display: none; }
  .legal-table tr { display: block; border-bottom: 1px solid #e6eaf2; padding: .4rem 0; }
  .legal-table td { display: block; width: auto !important; border: 0; padding: .2rem 0; }
}