/* Landing Kit styles. Layout: single-column phone app shell, sticky top bar, fixed bottom tab bar, one view at a time. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin-wght-normal.woff2) format("woff2")}

:root{
  /* Lit Robot palette: cream, sage, terracotta, dusty blue, mustard */
  --bg:#F7F1E5; --surface:#FFFCF6; --sunk:#EFE6D5; --ink:#2E2A24; --muted:#6A6152; --line:#E5DAC6;
  --accent:#4E7A5E; --accent-ink:#FFFFFF; --signal:#E2B24A; --signal-ink:#2E2A24;
  --danger:#B42318; --danger-ink:#FFFFFF; --ok:#4E7A5E;
  --c-out:#B65A36; --c-id:#4C7096; --c-move:#4E7A5E; --c-money:#E2B24A; --c-head:#A85A6A; --c-own:#7A6A55;
  --c-out-ink:#FFFFFF; --c-id-ink:#FFFFFF; --c-move-ink:#FFFFFF; --c-money-ink:#2E2A24; --c-head-ink:#FFFFFF; --c-own-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(60,45,25,.06),0 4px 14px rgba(60,45,25,.07);
  --display:"Nunito",ui-rounded,"SF Pro Rounded",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1E1B17; --surface:#29251F; --sunk:#332E27; --ink:#F3EDE2; --muted:#B5AB9A; --line:#3D372F;
  --accent:#8DBB98; --accent-ink:#14231A; --signal:#E8B85A; --signal-ink:#1E1B17;
  --danger:#FF8A7A; --danger-ink:#2A0907; --ok:#8DBB98;
  --c-out:#E39472; --c-id:#8FB0D4; --c-move:#8DBB98; --c-money:#E8B85A; --c-head:#E2A0AC; --c-own:#CDB894;
  --c-out-ink:#1E1B17; --c-id-ink:#1E1B17; --c-move-ink:#1E1B17; --c-money-ink:#1E1B17; --c-head-ink:#1E1B17; --c-own-ink:#1E1B17;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#1E1B17; --surface:#29251F; --sunk:#332E27; --ink:#F3EDE2; --muted:#B5AB9A; --line:#3D372F;
  --accent:#8DBB98; --accent-ink:#14231A; --signal:#E8B85A; --signal-ink:#1E1B17;
  --danger:#FF8A7A; --danger-ink:#2A0907; --ok:#8DBB98;
  --c-out:#E39472; --c-id:#8FB0D4; --c-move:#8DBB98; --c-money:#E8B85A; --c-head:#E2A0AC; --c-own:#CDB894;
  --c-out-ink:#1E1B17; --c-id-ink:#1E1B17; --c-move-ink:#1E1B17; --c-money-ink:#1E1B17; --c-head-ink:#1E1B17; --c-own-ink:#1E1B17;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:16px;-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px)}
