/* =========================================================================
   Open Psychology Interactives — Simplified Edition
   simplified.css — design tokens and the workbook shell
   -------------------------------------------------------------------------
   The Simplified Edition is a parallel edition of the collection. It lives
   entirely under `simplified/` and shares no runtime code with the original
   edition: `assets/css/main.css` declares a permanently dark theme, and the
   two token sets must never be loaded on the same page.

   The visual language here is derived from the golden references in
   `docs/simplified-reference/`: a warm off-white page, white rounded cards,
   navy typography, restrained teal and blue, and small gold highlights, laid
   out as a single-column university workbook.

   Static structure keeps the reference class names verbatim — `.hero`,
   `.card`, `.reveal`, `.takeaway`, `.btn-primary` and so on — so a golden
   example could plausibly have been authored against this file. Interactive
   *state* is the one deliberate departure: the references signal state with
   classes (`.active`, `.done`, `.correct`, `.wrong`), this shell signals it
   with `data-state`, because the accessible version of each state also needs
   a glyph, a text label and an `aria-disabled` flag that only JavaScript can
   keep in step. See `docs/simplified-edition.md`.

   Three deliberate improvements on the references:

     * Lengths are in `rem`, not `px`. At default settings this renders
       identically; when a reader raises their browser font size, the layout
       follows (WCAG 1.4.4). The references are fixed at `px` throughout.
     * `Inter` is dropped from the font stack. The references name it first
       but never load it, so it silently falls through to the system UI font
       on almost every machine. Naming a font we do not ship is misleading,
       and shipping one would mean a network request or a bundled licence —
       both against the project's rules.
     * Focus, reduced motion, forced colours, target size and non-colour
       state indication are added. The references have none of them.

   No external fonts, no libraries, no network requests. Works from `file://`.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
  /* --- Surfaces ---
     The warm off-white page is what makes this read as paper rather than as
     an application. `--card` is pure white so cards lift off it without a
     heavy shadow. */
  --page: #F5F2ED;
  --card: #FFFFFF;
  --border: #DDD8CF;

  /* --- Typography colours ---
     --navy on --card    = 15.3:1
     --muted on --card   =  5.6:1
     --muted on --page   =  5.0:1
     All clear WCAG 2.2 AA for body text. */
  --navy: #1A2744;
  --muted: #5F6878;

  /* --- Accents ---
     Teal is the working accent: eyebrows, step labels, primary buttons and
     the "this is where you are" tint. It is 5.4:1 on white as text, and
     white on it is the same ratio, so it is safe both ways round. */
  --teal: #1C7293;
  --teal-light: #EAF4FA;
  --blue: #3D5A80;
  --blue-light: #EDF1F7;

  /* --- Gold ---
     Gold is a highlight, never a text colour: #D4A853 is only 2.1:1 on white
     and would fail as body text. It is used for the step-label dot, the
     takeaway's left rule, tinted panels and diagram strokes — all of which
     are decorative or carry a text label of their own. Do not set
     `color: var(--gold)` on anything a reader has to read. */
  --gold: #D4A853;
  --gold-light: #F7EEDC;
  /* The border-safe gold. #D4A853 is only 1.9:1 against --gold-light and
     2.2:1 against white, so a gold edge that carries meaning — the border of
     an incorrect option, of a completed step, of a flagged notice — fails
     the 3:1 that WCAG 2.2 SC 1.4.11 asks of non-text contrast. This one
     clears it on white (4.3:1), on --page (3.8:1) and on --gold-light
     (3.7:1). Use --gold for fills and decorative marks, --gold-strong for
     any gold line at an edge. */
  --gold-strong: #9E7318;

  /* --- Judgement colours ---
     --green is a graphic colour (borders, diagram nodes) at 4.4:1 on its own
     tint, which clears the 3:1 needed for non-text contrast but not the 4.5:1
     needed for text. --green-strong is the text-safe variant at 6.4:1 on
     --green-light. The same split is not needed for coral, which is already
     5.1:1 on white.

     Colour is never the only signal: correct and incorrect states also carry
     a glyph, a border style and a visually hidden text label. */
  --green: #2F7D69;
  --green-strong: #25634F;
  --green-light: #EAF5F1;
  --coral: #C0434F;
  --coral-light: #F9ECEE;

  /* --- Focus ---
     A deliberately different hue from every accent, so a focus ring is never
     mistaken for a selected state. 4.5:1 on --page, 5.0:1 on --card and at
     least 4.3:1 on every tinted panel in this file, all well past the 3:1
     that WCAG 2.2 SC 1.4.11 asks of a focus indicator. Matches the light
     palette's --colour-focus in the original edition. */
  --focus: #B45309;

  /* --- Typography ---
     System fonts only. See the note at the top about Inter. */
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;      /* 12px — diagram sub-labels, legends */
  --text-sm: 0.8125rem;    /* 13px — eyebrows, hints, .small */
  --text-base: 1rem;       /* 16px — body */
  --text-md: 1.0625rem;    /* 17px — case text, option titles */
  --text-lg: 1.125rem;     /* 18px — hero lead */
  --text-xl: 1.5rem;       /* 24px — big figures */
  --text-2xl: 1.875rem;    /* 30px — result numbers */

  /* --- Spacing ---
     --stack is the single most repeated measurement in the references: the
     18px gap between one block and the next. Using one token for it is what
     produces the even workbook rhythm. */
  --stack: 1.125rem;       /* 18px */
  --gap: 0.75rem;          /* 12px */
  --card-pad-block: 1.75rem;
  --card-pad-inline: 1.875rem;

  /* --- Shape --- */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-md: 15px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow: 0 12px 34px rgb(26 39 68 / 0.08);
  --shadow-card: 0 7px 22px rgb(26 39 68 / 0.05);

  /* --- Layout --- */
  --workbook-width: 61.25rem;   /* 980px */

  /* --- Minimum interactive target (WCAG 2.2 SC 2.5.8 asks for 24px; this
         is the more comfortable 44px, which classroom projectors and touch
         both benefit from). --- */
  --target: 2.75rem;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--page);
  /* Anchor targets and programmatic scrolls stop clear of the top edge. */
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  /* Two very faint washes — gold top-left, teal top-right — over the warm
     page. They are what stops a page of white cards looking clinical. */
  background:
    radial-gradient(circle at 10% 8%, rgb(212 168 83 / 0.14), transparent 22rem),
    radial-gradient(circle at 90% 18%, rgb(28 114 147 / 0.12), transparent 24rem),
    var(--page);
}

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

