/* ============================================================
   /survey — student survey data.

   Themed-dashboard layout: five bands, each anchored by a headline
   number and a one-line takeaway on the left, with the underlying
   response histograms in cards on the right. Rendered at build time
   from src/_data/survey.js — no client JS.

   ---- the wireframe language ----

   The layout is unchanged; what it is drawn in is not. The page takes the
   same four things every other sheet on this site takes, with the same
   numbers:

     paper rather than a tinted card       --sv-paper
     a ruled edge and a hard offset cast   1.5px / 3px 3px 0
     mono for anything that labels         the column names, the figures
     ink plus one accent, and no third     --sv-ink / --sv-accent

   The values are the walkthroughs' own, borrowed rather than imported —
   the arrangement next-paths.css and student-figures.css make, so a page
   can carry the hand without loading a sheet it has no other use for.

   Ruled rather than drawn. §2.2 of docs/WIREFRAME-LANGUAGE.md: without the
   script the ruled box is what a reader sees, and it is "the same design a
   shade quieter". Fourteen histograms is a lot of generated geometry for a
   page that has no other reason to run any.

   The bars are ink, not the accent. A chart on this site is ink and
   neither side is coloured — filling "strongly agree" with the accent and
   "strongly disagree" with the same accent says nothing, and filling them
   with two different colours would say that one of them is the failure.
   Which row is which is what the label beside it is for.
   ============================================================ */

:root {
  --sv-ink: #55555f;
  --sv-strong: #111118;
  --sv-soft: #3f3f46;
  --sv-faint: #bab7b0;
  --sv-paper: #fffefb;
  --sv-cast: rgba(60, 50, 40, 0.16);
  --sv-accent: #5a5ad1;
  --sv-bar: #55555f;
  --sv-bar-track: rgba(60, 50, 40, 0.07);
  --sv-card-bg: var(--sv-paper);
  --sv-card-border: var(--sv-ink);
  --sv-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}
html.dark-mode {
  --sv-ink: #a8a8b4;
  --sv-strong: #f1f1f5;
  --sv-soft: #b3b3bc;
  --sv-faint: #4b4b5a;
  --sv-paper: #15151e;
  --sv-cast: rgba(226, 226, 255, 0.09);
  --sv-accent: #8a8aff;
  --sv-bar: #a8a8b4;
  --sv-bar-track: rgba(226, 226, 255, 0.07);
}

/* ---- Headline stat band ---- */
.sv-statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding: 1.3rem 0;
  border-top: 1px dashed var(--sv-faint);
  border-bottom: 1px dashed var(--sv-faint);
}
.sv-si { text-align: center; }
.sv-si b {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--sv-strong);
  font-variant-numeric: tabular-nums;
}
/* A label, so mono, uppercase and tracked — the hand every column name and
   every tag on this site is set in. */
.sv-si span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sv-mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sv-soft);
}

.page-content .sv-scale-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sv-soft);
  margin: 0.9rem 0 0;
  text-align: center;
}

/* ---- Bands ---- */
.sv-band {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: 1.5rem 2.6rem;
  align-items: start;
  padding: 2.6rem 0;
  border-top: 1px dashed var(--sv-faint);
  margin-top: 2.6rem;
}
.sv-band:first-of-type { border-top: none; margin-top: 0.4rem; }
.sv-band + .sv-band { margin-top: 0; }

.sv-band-left { position: sticky; top: calc(var(--banner-h) + 1rem); }

h2.sv-kicker {
  font-family: var(--sv-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-accent);
  margin: 0 0 0.5rem;
}
.page-content .sv-stat {
  font-family: var(--sv-mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sv-strong);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.6rem;
}
.page-content .sv-take {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--sv-strong);
  margin: 0;
}
.sv-take .sv-sub {
  display: block;
  margin-top: 0.7rem;
  color: var(--sv-soft);
  font-size: 0.75rem;
  line-height: 1.65;
}

/* ---- Chart cards ---- */
.sv-charts {
  display: grid;
  /* Fixed two-column grid so a four-chart band reads as a 2×2 block rather
     than wrapping to 3+1 on wide viewports; two-chart bands sit side by side.
     Collapses to one column on narrow screens (below). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.sv-card {
  background: var(--sv-card-bg);
  border: 1.5px solid var(--sv-card-border);
  border-radius: 5px;
  /* A hard offset rather than a blur: what keeps it reading as a sheet of
     paper on a page rather than a floating panel. */
  box-shadow: 3px 3px 0 var(--sv-cast);
  padding: 1.1rem 1.2rem 0.8rem;
}
.page-content .sv-q {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sv-strong);
  margin: 0 0 0.8rem;
}
.sv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}
.sv-label { font-size: 0.75rem; line-height: 1.5; color: var(--sv-strong); }
.sv-val {
  font-family: var(--sv-mono);
  font-size: 0.64rem;
  color: var(--sv-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sv-track {
  height: 0.5rem;
  background: var(--sv-bar-track);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.55rem;
  /* The empty part of the scale is a box, not a gap. */
  outline: 1px solid var(--sv-bar-track);
}
.sv-fill {
  height: 100%;
  background: var(--sv-bar);
  border-radius: 2px 0 0 2px;
}
.page-content .sv-mean {
  font-family: var(--sv-mono);
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--sv-soft);
  font-variant-numeric: tabular-nums;
  /* Divided from the histogram by the dashed rule that divides a table's
     rows, rather than floating under it. */
  margin: 0.7rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--sv-faint);
  text-align: center;
}

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .sv-band { grid-template-columns: 1fr; padding: 2rem 0; }
  .sv-band-left { position: static; }
}
@media (max-width: 640px) {
  .sv-charts { grid-template-columns: 1fr; }
  /* Four headline stats read as a 2×2 block rather than wrapping 3+1. */
  .sv-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}