/* LAMPLIGHT APP CHROME (2026-10-03m). One shared layer for the parent-facing app pages
   (onboarding, welcome, dashboard, students, tour, walk, parents, ...). Link it AFTER
   program.css and design/anp.css. Tokens only: every colour is a design/anp.css token,
   so there is no raw hex in this file. Design guide sections 3 to 11: paper page,
   parchment wells, warm-white cards, 18px radii, Fraunces headings, Lexend 17px body,
   nothing under 15px, 44px targets, one gold button per screen, night-blue focus ring.
   It never touches a child's reading surface: --read-bg, .stim, .story and the
   child-line sizes stay exactly as program.css draws them. */
:root{
  /* program.css's legacy layer, re-pointed at Lamplight */
  --paper:var(--anp-paper-lamp);--paper-card:var(--anp-card-warm);--ink:var(--anp-ink);--ink-2:var(--anp-ink-soft);--muted:var(--anp-ink-soft);
  --line:rgba(42,39,34,.12);--sage:var(--anp-brand);--sage-deep:var(--anp-brand);--star:var(--anp-lantern);--star-deep:var(--anp-lantern-ink);
  --display:var(--anp-font-lamp-display);--body:var(--anp-font-ui);
  /* violet retires: anything still asking for it (a script's inline style, a world default) gets night blue */
  --anp-violet:var(--anp-brand);--anp-violet-deep:var(--anp-brand-deep);
  --anp-gold:var(--anp-lantern);--anp-gold-ink:var(--anp-lantern-ink);
  --anp-font-display:var(--anp-font-lamp-display);
  --anp-world-base:var(--anp-brand);--anp-world-deep:var(--anp-night-deep);--anp-world-on-base:var(--anp-paper-lamp);
  --anp-world-glow:rgba(242,181,68,.30);
  /* shared helpers */
  --lp-line:rgba(42,39,34,.12);--lp-line-strong:rgba(42,39,34,.22);
  --lp-shadow-1:0 1px 3px rgba(42,39,34,.08);
  --lp-shadow-2:0 2px 6px rgba(42,39,34,.06),0 14px 34px rgba(42,39,34,.10);
  --lp-shadow-book:0 2px 4px rgba(42,39,34,.08),0 24px 48px -12px rgba(42,39,34,.28)
}
*,*::before,*::after{box-sizing:border-box}
html body{background:var(--anp-paper-lamp);color:var(--anp-ink);font-family:var(--anp-font-ui);font-size:var(--anp-fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--anp-font-lamp-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;color:var(--anp-ink)}
h1{font-size:var(--anp-fs-2xl)}
h2{font-size:var(--anp-fs-xl)}
h3{font-family:var(--anp-font-ui);font-weight:700;font-size:var(--anp-fs-lg);line-height:1.25;color:var(--anp-ink)}
a{color:var(--anp-brand);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--anp-brand-deep)}
/* beats program.css's generic ring and anp.css's info-blue ring: night blue, 3px, 3px offset */
html body :focus-visible,html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [tabindex]:focus-visible{outline:3px solid var(--anp-brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--lp-wrap,640px)}

/* the header */
nav{background:var(--anp-paper-lamp);border-bottom:1px solid var(--lp-line)}
nav .r{max-width:1040px}
.brand{font-family:var(--anp-font-lamp-display);font-weight:600;color:var(--anp-ink);font-size:var(--anp-fs-lg)}
.brand .dot{width:12px;height:12px;background:var(--anp-lantern);box-shadow:0 0 0 4px var(--anp-lantern-tint)}
nav a.menu{color:var(--anp-brand);font-size:var(--anp-fs-sm);font-weight:600}
nav a.menu[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
@media (max-width:480px){.brand{font-size:var(--anp-fs-base)}nav a.menu{font-size:var(--anp-fs-sm)}}

/* cards and wells */
.card{background:var(--anp-card-warm);border:1px solid var(--lp-line);border-radius:var(--anp-radius);box-shadow:var(--lp-shadow-1)}
.card .k,.lp-kicker{font-size:var(--anp-fs-sm);font-weight:700;letter-spacing:0;text-transform:none;color:var(--anp-brand)}
.lp-well{background:var(--anp-parchment);border-radius:var(--anp-radius);padding:16px}
.subnote{color:var(--anp-ink-soft);font-size:var(--anp-fs-sm);line-height:1.5}
.pill{background:var(--anp-brand-tint);color:var(--anp-brand);font-size:var(--anp-fs-sm);padding:4px 12px}
.pill.warn{background:var(--anp-lantern-tint);color:var(--anp-lantern-ink)}
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.lp-ico-ring{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--anp-parchment);color:var(--anp-brand)}
.lp-ico-ring .ico{width:28px;height:28px}

