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

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

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

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

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