/* ═══ compare.css — shared styles for /compare/ (the hub and every comparison page) ═══
   Design system rollout, Oct 10 2026. Linked after components.css on every
   compare/*.html. Everything here is page-specific to the compare template:
   it styles the compare classes (old hooks such as .toggle-btn and .week-pill
   stay in the markup next to their ds- class) and never restyles a ds- class.
   Section headers, segmented controls, buttons, badges, the rank chip and the
   table come from components.css; this file only places them.
   Charts draw in --bow-data-1..4, read from the tokens by each page's script
   (CMP_SERIES; the hub's COLORS) and assigned by film order.
   Page surface: --bg is --bow-surface-0 (#0A0A0B) since Oct 11; cards and
   panels sit on --bow-surface-1. */

/* ── Back link: .ds-link.ds-link--back; this only spaces its row ── */
.cmp-back-row{margin:0 0 var(--bow-space-5,24px)}

/* ── Section headers: the chart cards' own small titles repeated the header ── */
.chart-card-title{display:none}

/* ── Segmented controls (Daily / Weekend, week pills): placement only ── */
.toggle-bar,.week-pills{margin-bottom:var(--bow-space-4,16px)}

/* ── Legends: a dot in the series colour, the name in ink-2 ── */
.drop-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:var(--bow-space-3,12px)}
.drop-legend-item{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:var(--bow-fs-2,12px);font-weight:var(--bow-fw-semi,600);color:var(--bow-ink-2,#B5B5B8);
}
.drop-legend-dot{width:8px;height:8px;border-radius:50%;flex:none}
#cumLegend{flex-wrap:wrap;row-gap:6px}
#cumLegend > div{font-size:var(--bow-fs-2,12px)!important;color:var(--bow-ink-2,#B5B5B8)!important}

/* ── Head-to-head cards (page-specific) ── */
/* the card frame sits on surface-1 (the page is surface-0 since Oct 11) */
.movie-pair{background:var(--bow-surface-1,#141416)}
/* status badge (.ds-badge.ds-badge--on-image) sits top-right on the backdrop */
.hero-status{position:absolute;top:14px;right:14px;z-index:4}
/* the card footer: a .ds-stats.ds-stats--sm row of Opening / Total / Legs,
   inset from the card edge and ruled off from the artwork above it */
.stat-strip-foot{
  padding:var(--bow-space-3,12px) var(--bow-space-4,16px);
  border-top:1px solid var(--bow-line,rgba(255,255,255,.1));
  background:var(--bow-surface-1,#141416);
}
/* Opening / Total / Legs: three across where the card is wide enough for
   $000.0M at the --sm size, two across on the 4-up desktop row. Phone (QA #8,
   N1): one row in the 2-up grid. Three dollar figures cannot share a 180px
   card, so the phone strip shows Opening and Total at 13px and drops Legs,
   which is Total / Opening. (Total is the run's total; the card's big number
   is the gross at the comparison day, so it must stay.) Gutters are 2px a side so
   two-decimal figures up to $1,234.56M still fit at 402px. */
.stat-strip{--cols:3}
.hero-cards:has(> :nth-child(4)) .stat-strip{--cols:2}
@media(max-width:700px){
  .hero-status{top:8px;right:8px}
  .stat-strip-foot{padding:var(--bow-space-2,8px) 6px var(--bow-space-3,12px)}
  .stat-strip{--cols-phone:2;--ds-stat-px:2px}
  .stat-strip > .stat-strip-item:nth-child(3){display:none}
  .movie-pair .stat-strip .stat-strip-item .stat-strip-value{font-size:var(--bow-fs-3,13px)}
}

/* ── Heatmap (page-specific) ── QA #17: no boxes. Cells are separated by the
   row's 3px gaps on a quiet surface-1 fill (set by the page script); the day's
   winner keeps its series tint and reads ink-1 semibold, the rest ink-2. */
.hm-header-cell{text-transform:none;letter-spacing:0;color:var(--bow-ink-3,#8C8C90)}
.hm-cell{border:0;border-radius:var(--bow-r-sm,4px);font-weight:var(--bow-fw-regular,400)}
.hm-cell.winner{outline:0;font-weight:var(--bow-fw-semi,600)}
.hm-cell:hover{filter:none;transform:none;box-shadow:none}

/* ── Gross breakdown table: numbers right, the day's best value brighter ── */
.simple-table th:not(:first-child),.simple-table td:not(:first-child){text-align:right}
.simple-table td{color:var(--bow-ink-2,#B5B5B8)}
.simple-table td.best{color:var(--bow-ink-1,#FFFFFF);font-weight:var(--bow-fw-semi,600)}

/* ── Chart tooltip card: retokened; series colours are for marks, not text ── */
.bo-tt{background:var(--bow-surface-2,#1C1C1F);border-color:var(--bow-line-strong,rgba(255,255,255,.16))}
.bo-tt .tt-t{color:var(--bow-ink-3,#8C8C90)}
.bo-tt .tt-n{color:var(--bow-ink-2,#B5B5B8)}
.bo-tt .tt-r.lead .tt-v{color:var(--bow-ink-1,#FFFFFF)!important}

/* ── Comparison card: the hub grid and the "More comparisons" rail ──
   One card everywhere. Fan of the films' posters, then eyebrow (the only
   uppercase), title, one-line context. */
.featured-cards,.cmp-rel-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--bow-space-3,12px);margin-bottom:var(--bow-space-2,8px);
}
.featured-card{
  display:flex;align-items:center;gap:20px;min-width:0;
  padding:var(--bow-space-4,16px) 20px;
  border:1px solid var(--bow-line,rgba(255,255,255,.1));border-radius:var(--bow-r-lg,16px);
  background:var(--bow-surface-1,#141416);color:inherit;text-decoration:none;
  transition:background-color var(--bow-dur-1,150ms) var(--bow-ease,cubic-bezier(.2,0,0,1));
}
.featured-card:hover{background:var(--bow-surface-2,#1C1C1F)}
.featured-card:focus-visible{outline:2px solid var(--bow-green,#22C55E);outline-offset:2px}
.fc-fan{display:flex;flex-shrink:0;width:203px;justify-content:center;padding:8px 4px 4px 8px}
.fc-fan img{display:block;width:68px;height:102px;margin-left:-27px;object-fit:cover;
  border-radius:var(--bow-r-md,8px);border:2px solid var(--bow-surface-0,#0A0A0B);
  background:var(--bow-surface-1,#141416);box-shadow:0 8px 22px rgba(0,0,0,.42)}
.fc-fan img:first-child{margin-left:0}
.fc-fan img:nth-child(1){transform:rotate(-7deg)}
.fc-fan img:nth-child(2){transform:rotate(-2deg) translateY(-4px)}
.fc-fan img:nth-child(3){transform:rotate(3deg)}
.fc-fan img:nth-child(4){transform:rotate(8deg) translateY(3px)}
.fc-tx{min-width:0}
.fc-eb{display:block;margin:0 0 var(--bow-space-1,4px);
  font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-data,1.35);
  text-transform:uppercase;letter-spacing:var(--bow-ls-caps,.08em);color:var(--bow-ink-3,#8C8C90)}
.fc-t{display:block;
  font-size:var(--bow-fs-4,15px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-title,1.3);
  color:var(--bow-ink-1,#FFFFFF);text-wrap:balance}
.fc-m{display:block;margin-top:var(--bow-space-1,4px);
  font-size:var(--bow-fs-2,12px);line-height:var(--bow-lh-body,1.5);color:var(--bow-ink-3,#8C8C90)}
.featured-month-divider{grid-column:1 / -1;display:flex;align-items:center;gap:12px;margin:16px 0 4px}
.featured-month-divider .fmd-label{font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);
  text-transform:uppercase;letter-spacing:var(--bow-ls-caps,.08em);color:var(--bow-ink-3,#8C8C90);white-space:nowrap}
.featured-month-divider .fmd-line{flex:1;height:1px;background:var(--bow-line,rgba(255,255,255,.1))}
@media(max-width:700px){
  .featured-cards,.cmp-rel-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .featured-card{padding:var(--bow-space-4,16px);gap:var(--bow-space-4,16px)}
  .fc-fan{width:170px}
  .fc-fan img{width:56px;height:84px;margin-left:-22px}
  .fc-m{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ── Build-your-own prompt at the foot of every comparison ── */
.cmp-rel-cta{
  margin:var(--bow-space-6,32px) 0 var(--bow-space-2,8px);padding:var(--bow-space-5,24px) 20px;
  border-radius:var(--bow-r-lg,16px);background:var(--bow-surface-1,#141416);text-align:center;
}
.cmp-rel-cta-k{display:block;margin-bottom:var(--bow-space-2,8px);
  font-size:var(--bow-fs-1,11px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-data,1.35);
  text-transform:uppercase;letter-spacing:var(--bow-ls-caps,.08em);color:var(--bow-ink-3,#8C8C90)}
.cmp-rel-cta-h{margin:0 0 var(--bow-space-1,4px);
  font-size:var(--bow-fs-5,17px);font-weight:var(--bow-fw-semi,600);line-height:var(--bow-lh-title,1.3);
  color:var(--bow-ink-1,#FFFFFF);text-wrap:balance}
.cmp-rel-cta-s{max-width:36rem;margin:0 auto var(--bow-space-4,16px);
  font-size:var(--bow-fs-3,13px);line-height:var(--bow-lh-body,1.5);color:var(--bow-ink-2,#B5B5B8);text-wrap:balance}