/* buttons: one gold per screen (program.css .btn), everything else quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:0;background:var(--anp-lantern);color:var(--anp-lantern-ink);font:700 var(--anp-fs-base)/1.2 var(--anp-font-ui);text-decoration:none;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(53,37,14,.14);transition:background var(--anp-dur),transform var(--anp-dur)}
.btn:hover{background:var(--anp-lantern-deep);color:var(--anp-lantern-ink)}
.btn.full{display:flex;width:100%;max-width:420px;margin:16px auto 0}
.btn.ghost,.btn.lp-quiet,.lp-quiet{background:var(--anp-card-warm);color:var(--anp-ink);border:1.5px solid var(--lp-line-strong);box-shadow:none;font-weight:600;min-height:var(--anp-tap)}
.btn.ghost:hover,.btn.lp-quiet:hover,.lp-quiet:hover{border-color:var(--anp-brand);color:var(--anp-brand-deep);background:var(--anp-card-warm)}
.btn.lp-night,.lp-night{background:var(--anp-brand);color:var(--anp-paper-lamp);box-shadow:none;font-weight:600}
.btn.lp-night:hover,.lp-night:hover{background:var(--anp-brand-deep);color:var(--anp-paper-lamp)}
.btn[disabled]{opacity:.55;cursor:default}

/* program.css bits that were violet or tiny */
.phelp-btn{font-size:var(--anp-fs-sm);color:var(--anp-brand);border-color:var(--lp-line-strong);background:var(--anp-card-warm)}
.phelp-card{background:var(--anp-card-warm);border-left-color:var(--anp-brand);border-radius:var(--anp-radius-sm)}
.phelp-card p{font-size:var(--anp-fs-sm);color:var(--anp-ink)}
.evalflag{background:var(--anp-brand-tint);border-color:var(--lp-line);border-left-color:var(--anp-brand)}
.evalflag h3{color:var(--anp-brand)}
.evalflag p{font-size:var(--anp-fs-sm);color:var(--anp-ink)}
.expert{background:var(--anp-card-warm);border-left-color:var(--anp-lantern)}
.summary-hero{background:var(--anp-brand);color:var(--anp-paper-lamp);box-shadow:var(--lp-shadow-2)}
.summary-hero h2,.summary-hero p{color:var(--anp-paper-lamp)}

/* the sign-in / backup box that supabase-sync.js draws */
.anp-cloud{font-family:inherit}
.anp-cloud .anp-cloud-note{font-size:var(--anp-fs-sm);color:var(--anp-ink);line-height:1.5}
.anp-cloud .anp-cloud-in{min-height:48px;font-size:var(--anp-fs-base);border:1.5px solid var(--lp-line-strong);border-radius:var(--anp-radius-sm);background:var(--anp-card-warm);color:var(--anp-ink)}
.anp-cloud .anp-cloud-btn{background:var(--anp-brand);color:var(--anp-card-warm);border-radius:999px;min-height:48px;padding:0 20px;font:600 var(--anp-fs-sm)/1.2 var(--anp-font-ui)}
.anp-cloud .anp-cloud-btn.ghost{background:var(--anp-card-warm);color:var(--anp-brand);border:1.5px solid var(--lp-line-strong)}

/* anp-restore.js's cards (it injects its own CSS later, so these carry more weight) */
html body .anp-rescue,html body .anp-nudge{background:var(--anp-card-warm);border:1px solid var(--lp-line);border-radius:var(--anp-radius);box-shadow:var(--lp-shadow-1);padding:20px;font-family:var(--anp-font-ui)}
html body .anp-rescue h3,html body .anp-nudge h3{font-family:var(--anp-font-lamp-display);font-weight:600;font-size:var(--anp-fs-lg);color:var(--anp-ink);margin:0 0 6px}
html body .anp-rescue p,html body .anp-nudge p{font-size:var(--anp-fs-sm);color:var(--anp-ink-soft);line-height:1.55}
html body .anp-nudge-btn{background:var(--anp-brand);color:var(--anp-card-warm);border-radius:999px;min-height:var(--anp-tap);font:600 var(--anp-fs-sm)/1.2 var(--anp-font-ui)}
html body .anp-nudge-btn.ghost{background:transparent;color:var(--anp-brand)}
html body .anp-nothing{background:var(--anp-lantern-tint)!important;border:1px solid var(--lp-line)!important;color:var(--anp-ink)!important;font-size:var(--anp-fs-sm)!important}

