/* ============================================================================
   LearnRise — Design System (shared stylesheet)
   Encodes §3 tokens, type, spacing, motion. Two layers:
     .ds-*   page chrome for the spec/sign-off pages (NOT product UI)
     .lr-*   the real LearnRise product components (child app + parent web)
   Do not contradict these tokens — extend only.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
:root{
  /* Surfaces */
  --lr-bg:            #EEF2EE;   /* page background — warm very-light green-gray */
  --lr-cream:         #F8F6F2;   /* AI surface / focal / cream */
  --lr-child:         #D4E8CC;   /* child/user surface — soft sage */
  --lr-card:          #F2F2F7;   /* card surface — light neutral */
  --lr-card-sel:      #D4E8CC;   /* selected card fill */

  /* Action / accent */
  --lr-accent:        #4A7C59;   /* primary action, completed pill, close btn */
  --lr-accent-press:  #3C6549;
  --lr-accent-strong: #2C6A4C;   /* accent text ON green tints — AA (>=4.5:1) on the darkest tint #DAE4DC */

  /* Text */
  --lr-ink:           #1C1C1E;   /* primary text */
  --lr-ink-2:         #48484A;   /* secondary text / labels */
  --lr-muted:         #6C6C70;   /* context strip, captions */
  --lr-placeholder:   #767676;   /* placeholder on #F2F2F7 */

  /* Lines */
  --lr-divider:       #E5E5EA;   /* 1pt hairline */
  --lr-focal-edge:    #D1D9D1;   /* 3pt left edge of focal — neutral, NOT green */

  /* TTS highlight — amber (green reserved for phonics) */
  --lr-tts-bg:        rgba(253,230,138,.70);  /* #FDE68A @ 70% */
  --lr-tts-underline: #D97706;

  /* OG phonics tags (Ruby only) — each color + a typographic signal */
  --og-vowel:   #C0392B;   /* dark red    + underline      */
  --og-blend:   #2D6A4F;   /* dark green  + bold           */
  --og-digraph: #1B4A8A;   /* dark blue   + italic         */
  --og-suffix:  #5E2D8E;   /* dark purple + dotted underline */

  /* Brand accent (logo / app icon / marketing only — NOT the in-product action green) */
  --brand:        #16A36B;   /* fresher emerald */
  --brand-deep:   #0E7C52;   /* wordmark text — AA on cream */
  --spark:        #F2A33C;   /* warm AI spark pop */

  /* Debug overlay status (parent dashboard only) */
  --lr-ok:     #2D6A4F;
  --lr-warn:   #B45309;
  --lr-warn-strong: #8F3F0A;   /* warn text ON the amber tint rgba(180,83,9,.12) — AA (>=4.5:1) */
  --lr-bad:    #B42318;

  /* Type */
  --lr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lr-dys:  "OpenDyslexic", "Comic Sans MS", var(--lr-font);

  /* Spacing scale (8pt base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px;

  /* Radii */
  --r-card:14px; --r-bubble:18px; --r-chip:22px; --r-panel:20px; --r-pill:999px;

  /* Soft shadows — depth without harsh edges */
  --sh-1: 0 1px 2px rgba(28,40,28,.05), 0 2px 8px rgba(28,40,28,.05);
  --sh-2: 0 2px 6px rgba(28,40,28,.06), 0 12px 30px rgba(28,40,28,.08);
}

/* OpenDyslexic opt-in: any subtree with .lr-dys swaps the family + spacing */
.lr-dys, .lr-dys *{ font-family:var(--lr-dys) !important; letter-spacing:.2px; word-spacing:.06em; }

/* ============================================================================
   DS PAGE CHROME — neutral review surface, labeled artboards, nav
   ============================================================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body.ds{
  font-family:var(--lr-font);
  background:#E4E7E3;
  color:var(--lr-ink);
  -webkit-font-smoothing:antialiased;
}

/* top nav shared across spec pages */
.ds-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s7); height:60px;
  background:rgba(248,246,242,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid #d3d7d1;
}
.ds-brand{ display:flex; align-items:center; font-weight:700; font-size:16px; letter-spacing:-.2px; }
.ds-brand .mark{ width:30px; height:30px; margin-right:10px; background:transparent; display:flex; align-items:center; justify-content:center; }
.ds-brand .mark svg{ display:block; }
.ds-brand .rise{ color:var(--brand-deep); }
.ds-nav a{ color:var(--lr-ink-2); text-decoration:none; font-size:14px; font-weight:550; padding:6px 4px; border-bottom:2px solid transparent; }
.ds-nav a:hover{ color:var(--lr-ink); }
.ds-nav a.active{ color:var(--lr-ink); border-bottom-color:var(--lr-accent); }
.ds-nav .spacer{ flex:1; }
.ds-nav .tag{ font-size:12px; color:var(--lr-muted); font-weight:600; padding:4px 10px; background:#fff; border:1px solid #d3d7d1; border-radius:var(--r-pill); }

/* page wrapper */
.ds-wrap{ max-width:1320px; margin:0 auto; padding:var(--s8) var(--s7) 120px; }
.ds-hero{ margin-bottom:var(--s8); }
.ds-hero h1{ font-size:34px; font-weight:700; letter-spacing:-.6px; margin:0 0 10px; line-height:1.25; }
.ds-hero p{ font-size:17px; line-height:1.6; color:var(--lr-ink-2); max-width:760px; margin:0; text-wrap:pretty; }
.ds-kicker{ font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--lr-accent); margin:0 0 12px; }

