/* Arena leaderboard - Horizontal bar with 95% CI whiskers
   Approved prototype design matching duyet-1440 and duyet-375 references. */

.arena { min-width: 0; margin: var(--space-24) 0 var(--space-48); }
.arena-heading { margin-bottom: var(--space-16); }
.arena-eyebrow { font-size: var(--text-meta); font-weight: 600; letter-spacing: .08em; color: var(--color-ink-2); margin: 0 0 var(--space-8); text-transform: uppercase; }
.arena-heading h2 { font-size: var(--text-lead); letter-spacing: var(--tracking-display); line-height: 1.25; margin: 0 0 var(--space-12); }
.arena-heading > p:last-child, .arena-date, .arena-comparison, .arena-note, .arena-credit { color: var(--color-ink-2); line-height: 1.65; }
.arena-date { font-size: var(--text-small); margin: 0 0 var(--space-24); }
.arena-date strong { color: var(--color-ink); font-weight: 600; }
.arena-switch { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.arena-switch button { font: inherit; font-size: var(--text-small); font-weight: 500; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-full); background: var(--color-fill); color: var(--color-ink-2); cursor: pointer; min-height: 44px; transition: background var(--motion-feedback), color var(--motion-feedback); }
.arena-switch button:hover { background: var(--color-hair); }
.arena-switch button[aria-pressed="true"] { color: var(--color-on-accent); background: var(--color-accent-fill); }
.arena-switch button:focus-visible, .arena a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.arena-comparison { font-size: var(--text-meta); margin: 0 0 var(--space-24); }

/* Main Card */
.arena-card { margin: 0; padding: var(--space-32); background: var(--color-surface); border: 0; box-shadow: var(--msn-shadow-rest); border-radius: var(--radius-24); font-variant-numeric: tabular-nums; position: relative; }

/* Legend Strip */
.arena-legend-strip { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-24); background: var(--color-inset); border-radius: var(--radius-8); padding: var(--space-12) var(--space-16); margin-bottom: var(--space-24); }
.arena-legend-items { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; }
.arena-legend-item { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-meta); color: var(--color-ink); font-weight: 500; }
.arena-legend-bar-icon { display: inline-block; width: 22px; height: 8px; border-radius: 4px; background: var(--color-accent-wash); border: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent); flex-shrink: 0; }
.arena-legend-ci-icon { display: inline-flex; align-items: center; color: var(--color-accent); flex-shrink: 0; }
.arena-legend-note { margin: 0; font-size: var(--text-meta); color: var(--color-ink-2); line-height: 1.4; }

/* Table Structure */
.arena-table { width: 100%; border-collapse: collapse; text-align: left; }
.arena-table thead tr { border-bottom: 1px solid var(--color-hair); }
.arena-table thead th { font-size: var(--text-meta); font-weight: 500; color: var(--color-ink-3); padding: var(--space-12) var(--space-16); vertical-align: top; }

.arena-th-rank { width: 48px; padding-left: var(--space-8); }
.arena-th-model { width: 310px; min-width: 280px; }
.arena-th-plot { padding: var(--space-12) var(--space-24); }
/* The axis must span exactly the plot cells' width, or every tick sits off its bar: the header cell's side padding has to
   match .arena-col-plot's (the generic header rule above would otherwise give it 16px). */
@media (min-width: 1200px) { .arena-table thead th.arena-th-plot { padding-inline: var(--space-24); } }
.arena-axis-header { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-meta); color: var(--color-ink-3); font-weight: 500; margin-bottom: var(--space-6); }
.arena-axis-ticks { position: relative; height: 16px; width: 100%; }
.arena-axis-tick { position: absolute; transform: translateX(-50%); font-size: var(--text-micro); color: var(--color-ink-3); font-variant-numeric: tabular-nums; line-height: 1; }
.arena-tick-first { transform: none; }
.arena-tick-last { transform: translateX(-100%); }
.arena-th-score { width: 100px; text-align: right; }
.arena-th-change { width: 140px; text-align: right; padding-right: var(--space-8); }

