/* Chopstats page charts */
.chopstats-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0 2.5rem;
}

.chopstats-chart-wrapper {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 0.25rem 1.25rem 0.5rem;
}

/* Override page-content h2 margin-top (2rem) - use higher specificity */
.chopstats-chart-wrapper .chopstats-chart-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: #333;
}

/* Compact container; charts fill via maintainAspectRatio: false */
.chopstats-chart-container {
  position: relative;
  height: 380px;
}

/* Country chart: slightly taller to fit top 25 */
.chopstats-chart-wrapper--country .chopstats-chart-container {
  height: 380px;
}

.chopstats-chart-container canvas {
  max-width: 100%;
}

/* Collection-level summary bar at top of insights page */
.chopstats-summary {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.chopstats-summary-item {
  font-size: 1.05rem;
}

.chopstats-summary-item .chopstats-stat-label {
  color: #444;
  font-weight: 600;
}

.chopstats-summary-item .chopstats-stat-value {
  font-weight: 600;
  color: #5a8ab8;
}

@media (max-width: 600px) {
  .chopstats-summary {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Chopmarks table - bounded rounded container, improved typography */
.chopstats-chopmarks-wrapper {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
}

/* The Chopmark Library top card reuses .chopstats-summary (rounded bg + border)
   but overrides the base card's wrap-and-space-between row: it stacks ONE stat
   per line and shrinks to only as wide as its widest line, rather than spanning
   the page. */
.chopstats-summary--chopmarks {
  margin-top: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
}

/* Section headers inside the chopmarks wrapper, separating the Hanzi
   table from the seal-script table. Slightly subdued — they're orientation
   labels, not page-level headings. */
.chopstats-chop-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #5a6274;
  margin: 0.25rem 0 0.75rem;
}
.chopstats-chop-section-title + .chop-stats-table {
  margin-bottom: 1rem;
}
.chop-stats-table + .chopstats-chop-section-title {
  margin-top: 1.5rem;
}

.chopstats-chop-empty {
  font-size: 0.9rem;
  font-style: italic;
  color: #7a8395;
  margin: 0;
  padding: 0.5rem 0.25rem 0.25rem;
}

/* Intro note for the Counterfeits table — explains why these chops are listed
   separately from everything above. Muted, sits between the section title and
   the table (so the title+table adjacency margin doesn't apply here). */
.chopstats-chop-note {
  font-size: 0.9rem;
  color: #5a6274;
  margin: 0 0 0.85rem;
  max-width: 70ch;
  line-height: 1.5;
}

.chopstats-chopmarks-wrapper .chop-stats-table {
  font-size: 1.15rem;
  font-weight: 500;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

.page-content-content .chopstats-chopmarks-wrapper .chop-stats-table td {
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #eee;
}

.chopstats-chopmarks-wrapper .chop-stats-table .chop-char {
  font-weight: 600;
  color: #5a6274;
  margin-right: 0.35em;
}

/* Mirror-reversed ("backwards") Latin chopmark glyph (frontmatter token "R@m").
   The build strips the @m flag from the displayed letter(s) and tags the span
   --mirror; flip it horizontally so the cell shows the letter as it was struck.
   inline-block is required for transform to apply to an inline span. */
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--mirror {
  display: inline-block;
  transform: scaleX(-1);
}

/* Latin-letter and number chopmarks are struck with Western type, so render
   their glyphs in a heavy slab-serif face. The pronounced, square serifs read
   like an assayer's punched initial or a stamped numeral, closer to how the
   mark sits on the coin than the page's default sans. Rockwell (Windows/Office)
   is the classic heavy slab; American Typewriter (macOS) is the slab fallback,
   then a generic serif. Scoped to the .chop-char glyph only; the count keeps
   the table's natural type.

   The counterfeit table mixes all nine classes in one grid, so its Latin and
   Number cells need the same slab face — they are the same kind of mark, just on
   a fake coin. They are matched on `data-cf-class` because counterfeit cells
   carry that instead of the `data-kind` the latinnum table uses (the number
   selector is included for completeness; the counterfeit table has no number
   cells today). Without this they fell back to the page's Work Sans at the base
   .chop-char weight of 600, so the same letter rendered in two different faces
   on one page. */
.chopstats-chopmarks-wrapper .chop-stats-table--latinnum .chop-char,
.chopstats-chopmarks-wrapper .chop-stats-table--counterfeit td[data-cf-class="latin"] .chop-char,
.chopstats-chopmarks-wrapper .chop-stats-table--counterfeit td[data-cf-class="number"] .chop-char {
  font-family: "Rockwell", "Rockwell Nova", "American Typewriter", serif;
  /* The base .chop-char is 600 (semibold), which reads heavy in a slab face;
     drop to regular weight so the slab glyph renders thinner (American
     Typewriter Regular on macOS). */
  font-weight: 400;
}

/* The Compound table renders combos with NO count cell (compound combos are
   effectively unique, so a count is always ~1). Drop the right margin that
   only existed to separate the glyph from the count, so the multi-char combo
   sits centered in its (narrow, 12-col) cell. A touch smaller than the other
   tables' 1.15rem so a 3-char vertical stack doesn't push the row too tall. */
.chopstats-chopmarks-wrapper .chop-stats-table--compound .chop-char {
  margin-right: 0;
  display: inline-block;
  font-size: 0.9rem;
}

/* Stack the combo's chars VERTICALLY (top-to-bottom), the way a compound mark is
   struck on the coin — only here, in the table cell (the [compound:X] prose
   expansion and the click-to-expand caption keep horizontal text). The build
   wraps each char of the combo in its own <span> (build-stats-page.sh), and we
   make those block so they stack by normal block flow. We deliberately do NOT
   use CSS writing-mode:vertical-rl: Safari/WebKit computes it but refuses to
   lay it out vertically on an inline-block, so it rendered horizontal there
   (Chromium/Firefox were fine). Per-char block spans are the cross-browser fix.
   The cell has no fixed height, so the row grows to fit the tallest stack
   (up to 3 chars). */
.chopstats-chopmarks-wrapper .chop-stats-table--compound .chop-char > span {
  display: block;
  line-height: 1.1;
}

/* Horizontal compound marks (Compound Chopmarks: X@h / [compound:X@h]): the
   chars sit side-by-side in a row instead of the default vertical stack, the
   way that mark was struck on the coin. The build tags the .chop-char wrapper
   --horizontal (build-stats-page.sh); flip its per-char block spans back to
   inline. inline (not inline-block) is the cross-browser-safe lay-out here. */
.chopstats-chopmarks-wrapper .chop-stats-table--compound .chop-char--horizontal > span {
  display: inline;
}

/* 4- and 5-char compound combos shrink so a tall vertical stack (or a wide @h
   row) doesn't unbalance its narrow 12-column grid cell — the default compound
   char is 0.9rem (above). The build tags the .chop-char wrapper --len4 / --len5
   (build-stats-page.sh, compound_len_class). Applies in the Compound table AND
   a compound-class cell mixed into the Counterfeits table. */
.chopstats-chopmarks-wrapper .chop-stats-table--compound .chop-char--len4,
.chopstats-chopmarks-wrapper .chop-stats-table--counterfeit .chop-char--len4 {
  font-size: 0.72rem;
}
.chopstats-chopmarks-wrapper .chop-stats-table--compound .chop-char--len5,
.chopstats-chopmarks-wrapper .chop-stats-table--counterfeit .chop-char--len5 {
  font-size: 0.58rem;
}

/* Seal-script glyph cells: the .chop-char span is empty in markup and
   filled with an <img class="seal-glyph"> by chopstats-charts.js once the
   seal overlay loads. Size matches the Hanzi-character visual weight in
   the parallel table so the two corpora read at the same scale. */
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--seal {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
}
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--seal img.seal-glyph {
  display: block;
  width: 100%;
  height: 100%;
  /* Zero the `margin: 0 0.1em` that markdown-content.css puts on every
     img.seal-glyph for INLINE prose use ([seal:X] in a coin body). Inside the
     table that margin is not wanted: it shifted the glyph 1.83px right of centre
     in its cell, which is invisible in a 78px desktop column but ate most of the
     clearance in a 25px one. The calligraphy and symbol table rules below/above
     already zero it; this one had been missed. */
  margin: 0;
  object-fit: contain;
}
/* Fallback when no seal variant exists for a char — JS sets textContent
   on the placeholder span instead of injecting an <img>. Let the box size
   to the text so the Hanzi character renders at the table's natural type. */
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--seal:not(:has(img)) {
  width: auto;
  height: auto;
  font-weight: 600;
  color: #5a6274;
}

/* Symbol glyph cells: the drawn SVG is rendered directly in the cell as
   <img class="symbol-glyph"> (build-stats-page.sh). Render it a little smaller
   than the seal/Hanzi glyphs — symbols read better at a slightly reduced size.
   This overrides the global img.symbol-glyph (prose) sizing inside the table. */
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--symbol img.symbol-glyph {
  height: 1.2em;
  width: auto;
  margin: 0;
  vertical-align: middle;
}

/* ...but `height` pinned + `width: auto` means the width is whatever the SVG's
   intrinsic aspect makes it, and the symbol SVGs are deliberately NOT square
   (sym024 rat 210x150, sym001 double lozenge 196x150, sym012 double cash
   187x150 — symbol-svg.mjs normalizes the footprint, it does not force a square
   viewBox). The table is `table-layout: fixed` at `100vw - 90px` across 12 equal
   columns, and the cell font-size stays 18.4px at every width, so the glyph is
   the SAME absolute size on a phone as on a desktop while the column shrinks
   from ~78px to ~25px. Below ~465px the wide glyphs outgrow their cell: at 390px
   nine of them crossed the gridline and three overlapped the next glyph (the rat
   by 8.9px, the double lozenge by 6.9px, double cash by 5.5px).

   So below the breakpoint the glyph height tracks the COLUMN rather than the
   font. The column is (100vw - 90px) / 12 and its content box is another 4.8px
   in (2.4px padding a side); capping the widest aspect (1.4) at that content box
   gives height <= 5.95vw - 9.2px. Fitting the CONTENT box rather than the border
   box also re-centres the glyph: an inline-block wider than its line box can
   only overflow rightward, which is why the oversized ones were sitting 2.9px
   off the left edge and hard against the right gridline. `min()` keeps the 1.2em
   cap, so this only ever shrinks and rejoins the desktop size inside the query
   (~515px), leaving no jump at the boundary. Every symbol scales by the same
   factor, so they stay consistent with each other rather than one outlier being
   letterboxed smaller than its neighbours. */
@media (max-width: 520px) {
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-char--symbol img.symbol-glyph {
    height: min(1.2em, calc(5.95vw - 9.2px));
  }
}

/* Keep each symbol cell's glyph and its count on ONE line. The symbol glyphs are
   the only ones with a free-running width (see above), so the three widest —
   sym001 double lozenge, sym012 double cash, sym024 rat — pushed their count
   onto a second line at desktop while every other cell kept it alongside, which
   read as three misaligned cells in an otherwise even grid.

   Worth noting the arithmetic says they should have fit: sym024 needs 61.06px of
   a 58.55px content box, but sym012 needs only 57.63px and still wrapped, so the
   break is WebKit rounding inline widths up rather than a real shortfall.
   Tightening the 0.35em gap does NOT fix it (measured: still wraps at 0.1em);
   only forbidding the break does.

   Safe without shrinking anything: the cell has 9.6px of horizontal padding a
   side, so the widest cell's 2.5px of extra inline content is absorbed by the
   padding and still clears the gridline (measured 0 overflow on all 28 cells).
   No effect at narrow widths, where the glyph and count are `display: block` and
   stack regardless of white-space (verified byte-identical at 390px). */
.chopstats-chopmarks-wrapper .chop-stats-table--symbol td[data-char] {
  white-space: nowrap;
}

/* Calligraphy glyph cells: the brush-script SVG is rendered directly in the
   cell as <img class="calligraphy-glyph"> (build-stats-page.sh), keyed per
   (char, face). Full-character glyphs like the seal cells, so they share the
   1.4em box + contain fit. Overrides the global inline img.calligraphy-glyph
   (prose) sizing inside the table. The fallback (unpinned/malformed token →
   a plain .chop-char text span) renders at the table's natural type. */
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--calligraphy {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
}
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--calligraphy img.calligraphy-glyph {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Narrow-width sizing for the two SVG-glyph classes that share the 1.4em square
   box (seal above, calligraphy here, plus both of them again inside the mixed
   counterfeit table — these selectors are deliberately table-agnostic so that
   one rule covers all three tables).

   Same root cause as the symbol rule above: the box is set in `em` against a
   cell font-size that stays 18.4px at every width, while the column shrinks from
   ~78px to ~25px, so a 1.4em (25.75px) box is WIDER than the 24.9px cell on a
   phone. Measured at 390px before this rule: every one of the 62 seal cells
   crossed its gridline by 5.6px, all 21 calligraphy cells by 3.7px, and 10 cells
   in the counterfeit table by up to 5.6px.

   The box is square and the glyph inside it is `object-fit: contain`, so
   shrinking the box scales the glyph with no distortion — this only needs to cap
   the box at the cell's content box, (100vw - 90px)/12 - 4.8px, hence
   8.33vw - 12.8px. `min()` keeps the 1.4em cap so it only ever shrinks, rejoining
   the desktop size at ~463px, inside the query, so there is no jump at the
   boundary.

   NOTE: the seal text fallback (`.chop-char--seal:not(:has(img))`, for a char
   with no seal variant) deliberately still wins here — `:has(img)` contributes a
   type selector, making that rule (0,3,1) against this one's (0,3,0) — so a
   fallback cell keeps `width/height: auto` and sizes to its text. */
@media (max-width: 520px) {
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-char--seal,
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-char--calligraphy {
    width: min(1.4em, calc(8.33vw - 12.8px));
    height: min(1.4em, calc(8.33vw - 12.8px));
  }
}

/* Manchu glyph cells: the Manchu word is rendered directly as vertical TEXT
   (build-stats-page.sh emits <span class="chop-char chop-char--manchu">WORD</span>),
   turned upright with the Noto Sans Mongolian webfont via writing-mode. Manchu
   is the only vertical script, so the cell grows taller than the 1.4em square
   the other glyph cells use. The @font-face is repeated here because the
   Chopmark Library table is styled by this file independently of
   markdown-content.css. */
@font-face {
  font-family: "Noto Sans Mongolian";
  src: url("/fonts/noto-sans-mongolian.woff2") format("woff2");
  font-display: swap;
}
.chopstats-chopmarks-wrapper .chop-stats-table .chop-char--manchu {
  font-family: "Noto Sans Mongolian", sans-serif;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 1.05em;
  min-height: 1.4em;
}

/* Manchu is vertical text, so unlike every other class its cell WIDTH is set by
   the font-size (one glyph column, ~1em advance) rather than by a box or an
   aspect ratio. That means it does not shrink along with the surrounding table
   text at narrow widths, and below ~356px the 1.05em column (19.3px) outgrows
   the cell — measured at 336px, all 11 Manchu cells plus the one in the
   counterfeit table crossed their gridline by 1.8px. Cap the font-size against
   the same cell content box the seal/calligraphy boxes use. `min()` keeps 1.05em,
   so 390px and up are untouched and only genuinely narrow phones scale down. */
@media (max-width: 520px) {
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-char--manchu {
    font-size: min(1.05em, calc(8.33vw - 12.8px));
  }
}

/* Manchu in the MIXED counterfeit table only. The 1.05em above is right for the
   dedicated Manchu table, where every cell is Manchu and the scale is uniform.
   In the counterfeit grid a Manchu word sits directly beside single Hanzi
   characters, and because it is vertical it stacks its letters: the one word
   there rendered 32.6px tall against 21.6px for the Hanzi next to it (1.5x) and
   pushed its whole row 5px taller than every other row, which read as an
   oversized cell rather than a different script.

   0.8em brings a two-letter word to roughly the 1.4em glyph box the seal and
   calligraphy cells use in this same table, so the row heights even out. Note a
   longer Manchu word will still be taller — that is inherent to a vertical
   script and correct, this only removes the extra 5% and the 1.4em min-height
   working against the surrounding single characters.

   Deliberately placed AFTER the narrow-width query above so it wins at every
   width (same specificity, later wins). That is safe because 0.8em is smaller
   than that query's cap across the whole range, so it can never overflow the
   cell. */
.chopstats-chopmarks-wrapper .chop-stats-table--counterfeit .chop-char--manchu {
  font-size: 0.8em;
  min-height: 0;
}

.chopstats-chopmarks-wrapper .chop-stats-table .chop-count {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #7a9ec4;
}

.chopstats-chopmarks-wrapper .chop-stats-table td:has(.chop-char) {
  cursor: pointer;
}

/* Narrow / mobile viewports: 12 fixed columns × the wrapper's padding squeeze
   the cells too tight for the char + count to sit side-by-side legibly. Stack
   them vertically (char on top, count below, both centered), drop the count's
   font size a notch so a 2-digit number doesn't overflow, and trim the td's
   horizontal padding so the count fits inside the cell instead of bleeding
   into the divider. Threshold mirrors the rest of the site (max-width: 768px). */
@media (max-width: 768px) {
  .page-content-content .chopstats-chopmarks-wrapper .chop-stats-table td {
    padding: 0.35rem 0.15rem;
  }
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-char {
    display: block;
    margin: 0 auto;
  }
  .chopstats-chopmarks-wrapper .chop-stats-table .chop-count {
    display: block;
    /* width: 100% forces the block to fill the td's content area in
       WebKit, which otherwise shrink-to-fits a display:block <span>
       inside a <td> to its text's intrinsic width and then left-pins
       the (smaller) block against the cell's left edge — text-align:
       center on a shrink-wrapped block centers the digit within the
       block, not within the cell. Chromium fills the parent by default
       so this is a no-op there. */
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 0.85em;
    margin-top: 0.1em;
  }
}

/* Selected chopmark cell — shares its blue fill with the expanded image
   row inserted directly below it, so the cell + row read as one connected
   element. The bottom border is "consumed" by the row below (which shares
   the same fill) so the eye sees a continuous blue surface. */
.chopstats-chopmarks-wrapper .chop-stats-table td.chopstats-chop-selected {
  background: #eaf2fb;
  box-shadow: inset 0 2px 0 #5a8ab8, inset 2px 0 0 #5a8ab8, inset -2px 0 0 #5a8ab8;
  border-color: #cbdbef;
  border-bottom-color: #eaf2fb;
  position: relative;
  z-index: 1;
}
.chopstats-chopmarks-wrapper .chop-stats-table td.chopstats-chop-selected .chop-char {
  color: #2d4a6b;
}
.chopstats-chopmarks-wrapper .chop-stats-table td.chopstats-chop-selected .chop-count {
  color: #5a8ab8;
}

/* In-table expanded row holding the chopmark image gallery. Inserted via JS
   as the immediate next sibling of the clicked cell's <tr>, with the <td>
   spanning every column. The inner div is what animates open/closed —
   transitioning the <tr>/<td> directly fights the table layout engine. */
.chopstats-chopmarks-wrapper .chop-stats-table tr.chopstats-chop-example-row td {
  padding: 0;
  border: 1px solid #cbdbef;
  background: #eaf2fb;
}
.chopstats-chop-example-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease-out;
}
.chopstats-chop-example-inner-pad {
  padding: 0.85rem 1rem 1rem;
  text-align: left;
}
.chopstats-chop-example-header {
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: #6a7180;
}
.chopstats-chop-example-char {
  font-weight: 600;
  color: #5a6274;
}
.chopstats-chop-example-sep {
  color: #aab1bd;
  margin: 0 0.3em;
}
.chopstats-chop-example-pinyin {
  font-style: italic;
  color: #5a8ab8;
}
.chopstats-chop-example-meaning {
  color: #6a7180;
}
.chopstats-chop-example-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-content: flex-start;
}
.chopstats-chop-example-empty {
  font-size: 0.9rem;
  font-style: italic;
  color: #7a8395;
}
.chopstats-chopimg {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border: 1px solid #d6e1ee;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
/* Dense galleries (>14 photos) shrink the tiles 150px → 100px so a big strip
   doesn't dominate the page. Applied by populatePad (chopstats-charts.js)
   adding .chopstats-chop-example-grid--compact when imgs.length > 14. Mirrors
   the Chopmark Lookup page's .cl-chop-row--compact. */
.chopstats-chop-example-grid--compact .chopstats-chopimg {
  width: 100px;
  height: 100px;
}

@media (max-width: 768px) {
  .chopstats-charts {
    grid-template-columns: 1fr;
  }
}

/* Full-width chart (fineness over time) - below mintage section */
.chopstats-chart-wrapper--fullwidth {
  grid-column: 1 / -1;
  margin-top: 2rem;
}

/* Fineness summary above Fineness Over Time chart - table with no cell borders */
.chopstats-fineness-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.chopstats-fineness-table-wrap .chopstats-fineness-summary-table {
  margin-bottom: 0;
}

.chopstats-fineness-summary-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.chopstats-fineness-summary-table .chopstats-fineness-value-col {
  width: 7.5em;
}

@media (max-width: 900px) {
  .chopstats-fineness-summary-table .chopstats-fineness-value-col {
    width: 6.5em;
  }
  .chopstats-fineness-summary-table td {
    padding: 0.35rem 0.5rem 0.35rem 0;
  }
}

.chopstats-fineness-summary-table td {
  border: none;
  padding: 0.35rem 1rem 0.35rem 0;
  vertical-align: baseline;
}

.chopstats-fineness-summary-table .chopstats-fineness-value-cell {
  text-align: right;
  white-space: nowrap;
}

.chopstats-fineness-summary-table .chopstats-stat-label {
  color: #444;
}

.chopstats-fineness-summary-table .chopstats-stat-value {
  font-weight: 600;
  color: #5a8ab8;
}

@media (max-width: 768px) {
  .chopstats-fineness-summary-table .chopstats-fineness-value-col {
    width: auto;
  }
  .chopstats-fineness-summary-table tr,
  .chopstats-fineness-summary-table td {
    display: block;
  }
  .chopstats-fineness-summary-table td {
    padding: 0.25rem 0;
  }
  .chopstats-fineness-summary-table .chopstats-fineness-value-cell {
    text-align: left;
    padding-left: 0.5rem;
    white-space: normal;
  }
}

.chopstats-chart-container--fineness {
  height: 360px;
}

.chopstats-chart-wrapper--fullwidth .chopstats-chart-title:not(:first-child) {
  margin-top: 1.5rem;
}

.chopstats-chart-container--asw {
  height: 360px;
}

/* Coins section - bounded like charts, two equal-height columns */
.chopstats-coin-stats {
  margin: 2rem 0 2.5rem;
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

.chopstats-stats-wrapper {
  flex: 1;
  min-width: 0;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 0.25rem 1rem 0.5rem 0.5rem;
}

.chopstats-stats-wrapper .chopstats-stats-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: #333;
}

.chopstats-chopmark-stats-list {
  margin: 0;
  padding-left: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  list-style: none;
}

.chopstats-chopmark-stats-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee;
}

.chopstats-chopmark-stats-list li:last-child {
  border-bottom: none;
}

.chopstats-chopmark-stats-list .chopstats-stat-label {
  color: #444;
}

.chopstats-chopmark-stats-list .chopstats-stat-value {
  font-weight: 600;
  color: #5a8ab8;
  text-align: right;
}

.chopstats-chopmark-stats-list .rarity-coin {
  color: #444;
  font-weight: 300;
  min-width: 0;
}

.chopstats-chopmark-stats-list .rarity-value {
  font-weight: 600;
  color: #5a8ab8;
  text-align: right;
  white-space: nowrap;
}

.chopstats-stat-value--with-tooltip {
  cursor: help;
}

.chopstats-low-mintage-list {
  margin: 0;
  padding-left: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  list-style: none;
  counter-reset: mintage-num;
}

.chopstats-low-mintage-list li {
  counter-increment: mintage-num;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee;
}

.chopstats-low-mintage-list li::before {
  content: counter(mintage-num) ".";
  color: var(--color-text-muted);
}

.chopstats-low-mintage-list li:last-child {
  border-bottom: none;
}

.chopstats-low-mintage-list .mintage-coin {
  color: #444;
  font-weight: 300;
  min-width: 0;
}

.chopstats-low-mintage-list .mintage-value {
  font-weight: 600;
  color: #5a8ab8;
  white-space: nowrap;
}

/* Clickable coin links in stats lists */
a.chopstats-coin-link,
a.chopstats-coin-link:visited {
  cursor: default;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  transition: background-color 0.15s ease;
  padding: 0.35rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
}

a.chopstats-coin-link:hover {
  background-color: #f0f4f8;
}

/* When li contains a link, remove its own padding/grid since the link handles it */
.chopstats-chopmark-stats-list li:has(.chopstats-coin-link) {
  display: block;
  padding: 0;
}

.chopstats-low-mintage-list li:has(.chopstats-coin-link) {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0;
}

.chopstats-low-mintage-list li:has(.chopstats-coin-link) .chopstats-coin-link {
  grid-column: 2;
}

@media (max-width: 768px) {
  .chopstats-coin-stats {
    flex-direction: column;
  }

  .chopstats-chopmark-stats-list li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.25rem 0;
  }

  .chopstats-coin-link {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.25rem 0;
  }

  .chopstats-chopmark-stats-list .rarity-value {
    font-size: 0.95em;
    padding-left: 0.25rem;
    text-align: left;
  }

  .chopstats-low-mintage-list li {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.75rem;
    align-items: start;
  }

  .chopstats-low-mintage-list .mintage-coin {
    grid-column: 2;
    grid-row: 1;
  }

  .chopstats-low-mintage-list .mintage-value {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.95em;
    padding-left: 0.25rem;
  }

  .chopstats-low-mintage-list li::before {
    grid-row: 1 / -1;
    align-self: start;
    padding-top: 0.1em;
  }

  .chopstats-low-mintage-list .chopstats-coin-link .mintage-coin {
    grid-column: 1;
    grid-row: 1;
  }

  .chopstats-low-mintage-list .chopstats-coin-link .mintage-value {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.95em;
    padding-left: 0.25rem;
  }
}

/* Stat value tooltip (real DOM element - reliable dismiss on scroll/leave) */
.chopstats-stat-tooltip {
  position: fixed;
  z-index: 1000;
  background: #2d3748;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.9rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.08s ease, visibility 0.08s ease;
  max-width: 320px;
  padding: 0.35rem 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: pre-line;
}

/* Tooltip arrow - left edge, pointing left (tooltip on right of target) */
.chopstats-stat-tooltip.chopstats-stat-tooltip-right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  border: 6px solid transparent;
  border-right-color: #2d3748;
  width: 0;
  height: 0;
}

/* Tooltip arrow - right edge, pointing right (tooltip on left of target) */
.chopstats-stat-tooltip.chopstats-stat-tooltip-left::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
  border: 6px solid transparent;
  border-left-color: #2d3748;
  width: 0;
  height: 0;
}

.chopstats-stat-tooltip.chopstats-stat-tooltip-visible {
  opacity: 1;
  visibility: visible;
}