/* ---------- Design tokens -------------------------------------------------
   Editorial layout for a non-technical audience. Generous whitespace,
   serif headings for narrative weight, restrained palette so the
   evidence does the talking. -------------------------------------------- */

:root {
  --bg:           #faf8f3;
  --bg-elev:      #ffffff;
  --bg-subtle:    #f1ede4;
  --bg-quote:     #fdf9ee;
  --fg:           #1a1815;
  --fg-soft:      #3d3a35;
  --fg-muted:     #756f64;
  --border:       #e2dccb;
  --border-strong:#b8b0a0;
  --accent:       #1f4d8e;
  --accent-soft:  #e6edf6;
  --accent-strong:#143765;
  --warn-fg:      #6c4f00;
  --warn-bg:      #fbf0c4;
  --warn-bd:      #b58900;
  --code-bg:      #efeae0;
  --positive:     #2d6a3a;
  --negative:     #a8211a;

  --serif: "Iowan Old Style", "Charter", "Georgia", "Cambria", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

body {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

@media (min-width: 1100px) {
  body { padding: 56px 24px 120px; }
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-strong); }

p { margin: 0 0 1em; }

/* ---------- Type hierarchy ---------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 8px;
}
h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 32px 0 8px;
}
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: italic;
}

.byline {
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 32px;
}

/* ---------- Top nav ----------------------------------------------------- */

nav.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
nav.topbar .home {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
nav.topbar .nav-links { display: flex; gap: 18px; }
nav.topbar a { text-decoration: none; color: var(--fg-soft); }
nav.topbar a:hover { color: var(--accent); }
nav.topbar .lang-switch {
  margin-left: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 3px;
}
nav.topbar .lang-switch:hover {
  background: var(--bg-elev);
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Layout primitives ------------------------------------------ */

.section-intro {
  color: var(--fg-soft);
  margin-bottom: 16px;
  font-size: 16px;
}

.muted { color: var(--fg-muted); }
.small { font-size: 13px; }

code, pre {
  background: var(--code-bg);
  border-radius: 3px;
  font-family: var(--mono);
}
code { padding: 1px 5px; font-size: 0.86em; }
pre {
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Cards & lists ---------------------------------------------- */

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.card-list li {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.card-list li a {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.card-list li a:hover { text-decoration: underline; }
.card-list .meta {
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ---------- Findings table -------------------------------------------- */

table.findings {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
}
table.findings th, table.findings td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
table.findings tbody tr:last-child td { border-bottom: none; }
table.findings thead th {
  background: var(--bg-subtle);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
table.findings th.row-label {
  background: var(--bg-elev);
  font-family: var(--serif);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 16px;
  color: var(--fg);
  width: 30%;
}
table.findings th.row-label .meta {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
table.findings td.scorecell {
  font-variant-numeric: tabular-nums;
}
table.findings td .runs {
  font-weight: 600;
  font-size: 16px;
}
table.findings td .dim-avg {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
}
table.findings td.empty { color: var(--fg-muted); text-align: center; }

/* ---------- Prompt + responses on a family page ------------------------ */

.prompt-block {
  margin: 32px 0;
}

blockquote.prompt {
  margin: 0 0 16px;
  padding: 18px 22px;
  background: var(--bg-quote);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--fg);
  line-height: 1.5;
}
blockquote.prompt::before { content: "“"; margin-right: 0.1em; }
blockquote.prompt::after  { content: "”"; margin-left: 0.1em; }
blockquote.prompt p { margin: 0; display: inline; }

.expectation {
  margin: 8px 0 24px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-radius: 4px;
  font-size: 14.5px;
  color: var(--accent-strong);
}
.expectation summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.expectation > summary::marker { color: var(--accent); }
.expectation p { margin: 8px 0 0; color: var(--fg-soft); }

.responses {
  display: grid;
  gap: 16px;
  margin-bottom: 8px;
}

/* Side-by-side layout for prompts with multiple models. We "break out" of
   the body's 760px reading column so the grid can use the full viewport
   width and scroll horizontally inside it without clipping. The breakout
   trick: extend the wrapper by exactly the gutter on each side, where the
   gutter equals half of (viewport_width - parent_width). Works because the
   body is centered with margin: 0 auto. */
.responses-grid-wrap {
  --gutter: calc((100vw - 100%) / 2);
  margin-inline: calc(-1 * var(--gutter));
  width: 100vw;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 24px 12px;
  scrollbar-gutter: stable;
}
.responses-grid {
  display: grid;
  gap: 16px;
  align-items: start;
  /* The inline style on this element sets grid-template-columns so the
     bake script can size the column count dynamically per prompt. */
}
.responses-grid-hint {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  font-style: italic;
}
.model-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.model-column > h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.model-column > h4 a { color: var(--fg); text-decoration: none; }
.model-column > h4 a:hover { color: var(--accent); }
.model-column .response-card {
  /* tighter, since the model name lives at the column heading */
  padding: 14px 16px 12px;
}
.model-column .response-card .who {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 8px;
  justify-content: flex-end;
}
.model-column .response-card .who .name {
  display: none;
}
.model-column .response-body {
  font-size: 14px;
  line-height: 1.55;
}

.response-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px 16px;
}
.response-card .who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.response-card .who .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
}
.response-card .who .name a { text-decoration: none; color: inherit; }
.response-card .who .name a:hover { color: var(--accent); }
.response-card .who .version {
  font-size: 12px;
  color: var(--fg-muted);
  font-family: var(--mono);
}

.response-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}

.scores {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}
.score .name {
  font-weight: 600;
  color: var(--fg-soft);
}
.score .value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
}
.score .reason {
  grid-column: 1 / -1;
  color: var(--fg-soft);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: -2px;
}
.score .meta {
  grid-column: 1 / -1;
  color: var(--fg-muted);
  font-size: 12px;
  font-family: var(--mono);
}

.tag {
  display: inline-block;
  background: var(--bg-subtle);
  color: var(--fg-soft);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  font-family: var(--mono);
  margin-left: 6px;
}
.tag.warn {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-bd);
}

/* Run iteration label - subtle, not loud */
.iter-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* ---------- Empty / muted states --------------------------------------- */

.empty {
  text-align: center;
  color: var(--fg-muted);
  padding: 28px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--bg-elev);
}

/* ---------- Aside / advanced ------------------------------------------- */

.advanced {
  margin: 56px 0 0;
  padding: 20px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.advanced summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
  list-style: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--fg-muted);
  transition: transform 120ms ease;
}
.advanced[open] summary::before {
  transform: rotate(90deg);
}
.advanced .advanced-body { margin-top: 16px; }
.sql-input {
  font-family: var(--mono);
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--bg);
  resize: vertical;
}
.sql-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.sql-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-muted);
}
.sql-actions button {
  font-family: inherit;
  font-size: 13.5px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  background: var(--accent);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.sql-actions button:hover { background: var(--accent-strong); }
.sql-output {
  margin-top: 14px;
  font-size: 13px;
  overflow-x: auto;
}
.sql-output table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 8px 0;
}
.sql-output th, .sql-output td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
}
.sql-output th { background: var(--bg-subtle); font-weight: 600; }
.sql-output th:last-child, .sql-output td:last-child { border-right: none; }
.sql-error {
  color: var(--negative);
  font-family: var(--mono);
  font-size: 12.5px;
  background: #fbe7e5;
  border: 1px solid #e3aaa5;
  padding: 8px 12px;
  border-radius: 4px;
}

