/* ==========================================================================
   Coin collection catalogue
   --------------------------------------------------------------------------
   Direction: a Victorian coin cabinet. Pages are set on a cool paper grey;
   photographs sit in deep slate "trays" the way coins sit in a cabinet, since
   that is genuinely how they read best. The accent is verdigris -- the patina
   copper takes -- rather than the usual gold, and the one flourish is the
   milled-edge rule borrowed from the edge of a coin.

   The reference code is the hero: it is the collector's own identifier for the
   coin, so it is set large in tabular monospace and everything else defers.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --ground:        #eceeec;   /* page */
  --surface:       #f7f8f7;   /* cards, panels */
  --surface-sunk:  #e2e5e3;
  --tray:          #1d2426;   /* behind photographs */
  --tray-edge:     #101516;

  --ink:           #171b1c;
  --ink-soft:      #4a5354;
  --ink-faint:     #7b8484;

  --rule:          #cdd2cf;
  --rule-strong:   #aab2ae;

  --verdigris:     #2f7c6b;
  --verdigris-dim: #d9e8e3;
  --verdigris-ink: #1c4f44;
  --oxide:         #8a5d3b;   /* used only for destructive actions */

  --focus:         #2f7c6b;

  --font-display: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino,
                  "URW Palladio L", Georgia, serif;
  --font-body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                  Menlo, Consolas, monospace;

  --step: 0.25rem;
  --gutter: 1rem;
  --radius: 3px;               /* coins are round; the furniture is not */
  --shadow: 0 1px 2px rgb(16 21 22 / 0.06), 0 6px 20px -12px rgb(16 21 22 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:       #14191a;
    --surface:      #1b2122;
    --surface-sunk: #232a2b;
    --tray:         #0e1213;
    --tray-edge:    #070a0a;

    --ink:          #e6eae9;
    --ink-soft:     #a6b0af;
    --ink-faint:    #788483;

    --rule:         #2c3435;
    --rule-strong:  #3c4546;

    --verdigris:     #55a692;
    --verdigris-dim: #1c2f2b;
    --verdigris-ink: #8fcfbd;
    --oxide:         #c08457;

    --focus:         #55a692;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px -12px rgb(0 0 0 / 0.8);
  }
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verdigris-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--verdigris); }

code { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.muted { color: var(--ink-faint); }

/* --- milled edge ---------------------------------------------------------- */
/* The reeding on the edge of a struck coin, used as a rule. Sparingly. */

.milled, .coin__head::after {
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg, var(--rule-strong) 0 1px, transparent 1px 4px
  );
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0.6rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand nav" "search search";
  gap: 0.5rem 1rem;
  align-items: center;
}

.masthead__brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}

/* A struck coin in profile: ring plus rim. */
.masthead__mark {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--verdigris);
  box-shadow: inset 0 0 0 2px var(--ground), inset 0 0 0 3px var(--verdigris);
  flex: none;
}

.masthead__search { grid-area: search; display: flex; }
.masthead__search input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface); color: var(--ink);
}
.masthead__search button {
  border: 1px solid var(--rule); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-sunk); color: var(--ink-soft);
  padding: 0 0.7rem; cursor: pointer;
}
.masthead__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.masthead__nav {
  grid-area: nav;
  /* Wraps because signing in adds a fourth item (Quick find) and a narrow
     phone has no room for four on one line. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.4rem 0.75rem;
  font-size: 0.875rem;
}
.masthead__nav a { color: var(--ink-soft); text-decoration: none; }
.masthead__nav a.button { color: #fff; }
.masthead__nav a:hover { color: var(--verdigris); text-decoration: underline; }
.masthead__nav a.button:hover { color: #fff; }

@media (min-width: 42rem) {
  .masthead__inner {
    grid-template-columns: auto minmax(10rem, 22rem) 1fr;
    grid-template-areas: "brand search nav";
    padding: 0.75rem var(--gutter);
  }
  .masthead__nav { justify-content: flex-end; }
  .masthead__brand { font-size: 1.15rem; }
}

/* --- shell ---------------------------------------------------------------- */

.page { max-width: 1180px; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }
body.bare .page { max-width: none; padding: 0; }

.footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem var(--gutter);
  color: var(--ink-faint); font-size: 0.8rem; text-align: center;
}

