/* ==========================================================================
   Shastrarth — additions layered on top of the site stylesheet.
   style.css owns the tokens, nav and footer. Nothing here redefines them.
   Every colour below is a var() from style.css, so a palette change on the
   main site carries across on the next asset sync.
   ========================================================================== */

/* Fixed nav is 64px tall and sits outside flow — clear it. */
.sa-page { padding-top: 64px; min-height: 60vh; }

/* ── Banner (kill switch / maintenance window) ─────────────────────────── */
.sa-banner {
  width: min(100%, 1040px);
  margin: 1.25rem auto 0;
  padding: 0.85rem 1.15rem;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-2);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sa-hero {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.92);
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}
.sa-hero-inner { width: min(100%, 1040px); margin-inline: auto;
                 padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.sa-hero-script {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.35rem;
}
.sa-hero-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  color: rgba(255,255,255,0.88);
  margin-bottom: 0.6rem;
}
.sa-hero-lede {
  max-width: 46rem;
  font-size: 1.02rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 1.1rem;
}
.sa-hero-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.42);
}

/* ── Section rhythm ────────────────────────────────────────────────────── */
.sa-section { width: min(100%, 1040px); margin-inline: auto;
              padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem); }
.sa-section h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: 0.35rem; }
.sa-section-sub { color: var(--text-2); font-size: 0.92rem; margin-bottom: 1.1rem; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.sa-cards { display: grid; gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.35rem;
}
.sa-card h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.sa-card p  { font-size: 0.89rem; color: var(--text-2); margin: 0; }
.sa-card-accent { border-top-color: var(--accent); }

/* ── Data table (model registry, benchmarks) ───────────────────────────── */
.sa-table-wrap { overflow-x: auto; border: 1px solid var(--border);
                 border-radius: var(--radius); background: var(--surface);
                 box-shadow: var(--shadow); }
.sa-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sa-table th, .sa-table td { padding: 0.7rem 0.9rem; text-align: left;
                             border-bottom: 1px solid var(--border);
                             white-space: nowrap; }
.sa-table th { background: var(--bg-warm); font-weight: 600;
               font-size: 0.78rem; letter-spacing: 0.03em;
               text-transform: uppercase; color: var(--text-2); }
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table th.num,
.sa-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-table .sa-model { font-weight: 600; color: var(--text); }
.sa-table .sa-origin { display: block; font-size: 0.76rem; color: var(--text-3);
                       font-weight: 400; }

/* ── Small pieces ──────────────────────────────────────────────────────── */
.sa-note { font-size: 0.82rem; color: var(--text-3); margin-top: 0.85rem;
           line-height: 1.55; }
.sa-btn {
  display: inline-block; background: var(--primary); color: #fff;
  border: none; border-radius: 8px; padding: 0.72rem 1.4rem;
  font-size: 0.95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.2s;
}
.sa-btn:hover { background: var(--primary-h); }
.sa-btn-quiet { background: transparent; color: var(--primary);
                border: 1px solid var(--border); }
.sa-btn-quiet:hover { background: var(--bg-warm); }

/* ── Dark contact section ───────────────────────────────────────────────
   Replicated from webapp index.html's inline <style> (lines ~153-176).
   These rules are NOT in style.css, so the asset copy does not carry
   them. Drift check (Phase 6) compares this block against the source.
   ────────────────────────────────────────────────────────────────────── */
.section { padding: 1.5rem; }
.section-dark { background: var(--bg-dark); }
.section-dark .section-tag { color: rgba(255,255,255,0.42); }
.section-dark h2 { color: rgba(255,255,255,0.92); }
.section-dark .section-lead { color: rgba(255,255,255,0.5); }
.section-dark .contact-link {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
}
.section-dark .contact-link:hover {
  border-color: rgba(255,255,255,0.38);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.09);
  box-shadow: none;
}
.section-dark .contact-link.contact-link-wa {
  color: #25D366 !important;
  border-color: rgba(37,211,102,0.28) !important;
  background: rgba(37,211,102,0.06) !important;
}
.section-dark .contact-link.contact-link-wa:hover {
  border-color: rgba(37,211,102,0.55) !important;
  color: #25D366 !important;
  background: rgba(37,211,102,0.12) !important;
}

/* ── Table column distribution ──────────────────────────────────────────
   Auto layout hands leftover width to columns in proportion to their
   content, which gave the model column nearly all the slack and crowded
   everything else to the right. Fixed layout divides evenly; one
   explicit width keeps the label column a little wider than the rest.
   min-width means narrow screens scroll the wrapper rather than
   squeezing nowrap text into overlapping cells.
   ────────────────────────────────────────────────────────────────────── */
.sa-table { table-layout: fixed; min-width: 34rem; }
.sa-table th:first-child,
.sa-table td:first-child { width: 28%; }