/* Table Rows */
.arena-table tbody tr.arena-row { border-bottom: 1px solid var(--color-hair); transition: background var(--motion-state); }
.arena-table tbody tr.arena-row:hover { background: var(--color-inset); }
.arena-table tbody tr.arena-row.arena-leader { background: var(--color-accent-wash); }
.arena-table tbody tr.arena-row:last-child { border-bottom: none; }

.arena-col-rank { width: 48px; padding: var(--space-16) var(--space-16) var(--space-16) var(--space-8); vertical-align: middle; }
.arena-rank-num { font-size: var(--text-title); font-weight: 600; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.arena-leader .arena-rank-num { color: var(--color-accent); font-weight: 700; }

.arena-col-model { width: 310px; min-width: 280px; padding: var(--space-16); vertical-align: middle; font-weight: normal; }
.arena-model-name { font-size: var(--text-sub); font-weight: 700; color: var(--color-ink); line-height: 1.35; white-space: nowrap; }
.arena-model-maker { font-size: var(--text-small); color: var(--color-ink-2); margin-top: 3px; }

.arena-col-plot { padding: var(--space-16) var(--space-24); vertical-align: middle; position: relative; }
.arena-plot-track { position: relative; width: 100%; height: 20px; display: flex; align-items: center; }

.arena-gridlines { position: absolute; top: -24px; bottom: -24px; left: 0; right: 0; pointer-events: none; }
.arena-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-hair); transform: translateX(-50%); }
.arena-gridline-first { transform: none; }
.arena-gridline-last { transform: translateX(-100%); }

.arena-bar { position: absolute; left: 0; height: 8px; border-radius: var(--radius-full); background: var(--color-fill); pointer-events: none; z-index: 1; }
.arena-leader .arena-bar { background: var(--color-accent-wash); border: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent); box-sizing: border-box; }

.arena-whisker { position: absolute; height: 14px; display: flex; align-items: center; pointer-events: none; z-index: 2; }
.arena-whisker-stem { flex: 1; height: 1.5px; background: var(--color-ink); }
.arena-whisker-cap { width: 1.5px; height: 12px; background: var(--color-ink); flex-shrink: 0; }
.arena-leader .arena-whisker-stem, .arena-leader .arena-whisker-cap { background: var(--color-accent); }
[data-theme="dark"] .arena-whisker-stem, [data-theme="dark"] .arena-whisker-cap { background: var(--gray-70); }
[data-theme="dark"] .arena-leader .arena-whisker-stem, [data-theme="dark"] .arena-leader .arena-whisker-cap { background: var(--color-accent); }

.arena-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background: var(--color-chart); pointer-events: none; z-index: 3; }
.arena-leader .arena-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-accent); background: var(--color-surface); box-sizing: border-box; }