html.large{font-size:19px}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.5;margin:0}
.shell{max-width:600px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 130px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
h2{font-size:1.65rem;font-weight:800}
h3{font-size:1.12rem;font-weight:650}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.eyebrow{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;gap:8px;padding-block:12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.brand svg{flex:none}
.brand b{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;white-space:nowrap}
.iconbtn{background:var(--surface);border:1px solid var(--line);border-radius:999px;width:42px;height:42px;display:grid;place-content:center;color:var(--ink);flex:none}
.iconbtn svg{width:20px;height:20px}
.helpnow{background:var(--danger);color:var(--danger-ink);border:0;border-radius:999px;padding:10px 14px;font-weight:700;font-size:.95rem;white-space:nowrap;flex:none}

/* bottom nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav.tabs .row{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs button{background:none;border:0;padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.78rem;font-weight:700;color:var(--muted);min-width:0}
nav.tabs button svg{width:24px;height:24px}
nav.tabs button[aria-current="page"]{color:var(--accent)}
nav.tabs button[aria-current="page"] .pip{background:var(--accent)}
.pip{width:22px;height:4px;border-radius:4px;background:transparent;margin-bottom:2px}

section.view{display:flex;flex-direction:column;gap:18px}
.intro{display:flex;flex-direction:column;gap:6px}
.block{display:flex;flex-direction:column;gap:12px}
.block>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

.note{background:var(--sunk);border-radius:var(--r);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.note svg{flex:none;margin-top:2px;color:var(--accent)}

/* buttons */
.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:700;font-size:.95rem;line-height:1.2}
.btn.light{background:var(--accent-ink);color:var(--accent)}
.btn.ghost{background:transparent;border:2px solid currentColor}
.btn.solid{background:var(--accent);color:var(--accent-ink)}
.btn.warn{background:var(--danger);color:var(--danger-ink)}
.btn.plain{background:var(--sunk);color:var(--ink)}
.btn.wide{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* next-up */
.next{background:var(--accent);color:var(--accent-ink);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.next .eyebrow{color:inherit;opacity:.85}
.next p.big{font-family:var(--display);font-weight:650;font-size:1.3rem;line-height:1.25}

/* checklists */
.lists{display:flex;flex-direction:column;gap:10px}
details.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.list>summary{list-style:none;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;cursor:pointer}
details.list>summary::-webkit-details-marker{display:none}
.count{font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;color:var(--muted)}
.bar{grid-column:1/-1;height:6px;background:var(--sunk);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .25s}
.done .count{color:var(--ok)}
.items{list-style:none;margin:0;padding:0 8px 10px;display:flex;flex-direction:column}
.items li{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-top:1px solid var(--line)}
input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;border:2px solid var(--muted);border-radius:7px;margin:0;display:grid;place-content:center;background:var(--surface);cursor:pointer}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--accent-ink);border-bottom:3px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px)}
.items label{flex:1;min-width:0;cursor:pointer}
.items label span{display:block;font-size:.88rem;color:var(--muted)}
.items input:checked+label>b{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.del{background:none;border:0;color:var(--muted);padding:2px 6px;font-size:.85rem;text-decoration:underline}
.addrow{display:flex;gap:8px;padding:10px 8px 4px;border-top:1px solid var(--line)}
.addrow input{flex:1;min-width:0}
.listnote{padding:0 16px 12px;font-size:.88rem;color:var(--muted)}

/* forms */
input[type=text],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],select{font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
input:focus,select:focus{border-color:var(--accent);outline:none}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label,.field{font-weight:700;font-size:.9rem;display:flex;flex-direction:column;gap:5px;min-width:0}
.err{color:var(--danger);font-size:.9rem;font-weight:700}

/* help */
.sos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sos .card{border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sos .big{background:var(--danger);color:var(--danger-ink);grid-column:1/-1}
.sos .big .num{font-size:2.6rem}
.sos .alt{background:var(--surface);border:1px solid var(--line)}
.num{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all;line-height:1.1;overflow-wrap:anywhere}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.actions a,.actions button{font-size:.88rem;font-weight:700;padding:8px 13px;border-radius:8px;text-decoration:none;border:0;display:inline-block}
.big .actions a,.big .actions button{background:var(--danger-ink);color:var(--danger)}
.actions a{background:var(--accent);color:var(--accent-ink)}
.actions button{background:var(--sunk);color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.9rem}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.group{display:flex;flex-direction:column;gap:8px}
.group h3{padding-top:6px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.svc .who b{font-size:1.02rem}
.svc .who p{font-size:.9rem;color:var(--muted)}
.svc .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.svc .num{font-size:1.3rem}
.tag{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.tag.h24{background:var(--signal);color:var(--signal-ink)}
.tag.soon{background:var(--accent);color:var(--accent-ink)}
.tag.now{background:var(--danger);color:var(--danger-ink)}

/* people */
.people,.appts{display:flex;flex-direction:column;gap:8px}
.person,.appt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;gap:12px}
.avatar{flex:none;width:42px;height:42px;border-radius:50%;background:var(--sunk);display:grid;place-content:center;font-family:var(--display);font-weight:800;color:var(--accent)}
.person .who,.appt .who{flex:1;min-width:0}
.person .who b,.appt .who b{display:block;overflow-wrap:anywhere}
.person .num{font-size:1.1rem}
.side{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.side a,.side button{font-size:.82rem;font-weight:700;padding:6px 10px;border-radius:8px;border:0;text-decoration:none}
.side a,.side .go{background:var(--accent);color:var(--accent-ink)}
.side button{background:var(--sunk);color:var(--ink)}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:18px;text-align:center;color:var(--muted)}
.datebox{flex:none;width:52px;text-align:center;border-radius:10px;background:var(--sunk);padding:6px 0;line-height:1.1}
.datebox small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.datebox b{font-family:var(--display);font-size:1.4rem;font-weight:800}
.appt.past{opacity:.7}

/* money */
.money{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:14px}
.seg{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;border-radius:8px;padding:7px 14px;font-weight:700;font-size:.9rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.money-in{display:flex;flex-direction:column;gap:5px}
.dollar{position:relative}
.dollar::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.dollar input{padding-left:26px;font-variant-numeric:tabular-nums}
.payrows{display:flex;flex-direction:column;gap:8px}
.payrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.payrow .x{background:var(--sunk);border:0;border-radius:8px;width:36px;height:36px;font-size:1.1rem;color:var(--muted)}
.sum{border-top:2px solid var(--line);padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-variant-numeric:tabular-nums}
.sum .total{font-family:var(--display);font-weight:800;font-size:1.5rem}
.sum .neg{color:var(--danger)}
.sum .pos{color:var(--ok)}
.perday{grid-column:1/-1;background:var(--sunk);border-radius:10px;padding:10px 12px;font-weight:700}

/* tips */
.tips{display:flex;flex-direction:column;gap:10px}
.tip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.tip ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.tip .tag{align-self:flex-start}

/* settings */
.setting{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.confirm{background:var(--sunk);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.pinfields{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* overlays: welcome + lock */
.overlay{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.overlay .inner{max-width:460px;min-height:100%;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:40px 32px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.slide{display:flex;flex-direction:column;gap:12px}
.slide h2{font-size:2rem}
.slide .art{width:72px;height:72px;border-radius:20px;background:var(--accent);display:grid;place-content:center;color:var(--accent-ink)}
.slide .art svg{width:38px;height:38px}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent);width:22px;border-radius:6px}
.pinshow{display:flex;gap:14px;justify-content:center;padding:8px 0}
.pinshow i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink)}
.pinshow i.on{background:var(--ink)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;width:100%;margin:0 auto}
.keypad button{height:64px;border-radius:16px;border:1px solid var(--line);background:var(--surface);font-family:var(--display);font-size:1.6rem;font-weight:650}
.keypad button.fn{font-family:var(--body);font-size:.95rem;background:transparent;border-color:transparent}
.center{text-align:center}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:700;font-size:.92rem;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:380px){.form .two,.pinfields{grid-template-columns:1fr}.sos{grid-template-columns:1fr}.brand b{font-size:1.05rem}.helpnow{padding:10px 11px}}
.mb8{margin-bottom:8px}.mt10{margin-top:10px}#addPay{margin-top:10px;align-self:flex-start}
.logo-ring{stroke:var(--accent)}.logo-key{stroke:var(--signal)}
.privacy .top{margin-bottom:20px}.privacy .view{padding-bottom:40px}.privacy a.btn{text-decoration:none}
/* header keeps fixed sizes so Large text never crowds it */
.top .brand b{font-size:19px}.top .helpnow{font-size:15px;padding:10px 14px}.top .iconbtn{width:42px;height:42px}
@media (max-width:380px){.top .brand b{font-size:16px}.top .helpnow{padding:10px 11px;font-size:14px}.top .iconbtn{width:38px;height:38px}.top{gap:6px}}
@media (max-width:340px){.top .brand b{display:none}}
.lbl{display:block;font-weight:700;font-size:.9rem}
.sos .big .eyebrow{color:inherit;opacity:.9}
.appt{flex-wrap:wrap}
.appt .side{flex-direction:row;flex-basis:100%;justify-content:flex-end;flex-wrap:wrap}
.appt .who b{overflow-wrap:normal}

/* ================= Version 1.1: Easy mode, read aloud, My day, Learn, calm plan ================= */
.sym{width:24px;height:24px;flex:none}
.sym.big{width:56px;height:56px;color:var(--accent)}
html.easy{font-size:19px}
html.easy.large{font-size:21px}
html.easy .btn{padding:14px 18px;font-size:1rem}
html.easy .items li{padding:14px 8px}
html.easy .note{font-size:.95rem}

/* read-aloud buttons: only when Read aloud is on (welcome ones always show) */
.sp{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--accent);display:inline-grid;place-content:center;padding:0}
.sp .sym{width:22px;height:22px}
.sp.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
html:not(.read) .sp:not(.always){display:none}
html.nospeech .sp{display:none}
.btn.sp{width:auto;height:auto;display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:11px 15px}
.btn.sp .sym{width:20px;height:20px}
.btn.sp.on{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.steptop{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Easy mode: one step at a time */
.easysort{display:flex;flex-direction:column;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.tile .sym{width:30px;height:30px;color:var(--accent)}
.tile b{font-size:.8rem;line-height:1.2;overflow-wrap:anywhere}
.tile .count{font-size:.78rem}
.tile[aria-pressed="true"]{border-color:var(--accent);background:var(--sunk)}
.tile.full .count{color:var(--ok)}
.stepcard{background:var(--surface);border:2px solid var(--accent);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.stepcard h3{font-size:1.5rem;font-weight:800}
.stepcard .sym.big{width:72px;height:72px}
.stepcard.alldone{border-color:var(--ok)}
.btn.big{font-size:1.05rem;padding:15px 20px;display:inline-flex;align-items:center;gap:8px}
.btn .sym{width:20px;height:20px}
.bigrow{gap:10px}
.stepnav{width:100%;justify-content:space-between}
.stepnav .btn{display:inline-flex;align-items:center;gap:6px}
.stepnav .btn:disabled{opacity:.4;cursor:default}
.donebadge{display:inline-flex;align-items:center;gap:6px;background:var(--ok);color:var(--surface);font-weight:700;border-radius:999px;padding:4px 12px}
.donebadge .sym{width:18px;height:18px}
.easyadd{border-top:0;padding:0}

/* My day */
.day{display:flex;flex-direction:column;gap:8px}
.dayhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.daygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.daystep{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;font-weight:700;font-size:.92rem;min-width:0}
.daystep span{min-width:0;overflow-wrap:anywhere}
.daystep .sym{color:var(--accent)}
.daystep[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.daystep[aria-pressed="true"] .sym{color:var(--accent-ink)}
.daystep[aria-pressed="true"] span{text-decoration:line-through;text-decoration-thickness:2px}
#dayEditBtn{align-self:flex-start}
.pick{display:flex;align-items:center;gap:10px;padding:6px 0;font-weight:400;font-size:1rem;cursor:pointer}
.pick .sym{color:var(--accent)}
.pick span{flex:1;min-width:0}

/* Learn */
.seg3{display:flex;width:100%}
.seg3 button{flex:1;padding:9px 6px;font-size:.85rem;line-height:1.2}
.cards{display:flex;flex-direction:column;gap:10px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;align-items:center;gap:14px;text-align:left;width:100%}
.gcard>.sym{width:34px;height:34px;color:var(--accent)}
.gcard .gtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gcard .chev{color:var(--muted)}
.backbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
.guide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.guide h4{font-family:var(--display);font-size:1.05rem;margin:6px 0 0}
.ghead{display:flex;align-items:center;gap:14px}
.ghead h3{font-size:1.4rem}
.readall{align-self:flex-start}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.lrow:first-child{border-top:0}
.lrow>.sym{color:var(--accent)}
.lrow>span{flex:1;min-width:0}
.steps{counter-reset:st}
.steps .lrow{counter-increment:st}
.steps .lrow::before{content:counter(st);flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-content:center;font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.say .lrow>span{font-style:italic}
.guide .note{display:block}
.conv{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:88%;border-radius:16px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.bubble .who2{grid-column:1/-1;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.bubble p{min-width:0}
.bubble.you{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start;background:var(--sunk);color:var(--ink);border-bottom-left-radius:4px}
.bubble .sp{width:38px;height:38px}

/* Calm plan */
.calmcard{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.calmcard.empty2{align-items:flex-start}
.chipset{display:flex;flex-wrap:wrap;gap:6px}
.tag.big2{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:5px 10px;text-transform:none;letter-spacing:0}
.tag.big2 .sym{width:16px;height:16px}
.quote{font-family:var(--display);font-weight:650;font-size:1.15rem;border-left:4px solid var(--signal);padding-left:12px}
.calmcall{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--sunk);border-radius:12px;padding:10px 12px;font-weight:700}
.calmcall .actions{margin-top:0}
.pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pickbtn{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;gap:8px;text-align:left;font-size:.88rem;font-weight:700;min-width:0}
.pickbtn span{min-width:0;overflow-wrap:anywhere}
.pickbtn .sym{color:var(--accent)}
.pickbtn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.pickbtn[aria-pressed="true"] .sym{color:var(--accent-ink)}
.breathe{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0}
.bcircle{width:140px;height:140px;border-radius:50%;background:var(--accent);opacity:.85;transform:scale(.55);transition-property:transform;transition-timing-function:ease-in-out}
.bcircle.in,.bcircle.hold{transform:scale(1)}
.bcircle.out{transform:scale(.55)}
.blabel{font-family:var(--display);font-weight:800;font-size:1.5rem}
.bcount{font-size:1.2rem;font-variant-numeric:tabular-nums;color:var(--muted);min-height:1.5em}

@media (max-width:380px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.daygrid,.pickgrid{grid-template-columns:1fr}.seg3 button{font-size:.78rem}}
.btn>.sym{width:20px;height:20px;margin-right:8px;vertical-align:-4px}
.btn.big>.sym,.btn.sp>.sym,.stepnav .btn>.sym,.backbtn>.sym{margin-right:0}
.stepnav .btn>.sym:last-child{margin-left:0}

/* ================= Version 1.2: warmer Lit Robot look ================= */
/* each list carries its own colour: --lc (fill) and --lci (text on fill) */
[data-c="out"]{--lc:var(--c-out);--lci:var(--c-out-ink)}
[data-c="id"]{--lc:var(--c-id);--lci:var(--c-id-ink)}
[data-c="move"]{--lc:var(--c-move);--lci:var(--c-move-ink)}
[data-c="money"]{--lc:var(--c-money);--lci:var(--c-money-ink)}
[data-c="head"]{--lc:var(--c-head);--lci:var(--c-head-ink)}
[data-c="own"]{--lc:var(--c-own);--lci:var(--c-own-ink)}

h2{font-weight:900;letter-spacing:-.01em}
h3{font-weight:800}
.brand b{font-weight:900}
.btn{border-radius:14px;font-family:var(--display);font-weight:800}
.top{border-bottom:0}

/* cards: soft shadow instead of hard lines */
details.list,.form,.svc,.person,.appt,.tip,.setting,.money,.guide,.gcard,.calmcard,.stepcard,.tile,.daystep,.pickbtn,.sos .alt{border-color:transparent;box-shadow:var(--shadow)}
.daystep,.pickbtn,.tile{border-width:2px}

/* greeting + progress ring */
.hello{display:flex;align-items:center;gap:16px}
.hello .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hello h2{font-size:2rem}
.ring{flex:none;width:84px;height:84px;position:relative}
.ring svg{width:84px;height:84px;transform:rotate(-90deg)}
.ring .track{stroke:var(--sunk)}
.ring .fill{stroke:var(--accent);transition:stroke-dashoffset .6s ease}
.ring b{position:absolute;inset:0;display:grid;place-content:center;font-family:var(--display);font-weight:900;font-size:1.25rem;font-variant-numeric:tabular-nums}
.ring small{display:block;text-align:center;font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:-2px}

/* coloured lists */
.chipicon{width:40px;height:40px;border-radius:12px;background:var(--lc);color:var(--lci);display:grid;place-content:center;flex:none}
.chipicon .sym{width:22px;height:22px}
details.list>summary{grid-template-columns:auto 1fr auto}
details.list>summary .bar{grid-column:2/-1}
details.list>summary .chipicon{grid-row:1/3}
.bar i{background:var(--lc,var(--accent))}
details.list[open]{box-shadow:var(--shadow),inset 4px 0 0 var(--lc)}
.items input[type=checkbox]:checked{background:var(--lc,var(--accent));border-color:var(--lc,var(--accent))}
.items input[type=checkbox]:checked::after{border-color:var(--lci,var(--accent-ink))}
.next{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink));border-radius:22px;position:relative;overflow:hidden}
.next .btn.light{background:var(--surface);color:var(--ink)}
.next::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:currentColor;opacity:.08}
.next .bigicon{position:absolute;right:16px;top:16px;opacity:.9}
.next .bigicon .sym{width:40px;height:40px}
.next p.big{padding-right:52px}

/* Easy mode tiles and step card in list colours */
.tile .sym{color:var(--lc)}
.tile[aria-pressed="true"]{border-color:var(--lc);background:var(--surface)}
.tile .count{font-weight:700}
.stepcard{border-color:var(--lc,var(--accent));border-width:3px;border-radius:24px}
.stepcard .sym.big{color:var(--lc,var(--accent))}
.stepcard .btn.solid{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink))}

/* nav: active tab gets a soft pill */
nav.tabs{background:var(--surface);border-top:0;box-shadow:0 -4px 18px rgba(60,45,25,.08)}
nav.tabs button{font-family:var(--display);font-weight:800}
nav.tabs .pip{display:none}
nav.tabs button svg{padding:3px 14px;width:52px;height:30px;border-radius:999px;box-sizing:border-box}
nav.tabs button[aria-current="page"] svg{background:var(--sunk)}

/* learn cards and welcome get colour chips */
.gcard>.sym:first-child{width:46px;height:46px;padding:10px;border-radius:14px;background:var(--lc,var(--sunk));color:var(--lci,var(--accent))}
.slide .art{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink));border-radius:26px;width:84px;height:84px}
.slide .art svg{width:44px;height:44px}
.overlay{background:var(--bg)}

/* celebration */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:3px;animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.guide .ghead .sym.big{color:var(--lc,var(--accent))}
.guide .steps .lrow::before{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink))}
.guide .lrow>.sym{color:var(--lc,var(--accent))}
.guide .readall{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink))}
.bubble.you{background:var(--lc,var(--accent));color:var(--lci,var(--accent-ink))}