/* Explanation tables: label sized to content, prose column takes slack. */
.sa-table-notes { table-layout: auto; }
.sa-table-notes th:first-child,
.sa-table-notes td:first-child { width: auto; }
.sa-table-notes th:last-child,
.sa-table-notes td:last-child { width: 100%; white-space: normal; }

/* ── Data-column centring ───────────────────────────────────────────────
   Columns were already equal width, but right-aligned values sat on
   their right edge while the last (text) column sat on its left edge,
   so the gaps between values read as unequal. Centring every column
   after the first puts each value in the middle of an equal cell.
   Excludes .sa-table-notes, where a right-aligned value against a prose
   column is the better read.
   ────────────────────────────────────────────────────────────────────── */
.sa-table:not(.sa-table-notes) th:not(:first-child),
.sa-table:not(.sa-table-notes) td:not(:first-child) {
  text-align: center;
}

/* ── Behaviour notes ────────────────────────────────────────────────────
   Public-facing observations from the model registry. The model column
   must allow wrapping - every other cell is nowrap - and widens to give
   the prose somewhere to go.
   ────────────────────────────────────────────────────────────────────── */
.sa-behaviour {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-3);
  white-space: normal;
}
.sa-table th:first-child,
.sa-table td:first-child { white-space: normal; }
.sa-table-behaviour th:first-child,
.sa-table-behaviour td:first-child { width: 32%; }

/* Seven columns, sized for fixed layout.
   `.sa-table` is `table-layout: fixed`, so a width here is taken
   literally and content that does not fit OVERFLOWS rather than widening
   the column. The base `min-width: 34rem` was calibrated for the six
   columns this table had before a Version column was added on
   16 September 2026; leaving it at 34rem left every column short and the
   nowrap monospace text spilled over its neighbour -- exactly what the
   comment above the base rule warns about.
   10.5rem fits the longest tag (`phi4-mini:latest`) plus cell padding.
   54rem is chosen to leave the five numeric columns roughly 5rem each --
   estimated, NOT measured: there is no browser on this box, so rendered
   text width could not be checked. The header-wrap rule below is what
   makes that estimate safe to be wrong about. Narrow screens scroll the
   wrapper, which is the intended behaviour, not a fallback.
   NOTE: do not use the `width: 1%` shrink-to-fit idiom on this table --
   it is an AUTO-layout trick and resolves to a literal 1% here. That was
   tried first and made the overlap worse.
   Only `_model_table.html` carries `.sa-table-behaviour`. */
.sa-table-behaviour { min-width: 54rem; }
.sa-table-behaviour th:nth-child(2),
.sa-table-behaviour td:nth-child(2) { width: 10.5rem; }

/* Headers wrap; data cells do not.
   The widest content in the numeric columns is the HEADER, not the data
   -- "Prompt eval" is longer than "10.4 tok/s", "Parameters" longer than
   "3.2B". Under fixed layout a nowrap header that exceeds its column
   overflows onto the next one, so sizing those columns correctly would
   mean predicting rendered text width from font metrics. A wrapped
   two-line header costs a few pixels of height and cannot overlap
   anything, so the failure mode is removed rather than calculated
   against. Data cells keep nowrap: they are short, and "10.4 tok/s"
   breaking across two lines would read badly. */
.sa-table-behaviour thead th { white-space: normal; }

/* ── Tool form ─────────────────────────────────────────────────────────── */
.sa-form { max-width: 42rem; }
.sa-label { display: block; font-size: 0.82rem; font-weight: 600;
            color: var(--text); margin: 1.1rem 0 0.35rem; }
.sa-label em { font-style: normal; color: var(--primary); }
.sa-input {
  width: 100%; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.95rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; outline: none;
  transition: border-color 0.2s;
}
.sa-input:focus { border-color: var(--primary); }
.sa-textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.sa-counter { font-size: 0.72rem; color: var(--text-3); text-align: right;
              margin-top: 0.25rem; }
.sa-hint { font-size: 0.79rem; color: var(--text-3); line-height: 1.5;
           margin: 0.35rem 0 0; }
