/* Full-bleed shell (ahg-4z16a). The card page is part of the /market page
   family: `body.mkt-body` (market.css) strips the global boxed `.container`
   + 32px body padding, the header is the shared `market/_header` chrome, and
   the shell inherits `.mkt-page`'s full 2000px width. `.cd-page` just holds
   content -- the gutter belongs to `.mkt-page`. */
.cd-mkt-page .cd-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Individual item detail page (ahg-wt7u7). Scoped to .cd-page -- follows
   DESIGN.md flat physics (fill + space, no lines, no in-flow shadow) and the
   design_tokens.css tokens. Mobile-first hard minimums: 14px body, 44px tap
   targets, 13px label floor. */

/* The breadcrumb renders in the shared /market `.bar` / `.bar-title` /
   `.bar-up` (market.css) so it is visually identical to the set and game
   pages (ahg-4z16a). */
.cd-page .bar { margin-bottom: 24px; }

/* ---------------------------------------------------------------------------
   Page grid: this printing (hero, price history, recent sales) on the left,
   sibling printings on the right. Below 900px the printings column drops
   under the main column. */
.cd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 48px;
  row-gap: 32px;
  align-items: start;
}
.cd-main { min-width: 0; }
.cd-col-printings { min-width: 0; }

/* Below ~1180px the hero + chart can't share a row with a 400px printings
   table without the set names wrapping into ransom-note columns, so the
   printings drop under the main column and their table stops at a readable
   width instead of splaying year/price across the whole viewport. */
@media (max-width: 1180px) {
  .cd-layout { grid-template-columns: minmax(0, 1fr); }
  .cd-col-printings { max-width: 640px; }
}

/* ---------------------------------------------------------------------------
   Hero: art on the left spanning the facts, actions and summary rows. On a
   phone the art becomes a thumbnail beside the facts and the actions +
   summary drop under both, so the buy button never squeezes into the
   narrow column next to a thumbnail. */
.cd-hero {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 32px;
}
/* Rows are auto-placed and spaced by margins (not row-gap) so the optional
   version / finish rows cost nothing when absent. */
.cd-art { grid-column: 1; grid-row: 1 / span 7; }
.cd-facts,
.cd-hero > .cd-version-switch,
.cd-hero > .cd-finish,
.cd-actions,
.cd-cheapest-note,
.cd-venue-actions,
.cd-agent-block { grid-column: 2; min-width: 0; }
.cd-facts { margin-bottom: 16px; }
.cd-hero > .cd-version-switch { margin-bottom: 14px; }
.cd-hero > .cd-finish { margin-bottom: 20px; }

@media (max-width: 640px) {
  body.mkt-body:has(.cd-sticky-cta:not([hidden])) {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  }
  .cd-hero {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 16px;
    margin-bottom: 24px;
  }
  .cd-art { grid-row: 1; }
  .cd-facts { align-self: center; margin-bottom: 0; }
  .cd-hero > .cd-version-switch,
  .cd-hero > .cd-finish,
  .cd-actions,
  .cd-cheapest-note,
  .cd-venue-actions,
  .cd-agent-block { grid-column: 1 / -1; }
  .cd-hero > .cd-version-switch { margin-top: 16px; }
  .cd-hero > .cd-finish { margin-top: 4px; margin-bottom: 16px; }
  .cd-hero > .cd-version-switch + .cd-actions,
  .cd-facts + .cd-actions { margin-top: 16px; }
}

.cd-card-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  line-height: 0;
}
.cd-card-img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}
.cd-no-img {
  width: 100%;
  aspect-ratio: 5 / 7;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-meta);
}
@media (max-width: 640px) {
  .cd-card-img-wrap, .cd-card-img, .cd-no-img { border-radius: var(--radius-md); }
}

/* ahg-qdwmh: "Report wrong image" over a customer_scan art override. */
.cd-report-wrong-image-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}
.cd-report-wrong-image-status {
  margin-top: 6px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.cd-report-wrong-image-status--hidden { display: none; }

/* Facts stack: title, set line, version switcher, ownership, finish. */
.cd-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 6px;
  overflow-wrap: break-word;
}
.cd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}
.cd-meta-number,
.cd-meta-year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .cd-title { font-size: 22px; }
}

/* Change-version printing switcher (ahg-4i553). A select needs a found edge,
   so it keeps its hairline. */