[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   3. Accessibility layers

   Everything in this section is absent from the golden references and is the
   reason this shell exists rather than each activity carrying its own copy
   of the reference CSS.
   ---------------------------------------------------------------------- */

/* Available to assistive technology, invisible on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link. Off-screen until focused, then a normal button at the top left. */
.skip-link {
  position: absolute;
  top: -100vh;
  left: var(--gap);
  z-index: 10;
  padding: 0.6875rem 1.0625rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--gap);
}

/* Focus.
   `:focus-visible` rather than `:focus`, so a mouse click on a card-sized
   button does not paint a ring, but every keyboard arrival does.
   `outline-offset` puts the ring outside the control, on the card or page
   behind it, which is what keeps it contrasting even on a filled teal
   button — the ring is never drawn on top of the accent it surrounds. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Older engines without :focus-visible still get a ring rather than nothing.
   Any browser that understands :focus-visible discards this whole block. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
}

/* Reduced motion.
   The references call scrollIntoView({behavior:'smooth'}) unconditionally.
   workbook.js checks the preference before it scrolls; this block covers
   everything else, including any transition an activity adds locally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Forced colours (Windows high-contrast).
   State tints are dropped by the OS there, so the borders and glyphs have to
   carry the meaning on their own. They already do — this only makes sure the
   borders survive. */
