/* ============================================================
   /research/experimental-data — pilot study.

   Same themed-dashboard layout as /survey (survey.css): bands
   anchored by a headline number and takeaway on the left, with the
   evidence — the Guide screenshot, participant quote cards, and the
   before/after dot-plot figures — on the right.

   ---- the wireframe language ----

   The layout is unchanged; what it is drawn in is not. Same four things as
   survey.css, with the same numbers — paper rather than a tinted card, a
   ruled edge and a hard offset cast, mono for anything that labels, ink
   plus one accent and no third. The values are the walkthroughs' own,
   borrowed rather than imported.
   ============================================================ */

:root {
  --ed-ink: #55555f;
  --ed-strong: #111118;
  --ed-soft: #3f3f46;
  --ed-faint: #bab7b0;
  --ed-paper: #fffefb;
  --ed-cast: rgba(60, 50, 40, 0.16);
  --ed-accent: #5a5ad1;
  --ed-card-bg: var(--ed-paper);
  --ed-card-border: var(--ed-ink);
  /* The mat the chart figures are pasted onto — white in both themes, for
     the reason given at "Chart figures" below. */
  --ed-mat-fill: #ffffff;
  --ed-mat-border: var(--ed-ink);
  --ed-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}
html.dark-mode {
  --ed-ink: #a8a8b4;
  --ed-strong: #f1f1f5;
  --ed-soft: #b3b3bc;
  --ed-faint: #4b4b5a;
  --ed-paper: #15151e;
  --ed-cast: rgba(226, 226, 255, 0.09);
  --ed-accent: #8a8aff;
}

/* ---- Headline stat band ---- */
.ed-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(--ed-faint);
  border-bottom: 1px dashed var(--ed-faint);
}
.ed-si { text-align: center; }
.ed-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(--ed-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A label, so mono, uppercase and tracked. */
.ed-si span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--ed-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ed-soft);
}

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

/* ---- Bands ---- */
.ed-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(--ed-faint);
  margin-top: 2.6rem;
}
.ed-band:first-of-type { border-top: none; margin-top: 0.4rem; }
.ed-band + .ed-band { margin-top: 0; }

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

h2.ed-kicker {
  font-family: var(--ed-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-accent);
  margin: 0 0 0.5rem;
}
.page-content .ed-stat {
  font-family: var(--ed-mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-strong);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.6rem;
}
/* The quotes band leads with a quotation mark, not a number — same mark
   as on the quotes themselves, sized up to anchor the band the way the
   stats anchor theirs. Clip its tall line box so the takeaway sits as
   close as under a digit. */
.page-content .ed-stat.ed-glyph {
  font-family: Charter, "Bitstream Charter", Georgia, serif;
  font-size: 4.6rem;
  color: var(--ed-accent);
  opacity: 0.5;
  height: 0.55em;
  overflow: visible;
}
.page-content .ed-take {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ed-strong);
  margin: 0;
}
.ed-take .ed-sub {
  display: block;
  margin-top: 0.7rem;
  color: var(--ed-soft);
  font-size: 0.75rem;
  line-height: 1.65;
}

/* ---- Chart figures ----
   The dot-plot PNGs are dark ink on transparent, drawn for a light
   background; the white mat renders them cleanly in both themes
   (seamless in light mode, a framed card in dark mode).

   The mat has to be white on its own account rather than by way of
   --surface-raised, which is what it used to take. When the dark elevation
   system came in, --surface-raised went to #15151e in dark mode and took the
   mat with it — which left the axes, the tick labels, the reference lines
   and the H0 annotation as near-black ink on a near-black plate. Only the
   saturated dots and triangles survived. */
.page-content .ed-fig {
  margin: 0;
  max-width: none;
}
/* The mat is a real element rather than padding on the image, because the
   hand draws the edge and js/hand-ink.js puts its SVG *inside* the box it
   is drawing — and an <img> takes no children. Same trap a <fieldset> and a
   closed <details> set (docs/WIREFRAME-LANGUAGE.md §2.1); same answer, a
   plain wrapper to be drawn on.

   position: relative because that SVG is absolutely positioned against it.

   .page-content prefix so the width wins over site.css's
   `.page-content img { max-width: min(100%, 39rem) }` — without it the
   mat clamps to 39rem while the caption spans the full column. */
.page-content .ed-mat {
  position: relative;
  background: var(--ed-mat-fill);
  padding: clamp(12px, 2.2vw, 22px);
  border: 1.5px solid var(--ed-mat-border);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--ed-cast);
  box-sizing: border-box;
}
.page-content .ed-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}
.page-content .ed-fig figcaption {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ed-soft);
  text-align: left;
  margin-top: 0.7rem;
}

/* The chat screenshot, capped well below column width so its text renders
   near life size instead of poster size. It used to sit on nothing at all;
   here it is pinned to a sheet of the page's own paper, drawn like every
   other thing you read on this site. Its mat is paper rather than the white
   the plots need — the bubble is a picture of an interface, not a chart
   whose axes are dark ink on transparent. */
.page-content .ed-fig-chat { max-width: 26rem; margin: 0 auto; }
.page-content .ed-fig-chat .ed-mat {
  background: var(--ed-paper);
  padding: 0.7rem;
}
.page-content .ed-fig-chat figcaption { text-align: center; }

/* ---- Participant quotes ----
   Typographic, echoing the site's rotating pull-quote (site.css
   .pull-quote): serif italic behind a hanging quotation mark, with the
   topic in a mono label after a short dash. Two packed columns via CSS
   columns; no card boxes. */
.ed-quotes { columns: 2; column-gap: 3rem; }
.page-content .ed-quote {
  position: relative;
  break-inside: avoid;
  margin: 0 0 2.1rem;
  max-width: none;
  padding-left: 1.9rem;
}
.page-content .ed-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.24em;
  font-family: Charter, "Bitstream Charter", Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--ed-accent);
  opacity: 0.5;
}
.page-content .ed-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
}
.page-content .ed-quote blockquote p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ed-strong);
  margin: 0;
}
.page-content .ed-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ed-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-soft);
  text-align: left;
  margin-top: 0.6rem;
}
.page-content .ed-quote figcaption::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--ed-accent);
}

.page-content .ed-fine {
  text-align: center;
  color: var(--ed-soft);
  margin: 1.6rem 0 0;
}

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