/* Edition market — the ledger page of the edition dossier.
 *
 * Every colour here comes from theme.css. The eight --market-* tokens below are
 * hex MIRRORS of the theme tokens named in their trailing comment, not a private
 * palette: edition_market.test.js runs WCAG contrast maths on them, which needs
 * literal hex, and a companion test pins each value to its theme.css token so the
 * page can never drift off-theme again. Change theme.css, change these together.
 *
 * The publisher hue is decorative only (page wash + masthead rule). It never drives
 * an action, a focus ring, or a control boundary — a yellow publisher would sink them.
 */

[x-cloak] {
  display: none !important;
}

.edition-market {
  --market-publisher: hsl(var(--pub-h) 52% 52%);
  --market-publisher-soft: hsl(var(--pub-h) 48% 52% / 0.1);

  --market-surface: #f1ece3;         /* --bg */
  --market-panel: #fdfaf4;           /* --surface */
  --market-text: #2b2721;            /* --text */
  --market-muted: #564e3c;           /* --text-muted */
  --market-action-bg: #754fbc;       /* --brand */
  --market-action-fg: #fdfaf4;       /* --on-brand */
  --market-focus: #754fbc;           /* --brand */
  --market-control-border: #8a7b5f;  /* --border-strong — the neutral that owns the 3:1 control boundary */

  /* The market's meaning system. These four accents are already the chart's first
   * series colours, so the tape and the graph read as one key. */
  --market-retail: var(--accent-canonical);   /* stores — the same gold as the edition price */
  --market-ask: var(--accent-recent);         /* supply */
  --market-bid: var(--accent-interest);       /* demand — the theme's own "want" hue */
  --market-sale: var(--success);              /* settled */

  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  padding: 1.25rem 0 4rem;
  /* A single publisher wash off the top, over the site's own page glow. */
  background: linear-gradient(180deg, var(--market-publisher-soft), transparent 22rem);
}

[data-theme="dark"] .edition-market {
  --market-surface: #0d0d0d;         /* --bg */
  --market-panel: #181715;           /* --surface */
  --market-text: #e9e8e6;            /* --text */
  --market-muted: #a7a6a3;           /* --text-muted */
  --market-action-bg: #aa8bff;       /* --brand */
  --market-action-fg: #1b1729;       /* --on-brand */
  --market-focus: #aa8bff;           /* --brand */
  --market-control-border: #72706c;  /* --border-strong */
}

.edition-market > .container {
  width: min(70rem, calc(100% - 2rem));
  max-width: 70rem;
  min-width: 0;
  margin-inline: auto;
  padding-inline: 0;
}

.edition-market a {
  color: var(--brand);
}