/* the footer: the legal line and a few links */
footer{font-size:var(--anp-fs-sm);color:var(--anp-ink-soft);border-top:1px solid var(--lp-line)}
footer a{color:var(--anp-brand);font-weight:600;display:inline-flex;align-items:center;min-height:var(--anp-tap)}

/* a page with ONE helper keeps that helper's own pill, dressed in Lamplight */
#anp-stuck-pill,#anp-help-btn:not(.one-help){background:var(--anp-card-warm)!important;color:var(--anp-brand)!important;border:1.5px solid var(--lp-line-strong)!important;font-family:var(--anp-font-ui)!important;font-size:var(--anp-fs-sm)!important;font-weight:700!important}

/* ONE help button (anp-one-help.js): a 44px "?" circle, bottom right, and its small sheet.
   The helpers stay loaded; their own floating buttons hide while the "?" is on the page. */
html.anp-one-help-on #anp-fab,html.anp-one-help-on #anp-stuck-pill,html.anp-one-help-on #anp-dock{display:none!important}
.one-help{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9999;width:44px;height:44px;border-radius:999px;border:1.5px solid var(--lp-line-strong);background:var(--anp-card-warm);color:var(--anp-brand);font:700 1.2rem/1 var(--anp-font-lamp-display);cursor:pointer;box-shadow:0 2px 6px rgba(42,39,34,.12)}
.one-help-sheet{position:fixed;right:16px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:9999;width:min(300px,calc(100vw - 32px));background:var(--anp-card-warm);border:1px solid var(--lp-line);border-radius:18px;box-shadow:var(--lp-shadow-2);padding:8px;display:flex;flex-direction:column;gap:4px}
.one-help-sheet[hidden]{display:none}
.one-help-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:var(--anp-ink);text-align:left;cursor:pointer;font-family:inherit}
.one-help-choice:hover{background:var(--anp-parchment)}
.one-help-t{font-weight:700;font-size:var(--anp-fs-base);color:var(--anp-brand)}
.one-help-s{font-size:var(--anp-fs-sm);color:var(--anp-ink-soft);line-height:1.35}
@media print{.one-help,.one-help-sheet{display:none!important}}
/* FIRST-NIGHT progress strip (Hero -> Check -> Story), shown on the setup screen and the
   reading-check intro so a parent always sees the fun comes first and how close the story is.
   The first story itself (session.js) is owned by the night pass; its own stop strip stands. */
.anp-fn-strip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:16px 0 4px;font-family:var(--anp-font-ui)}
.anp-fn-strip .fn-step{display:inline-flex;align-items:center;gap:7px;font-size:var(--anp-fs-sm);font-weight:600;color:var(--anp-ink-soft)}
.anp-fn-strip .fn-dot{width:22px;height:22px;border-radius:999px;border:1.5px solid var(--lp-line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--anp-ink-soft);background:var(--anp-card-warm)}
.anp-fn-strip .fn-step[aria-current="step"]{color:var(--anp-brand)}
.anp-fn-strip .fn-step[aria-current="step"] .fn-dot{background:var(--anp-brand);border-color:var(--anp-brand);color:var(--anp-paper-lamp)}
.anp-fn-strip .fn-arrow{color:var(--anp-ink-soft)}   /* Oct 20: full strength (2.5:1 at .55) */
/* setup screen: three short lines, each with an icon */
.ob-three{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-direction:column;gap:12px}
.ob-three li{display:flex;align-items:center;gap:12px;font-size:var(--anp-fs-base);color:var(--anp-ink);line-height:1.4}
.ob-three .lp-ico-ring{flex:none;width:44px;height:44px}
.ob-back{margin:14px 0 0;text-align:center;font-size:var(--anp-fs-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}