/* Span for the standalone tools: /stretch, /strength, /nidra.

   The tools are plain HTML files in public/ with no build step, so they cannot
   import src/styles/tokens.css (Vite hashes it). This file carries the same
   values. tokens.css is the source of truth: change a value there and here.

   The rules are docs/design/span/system.md, and docs/design/span/tools.md says
   how they apply to controls the mocks never drew (buttons, toggles, timers,
   fields). In short: the ground and five greys, one typeface, chords and
   hangers, no accent colour, rounded corners, shadows, icons or interface
   motion. Buttons and choices take the Gauntlet's form: filled for the main
   action and the chosen option, outlined for the rest.

   The font is served from this site, not from Google Fonts, so the tools work
   offline and /nidra makes no third-party request until you press play.
   Licence: /fonts/OFL.txt. */

@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/alegreya-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Colour: the warm ground. No accent colour. */
  --g: #1a1512;
  --ink: #f0eae2;
  --body: #d8cfc5;
  --mut: #bcb2a7;
  --sub: #9c9186;
  --line: #4a3f37;

  --sans: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;

  /* Type. Nothing below 16.5px; weight 300 only at 40px and above. */
  --statement-size: clamp(2.75rem, 5.8vw, 5.1rem);
  --fs-chord: 24px;
  --fs-side: 17.5px;
  --fs-subhead: 24px;
  --fs-prose: 20px;
  --fs-name: 22px;          /* a name inside a hanger (module-name size) */
  --fs-desc: 18.5px;        /* the line under a name */
  --fs-control: 18.5px;     /* a control's words */
  --fs-label: 17px;         /* group name, field name */
  --fs-small: 16.5px;
  --fs-primary: 27px;       /* the one main action on a screen */
  --fs-readout: clamp(4rem, 16vw, 8rem);   /* a countdown or clock: weight 300 */

  /* Structure */
  --page-max: 1280px;
  --page-pad: 40px;
  --tool-max: 44rem;        /* how wide a tool's hanger runs; a tool is phone-first */
  --chord-gap: 12px;
  --chord-above: 56px;
  --hang-inset: 24px;
  --joint: 5px;
  --drop: 44px;
  --tap: 44px;
  --gap-item: 14px;
  --gap-group: 30px;
  --gap-controls: 28px;
}

@media (max-width: 820px) {
  :root {
    --page-pad: 20px;
    --chord-above: 36px;
    --hang-inset: 18px;
    --fs-prose: 18.5px;
    --fs-subhead: 21px;
    --drop: 28px;
  }
}

* { box-sizing: border-box; }
html { background: var(--g); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--g);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-prose);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- page --- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) 72px;
}

/* ---------------------------------------------------------------- chord --- */
.chord {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-bottom: 2px solid var(--ink);
  padding: var(--chord-above) 0 var(--chord-gap);
}
.chord.minor { border-bottom-width: 1px; border-color: var(--sub); padding-top: 48px; }
.chord h1, .chord h2, .chord .title {
  font-size: var(--fs-chord);
  font-weight: 700;
  line-height: 1.2;
}
.chord.minor h2, .chord.minor .title { font-size: 19px; font-weight: 500; color: var(--mut); }
.chord .side { font-size: var(--fs-side); font-weight: 500; color: var(--mut); }
.chord a.home { text-decoration: none; display: inline-flex; align-items: flex-end; min-height: var(--tap); }

/* --------------------------------------------------------------- hanger --- */
.hang {
  position: relative;
  max-width: var(--tool-max);
  border-left: 1px solid var(--line);
  padding: var(--drop) 0 0 var(--hang-inset);
}
.hang::before {
  content: "";
  position: absolute;
  left: calc(var(--joint) / -2 - 0.5px);
  top: calc(var(--joint) / -2 - 0.5px);
  width: var(--joint);
  height: var(--joint);
  background: var(--ink);
}
.chord.minor + .hang::before { background: var(--sub); }
.hang.wide { max-width: none; }
.hang.statement-drop { --drop: 64px; }
@media (max-width: 820px) { .hang.statement-drop { --drop: 28px; } }

.statement {
  font-weight: 300;
  font-size: var(--statement-size);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 11.5em;
}
.subhead {
  font-size: var(--fs-subhead);
  line-height: 1.35;
  color: var(--body);
  max-width: 26em;
  margin-top: 28px;
}
.prose { color: var(--body); max-width: 26.5em; }
.prose p + p { margin-top: 18px; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.mut { color: var(--mut); }
.sub { color: var(--sub); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; }

/* A group of controls inside a hanger, headed by its name in --sub. */
.group + .group { margin-top: var(--gap-controls); }
.group-name {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--sub);
  margin-bottom: 4px;
}
.hint { font-size: var(--fs-small); color: var(--sub); margin-top: 6px; max-width: 30em; }

/* ------------------------------------------------------------- controls ---
   The Gauntlet's three forms (claude-basu, app/globals.css), so every game and
   tool on the site presses the same way. Span itself only links; these are
   derived from what it has. All square, at least 44px tall, nothing moves.
     filled    .act.primary, a selected .choice   the skip link's form: ink ground, ground text
     outlined  .act, .choice                       a 1px --sub line, ink text; the line turns ink on hover
     words     .act.quiet, .go                     underlined text, like a link */