/* ---------- Footer ----------------------------------------------------- */

footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Bar charts (hand-rolled SVG) ------------------------------ */

.chart-block { margin: 24px 0 32px; }
.chart-block .chart-caption {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 8px;
  font-style: italic;
}

.bar-chart { width: 100%; height: auto; display: block; }
.bar-chart .bc-label {
  font-family: var(--sans);
  font-size: 13px;
  fill: var(--fg-soft);
}
.bar-chart .bc-label-strong {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--fg);
}
.bar-chart .bc-value {
  font-family: var(--mono);
  font-size: 12.5px;
  fill: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}
.bar-chart .bc-track {
  fill: var(--bg-subtle);
}
.bar-chart .bc-bar {
  fill: var(--accent);
}
.bar-chart .bc-bar.warm { fill: #b6601f; }
.bar-chart .bc-bar.cool { fill: #2d6a3a; }
/* Goodness-tiered fills - lets a bar declare whether its value is "good"
   (close to the ideal end of this dimension's scale) or "bad", regardless
   of whether high or low is the ideal end. */
.bar-chart .bc-bar.good    { fill: #2d6a3a; }
.bar-chart .bc-bar.mixed   { fill: #b58900; }
.bar-chart .bc-bar.bad     { fill: #a8211a; }
.bar-chart .bc-medal {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Polarity badge in chart captions */
.polarity {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
}
.polarity.higher { background: #e1ede3; color: #225031; }
.polarity.lower  { background: #f3e6e3; color: #7a1a14; }

.legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
}
.legend .swatch.good  { background: #2d6a3a; }
.legend .swatch.mixed { background: #b58900; }
.legend .swatch.bad   { background: #a8211a; }
.bar-chart .bc-axis {
  stroke: var(--border);
  stroke-width: 1;
}
/* Variance overlay: dark line + end caps showing min-max spread across
   iterations of the same (model, dimension). Drawn over the bar so it reads
   as "average is here, spread looks like this". */
.bar-chart .bc-range {
  stroke: rgba(26, 24, 21, 0.6);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
}
.bar-chart .bc-range-cap {
  stroke: rgba(26, 24, 21, 0.6);
  stroke-width: 1.4;
}
.bar-chart .bc-tick {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.chart-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .chart-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
.chart-grid > section { min-width: 0; }
.chart-grid h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.chart-grid .chart-caption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 10px;
}

/* ---------- Per-model summary list ------------------------------------ */

.summary-cards {
  display: grid;
  gap: 12px;
}
.summary-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
}
.summary-card h3 { margin: 0 0 4px; font-size: 17px; }
.summary-card .meta {
  font-size: 12.5px;
  color: var(--fg-muted);
  font-family: var(--mono);
  margin-bottom: 10px;
}
.summary-card .dim-list {
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.summary-card .dim-list .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  color: var(--fg-soft);
}
.summary-card .dim-list .row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.summary-card .dim-list .row .n { color: var(--fg-muted); font-size: 12px; }