/* The style for the four pages this project writes by hand.

   site/home.html     a student reads it   body class "aud-student"
   site/404.html      a student reads it   body class "aud-student"
   site/privacy.html  an adult reads it    body class "aud-adult"
   site/adult.html    an adult reads it    body class "aud-adult"

   The other two pages, site/index.html and site/teacher.html, are generated by
   tools/build-site.py and carry their own copy of this styling inside a <style>
   tag. This file exists so the four hand-written pages match them.

   Until 2026-07-29 this file held the kidenv design system and the four pages
   above did not match the two big ones. That is what this rewrite fixes.

   ## Where every value here comes from

   Nothing here was invented for this file. Each rule traces to one of three
   places, and design/site-css-plan.md names the source line for every one:

   - FRONT_CSS in tools/build-site.py, which styles site/index.html.
   - TEACHER_CSS in tools/build-site.py, which styles site/teacher.html.
   - design/style-source.md, the local summary of the Pryzmio design system at
     C:\Users\iango\design.

   ## Why there are two token sets in one file

   The student pages and the adult pages are two looks in one system: a warm
   paper ground and a 3px pure black border for a child, a cool ground and a 2px
   ink border for an adult. tools/build-site.py never has to solve this, because
   its two blocks go into two <style> tags on two separate pages and never meet.
   This file is loaded by all four pages, so the tokens hang off a class on
   <body> instead of off :root.

   ## The colour rules this file obeys

   Red is used once, on the button that erases a student. design/style-source.md
   reserves red for an action that cannot be undone, and that is the only one on
   this site. A message that says something did not send is never red and never
   green: it is the sunk fill with a quiet bar down its left side. Nothing a
   child does here is right or wrong, so nothing tells them so. */

/* The fonts live on this site. The header says font-src 'self', and the school
   network may block fonts.googleapis.com, so nothing is fetched elsewhere.
   FRONT_CSS and TEACHER_CSS declare the same two faces. This is one copy. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/font/bricolage-grotesque-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/font/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ================================================================== tokens */

/* Windows is in dark mode on the machine that draws the screenshots and the
   school Chromebooks are not. Pin it, so both show the same page. All four
   pages also pin it with a <meta> tag. This is the second layer, so a page that
   loses its meta tag still draws light. */
:root { color-scheme: light; }

body.aud-student {
  color-scheme: light;

  --paper:  #F2EFE6;
  --panel:  #FFFFFF;
  --sunk:   #E9E5DA;
  --black:  #000000;
  --slate:  #47526B;

  /* A picked answer is filled with calm slate, not black. Black is the one act
     cue on the screen and that is the Send button. Both questions can be
     answered at once, so two black fills would give the page two act cues. */
  --calm:   #DCE1EA;

  --bw:  3px;
  --off: 6px;
  --r:   12px;

  --display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --text: "Manrope", "Segoe UI", system-ui, Arial, sans-serif;
  --pad: clamp(14px, 3vw, 26px);
}

body.aud-adult {
  color-scheme: light;

  --ground: #F4F6F9;
  --panel:  #FFFFFF;
  --sunk:   #EEF1F5;
  --ink:    #131922;
  --quiet:  #47526B;
  --edge:   #828C9B;

  /* One button on this site cannot be undone. This is its colour. */
  --danger: #B4232E;

  --bw: 2px;
  --off: 2px;
  --r: 8px;

  --display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --text: "Manrope", "Segoe UI", system-ui, Arial, sans-serif;
  --pad: clamp(14px, 2.6vw, 26px);
}

/* ==================================================================== base */

* { box-sizing: border-box; margin: 0; padding: 0; }

body.aud-student {
  background: var(--paper);
  color: var(--black);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  padding:
    max(var(--pad), env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    calc(var(--pad) + 20px)
    max(var(--pad), env(safe-area-inset-left));
}

body.aud-adult {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums;
  padding: var(--pad) var(--pad) calc(var(--pad) + 20px);
}

.wrap { max-width: 1180px; margin: 0 auto; }

h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.aud-student h1 { font-size: clamp(2.1rem, 6.4vw, 3.9rem); line-height: 0.94; }
.aud-adult h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); line-height: 1; }

/* FRONT_CSS styles h2 only inside a block head and TEACHER_CSS only inside a
   plate. Neither box appears on these four pages, so both take the type values
   without the box around them. */
h2 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  margin: 22px 0 10px;
}
.aud-student h2 { font-size: clamp(1.15rem, 2.3vw, 1.5rem); }
.aud-adult h2 { font-size: clamp(1.1rem, 2.1vw, 1.35rem); }

/* Air between paragraphs. Neither source block needs this rule, because neither
   big page runs paragraphs one after another. These four do. */
p + p, ul + p, p + ul, p + h2, ul + h2, p + table, table + p { margin-top: 12px; }
p { max-width: 68ch; }

ul { padding-left: 1.4em; max-width: 68ch; }
li { margin-bottom: 4px; }

/* =================================================================== links */

.aud-student a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.aud-student a:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }

.aud-adult a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
.aud-adult a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (hover: hover) {
  a:hover { text-decoration-thickness: 4px; }
}

