/* Speak Easy, Phase 2.
   Type and spacing are set for a phone held in one hand, mid-recovery from a
   conversation that went wrong. Nothing animates, because Section 3 says the
   panic path must reach a line in one tap and animation is time. */

:root {
  --ink: #1b1a17;
  --paper: #faf7f2;
  --muted: #5d574e;
  /* Was #d9d2c7, 1.4:1 against --paper: a tap target's own border was
     invisible to WCAG 1.4.11's 3:1 floor for UI-component boundaries.
     8d7d5a clears it at 3.77:1 in the same warm-neutral family. */
  --rule: #8d7d5a;
  --accent: #7a4b2a;
  --accent-ink: #fff;
  --book: #2f4a3a;
  --focus: #1a5fb4;
  --tap: 56px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2ede5; --paper: #171613; --muted: #b0a89b; --rule: #80785f;
    --accent: #d99b6a; --accent-ink: #171613; --book: #9dc4ac; --focus: #78aeed;
  }
}

/* ---------- per-edition accent ----------
   Set from data-edition (app.js, loadEdition), the one place DATA.edition
   changes. Everything but --accent and --accent-ink stays shared: --ink,
   --paper, --rule and --book are already WCAG-checked and touching them
   four times over is four more places to get it wrong. Adult keeps the
   :root values above as its own, unset here, because it was the palette
   the app shipped with and gets no override.

   Every pairing below is checked against WCAG AA (>=4.5:1) both as text on
   --paper and as a solid button against --accent-ink, light and dark, the
   same bar the --rule fix above already holds itself to. */