.arena-col-score { width: 100px; text-align: right; padding: var(--space-16); vertical-align: middle; font-size: var(--text-title); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.arena-col-change { width: 140px; text-align: right; padding: var(--space-16) var(--space-8) var(--space-16) var(--space-16); vertical-align: middle; font-size: var(--text-meta); white-space: nowrap; }

/* Movement status */
.arena-change { color: var(--color-ink-2); }
.arena-up { color: var(--color-ok); font-weight: 600; }
.arena-down { color: var(--color-warn); font-weight: 600; }

/* Footnotes & Helpers */
.arena-note, .arena-credit { font-size: var(--text-meta); margin-top: var(--space-24); max-width: 100ch; }
.arena a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.arena-empty { background: var(--color-surface); padding: var(--space-24); border-radius: var(--radius-12); }
.arena-loading { min-height: 320px; padding-top: var(--space-32); }

@media (min-width: 768px) {
  .arena-rank-mobile,
  .arena-score-mobile,
  .arena-movement-mobile,
  .arena-mobile-ci {
    display: none;
  }
}

/* Responsive header label toggle defaults (desktop >= 1200px) */
.arena-title-full, .arena-range-full, .arena-score-full, .arena-change-full { display: inline; }
.arena-title-short, .arena-range-short, .arena-score-short, .arena-change-short { display: none; }

/* Tablet refinements (768px – 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .arena-card { padding: var(--space-24); }
  .arena-table { table-layout: fixed; }
  .arena-table thead th, .arena-table tbody th, .arena-table tbody td {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  /* Responsive header text swaps */
  .arena-title-full, .arena-score-full, .arena-change-full { display: none; }
  .arena-title-short, .arena-score-short, .arena-change-short { display: inline; }

  /* Column widths. Every cell keeps the 8px side padding above (it outranks the column classes),
     so each width is its longest header label plus 16px: "Hạng" needs ~34px, "So tuần trước" ~87px.
     Narrower columns let the labels spill into the next cell and past the card's right edge. */
  .arena-th-rank, .arena-col-rank { width: 52px; padding-top: var(--space-12); padding-bottom: var(--space-12); text-align: center; }
  .arena-th-model, .arena-col-model { width: 215px; min-width: 0; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .arena-model-name { white-space: normal; line-height: 1.3; }
  .arena-th-plot, .arena-col-plot { width: auto; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .arena-th-score, .arena-col-score { width: 72px; padding-top: var(--space-12); padding-bottom: var(--space-12); text-align: right; white-space: nowrap; }
  .arena-th-change, .arena-col-change { width: 112px; padding-top: var(--space-12); padding-bottom: var(--space-12); text-align: right; white-space: nowrap; }

  /* Plot header: single row, side-by-side with generous gap */
  .arena-axis-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }
  .arena-axis-title, .arena-axis-range { white-space: nowrap; }
  .arena-range-full { display: inline; }
  .arena-range-short { display: none; }
}

/* Below 900px the plot column is too narrow for "Dải đo: …" beside the CI title; show the bare range. */
@media (max-width: 899px) and (min-width: 768px) {
  .arena-range-full { display: none; }
  .arena-range-short { display: inline; }
}

@media (max-width: 820px) and (min-width: 768px) {
  .arena-th-model, .arena-col-model { width: 155px; }
  .arena-th-score, .arena-col-score { width: 68px; }
}

/* Phone: one compact list in one card (owner, 09/11: the chart must read at 375 too). Each model takes two short lines
   and its interval: rank, name and score; maker and the change; then the CI mark on the axis, whose scale is printed
   once above the rows instead of under every model. */
@media (max-width: 767px) {
  .arena { margin-top: var(--space-16); }
  .arena-card { padding: var(--space-12) var(--space-16); border-radius: var(--msn-card-r); }
  .arena-legend-strip { padding: var(--space-8) var(--space-12); margin-bottom: var(--space-8); flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .arena-legend-items { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

  .arena-table, .arena-table thead, .arena-table tbody, .arena-table tr, .arena-table td, .arena-table th { display: block; }
  .arena-table thead th:not(.arena-th-plot) { display: none; }
  .arena-table thead th.arena-th-plot { padding: var(--space-8) 0 var(--space-6); }
  .arena-title-full { display: none; }
  .arena-title-short { display: inline; }

  .arena-table tbody tr.arena-row { padding: var(--space-12) 0; }
  .arena-table tbody tr.arena-row.arena-leader { margin-inline: calc(-1 * var(--space-8)); padding-inline: var(--space-8); border-radius: var(--radius-8); }

  .arena-table td.arena-col-rank,
  .arena-table td.arena-col-score,
  .arena-table td.arena-col-change {
    display: none;
  }

  .arena-col-model { width: auto; min-width: 0; padding: 0; }
  .arena-model-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
  .arena-model-left { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; }
  .arena-rank-mobile { min-width: 2ch; font-size: var(--text-sub); font-weight: 700; color: var(--color-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .arena-leader .arena-rank-mobile { color: var(--color-accent); }
  .arena-model-name { font-size: var(--text-sub); font-weight: 700; color: var(--color-ink); line-height: var(--leading-snug); white-space: normal; }
  .arena-score-mobile { font-size: var(--text-sub); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; flex-shrink: 0; }

  .arena-model-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin-top: 0; padding-left: calc(2ch + var(--space-8)); font-size: var(--text-small); }
  .arena-model-maker { color: var(--color-ink-2); margin-top: 0; }
  .arena-movement-mobile { font-size: var(--text-meta); white-space: nowrap; }

  .arena-col-plot { padding: 0; margin-top: var(--space-8); }
  .arena-plot-track { height: 14px; }
  .arena-gridlines { top: -6px; bottom: -6px; }
  .arena-mobile-ci { display: none; }
}