/* Palette and type taken from measuringaiprogress.org: Manrope, indigo #263487,
   zinc neutrals, square corners, hairline rules. */
:root {
  color-scheme: light;

  --brand: #263487;
  --brand-dark: #1d2868;
  --brand-tint: #ecedfb;
  --brand-soft: #aeb0d8;

  --white: #fff;
  --surface: #f7f7f8;
  --line: #e6e6e9;

  --ink: #1c1c1e;
  --ink-body: #3f3f46;
  --muted: #6b6b73;
  --muted-light: #8a8a92;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Four sizes, nothing under 14px. Change a number here and every rule that
     uses it follows. */
  --text-sm: 16px;   /* descriptions, labels, footer, legend, notes */
  --text-body: 16px; /* all body copy and inputs */
  --text-lead: 16px; /* question titles, card headings */
  --text-stat: 20px; /* the two summary figures, completion heading */
  --text-title: clamp(1.35rem, 3.15vw, 1.6875rem); /* survey title, 21.6–27px */
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--white);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

select,
input,
button,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Page shell ---------- */

.site-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--white);
  background: var(--brand);
}

.brand strong {
  display: block;
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.privacy-note {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}

.privacy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.noscript-message {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-body);
}

/* ---------- SurveyJS overrides ---------- */

/* SurveyJS reads these; its own teal is only a fallback, so defining them
   here retints the whole widget in one place. */
#surveyContainer {
  min-height: 320px;

  --sjs-font-family: var(--font);
  --sjs-default-font-family: var(--font);
  --sjs-font-size: var(--text-body);

  --sjs-primary-backcolor: var(--brand);
  --sjs-primary-backcolor-dark: var(--brand-dark);
  --sjs-primary-backcolor-light: var(--brand-tint);
  --sjs-primary-forecolor: var(--white);
  --sjs-primary-forecolor-light: var(--white);

  --sjs-general-backcolor: var(--white);
  --sjs-general-backcolor-dim: var(--white);
  --sjs-general-backcolor-dim-light: var(--surface);
  --sjs-general-backcolor-dark: var(--surface);
  --sjs-general-forecolor: var(--ink-body);
  --sjs-general-forecolor-light: var(--muted);
  --sjs-general-dim-forecolor: var(--ink);
  --sjs-general-dim-forecolor-light: var(--muted);

  --sjs-border-default: var(--line);
  --sjs-border-light: var(--line);
  --sjs-corner-radius: 0px;

  --sjs-question-background: transparent;
  --sjs-questionpanel-backcolor: transparent;
  --sjs-questionpanel-hovercolor: var(--surface);

  --sjs-font-questiontitle-color: var(--ink);
  --sjs-font-questiondescription-color: var(--muted);

  /* Fully transparent rather than `none`, which would be invalid inside
     SurveyJS's multi-value box-shadow lists. */
  --sjs-shadow-small: 0 0 0 rgba(0, 0, 0, 0);
  --sjs-shadow-medium: 0 0 0 rgba(0, 0, 0, 0);

  --sjs-special-red: #b3261e;
  --sjs-special-red-light: #fdecea;
}

#surveyContainer .sd-root-modern,
#surveyContainer .sd-container-modern,
#surveyContainer .sd-body,
#surveyContainer .sd-body.sd-body--static,
#surveyContainer .sd-page {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  font-family: var(--font);
}

#surveyContainer .sd-header__text,
#surveyContainer .sd-page__title {
  margin: 0 0 8px;
}

#surveyContainer .sd-title,
#surveyContainer .sd-page__title {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Page titles are written "Training 6 of 8\nPractice the full format"; this
   shows the \n as a line break instead of collapsing it to a space. */
#surveyContainer .sd-page__title .sv-string-viewer,
#surveyContainer .sd-page__title {
  font-size: 22px;
  white-space: pre-line;
}

#surveyContainer .sd-description {
  font-size: var(--text-body);
  color: var(--muted);
}

/* SurveyJS underlines the survey header with a 2px box-shadow in the primary
   colour (not a border, so it resists the usual overrides). Swap it for the
   same hairline used everywhere else. */
#surveyContainer .sd-container-modern__title {
  box-shadow: 0 1px 0 0 var(--line);
  padding-bottom: 24px;
  margin-bottom: 32px;
  /* SurveyJS pads the header 24px on each side but not the page, which left
     the survey title indented relative to every page title below it. */
  padding-left: 0;
  padding-right: 0;
}

#surveyContainer .sd-element--with-frame {
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
  margin-top: 24px;
}

/* SurveyJS gives the error box -40px side margins, to stretch it across the
   40px padding it normally puts round each question. The rule above removes
   that padding, so without this the box hangs 40px off the left edge and its
   text is cut off. */
#surveyContainer .sd-element__erbox {
  margin-left: 0;
  margin-right: 0;
  width: auto; /* SurveyJS widens it by the same 2 x 40px */
}