.sa-hint a { color: var(--primary); font-weight: 600; }
.sa-grid2 { display: grid; gap: 0 1rem;
            grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sa-check { display: flex; align-items: center; gap: 0.5rem;
            font-size: 0.88rem; color: var(--text-2); cursor: pointer;
            padding: 0.7rem 0; }
.sa-check input:disabled + span { color: var(--text-3); }
.sa-eta { margin-top: 1.4rem; padding: 0.85rem 1.1rem; background: var(--bg-warm);
          border-radius: var(--radius); font-size: 0.86rem; color: var(--text-2);
          line-height: 1.5; }
.sa-eta strong { color: var(--text); display: block; margin-bottom: 0.15rem; }
.sa-warn { margin-top: 0.75rem; padding: 0.85rem 1.1rem; background: #fff8e1;
           border-left: 3px solid var(--accent); border-radius: 6px;
           font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
.sa-error { margin-top: 0.75rem; padding: 0.7rem 1rem; background: #fdecea;
            border-left: 3px solid #c0392b; border-radius: 6px;
            font-size: 0.84rem; color: #7d241c; }

/* ── Debate view ───────────────────────────────────────────────────────── */
.sa-debate-head { margin-bottom: 1.25rem; }
.sa-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
              text-transform: uppercase; color: var(--accent);
              margin-bottom: 0.4rem; }
.sa-progress { font-size: 0.8rem; color: var(--text-3); margin-top: 0.4rem; }
.sa-turn { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius); box-shadow: var(--shadow);
           padding: 1.15rem 1.35rem; margin-top: 1rem;
           animation: sa-in 0.35s ease; }
@keyframes sa-in { from { opacity: 0; transform: translateY(6px); } }
.sa-turn-a { border-left: 3px solid var(--primary); }
.sa-turn-b { border-left: 3px solid var(--accent); }
.sa-turn-head { display: flex; justify-content: space-between;
                align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
                margin-bottom: 0.6rem; }
.sa-slot { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.sa-slot-revealed { color: var(--primary); }
.sa-turn-meta { font-size: 0.75rem; color: var(--text-3);
                font-variant-numeric: tabular-nums; }
.sa-turn-body p { font-size: 0.92rem; line-height: 1.65; color: var(--text-2);
                  margin: 0 0 0.7rem; }
.sa-turn-body p:last-child { margin-bottom: 0; }
.sa-truncated { font-size: 0.78rem; color: var(--accent);
                background: var(--bg-warm); border-radius: 6px;
                padding: 0.4rem 0.7rem; margin-bottom: 0.6rem; }
.sa-stats { display: flex; gap: 1.5rem; flex-wrap: wrap;
            font-size: 0.82rem; color: var(--text-3);
            font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.sa-stats span:empty { display: none; }

/* ── Debater side label ────────────────────────────────────────────────── */
.sa-side { display: block; font-size: 0.72rem; font-weight: 600;
           letter-spacing: 0.03em; margin-top: 0.15rem; }
.sa-side-for { color: var(--primary); }
.sa-side-against { color: var(--accent); }


/* ---- Rating ------------------------------------------------------------ */
.sa-rate-card { background: var(--surface); border: 1px solid var(--border);
                border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sa-rate-who { display: flex; flex-wrap: wrap; align-items: baseline;
               gap: 0.15rem 0.6rem; }
.sa-rate-who .sa-side { display: inline; }
.sa-stars { display: flex; gap: 0.2rem; margin: 0.75rem 0 0.7rem;
            margin-left: -0.15rem; }
.sa-star { background: none; border: none; cursor: pointer;
           padding: 0.1rem 0.15rem; font-size: 1.6rem; line-height: 1;
           color: var(--border); transition: color 0.12s; }
.sa-star:hover { color: var(--accent); }
.sa-star.on { color: var(--accent); }
.sa-star:disabled { cursor: default; }
.sa-eta a, .sa-warn a { color: var(--primary); font-weight: 600; }
.sa-rate-actions { display: flex; flex-wrap: wrap; gap: 0.75rem;
                   align-items: center; margin-top: 1.2rem; }

/* Model registry "Version" column (shared partial _model_table.html).
   The tag reads as the primary identifier; the digest sits under it in the
   same muted treatment as .sa-origin, because for the three ':latest' tags
   the digest is the only thing that actually pins a build. */
.sa-table .sa-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
}
.sa-table .sa-digest {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: .15rem;
  white-space: nowrap;
}

/* Shared "What the columns mean" legend (_columns_legend.html).
   Moved here from admin.html's inline <style> on 16 September 2026 when
   /analytics gained the same block. Two pages showing one legend must
   read from one stylesheet, or they drift apart visually while claiming
   to be the same thing. Both pages extend base.html, so both load this. */
  .adm-legend {
    border: 1px solid rgba(128,128,128,0.22); border-radius: 8px;
    padding: 0.7rem 1rem; margin-bottom: 1.4rem; font-size: 0.88rem;
  }
  .adm-legend summary { cursor: pointer; font-weight: 600; }
  .adm-legend dl { margin: 0.9rem 0 0; }
  .adm-legend dt { font-weight: 600; margin-top: 0.6rem; }
  .adm-legend dd { margin: 0.15rem 0 0; opacity: 0.82; }
  .adm-legend .scale { margin-top: 0.9rem; opacity: 0.75; font-size: 0.84rem; }
  .adm-legend pre {
    font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap;
    background: rgba(128,128,128,0.09); padding: 0.7rem 0.9rem;
    border-radius: 6px; overflow-x: auto;
  }