.cd-version-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.cd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cd-version-select {
  max-width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  padding: 8px 30px 8px 12px;
  min-height: 40px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8a29e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.cd-version-select:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 1px; }
@media (max-width: 640px) {
  .cd-version-select { min-height: 44px; font-size: var(--fs-input); }
}

.cd-own {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin-top: 10px;
}
.cd-own-qty {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

/* Normal/Foil finish toggle (ahg-25j3e). Switches the price inside the buy
   button and re-points the chart + comps -- both server-rendered up front,
   swapped client-side. Amber fill is the single active signal. */
.cd-finish {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
/* Same track + amber-TINT active as market.css's .seg--quiet range control:
   the buy button is the page's one solid amber, so the toggle stays quiet. */
.cd-finish-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.cd-finish-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms ease-in-out, color 100ms ease-in-out;
}
.cd-finish-btn:hover { background: var(--bg-tertiary); }
.cd-finish-btn:focus:not(:focus-visible) { outline: none; }
.cd-finish-btn:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }
.cd-finish-btn--active,
.cd-finish-btn--active:hover {
  background: var(--amber-tint);
  color: var(--accent-amber);
  font-weight: 600;
}
@media (max-width: 640px) {
  .cd-finish-btn { min-height: 40px; }
}

/* Preorder context: why the market price is blank. Flat fill, no tint wall. */
.cd-preorder-note {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

/* Actions row: market-price fact + buy CTA + disclosure. */
.cd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Market price reference (ahg-bn1jb.1): a labeled fact, never folded into the
   buy button's own copy -- physics rule 3 (signal via color/text, not
   chrome), so it reads as data, not another button. #cd-market-price keeps
   its id; only its wording/position moved out of "Buy for $X". */