/* ================= Version 1.3: Crow artwork, clearer Hide, ring fix ================= */
/* progress ring: fixed pixel sizes so bigger text settings can't push the number outside */
.ring,.ring svg{width:92px;height:92px}
.ring b{font-size:20px;line-height:1;letter-spacing:-.02em}
.ring b.full{font-size:17px}
.ring small{font-size:10px;margin-top:3px;line-height:1}
html.easy .hello h2{font-size:1.8rem}

/* Hide button: says what it does */
.hidebtn{flex:none;display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:800;font-size:15px}
.hidebtn svg{width:20px;height:20px}
@media (max-width:400px){.top .brand b{display:none}.hidebtn{padding:0 10px}}

/* Crow artwork */
.banner{display:block;width:100%;max-width:100%;height:170px;object-fit:cover;object-position:50% 45%;border-radius:22px;box-shadow:var(--shadow)}
.banner.desk{object-position:50% 40%}
html.easy .banner{height:150px}
.crowdisc{display:grid;place-items:end center;background:#F3EADA;border-radius:50%;overflow:hidden;flex:none}
.crowdisc img{width:82%;height:auto;max-width:none;margin-bottom:-2%}
.slide .crowdisc{width:150px;height:150px}
.alldone .crowdisc,.next .crowdisc{width:96px;height:96px}
.next .crowdisc{position:absolute;right:14px;bottom:14px;width:72px;height:72px}
.next.done p.big{padding-right:84px}
.calmcard .scene{width:100%;max-width:100%;height:140px;object-fit:cover;object-position:50% 40%;border-radius:14px}
.appt-empty{display:flex;align-items:center;gap:14px;text-align:left}
.appt-empty img{width:88px;height:88px;object-fit:cover;border-radius:14px;flex:none}
.cheer{position:fixed;inset:0;z-index:35;display:grid;place-items:center;background:rgba(30,27,23,.35);padding:24px}
.cheercard{background:var(--surface);border-radius:26px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 10px 40px rgba(0,0,0,.25);animation:pop .35s ease-out}
.cheercard .crowdisc{width:150px;height:150px}
.cheercard p{font-family:var(--display);font-weight:900;font-size:1.4rem;text-align:center}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.cheercard{animation:none}}