#surveyContainer .sd-question__title,
#surveyContainer .sd-question__title .sv-string-viewer {
  font-size: var(--text-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

#surveyContainer .sd-question__description {
  font-size: var(--text-sm);
  color: var(--muted);
}

#surveyContainer .sd-input {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  box-shadow: none;
  padding: 10px 12px;
}

#surveyContainer .sd-input:focus,
#surveyContainer .sd-input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-color: var(--brand);
}

#surveyContainer .sd-selectbase__label {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: background 0.12s ease, border-color 0.12s ease;
}

#surveyContainer .sd-selectbase__label:hover {
  border-color: var(--brand-soft);
  background: var(--surface);
}

#surveyContainer .sd-item--checked .sd-selectbase__label {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* NOTE: .sd-navigation is an older SurveyJS class name and matches nothing in
   v2.5.40, so this rule (a divider line above the buttons) does not apply.
   Kept as-is pending a decision on whether the divider is wanted. */
#surveyContainer .sd-navigation {
  padding: 24px 0 0;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

/* The button bar's actual class. SurveyJS pads it 40px on each side, which
   indented Back/Continue relative to everything else on the page. */
#surveyContainer .sd-body__navigation {
  padding-left: 0;
  padding-right: 0;
}

#surveyContainer .sd-btn {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
  padding: 11px 20px;
}

#surveyContainer .sd-btn:hover {
  background: var(--surface);
  border-color: var(--brand-soft);
}

#surveyContainer .sd-navigation__complete-btn,
#surveyContainer .sd-navigation__next-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

#surveyContainer .sd-navigation__complete-btn:hover,
#surveyContainer .sd-navigation__next-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* On a main question's feedback page, when editing is offered, Continue is
   relabelled "Continue without changes" -- or "Continue anyway" when no curve
   could be drawn (app.js) -- and must look secondary next
   to the main Edit my answer button. SurveyJS re-applies its own class to
   Continue when it switches to the mobile layout, so this matches the label
   too; keep the text here in step with app.js. */
#surveyContainer .sd-navigation__keep-btn,
#surveyContainer input.sd-btn[title="Continue without changes"],
#surveyContainer input.sd-btn[title="Continue anyway"] {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

#surveyContainer .sd-navigation__keep-btn:hover,
#surveyContainer input.sd-btn[title="Continue without changes"]:hover,
#surveyContainer input.sd-btn[title="Continue anyway"]:hover {
  background: var(--surface);
  border-color: var(--brand-soft);
}

#surveyContainer .sd-completedpage {
  padding: 32px 0;
  background: transparent;
}

#surveyContainer .sd-completedpage h3 {
  font-size: var(--text-stat);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* ---------- Cards inside questions ---------- */

.boundary-card,
.scenario-card,
.evidence-card,
.fit-card {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.fit-eyebrow,
.scenario-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}

.boundary-card h3,
.fit-card__header h3 {
  margin: 0 0 8px;
  font-size: var(--text-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.boundary-card p,
.evidence-caption,
.fit-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.scenario-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scenario-card li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: var(--text-body);
}

.scenario-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--brand);
}

/* ---------- Evidence stats ---------- */

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin: 16px 0;
  background: var(--line);
}

.evidence-stat {
  padding: 14px;
  background: var(--white);
}

.evidence-stat span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}

.evidence-stat strong {
  display: block;
  margin-top: 4px;
  font-size: var(--text-stat);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- Fit summary + chart ---------- */

.fit-shell {
  margin-top: 16px;
}

.fit-card__header {
  margin-bottom: 16px;
}

.fit-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.fit-metric {
  padding: 14px;
  background: var(--white);
}

.fit-metric span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
}

.fit-metric strong {
  display: block;
  margin-top: 4px;
  font-size: var(--text-stat);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.fit-readout {
  margin: 16px 0 0;
  font-size: var(--text-body);
  color: var(--ink-body);
}

.chart-wrap {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--white);
}

.beta-chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.chart-legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
}

.legend-swatch {
  width: 14px;
  height: 3px;
  background: var(--brand);
}

.legend-swatch--mean {
  background: var(--ink);
}

.legend-swatch--interval {
  height: 10px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
}

/* Training feedback: the participant's own chips and three numbers. */
.legend-swatch--chips {
  height: 10px;
  background: #dcdce0;
}

