/* Astra / Fable page. Everything the site already provides — hero, nav, metric tiles,
   model-field-card, openness-badge, frontier-table — comes from styles.css. Only the
   leaderboard table, the effort cards and the two chart heights are defined here.
   Series colours validated against the dark panel #14171c: deutan dE 20.2, tritan 33.6,
   normal-vision 29.0, all pass. */

.astra-table-wrap { overflow-x: auto; margin-top: 1.25rem; }

.astra-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.astra-table th,
.astra-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.astra-table thead th {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; font-family: var(--mono);
  border-bottom: 1px solid var(--line-strong);
}
.astra-table .num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The system name is the widest thing here; give it the slack and keep the numbers on one line. */
.astra-table tbody th { min-width: 16rem; }
.astra-table .rank {
  width: 3.2rem; text-align: right; color: var(--muted);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.astra-table tbody th { font-weight: 600; color: var(--ink); }

/* The models this page is about, matching the outline treatment in the bar chart. The edge is
   coloured by maker so an Astra row and a Fable 5.1 row are distinguishable at a glance, with
   the same two hues the charts use. */
.astra-row--new th,
.astra-row--new td { background: rgba(236, 233, 225, 0.05); }
.astra-row--new th { box-shadow: inset 3px 0 0 var(--ink); }
.astra-row--openai th { box-shadow: inset 3px 0 0 #2f9fc4; }
.astra-row--anthropic th { box-shadow: inset 3px 0 0 #b8422e; }
/* Colour never carries it alone: the tag spells out which model the row is. */
.astra-row--openai .astra-tag { border-color: #2f9fc4; color: #9fd4e6; }
.astra-row--anthropic .astra-tag { border-color: #b8422e; color: #e8a596; }

.astra-tag {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle;
}

.astra-sub { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* Pending reads as roadmap, not as a zero score. */
.astra-row--pending th,
.astra-row--pending td { color: var(--muted); font-style: italic; }

.astra-effort { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.astra-effort__card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); }
.astra-effort__card h3 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--ink); }
.astra-effort__bar {
  display: grid; grid-template-columns: 3rem 1fr 2.2rem; align-items: center;
  gap: 0.6rem; margin-bottom: 0.45rem; font-size: 0.85rem;
}
.astra-effort__bar span { color: var(--muted); font-family: var(--mono); }
.astra-effort__bar strong { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.astra-effort__track { height: 10px; border-radius: 999px; background: rgba(236,233,225,0.10); overflow: hidden; }
.astra-effort__fill { height: 100%; border-radius: 0 4px 4px 0; background: #2f9fc4; }
.astra-effort__fill--low { background: #b8422e; }
.astra-effort__verdict { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.82rem; }

.astra-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.astra-note { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); }
.astra-note h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink); }
.astra-note p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }



#rank-chart { height: 340px; }
#frontier-chart { height: 460px; }

/* This page carries two field cards where the sibling pages carry three, so there is room to
   run them at twice the shared thumb size. Scoped to this row: 132px is the right height for
   a three-up row, and the narrow-screen cap below 900px stays as the site sets it. */
@media (min-width: 901px) {
  .astra-hero-cards { max-width: 460px; }
  .astra-hero-cards .model-field-card--thumb img { height: 264px; }
}

/* The shared legend pills draw OpenAI green and Anthropic amber, but this page's marks are the
   blue/red pair validated against the dark panel (deutan dE 20.2 against the pills' 8.0, which
   also fails the lightness band). Legend and marks have to agree, so the pills follow the
   marks here. Scoped to this legend: no other page changes. */
#frontier-legend .provider-pill--openai .provider-pill__mark { background: #2f9fc4; }
#frontier-legend .provider-pill--anthropic .provider-pill__mark { background: #b8422e; }