.cd-market-ref {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.cd-market-ref-label {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.cd-affiliate-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.cd-affiliate-note--foot { margin: 16px 0 0; }

/* Cheapest-printing callout (ahg-5myrt.7): sits outside .cd-actions so it
   never collides with that block's own edits. */
.cd-cheapest-note {
  margin: 10px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.cd-cheapest-buy {
  margin-left: 4px;
  color: var(--text-secondary);
  text-decoration: none;
}
.cd-cheapest-buy:hover { text-decoration: underline; }

/* Card Kingdom buylist buttons (ahg-5lwp7): ghost buttons, one per finish,
   in a wrapping row under the cheapest-printing note. Amber stays with the
   TCGplayer CTA. */
.cd-venue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cd-venue-btn {
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary "Buy on TCGplayer" CTA (ahg-rb2rf): the affiliate link is the money
   action for organic visitors, so it gets the solid amber fill. The gap keeps
   the words apart -- a flex container drops the whitespace between them. */
.cd-tcg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 44px;
  padding: 8px 18px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: #1c1310;
  background: var(--accent-amber);
  border: 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
}
.cd-tcg-link:hover { filter: brightness(1.08); }
/* Reused for the market-price fact value (.cd-market-ref) and the mobile
   sticky CTA's own price echo (.cd-sticky-cta-price) -- same mono/weight
   treatment wherever a price is the thing being read, not just inside the
   button anymore (ahg-bn1jb.1). */
.cd-tcg-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Mobile persistent buy CTA (ahg-bn1jb.1): a slim fixed bottom bar, shown
   only once the hero's own buy button scrolls out of view (card_detail.js
   IntersectionObserver toggles [hidden]) and only below the phone
   breakpoint -- desktop and tablet keep the hero CTA in the normal reading
   flow and never need a second one. `[hidden]` (not a class) drives
   visibility so it's out of the accessibility tree and tab order until JS
   clears it. */
.cd-sticky-cta { display: none; }
@media (max-width: 640px) {
  .cd-sticky-cta:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-secondary);
  }
}
.cd-sticky-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-sticky-cta-price { flex-shrink: 0; }
.cd-sticky-reference {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
}
.cd-sticky-cta-row .cd-tcg-link {
  flex: 1 1 auto;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.cd-sticky-cta-note {
  margin: 6px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

/* Ask-an-agent (ahg-3sd7r), demoted lower in the decision hierarchy
   (ahg-bn1jb.1): its own block after the buy CTA + cheapest-printing
   callout, not sharing a row with the buy button anymore. The trigger is a
   plain .cdx-ghost-btn; the expanded row of agent chips sits in flow under
   it, so nothing floats over the buy button or the chart. */
.cd-agent-block { margin-top: 14px; }
.cd-agent-trigger { white-space: nowrap; }
.cd-agent-caret { transition: transform 0.15s ease; }
.cd-agent-trigger[aria-expanded="true"] .cd-agent-caret { transform: rotate(180deg); }
.cd-agent-menu {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.cd-agent-menu[hidden] { display: none; }
.cd-agent-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.cd-agent-item:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.cd-agent-item:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }
.cd-agent-icon { flex: 0 0 auto; }
@media (max-width: 640px) {
  .cd-agent-item { min-height: 44px; }
}

/* One-sentence factual summary (ahg-99x5k) -- the same string as the JSON-LD
   Product description, so visible copy and structured data never drift.
   Sits with the attribution line at the foot of the page. */
.cd-summary {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 32px 0 0;
  max-width: 640px;
}

/* ---------------------------------------------------------------------------
   Sections */
.cd-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0 0 12px;
}
.cd-no-history {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  padding: 6px 0;
}

/* Price history sits on the page like every other section (no box). The
   chart module renders the SVG at the column's pixel width, so axis and
   legend text stay at real 13px instead of scaling with the column. The
   "Compare reprints" toggle (.pb-actions, price_bucket_chart.js) moves under
   the chart, left-aligned, instead of hanging off the far right edge. */
.cd-col-chart .pb-weekly-chart {
  display: flex;
  flex-direction: column;
}
.cd-col-chart .pb-actions {
  order: 9;
  justify-content: flex-start;
  margin: 12px 0 0;
}

/* ahg-i97wq: title + range control share one row; the chart module fills
   the slot (price_bucket_chart.js _pbRangeControl) with a market.css
   .seg.seg--quiet, so the control matches the market pages. */
.cd-chart-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.cd-chart-hd .cd-section-title { margin: 0; }
.cd-chart-hd [data-pb-range-slot]:empty { display: none; }

/* Legend + the phone-width ladder row under the chart. */
.pb-legend,
.pb-ladder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.pb-legend span,
.pb-ladder-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pb-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-blue);
  display: inline-block;
}
.pb-legend-line {
  width: 14px;
  height: 2px;
  background: var(--accent-blue);
  display: inline-block;
}
.pb-legend-line--you { background: var(--accent-amber); }
.pb-ladder-row { color: var(--text-secondary); }
.pb-ladder-row b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}
.pb-ladder-row-cap { color: var(--text-muted); }
.pb-ladder-row-you b { color: var(--accent-amber); }
.pb-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Recent sales comps (ahg-f1pn9): a short date / condition / price list.
   Capped so the price column sits near the date instead of at the far edge
   of a full-bleed row. */
.cd-recent-sales { margin-top: 32px; }
.cd-recent-sales .recent-sales-comps { max-width: 560px; }
.cd-recent-sales .recent-sales-comps td:first-child { width: 88px; }
.cd-recent-sales .recent-sales-comps td:last-child { width: 112px; }
.cd-recent-sales .recent-sales-comps tr:nth-child(even) td { background: var(--zebra); }

/* Link pattern: internal action (see DESIGN.md > Links). */
.cd-page .link-internal {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  transition: border-color 100ms ease;
  cursor: pointer;
}
.cd-page .link-internal:hover { border-bottom-color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Other printings table (ahg-hxlw4). A long list scrolls inside a bounded
   panel on desktop so it never towers over the main column. */
.cd-reprints-note {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  margin-bottom: 12px;
}
.cd-reprints-scroll {
  max-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 1180px) {
  .cd-reprints-scroll { max-height: none; }
}

.cd-reprints-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.cd-reprints-table thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 8px;
}

/* Col widths: thumb | set name | year | price | badge. Price column is
   widened over the old plain-text width (86px) to fit the filled "Buy $X"
   button below without wrapping. */
.cd-reprint-td-icon  { width: 38px; }
.cd-reprint-td-year  { width: 50px; }
.cd-reprint-td-price { width: 108px; }
.cd-reprint-td-badge { width: 74px; text-align: right; padding-left: 0; }

.cd-printing-row td {
  padding: 10px 8px;
  vertical-align: middle;
}
.cd-printing-row:nth-child(even) td { background: var(--zebra); }