/* ================================================================= buttons */

/* One filled button to a screen, and it is the thing the page wants pressed.
   design/style-source.md gives four tiers: filled, bordered, quiet link, and
   danger. On home.html the filled one is Send. On privacy.html it is the erase
   button, and that one is red because it cannot be undone. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

/* ---- student ---- */

.aud-student .btn {
  background: var(--panel);
  border: var(--bw) solid var(--black);
  border-radius: var(--r);
  color: var(--black);
}
.aud-student .btn:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

/* The act cue. A die-cut ring keeps it off its own shadow. The rule for a
   plain link underlines every <a>, and this one is a box, so it says no. */
.aud-student .btn.big {
  background: var(--black);
  color: var(--panel);
  text-decoration: none;
  margin: 16px 0 4px;
  box-shadow: 0 0 0 3px var(--panel), var(--off) var(--off) 0 var(--black);
  transition: transform 90ms cubic-bezier(.2, 0, .2, 1),
              box-shadow 90ms cubic-bezier(.2, 0, .2, 1);
}
.aud-student .btn.big:active {
  transform: translate(var(--off), var(--off));
  box-shadow: 0 0 0 3px var(--panel);
}
.aud-student .btn.big:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 7px var(--black),
              var(--off) var(--off) 0 var(--black);
}
.aud-student .btn.big[disabled] {
  background: var(--sunk);
  border-color: var(--sunk);
  color: var(--slate);
  box-shadow: none;
  cursor: default;
}

/* "Back to the list" is a link, not a box. The quiet tier. */
.aud-student a.btn.quiet {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* The six answer buttons on home.html. */
.pick {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 10px 0 0;
}
.pick button { font-weight: 600; }
.pick button[aria-pressed="true"] {
  background: var(--calm);
  color: var(--slate);
}
.pick button[disabled] {
  border-color: var(--sunk);
  color: var(--slate);
  cursor: default;
}

/* One under the other on a phone, so a thumb cannot hit two. */
@media (max-width: 33rem) {
  .pick { flex-direction: column; }
  .pick button { width: 100%; }
}

/* ---- adult ---- */

/* The one action on this site that cannot be undone. */
.aud-adult .btn {
  background: var(--danger);
  border: var(--bw) solid var(--danger);
  border-radius: var(--r);
  color: #FFFFFF;
  margin: 6px 0;
  box-shadow: var(--off) var(--off) 0 var(--ink);
}
.aud-adult .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.aud-adult .btn[disabled] {
  background: var(--sunk);
  border-color: var(--edge);
  color: var(--quiet);
  box-shadow: none;
  cursor: default;
}

/* "Back to the door" is a link. */
.aud-adult a.btn.quiet {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* ============================================================= the one ask */

/* The line that says what to do. It is the only bold line on the page. */
.ask { font-size: 1.06rem; font-weight: 700; margin: 10px 0; max-width: 62ch; }
.aud-adult .ask { max-width: 78ch; }

/* =========================================== a message after a button went */

/* Never red, never green. A child is not being told they were wrong, and an
   adult is being told a fact. Both states take the same box. */
.why {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--sunk);
  border-radius: var(--r);
  max-width: 62ch;
}
.aud-student .why { border-left: 6px solid var(--slate); }
.aud-adult .why { border-left: 6px solid var(--quiet); max-width: 78ch; }

/* =============================================================== the foot */

/* On a student page the foot is a row of links. On an adult page it is one
   quiet closing sentence. Two jobs, two rules, the same as the two big pages. */
.aud-student .foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px;
  margin-top: clamp(22px, 2.8vw, 32px);
  font-weight: 500;
}
.aud-student .foot a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.aud-student .foot a:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

.aud-adult .foot { margin-top: 20px; color: var(--quiet); }

/* ==================================================== the bar across the top */

/* home.html only. No other page on this site has a bar. */
.chrome {
  background: var(--panel);
  border-bottom: var(--bw) solid var(--black);
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 18px;
  padding: 10px var(--pad);
}
.chrome .bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 18px;
  max-width: 1180px; margin: 0 auto;
  font-weight: 600;
}
.chrome .where { color: var(--slate); font-weight: 500; }

/* ================================================================ adult only */

.note { color: var(--quiet); max-width: 78ch; margin-top: 4px; }

table.plain {
  border-collapse: collapse;
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums lining-nums;
}
table.plain th, table.plain td {
  border: var(--bw) solid var(--edge);
  padding: 5px 9px;
  text-align: left;
}
table.plain th { background: var(--sunk); font-weight: 700; }

code {
  background: var(--sunk);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.94em;
}

/* The memo paragraph is the one thing on the adult page meant to be copied out
   whole, so it takes the plate the teacher page gives a block worth reading. */
blockquote {
  background: var(--panel);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--off) var(--off) 0 var(--ink);
  padding: clamp(12px, 1.6vw, 18px);
  margin: 12px 0;
  max-width: 78ch;
}

/* ==================================================================== misc */

[hidden] { display: none !important; }

/* The travel goes; the landing stays. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