html[data-edition="pro"] { --accent: #2c4a63; --accent-ink: #fff; }
html[data-edition="teen"] { --accent: #1f6f66; --accent-ink: #fff; }
html[data-edition="kids"] { --accent: #a8571a; --accent-ink: #fff; }

@media (prefers-color-scheme: dark) {
  html[data-edition="pro"] { --accent: #8fb4d9; --accent-ink: #0b1a26; }
  html[data-edition="teen"] { --accent: #6fd6c4; --accent-ink: #0c2622; }
  html[data-edition="kids"] { --accent: #e8a659; --accent-ink: #2b1608; }
}

/* Kids also gets rounder, larger chrome: the "large tappable areas, warm,
   playful but not chaotic" difference the other three editions do not need.
   Nothing here touches font size or line length, which are already the
   same --tap and --measure every edition reads for its own reasons. */
html[data-edition="kids"] button, html[data-edition="kids"] .tap {
  border-radius: 1rem;
}
html[data-edition="kids"] blockquote.book {
  border-radius: 0 1rem 1rem 0;
}
html[data-edition="kids"] h1 { font-size: 1.7rem; }

/* ---------- Adult, Teen, Pro: a shape and spacing character each, proposed
   to Nader and confirmed 2026-09-15 -- CSS only, scoped by data-edition the
   same way Kids already is, because app.css and day.js are shared across
   every edition and a mistake here risks breaking three of them at once. ---------- */

/* Adult stays the plain, calm baseline (the accent block above leaves it
   fully unset already); its only edition-specific rule is corners a small
   step sharper than the shared .6rem. */
html[data-edition="adult"] button, html[data-edition="adult"] .tap,
html[data-edition="adult"] input:not([type=checkbox]):not([type=radio]),
html[data-edition="adult"] textarea, html[data-edition="adult"] .note {
  border-radius: .4rem;
}
html[data-edition="adult"] blockquote.book { border-radius: 0 .4rem .4rem 0; }

/* Teen keeps the shared rounder default untouched -- the confirmed brief was
   "keep the rounder default" -- and changes only its headings: a contemporary
   system sans in place of the Fraunces serif Adult and Pro both keep. No new
   webfont, so nothing new to fail loading; the same stack body text already
   uses elsewhere in this file. */
html[data-edition="teen"] h1, html[data-edition="teen"] h2 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Pro goes sharper still, close to square, with a little less air between
   lines -- matching, not fixing, the denser content it actually carries
   (the Sources shelf, the Method Index) -- and its one signature detail:
   .prov, already every edition's chapter-attribution line under a quoted
   passage, reads as a citation here rather than a caption. --tap and
   --measure are untouched; those are accessibility floors, not a look. */
html[data-edition="pro"] button, html[data-edition="pro"] .tap,
html[data-edition="pro"] input:not([type=checkbox]):not([type=radio]),
html[data-edition="pro"] textarea, html[data-edition="pro"] .note {
  border-radius: .15rem;
}
html[data-edition="pro"] blockquote.book { border-radius: 0 .15rem .15rem 0; }
html[data-edition="pro"] .stack { gap: .45rem; margin-bottom: 1.1rem; }
html[data-edition="pro"] p { margin-bottom: .8rem; }
html[data-edition="pro"] h2 { margin-top: 1.6rem; }
html[data-edition="pro"] .prov {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .6875rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.sr, .skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: .5rem; left: .5rem; width: auto; height: auto;
  clip: auto; padding: .6rem .9rem; background: var(--ink); color: var(--paper);
  border-radius: .4rem; z-index: 10;
}

/* ---------- frame ---------- */

header {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: calc(.5rem + env(safe-area-inset-top)) .9rem .5rem;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper); z-index: 5;
}
#crumb { font-size: .8125rem; color: var(--muted); flex: 1; }

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.6rem 1.1rem 4rem;
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
}
/* Room for the tab bar. Only reserved while it is actually shown, so the
   panic screen (no tabs, no header, Section 3's one-tap rule) keeps its
   full-height layout exactly as before. */
body.has-tabs main { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
/* The cold open has no header, so it carries the notch inset itself. */
body > main:first-of-type { padding-top: calc(1.6rem + env(safe-area-inset-top)); }
main:focus { outline: none; }

h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem; line-height: 1.25; margin: 0 0 1.1rem; font-weight: 600;
}
h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem; margin: 2rem 0 .6rem; font-weight: 600;
}
p { margin: 0 0 1rem; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ---------- the book's own words ---------- */

blockquote.book {
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--book);
  background: color-mix(in srgb, var(--book) 8%, transparent);
  border-radius: 0 .5rem .5rem 0;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
}
blockquote.book p:last-child { margin: 0; }
.prov { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }

/* ---------- taps ---------- */

.stack { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.4rem; }

button, .tap {
  font: inherit;
  min-height: var(--tap);
  border-radius: .6rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  padding: .8rem 1rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
button:hover, .tap:hover { border-color: var(--accent); }
button:focus-visible, .tap:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.row { display: flex; flex-wrap: wrap; gap: .6rem; }
.row button { width: auto; min-width: 10rem; flex: 1 1 auto; text-align: center; }

button.primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 600;
}
button.ghost {
  min-height: 44px; width: auto; padding: .6rem .8rem;
  font-size: .875rem; color: var(--muted);
}
.panic-btn {
  /* Was 44px, smaller than every ordinary tap target in the app (--tap,
     56px), on the single highest-stakes control there is. */
  min-height: var(--tap); width: auto; padding: .5rem .8rem;
  font-size: .875rem; font-weight: 600;
  border-color: var(--accent); color: var(--accent);
}

/* ---------- checklists ---------- */

.check { display: flex; gap: .75rem; align-items: flex-start;
         padding: .7rem .2rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.check:last-of-type { border-bottom: 0; }
.check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; flex: none; accent-color: var(--accent); }
.check .t { flex: 1; }

label.toggle { display: flex; gap: .75rem; align-items: center; padding: .7rem 0; cursor: pointer; }
label.toggle input { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }

/* Was input[type=email] only. The check-in note, both Name Line fields, the
   report textarea, and now the free-text search box all fell back to
   unstyled browser chrome, clashing with the rest of the app on the one
   kind of control most likely to be used mid-conversation. Checkbox and
   radio inputs keep their own sizing above, at higher specificity. */
input:not([type=checkbox]):not([type=radio]), textarea {
  font: inherit; width: 100%; min-height: var(--tap);
  padding: .75rem .9rem; border: 1px solid var(--rule);
  border-radius: .6rem; background: transparent; color: inherit;
  resize: vertical;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.8rem 0; }

.note {
  border: 1px solid var(--rule); border-radius: .6rem;
  padding: .8rem .9rem; font-size: .9375rem; color: var(--muted);
}

.dots { display: flex; gap: .35rem; margin: 0 0 1.4rem; }
.dots i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--rule); }
.dots i.on { background: var(--accent); }

/* The close screen only, once a day at most: a star for Kids, a checkmark
   everywhere else. Never on the panic path. */
.earned-badge {
  font-size: 1.7rem; line-height: 1; color: var(--accent);
  margin-bottom: .4rem;
}

@media (prefers-reduced-motion: no-preference) {
  main { animation: in .18s ease-out; }
  @keyframes in { from { opacity: 0; transform: translateY(4px); } }

  .earned-badge {
    animation: earned .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  @keyframes earned {
    from { opacity: 0; transform: scale(0) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
  }
}

/* ---------- the tab bar ----------
   Hidden entirely on the panic screen: Section 3's rule is a stranger
   reaches a line in one tap, and four extra destinations within thumb's
   reach at the exact moment the app asks "what just happened?" work against
   that, not for it. Everywhere else, this is the persistent way home the
   single header button only partly answered. */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-around;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
}
#tabs button {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  flex: 1 1 0; min-width: 0; min-height: var(--tap);
  padding: .4rem .2rem; border-radius: .5rem;
  font: inherit; font-size: .6875rem; letter-spacing: .01em;
  color: var(--muted); text-align: center;
}
#tabs button svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#tabs button[aria-current="page"] { color: var(--accent); font-weight: 600; }
/* Reset always reads as the exit from ordinary navigation, the same way the
   header's own panic button is always accent-colored rather than only when
   "current" - tapping it leaves the tab bar behind before it could ever show
   as active. */
#tabs button.alarm { color: #b5442e; }
@media (prefers-color-scheme: dark) {
  #tabs button.alarm { color: #e08a72; }
}
#tabs button:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
/* #tabs is an ID selector, which outranks the UA [hidden] rule on its own
   (0,1,0) specificity, so the flex layout above would win even while hidden
   unless this is spelled out at the higher (1,1,0) specificity here. */
#tabs[hidden] { display: none; }