/* ================= Version 1.4: home greeting with Crow, uncropped artwork ================= */
/* scenes are pre-cropped to 3:2 around Crow, so nothing gets cut off */
.banner,.calmcard .scene{height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%}
html.easy .banner{height:auto}
/* cut-out Crow: cream circle behind, picture never clipped (head can pop above the circle) */
.crowdisc{position:relative;display:block;background:none;border-radius:0;overflow:visible;flex:none;aspect-ratio:5/6;height:auto}
.crowdisc::before{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:1;border-radius:50%;background:#F3EADA}
.crowdisc img{position:relative;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:50% 100%;margin:0}
.slide .crowdisc{width:150px;height:auto}
.cheercard .crowdisc{width:150px;height:auto}
.alldone .crowdisc{width:100px;height:auto}
.next .crowdisc{width:72px;height:auto}
/* home greeting */
.hello{display:flex;align-items:center;gap:14px}
.hello .crowdisc{width:96px}
.hello h2{font-size:2.1rem;line-height:1.05}
.hello .lead{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--accent)}
.progress{display:flex;align-items:center;gap:12px}
.ptrack{flex:1;height:12px;border-radius:999px;background:var(--sunk);overflow:hidden}
.ptrack i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .6s ease}
.progress b{flex:none;font-family:var(--display);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:360px){.hello .crowdisc{width:80px}.hello h2{font-size:1.8rem}}