/* Card-art thumbnail leading each reprint row (ahg-9yy9a). */
.cd-reprint-thumb {
  width: 30px;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--bg-card-hover);
}
.cd-reprint-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.cd-reprint-icon--placeholder {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--bg-card-hover);
  border-radius: 3px;
}
.cd-reprint-link {
  color: var(--text-primary);
  text-decoration: none;
}
.cd-reprint-link:hover .cd-printing-row-set { text-decoration: underline; }
.cd-printing-row-set {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-primary);
}
.cd-reprint-td-year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.cd-reprint-td-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
/* Per-row buy link (ahg-5myrt.7), rendered as a real filled button (not a
   colored price link -- that read as inert plain text). Mirrors the hero
   .cd-tcg-link CTA's amber-fill treatment, scaled down for the table row, so
   the "Buy $X" affordance is unmistakable at a glance. */
.cd-reprint-td-price a.cd-printing-row-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 8px;
  font-weight: 700;
  color: #1c1310;
  background: var(--accent-amber);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}
.cd-reprint-td-price a.cd-printing-row-buy:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .cd-reprint-td-price a.cd-printing-row-buy {
    min-height: 44px;
  }
}
.cd-reprint-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}
.cd-reprint-badge--current {
  background: var(--amber-tint);
  color: var(--accent-amber);
}
.cd-reprint-badge--owned {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .cd-printing-row td { padding: 8px 6px; }
  .cd-reprints-table thead th { padding: 8px 6px; }
  .cd-reprint-td-icon  { width: 34px; }
  .cd-reprint-td-year  { width: 40px; }
  /* Widened from 62px (the old plain-text price width) so the "Buy $X"
     button fits without wrapping; the badge column shrinks to compensate
     since Set/Year/Icon are already at their floor. */
  .cd-reprint-td-price { width: 90px; }
  .cd-reprint-td-badge { width: 58px; }
  .cd-reprint-td-price a.cd-printing-row-buy { padding: 6px 4px; font-size: var(--fs-label); }
  .cd-reprint-thumb { width: 26px; }
}

/* ---------------------------------------------------------------------------
   Chart overlays owned by card_detail.js (set-icon markers, the seller's own
   sale dots). Additive-only: price_bucket_chart.js never emits these. */
.cd-chart-marker-icon { pointer-events: none; }
.cd-chart-marker-dot {
  fill: var(--text-muted);
  pointer-events: none;
}
.cd-sale-dot {
  fill: var(--accent-amber);
  stroke: var(--bg-primary);
  stroke-width: 1.5;
}
.cd-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-label);
}
.cd-chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-amber);
}
.cd-chart-legend-note { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   Signed-in only: the seller's own inventory + sales for this card, side by
   side when the width allows. Never a page gate. */
.cd-you {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 32px 48px;
  margin-top: 40px;
}
.cd-holdings, .cd-your-sales { min-width: 0; }

.cd-status-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.cd-status-pill--success { background: var(--green-tint); color: var(--accent-green); }
.cd-status-pill--warning { background: var(--amber-tint); color: var(--accent-amber); }
.cd-status-pill--error   { background: var(--rose-tint);  color: var(--accent-rose); }
.cd-status-pill--neutral { background: var(--bg-card-hover); color: var(--text-secondary); }

/* ahg-z4fqa: link back to the dashboard manage panel for an owned SKU. */
.cd-manage-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 14px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--accent-amber);
  text-decoration: none;
}
.cd-manage-link:hover { text-decoration: underline; }

.cd-holdings-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.cd-holdings-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 12px;
}
.cd-holdings-table td {
  padding: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cd-holdings-table tbody tr:nth-child(even) { background: var(--zebra); }

/* "Your sales" (ahg-wrga4): card_sales_history.js fills .card-sales-history
   here exactly as it does the dashboard's Sold tab. dashboard.css.erb owns the
   original .csh-* rules but only loads on the dashboard, so this is a
   deliberate duplicate of the minimal set the module renders here, kept in
   lockstep with dashboard.css.erb's copy. */
.cd-your-sales .csh-stats,
.cd-your-sales .csh-spark-wrap {
  max-width: 640px;
}

.csh-loading, .csh-empty, .csh-error {
  padding: 6px 0;
  color: var(--text-muted);
  font-size: var(--fs-meta);
}

.csh-scope-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
}
.csh-scope-btn {
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
}
.csh-scope-btn:hover { color: var(--text-secondary); }
.csh-scope-btn--active { background: var(--amber-tint); color: var(--accent-amber); }
.csh-scope-btn:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; }