.act, .choice, .go, .tool-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Outlined: any action that is not the main one. */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 8px 24px;
  font-size: var(--fs-side);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  border: 1px solid var(--sub);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.act:hover:not(:disabled) { border-color: var(--ink); text-decoration: underline; }
.act:disabled, .act[aria-disabled="true"] { color: var(--sub); border-color: var(--line); cursor: default; }

/* Filled: the one main action on a screen. */
.act.primary {
  padding: 12px 32px;
  font-size: var(--fs-prose);
  background: var(--ink);
  color: var(--g);
  border-color: var(--ink);
}
.act.primary:disabled { background: none; color: var(--sub); border-color: var(--line); }

/* Words: a quiet action, or one that reads as a link. */
.act.quiet, .go {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-control);
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sub);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.act.quiet { color: var(--mut); font-size: var(--fs-small); }
.act.quiet:hover:not(:disabled), .go:hover { text-decoration-color: var(--ink); }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* A choice in a set (aria-pressed, aria-checked, aria-selected or .on), the
   Gauntlet's answer choice: outlined, filled when it is the one chosen. Fill
   against outline is the difference, never colour alone. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.stack { flex-direction: column; align-items: stretch; }
.choice {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 52px;
  padding: 10px 16px;
  font-size: var(--fs-control);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  border: 1px solid var(--sub);
}
.choice:hover:not(:disabled) { border-color: var(--ink); }
.choice[aria-pressed="true"], .choice[aria-checked="true"], .choice[aria-selected="true"], .choice.on {
  background: var(--ink);
  color: var(--g);
  border-color: var(--ink);
}
.choice:disabled { color: var(--sub); border-color: var(--line); cursor: default; }
.choice .choice-sub { font-size: var(--fs-small); font-weight: 400; color: var(--mut); margin-top: 2px; }
.choice[aria-pressed="true"] .choice-sub, .choice[aria-checked="true"] .choice-sub,
.choice[aria-selected="true"] .choice-sub, .choice.on .choice-sub { color: var(--g); }

/* Fields: the Gauntlet's, a 1px --sub outline. */
input[type="text"], input[type="number"], input[type="search"], textarea, select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--tap);
  background: none;
  border: 1px solid var(--sub);
  border-radius: 0;
  padding: 10px 12px;
  font-size: var(--fs-control);
  color: var(--ink);
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--sub); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); width: 20px; height: 20px; }

/* A range slider: the track is a 1px --sub line, the thumb a 6px-wide --ink
   bar the height of a tap. Square, like a joint. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  height: var(--tap);
  width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--sub); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--sub); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px; height: 28px; margin-top: -14px;
  background: var(--ink); border: 0; border-radius: 0; cursor: pointer;
}
input[type="range"]::-moz-range-thumb { width: 6px; height: 28px; background: var(--ink); border: 0; border-radius: 0; cursor: pointer; }

/* A large number: a countdown, a clock, a stepper's value. */
.readout {
  font-size: var(--fs-readout);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Progress: a 2px --ink line over a 1px --line track. Square ends, no motion. */
.progress { height: 2px; background: none; border-bottom: 1px solid var(--line); position: relative; }
.progress > * { position: absolute; left: 0; top: 0; height: 2px; background: var(--ink); }

/* A notice: words, not a coloured strip. It starts with a bold word that says
   what kind it is ("Caution:", "Not saved:"), so it reads without colour. */
.notice { font-size: var(--fs-control); color: var(--ink); max-width: 30em; margin: 12px 0; }
.notice b, .notice strong { font-weight: 700; }
.notice.quiet { color: var(--mut); }

/* Lists of rows inside a hanger: space between, no rules. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li, .rows > .row + .row { margin-top: var(--gap-item); }

/* Tables: no rules between rows (§3). Header in --sub. */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; padding: 4px 12px 4px 0; vertical-align: baseline; }
th { color: var(--sub); font-weight: 500; }
td.num, th.num { text-align: right; padding-right: 0; }

/* Disclosure: the summary is a control's words. */
details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-control);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sub);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { text-decoration-color: var(--ink); }

/* Focus: a 2px --ink outline, 3px offset. */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: -100px; left: 0;
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 16px; background: var(--ink); color: var(--g);
  font-size: var(--fs-control); font-weight: 500; z-index: 10000;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------- footer ---
   The shared footer: an empty chord, the name at the left. These pages have no
   build step, so there is no "Last updated" date (system.md §9). */
.site-footer .chord { padding-top: 40px; padding-bottom: 0; }
.site-footer .foot { padding-top: 6px; font-size: var(--fs-small); color: var(--sub); }
.site-footer .foot a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--sub);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.site-footer .foot a:hover { text-decoration-color: var(--ink); }

.hidden { display: none !important; }

/* No motion: nothing slides, fades or grows. */
*, *::before, *::after { transition: none !important; animation: none !important; }