@media (forced-colors: active) {
  .card,
  .synthesis,
  .hero,
  .reveal,
  .casebox,
  .takeaway {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}

/* The polite live region.
   One per activity. Visible by default, because a short "Estimate recorded"
   line helps everyone; add `workbook-status--quiet` where a visible status
   would give away what the activity is about to reveal. */
.workbook-status {
  margin: var(--stack) 0 0;
  min-height: 1.55em;
  color: var(--muted);
  font-size: var(--text-sm);
}

.workbook-status--quiet {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------------- */

.workbook {
  width: min(var(--workbook-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.625rem 0 4rem;
}

/* -------------------------------------------------------------------------
   5. Hero

   Title, one-line eyebrow, one sentence of orientation. Nothing else: the
   references never put instructions here, because a learner who is about to
   act should meet as little prose as possible (LEARNER_COPY_STYLE.md §4).
   ---------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 2.125rem 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid rgb(26 39 68 / 0.08);
  box-shadow: var(--shadow);
}

/* The offset ring in the top-right corner. Purely decorative, so it is a
   pseudo-element with no text and nothing focusable inside it. */
.hero::after {
  content: "";
  position: absolute;
  right: -3.75rem;
  top: -4.875rem;
  width: 11.875rem;
  height: 11.875rem;
  border-radius: 50%;
  background: var(--teal-light);
  border: 22px solid rgb(212 168 83 / 0.18);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 0.625rem;
  color: var(--teal);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.125rem, 5vw, 3.375rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__lead {
  max-width: 45rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: var(--text-lg);
}

/* -------------------------------------------------------------------------
   6. Progress

   Markup contract:

     <nav aria-label="Activity progress">
       <ol class="progress" data-workbook-progress style="--progress-columns:3">
         <li class="progress__step" data-state="current">Step label</li>
         ...
       </ol>
     </nav>

   An ordered list inside a labelled nav, not the references' bare divs: a
   list tells assistive technology how many steps there are and which one is
   being read, and `aria-label` on a `<div>` is not exposed at all. The
   current step also carries `aria-current="step"`, and completed steps get a
   visually hidden ", completed" — both written by workbook.js, so the visual
   tint is never the only signal.

   Column counts are set per activity rather than by class, because the
   references use three and six and there is no reason to guess.
   ---------------------------------------------------------------------- */

.progress {
  display: grid;
  grid-template-columns: repeat(var(--progress-columns, 3), minmax(0, 1fr));
  gap: 0.625rem;
  margin: 1.25rem 0 1.625rem;
  padding: 0;
  list-style: none;
}

.progress__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.6875rem 0.8125rem;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.66);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: center;
}

.progress__step[data-state="current"] {
  color: var(--navy);
  background: var(--teal-light);
  border-color: rgb(28 114 147 / 0.35);
}

.progress__step[data-state="done"] {
  color: var(--navy);
  background: var(--gold-light);
  border-color: var(--gold-strong);
}

/* Shape, not only colour: a completed step is ticked. */
.progress__step[data-state="done"]::before {
  content: "\2713";
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   7. The activity card

   step-label -> h2 -> lead -> stimulus -> interaction -> reveal -> actions.
   `.synthesis` is the same box; it is a separate class only so that an
   activity can style or find the closing section on its own.
   ---------------------------------------------------------------------- */

.card,
.synthesis {
  margin-top: var(--stack);
  padding: var(--card-pad-block) var(--card-pad-inline);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid rgb(26 39 68 / 0.09);
  box-shadow: var(--shadow-card);
}

.step-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  color: var(--teal);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The small gold dot. Decorative; the label beside it carries the meaning. */
.step-label::before {
  content: "";
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--gold);
}

.card h2,
.synthesis h2 {
  margin: 0 0 0.5625rem;
  font-size: clamp(1.5rem, 3vw, 1.9375rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.card h3,
.synthesis h3 {
  margin: 0 0 0.625rem;
  font-size: var(--text-md);
}

.lead {
  max-width: 47.5rem;
  margin: 0;
  color: var(--muted);
}

.lead + .lead {
  margin-top: 0.5rem;
}

.small {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   8. Reveal

   The short explanation that follows an action. One intellectual job per
   reveal (LEARNER_COPY_STYLE.md §8); anything longer belongs in the
   synthesis or in teaching-notes.md.

   No `aria-live` here, unlike the references, which put it on the whole
   block. A reveal can be several paragraphs and re-announcing all of it is
   noise; workbook.js announces one sentence through `.workbook-status`
   instead, and the reveal itself is simply scrolled to.
   ---------------------------------------------------------------------- */

.reveal {
  margin-top: 1rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid rgb(26 39 68 / 0.09);
}

.reveal > p {
  margin: 0;
}

.reveal > p + p {
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   9. Actions and buttons
   ---------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: var(--stack);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding: 0.6875rem 1.0625rem;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.btn-primary {
  background: var(--teal);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: #175E7A;
}

.btn-secondary {
  background: var(--card);
  color: var(--navy);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--teal);
}

/* Disabled buttons.
   `[disabled]` is supported because a not-yet-available "Next" really is
   inert and has nothing to announce. `[aria-disabled]` is the form used for
   controls that must stay reachable — see `.option` in patterns.css — and it
   is styled the same way so the two are indistinguishable on screen. */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   10. Synthesis: diagram and figures

   The synthesis diagram is the one place the references spend real effort,
   and the rule they follow is that the picture states a relationship the
   text also states. A diagram that only looks tidy is not worth the bytes.

   Every diagram must carry <title> and <desc> referenced by
   aria-labelledby, and the ids must be namespaced per activity — the
   references reuse `id="t"` and `id="d"` in every file, which collides the
   moment two activities share a page.
   ---------------------------------------------------------------------- */

.diagram-wrap {
  margin-top: var(--stack);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #FBFAF7;
  border: 1px solid var(--border);
}

.diagram-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.node-title {
  font: 800 1rem var(--font-body);
  fill: var(--navy);
}

.node-sub {
  font: 500 var(--text-xs) var(--font-body);
  fill: var(--muted);
}

.col-head {
  font: 800 var(--text-xs) var(--font-body);
  fill: var(--muted);
  letter-spacing: 0.09em;
}

/* -------------------------------------------------------------------------
   11. Takeaway

   One boxed sentence, gold-ruled, at the very end. There is exactly one per
   activity in every reference, and that restraint is the point.
   ---------------------------------------------------------------------- */

.takeaway {
  margin-top: var(--stack);
  padding: 1.25rem 1.375rem;
  border-left: 5px solid var(--gold-strong);
  border-radius: var(--radius-sm);
  background: var(--gold-light);
}

.takeaway > p {
  margin: 0;
}

.takeaway > p + p {
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
   11b. Compact variant

   `class="workbook workbook--compact"` on the root.

   A tool page has a different job from the showcase template: the learner
   should be able to see the prompt, every option and the control that moves
   them on without scrolling. The showcase hero is sized to introduce a page;
   an activity hero only has to name it.

   This tightens vertical rhythm — hero, headings and card padding — and
   nothing else. Text sizes stay readable, targets stay 44px, and the
   spacing between interactive elements is untouched. It is the same visual
   system at a closer setting, not a cramped one.
   ---------------------------------------------------------------------- */

.workbook--compact {
  /* The standard block gap, from 18px to 14px. Inherited, so every grid and
     card in the activity follows without being named here. */
  --stack: 0.875rem;
  --gap: 0.625rem;
  padding-top: 1.5rem;
}

.workbook--compact .hero {
  padding: 1.5rem 1.75rem;
}

.workbook--compact .hero::after {
  width: 8.75rem;
  height: 8.75rem;
  right: -2.75rem;
  top: -3.5rem;
  border-width: 16px;
}

.workbook--compact .hero h1 {
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.05;
}

.workbook--compact .hero__lead {
  max-width: 54ch;
  margin-top: 0.5rem;
  font-size: 1rem;
}

.workbook--compact .progress {
  margin: 0.875rem 0 0;
}

.workbook--compact .progress__step {
  padding: 0.5625rem 0.75rem;
}

.workbook--compact .card,
.workbook--compact .synthesis {
  padding: 1.5rem 1.625rem;
}

.workbook--compact .card h2,
.workbook--compact .synthesis h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
}

.workbook--compact .workbook-status {
  margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
   12. Responsive

   One breakpoint, as in the references. Expressed in `em` so it moves with
   the reader's font size rather than fixing at a device width.
   47.5em = 760px at default settings.
   ---------------------------------------------------------------------- */

@media (max-width: 47.5em) {
  .workbook {
    width: min(calc(100% - 1.25rem), var(--workbook-width));
    padding-top: 1.25rem;
  }

  .hero,
  .card,
  .synthesis {
    padding: 1.5rem;
  }

  .workbook--compact .hero,
  .workbook--compact .card,
  .workbook--compact .synthesis {
    padding: 1.25rem;
  }

  .progress {
    grid-template-columns: repeat(var(--progress-columns-narrow, 1), minmax(0, 1fr));
  }

  .actions .btn {
    flex: 1 1 12rem;
  }
}