/* Truer Measure — a family book, not a dashboard.
   Layout: quiet sidebar on desktop / bottom tabs on phone; one reading column. */
/* Brand: truermeasure.com — parchment, bark, dusk, rose; Cormorant Garamond + Hanken Grotesk. */
:root {
  --bg: #f7f1ed;          /* parchment */
  --surface: #fdfbf9;     /* ghost */
  --surface-2: #f3e8e3;   /* linen */
  --ink: #2b2220;         /* bark */
  --muted: #6f615c;       /* smoke */
  --faint: #9c8a84;       /* subdued */
  --line: #e3cfc8;        /* border */
  --accent: #5b4d49;      /* dusk: links, active items, dots */
  --accent-ink: #fdfbf9;
  --accent-soft: #efe3df; /* blush */
  --rose: #a47a72;        /* eyebrows and small accents, as on the site */
  --button: #2b2220;      /* primary buttons: bark, as on the site */
  --button-ink: #f7f1ed;
  --fact: #3f5a78;
  --fact-soft: #e7ebf0;
  --parent: #8a5a2b;
  --parent-soft: #f3e6d8;
  --ai: #6d5673;
  --ai-soft: #efe7ee;
  --gap: #7a6862;           /* was #9c8a84: too faint for the words it carries (20 October 2026) */
  /* Clearer edges and states (the founder, 20 October 2026: the current page, the Reflect together button and other
     controls were too faint, above all in dark mode). These equal or deepen the tokens above in light mode and
     differ more in dark mode. */
  --line-strong: #c4ada4;   /* the edge of a button or a field */
  --eyebrow: #8a625a;       /* the rose, deep enough to read at 12px on parchment */
  --parent-ink: #fdfbf9;    /* text on the life colour */
  --danger: #A03A2E;
  --seg-on: var(--surface); --seg-on-ink: var(--ink);
  --shadow: 0 1px 2px rgba(43, 34, 32, .05), 0 6px 24px rgba(43, 34, 32, .06);
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1917; --surface: #2a2220; --surface-2: #312825; --ink: #f3e8e3; --muted: #bdaca6; --faint: #9c8a84; --line: #3f322f;
    --accent: #d8b8b2; --accent-ink: #2b2220; --accent-soft: #3f322f; --rose: #c29f98; --button: #efe3df; --button-ink: #2b2220;
    --fact: #a9bdd6; --fact-soft: #242c36; --parent: #e0b27f; --parent-soft: #3a2c1f; --ai: #cdb5d4; --ai-soft: #332a36; --gap: #9c8a84;
    --line-strong: #6e5b55; --eyebrow: #c29f98; --parent-ink: #1f1917; --danger: #f0917f; --seg-on: #d8b8b2; --seg-on-ink: #2b2220;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1917; --surface: #2a2220; --surface-2: #312825; --ink: #f3e8e3; --muted: #bdaca6; --faint: #9c8a84; --line: #3f322f;
  --accent: #d8b8b2; --accent-ink: #2b2220; --accent-soft: #3f322f; --rose: #c29f98; --button: #efe3df; --button-ink: #2b2220;
  --fact: #a9bdd6; --fact-soft: #242c36; --parent: #e0b27f; --parent-soft: #3a2c1f; --ai: #cdb5d4; --ai-soft: #332a36; --gap: #9c8a84;
  --line-strong: #6e5b55; --eyebrow: #c29f98; --parent-ink: #1f1917; --danger: #f0917f; --seg-on: #d8b8b2; --seg-on-ink: #2b2220;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body { margin: 0; font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 6.5vw, 50px); }
h2 { font-size: 28px; }
h3 { font-size: 21px; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: var(--eyebrow); font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; }
.side { display: none; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 10px; height: var(--topbar-h); }
:root { --topbar-h: 56px; } /* one row (19 October 2026): the child and Settings; Feedback and Suggest a feature sit at the foot of each page */
/* The child's photo and name share one line; a long name shortens with "…" instead of wrapping under the photo. */
.topbar [data-act="child-menu"] { flex-wrap: nowrap; min-width: 0; gap: 8px; }
.topbar [data-act="child-menu"] .avatar { width: 36px; height: 36px; font-size: 15px; }
.topbar [data-act="child-menu"] > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; }
/* Narrow phones: tighter spacing so the child's full name fits beside the photo. */
@media (max-width: 420px) {
  .topbar { gap: 6px; padding: 10px 12px; }
  .topbar .brand { font-size: 17px; }
  .topbar .btn.feedback.small, .topbar .btn.suggest.small { padding: 6px 10px; }
  .topbar a.btn.ghost { padding: 8px 6px; }
}
.brand { font-family: var(--display); font-size: 20px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 26px; height: 26px; }
.main { padding: 20px 16px 120px; max-width: 940px; margin: 0 auto; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); text-decoration: none; padding: 4px 0; border-radius: 10px; }
/* The current page is unmistakable (the founder, 20 October 2026): its icon sits in a filled pill and its name is in ink.
   Every icon has the pill's room, so nothing moves when the page changes. */
.tabs a svg.i { width: 44px; height: 26px; padding: 4px 13px; border-radius: 999px; }
.tabs a.on { color: var(--ink); font-weight: 600; }
.tabs a.on svg.i { background: var(--accent); color: var(--accent-ink); }
/* The action that floated over the page (Capture, or Report card on School) sits in the bar itself (19 October 2026, the
   founder's phone pass): it covers nothing, and stays within a thumb's reach. */