/* section heading */
.ds-section{ margin:var(--s9) 0 var(--s6); }
.ds-section h2{ font-size:24px; font-weight:700; letter-spacing:-.3px; margin:0 0 8px; }
.ds-section p{ font-size:15px; line-height:1.6; color:var(--lr-ink-2); max-width:720px; margin:0; }
.ds-divide{ height:1px; background:#d3d7d1; border:0; margin:var(--s9) 0 0; }

/* labeled artboard */
.ds-frame{ display:inline-flex; flex-direction:column; gap:10px; vertical-align:top; }
.ds-frame > .cap{ display:flex; align-items:baseline; gap:10px; }
.ds-frame > .cap b{ font-size:14px; font-weight:650; color:var(--lr-ink); letter-spacing:-.1px; }
.ds-frame > .cap span{ font-size:12.5px; color:var(--lr-muted); }
.ds-card{ background:#fff; border:1px solid #d3d7d1; border-radius:18px; box-shadow:var(--sh-1); overflow:hidden; }

/* row of frames */
.ds-row{ display:flex; flex-wrap:wrap; gap:var(--s7); align-items:flex-start; }

/* scaling board: set --w/--h (px of the real screen) and --scale */
.board{ position:relative; width:calc(var(--w) * var(--scale) * 1px); height:calc(var(--h) * var(--scale) * 1px); }
.board > .canvas{
  position:absolute; top:0; left:0;
  width:calc(var(--w) * 1px); height:calc(var(--h) * 1px);
  transform:scale(var(--scale)); transform-origin:top left;
}

/* swatch + spec helpers */
.ds-grid{ display:grid; gap:var(--s4); }
.swatch-card{ background:#fff; border:1px solid #d3d7d1; border-radius:14px; overflow:hidden; box-shadow:var(--sh-1); }
.swatch-chip{ height:84px; display:flex; align-items:flex-end; padding:10px; }
.swatch-meta{ padding:12px 14px; }
.swatch-meta .nm{ font-size:13.5px; font-weight:650; }
.swatch-meta .hx{ font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12px; color:var(--lr-ink-2); }
.swatch-meta .role{ font-size:12px; color:var(--lr-muted); line-height:1.45; margin-top:3px; }
.swatch-meta .wcag{ font-size:11.5px; font-weight:700; color:var(--lr-ok); margin-top:6px; font-variant-numeric:tabular-nums; }

/* note / callout */
.ds-note{ background:#F8F6F2; border:1px solid #e3e0d8; border-left:4px solid var(--lr-accent); border-radius:10px; padding:14px 18px; font-size:14px; line-height:1.6; color:var(--lr-ink-2); }
.ds-note.warn{ border-left-color:var(--lr-warn); }
.ds-note b{ color:var(--lr-ink); }

/* ============================================================================
   LR PRODUCT COMPONENTS — the real child app + parent web UI
   ============================================================================ */

/* --- focal zone (current question) --- */
.lr-focal{
  background:var(--lr-cream);
  border-left:3px solid var(--lr-focal-edge);
  border-radius:0 var(--r-panel) var(--r-panel) 0;
  padding:var(--s7) var(--s7) var(--s6);
  position:relative;
}
.lr-focal .eyebrow{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--lr-muted); margin-bottom:var(--s4); }
.lr-question{ font-size:28px; line-height:1.5; font-weight:500; color:var(--lr-ink); margin:0; text-wrap:pretty; }
.lr-q-lg{ font-size:30px; }

/* TTS highlight + controls */
.lr-w{ border-radius:6px; padding:0 1px; }
.lr-w.on{ background:var(--lr-tts-bg); text-decoration:underline; text-decoration-color:var(--lr-tts-underline); text-decoration-thickness:3px; text-underline-offset:5px; font-weight:650; }
.lr-tts-row{ display:flex; align-items:center; gap:12px; margin-top:var(--s5); }
.lr-tts-circle{ width:46px; height:46px; min-width:44px; min-height:44px; border-radius:50%; border:1px solid var(--lr-divider); background:#fff; color:var(--lr-ink); display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; }
.lr-tts-hint{ font-size:13px; color:var(--lr-muted); }

/* OG phonics tags + legend */
.og-vowel{ color:var(--og-vowel); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; }
.og-blend{ color:var(--og-blend); font-weight:800; }
.og-digraph{ color:var(--og-digraph); font-style:italic; font-weight:650; }
.og-suffix{ color:var(--og-suffix); text-decoration:underline dotted; text-decoration-thickness:2px; text-underline-offset:4px; }
.lr-og-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--lr-divider); }
.lr-og-legend span{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--lr-ink-2); font-weight:550; }
.lr-og-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* --- context strip (muted prior exchanges) --- */
.lr-context{ display:flex; flex-direction:column; gap:8px; padding:var(--s4) var(--s6); }
.lr-context .lbl{ font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--lr-muted); }
.lr-ctx-row{ display:flex; gap:10px; align-items:flex-start; }
.lr-ctx-bubble{ font-size:13px; line-height:1.5; padding:8px 12px; border-radius:12px; max-width:78%; }
.lr-ctx-bubble.ai{ background:rgba(248,246,242,.6); color:var(--lr-muted); }
.lr-ctx-bubble.child{ background:rgba(212,232,204,.5); color:var(--lr-ink-2); margin-left:auto; }

/* --- chat bubbles --- */
.lr-bubble{ font-size:18px; line-height:1.55; padding:14px 18px; border-radius:var(--r-bubble); box-shadow:var(--sh-1); max-width:80%; }
.lr-bubble.ai{ background:var(--lr-cream); color:var(--lr-ink); border-top-left-radius:6px; }
.lr-bubble.child{ background:var(--lr-child); color:var(--lr-ink); border-top-right-radius:6px; margin-left:auto; }
.lr-typing{ display:inline-flex; gap:5px; padding:16px 18px; background:var(--lr-cream); border-radius:var(--r-bubble); border-top-left-radius:6px; box-shadow:var(--sh-1); }
.lr-typing i{ width:8px; height:8px; border-radius:50%; background:var(--lr-muted); opacity:.5; animation:lr-dot 1.2s infinite ease-in-out; }
.lr-typing i:nth-child(2){ animation-delay:.18s; } .lr-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes lr-dot{ 0%,60%,100%{ opacity:.35; } 30%{ opacity:.95; } }

