/* 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;
}

/* Per-coin avg/max summary now reuses .chopstats-summary (the top-of-page
   summary card class), so it picks up the same rounded bg + border. The
   --chopmarks modifier exists for future targeted tweaks; no extra rules
   needed for now. */
.chopstats-summary--chopmarks {
  margin-top: 1.5rem;
}

/* 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;
}

/* 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;
}

/* 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%;
  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;
}

.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;
}