.edition-market__breadcrumbs {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  min-width: 0;
  margin-bottom: 1.2rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.edition-market__breadcrumbs a {
  max-width: min(42vw, 28rem);
  overflow: hidden;
  color: var(--text-muted);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-market__breadcrumbs a:hover {
  color: var(--brand);
}

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

.edition-market__header {
  position: relative;
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: end;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

/* The one place the publisher shows its colour: it thickens the header's own rule. */
.edition-market__header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 4.5rem;
  height: 2px;
  background: var(--market-publisher);
}

.edition-market__object {
  position: relative;
  width: 100%;
  margin: 0;
}

.edition-market__cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.edition-market__cover--placeholder {
  object-fit: contain;
}

.edition-market__identity {
  min-width: 0;
}

.edition-market__eyebrow,
.edition-market__section-kicker {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.edition-market__identity h1 {
  max-width: 21ch;
  margin: 0.5rem 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.edition-market__edition-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.edition-market__msrp {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  margin: 0.85rem 0 0;
  font-variant-numeric: tabular-nums;
}

.edition-market__msrp > span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.edition-market__msrp strong {
  color: var(--text);
  font-size: 1.05rem;
}

.edition-market__msrp small {
  color: var(--text-muted);
}

.edition-market__actions,
.edition-market__order-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

/* The page's primary action, on the theme's brand — matches .cc-btn--primary. */
.edition-market__actions [data-edition-market-action="ask"] {
  border-color: var(--market-action-bg);
  background: var(--market-action-bg);
  color: var(--market-action-fg);
}

.edition-market__actions [data-edition-market-action="ask"]:hover {
  filter: brightness(0.96);
}

/* ---- list / bid form ----------------------------------------------- */

.edition-market__order-form-wrap {
  width: 100%;
}

.edition-market__order-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin-top: 1.15rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.edition-market__order-form-heading,
.edition-market__order-form-actions,
.edition-market__order-note,
.edition-market__order-hint,
.edition-market__order-error {
  grid-column: 1 / -1;
}

.edition-market__order-form-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.edition-market__order-form-heading h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
}

.edition-market__order-form label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.edition-market__order-form input,
.edition-market__order-form select {
  width: 100%;
  min-width: 0;
  min-height: 2.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--market-control-border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
}

.edition-market__order-form input:focus,
.edition-market__order-form select:focus {
  border-color: var(--brand);
}

.edition-market__order-hint,
.edition-market__order-error {
  margin: 0;
  font-size: 0.82rem;
}

.edition-market__order-hint {
  color: var(--text-muted);
}

.edition-market__order-error {
  color: var(--status-danger-fg);
}

/* "Who can see this?" — the public/private choice on a want (bid side only). */
.edition-market__visibility {
  grid-column: 1 / -1;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.edition-market__visibility legend {
  padding: 0;
  margin-bottom: .25rem;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.edition-market__order-form .edition-market__visibility-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}
.edition-market__order-form .edition-market__visibility-option input {
  width: auto;
  margin: 0;
}
.edition-market__visibility-trigger {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: 600 .7rem/1 var(--font-body, system-ui, sans-serif);
  opacity: .75;
}
.edition-market__visibility-trigger:hover,
.edition-market__visibility-trigger:focus-visible { opacity: 1; }
.edition-market__visibility-help .cc-explainer__bubble { font-weight: 400; text-align: left; }
.edition-market__order-notice {
  margin: .6rem 0 0;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--status-success-fg, #2e7d32) 12%, transparent);
  font-size: .9rem;
}

/* ---- the price tape ------------------------------------------------ */
/* Four facts as one ruled strip, not four floating dashboard widgets. Each cell is
 * keyed by the accent its number belongs to, and the chart draws the same four
 * colours, so tape and graph read as one key. */

.edition-market__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.75rem 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.edition-market__metric {
  position: relative;
  min-width: 0;
  padding: 1.15rem clamp(0.85rem, 2vw, 1.35rem) 1.05rem;
}

.edition-market__metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--metric-accent, var(--border));
}

.edition-market__metric[data-metric="retail-low"] {
  --metric-accent: var(--market-retail);
}

.edition-market__metric[data-metric="lowest-ask"] {
  --metric-accent: var(--market-ask);
}

.edition-market__metric[data-metric="highest-bid"] {
  --metric-accent: var(--market-bid);
}

.edition-market__metric[data-metric="last-sale"] {
  --metric-accent: var(--market-sale);
}

.edition-market__metric + .edition-market__metric {
  border-left: 1px solid var(--border);
}

.edition-market__metric-label,
.edition-market__metric-value,
.edition-market__metric-note {
  margin: 0;
}

.edition-market__metric-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.edition-market__metric-value {
  margin-top: 0.4rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.edition-market__metric-note {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

/* ---- cheaper printing callout -------------------------------------- */
/* Sits under the price tape it contradicts: the tape's retail low is this
 * printing's, and the callout names a cheaper printing of the same book. */

.edition-market__cheaper {
  margin: 0.85rem 0 0;
  padding: 0.8rem clamp(0.85rem, 2vw, 1.35rem);
  border: 1px solid var(--border);
  border-left: 3px solid var(--market-retail);
  border-radius: var(--radius);
  background: var(--surface);
}

.edition-market__cheaper-label {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.edition-market__cheaper-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 0.35rem;
  color: var(--text);
  text-decoration: none;
}

.edition-market__cheaper-link:hover .edition-market__cheaper-title,
.edition-market__cheaper-link:focus-visible .edition-market__cheaper-title {
  text-decoration: underline;
}

.edition-market__cheaper-title {
  font-weight: 600;
}

.edition-market__cheaper-price {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.edition-market__cheaper-savings {
  color: var(--text);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ---- sections ------------------------------------------------------ */

.edition-market__history,
.edition-market__current,
.edition-market__sales {
  min-width: 0;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  /* /sales tiles deep-link to #current-offers; without an offset the heading
     lands underneath the sticky header. */
  scroll-margin-top: 5rem;
}

.edition-market__history {
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.edition-market__section-heading {
  display: flex;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  min-width: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.edition-market__section-heading h2 {
  margin: 0.25rem 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.edition-market__section-heading--wide {
  grid-column: 1 / -1;
}

.edition-market__range {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.edition-market__basis {
  margin: 0.7rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---- history controls ---------------------------------------------- */

.edition-market__history-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: end;
  margin-top: 1.1rem;
}

.edition-market__history-controls fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.edition-market__history-controls legend {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.edition-market__range-controls,
.edition-market__retailer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The range buttons are .cc-chip (a theme primitive). aria-pressed is this page's
 * active state, so map it onto the chip's own .is-active treatment. */
.edition-market__range-button[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.edition-market__range-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.edition-market__retailer-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--market-control-border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
}

.edition-market__retailer-toggle:hover {
  border-color: var(--brand);
}

.edition-market__retailer-toggle input {
  accent-color: var(--brand);
}

.edition-market__retailer-toggle small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.edition-market__sale-key {
  align-self: center;
  padding: 0.25rem;
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* Name the colour the chart draws confirmed sales in. */
.edition-market__sale-key::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--market-sale);
}

.edition-market__history-status {
  min-height: 1.5rem;
  margin-top: 0.65rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.edition-market__history-status p {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0;
}

/* ---- chart --------------------------------------------------------- */

.edition-market__chart {
  max-width: 100%;
  margin: 0.75rem 0 0;
  overflow: hidden;
}

/* Past a few dozen observations the drawing widens rather than compressing
 * further, and scrolls here. The stage — not this scroller — stays the
 * tooltip's positioning context, so it must size to the widened SVG. */
.edition-market__chart-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Tooltip coordinates are percentages of the drawing, so the positioning
 * context must be the SVG's own box — the figure also contains the
 * figcaption, which would displace the anchor. `fit-content` keeps that true
 * when the SVG overflows the scroller; `min-width` keeps it true when it
 * does not. */
.edition-market__chart-stage {
  position: relative;
  width: fit-content;
  min-width: 100%;
}

.edition-market__chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 8 / 3;
  color: var(--brand);
}

.edition-market__chart-grid line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.edition-market__chart-grid text {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Confirmed sales are the settled record — the same green as the Last sale cell. */
.edition-market__chart-sales {
  color: var(--market-sale);
}

.edition-market__chart figcaption {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Ring around the point the pointer is nearest to. */
.edition-market__chart-focus {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* The hover readout. Position, offset, and visibility all come from one inline
 * style (see chartTipStyle) so display never fights a separate x-show binding. */
.edition-market__chart-tip {
  position: absolute;
  z-index: 2;
  max-width: 18rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.74rem;
  line-height: 1.35;
  pointer-events: none;
}

.edition-market__chart-tip strong {
  display: block;
  color: var(--text);
  font-size: 0.76rem;
}

.edition-market__chart-tip span {
  color: var(--text-muted);
}

/* ---- tables -------------------------------------------------------- */

/* A long-tracked edition runs to hundreds of observations. The table windows
 * to the most recent rows, and what is on screen scrolls inside its own box
 * rather than pushing the rest of the page down. */
.edition-market__table-wrap {
  max-width: 100%;
  max-height: 30rem;
  margin-top: 1.1rem;
  overflow: auto;
  border-top: 1px solid var(--border);
}

/* Rows outlive the header on screen once the box scrolls, so pin it. The
 * background is opaque on purpose -- rows scroll underneath it. */
.edition-market__history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--border);
}

.edition-market__history-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
}

.edition-market__history-count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.edition-market__history-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.edition-market__history-omitted td {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: italic;
}

.edition-market__history-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.edition-market__history-table caption {
  padding: 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: left;
}

.edition-market__history-table th,
.edition-market__history-table td {
  padding: 0.62rem 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.edition-market__history-table th {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.edition-market__history-table tbody tr:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* ---- current / sales panels ---------------------------------------- */

.edition-market__current,
.edition-market__sales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.edition-market__panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.edition-market__panel h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Each panel carries the accent of the tape cell it explains. */
.edition-market__panel h3::before {
  content: "";
  width: 3px;
  height: 0.9rem;
  border-radius: 2px;
  background: var(--panel-accent, var(--border));
}

.edition-market__panel:has(#retailer-offers-title) {
  --panel-accent: var(--market-retail);
}

.edition-market__panel:has(#community-asks-title),
.edition-market__panel:has(#bundle-offers-title) {
  --panel-accent: var(--market-ask);
}

.edition-market__panel:has(#community-bids-title) {
  --panel-accent: var(--market-bid);
}

.edition-market__panel:has(#single-sales-title),
.edition-market__panel:has(#bundle-sales-title) {
  --panel-accent: var(--market-sale);
}

.edition-market__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edition-market__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
  padding: 0.85rem 0.95rem;
}

.edition-market__row + .edition-market__row {
  border-top: 1px solid var(--border);
}

.edition-market__row:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* The offer a deep link named -- /admin/wantlist points at the store whose
 * price the want-list row is quoting. A tint plus a rule on the leading edge,
 * both keyed to --market-focus: no ink changes colour, so the neutral ramp
 * still measures against the surface underneath. */
.edition-market__row--focus {
  background: color-mix(in srgb, var(--market-focus) 12%, transparent);
  box-shadow: inset 3px 0 0 0 var(--market-focus);
}

.edition-market__row--focus:hover {
  background: color-mix(in srgb, var(--market-focus) 18%, transparent);
}

/* A linked row is one tap target: its primary anchor stretches over the whole
 * row via ::before, and any other actions inside the row are lifted above it. */
.edition-market__row--linked {
  position: relative;
}

.edition-market__row-link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.edition-market__row--linked .edition-market__contact {
  position: relative;
  z-index: 1;
}

/* Focus outlines the whole tile the link now covers, not just the label. */
.edition-market .edition-market__row-link:focus-visible {
  outline: none;
}

.edition-market__row-link:focus-visible::before {
  outline: 2px solid var(--market-focus);
  outline-offset: -2px;
}

.edition-market__row--linked:hover .edition-market__row-link strong {
  color: var(--brand);
  text-decoration: underline;
}

.edition-market__row > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.edition-market__row strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

/* The row's name cell is a grid item that stacks against the availability
 * and observed-date lines below it; within that one cell, the logo chip and
 * the store name must sit side by side rather than relying on inline flow
 * (the chip's inline-flex box is taller than the text, so unstyled inline
 * flow baseline-aligns them unevenly). */
.edition-market__store-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.edition-market__row a {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.edition-market__row a:hover strong {
  color: var(--brand);
  text-decoration: underline;
}

.edition-market__row span,
.edition-market__row time {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Remainder-mark disclosure dot (Book Outlet publisher-overstock rows). Shared
   markup/wording with the dossier rails (source-dossier.css) -- this page
   loads its own stylesheet instead, so the rule is duplicated rather than
   pulling in source-dossier.css wholesale. A dot rather than text so it costs
   no row space; the tooltip text lives in a shared .cc-explainer__bubble
   (theme.css), reached via a real <button class="... cc-explainer__trigger">
   -- valid here because this dot is a SIBLING of the row's anchor
   (.edition-market__row-link), never its descendant, so a focusable trigger
   does not collide with the anchor's own content model or double-fire its
   navigation. Contrast with source-dossier.css's .rail-note-dot-wrap, where
   the dossier rail's whole row IS the anchor and a real button would be
   invalid there. Lifted above the row's stretched ::before via
   .rail-note-dot-wrap below, same trick as .edition-market__contact. */
.edition-market__row--linked .rail-note-dot-wrap {
  position: relative;
  z-index: 1;
}
/* Button reset: cc-explainer__trigger (theme.css) only supplies cursor:help
   and a :focus-visible outline, so this class also has to erase native
   <button> chrome to look like the plain inline dot glyph it replaced. */
.edition-market__row .rail-note-dot {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  opacity: 0.55;
  font-size: 1.1em;
  line-height: 1;
}
.edition-market__row .rail-note-dot:hover,
.edition-market__row .rail-note-dot:focus-visible { opacity: 1; }

.edition-market__row-quote {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  text-align: right;
}

/* Money reads as money, not as a link — the retailer price is an anchor, so this
 * needs to outrank `.edition-market a`. Hover still shows it is clickable. */
.edition-market .edition-market__price {
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

a.edition-market__price:hover {
  color: var(--brand);
  text-decoration: underline;
}

.edition-market .edition-market__retail-price {
  display: grid;
  gap: 0.12rem;
  justify-items: end;
  text-align: right;
  white-space: normal;
}

.edition-market__delivered {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.edition-market__external-link-glyph {
  color: var(--text-muted);
  font-size: 0.72em;
  font-weight: 400;
}

.edition-market__price-split {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Simple external prices get a pseudo glyph. The two-line retailer price owns
 * an inline glyph beside its delivered headline so grid auto-placement cannot
 * create a third row. */
a.edition-market__price[target="_blank"]:not(.edition-market__retail-price)::after {
  content: "↗";
  margin-left: 0.28rem;
  color: var(--text-muted);
  font-size: 0.72em;
  font-weight: 400;
}

.edition-market__row--linked:hover a.edition-market__price,
.edition-market__row--linked:hover a.edition-market__price::after {
  color: var(--brand);
}

.edition-market__row--linked:hover a.edition-market__price {
  text-decoration: underline;
}

.edition-market__shipping {
  display: block;
}

.edition-market__bundle-covers {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 2.4rem;
  margin-top: 0.35rem;
}

.edition-market__bundle-covers .mkt-cover-stack__img {
  display: block;
  width: 1.65rem;
  height: 2.4rem;
  margin-left: -0.45rem;
  border: 2px solid var(--surface);
  border-radius: 3px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.edition-market__bundle-covers .mkt-cover-stack__img:first-child {
  margin-left: 0;
}

.edition-market__contact {
  min-height: 1.9rem;
  margin-top: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
}

.edition-market__empty {
  margin: 0.9rem;
  padding: 1.15rem 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

/* Notices that sit in the history section are prose, not an empty panel slot. */
.edition-market__history-enhanced > .edition-market__empty,
.edition-market__history-record > .edition-market__empty {
  margin-inline: 0;
  text-align: left;
}

.edition-market :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--market-focus);
  outline-offset: 2px;
}

/* ---- responsive ---------------------------------------------------- */

@media (max-width: 767.98px) {
  .edition-market {
    padding-top: 0.75rem;
  }

  .edition-market > .container {
    width: min(100% - 1.25rem, 70rem);
  }

  .edition-market__breadcrumbs a {
    max-width: 34vw;
  }

  .edition-market__header {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .edition-market__identity h1 {
    font-size: clamp(1.55rem, 9vw, 2.6rem);
  }

  .edition-market__edition-line {
    font-size: 0.78rem;
  }

  .edition-market__actions {
    grid-column: 1 / -1;
  }

  .edition-market__actions .cc-btn {
    flex: 1 1 auto;
  }

  .edition-market__order-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .edition-market__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edition-market__metric:nth-child(3) {
    border-left: 0;
  }

  .edition-market__metric:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .edition-market__history-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .edition-market__chart svg {
    min-height: 13rem;
  }

  .edition-market__current,
  .edition-market__sales {
    grid-template-columns: minmax(0, 1fr);
  }

  .edition-market__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* The six-column ledger needs 40rem to lay out, so on a phone it used to
   * scroll sideways with Stock and Shipping parked off-screen. Stack each
   * observation into a two-line card instead: date + price on top, source +
   * stock beneath. The header row becomes redundant once every cell is
   * positioned, so it is hidden from sight but left for screen readers. */
  .edition-market__history-table {
    min-width: 0;
  }

  .edition-market__history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .edition-market__history-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.75rem;
    padding: 0.6rem 0.15rem;
    border-bottom: 1px solid var(--border);
  }

  .edition-market__history-table tbody td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .edition-market__history-table tbody td[data-label="Date"] {
    grid-area: 1 / 1;
    font-weight: 600;
  }

  .edition-market__history-table tbody td[data-label="Item price"] {
    grid-area: 1 / 2;
    text-align: right;
    font-weight: 600;
  }

  .edition-market__history-table tbody td[data-label="Source"] {
    grid-area: 2 / 1;
    color: var(--text-muted);
    font-size: 0.74rem;
  }

  .edition-market__history-table tbody td[data-label="Stock"] {
    grid-area: 2 / 2;
    color: var(--text-muted);
    font-size: 0.74rem;
    text-align: right;
  }

  /* Source already reads "Cheap Graphic Novels" or "Community sale", so the
   * Type cell repeats it. Shipping is "—" on every retail observation and
   * carries a real value only on a confirmed sale. */
  .edition-market__history-table tbody td[data-label="Type"],
  .edition-market__history-table tbody tr:not(.is-sale) td[data-label="Shipping"] {
    display: none;
  }

  .edition-market__history-table tbody tr.is-sale td[data-label="Shipping"] {
    grid-area: 3 / 1 / auto / -1;
    color: var(--text-muted);
    font-size: 0.72rem;
  }

  .edition-market__history-table tbody tr.is-sale td[data-label="Shipping"]::before {
    content: "Shipping: ";
  }

  .edition-market__history-table tbody tr.edition-market__history-omitted {
    display: block;
  }

  .edition-market__history-table tbody tr.edition-market__history-omitted td {
    display: block;
  }
}

@media (max-width: 420px) {
  .edition-market__breadcrumbs {
    align-items: center;
  }

  .edition-market__breadcrumbs a:nth-of-type(2) {
    max-width: 42vw;
  }

  .edition-market__metric {
    padding-inline: 0.75rem;
  }

  .edition-market__metric-value {
    font-size: 1.35rem;
  }

  .edition-market__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .edition-market__row-quote {
    justify-items: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .edition-market *,
  .edition-market *::before,
  .edition-market *::after {
    scroll-behavior: auto !important;
  }
}

/* ---- price-wait control ---------------------------------------------- */

/* Rendered twice (header + the readers-who-want-this panel) over one piece of
   component state, so both instances always show the same standing target. */
.edition-market__wait {
  margin-top: 1rem;
}

/* The panel has no body padding: rows and the dashed empty box each carry
   their own inset. In the header the page grid supplies the gutter; here the
   control has to bring it, and it borrows .edition-market__empty's 0.9rem so
   the chip's left edge lines up with the box below it. */
.edition-market__panel > .edition-market__wait {
  margin: 0.9rem 0.9rem 0;
}

.edition-market__wait-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* The armed states are read as state, not decoration: --border-strong is the
   non-text edge token, so the ring clears the 3:1 floor on every surface this
   control lands on without borrowing a text colour. */
.edition-market__wait-action.is-armed {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--market-action-bg) 12%, transparent);
}

.edition-market__wait-action.is-met {
  border-color: var(--market-action-bg);
  background: var(--market-action-bg);
  color: var(--market-action-fg);
}

.edition-market__wait-state {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.edition-market__wait-form {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

.edition-market__wait-label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.edition-market__wait-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.edition-market__wait-currency {
  color: var(--text-muted);
}

.edition-market__wait-input {
  flex: 1 1 7rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.edition-market__wait-hint,
.edition-market__wait-error {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.edition-market__wait-hint.is-warn,
.edition-market__wait-state.is-warn,
.edition-market__wait-error {
  color: var(--text);
}

.edition-market__wait-clear {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .edition-market__wait-field {
    gap: 0.35rem;
  }

  .edition-market__wait-input {
    flex-basis: 100%;
  }
}

/* An empty panel that carries its own way out. The base .edition-market__empty
   is styled for a bare <p>; this modifier lets it hold the sentence plus the
   action without the dashed box changing shape. */
.edition-market__empty--offer {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

.edition-market__empty--offer > p {
  margin: 0;
}

.edition-market__empty-action {
  font-size: 0.82rem;
}