.flashes { max-width: 1180px; margin: 1rem auto 0; padding: 0 var(--gutter); }
.flash {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--verdigris);
  background: var(--verdigris-dim); color: var(--verdigris-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
}
.flash--error {
  border-left-color: var(--oxide);
  background: color-mix(in srgb, var(--oxide) 12%, var(--surface));
  color: var(--ink);
}

.section-head { margin: 2.5rem 0 1rem; }
.section-head:first-child { margin-top: 0; }
.section-head__note { color: var(--ink-faint); font-size: 0.875rem; margin: 0.25rem 0 0; }

/* The striking's inscriptions, under an Issue heading in the card view. The
   card shows no description of either face, so there is no column to sit above
   as there is in the list -- they read as a second line instead. Letter-spaced
   so an inscription is recognisable as struck lettering at a glance. */
.section-head__legends {
  margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em;
}
.section-head__legend-side {
  font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); margin-right: 0.3rem;
}

/* --- buttons and small controls ------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--verdigris);
  border-radius: var(--radius);
  background: var(--verdigris); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.button:hover { background: var(--verdigris-ink); border-color: var(--verdigris-ink); color: #fff; }
.button--ghost { background: transparent; color: var(--verdigris-ink); }
.button--ghost:hover { background: var(--verdigris-dim); color: var(--verdigris-ink); }
.button--danger { background: transparent; border-color: var(--oxide); color: var(--oxide); }
.button--danger:hover { background: var(--oxide); color: #fff; border-color: var(--oxide); }
.button--small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.button--block { width: 100%; }

.linklike {
  font: inherit; font-size: 0.875rem;
  background: none; border: 0; padding: 0;
  color: var(--verdigris-ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 0.18em;
}
.linklike--danger { color: var(--oxide); }
.inline-form { display: inline; }

/* --- form furniture -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.field > label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); }

.field input, .field select, .field textarea,
.values-grid input, .table input, .table select {
  font: inherit; font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  min-width: 0; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--verdigris); }

.field__hint { font-size: 0.78rem; color: var(--ink-faint); margin: 0; }
.field__error { font-size: 0.8rem; color: var(--oxide); margin: 0; font-weight: 500; }

.checkbox {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; margin-bottom: 0.75rem;
}
.checkbox input { width: auto; }

.form-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem;
  margin: 0 0 1.5rem;
}
.panel > legend, .panel > h2 {
  font-family: var(--font-display); font-size: 1.05rem;
  padding: 0 0.4rem; margin-left: -0.4rem;
}
.panel__note { font-size: 0.85rem; color: var(--ink-faint); margin: 0.4rem 0 1rem; }
.panel__subhead {
  font-family: var(--font-display); font-size: 0.95rem;
  margin: 1.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.two-up, .three-up, .four-up { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .two-up { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .three-up { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .four-up { grid-template-columns: repeat(4, 1fr); } }

/* --- gallery -------------------------------------------------------------- */

.gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.gallery__count { color: var(--ink-faint); font-size: 0.875rem; margin: 0; }
.gallery__count .linklike { margin-left: 0.5rem; }

/* How the collection is read: grid or table, and whether it is broken into
   groups. Plain links, so a switch is one click and survives with no JS. */