/* ================= Version 1.5: website links, wrapped filter buttons, gentle motion ================= */
.itembody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.weblinks{display:flex;flex-wrap:wrap;gap:6px}
.weblink{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:6px 10px 6px 12px;border-radius:999px;background:var(--sunk);color:var(--ink);font-size:.85rem;font-weight:700;text-decoration:none;line-height:1.25}
.weblink span{min-width:0;overflow-wrap:anywhere}
.weblink .sym{width:16px;height:16px;flex:none;color:var(--accent)}
.next .weblink{background:var(--surface);color:var(--ink)}
.stepcard .weblink{font-size:.95rem;padding:9px 12px 9px 14px}

/* filter buttons wrap onto a second line so none are hidden off the edge */
.chips{flex-wrap:wrap;overflow:visible;padding-bottom:0}

/* motion: small, calm, and switched off for anyone who has reduced motion on */
@media (prefers-reduced-motion: no-preference){
  .btn,.tile,.gcard,.daystep,.pickbtn,.chips button,.weblink,.iconbtn,.hidebtn,.helpnow,nav.tabs button,.sp,.actions a,.actions button,.side a,.side button{transition:transform .12s ease,background-color .2s ease,box-shadow .2s ease}
  .btn:active,.tile:active,.gcard:active,.daystep:active,.pickbtn:active,.chips button:active,.weblink:active,.iconbtn:active,.hidebtn:active,.helpnow:active,.sp:active,.actions a:active,.actions button:active,.side a:active,.side button:active{transform:scale(.96)}
  nav.tabs button:active svg{transform:scale(.9)}
  nav.tabs button svg{transition:background-color .25s ease,transform .12s ease}

  section.view.enter{animation:viewIn .28s ease-out both}
  section.view.enter .banner{animation:bannerIn .7s ease-out both}
  @keyframes viewIn{from{opacity:0;transform:translateY(8px)}}
  @keyframes bannerIn{from{transform:scale(1.04);opacity:.6}}

  input[type=checkbox]:checked::after{animation:tickPop .25s ease-out}
  @keyframes tickPop{0%{transform:rotate(-45deg) translate(1px,-1px) scale(.2)}70%{transform:rotate(-45deg) translate(1px,-1px) scale(1.25)}100%{transform:rotate(-45deg) translate(1px,-1px) scale(1)}}
  .daystep[aria-pressed="true"] .sym,.pickbtn[aria-pressed="true"] .sym{animation:iconPop .3s ease-out}
  @keyframes iconPop{50%{transform:scale(1.3)}}

  .next,.stepcard{animation:cardIn .3s ease-out both}
  @keyframes cardIn{from{opacity:0;transform:translateY(6px) scale(.98)}}

  .hello .crowdisc img,.slide .crowdisc img{animation:bob 4.5s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}
  .hello .crowdisc.hop img{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
  @keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(4deg)}100%{transform:translateY(0)}}
  .slide{animation:viewIn .3s ease-out both}
}
.hello .crowdisc{cursor:pointer}