/* --- answer cards --- */
.lr-cards{ display:flex; flex-direction:column; gap:12px; }
.lr-cards.two-up{ flex-direction:row; }
.lr-cards.two-up .lr-card{ flex:1; }
.lr-card{
  min-height:64px; width:100%; border:1.5px solid #E4E4EC; border-radius:var(--r-card);
  background:var(--lr-card); color:var(--lr-ink);
  font-family:var(--lr-font); font-size:20px; font-weight:500;
  text-align:left; padding:0 20px; cursor:pointer; display:flex; align-items:center; gap:12px;
}
.lr-card.sel{ background:var(--lr-card-sel); border-color:var(--lr-accent); border-width:2px; }
.lr-card.sel .tick{ opacity:1; }
.lr-card .tick{ margin-left:auto; width:24px; height:24px; border-radius:50%; background:var(--lr-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; opacity:0; }
.lr-card.dim{ opacity:.4; pointer-events:none; }

/* --- frustration chips --- */
.lr-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.lr-chip{ min-height:44px; padding:0 16px; border-radius:var(--r-chip); border:1px solid #cdd6cb; background:#fff; color:var(--lr-ink-2); font-family:var(--lr-font); font-size:15px; font-weight:550; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.lr-chip:hover{ background:var(--lr-cream); color:var(--lr-ink); }

/* --- task strip (completed only) --- */
.lr-tasks{ display:flex; align-items:center; gap:10px; padding:var(--s3) var(--s6); flex-wrap:wrap; }
.lr-tasks .lbl{ font-size:12px; font-weight:600; color:var(--lr-muted); }
.lr-task-pill{ display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 14px 0 11px; border-radius:var(--r-pill); background:rgba(74,124,89,.14); color:var(--lr-accent); font-size:14px; font-weight:650; white-space:nowrap; }
.lr-task-pill svg{ width:15px; height:15px; }

/* --- input bar --- */
.lr-inputbar{ display:flex; align-items:center; gap:12px; padding:var(--s4) var(--s6); border-top:1px solid var(--lr-divider); background:var(--lr-bg); }
.lr-textfield{ flex:1; min-height:52px; border-radius:26px; border:1px solid var(--lr-divider); background:#fff; padding:0 20px; font-family:var(--lr-font); font-size:17px; color:var(--lr-ink); }
.lr-textfield::placeholder{ color:var(--lr-placeholder); }
.lr-mic{ width:52px; height:52px; min-width:44px; border-radius:50%; border:1px solid var(--lr-divider); background:#fff; color:var(--lr-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lr-mic.live{ background:var(--lr-accent); color:#fff; border-color:var(--lr-accent); }
.lr-send{ width:52px; height:52px; min-width:44px; border-radius:50%; border:0; background:var(--lr-accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* --- parent lock button --- */
.lr-lock{ position:absolute; top:var(--s5); right:var(--s5); width:44px; height:44px; border-radius:12px; border:1px solid var(--lr-divider); background:#fff; color:var(--lr-ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* --- buttons (shared) --- */
.lr-btn{ min-height:48px; padding:0 22px; border-radius:14px; border:0; font-family:var(--lr-font); font-size:16px; font-weight:650; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.lr-btn.primary{ background:var(--lr-accent); color:#fff; }
.lr-btn.primary:hover{ background:var(--lr-accent-press); }
.lr-btn.ghost{ background:#fff; color:var(--lr-ink); border:1px solid var(--lr-divider); }
.lr-btn.lg{ min-height:60px; font-size:19px; padding:0 36px; border-radius:18px; }

/* --- web: feed card, wizard shell, transcript turn, chat chip row --- */
.lr-feed-card{ background:#fff; border:1px solid var(--lr-divider); border-radius:16px; padding:18px 20px; box-shadow:var(--sh-1); }
.lr-badge{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:var(--r-pill); font-size:12.5px; font-weight:650; }
.lr-badge.cond{ background:#E7EDE5; color:var(--lr-ink-2); }
.lr-badge.ok{ background:rgba(45,106,79,.12); color:var(--lr-ok); }
.lr-badge.warn{ background:rgba(180,83,9,.12); color:var(--lr-warn-strong); }
.lr-badge.bad{ background:rgba(180,35,24,.12); color:var(--lr-bad); }

/* session-close overlay */
.lr-close{ position:absolute; inset:0; background:rgba(28,40,28,.55); display:flex; align-items:center; justify-content:center; }
.lr-close .panel{ background:var(--lr-cream); border-radius:28px; padding:48px 44px; text-align:center; max-width:560px; box-shadow:var(--sh-2); }
.lr-close .star{ font-size:72px; line-height:1; }
.lr-close h3{ font-size:30px; font-weight:650; margin:14px 0 16px; letter-spacing:-.3px; }
.lr-token{ display:inline-flex; align-items:center; gap:9px; min-height:50px; padding:0 22px; border-radius:var(--r-pill); background:rgba(74,124,89,.14); color:var(--lr-accent); font-size:18px; font-weight:700; margin-bottom:18px; }
.lr-recap{ font-size:19px; line-height:1.55; color:var(--lr-ink); margin:0 0 12px; text-wrap:pretty; }
.lr-hook{ font-size:16px; line-height:1.55; color:var(--lr-ink-2); margin:0 0 28px; text-wrap:pretty; }

/* reduce motion: kill the only looping decorative motion */
@media (prefers-reduced-motion: reduce){
  .lr-typing i{ animation:none; opacity:.6; }
}

/* ============================================================================
   WEB FRAMES — laptop browser + phone bezel (Part B mockups)
   ============================================================================ */
.web-frame{ position:absolute; inset:0; background:var(--lr-bg); border-radius:12px; overflow:hidden;
            display:flex; flex-direction:column; box-shadow:0 0 0 1px #cfd4cd; font-family:var(--lr-font); }
.web-top{ flex:0 0 auto; height:42px; display:flex; align-items:center; gap:14px; padding:0 16px;
          background:#E4E8E3; border-bottom:1px solid #d2d7d0; }
.web-top .lights{ display:flex; gap:7px; }
.web-top .lights i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.web-top .url{ flex:1; max-width:520px; height:26px; border-radius:8px; background:#fff; border:1px solid #d2d7d0;
               display:flex; align-items:center; padding:0 12px; font-size:12.5px; color:var(--lr-muted); gap:7px; }
.web-body{ flex:1; overflow:hidden; position:relative; }

.phone-frame{ position:absolute; inset:0; background:var(--lr-bg); border-radius:46px; overflow:hidden;
              box-shadow:0 0 0 11px #15140f, 0 0 0 13px #2c2a24; display:flex; flex-direction:column; font-family:var(--lr-font); }
.phone-status{ flex:0 0 auto; height:46px; display:flex; align-items:center; justify-content:space-between;
               padding:0 30px 0 34px; font-size:15px; font-weight:650; color:var(--lr-ink); }
.phone-status .r{ display:flex; gap:6px; align-items:center; font-size:13px; }
.phone-body{ flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; }

/* --- web auth / card surfaces --- */
.web-authwrap{ position:absolute; inset:0; display:flex; }
.web-brandpane{ flex:0 0 42%; background:linear-gradient(160deg,#1B6E4A,#0E5235); color:#fff;
                display:flex; flex-direction:column; justify-content:center; padding:56px; }
.web-formpane{ flex:1; display:flex; align-items:center; justify-content:center; padding:48px; }
.auth-card{ width:100%; max-width:400px; }
.oauth-btn{ width:100%; min-height:52px; border-radius:13px; border:1px solid var(--lr-divider); background:#fff;
            display:flex; align-items:center; justify-content:center; gap:11px; font-size:16px; font-weight:600;
            color:var(--lr-ink); cursor:pointer; margin-bottom:12px; font-family:var(--lr-font); text-decoration:none; }
.oauth-btn:hover{ background:var(--lr-cream); }
.oauth-btn.dark{ background:#1C1C1E; color:#fff; border-color:#1C1C1E; }
.oauth-btn.disabled,.oauth-btn:disabled{ cursor:not-allowed; opacity:.72; }
.auth-div{ display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--lr-muted); font-size:13px; }
.auth-div::before,.auth-div::after{ content:""; flex:1; height:1px; background:var(--lr-divider); }
.web-field{ width:100%; min-height:50px; border-radius:12px; border:1px solid var(--lr-divider); background:#fff;
            padding:0 16px; font-size:16px; color:var(--lr-ink); font-family:var(--lr-font); margin-bottom:12px; }
.web-field::placeholder{ color:var(--lr-placeholder); }
.web-field.err{ border-color:var(--lr-bad); background:#fdf3f2; }
.field-lab{ font-size:13.5px; font-weight:650; color:var(--lr-ink-2); margin:0 0 6px; display:block; }

/* wizard (web) */
.wz{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--lr-bg); font-family:var(--lr-font); }
.wz-top{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:20px 32px; }
.wz-prog{ display:flex; align-items:center; gap:8px; }
.wz-prog .bar{ width:120px; height:6px; border-radius:3px; background:#dde3dc; overflow:hidden; }
.wz-prog .bar > i{ display:block; height:100%; background:var(--lr-accent); border-radius:3px; }
.wz-prog .lab{ font-size:13px; font-weight:650; color:var(--lr-muted); }
.wz-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 32px; overflow:hidden; }
.wz-inner{ width:100%; max-width:600px; }
.wz-q{ font-size:30px; font-weight:650; letter-spacing:-.4px; color:var(--lr-ink); margin:0 0 8px; text-wrap:pretty; }
.wz-sub{ font-size:16px; line-height:1.55; color:var(--lr-ink-2); margin:0 0 26px; }
.wz-foot{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-top:1px solid var(--lr-divider); background:#fff; }
.choice{ display:flex; flex-direction:column; gap:12px; }
.choice-card{ min-height:64px; border:1.5px solid var(--lr-divider); border-radius:14px; background:#fff;
              padding:0 20px; display:flex; align-items:center; gap:14px; cursor:pointer; font-size:18px; font-weight:550; color:var(--lr-ink); }
.choice-card:hover{ background:var(--lr-cream); }
.choice-card.sel{ background:var(--lr-card-sel); border-color:var(--lr-accent); border-width:2px; }
.choice-card .box{ width:24px; height:24px; border-radius:7px; border:2px solid #c4ccc2; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.choice-card.sel .box{ background:var(--lr-accent); border-color:var(--lr-accent); }
.choice-card .ic{ font-size:22px; }
.skip{ min-height:40px; padding:0 14px; font-size:14px; font-weight:600; color:var(--lr-muted); text-decoration:none; }
.insight-count{ margin:0 0 8px; color:var(--lr-muted); font-size:13px; font-weight:700; letter-spacing:.02em; }
.wz-field{ width:100%; min-height:54px; border-radius:13px; border:1px solid var(--lr-divider); background:#fff; padding:0 18px; font-size:18px; color:var(--lr-ink); font-family:var(--lr-font); box-sizing:border-box; }
.wz-field::placeholder{ color:var(--lr-placeholder); }
.row3{ display:flex; gap:14px; }
.row3 > div{ flex:1; }
.ta{ width:100%; min-height:120px; border-radius:13px; border:1px solid var(--lr-divider); background:#fff; padding:14px 18px; font-size:17px; line-height:1.5; color:var(--lr-ink); font-family:var(--lr-font); resize:none; box-sizing:border-box; }
.ta::placeholder{ color:var(--lr-placeholder); }
.insight-chip{ width:100%; min-height:56px; border:1.5px solid var(--lr-divider); border-radius:13px; background:#fff; padding:0 18px; display:flex; align-items:center; gap:12px; cursor:pointer; font-size:16.5px; color:var(--lr-ink); text-align:left; font-family:var(--lr-font); }
.insight-chip:hover{ background:var(--lr-cream); }
.insight-chip.picked{ background:var(--lr-card-sel); border-color:var(--lr-accent); border-width:2px; }
.insight-chip .dot{ width:22px; height:22px; border-radius:50%; border:2px solid #c4ccc2; flex:0 0 auto; }
.insight-chip.picked .dot{ background:var(--lr-accent); border-color:var(--lr-accent); }
.reveal{ display:none; background:var(--lr-cream); border:1px solid #e3e0d8; border-radius:16px; padding:22px 24px; margin-top:18px; opacity:0; transform:translateY(6px); transition:opacity .24s ease, transform .24s ease; }
.reveal.is-visible{ display:block; opacity:1; transform:translateY(0); }
.reveal .rstep{ display:flex; gap:12px; padding:9px 0; }
.reveal .rstep .k{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--lr-accent); flex:0 0 96px; padding-top:2px; }
.reveal .rstep .v{ font-size:15px; line-height:1.55; color:var(--lr-ink); }
.privacy-note{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--lr-ink-2); background:rgba(74,124,89,.08); border-radius:11px; padding:13px 15px; margin-top:16px; }
.pref-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--lr-divider); gap:18px; }
.pref-row .pl b{ display:block; font-size:15.5px; font-weight:650; }
.pref-row .pl span{ font-size:13px; color:var(--lr-muted); }
.toggle{ width:46px; height:28px; border-radius:14px; background:#cfd4cd; position:relative; cursor:pointer; flex:0 0 auto; }
.toggle > i{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s; }
.toggle.on{ background:var(--lr-accent); }
.toggle.on > i{ left:21px; }
.seg{ display:inline-flex; background:#eceee9; border-radius:10px; padding:3px; }
.seg button{ min-height:34px; padding:0 14px; border:0; border-radius:8px; background:transparent; font-family:var(--lr-font); font-size:13.5px; font-weight:600; color:var(--lr-muted); cursor:pointer; }
.seg button.on{ background:#fff; color:var(--lr-ink); box-shadow:var(--sh-1); }
.wz-error{ background:#fff0ed; border:1px solid #ffd0c7; border-radius:12px; color:#9f2a1d; padding:12px 14px; margin-bottom:16px; font-size:14px; }
.choice-native{ width:22px; height:22px; margin:0; accent-color:var(--lr-accent); flex:0 0 auto; }
.setup-discard-trigger{ border:0; background:transparent; color:var(--lr-bad); font:600 13px var(--lr-font); padding:16px 0 0; cursor:pointer; }
.setup-discard-dialog{ width:min(480px,calc(100% - 32px)); border:1px solid var(--lr-divider); border-radius:16px; padding:24px; color:var(--lr-ink); box-shadow:0 18px 48px rgba(0,0,0,.18); }
.setup-discard-dialog::backdrop{ background:rgba(20,24,20,.48); }
.setup-discard-dialog h2,.setup-discard-dialog h3{ margin:0 0 8px; font-size:22px; }
.setup-discard-dialog p{ color:var(--lr-ink-2); line-height:1.55; }
.setup-dialog-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.setup-dialog-actions form{ margin:0; }
.setup-expired h1{ font-size:30px; margin:0 0 10px; }
.setup-expired p{ color:var(--lr-ink-2); line-height:1.6; margin:0 0 20px; }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; }
}
@media (max-width:480px){
  .wz-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
    padding:12px 16px;
  }
  .wz-top > .lr-btn:first-child{ grid-column:1; grid-row:1; justify-self:start; }
  .wz-top > .wz-prog{ grid-column:1 / -1; grid-row:2; justify-self:center; }
  .wz-top > .lr-btn:last-child{ grid-column:2; grid-row:1; justify-self:end; }
  .wz-top .lr-btn{ min-height:44px; padding:0 12px; font-size:14px; white-space:nowrap; }
  .wz-prog{ min-width:0; justify-content:center; }
  .wz-prog .bar{ width:80px; }
  .wz-prog .lab{ line-height:1.2; text-align:center; }
  .wz-body{ justify-content:flex-start; padding:16px; overflow:auto; }
  .wz-foot{ gap:12px; padding:12px 16px; }
  .wz-foot .lr-btn{ padding:0 16px; }
  .reveal{ padding:18px 16px; }
}

/* ============================================================================
   DASHBOARD SHELL — sidebar + child switcher + main (B5/B6/B7/B11)
   ============================================================================ */
.dash{ position:absolute; inset:0; display:flex; background:var(--lr-bg); font-family:var(--lr-font); }
.dash-side{ flex:0 0 232px; background:#fff; border-right:1px solid var(--lr-divider); display:flex; flex-direction:column; padding:18px 14px; }
.dash-side .sbrand{ display:flex; align-items:center; padding:6px 8px 16px; font-weight:700; font-size:16px; }
.dash-side .sbrand svg{ display:block; margin-right:8px; }
.dash-side .sbrand .rise{ color:var(--brand-deep); }
.child-switch{ background:var(--lr-cream); border:1px solid #e6e2da; border-radius:13px; padding:6px; margin-bottom:16px; }
.child-add-form{ margin:0 0 12px; }
.child-add{ width:100%; min-height:48px; font-size:14px; }
.child-opt{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:9px; cursor:pointer; text-decoration:none; color:inherit; }
.child-opt.on{ background:#fff; box-shadow:var(--sh-1); }
.child-opt .av{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
.child-opt .nm{ font-size:14.5px; font-weight:600; color:var(--lr-ink); }
.child-opt .nm span{ display:block; font-size:11.5px; font-weight:400; color:var(--lr-muted); }
.dash-nav{ display:flex; flex-direction:column; gap:2px; }
.dash-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--lr-ink-2); font-size:14.5px; font-weight:550; }
.dash-nav a .ni{ width:18px; text-align:center; }
.dash-nav a:hover{ background:var(--lr-cream); }
.dash-nav a.on{ background:rgba(74,124,89,.12); color:var(--lr-accent-strong); font-weight:650; }
.dash-side .spacer{ flex:1; }
.dash-account{ border-top:1px solid var(--lr-divider); padding-top:10px; margin-top:8px; }
.dash-account .acct-who{ display:flex; flex-direction:column; padding:2px 12px 8px; min-width:0; }
.dash-account .acct-label{ font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--lr-muted); }
.dash-account .acct-email{ font-size:13px; font-weight:600; color:var(--lr-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-account form{ margin:0; }
.acct-signout{ display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; text-align:left; cursor:pointer; color:var(--lr-ink-2); font-family:inherit; font-size:14.5px; font-weight:550; }
.acct-signout .ni{ width:18px; text-align:center; }
.acct-signout:hover{ background:var(--lr-cream); color:var(--lr-accent-strong); }
.dash-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.dash-head{ flex:0 0 auto; padding:22px 30px 18px; border-bottom:1px solid var(--lr-divider); background:#fff; }
.dash-head h1{ font-size:24px; font-weight:700; letter-spacing:-.3px; margin:0; display:flex; align-items:center; gap:12px; }
.dash-head .badges{ display:flex; gap:8px; margin-top:10px; }
.dash-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:24px 30px; }

/* parent AI chat (B7) */
.parent-chat{ height:100%; display:flex; flex-direction:column; gap:var(--s4); }
.chat-subhead{ font-size:16px; font-weight:500; color:var(--lr-muted); }
.chat-thread{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--s4); padding:2px; }
.grounded-marker{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 13px; border-radius:var(--r-pill); background:rgba(74,124,89,.12); color:var(--lr-accent-strong); font-size:13px; font-weight:650; }
.confirm-card{ max-width:640px; background:#fff; border:1px solid var(--lr-divider); border-left:3px solid var(--lr-focal-edge); border-radius:var(--r-card); padding:var(--s5); box-shadow:var(--sh-1); }
.confirm-card.mandated{ border-left-color:var(--lr-warn); background:var(--lr-cream); }
.confirm-card .eyebrow,.tier-label{ margin:0 0 var(--s2); font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--lr-muted); }
.confirm-card h2{ margin:0 0 var(--s2); font-size:18px; letter-spacing:-.2px; }
.confirm-card p{ margin:0 0 var(--s4); color:var(--lr-ink-2); line-height:1.5; }
.confirm-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.chat-suggestions{ display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--lr-divider); }
.chip-tier{ display:flex; flex-direction:column; gap:var(--s1); }
.chip-empty{ color:var(--lr-muted); font-size:14px; }
.chat-inputbar{ margin:0 calc(var(--s6) * -1) calc(var(--s6) * -1); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- B10 safety notifications --- */
.safety-headline{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.safety-kicker{ margin:0 0 4px; color:var(--lr-warn); font-size:12px; font-weight:750; letter-spacing:.9px; text-transform:uppercase; }
.safety-panel{ max-width:820px; }
.safety-copy{ color:var(--lr-ink-2); line-height:1.6; }
.safety-copy h2{ color:var(--lr-ink); margin:0 0 8px; }
.safety-list{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.safety-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff; border:1px solid var(--lr-divider); border-left:4px solid var(--lr-warn); border-radius:16px; box-shadow:var(--sh-1); color:var(--lr-ink); text-decoration:none; }
.safety-card.reviewed{ border-left-color:var(--lr-divider); opacity:.78; }
.safety-card-main{ flex:1; display:flex; flex-direction:column; gap:3px; }
.safety-card-main span{ color:var(--lr-muted); font-size:13px; }
.safety-detail{ background:#fff; border:1px solid var(--lr-divider); border-left:5px solid var(--lr-warn); border-radius:18px; box-shadow:var(--sh-1); padding:24px; }
.safety-detail h2{ margin:16px 0 8px; font-size:24px; letter-spacing:-.2px; }
.safety-back{ display:inline-flex; margin-bottom:18px; color:var(--lr-ink-2); text-decoration:none; font-weight:650; }
.safety-status{ color:var(--lr-muted); font-size:14px; }
.safety-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* quick stats — activity appears only after it becomes meaningful */
.qstats{ display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:10px; margin:16px 0 0; max-width:860px; }
.qstat{ min-height:82px; background:#fff; border:1px solid var(--lr-divider); border-radius:15px; padding:13px 16px; box-shadow:0 1px 0 rgba(28,40,28,.02); }
.qstat .n{ font-size:24px; line-height:1.1; font-weight:720; letter-spacing:-.5px; color:var(--lr-ink); font-variant-numeric:tabular-nums; }
.qstat .n.level-value{ color:var(--lr-accent-strong); font-size:21px; }
.qstat .l{ font-size:12.5px; color:var(--lr-muted); margin-top:4px; }
.qstat-help{ display:inline-block; margin-top:6px; color:var(--lr-accent-strong); font-size:11.5px; font-weight:650; text-decoration:none; }
.qstat-help:hover{ text-decoration:underline; text-underline-offset:2px; }

/* feed */
.feed{ display:flex; flex-direction:column; gap:13px; }
.feed-item{ margin:0; }
.feed-card{ background:#fff; border:1px solid var(--lr-divider); border-radius:15px; padding:17px 19px; box-shadow:var(--sh-1); cursor:pointer; display:block; text-decoration:none; color:inherit; }
.feed-card:hover{ box-shadow:var(--sh-2); }
.feed-card.pinned{ background:var(--lr-cream); border-color:#e3e0d8; }
.feed-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.feed-top .when{ font-size:12.5px; color:var(--lr-muted); }
.feed-card .body{ font-size:15px; line-height:1.55; color:var(--lr-ink); margin:0; }
.feed-card .chat-hint{ font-size:12.5px; color:var(--lr-accent); font-weight:600; margin-top:10px; display:inline-flex; align-items:center; gap:5px; }

/* session list rows */
.slist{ display:flex; flex-direction:column; }
.srow{ display:grid; grid-template-columns:1fr auto auto auto; gap:18px; align-items:center; padding:15px 6px; border-bottom:1px solid var(--lr-divider); }
.srow .sd{ font-size:14.5px; font-weight:600; color:var(--lr-ink); }
.srow .sd .sub{ display:block; font-size:12.5px; font-weight:400; color:var(--lr-muted); margin-top:2px; }
.srow .meta{ font-size:13px; color:var(--lr-ink-2); font-variant-numeric:tabular-nums; }
.srow .view{ font-size:13.5px; font-weight:650; color:var(--lr-accent-strong); text-decoration:none; }
.retention-note{ font-size:13px; color:var(--lr-muted); }

/* transcript */
.tx-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.backlink{ font-size:13px; color:var(--lr-muted); text-decoration:none; }
.tx-wrap{ display:flex; flex-direction:column; gap:14px; }
.tx-turn{ display:flex; }
.tx-turn.ai .b{ background:var(--lr-cream); border-top-left-radius:6px; }
.tx-turn.child{ justify-content:flex-end; }
.tx-turn.child .b{ background:var(--lr-child); border-top-right-radius:6px; }
.tx-turn .b{ max-width:64%; padding:12px 16px; border-radius:16px; font-size:15px; line-height:1.5; color:var(--lr-ink); }
.tx-turn .ts{ font-size:11px; color:var(--lr-muted); margin-top:5px; }
.tx-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tx-meta .m{ font-size:11px; font-weight:650; padding:3px 9px; border-radius:6px; }
.tx-meta .m.ok{ background:rgba(45,106,79,.12); color:var(--lr-ok); }
.tx-meta .m.warn{ background:rgba(180,83,9,.12); color:var(--lr-warn-strong); }
.tx-meta .m.bad{ background:rgba(180,35,24,.12); color:var(--lr-bad); }
.tx-meta .m.chip{ background:#E7EDE5; color:var(--lr-ink-2); }
.modetoggle{ display:inline-flex; background:#eceee9; border-radius:10px; padding:3px; }
.modetoggle button{ min-height:34px; padding:0 16px; border:0; border-radius:8px; background:transparent; font-family:var(--lr-font); font-size:13.5px; font-weight:600; color:var(--lr-muted); cursor:pointer; }
.modetoggle button.on{ background:#fff; color:var(--lr-ink); box-shadow:var(--sh-1); }
.tx-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--lr-divider); display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:13px; color:var(--lr-muted); }
.del-link{ color:var(--lr-bad); font-weight:650; text-decoration:none; font-size:13.5px; }
.del-link.disabled{ opacity:.45; cursor:not-allowed; }
.modal-scrim{ position:absolute; inset:0; z-index:20; background:rgba(28,40,28,.5); display:flex; align-items:center; justify-content:center; padding:40px; }
.modal-scrim[hidden], .tx-meta[hidden]{ display:none; }
.modal{ background:#fff; border-radius:18px; padding:30px 32px; max-width:440px; box-shadow:var(--sh-2); }
.modal h3{ font-size:21px; font-weight:700; margin:0 0 10px; }
.modal p{ font-size:14.5px; line-height:1.6; color:var(--lr-ink-2); margin:0 0 22px; }
.modal .acts{ display:flex; gap:12px; justify-content:flex-end; align-items:center; }
.lr-btn.danger{ background:var(--lr-bad); color:#fff; }
.held-banner{ display:flex; gap:12px; align-items:flex-start; background:rgba(180,83,9,.08); border:1px solid rgba(180,83,9,.25); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.held-banner b{ font-size:14.5px; color:var(--lr-ink); }
.held-banner p{ font-size:13.5px; color:var(--lr-ink-2); line-height:1.55; margin:3px 0 0; }

/* ============================================================================
   FORGOT-PASSWORD shell  (B1 locked mock)
   ============================================================================ */
.auth-mark svg{ display:block; }
.forgot{ min-height:44px; display:inline-flex; align-items:center; font-size:14px; color:var(--lr-accent-press); font-weight:600; text-decoration:none; }
.forgot:focus-visible{ outline:3px solid var(--spark); outline-offset:3px; border-radius:8px; }

/* Responsive wrapper: centers auth-card on all viewports for forgot-password   */
.forgot-body{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:30px 26px;
  background:var(--lr-bg);
  color:var(--lr-ink);
  font-family:var(--lr-font);
}

/* Sign-in shell (B1 locked mock) */
.signin-body{ position:absolute; inset:0; background:var(--lr-bg); color:var(--lr-ink); font-family:var(--lr-font); }
.gicon{ width:20px; height:20px; flex:0 0 auto; }
.sign-in-error{ font-size:13px; color:var(--lr-bad); margin:-6px 0 12px; }
.apple-disabled-note{ font-size:12.5px; line-height:1.4; color:var(--lr-muted); margin:-4px 0 12px; }
.signin-button-spinner{ display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; }
.oauth-btn:focus-visible,.lr-btn:focus-visible,.web-field:focus-visible{ outline:3px solid var(--spark); outline-offset:3px; }
@media (max-width:700px){
  .signin-body .web-authwrap{ position:static; min-height:100vh; display:block; }
  .signin-body .web-brandpane{ display:none; }
  .signin-body .web-formpane{ min-height:100vh; padding:30px 26px; }
}

/* ============================================================================
   DASHBOARD RESPONSIVE (ticket #96) — phone hides sidebar, shows bottom tabbar
   ============================================================================ */
.phone-bottom-tabbar{
  display:none; /* hidden on desktop by default */
  flex:0 0 auto;
  border-top:1px solid var(--lr-divider);
  background:#fff;
}
.phone-bottom-tabbar a{
  flex:1;
  text-align:center;
  padding:11px 0 16px;
  font-size:10px;
  color:var(--lr-muted);
  text-decoration:none;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.phone-bottom-tabbar a .i{
  font-size:17px;
  display:block;
  margin-bottom:3px;
}
.phone-bottom-tabbar a.on{
  color:var(--lr-accent);
  font-weight:650;
}

@media (max-width: 780px){
  .dash-side{ display:none; }
  .phone-bottom-tabbar{ display:flex; }
  .dash-body{ padding:18px 16px; }
  .dash-head{ padding:16px 16px 12px; }
}
@media (min-width: 781px){
  .phone-bottom-tabbar{ display:none; }
}

/* B11 settings screen (issue #107) */
.settings-page{ max-width:1080px; height:100%; overflow:auto; margin:0 auto; padding-right:4px; }
.settings-banner,.settings-notice,.settings-error{ border-radius:12px; padding:12px 14px; margin-bottom:18px; font-size:14px; line-height:1.45; }
.settings-banner{ background:rgba(180,83,9,.08); color:var(--lr-ink-2); }
.settings-notice{ background:#E7EDE5; color:var(--lr-ok); }
.settings-error{ background:rgba(180,35,24,.08); color:var(--lr-bad); }
.settings-section{ background:#fff; border:1px solid var(--lr-divider); border-radius:16px; padding:6px 22px 20px; margin-bottom:18px; box-shadow:var(--sh-1); }
.settings-section h2{ font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--lr-muted); margin:16px 2px 8px; }
.settings-profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:10px 0 18px; }
.settings-profile-grid div{ background:var(--lr-card); border-radius:12px; padding:10px 12px; }
.settings-profile-grid dt{ font-size:12px; color:var(--lr-muted); font-weight:650; }
.settings-profile-grid dd{ margin:3px 0 0; font-size:14px; color:var(--lr-ink); }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 2px; border-top:1px solid var(--lr-divider); }
.settings-row:first-of-type{ border-top:0; }
.settings-row b{ display:block; font-size:15px; font-weight:650; color:var(--lr-ink); }
.settings-row small,.settings-note{ display:block; font-size:13px; color:var(--lr-muted); line-height:1.45; }
.settings-row input[type="checkbox"]{ width:24px; height:24px; accent-color:var(--lr-accent); }
.settings-row select,.settings-inline-form input{ min-height:44px; border:1px solid var(--lr-divider); border-radius:10px; padding:0 12px; font:inherit; background:#fff; color:var(--lr-ink); }
.settings-form .lr-btn{ margin-top:14px; }
.child-profile-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:8px 0 2px; }
.child-profile-actions form{ margin:0; }
.child-added-success{ border-color:rgba(74,124,89,.35); background:var(--lr-card-sel); }
.child-added-success h2{ color:var(--lr-accent-strong); font-size:18px; text-transform:none; letter-spacing:0; }
.ipad-options{ display:flex; gap:14px; flex-wrap:wrap; padding:14px 0; }
.ipad-option{ flex:1 1 240px; border:1.5px solid var(--lr-divider); border-radius:13px; padding:16px; }
.ipad-option.selected{ border-color:var(--lr-accent); border-width:2px; background:var(--lr-card-sel); }
.ipad-option b{ font-size:14.5px; }
.ipad-option span{ display:block; font-size:12.5px; color:var(--lr-muted); margin-top:4px; line-height:1.45; }
.ipad-option.selected span{ color:var(--lr-ink-2); }  /* AA (>=4.5:1) on the selected #D4E8CC fill */
.settings-link,.settings-link-button{ color:var(--lr-accent); font-size:13px; font-weight:650; text-decoration:none; }
.settings-link-button{ background:transparent; border:0; padding:4px 0; cursor:pointer; font-family:var(--lr-font); }
.settings-inline-form{ display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:10px 0 16px; }
.settings-inline-form label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:650; color:var(--lr-ink-2); }
.settings-table{ width:100%; border-collapse:collapse; }
.settings-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--lr-muted); font-weight:700; padding:9px 8px; border-bottom:1px solid var(--lr-divider); }
.settings-table td{ padding:11px 8px; border-bottom:1px solid var(--lr-divider); font-size:13.5px; vertical-align:middle; }
.settings-table td form{ display:inline-block; margin-right:10px; }
.danger-zone{ border-color:rgba(180,35,24,.25); }
.danger-button{ color:var(--lr-bad)!important; border-color:rgba(180,35,24,.4)!important; }
@media (max-width:700px){ .settings-row{ align-items:flex-start; flex-direction:column; } .settings-table{ display:block; overflow-x:auto; } .child-profile-actions{ align-items:stretch; flex-direction:column; } .child-profile-actions form,.child-profile-actions .lr-btn,.child-profile-actions form .lr-btn{ width:100%; } .setup-dialog-actions{ align-items:stretch; flex-direction:column; } .setup-dialog-actions .lr-btn,.setup-dialog-actions form,.setup-dialog-actions form .lr-btn{ width:100%; } }

/* ============================================================================
   DASHBOARD #101 — B5 feed empty / loading state additions
   ============================================================================ */
.feed-skeleton{ padding:var(--s4) 0; }
.skel{ background:#fff; border:1px solid var(--lr-divider); border-radius:15px; opacity:.6; margin-bottom:13px; }
.dash-empty{ display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s8) var(--s4); min-height:300px; }
.dash-empty-inner{ max-width:380px; }
.dash-empty-icon{ font-size:44px; line-height:1; }
.dash-empty h2{ font-size:22px; font-weight:650; margin:14px 0 8px; letter-spacing:-.3px; }
.dash-empty p{ font-size:15px; line-height:1.6; color:var(--lr-ink-2); margin:0 0 20px; }
.feed-card.safety{ border-color:rgba(180,35,24,.22); }
.feed-top .when{ font-size:12.5px; color:var(--lr-muted); font-variant-numeric:tabular-nums; }

/* Dashboard home — calm caregiver-first hierarchy */
.dashboard-page{ width:100%; max-width:1040px; margin:0 auto; }
.dash-empty.first-session{ min-height:calc(100vh - 230px); padding:32px 0 64px; }
.dash-empty .setup-card{
  position:relative;
  width:min(100%,760px);
  max-width:760px;
  padding:48px clamp(28px,6vw,72px) 46px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(74,124,89,.18);
  border-radius:24px;
  box-shadow:var(--sh-2);
}
.setup-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--brand),#8DC8A8 58%,var(--spark));
}
.adaptive-path{ display:flex; align-items:center; justify-content:center; width:156px; margin:0 auto 25px; }
.adaptive-path span{ width:13px; height:13px; flex:0 0 auto; border:3px solid #fff; border-radius:50%; background:var(--brand); box-shadow:0 0 0 1px rgba(14,124,82,.28); }
.adaptive-path span:nth-of-type(2){ background:#8DC8A8; }
.adaptive-path span:nth-of-type(3){ background:var(--spark); box-shadow:0 0 0 1px rgba(242,163,60,.28); }
.adaptive-path i{ width:52px; height:2px; background:linear-gradient(90deg,#9BD0B4,#D7DDB8); }
.dash-empty p.setup-eyebrow{ margin:0 0 8px; color:var(--lr-accent-strong); font-size:12px; font-weight:750; letter-spacing:.9px; text-transform:uppercase; }
.dash-empty .setup-card h2{ margin:0 0 14px; font-family:"Avenir Next",var(--lr-font); font-size:clamp(25px,3vw,34px); font-weight:720; letter-spacing:-.7px; }
.dash-empty .setup-copy{ max-width:600px; margin:0 auto 27px; color:var(--lr-ink-2); font-size:16px; line-height:1.65; text-wrap:pretty; }
.setup-copy strong{ color:var(--lr-ink); font-weight:700; }
.setup-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.setup-actions .lr-btn{ min-width:230px; text-decoration:none; }
.setup-help{ color:var(--lr-accent-strong); font-size:13.5px; font-weight:650; text-decoration:none; }
.setup-help:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Subject activity is a quiet summary, not another hero panel. */
.subject-breakdown{ margin:0 0 20px; overflow:hidden; background:#fff; border:1px solid var(--lr-divider); border-radius:17px; box-shadow:var(--sh-1); }
.subject-breakdown-title{ margin:0; padding:15px 18px 12px; border-bottom:1px solid var(--lr-divider); color:var(--lr-muted); font-size:12px; font-weight:750; letter-spacing:.7px; text-transform:uppercase; }
.subject-list{ margin:0; padding:0; list-style:none; }
.subject-row{ display:grid; grid-template-columns:minmax(150px,1fr) auto auto auto; gap:18px; align-items:center; min-height:50px; padding:11px 18px; border-top:1px solid var(--lr-divider); color:var(--lr-muted); font-size:12.5px; }
.subject-row:first-child{ border-top:0; }
.subject-name{ color:var(--lr-ink); font-size:14px; font-weight:680; text-transform:capitalize; }
.subject-goals{ color:var(--lr-accent-strong); font-weight:650; }
.subject-last{ font-variant-numeric:tabular-nums; }

/* Parent-facing learning-level guide */
.help-head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.help-head .backlink{ font-weight:620; }
.level-guide{ width:100%; max-width:900px; margin:0 auto 64px; color:var(--lr-ink); }
.level-guide-hero{ padding:clamp(28px,5vw,48px); background:#fff; border:1px solid rgba(74,124,89,.18); border-radius:22px; box-shadow:var(--sh-1); }
.level-guide-kicker{ margin:0 0 10px; color:var(--lr-accent-strong); font-size:12px; font-weight:780; letter-spacing:.9px; text-transform:uppercase; }
.level-guide-hero h2{ max-width:650px; margin:0 0 14px; font-family:"Avenir Next",var(--lr-font); font-size:clamp(27px,4vw,40px); line-height:1.16; letter-spacing:-.8px; }
.level-guide-hero>p:last-child{ max-width:690px; margin:0; color:var(--lr-ink-2); font-size:16px; line-height:1.65; }
.level-guide-section{ margin-top:20px; padding:28px; background:#fff; border:1px solid var(--lr-divider); border-radius:18px; }
.level-guide-section>h2{ margin:0 0 20px; font-size:20px; letter-spacing:-.2px; }
.level-guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.level-guide-item{ padding:18px; background:var(--lr-cream); border-radius:15px; }
.level-guide-item h3{ margin:15px 0 7px; font-size:15px; }
.level-guide-item p,.level-guide-section.quiet p{ margin:0; color:var(--lr-ink-2); font-size:14px; line-height:1.55; }
.level-chip{ display:inline-flex; min-height:27px; align-items:center; padding:0 10px; border-radius:var(--r-pill); background:#E9ECE8; color:var(--lr-ink-2); font-size:11.5px; font-weight:720; }
.level-chip.adaptive{ background:rgba(74,124,89,.13); color:var(--lr-accent-strong); }
.level-chip.standard{ background:rgba(242,163,60,.15); color:#87530E; }
.level-guide-section.quiet{ background:var(--lr-cream); }
.level-guide-note{ display:flex; gap:8px; margin-top:20px; padding:16px 18px; border-left:3px solid var(--lr-focal-edge); border-radius:0 12px 12px 0; background:#fff; color:var(--lr-ink-2); font-size:13.5px; line-height:1.5; }
.level-guide-note strong{ flex:0 0 auto; color:var(--lr-ink); }

@media (max-width:780px){
  .qstats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qstat:nth-child(3){ grid-column:1 / -1; }
  .dash-empty.first-session{ min-height:auto; padding:12px 0 48px; }
  .dash-empty .setup-card{ padding:38px 22px 34px; border-radius:20px; }
  .level-guide-grid{ grid-template-columns:1fr; }
  .level-guide-section{ padding:22px 18px; }
  .level-guide-note{ flex-direction:column; }
}

@media (max-width:560px){
  .subject-row{ grid-template-columns:1fr auto; gap:5px 12px; }
  .subject-goals,.subject-last{ grid-column:2; }
}

/* ============================================================================
   EMAIL SETUP (B8) — forwarding, sender routing, extraction table
   ============================================================================ */
.email-page{ max-width:980px; display:flex; flex-direction:column; gap:18px; padding-bottom:80px; overflow:auto; max-height:100%; }
.email-card{ background:#fff; border:1px solid var(--lr-divider); border-radius:18px; padding:22px 24px; box-shadow:var(--sh-1); }
.email-card h2{ margin:0 0 8px; font-size:22px; letter-spacing:-.2px; }
.email-card p{ line-height:1.55; }
.email-kicker{ margin:0 0 8px; color:var(--lr-accent); font-size:12px; font-weight:750; letter-spacing:1px; text-transform:uppercase; }
.email-hero h2{ margin:0 0 8px; font-size:28px; letter-spacing:-.4px; }
.forward-box{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0; padding:14px 16px; background:var(--lr-cream); border:1px solid #e6e2da; border-radius:14px; }
.forward-box code{ font-size:18px; font-weight:750; color:var(--lr-ink); }
.email-steps{ margin:10px 0 0; padding-left:22px; color:var(--lr-ink-2); line-height:1.7; }
.email-muted{ color:var(--lr-muted); margin:4px 0 14px; }
.email-alert{ padding:12px 14px; background:#fff0ed; border:1px solid #ffd0c7; border-radius:12px; color:#9f2a1d; font-weight:650; }
.route-form,.manual-rule{ display:grid; grid-template-columns:1fr 220px auto; gap:12px; align-items:center; padding:14px 0; border-top:1px solid var(--lr-divider); }
.sender-pill{ display:inline-flex; padding:7px 12px; border-radius:var(--r-pill); background:rgba(74,124,89,.12); color:var(--lr-accent); font-weight:700; }
.always-route{ grid-column:1 / -1; color:var(--lr-ink-2); font-size:14px; }
.rules-list{ margin-top:12px; border-top:1px solid var(--lr-divider); }
.rule-row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--lr-divider); }
.extract-card{ border-top:1px solid var(--lr-divider); padding-top:16px; margin-top:16px; }
.extract-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.directive{ background:var(--lr-cream); border-left:3px solid var(--lr-focal-edge); border-radius:0 12px 12px 0; padding:12px 14px; color:var(--lr-ink-2); }
.extract-table{ width:100%; border-collapse:collapse; margin-top:12px; background:#fff; }
.extract-table th,.extract-table td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--lr-divider); vertical-align:top; }
.extract-table th{ color:var(--lr-muted); font-size:12px; text-transform:uppercase; letter-spacing:.7px; }
.source-badge{ display:inline-flex; min-height:26px; align-items:center; padding:0 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; background:#E7EDE5; color:var(--lr-ink-2); }
.source-badge.found{ background:rgba(45,106,79,.12); color:var(--lr-ok); }
.source-badge.inferred{ background:rgba(180,83,9,.12); color:var(--lr-warn-strong); }
.source-badge.not-found{ background:#ECEEE9; color:var(--lr-muted); }
.source-badge.mandated{ background:rgba(74,124,89,.14); color:var(--lr-accent); }

/* B4 504/IEP upload + confirm */
.iep-page{ max-width:860px; }
.iep-eyebrow{ margin:0 0 4px; color:var(--lr-accent); font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.iep-muted{ color:var(--lr-muted); line-height:1.5; }
.iep-alert{ border-radius:12px; padding:12px 14px; margin-bottom:16px; font-weight:650; }
.iep-alert.ok{ background:#E7EDE5; color:var(--lr-ok); }
.iep-alert.bad{ background:#fff0ed; color:var(--lr-bad); }
.iep-panel{ background:#fff; border:1px solid var(--lr-divider); border-radius:18px; padding:22px 24px; margin-bottom:18px; box-shadow:var(--sh-1); }
.iep-panel h2{ margin:0 0 8px; font-size:20px; letter-spacing:-.2px; }
.iep-btn{ min-height:42px; border:1px solid var(--lr-divider); border-radius:12px; padding:0 16px; background:#fff; color:var(--lr-ink); font-weight:750; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.iep-btn.primary{ background:var(--lr-accent); border-color:var(--lr-accent); color:#fff; }
.iep-btn.ghost{ background:#fff; color:var(--lr-ink); }
.iep-primary-choice{ min-height:48px; padding:0 20px; box-shadow:var(--sh-1); }
.iep-form{ display:grid; gap:14px; }
.iep-field-label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--lr-ink-2); }
.iep-dropzone{ display:flex; align-items:center; gap:16px; border:2px dashed #c4ccc2; border-radius:18px; background:#fff; padding:22px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.iep-dropzone:hover{ border-color:var(--lr-accent); background:var(--lr-cream); }
.iep-dropzone .ic{ font-size:42px; flex:0 0 auto; }
.iep-dropzone-btn{ display:inline-flex; min-height:34px; align-items:center; margin-top:10px; border-radius:10px; padding:0 13px; background:var(--lr-accent); color:#fff; font-size:13px; font-weight:800; }
.iep-form input[type="file"]{ position:absolute; width:1px; height:1px; opacity:.01; overflow:hidden; }
.iep-form input[type="file"]:focus-visible + .iep-dropzone{ outline:3px solid var(--lr-accent); outline-offset:3px; border-color:var(--lr-accent); }
.iep-dropzone.is-dragover{ border-color:var(--lr-accent); background:var(--lr-cream); }
.iep-selected-file{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--lr-divider); border-radius:12px; padding:11px 14px; margin-top:4px; font-weight:700; color:var(--lr-ink); }
.iep-selected-file[hidden]{ display:none; }
.iep-selected-name{ flex:1; word-break:break-all; }
.iep-selected-clear{ border:0; background:transparent; cursor:pointer; font-size:15px; color:var(--lr-ink-2); line-height:1; padding:2px 6px; }
.iep-file-status:not(:empty){ margin:6px 0 0; color:var(--lr-bad); font-weight:650; }
.iep-btn.primary:disabled{ opacity:.5; cursor:not-allowed; }
.iep-reassure{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--lr-ink-2); background:rgba(74,124,89,.08); border-radius:11px; padding:13px 15px; }
.iep-extracting-state{ display:none; }
.iep-page.is-extracting .iep-extracting-state{ display:block; }
.iep-filebar{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--lr-divider); border-radius:12px; padding:12px 15px; margin-top:12px; }
.iep-prog{ height:8px; border-radius:4px; background:#e3e7e2; overflow:hidden; flex:1; }
.iep-prog > i{ display:block; height:100%; width:66%; background:var(--lr-accent); border-radius:4px; }
.iep-source-legend{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.iep-grid{ display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.iep-row{ display:grid; grid-template-columns:110px 1fr; gap:14px; padding:14px; border:1px solid var(--lr-divider); border-radius:14px; background:var(--lr-cream); }
.iep-include{ display:flex; align-items:start; gap:8px; font-weight:700; color:var(--lr-ink-2); }
.iep-include input{ width:20px; height:20px; accent-color:var(--lr-accent); }
.iep-row-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.iep-edit-label{ color:var(--lr-accent); font-size:13px; font-weight:700; }
.iep-main textarea{ width:100%; border:1px solid var(--lr-divider); border-radius:12px; padding:10px 12px; font:inherit; color:var(--lr-ink); resize:vertical; box-sizing:border-box; }
.iep-empty{ color:var(--lr-ink-2); margin-bottom:0; }
.iep-success-mark{ font-size:38px; text-align:center; margin-bottom:8px; }
.active-acc-list{ background:rgba(74,124,89,.06); border:1px solid rgba(45,106,79,.22); border-radius:14px; padding:6px 18px; margin-bottom:14px; }
.active-li{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--lr-divider); font-size:15px; color:var(--lr-ink); }
.active-li:first-child{ border-top:0; }
.active-li .ok{ color:var(--lr-accent); flex:0 0 auto; }
.active-li p{ margin:4px 0 0; color:var(--lr-ink-2); line-height:1.45; }
@media (max-width:780px){ .email-page{ max-width:none; } .route-form,.manual-rule{ grid-template-columns:1fr; } .forward-box{ align-items:flex-start; flex-direction:column; } .iep-row{ grid-template-columns:1fr; } .iep-dropzone{ align-items:flex-start; flex-direction:column; } }