.viewbar {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
}
.viewbar__set {
  display: flex; align-items: center; gap: 0.15rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0.15rem;
}
.viewbar__label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600; padding: 0 0.35rem;
}
.viewbar__option {
  font-size: 0.8rem; text-decoration: none; color: var(--ink-soft);
  padding: 0.25rem 0.55rem; border-radius: 2px;
}
.viewbar__option:hover { color: var(--ink); background: var(--surface-sunk); }
/* The house "this is the one" treatment, as on a held grade. */
.viewbar__option--on {
  background: var(--verdigris-dim); color: var(--verdigris-ink); font-weight: 700;
}

/* A group heading, above each run of cards. */
.group-head { margin-top: 1.75rem; }
.group-head:first-of-type { margin-top: 0.5rem; }

.filters {
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
}
.filters__summary {
  cursor: pointer; padding: 0.7rem 0.9rem;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.5rem;
}
.filters__badge {
  background: var(--verdigris); color: #fff;
  font-size: 0.7rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 999px;
}
.filters__form {
  padding: 0 0.9rem 0.9rem;
  display: grid; gap: 0 1rem;
  border-top: 1px solid var(--rule); padding-top: 0.9rem;
}
.filters__actions { display: flex; gap: 0.6rem; align-items: center; }

@media (min-width: 40rem) {
  .filters__form { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  /* One row across at desktop widths. The summary stays visible at every
     width: a closed <details> hides its contents in a way CSS cannot reliably
     override, so hiding the control that opens it would strand the filters. */
  /* Search gets the double track; every other field an equal one; the actions
     take what they need. Counted from the markup -- seven fields today -- so
     adding a field means adding a track. */
  .filters__form { grid-template-columns: 2fr repeat(6, 1fr) auto; align-items: end; }
  .filters__actions { padding-bottom: 1rem; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
}
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.25rem; } }

.card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.card:hover { border-color: var(--verdigris); transform: translateY(-2px); box-shadow: var(--shadow); }