.tab-add { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 10.5px/1.2 var(--body); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
/* The ring stays inside the bar (2 pixels over its top line): it never sits on the page's text. */
.tab-add .ta-ring { width: 40px; height: 40px; border-radius: 50%; background: var(--button); color: var(--button-ink); display: grid; place-items: center; margin-top: -8px; box-shadow: 0 0 0 4px var(--surface), 0 6px 16px rgba(43, 34, 32, .18); }
.tab-add .ta-ring svg.i { width: 20px; height: 20px; stroke-width: 2.2; }
.fab { display: none; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 250px 1fr; }
  .topbar, .tabs { display: none; }
  .fab { display: none; }
  .side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; padding: 26px 18px; border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; }
  .side nav { display: flex; flex-direction: column; gap: 2px; }
  .side nav a { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
  .side nav a:hover { background: var(--surface); color: var(--ink); }
  /* The current page: a filled item, not a lighter shade of the menu (the founder, 20 October 2026). */
  .side nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .side .account { margin-top: auto; }
  .main { padding: 40px 40px 80px; }
}

/* ---------- Pieces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.card.flat { box-shadow: none; }
.card.quiet { background: transparent; box-shadow: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--ink); line-height: 1.3; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--button); border-color: var(--button); color: var(--button-ink); letter-spacing: .04em; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); padding-inline: 8px; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line-strong)); }
/* Reflect together, offered inside Capture a moment and on Home (the founder, 20 October 2026: it was not visible
   enough, above all in dark mode): a framed invitation in the life colour, with a filled button. */
.reflect-offer { display: flex; gap: 12px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--parent-soft); border: 1px solid color-mix(in srgb, var(--parent) 55%, var(--line)); }
.reflect-offer .grow { min-width: 200px; }
.reflect-offer strong { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); }
.btn.reflect { background: var(--parent); border-color: var(--parent); color: var(--parent-ink); font-weight: 600; }
.btn.reflect:hover { filter: brightness(1.08); }
.btn.big { padding: 13px 22px; font-size: 16px; }
.btn.fab-btn { padding: 14px 20px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn[disabled] { opacity: .55; cursor: default; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--display); font-size: 18px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 84px; height: 84px; font-size: 34px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
/* Phone: a chip longer than the screen (a suggested question) wraps instead of running off the edge. */
@media (max-width: 899px) { .chip { max-width: 100%; white-space: normal; text-align: left; } }
button.chip { cursor: pointer; }
.chip .x { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; opacity: .7; display: inline-flex; }
.prov { font-family: var(--body); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.prov::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prov.fact { color: var(--fact); background: var(--fact-soft); }
.prov.parent { color: var(--parent); background: var(--parent-soft); }
.prov.ai { color: var(--ai); background: var(--ai-soft); }
.prov.gap { color: var(--gap); background: transparent; border: 1px dashed var(--gap); }
/* A source, in the text: the record's kind and date, so a phone (no pointer, no hover) can tell one source from another
   (19 October 2026, the founder's phone pass; until then a year in a chip 35 by 17 pixels). The chip stays small on the
   page; the area that answers a tap reaches about 38 pixels tall. */
.cite { position: relative; display: inline-flex; align-items: center; font: 600 11px/1.2 var(--body); letter-spacing: .01em; padding: 4px 8px; margin: 0 2px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent); cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.cite::after { content: ''; position: absolute; left: -3px; right: -3px; top: -8px; bottom: -8px; }
.cite:hover { background: var(--accent); color: var(--accent-ink); }
.cite.pv { background: var(--parent-soft); color: var(--parent); }
.cite.many { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.lead-open .cite { font-size: 12px; vertical-align: 6px; }
.picture, .tr-sec { scroll-margin-top: calc(var(--topbar-h) + 12px); }

.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); }
.dots i.f { background: var(--accent); }
.dots.thin i { border-style: dashed; border-color: var(--gap); }

.quote { border-left: 3px solid var(--parent); background: var(--parent-soft); padding: 14px 16px; border-radius: 0 10px 10px 0; font-size: 16px; }
.quote.fact { border-color: var(--fact); background: var(--fact-soft); }
.ai-box { border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--line)); background: var(--ai-soft); border-radius: 12px; padding: 14px 16px; }
.gap-box { border: 1.5px dashed var(--line); border-radius: 12px; padding: 14px 16px; color: var(--muted); }