.legend-swatch--answer {
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.fit-error {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--ink-body);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .site-shell {
    padding: 0 16px 48px;
  }

  .site-header {
    margin-bottom: 28px;
  }

  .boundary-card,
  .scenario-card,
  .evidence-card,
  .fit-card {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Optional maths block on the training page. Uses the native <details> so it
   is keyboard-accessible and collapsed by default with no extra script. */
.maths-detail > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.maths-detail > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.maths-detail p {
  margin: 12px 0 0;
}

.maths-detail code {
  font-size: 0.95em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 4px;
}

.fit-card h3 { margin: 0; font-size: var(--text-lead); }
.scenario-card p:first-child, .evidence-card p:first-child { margin-top: 0; }
.scenario-card p:last-child { margin-bottom: 0; }

/* Shared-context reminder at the top of every question page. Collapsed to one
   quiet line by default -- small, muted, hairline border, no fill -- so it is
   always to hand without competing with the scenario or the question. */
.context-reminder {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
}
.context-reminder > summary {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 500;
}
.context-reminder > summary:hover { color: var(--ink); }
.context-reminder > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.context-reminder[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.context-reminder__body { padding: 4px 12px 8px; color: var(--ink-body); }
.context-reminder__body p { margin: 8px 0; }
.context-note { margin: 12px 0 0; font-size: var(--text-sm); color: var(--muted); }

/* ---------- Response formats ---------- */

.method-prompt { margin: 0; color: var(--ink-body); }

/* Chips. On narrow screens, one row per range of successful attempts out of
   100; chips fill a track of --slots equal cells, so 20 chips always fit. From
   720px wide the same markup becomes a histogram (see the block below). */
.chips-host { margin-top: 8px; }
.chips-status { margin: 0 0 12px; color: var(--ink-body); }
.chips-status strong { font-size: var(--text-stat); color: var(--ink); }
.chips-status:focus { outline: none; }
.chips-rows { display: grid; gap: 4px; }
.chips-row {
  display: grid;
  grid-template-columns: 8.5em 32px minmax(0, 1fr) 32px 2ch;
  align-items: center;
  gap: 8px;
}
.chips-label { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips-track {
  display: grid;
  grid-template-columns: repeat(var(--slots), minmax(0, 1fr));
  gap: 2px;
  height: 20px;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--white);
}
.chip { display: block; background: var(--brand); }
.chips-axis { display: none; }
.chips-count { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chips .chips-btn,
.chips .chips-clear {
  /* Scoped under .chips to beat SurveyJS's ".sd-html button" (flex, no
     border, wide padding, rounded, shadowed). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-soft);
  border-radius: 0;
  box-shadow: none;
  background: var(--white);
  color: var(--brand);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.chips .chips-btn { width: 32px; height: 32px; padding: 0; font-size: 18px; }
.chips .chips-clear { margin-top: 12px; padding: 8px 14px; font-size: var(--text-sm); }
.chips .chips-btn:hover:not(:disabled),
.chips .chips-clear:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); }
.chips .chips-btn:focus-visible,
.chips .chips-clear:focus-visible { box-shadow: none; outline: 2px solid var(--brand); outline-offset: 2px; }
.chips .chips-btn:disabled,
.chips .chips-clear:disabled { border-color: var(--line); color: var(--muted-light); cursor: default; }
@media (max-width: 480px) {
  /* "out of 100" drops to a second line so the chip track keeps its width. */
  .chips-row { grid-template-columns: 4.5em 30px minmax(0, 1fr) 30px 2ch; gap: 6px; }
  .chips-label { white-space: normal; line-height: 1.2; }
  .chips-label-unit { display: block; font-size: 14px; }
  .chips .chips-btn { width: 30px; height: 30px; }
}

/* Chips as a histogram: the ten ranges run left to right as columns, chips
   stack upward from the axis, and each column reads count / chips / range /
   controls. Same markup and controls as the row layout above. */
@media (min-width: 720px) {
  .chips-rows {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
  }
  .chips-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "count count"
      "track track"
      "label label"
      "minus plus";
    justify-items: center;
    gap: 6px;
  }
  .chips-count { grid-area: count; text-align: center; }
  .chips-track {
    grid-area: track;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    /* Room for every chip in one column: 20 x (8px chip + 2px gap). */
    height: calc(var(--slots) * 10px + 4px);
    border: 1px solid var(--line);
    border-bottom: 2px solid var(--ink-body);
  }
  /* Inset from the column edges so each chip reads as a separate block. */
  .chips-track { padding: 2px 4px; }
  .chips-track .chip { height: 8px; flex: none; }
  .chips-label { grid-area: label; text-align: center; font-size: 14px; }
  .chips-label-unit { display: none; }
  .chips .chips-btn { width: 28px; height: 28px; font-size: 16px; }
  .chips .chips-btn[data-step="-1"] { grid-area: minus; justify-self: end; }
  .chips .chips-btn[data-step="1"] { grid-area: plus; justify-self: start; }
  .chips-axis { display: block; margin: 6px 0 0; text-align: center; font-size: var(--text-sm); color: var(--muted); }
}


/* A question's schematic, at the top of its scenario card. */
.scenario-figure { margin: 8px 0 16px; }
.scenario-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--white);
}
.scenario-figure figcaption { margin-top: 6px; font-size: var(--text-sm); color: var(--muted); }