/* ================= Version 1.6: decluttered layout ================= */
.addbtn{align-self:flex-start}
.footnote{text-align:center;padding:4px 8px}
.listhead{margin-top:6px}
/* help lines: one compact card each, the number is the call button */
.svc{padding:12px 14px;gap:6px}
.svc .who b{font-size:1rem}
.svc .who p{font-size:.88rem;line-height:1.4}
.callrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.callpill{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:7px 14px 7px 11px;text-decoration:none}
.callpill .sym{width:17px;height:17px}
.callpill .num{font-size:1.02rem;color:inherit;letter-spacing:0}
.copylink{background:none;border:0;padding:4px 2px;font-size:.85rem;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.callrow .meta{margin:0;gap:6px}
/* urgent cards: 000 full width, the other two side by side */
.sos{grid-template-columns:1fr 1fr}
.sos .alt{padding:12px}
.sos .alt .num{font-size:1.15rem}
.sos .alt .small{font-size:.78rem}
.sos .alt .actions{gap:6px}
.sos .alt .actions a,.sos .alt .actions button{padding:7px 10px;font-size:.82rem}
@media (max-width:380px){.sos{grid-template-columns:1fr 1fr}}
/* calm plan teaser: small picture beside the words */
.calmcard.compact{flex-direction:row;align-items:center;gap:14px}
.calmcard.compact .thumb{width:96px;height:96px;object-fit:cover;object-position:45% 35%;border-radius:14px;flex:none}
.calmcard.compact .ctext{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.calmcard.compact .ctext p{font-size:.9rem}
/* settings: grouped rows inside three cards */
.setrow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.setting h3+.setrow{border-top:0;padding-top:2px}
.setrow .row{gap:8px}
/* maker credit */
.maker{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.makerlogo{max-width:160px;height:auto}
.makerline{font-family:var(--display);font-weight:800}
details.helpgroup{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
details.helpgroup>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:15px 16px;cursor:pointer}
details.helpgroup>summary::-webkit-details-marker{display:none}
details.helpgroup>summary h3{flex:1;min-width:0;font-size:1.05rem}
details.helpgroup>summary .count{flex:none}
details.helpgroup>summary .chev{color:var(--muted);transition:transform .2s ease}
details.helpgroup[open]>summary .chev{transform:rotate(90deg)}
details.helpgroup>.group{padding:0 10px 10px;gap:8px}
details.helpgroup .svc{box-shadow:none;background:var(--bg)}
#services{display:flex;flex-direction:column;gap:8px}
@media (max-width:380px){.daygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:330px){.daygrid{grid-template-columns:1fr}}
.daystep{padding:9px 10px;font-size:.88rem}

/* ================= Version 1.7: pop pass. One bright marigold, a night-blue home banner, paper grain ================= */
:root{ --pop:#F5A623; --pop-ink:#2E2A24; --night:#1E2A47; --night-2:#2B3B63; --night-ink:#F7F1E5; --night-soft:#C9CEDB }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --pop:#F7B23B; --night:#27355A; --night-2:#34477A }}
:root[data-theme="dark"]{ --pop:#F7B23B; --night:#27355A; --night-2:#34477A }

/* paper grain over everything, very faint, so the app matches the illustrations */
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.05}}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.05}

/* night-blue home banner: lo-fi evening, lamp glow behind Crow */
.heroband{position:relative;overflow:hidden;border-radius:26px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;color:var(--night-ink);
  background:radial-gradient(120% 90% at 12% 18%,rgba(245,166,35,.28) 0,rgba(245,166,35,0) 45%),linear-gradient(160deg,var(--night-2) 0%,var(--night) 70%);box-shadow:0 6px 22px rgba(30,42,71,.28)}
.heroband::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06)}
.heroband .eyebrow{color:var(--night-soft)}
.heroband h2{color:var(--night-ink)}
.heroband .lead{color:var(--pop)}
.heroband #helloText{color:var(--night-soft)}
.heroband .crowdisc::before{background:#F3EADA;box-shadow:0 0 0 6px rgba(245,166,35,.18)}
.heroband .ptrack{background:rgba(255,255,255,.14)}
.heroband .ptrack i{background:var(--pop)}
.heroband .progress b{color:var(--night-ink)}
.heroband>*{position:relative;z-index:1}

/* marigold = the one thing to do next. Used sparingly so it stands out */
.ptrack i{background:var(--pop)}
.next{background:var(--surface);color:var(--ink);border-left:6px solid var(--lc,var(--accent));box-shadow:var(--shadow)}
.next::after{display:none}
.next .eyebrow{color:var(--lc,var(--accent));opacity:1}
.next .bigicon{color:var(--lc,var(--accent))}
.next .btn.light,.stepcard .btn.solid.big:first-child{background:var(--pop);color:var(--pop-ink)}
.next .btn.ghost{border-color:var(--line);color:var(--ink)}
.next .weblink{background:var(--sunk)}
.next.done{border-left-color:var(--pop)}
nav.tabs button[aria-current="page"]{color:var(--ink)}
nav.tabs button[aria-current="page"] svg{background:var(--pop);color:var(--pop-ink)}
.cheercard{border:3px solid var(--pop)}

/* ================= Version 1.7.1: Lit Robot credit ================= */
.credit{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.credit b{color:var(--ink);font-family:var(--display);font-weight:900}
.markdisc{width:36px;height:36px;border-radius:50%;background:#FBF7EE;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--line)}
.markdisc img{width:28px;height:auto}
.welcomelogo{display:flex;flex-direction:column;align-items:center;gap:6px;align-self:center;margin-bottom:6px}
.welcomelogo img{width:120px;height:auto;padding:10px 12px 8px;background:#FBF7EE;border-radius:22px;box-shadow:var(--shadow)}
.welcomelogo span{font-size:.82rem;font-weight:700;color:var(--muted)}
.makerlogo{background:#FBF7EE;padding:8px 10px;border-radius:16px;max-width:110px}

/* ================= Version 1.7.2: Sort it look on every page ================= */
/* page headers: the same night-blue band as the home screen */
.pagehero{gap:14px}
.pagehero .intro .eyebrow{color:var(--night-soft)}
.pagehero .intro h2{color:var(--night-ink)}
.pagehero .intro .muted{color:var(--night-soft)}
.pagehero .banner{border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.25);margin-top:2px}

/* cards: coloured strip down the left, like the Next up card */
details.list,.appt,.person,.tip,.setting,.money,.calmcard,.form,details.helpgroup,.gcard,.guide,.stepcard{border-left:6px solid var(--lc,var(--accent))}
details.list[open]{box-shadow:var(--shadow)}
.tip .tag{background:var(--lc);color:var(--lci)}
details.helpgroup>summary h3{color:var(--ink)}
details.helpgroup[open]>summary .chev{color:var(--lc)}
.gcard>.sym:first-child{background:var(--lc);color:var(--lci)}
.stepcard{border-top-width:3px;border-right-width:3px;border-bottom-width:3px}

/* marigold for the main action on each screen; call buttons stay sage so it isn't overused */
.btn.solid{background:var(--pop);color:var(--pop-ink)}
.btn.solid .sym{color:var(--pop-ink)}
.datebox{background:var(--sunk)}

/* ---------- 1.8 production pass: touch targets, landmarks, install, storage ---------- */
:root{--accent-text:#41694F}
:root[data-theme="dark"]{--accent-text:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-text:var(--accent)}}
.linkbtn{color:var(--accent-text);min-height:44px;display:inline-flex;align-items:center}
main{display:block}
main:focus{outline:none}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
/* 44px minimum for anything you tap (Apple and Google both ask for this; WCAG 2.2 AA needs 24px) */
.top .iconbtn,.hidebtn,.top .helpnow{min-height:44px;height:44px}
.top .iconbtn{width:44px}
@media (max-width:380px){.top .iconbtn{width:44px;height:44px}}
.btn{min-height:44px}
.seg button{min-height:44px;padding-block:9px}
.callpill{min-height:44px}
.copylink{min-height:44px;min-width:44px;padding:4px 6px}
.actions a,.actions button,.side a,.side button{min-height:44px}
.weblink{min-height:36px}
/* install */
.installtip{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--pop,#F5A623);border-radius:16px;padding:14px;margin:0 0 16px}
.installtip .sym{width:26px;height:26px;flex:none;color:var(--accent)}
.installtip h3{font-size:1.02rem;margin:0 0 4px}
.installtip p{margin:0 0 8px}
.installtip .row{gap:8px}
.isteps{margin:6px 0 10px;padding-left:1.3em}
.isteps li{margin:4px 0}
.ishare{display:inline-block;width:18px;height:18px;vertical-align:-3px}
.warnbox{border-left:6px solid var(--danger)}
.warnbox h3{color:var(--danger)}
/* info pages (privacy, support, terms) */
.privacy .setting ul{padding-left:1.2em}
.privacy .setting li{margin:4px 0}
.privacy .pagelinks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}

/* ---------- 1.9: state choice, safer button rows, scripts "who you're calling" ---------- */
.statebar{margin:0 0 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.statebar.unset{border-left:6px solid var(--pop,#F5A623)}
.statepick{display:flex;flex-direction:column;gap:6px;font-weight:700}
.statepick .lbl{font-size:.9rem;color:var(--muted)}
.statepick select{min-height:48px;width:100%;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-weight:700;padding:10px 12px}
.stategrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.stategrid .btn{min-height:52px;white-space:normal;line-height:1.2;padding:10px 8px}
.stategrid .btn.on{background:var(--accent);color:var(--accent-ink)}
/* button rows never cut off: wrap instead, text centred in its button */
.seg{max-width:100%;flex-wrap:wrap}
.seg button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.chips,.weblinks,.actions,.callrow,.row{flex-wrap:wrap}
.actions a,.actions button,.side a,.side button{display:inline-flex;align-items:center;justify-content:center}
button,.btn,.weblink,.callpill{max-width:100%}
.btn{white-space:normal}
/* who you're calling (phone scripts) */
.whocall{display:flex;gap:12px;align-items:flex-start;background:var(--sunk);border-radius:14px;padding:12px 14px;margin:0 0 14px}
.whocall .sym{width:24px;height:24px;flex:none;color:var(--accent)}
.whocall b{display:block;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.whocall p{margin:0}
.whocall .callrow{margin-top:8px}
nav.tabs .row{flex-wrap:nowrap}
.bubble .who2{opacity:1;color:inherit}
.stategrid .btn{justify-content:center;text-align:center}
.whocall .callpill{border-radius:16px;padding:9px 14px 9px 11px}
.whonum{display:flex;flex-direction:column;line-height:1.25}
.whonum .num{white-space:nowrap;font-size:1.02rem}
.whocall .callpill .sym{color:inherit}
/* tips: four topics on one line, no All button (tap the picked topic again to see every tip) */
.chips.tipcats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible}
.chips.tipcats button{min-height:44px;min-width:0;padding:8px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips.tipcats{gap:5px}
.chips.tipcats button{font-size:min(.95rem,4.6vw);padding:8px 2px}
.chips.tipcats{margin-bottom:14px}

/* ---------- 2.0: wins and Life Quest ---------- */
.noscroll,.noscroll body{overflow:hidden}
.winschip{margin-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:0;background:var(--pop);color:var(--pop-ink);font-family:var(--display);font-weight:800;font-size:15px;max-width:100%}
.winschip svg{width:20px;height:20px;flex:none}
.winschip b{font-weight:700;opacity:.85}
.wincard{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--lc,var(--accent));border-radius:18px;padding:16px;margin:0 0 14px;display:grid;gap:10px}
.wincard h3{margin:0}
.wincard .eyebrow{margin:0}
.wincard .bar{height:10px}
.wincard .btn{justify-self:start}
.weekdots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:12px;background:var(--sunk);color:var(--muted);font-weight:700}
.wd .sym{width:18px;height:18px}
.wd.good{background:var(--pop);color:var(--pop-ink)}
.wd.today{outline:2px solid var(--ink);outline-offset:1px}
.winstats{grid-template-columns:1fr 1fr}
.winstats>p{grid-column:1/-1;margin:0}
.wstat{background:var(--sunk);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.wstat b{font-family:var(--display);font-size:1.6rem;font-weight:900;line-height:1.1}
.wstat span{font-size:.85rem;color:var(--muted);line-height:1.25}
.badgegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.badge{border-radius:14px;padding:12px;background:var(--sunk);display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.badge .sym{width:28px;height:28px}
.badge b{color:var(--ink);font-size:.95rem}
.badge span{font-size:.8rem;line-height:1.3}
.badge.got{background:var(--pop);color:var(--pop-ink)}
.badge.got b{color:var(--pop-ink)}
.questcard{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.questcard .crowdisc{width:84px;height:84px}
.questcard p{margin:0 0 6px}
#learnQuest .wincard{margin-bottom:16px}
.freshstart{display:flex;gap:10px;align-items:center;background:var(--sunk);border-radius:12px;padding:10px 12px;font-weight:700;margin:0 0 10px}
.freshstart .sym{width:22px;height:22px;color:var(--pop);flex:none}
/* celebrations */
.cheerart{display:grid;place-items:center}
.cheerart .bigsym{width:120px;height:120px;color:var(--pop);stroke-width:1.6}
.cheercard[data-kind="week"] .bigsym,.cheercard[data-kind="month"] .bigsym{animation:bounceIn .7s ease-out}
.smiley{width:150px;height:150px;animation:bounceIn .7s ease-out}
.sm-face{fill:var(--pop)}
.sm-eyes ellipse{fill:var(--pop-ink);transform-origin:50px 40px;animation:blink 3.2s infinite}
.sm-mouth{fill:none;stroke:var(--pop-ink);stroke-width:6;stroke-linecap:round}
.sm-cheek{fill:#E8836B;opacity:.55}
.cheersub{font-family:inherit!important;font-weight:400!important;font-size:1rem!important;max-width:260px}
.cheertreat{font-family:inherit!important;font-weight:700!important;font-size:.95rem!important;background:var(--sunk);border-radius:12px;padding:8px 12px}
@keyframes bounceIn{0%{transform:scale(.3)}55%{transform:scale(1.12)}75%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.smiley,.sm-eyes ellipse,.cheerart .bigsym{animation:none!important}}
/* Life Quest */
.questov .inner{justify-content:flex-start;gap:14px;padding-block:16px 32px}
.qtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qmonth{font-family:var(--display);font-weight:900;background:var(--night);color:var(--night-ink);border-radius:999px;padding:8px 14px}
.qstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}
.qmoney{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.qmoney b{font-family:var(--display);font-size:1.5rem;font-weight:900}
.qlbl{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.qmeter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 6px}
.qmeter .sym{width:18px;height:18px;color:var(--accent)}
.qmeter .qtrack{grid-column:1/3;height:8px;background:var(--sunk);border-radius:6px;overflow:hidden}
.qmeter .qtrack i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s}
.qmeter b{grid-row:2;grid-column:3;font-size:.9rem}
.qmeter .qlbl{grid-column:2}
.qcard{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--pop);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.qcard h2{margin:0;font-size:1.45rem}
.qcard h2:focus{outline:none}
.qcard h3{margin:6px 0 0}
.qsub{margin:0;color:var(--muted)}
.qintro{align-items:flex-start}
.qcrow{width:110px;height:110px}
.qlevel{display:flex;flex-direction:column;gap:2px;background:var(--sunk);border-radius:14px;padding:10px 12px;width:100%}
.qopts{display:flex;flex-direction:column;gap:10px;width:100%}
.qopt{text-align:left;display:flex;flex-direction:column;gap:3px;min-height:56px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.qopt b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.qopt span{color:var(--muted);font-size:.92rem;line-height:1.35}
.qopt:hover,.qopt:focus-visible{border-color:var(--pop)}
.qopt.locked{opacity:.75;border-style:dashed}
.qdelta{display:flex;flex-wrap:wrap;gap:6px}
.qchip{border-radius:999px;padding:5px 10px;font-weight:700;font-size:.9rem;background:var(--sunk);color:var(--ink)}
.qchip.up{background:var(--accent);color:var(--accent-ink)}
.qnote{margin:0;font-size:1.05rem;font-weight:700}
.qreal{display:flex;gap:8px;align-items:flex-start;margin:0;background:var(--sunk);border-radius:12px;padding:10px 12px}
.qreal .sym{width:20px;height:20px;flex:none;color:var(--pop)}
.qsum{display:flex;flex-direction:column;gap:6px;background:var(--sunk);border-radius:14px;padding:12px}
.qsum div{display:flex;justify-content:space-between;gap:10px}
.qsum .tot{border-top:1px solid var(--line);padding-top:8px;font-weight:700}
.qsum .tot b{font-family:var(--display);font-size:1.2rem}
.qscore{display:flex;align-items:baseline;gap:10px}
.qscore b{font-family:var(--display);font-size:3rem;font-weight:900;color:var(--ink);line-height:1}
.qlist{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.qnext{align-self:stretch}
.wincard .lines li{display:flex;gap:10px;align-items:center}
.wincard .lines .sym{width:22px;height:22px;flex:none;color:var(--accent)}