.csh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.csh-stat { min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-secondary); }
.csh-stat-label {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.csh-stat-value {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.csh-stat-sub { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-label); }

.csh-spark-wrap { position: relative; margin-bottom: 4px; }
.csh-spark { display: block; width: 100%; height: 56px; overflow: visible; }
.csh-spark-line { fill: none; stroke: var(--accent-amber); stroke-width: 1.5; }
.csh-spark-market { fill: none; stroke: var(--text-faint); stroke-width: 1; }
.csh-spark-dot { fill: var(--accent-amber); stroke: var(--bg-secondary); stroke-width: 1.5; }
.csh-spark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: var(--fs-label);
}

.csh-table-wrap { overflow-x: hidden; }
.csh-table { width: 100%; table-layout: fixed; font-size: var(--fs-label); }
.csh-table th:nth-child(1), .csh-table td:nth-child(1) { width: 15%; }
.csh-table th:nth-child(2), .csh-table td:nth-child(2) { width: 25%; }
.csh-table th:nth-child(3), .csh-table td:nth-child(3) { width: 9%; }
.csh-table th:nth-child(4), .csh-table td:nth-child(4) { width: 21%; }
.csh-table th:nth-child(5), .csh-table td:nth-child(5) { width: 12%; }
.csh-table th:nth-child(6), .csh-table td:nth-child(6) { width: 18%; }
.csh-table th { padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csh-table td { padding: 7px 6px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csh-table .csh-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.csh-condfinish { white-space: normal !important; }
.csh-finish { color: var(--text-muted); }
.csh-price-unknown, .csh-vs-market-unknown { color: var(--text-muted); }
.csh-unpriced-note { display: block; margin-top: 1px; color: var(--text-muted); font-size: var(--fs-label); white-space: normal; }
.csh-price-refunded { color: var(--text-muted); text-decoration: line-through; }
.csh-refund-note { display: block; margin-top: 1px; color: var(--text-muted); font-size: var(--fs-label); white-space: normal; }
.csh-vs-market-up { color: var(--accent-green); }
.csh-vs-market-down { color: var(--accent-rose); }
.csh-order-link, .csh-order-plain { font-family: var(--font-mono); }
.csh-order-link { color: var(--text-secondary); text-decoration: underline dotted; text-underline-offset: 2px; }
.csh-order-link:hover { color: var(--text-primary); }
.csh-order-plain { color: var(--text-muted); }
.csh-truncation-note { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-label); }

/* Mobile stacked rows (<=560px, matches card_sales_history.js's own
   _cshIsMobileLayout breakpoint). */
.csh-rows { display: block; }
.csh-row { padding: 9px 4px; }
.csh-rows .csh-row:nth-child(even) { background: var(--zebra); }
.csh-row-line1, .csh-row-line2 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.csh-row-line1 { align-items: baseline; margin-bottom: 3px; }
.csh-row-line2 { align-items: flex-start; }
.csh-row-date {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.csh-row-price {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.csh-row-price-value { color: var(--text-primary); }
.csh-row-price-refunded { color: var(--text-muted); text-decoration: line-through; }
.csh-row-price-unknown { color: var(--text-muted); }
.csh-row-vs-market { font-size: var(--fs-label); }
.csh-row-detail {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  line-height: 1.4;
}
.csh-row-order { flex-shrink: 0; }

@media (max-width: 560px) {
  .csh-scope-btn { min-height: 44px; padding: 10px 14px; }
  .csh-order-link { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; line-height: 20px; }
}

@media (max-width: 480px) {
  .cd-holdings-table th, .cd-holdings-table td { padding: 8px 4px; }
  .cd-holdings-table th:nth-child(1), .cd-holdings-table td:nth-child(1) { width: 22%; }
  .cd-holdings-table th:nth-child(2), .cd-holdings-table td:nth-child(2) { width: 16%; }
  .cd-holdings-table th:nth-child(3), .cd-holdings-table td:nth-child(3) { width: 12%; }
  .cd-holdings-table th:nth-child(4), .cd-holdings-table td:nth-child(4) { width: 24%; }
  .cd-holdings-table th:nth-child(5), .cd-holdings-table td:nth-child(5) { width: 26%; }
  .cd-status-pill { padding: 4px 8px; }
}