.card__frame {
  position: relative; display: block;
  aspect-ratio: 1; background: var(--tray);
  background-image: radial-gradient(circle at 50% 45%, #2a3335 0%, var(--tray) 70%);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }
.card__frame-empty {
  position: absolute; inset: 22%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, #fff 22%, transparent);
}
.card__grade { position: absolute; left: 0.4rem; bottom: 0.4rem; }

/* A reference with no example held. Marked rather than dimmed to nothing: it
   is a coin that exists, and one still wanted. */
.card--wanted .card__frame { background-image: none; background: var(--surface-sunk); }
.card--wanted .card__frame img { opacity: 0.9; }
.card__wanted {
  position: absolute; left: 0.4rem; bottom: 0.4rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff;
  padding: 0.1rem 0.35rem; border-radius: 2px;
}
.card__count {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff;
  padding: 0.1rem 0.35rem; border-radius: 2px;
}
.card__draft {
  position: absolute; right: 0.4rem; top: 0.4rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--oxide); color: #fff; padding: 0.1rem 0.35rem; border-radius: 2px;
}

.card__body { padding: 0.55rem 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; }
.card__reference {
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.card__type { font-size: 0.8rem; color: var(--ink-soft); }
.card__year { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.card__year em { font-style: normal; font-family: var(--font-display); }

.empty {
  padding: 3rem 1rem; text-align: center; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}

/* --- grade chips ---------------------------------------------------------- */
/* One ramp from worn grey to bright patina -- the colour carries the grade,
   so it is data rather than decoration. */

.grade-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
  padding: 0.25rem 0.4rem; border-radius: 2px;
  background: #6d7877; color: #fff;
  white-space: nowrap;
}
.grade-chip--vg      { background: #77817f; }
.grade-chip--f       { background: #6a7a76; }
.grade-chip--f-plus  { background: #5d746e; }
.grade-chip--vf      { background: #4e7167; }
.grade-chip--vf-plus { background: #427161; }
.grade-chip--ef      { background: #33745f; }
.grade-chip--ef-plus { background: #257a5f; }
.grade-chip--unc     { background: #16805e; }
.grade-chip--bu      { background: #0c8763; color: #fff; }
.grade-chip--fdc     { background: #0b5c46; box-shadow: inset 0 0 0 1px #7fd8bd; }

/* --- coin page: the ticket ------------------------------------------------- */

.coin__head {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
/* Milled edge along the foot of the ticket. */
.coin__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.coin__eyebrow {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin: 0 0 0.5rem;
}
.coin__eyebrow a { color: inherit; text-decoration: none; }
.coin__eyebrow a:hover { color: var(--verdigris); }
.coin__eyebrow span { margin: 0 0.4em; }

.coin__reference {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3rem);
  font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1; margin: 0;
}
.coin__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.coin__roman {
  font-variant: small-caps; letter-spacing: 0.06em;
  color: var(--verdigris-ink); margin-left: 0.4rem;
}

.draft-note {
  margin: 0.6rem 0 0; font-size: 0.8rem; font-weight: 600;
  color: var(--oxide);
}

/* Each segment of the reference, spelled out. */
.segments {
  margin: 1.1rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
}
@media (min-width: 34rem) { .segments { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .segments { grid-template-columns: repeat(5, auto); justify-content: start; gap: 0 2rem; } }

.segment dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.segment dd { margin: 0; font-size: 0.9rem; }
.segment__note { display: block; font-size: 0.78rem; color: var(--ink-faint); font-style: italic; }
.segments__note {
  margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: 0.6rem;
}
.segment code {
  font-weight: 700; font-size: 0.95em;
  background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 2px;
  margin-right: 0.2em;
}

/* What the striking says about the coin itself, as against what the reference
   says about where it sits. Auto-filled rather than the five fixed columns
   above, because only what is recorded is rendered. */
.segments--struck {
  grid-template-columns: repeat(auto-fit, minmax(7rem, max-content));
  justify-content: start; gap: 0.7rem 2rem;
}
@media (min-width: 34rem) {
  .segments--struck { grid-template-columns: repeat(auto-fit, minmax(7rem, max-content)); }
}

/* The inscriptions struck on each face. Set in the mono face because they are
   quoted lettering, not prose about it. */
.legends {
  margin: 1.1rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
}
@media (min-width: 34rem) { .legends { grid-template-columns: 1fr 1fr; } }
.legend dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.legend dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.02em; color: var(--ink-soft);
}

/* How the standard catalogues cite this reference. Same typography as the
   segments above, but auto-filled rather than a fixed five columns: the list
   of catalogues is editable and grows. */
.cat-refs {
  margin: 0.9rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.cat-ref dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.cat-ref dd { margin: 0; font-size: 0.9rem; }
.cat-ref code {
  font-weight: 700; font-size: 0.95em;
  background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 2px;
}

/* --- plates (the photographs) ---------------------------------------------- */

.plates { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 48rem) { .plates { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.plate { margin: 0; }

.plate__frame {
  display: block; width: 100%; padding: 0; border: 0;
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
  background: var(--tray);
  background-image: radial-gradient(circle at 50% 42%, #2c3639 0%, var(--tray) 62%, var(--tray-edge) 100%);
  cursor: zoom-in;
}
.plate__frame img { width: 100%; height: 100%; object-fit: contain; }

.plate__frame--empty {
  display: grid; place-items: center; cursor: default;
  color: #7d8a89; font-size: 0.85rem;
}

.plate__zoom-hint {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem; border-radius: 2px;
  background: rgb(0 0 0 / 0.55); color: #fff;
  opacity: 0.85; transition: opacity 140ms ease;
}
.plate__frame:hover .plate__zoom-hint { opacity: 1; }
.plate__zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.plate__caption { margin: 0.75rem 0 0; }
.plate__label {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint);
  margin: 0 0 0.35rem;
}
.plate__caption p { font-size: 0.92rem; color: var(--ink-soft); }
.plate__credit { font-size: 0.78rem !important; color: var(--ink-faint) !important; font-style: italic; }

/* --- condition chart: a measuring scale ------------------------------------ */

.chart-block { margin-bottom: 2.5rem; }

.chart {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.chart__step {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  grid-template-areas: "grade name value" "grade badge mine";
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--rule);
}
.chart__step:first-child { border-top: 0; }

.chart__grade {
  grid-area: grade;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ink-soft);
}
.chart__name  { grid-area: name; font-size: 0.9rem; }
.chart__value {
  grid-area: value;
  font-family: var(--font-mono); font-size: 0.95rem;
  font-variant-numeric: tabular-nums; text-align: right;
}
/* "not catalogued" has to sit on one line inside a chart column, which is
   only about 78px wide once the scale is ten across. */
.chart__unknown {
  color: var(--ink-faint);
  /* Body face, not the monospace it would inherit from .chart__value: this is
     a label rather than a figure, and mono is far too wide to fit the column. */
  font-family: var(--font-body);
  font-size: 0.72rem;
  white-space: nowrap;
}
.chart__badge {
  grid-area: badge; justify-self: start;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--verdigris-ink); font-weight: 700;
}
.chart__mine {
  grid-area: mine; justify-self: end; text-align: right;
  font-size: 0.75rem; color: var(--ink-soft);
}
.chart__mine-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.chart__mine strong { font-family: var(--font-mono); font-size: 0.9rem; }

.chart__step--below { color: var(--ink-faint); background: var(--surface-sunk); }
.chart__step--below .chart__grade { color: var(--ink-faint); }
.chart__step--held {
  background: var(--verdigris-dim);
  box-shadow: inset 3px 0 0 var(--verdigris);
}
.chart__step--held .chart__grade,
.chart__step--held .chart__name { color: var(--verdigris-ink); font-weight: 700; }

.chart__source { font-size: 0.8rem; color: var(--ink-faint); margin: 0.6rem 0 0; }

@media (min-width: 56rem) {
  /* Wide enough to read as a scale: ten steps left to right, worst to best. */
  .chart {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .chart__step {
    grid-template-columns: none;
    grid-template-areas: "grade" "name" "value" "badge" "mine";
    align-content: start;
    justify-items: center; text-align: center;
    gap: 0.2rem;
    padding: 0.8rem 0.35rem 0.9rem;
    border-top: 0; border-left: 1px solid var(--rule);
    min-height: 8.5rem;
  }
  .chart__step:first-child { border-left: 0; }
  .chart__grade { font-size: 0.95rem; }
  .chart__name {
    font-size: 0.68rem; line-height: 1.25; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .chart__value { text-align: center; margin-top: 0.35rem; }
  .chart__unknown { font-size: 0.62rem; letter-spacing: -0.01em; }
  .chart__badge { justify-self: center; }
  .chart__mine { justify-self: center; text-align: center; margin-top: 0.3rem; }
  .chart__step--held { box-shadow: inset 0 3px 0 var(--verdigris); }
}

/* --- specimens: the coins held of one reference ---------------------------- */

.wanted-note {
  border-left: 3px solid var(--ink-faint); background: var(--surface-sunk);
  padding: 0.5rem 0.75rem; margin-bottom: 1rem;
  font-size: 0.9rem; color: var(--ink-soft);
}

.specimens { margin-bottom: 2.5rem; }
.specimen {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem; margin-bottom: 1.75rem;
}
.specimen__head {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between; margin-bottom: 0.9rem;
}
.specimen__head h3 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1rem; margin: 0;
}
.specimen__actions { display: flex; gap: 0.5rem; align-items: center; }
.specimen__notes { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.specimen__notes h4 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-bottom: 0.3rem; font-family: var(--font-body);
}

/* --- the read-only value chart on the coin form ---------------------------- */

.values-chart { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.values-chart__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.5rem; border-radius: var(--radius);
}
.values-chart__name { color: var(--ink-soft); font-size: 0.9rem; }
.values-chart__value {
  font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.values-chart__badge {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--verdigris-ink); font-weight: 700;
}
.values-chart__row--held {
  background: var(--verdigris-dim); box-shadow: inset 3px 0 0 var(--verdigris);
}
.values-chart__row--held .values-chart__name { color: var(--verdigris-ink); font-weight: 700; }
.values-chart__row--below { background: var(--surface-sunk); }
.values-chart__row--below .values-chart__name,
.values-chart__row--below .values-chart__value { color: var(--ink-faint); }

/* --- the coins held, listed on the reference form -------------------------- */

.held-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.held-list__item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem; border-top: 1px solid var(--rule);
}
.held-list__item:first-child { border-top: 0; }
.held-list__name { color: var(--ink-soft); font-size: 0.9rem; }
.held-list__actions { display: flex; gap: 0.4rem; align-items: center; }

/* --- owner panel ----------------------------------------------------------- */

.owner-panel {
  border: 1px solid var(--rule); border-left: 3px solid var(--verdigris);
  border-radius: var(--radius);
  background: var(--surface); padding: 1.1rem; margin-bottom: 2.5rem;
}
.owner-panel .section-head { margin-top: 0; }

.facts { display: grid; gap: 0.8rem 1.5rem; margin: 0 0 1rem; }
@media (min-width: 34rem) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.15rem;
}
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.owner-panel__notes { border-top: 1px solid var(--rule); padding-top: 0.9rem; margin-bottom: 1rem; }
.owner-panel__notes h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.3rem; font-family: var(--font-body); }
.owner-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* --- zoom viewer ----------------------------------------------------------- */

.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: #0b0e0f;
  color: #e7ecea;
  overscroll-behavior: contain;
}
.viewer[hidden] { display: none; }

.viewer__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; padding-top: max(0.6rem, env(safe-area-inset-top));
  border-bottom: 1px solid #222a2b;
  flex-wrap: wrap;
}
.viewer__title {
  margin: 0; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.03em; flex: 1; min-width: 8rem;
}
.viewer__sides, .viewer__tools { display: flex; gap: 0.3rem; }
.viewer__sides button, .viewer__tools button {
  font: inherit; font-size: 0.8rem;
  min-width: 2.2rem; min-height: 2.2rem;
  padding: 0.3rem 0.6rem;
  background: #1a2122; color: #cfd8d6;
  border: 1px solid #2b3435; border-radius: var(--radius);
  cursor: pointer;
}
.viewer__sides button[aria-pressed="true"] { background: var(--verdigris); border-color: var(--verdigris); color: #fff; }
.viewer__sides button:hover, .viewer__tools button:hover { border-color: #46514f; }
.viewer__sides button[hidden] { display: none; }

.viewer__stage {
  position: relative; overflow: hidden;
  touch-action: none;              /* we handle pinch and drag ourselves */
  cursor: grab;
  display: grid; place-items: center;
}
.viewer__stage.is-panning { cursor: grabbing; }

.viewer__image {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none; will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.viewer__image[hidden] { display: none; }

.viewer__loading {
  font-size: 0.85rem; color: #8b9997; margin: 0;
}
.viewer__loading[hidden] { display: none; }

.viewer__hint {
  margin: 0; padding: 0.5rem 0.75rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  font-size: 0.75rem; color: #7d8b89; text-align: center;
  border-top: 1px solid #222a2b;
}

body.viewer-open { overflow: hidden; }

/* --- sign in --------------------------------------------------------------- */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.signin__card {
  width: min(24rem, 100%);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.signin__card h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.signin__card .muted { font-size: 0.85rem; margin-bottom: 1.25rem; }
.signin__back { margin-top: 1rem; text-align: center; font-size: 0.85rem; }

/* --- admin ----------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.tile {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.tile__figure { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile__label { font-size: 0.75rem; color: var(--ink-faint); }
.tile--warn .tile__figure { color: var(--oxide); }
.admin__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* reference builder */
.reference-builder { display: grid; gap: 0 1rem; }
@media (min-width: 46rem) {
  .reference-builder {
    grid-template-columns: minmax(11rem, 1.4fr) 6rem minmax(10rem, 1.2fr) 5.5rem 1fr;
    align-items: start;
  }
}
.reference-preview {
  align-self: start;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.5rem 0.75rem; margin-bottom: 1rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-sunk);
}
.reference-preview__label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint);
}
.reference-preview strong {
  font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.reference-preview--incomplete strong { color: var(--ink-faint); }

#roman-field[hidden] { display: none; }

/* The striking panel, revealed once one is chosen. `.field` sets display:flex,
   so the [hidden] attribute needs saying explicitly here as it does above. */
#striking-panel[hidden] { display: none; }
.field__suggest[hidden] { display: none; }

/* Values other years of this type were struck at. Quiet: they are an offer,
   not a control, and the box beside them is the thing being filled in. */
.field__suggest {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem;
  margin: 0; font-size: 0.78rem; color: var(--ink-faint);
}
.suggest {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--ink-faint); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 0.18em;
}
.suggest:hover { color: var(--verdigris); text-decoration-style: solid; }

.upload { margin-bottom: 1.25rem; }
.upload h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-family: var(--font-body); margin-bottom: 0.5rem; }
.upload__preview {
  aspect-ratio: 1; max-width: 12rem;
  background: var(--tray); border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden; margin-bottom: 0.6rem;
}
.upload__preview img { width: 100%; height: 100%; object-fit: contain; }
.upload__empty { color: #7d8a89; font-size: 0.8rem; }

.values-grid { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .values-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; } }
.values-grid__row {
  display: grid; grid-template-columns: 1fr 7rem; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.5rem; border-radius: var(--radius);
}

/* The same held / above / below reading as the public condition chart, so the
   two screens say the same thing. A grade below the one held is dimmed but
   still editable -- the figure is worth recording either way. */
.values-grid__row--held {
  background: var(--verdigris-dim);
  box-shadow: inset 3px 0 0 var(--verdigris);
}
.values-grid__row--held .values-grid__name { color: var(--verdigris-ink); font-weight: 700; }
.values-grid__row--below { background: var(--surface-sunk); }
.values-grid__row--below .values-grid__name { color: var(--ink-faint); }
.values-grid__row label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.values-grid__name { color: var(--ink-soft); }
.values-grid__held {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--verdigris-ink); font-weight: 700;
}
.values-grid__also {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600;
}
.values-note { font-style: italic; }
/* A field error inside either values grid spans the row it belongs to. */
/* A catalogue citation is three boxes, not one, so these rows keep the full
   width instead of going two abreast, and the die codes get a box sized for the
   two-to-five characters they run to -- visibly shorter than the number. */
.values-grid--refs { grid-template-columns: 1fr; }
.values-grid--refs .values-grid__row { grid-template-columns: 1fr 9rem 4rem 4rem; }

@media (max-width: 39.99rem) {
  .values-grid--refs .values-grid__row { grid-template-columns: 1fr 4rem 4rem; }
  .values-grid--refs .values-grid__row label { grid-column: 1 / -1; }
}

.values-grid .field__error { grid-column: 1 / -1; margin: -0.15rem 0 0.25rem; }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600; padding: 0 0.35rem 0.4rem;
}
.table td { padding: 0.25rem 0.35rem; border-top: 1px solid var(--rule); vertical-align: middle; }
.table__centre { text-align: center; }
/* Figures line up on the right and share a width, as every other number in
   the app does. Pairs with --font-mono on the cells that carry money. */
.table__figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* `.table th` sets text-align, and an element-plus-class selector out-weighs a
   bare class however late it comes -- so a header cell needs saying twice, or
   it sits left over a column that does not. Qualified here rather than by
   dropping the alignment from `.table th`, which every other table wants. */
.table th.table__figure { text-align: right; }
.table th.table__centre { text-align: center; }
.table__actions { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.table__new td { background: var(--surface-sunk); }
.lookups .panel { overflow-x: auto; }

/* --- the collection as a list --------------------------------------------- */

/* Ten grade columns do not fit a phone, and should not try: the table keeps
   its shape and the container scrolls, as the lookups panel does. */
.list-scroll { overflow-x: auto; margin-bottom: 2rem; }
.list { min-width: 46rem; }
.list th { white-space: nowrap; }
.list td { white-space: nowrap; }
.list code { font-size: 0.85em; }

/* A description clipped to its column instead of wrapping the row onto two
   lines. A block inside the cell, because text-overflow needs a width to work
   against and a td in an auto-layout table will not reliably give it one. */
.list__clip {
  display: block; max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft); font-size: 0.82rem;
}

.list__reference {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule-strong);
}
.list__reference:hover { color: var(--verdigris-ink); border-bottom-color: var(--verdigris); }
.list__draft {
  margin-left: 0.35rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--oxide); color: #fff; padding: 0.05rem 0.3rem; border-radius: 2px;
}
.list__row--draft td { background: color-mix(in srgb, var(--oxide) 5%, transparent); }

/* The grade matrix: the condition chart read across instead of down, so the
   three states carry the same meanings, and the same colours, as there. */
.list__cell { font-family: var(--font-mono); font-size: 0.82rem; }
.list__cell--held { background: var(--verdigris-dim); }
.list__cell--held strong { color: var(--verdigris-ink); }
.list__cell--below { color: var(--ink-faint); background: var(--surface-sunk); }
.list__count { font-size: 0.65rem; color: var(--verdigris-ink); margin-left: 0.15rem; }

.list__group th {
  padding-top: 1.1rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
.list tbody:first-of-type .list__group th { padding-top: 0; }
.list__group-count {
  margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 400; color: var(--ink-faint);
}
/* The striking's mintage, on an Issue heading. */
.list__group-mintage {
  margin-left: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem;
  font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
/* What the coin physically was -- metal, size, weight -- beside the figure,
   and separated the same way the variant page's segments are. */
.list__group-fact {
  margin-left: 0.6rem; font-size: 0.75rem; font-weight: 400; color: var(--ink-faint);
}
.list__group-fact + .list__group-fact::before {
  content: "·"; margin-right: 0.6rem; color: var(--rule-strong);
}

/* The second line of an Issue header: the striking's inscriptions, in the
   Obverse and Reverse columns above the variants' descriptions of those faces.
   No top border, and a lighter ground than the heading above it, so the two
   rows read as one header block rather than as a heading and a coin. */
.list__group--legends td {
  padding-top: 0.15rem; padding-bottom: 0.35rem;
  background: var(--surface-sunk); border-bottom: 1px solid var(--rule);
}
.list__group-legend-label {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint);
}
/* Clipped like the descriptions below it, but letter-spaced: an inscription is
   lettering struck on the coin, not prose about it. */
.list__legend { letter-spacing: 0.04em; color: var(--ink-soft); }

.list tfoot td {
  border-top: 2px solid var(--rule-strong); padding-top: 0.5rem;
  font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.list tfoot td:first-child {
  font-family: var(--font-body); font-weight: 600; color: var(--ink-faint);
  text-align: right; font-size: 0.8rem;
}

.notice { max-width: 34rem; margin: 3rem auto; text-align: center; }
.notice h1 { margin-bottom: 0.5rem; }
.notice p { color: var(--ink-soft); }
.notice .button { margin-top: 1rem; }

/* --- motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}

@media print {
  .masthead, .footer, .filters, .viewbar, .find-jump,
  .owner-panel__actions, .plate__zoom-hint { display: none; }
  /* A printed list wants its whole width, and no scroller. */
  .list-scroll { overflow: visible; }
  body { background: #fff; }
}