input[type=text], input[type=search], input[type=date], input[type=number], select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* ---------- Home ---------- */
.hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero .meta { color: var(--muted); font-size: 15px; }
/* Phone: the name keeps a readable width; a button beside it moves to the next line. */
@media (max-width: 899px) { .hero > .grow { min-width: 200px; } }
.picture { position: relative; padding: 26px; }
.picture p.lead { font-size: 18px; line-height: 1.7; max-width: 68ch; }
.picture p.lead-open { font-family: var(--display); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.picture p.lead-open + p.lead { margin-top: -4px; }
.picture .cite { opacity: .8; }

/* ---------- Home: the first screen ---------- */
.home-hero { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 55%, color-mix(in srgb, var(--feedback, #7d9a7f) 16%, var(--surface)) 100%); box-shadow: var(--shadow); }
.home-hero > * { position: relative; }
.hh-blob { position: absolute !important; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hh-blob.one { width: 260px; height: 260px; right: -70px; top: -90px; background: color-mix(in srgb, var(--parent) 14%, transparent); }
.hh-blob.two { width: 160px; height: 160px; right: 140px; bottom: -80px; background: color-mix(in srgb, var(--fact) 12%, transparent); }
.hh-top { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hh-top .avatar.lg { width: 112px; height: 112px; font-size: 44px; box-shadow: 0 0 0 5px var(--surface), 0 8px 24px rgba(43, 34, 32, .12); }
.hh-top h1 { font-size: clamp(36px, 5.5vw, 54px); line-height: 1.05; }
.hh-top .meta { color: var(--muted); font-size: 15px; }
.hh-top > .grow { min-width: 200px; }
.hh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.hh-stat { background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.hh-n { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.hh-l { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
@media (max-width: 600px) { .hh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hh-top .avatar.lg { width: 88px; height: 88px; } }

/* The story so far: one column per school year, the moments stacking up from the bottom. */
.ribbon h2 { font-size: 26px; }
.rb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; text-decoration: none; color: inherit; padding-top: 6px; }
.rb-col { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.rb-dots { flex: 1; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 5px; min-height: 96px; padding: 10px 6px; border-radius: 12px; background: var(--surface-2, var(--accent-soft)); }
.rb-col.empty .rb-dots { background: none; border: 1.5px dashed var(--line); }
.rb-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }
.rb-dot.school { background: var(--fact); }
.rb-dot.life { background: var(--parent); }
.rb-dot.key { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4px currentColor; }
.rb-dot.school.key { color: var(--fact); }
.rb-dot.life.key { color: var(--parent); }
.legend i.rb-key-sample { width: 10px; height: 10px; border-radius: 50%; margin: 0 3px; }
.legend i.rb-key-sample.school { background: var(--fact); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--fact); }
.legend i.rb-key-sample.life { background: var(--parent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--parent); }
.rb-lbl { font: 600 11.5px/1.2 var(--mono); color: var(--muted); text-align: center; letter-spacing: .02em; }
.rb-short { display: none; }
.rb-n { font-family: var(--display); font-size: 20px; line-height: 1; text-align: center; color: var(--ink); margin-top: -4px; font-variant-numeric: lining-nums; }
.rb:hover .rb-dots { background: var(--accent-soft); }
@media (max-width: 600px) { .rb { gap: 4px; } .rb-dots { padding: 8px 3px; gap: 3px; min-height: 80px; } .rb-dot { width: 8px; height: 8px; } .rb-dot.key { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px currentColor; } .rb-full { display: none; } .rb-short { display: inline; } .rb-n { font-size: 17px; } }

/* Where the evidence is strongest: four tiles with the same drawings as the child's page. */
.strong-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.strong-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer; padding: 16px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 34%, var(--surface)) 0%, var(--surface) 70%); box-shadow: var(--shadow); }
.strong-tile:hover { border-color: color-mix(in srgb, var(--tint) 70%, var(--line)); transform: translateY(-1px); }
.strong-tile strong { font-size: 16px; }
.st-art { width: 52px; display: block; margin-bottom: 4px; }
.st-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .strong-tiles { grid-template-columns: 1fr 1fr; } .st-art { width: 44px; } }
.hero-cap { display: none; }
@media (min-width: 900px) { .hero-cap { display: flex; } }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ins { display: flex; flex-direction: column; gap: 8px; }
.ins h4 { font-family: var(--body); font-weight: 650; font-size: 15.5px; }
.ins .why { margin-top: auto; align-self: flex-start; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kind-list { display: flex; flex-direction: column; gap: 14px; }
.kind-list .ins { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.kind-list .ins:last-child { border-bottom: 0; padding-bottom: 0; }
.twocol { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .twocol { grid-template-columns: 1fr 1fr; } }
.qnav { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Evidence rows ---------- */
.ev-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 4px; border-bottom: 1px solid var(--line); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.ev-row:hover { background: var(--surface-2); }
.ev-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ev-icon.school { background: var(--fact-soft); color: var(--fact); }
.ev-icon.life { background: var(--parent-soft); color: var(--parent); }
.ev-icon.who { background: var(--accent-soft); color: var(--accent); }
.ev-title { font-weight: 600; }
.ev-meta { font-size: 13px; color: var(--muted); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.file { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; background: var(--surface-2); }

/* ---------- The two versions: free (School) and full (School + Life) ---------- */
/* See the difference: the lens a parent looks through. */
.vbar { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.lens-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lens-row { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.lens-line { margin: 0; min-width: 220px; flex: 1; font-size: 14.5px; color: var(--muted); }
.lens-invite { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.lens-invite span { font-family: var(--display); font-size: 18px; line-height: 1.3; color: var(--ink); flex: 1; min-width: 220px; }
.lens-reveal { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 18px; line-height: 1.3; color: var(--ink); }
.prov.demo.quiet { font-size: 10px; letter-spacing: .1em; }
/* Right after "Add the rest of the picture": what school alone could not show comes in, once, calmly. */
.revealed .hh-stat.life { animation: lens-light 2.4s ease-out both; }
.revealed .rb-dot.life { animation: lens-pop .5s ease-out both; animation-delay: .35s; }
.revealed .picture, .revealed .strong-tiles, .revealed .grid-cards, .revealed .twocol { animation: lens-in .7s ease-out both; }
.revealed .strong-tiles { animation-delay: .12s; }
.revealed .grid-cards { animation-delay: .22s; }
.revealed .twocol { animation-delay: .32s; }
@keyframes lens-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lens-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes lens-light { 0% { background: var(--parent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--parent) 25%, transparent); } 100% { background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .revealed * { animation: none !important; } }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.stack > .seg { align-self: flex-start; }
.seg-b { display: flex; flex-direction: column; align-items: flex-start; padding: 7px 14px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; color: var(--muted); text-align: left; line-height: 1.25; white-space: nowrap; }
.seg-b strong { font-size: 13.5px; font-weight: 600; }
.seg-b span { font-size: 12px; }
.seg-b.on { background: var(--seg-on); color: var(--seg-on-ink); box-shadow: var(--shadow); }
.seg-b:not(.on):hover { color: var(--ink); }
.tier-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 8px 14px; margin-bottom: 18px; border: 1px dashed var(--line); border-radius: 12px; }
/* Free version: the life tile stays open until there is something to put in it. */
.hh-stat.open { background: transparent; border-style: dashed; }
.hh-stat.open .hh-n { color: var(--faint); }
/* A capture that was given. */
.btn.gift { border-color: color-mix(in srgb, var(--parent) 45%, var(--line)); }
.gift-tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--parent); background: var(--parent-soft); padding: 2px 7px; border-radius: 6px; }
.gift-note { font-size: 14px; color: var(--parent); background: var(--parent-soft); border-radius: 10px; padding: 10px 12px; }
.added-note { background: var(--parent-soft); color: var(--parent); border-radius: 10px; padding: 10px 12px; font-weight: 500; }
/* Where school's view ends. */
.boundary-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.ins .boundary { display: block; margin-top: 6px; text-align: left; }
.open-note { border-left: 3px solid var(--line); padding-left: 12px; }

/* ---------- At school / Beyond school ---------- */
.par { align-items: stretch; }
.par-col { border-radius: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.par-col.school { border-top: 3px solid var(--fact); }
.par-col.life { border-top: 3px solid var(--parent); }
.par-col.school > .eyebrow { color: var(--fact); }
.par-col.life > .eyebrow { color: var(--parent); }
.par-st { font-family: var(--display); font-size: 21px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.par-rate { color: var(--muted); }
.par-rate strong { color: var(--ink); font-weight: 600; }
/* One column (phones): right after a capture, the life side comes first. */
@media (max-width: 719px) { .par.life-first .par-col.life { order: -1; } }
.open-side { border: 1.5px dashed color-mix(in srgb, var(--parent) 40%, var(--line)); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: var(--muted); }
.ask-beyond { border-top: 1px solid var(--line); padding-top: 16px; }
.chip.ctx { cursor: pointer; padding: 6px 12px; font-size: 13.5px; color: var(--ink); background: var(--surface); }
.chip.ctx:hover { border-color: var(--parent); }
.chip.ctx[disabled] { opacity: .5; cursor: default; border-color: var(--line); }
.full-block { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 14px 16px; }
.full-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Timeline: growing up ---------- */
.growing h2 { font-size: 26px; }
.gu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 12px; overflow-x: auto; padding: 8px 8px 10px; margin: 0 -8px; scroll-snap-type: x proximity; scroll-padding: 8px; }
.gu-year { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; color: inherit; scroll-snap-align: start; }
.gu-year img { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 16px; display: block; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line), 0 6px 16px rgba(43, 34, 32, .10); margin-bottom: 6px; transition: transform .15s; }
.gu-year:hover img { transform: translateY(-2px) rotate(-1deg); }
.gu-year strong { font-size: 14px; }
.gu-year .small { font-size: 12px; }
.tl-year { scroll-margin-top: 20px; }
@media (max-width: 899px) { .tl-year { scroll-margin-top: calc(var(--topbar-h) + 8px); } }
@media (max-width: 600px) { .gu { grid-auto-columns: 96px; gap: 10px; } }

/* ---------- Timeline ---------- */
.tl { position: relative; padding-left: 28px; }
.tl::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-year { position: relative; margin: 30px 0 14px; }
.tl-year:first-child { margin-top: 4px; }
.tl-year::before { content: ''; position: absolute; left: -25px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.tl-year h3 { font-size: 22px; }
.tl-item { position: relative; margin: 10px 0; }
.tl-item::before { content: ''; position: absolute; left: -22px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tl-item.school::before { background: var(--fact); }
.tl-item.life::before { background: var(--parent); }
.tl-item .card { padding: 14px 16px; cursor: pointer; }
.tl-item.key .card { padding: 18px 20px; }
.tl-item.key .t { font-family: var(--display); font-size: 19px; }
.tl-when { font: 600 11.5px/1 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
/* Phone: a grade holds several screens of entries, so its heading (grade, school
   year, age) stays pinned under the top bar until the next grade's heading takes
   its place. Desktop is unchanged. */
@media (max-width: 899px) {
  .tl-year { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h)); z-index: 5; background: var(--bg); margin-left: -28px; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); }
  .tl-year::before { left: 3px; top: 16px; }
  .tl-when { line-height: 1.35; }
}
/* ---------- Profile ---------- */
.dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; container-type: inline-size; }
.dimcard { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.dimcard:hover { border-color: var(--accent); }
/* A longer name wraps beside its dots, never pushing them under it (4 October 2026). */
.dimcard > .spread { flex-wrap: nowrap; }
.dimcard > .spread .dots { flex: none; }
.dimcard > .spread strong { text-wrap: balance; min-width: 0; overflow-wrap: anywhere; }
.dimgroup + .dimgroup { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.dimgroup h3 { font-size: 24px; }
/* A section's closing card (Health & physical confidence, the founder, 6 October 2026): on its own row at the
 * bottom, in the middle, as wide as one column. The grid has one column below 512px (2 x 250 + 12), two from
 * there and three from 774px; .main stops it at three on screen, and a wide printout can reach four. */
.dimcard.closing { grid-column: 1 / -1; justify-self: center; width: 100%; }
@container (min-width: 512px) { .dimcard.closing { width: calc((100% - 12px) / 2); } }
@container (min-width: 774px) { .dimcard.closing { width: calc((100% - 24px) / 3); } }
@container (min-width: 1036px) { .dimcard.closing { width: calc((100% - 36px) / 4); } }
.split-bar { display: flex; gap: 3px; flex-wrap: wrap; }
.split-bar i { width: 10px; height: 10px; border-radius: 3px; }
.split-bar i.s { background: var(--fact); }
.split-bar i.l { background: var(--parent); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.yr { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.yr .lbl { font: 600 11px/1.3 var(--mono); color: var(--muted); }
.yr .pips { display: flex; flex-wrap: wrap; gap: 5px; }
.yr .pip { width: 14px; height: 14px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; }
.yr .pip.school { background: var(--fact); }
.yr .pip.life { background: var(--parent); }
.yr.empty { border-style: dashed; }
/* In an area's sheet the boxes hold only what there is: a few dots read as empty white boxes otherwise. */
.sheet .yr { min-height: 0; }

/* ---------- Report translator ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
/* The translation comes first in the page, so a phone and a screen reader open on what the report card is
   telling you; side by side, the original stands on the left. */
@media (min-width: 980px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .split .orig { position: sticky; top: 24px; order: -1; } }
.rc { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 22px; font-size: 13.5px; box-shadow: var(--shadow); }
.rc table { width: 100%; border-collapse: collapse; }
.rc th, .rc td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rc th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rc .lvl { font-weight: 600; white-space: nowrap; }
.tr-sec h3 { font-size: 18px; margin-bottom: 8px; }
.tr-sec ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.edit-table { width: 100%; border-collapse: collapse; }
.edit-table td { padding: 4px; vertical-align: top; }
.table-wrap { overflow-x: auto; }

/* ---------- Ask ---------- */
.chat { display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 760px; }
.msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 18px 18px 4px 18px; }
.msg.bot { background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; border-radius: 4px 18px 18px 18px; }
.composer { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--bg); padding-top: 10px; }
@media (min-width: 900px) { .composer { bottom: 0; padding-bottom: 20px; } }
.composer form { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: var(--shadow); }
.composer input { border: 0; padding: 8px 0; background: transparent; }
.composer input:focus { outline: none; }
.status-line { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.status-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gap); }
.status-line .dot.on { background: var(--accent); }

/* ---------- Annual report ---------- */
.book { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); padding: clamp(24px, 6vw, 64px); max-width: 780px; margin: 0 auto; }
.book .cover { text-align: center; padding: 20px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.book .cover h1 { font-size: clamp(36px, 8vw, 58px); }
.book .cover .sub { font-family: var(--display); font-size: 22px; color: var(--accent); margin-top: 6px; }
.book section { margin: 30px 0; }
.book section h2 { font-size: 22px; margin-bottom: 10px; }
.book p { font-size: 16px; line-height: 1.75; max-width: 66ch; }
.compare { display: flex; flex-direction: column; gap: 8px; }
.compare .r { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; font-size: 13.5px; }
.compare .bars { display: flex; flex-direction: column; gap: 3px; }
.compare .bar { height: 7px; border-radius: 4px; background: var(--accent); }
.compare .bar.prev { background: var(--line); }

/* ---------- Sheet / modal ---------- */
.scrim { position: fixed; inset: 0; background: rgba(15, 22, 21, .45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--bg); width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 22px 18px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
/* The sheet scrolls; nothing inside it is squeezed to fit. (The year-by-year row, which scrolls sideways, used to collapse to a sliver in a long sheet.) */
.sheet > * { flex-shrink: 0; }
@media (min-width: 760px) { .scrim { align-items: center; padding: 24px; } .sheet { max-width: 720px; border-radius: 20px; padding: 28px 30px; } .sheet.wide { max-width: 980px; } }
.sheet-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.close { border: 0; background: var(--surface); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; flex: none; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; z-index: 60; font-size: 14px; max-width: calc(100% - 32px); pointer-events: none; }

/* ---------- Onboarding ---------- */
.onb { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.onb-card { max-width: 620px; width: 100%; display: flex; flex-direction: column; gap: 22px; }
.onb h1 { font-size: clamp(34px, 7vw, 52px); }
.onb .lede { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--accent); }
/* The welcome copy (the founder, 20 October 2026): an opening line above the heading, then short paragraphs set closer than
   the card's own gap, so a phone can scan them and reach the button. */
.onb .welcome-open { font-size: 17px; line-height: 1.5; color: var(--muted); }
.onb .welcome-copy { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; }
.onb .welcome-copy strong { color: var(--ink); }
.steps { display: flex; gap: 6px; }
.steps i { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.steps i.on { background: var(--accent); }
.choice { display: flex; gap: 16px; align-items: center; text-align: left; cursor: pointer; width: 100%; }
.choice:hover { border-color: var(--accent); }
.choice .ev-icon { width: 48px; height: 48px; }

.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
details summary { cursor: pointer; font-weight: 600; }
.stale-note { color: var(--parent); }
.prov.demo { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.feedback-link { font-size: 13px; color: var(--muted); }
.prov.child { color: var(--parent); background: var(--parent-soft); }
.conditions { font-size: 13px; color: var(--muted); }
/* Feedback: a sage-green button so parents can always find it. */
:root { --feedback: #4e6b4f; --feedback-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --feedback: #8fb08f; --feedback-ink: #1f1917; } }
:root[data-theme="dark"] { --feedback: #8fb08f; --feedback-ink: #1f1917; }
.btn.feedback { background: var(--feedback); border-color: var(--feedback); color: var(--feedback-ink); font-weight: 600; }
.btn.feedback:hover { filter: brightness(1.08); }
.btn.feedback.small { padding: 6px 12px; font-size: 13px; }
.account .btn.feedback { width: 100%; }
/* Suggest a feature: under every Feedback button, in the same green, outlined. */
.btn.suggest { background: transparent; border-color: var(--feedback); color: var(--feedback); font-weight: 600; }
.btn.suggest:hover { background: color-mix(in srgb, var(--feedback) 10%, transparent); }
.btn.suggest.small { padding: 6px 12px; font-size: 13px; }
.account .btn.suggest { width: 100%; }
.fb-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Phone top bar: Feedback and Settings on one line, Suggest a feature under Feedback. */
.tb-act { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 8px; flex: none; }
.tb-act a.btn.ghost { padding-block: 6px; }
.tb-act .suggest { grid-column: 1 / -1; justify-self: start; }

/* A page for the child */
.kidpage { position: relative; overflow: hidden; background: #fff; color: #2b2220; border: 1px solid var(--line); border-radius: 6px; padding: clamp(24px, 5vw, 56px); max-width: 760px; width: 100%; margin: 0 auto; box-shadow: var(--shadow); }
.kidpage > * { position: relative; }
.kidpage h1 { font-family: var(--display); font-size: 2.1em; line-height: 1.15; margin-bottom: .3em; color: #2b2220; }
.kidpage h2 { font-family: var(--display); font-size: 1.35em; margin: 1.1em 0 .45em; color: #5b4d49; }
.kidpage ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: .45em; }
.kidpage .kid-intro { font-family: var(--display); font-style: italic; font-size: 1.2em; color: #5b4d49; }
.kidpage .kid-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 1em 0; }
.kidpage .kid-photos img { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; }
.kidpage .kid-proud { display: flex; gap: 16px; align-items: center; background: #efe3df; border-radius: 12px; padding: .4em 1em .8em; margin-top: 1.4em; }
.kidpage .kid-proud h2 { margin-top: .5em; }
.kidpage .kid-medal { width: 64px; flex: none; }
.kidpage .kid-lines i { display: block; border-bottom: 1px solid #dcc5be; height: 2.2em; }
.kidpage footer { margin-top: 2em; font-size: 12px; color: #9c8a84; }
.kidpage .x { border: 0; background: none; color: #a47a72; cursor: pointer; font-size: 14px; padding: 0 4px; }
/* What the child is good at: one badge per area, a little drawing beside it. */
.kidpage .kid-badges { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kidpage .kid-badge { display: flex; gap: 14px; align-items: flex-start; background: color-mix(in srgb, var(--tint) 30%, #fff); border-radius: 16px; padding: 14px 16px; }
.kidpage .kid-art { width: 52px; flex: none; }
.kidpage .kid-art svg, .kidpage .kid-medal svg, .kidpage .kid-deco svg, .kidpage .kid-sun svg { display: block; width: 100%; height: auto; }
.kidpage .kid-badge h3 { font: 700 1em/1.25 var(--body); margin: .15em 0 .3em; color: #2b2220; }
.kidpage .kid-badge ul { list-style: none; padding: 0; gap: .35em; }
.kidpage .kid-badge li { font-size: .92em; }
/* Decorations around the edge: many for the youngest, a few for the middle years, none after. */
.kidpage .kid-deco { position: absolute; pointer-events: none; opacity: .9; }
.kidpage .kid-dot { position: absolute; border-radius: 50%; pointer-events: none; opacity: .8; }
.kidpage .kid-sun { position: absolute; right: 18px; top: 14px; width: 84px; pointer-events: none; }
.kidpage .kid-rainbow { display: block; width: 220px; max-width: 70%; margin: -.1em 0 .4em; }
.kidpage.band-young { font-size: 24px; line-height: 1.45; }
.kidpage.band-young .kid-head { padding-right: 90px; }
.kidpage.band-young h1 { font: 800 1.75em/1.15 var(--body); letter-spacing: -.01em; }
.kidpage.band-young h2, .kidpage.band-middle h2 { font: 800 1.05em/1.3 var(--body); color: #5b4d49; }
.kidpage.band-young .kid-intro { font: 500 .9em/1.45 var(--body); font-style: normal; }
.kidpage.band-young .kid-badges { grid-template-columns: 1fr; }
.kidpage.band-young .kid-badge { border: 3px solid var(--tint); border-radius: 22px; padding: 16px 18px; align-items: center; }
.kidpage.band-young .kid-badge:nth-child(odd) { transform: rotate(-.8deg); }
.kidpage.band-young .kid-badge:nth-child(even) { transform: rotate(.8deg); }
.kidpage.band-young .kid-art { width: 84px; }
.kidpage.band-young .kid-badge li { font-size: .85em; }
.kidpage.band-young .kid-medal { width: 84px; }
.kidpage.band-middle { font-size: 19px; line-height: 1.55; }
.kidpage.band-middle h1 { font: 800 1.7em/1.15 var(--body); padding-right: 60px; }
.kidpage.band-middle .kid-badge { border: 2px solid var(--tint); }
.kidpage.band-middle .kid-art { width: 60px; }
.kidpage.band-older { font-size: 17px; line-height: 1.6; }
.kidpage.band-older .kid-badges { grid-template-columns: 1fr; gap: 6px; }
.kidpage.band-older .kid-badge { background: none; border-radius: 0; border-left: 4px solid var(--tint); padding: 8px 0 8px 14px; align-items: center; }
.kidpage.band-older .kid-art { width: 40px; }
/* Phone: smaller type and drawings; the stars stay off the text, the sun and dots remain. */
@media (max-width: 600px) {
  .kidpage.band-young { font-size: 19px; }
  .kidpage.band-middle { font-size: 16.5px; }
  .kidpage.band-older { font-size: 15.5px; }
  .kidpage .kid-deco { display: none; }
  .kidpage .kid-sun { width: 56px; right: 10px; top: 10px; }
  .kidpage.band-young .kid-head { padding-right: 56px; }
  .kidpage.band-middle h1 { padding-right: 0; }
  .kidpage.band-young .kid-art, .kidpage.band-young .kid-medal { width: 60px; }
  .kidpage.band-middle .kid-art { width: 48px; }
}
/* Who is my child?: the parent's own words, where the story starts. */
.for-whom { font-size: 17px; font-weight: 600; color: var(--ink); }
.portrait .portrait-text { font-size: 17px; line-height: 1.6; }
.portrait details summary { cursor: pointer; color: var(--muted); }
.portrait-text, .portrait .earlier { white-space: pre-line; overflow-wrap: anywhere; }
.perspective .qa { padding: 8px 0; border-bottom: 1px solid var(--line); }
.perspective .qa:last-of-type { border-bottom: 0; }
.pq-a { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.pq-msg { color: var(--parent); }

/* Build my résumé: the draft is the document; a tick decides what goes on it. */
.resume { max-width: 760px; gap: 20px; }
.resume h2 { font-size: 30px; }
.rs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rs-line { display: flex; gap: 12px; align-items: flex-start; }
.rs-line.off > span { opacity: .5; }
.rs-tick { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 0; border-radius: 7px; border: 1.5px solid var(--faint); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; color: transparent; }
.rs-tick[aria-checked="true"] { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.rs-tick svg.i { width: 15px; height: 15px; stroke-width: 2.4; }

@media print {
  .side, .topbar, .tabs, .fab, .no-print, .toast, .tier-banner, .rs-line.off { display: none !important; }
  .resume { border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; }
  .resume .linkish { text-decoration: none !important; color: inherit !important; }
  .shell { display: block !important; }
  .main { max-width: none !important; padding: 0 !important; }
  html, body { background: #fff !important; }
  .kidpage { border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; }
  .kidpage, .kidpage * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 7 October 2026 (the founder's brief): the areas in small groups; a card says what the record holds, never a
   level; a dot for each moment, hollow where the area was hard; what stays open under a reading; What draws them in;
   Where these ideas come from; context for a moment. */
.family { gap: 10px; }
.family + .family { margin-top: 6px; }
.family h4 { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.family-name { margin: 10px 0 2px; }
.dimcard .means { color: var(--ink); line-height: 1.4; }
.family-intro { margin: -4px 0 2px; max-width: 72ch; }
.dimcard .evline { color: var(--muted); }
.dimcard .evline.none { color: var(--gap); }
.yr .pip.hard.school { background: transparent; border: 2px solid var(--fact); }
.yr .pip.hard.life { background: transparent; border: 2px solid var(--parent); }
.yr .pip.many { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.ins .open { margin-top: 4px; }
.draws-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sources h3 { font-size: 17px; }
.source-line { margin: 0; line-height: 1.5; }
.source-kind { font-size: 11px; padding: 1px 8px; margin-right: 4px; vertical-align: 1px; }
.cap-more summary { cursor: pointer; }
.hardness { margin-left: 6px; }
.kind { margin-top: 4px; }

/* Real accounts (js/account.js): whether changes are saved, and what the server is doing for this child. */
.save-status { position: fixed; left: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 55; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; pointer-events: none; transition: opacity .6s ease; }
.save-status[data-state="saved"] { opacity: 0; transition-delay: 1.5s; }
.save-status[data-state="offline"] { color: var(--ink); border-color: var(--parent); }
.job-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.job-note.warn { color: var(--ink); border-color: var(--parent); }
@media (min-width: 900px) { .save-status { bottom: 16px; } }
@media print { .save-status, .job-note { display: none !important; } }

/* Onboarding with an account (js/onboard.js, 14 October 2026): the demo's look, the Figma's structure
   (a step bar, one task per screen, saved automatically). */
.ob { gap: 18px; }
.ob h1 { font-size: clamp(30px, 6vw, 44px); }
.ob h2 { font-size: 28px; }
.ob-bar { display: flex; gap: 4px; font-size: 11.5px; }
.ob-bar span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 8px; background: var(--surface-2, #efe3df); color: var(--faint); }
.ob-bar .cur { background: var(--ink); color: var(--bg); font-weight: 600; }
.ob-bar .done { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.ob-saved { text-align: right; margin: 0; }
.ob .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-file { display: flex; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.ob-file .ok { color: var(--fact); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.ob-file.warn { border-color: var(--parent); }
.ob-add { cursor: pointer; text-align: center; justify-content: center; }
.ob-clar { border: 1px dashed var(--parent); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.ob-take { font-family: var(--display); font-size: 22px; line-height: 1.3; margin: 0; }
.ob-obs { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ob-obs p { margin: 4px 0 0; }
.ob-q { background: var(--ink); color: var(--bg); border-radius: 12px; padding: 14px; }
.ob-q .lbl { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.ob-q p { margin: 0; }
.ob details { border-top: 1px solid var(--line); padding: 10px 0; }
.ob details summary { font-weight: 600; cursor: pointer; }
.ob-grp { border-bottom: 1px solid var(--line); padding: 6px 0; }
.ob-grp p { margin: 2px 0; }
.cite-tag { font-size: 11px; background: var(--fact-soft); color: var(--fact); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.ob-bridge { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; color: var(--muted); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips span { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; color: var(--muted); }
.ob-prompt { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ob-prompt textarea { width: 100%; }
.ob-opt { background: var(--surface); border: 1px dashed var(--line) !important; border-radius: 12px; padding: 10px 12px !important; }
.ob-part { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin: 8px 0 0; }
.ob-areas { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ob-areas .ac { display: inline-block; border-radius: 999px; background: var(--fact-soft); color: var(--fact); padding: 2px 9px; margin: 2px; font-size: 12px; }
.ob-areas .ac.maybe { background: var(--ai-soft); color: var(--ai); }
.ob-limits { background: var(--parent-soft); color: var(--parent); border-radius: 12px; padding: 12px; font-size: 14px; margin: 0; }
.ob-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-price div { border: 1px solid var(--ink); border-radius: 12px; padding: 8px; text-align: center; background: var(--surface); }
.ob-price span { display: block; color: var(--muted); }
.ob ul { padding-left: 20px; margin: 0; }
.sim-note { background: var(--parent-soft); color: var(--parent); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; margin: 0; }
.ob-home h3 { margin: 2px 0; }

/* ---------- On a phone (19 October 2026, the founder's pass after a parent's feedback) ----------
   Home opens on who the child is and one takeaway; the Feedback and Suggest a feature buttons sit at the foot of the
   page; nothing floats over the text. These rules apply below 900px only. Home's sections come in the same order on a
   phone as on a laptop (the founder, 20 October 2026: "I prefer the web version"); for a day the phone had drawn
   "What you could do next" second, and "Who is Sam?" first on an empty record, with flex order. */
.ph-only { display: none; }
@media (max-width: 899px) {
  .ph-only { display: block; }
  .ph-hide { display: none !important; }
  .home-hero { padding: 18px 16px 16px; border-radius: 18px; }
  /* Nothing moves sideways on a phone (the founder, 20 October 2026: "solid, and just go up and down"): the strips that
     scrolled left and right (the growing-up photos on the Timeline, the year-by-year boxes on Insights and in an
     area's sheet) wrap into rows instead. The laptop keeps them in one row, where they fit. */
  .gu, .years { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; scroll-snap-type: none; }
  .gu { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin: 0; padding: 8px 0 4px; }
  .years { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  /* A report card's table folds its cells rather than scrolling; the page itself never scrolls sideways. */
  .table-wrap { overflow-x: visible; }
  .rc .lvl { white-space: normal; }
  .main, .sheet { overflow-x: clip; }
  /* The saving pill never sits on a sheet's text (19 October 2026): while a sheet is open it shows only when something
     is wrong (offline); the sheet says itself what was saved. */
  body:has(.scrim) .save-status:not([data-state="offline"]) { display: none; }
  .hh-top { gap: 14px; }
  .hh-top .avatar.lg { width: 56px; height: 56px; font-size: 24px; box-shadow: 0 0 0 3px var(--surface); }
  .hh-top h1 { font-size: 30px; }
  .hh-top .meta { font-size: 14px; }
  .hh-top > .grow { min-width: 0; }
  .takeaway { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .takeaway p { font-family: var(--display); font-size: 21px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
  .takeaway .linkish { margin-top: 8px; display: inline-block; }
  .hh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .hh-stat { padding: 8px 6px; border-radius: 10px; gap: 0; }
  .hh-n { font-size: 22px; }
  .hh-l { font-size: 10.5px; line-height: 1.2; }
  .page-foot { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
  .page-foot .btn { font-size: 13px; padding: 6px 12px; color: var(--muted); }
}
@media (min-width: 900px) { .page-foot { display: none; } }
/* What you could do next: the questions for the teacher and the ideas for home the record already holds, each with the
   report card it comes from; a plan the family kept; the ways to add. It follows the picture on every size (the phone
   drew it second from 19 to 20 October 2026). */
.next-steps .ns-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.next-steps .ns-src { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.next-steps .ns-plan { border-left: 3px solid var(--parent); padding-left: 12px; }
.next-steps .ns-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
/* Groups of readings with nothing in them yet are named in one line, never shown as empty boxes. */
.empty-groups { color: var(--muted); font-size: 13px; margin: 0; }
.empty-groups summary { color: var(--muted); font-weight: 500; }
.empty-groups ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }