@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* Orange Acorn app — design v9 visual ("The Household Shelf").
   Warm paper, charcoal ink, one orange accent used sparingly. System sans-serif only.
   Every text size 17px+ (1.0625rem) except tab labels; every tap target 44px+; rem units throughout so Text size scales it all.
   Light mode only (paper is the brand). */

/* ---------- 1. tokens ---------- */
:root{
  /* palette */
  --orange:#D96B27;--orange-press:#B5561B;--ink:#B5561B;--ink-deep:#8F4314;--gold:#E8B65A;
  --paper:#FAF8F3;--paper-deep:#F1ECE2;--surface:#FFFFFF;--surface-press:#F4F0E8;
  --charcoal:#202B28;--slate:#4A5552;--euc:#4F7263;--euc-deep:#234A3C;--euc-wash:#E3ECE7;
  --line:#E2DCD0;--line-strong:#CFC6B5;--bad:#9b2c00;--bad-wash:#fbe6da;--wash:#FBEDE3;
  --on-orange:#1d1208;
  /* legacy aliases (inline styles and guide pages) */
  --orange-ink:var(--ink);--card:var(--surface);--ok:var(--euc-deep);--euc-soft:var(--euc-wash);--orange-soft:var(--wash);--orange-wash:var(--wash);
  /* type */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --t-large:2.125rem;   /* 34 — screen titles (iOS large title) */
  --t-title:1.375rem;   /* 22 — section titles in content */
  --t-head:1.125rem;    /* 18 — row titles */
  --t-body:1.0625rem;   /* 17 — body, meta, everything else */
  --t-lede:1.1875rem;   /* 19 */
  /* spacing (4pt) */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;
  /* radii */
  --r-sm:10px;--r:14px;--r-lg:20px;--pill:999px;
  /* elevation: hairline first, shadow only for things that float */
  --hair:0 0 0 1px rgba(34,32,29,.07);
  --lift:0 0 0 1px rgba(34,32,29,.06),0 1px 2px rgba(34,32,29,.05);
  --float:0 8px 28px rgba(34,32,29,.18),0 1px 3px rgba(34,32,29,.12);
  --max:720px;--tabh:3.5rem;--toph:3.25rem;
  color-scheme:light;
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:var(--font);font-size:var(--t-body);line-height:1.5;color:var(--charcoal);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit}
button,a,summary,label,input,select{touch-action:manipulation}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px;overflow-wrap:anywhere}
:focus{outline:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:8px}
h1,h2,h3{line-height:1.2;margin:0;font-weight:700}
h1,h2,h3{font-family:var(--font-head)}
h1{font-size:var(--t-large);line-height:1.12;letter-spacing:-.022em;font-weight:800;margin:var(--s4) 0 var(--s3)}
h2{font-size:var(--t-title);letter-spacing:-.012em;margin:var(--s6) 0 var(--s3)}
h2.sub{font-size:var(--t-body);font-weight:700;color:var(--slate);letter-spacing:.01em;margin:var(--s6) var(--s1) var(--s2)}
h3{font-size:var(--t-head);margin:var(--s5) 0 var(--s2)}
p{margin:var(--s3) 0}
b,strong{font-weight:700}
.wrap{width:min(100% - 2rem,var(--max));margin-inline:auto}
.lede{font-size:var(--t-lede);line-height:1.45;color:var(--charcoal);margin:var(--s2) 0 var(--s5)}
.eyebrow{margin:var(--s3) 0 0;color:var(--ink);font-weight:700;font-size:var(--t-body);letter-spacing:.01em}
.muted{color:var(--slate)}
.small{font-size:var(--t-body)}
.center{text-align:center}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.okc,.ok{color:var(--euc-deep);font-weight:700}
.badc{color:var(--bad);font-weight:700}
mark{background:#ffdcc2;color:#1d1208;border-radius:3px;padding:0 .1em}
pre{white-space:pre-wrap;font-size:var(--t-body)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
code{background:var(--paper-deep);padding:0 .25rem;border-radius:4px}

/* ---------- 3. icons ---------- */
.ic{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Icons sit plainly in ink. No pastel squares: a tile is just a sized, coloured glyph. */
.itile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2.25rem;height:2.25rem;color:var(--ink)}
.itile .ic{width:26px;height:26px}
.itile.sm{width:2rem;height:2rem}.itile.sm .ic{width:22px;height:22px}
.itile.big{width:4rem;height:4rem;border-radius:50%;background:var(--surface);box-shadow:var(--hair)}.itile.big .ic{width:32px;height:32px}
.itile.ok{color:var(--euc-deep)}
.itile.warn{color:var(--bad)}
.itile.muted{color:var(--slate)}
.itile.big.ok{background:var(--euc-wash);box-shadow:none}
.chev{display:inline-flex;color:#8b8478;margin-left:auto;flex-shrink:0}.chev .ic{width:18px;height:18px;stroke-width:2.4}

/* ---------- 4. bars: brand header, top bar, tab bar ---------- */
.brandbar{display:flex;align-items:center;gap:.55rem;padding:.6rem 1rem 0;padding-top:max(.75rem,env(safe-area-inset-top));padding-left:max(1rem,env(safe-area-inset-left));min-height:3.25rem;background:var(--paper);font-weight:800;font-size:var(--t-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.brandbar img{width:1.75rem;height:1.75rem}
.brandbar .bn{display:flex;flex-direction:column;line-height:1.1;font-family:var(--font-head)}
.brandbar .bn small{font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--euc-deep)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.25rem;min-height:calc(var(--toph) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(.5rem,env(safe-area-inset-right)) 0 max(.25rem,env(safe-area-inset-left));background:rgba(247,243,235,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 .5px 0 var(--line-strong)}
.back{display:inline-flex;align-items:center;gap:.1rem;min-height:2.75rem;min-width:2.75rem;padding:0 .75rem 0 .25rem;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font-weight:600;font-size:var(--t-body);cursor:pointer;text-decoration:none;flex-shrink:0}
.back svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.back>span{font-size:1.35rem;line-height:1}
.back:active{opacity:.45}
.toptitle{flex:1;min-width:0;font-size:var(--t-body);font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;text-align:center;padding-right:4.75rem}
.guide-page .toptitle{padding-right:0}
.ts{display:flex;gap:.25rem;flex-shrink:0}
.tsbtn{min-width:2.75rem;min-height:2.75rem;border:0;border-radius:var(--r-sm);background:var(--paper-deep);font-weight:700;cursor:pointer;color:var(--charcoal)}
.tsbtn:active{background:var(--line)}

.shell{min-height:100vh;min-height:100dvh}
.main{min-height:100vh;padding-bottom:calc(var(--tabh) + var(--s6) + env(safe-area-inset-bottom))}
body.has-dlbar .main{padding-bottom:calc(var(--tabh) + 7rem + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:rgba(255,253,248,.88);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 -.5px 0 var(--line-strong)}
.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:var(--tabh);padding:.35rem 0 .2rem;font-size:.9375rem;font-weight:600;letter-spacing:.005em;color:var(--slate);background:none;border:0;cursor:pointer}
.tabbar svg{width:1.625rem;height:1.625rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;transition:transform .15s}
.tabbar button[aria-current=page]{color:var(--ink-deep);font-weight:700}
.tabbar button[aria-current=page] svg{fill:rgba(243,108,33,.16);stroke-width:2.1}
.tabbar button[aria-current=page]::before{content:"";position:absolute;top:0;left:50%;width:2rem;height:3px;margin-left:-1rem;border-radius:0 0 3px 3px;background:var(--orange)}
.tabbar button:active svg{transform:scale(.9)}
.side-brand{display:none}
body.in-setup .tabbar{display:none}
body.in-setup .main{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
#dlbar{position:fixed;left:max(.75rem,env(safe-area-inset-left));right:max(.75rem,env(safe-area-inset-right));bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + .6rem);z-index:29;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;text-align:left;background:var(--charcoal);color:var(--paper);border:0;border-radius:var(--r);padding:.75rem 1rem .8rem;cursor:pointer;font-weight:600;font-size:var(--t-body);box-shadow:var(--float)}
#dlbar .ic{color:#ffb487}
#dlbar .dltxt{flex:1;min-width:0}
#dlbar .see{color:#ffb487;font-weight:700}
#dlbar .prog{flex-basis:100%;margin:0;height:4px;background:rgba(255,255,255,.18)}
#dlbar .prog i{background:#ff9a5c}
#dlbar:active{transform:scale(.985)}
body.in-setup #dlbar{bottom:calc(.6rem + env(safe-area-inset-bottom))}
.appfoot{color:var(--slate);font-size:var(--t-body);text-align:center;padding:var(--s6) 0 var(--s2)}
body[data-screen=welcome] .appfoot,body[data-screen=read] .appfoot,body[data-screen=dread] .appfoot{display:none}
.banner{display:block;margin:0;padding:.85rem 1rem;font-weight:700;background:var(--bad-wash);color:#3a1a05}
.banner.ok{background:var(--euc-wash);color:#12331d}

@media (min-width:900px){
  .tabbar{top:0;right:auto;width:248px;flex-direction:column;justify-content:flex-start;padding:0 .75rem;background:var(--paper-deep);box-shadow:inset -1px 0 0 var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tabbar button{flex:none;flex-direction:row;justify-content:flex-start;gap:.75rem;padding:0 .9rem;min-height:3rem;font-size:var(--t-body);border-radius:var(--r-sm);margin:.1rem 0}
  .tabbar button::before{display:none}
  .tabbar button[aria-current=page]{background:var(--surface);color:#9a3d06;box-shadow:var(--hair)}
  .tabbar button:hover:not([aria-current]){background:rgba(255,253,248,.6)}
  .side-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:var(--t-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:1.5rem .9rem 1.25rem}
  .side-brand img{width:2rem;height:2rem}
  .main{margin-left:248px;padding-bottom:var(--s7)}
  body.has-dlbar .main{padding-bottom:7rem}
  body.in-setup .main{margin-left:0}
  #dlbar{left:calc(248px + 1.5rem);right:1.5rem;bottom:1rem;max-width:var(--max)}
  .brandbar{display:none}
  h1{margin-top:var(--s6)}
}

/* ---------- 5. buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.7rem 1.25rem;border-radius:var(--r);font-weight:700;font-size:var(--t-body);line-height:1.2;text-decoration:none;border:0;cursor:pointer;margin:var(--s2) 0;transition:transform .12s,background-color .12s}
.btn .ic{width:22px;height:22px}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--orange);color:var(--on-orange);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-primary:hover{background:#ec6519}
.btn-primary:active{background:var(--orange-press);transform:scale(.985)}
.btn-secondary{background:var(--surface);color:var(--charcoal);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-secondary:active{background:var(--surface-press);transform:scale(.985)}
.btn-quiet{background:transparent;color:var(--ink);min-height:2.75rem}
.btn-quiet:active{background:var(--paper-deep)}
.btn-danger,#rm-yes{background:var(--bad);color:#fff;box-shadow:none}
#rm-yes:active{background:#7d2300}
.btn-sm{min-height:2.75rem;padding:0 1rem;margin:var(--s1) 0 0;width:auto;border-radius:var(--pill)}
.btn:disabled,.btn[disabled]{background:#e4dccd;color:#4a4a4a;box-shadow:none;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0}
.btn-row .btn{flex:1;margin:0}
.actions{margin-top:var(--s5)}
.link{background:none;border:0;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;min-height:2.75rem;cursor:pointer;padding:0;text-align:left}
.link:active{opacity:.55}
.linkbtn{background:none;border:0;padding:0 .2rem;min-height:2.75rem;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.linkrow{display:flex;gap:var(--s5);flex-wrap:wrap}

/* ---------- 6. surfaces: cards and grouped lists ---------- */
/* A card is a quiet surface on paper: hairline, no drop shadow. */
.card{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--lift);padding:var(--s4);margin:var(--s3) 0}
.card>p{margin:var(--s1) 0}
.card:not(:has(.itile)){display:block}
.pbody{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.pbody b{font-size:var(--t-head);line-height:1.3;letter-spacing:-.005em}
.pbody small{font-size:var(--t-body);color:var(--slate);line-height:1.4}
.pbody small.okc{color:var(--euc-deep);font-weight:600}
/* Stacks become iOS grouped lists: one surface, hairline separators inset past the icon. */
.stack{margin:var(--s3) 0;border-radius:var(--r);background:var(--surface);box-shadow:var(--lift);overflow:hidden}
.stack:empty{display:none}
.stack>.card,.stack>details.sheet{margin:0;border-radius:0;box-shadow:none;background:transparent;position:relative}
.stack>.card+.card::before,.stack>details+details::before{content:"";position:absolute;top:0;left:var(--s4);right:0;height:1px;background:var(--line)}
.stack>.card:has(.itile)+.card:has(.itile)::before{left:calc(var(--s4) + 2.25rem + var(--s3))}
.callout{background:var(--wash);box-shadow:inset 0 0 0 1px #f2cdb2}
.callout .itile{color:var(--ink)}
.ok-card{background:#f1f6f2;box-shadow:inset 0 0 0 1px #c4d5c9}
.empty{flex-direction:column;align-items:center;text-align:center;background:transparent;box-shadow:none;padding:var(--s5) var(--s4) var(--s4)}
.empty .pbody{align-items:center}
.empty .illo{display:block;width:min(15rem,70%);height:auto;margin:0 auto var(--s2)}
.feature{flex-wrap:wrap}
.feature .btn{flex-basis:100%}
.copyrow{display:flex;gap:var(--s2);margin-top:var(--s2)}.copyrow input{flex:1;min-width:0}
.confirm{background:var(--surface);box-shadow:0 0 0 2px var(--charcoal),var(--float)}
.confirm .btn-row .btn{flex:1}

/* ---------- 7. setup (steps 1–4) ---------- */
.stepper{display:flex;gap:6px;margin:var(--s4) 0 var(--s1)}
.stepper i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.stepper i.on{background:var(--orange)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--paper-deep);padding:3px;border-radius:var(--r);margin:var(--s2) 0 var(--s4)}
.seg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:4rem;border:0;border-radius:11px;background:transparent;font-weight:700;font-size:var(--t-body);cursor:pointer;color:var(--slate);line-height:1.15;padding:.3rem}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--charcoal);box-shadow:0 1px 3px rgba(34,32,29,.14)}
.psteps{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:var(--s3)}
.pstep{flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s2);margin:0}
.psteps .pstep{display:flex}
.pstep .pic{flex:0 0 44%;max-width:220px}
.pstep .pic svg{display:block;width:100%;height:auto;border-radius:var(--r-sm);box-shadow:var(--hair)}
.pstep p{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;margin:0 var(--s2) 0 0;flex:1}
.num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--charcoal);color:var(--paper);font-weight:800;font-size:var(--t-body)}
.pstep .tap{animation:tap 1.4s infinite;transform-origin:center;transform-box:fill-box}
@media (min-width:900px){.psteps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pstep{flex-direction:column;align-items:stretch}.pstep .pic{max-width:none}.pstep p{flex-direction:row;margin:var(--s2) var(--s1) var(--s1)}}
.hero-ok{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-top:var(--s5)}.hero-ok h1{margin:0}
.mini{padding:.75rem var(--s4);gap:var(--s3)}.mini b{flex:1;font-size:var(--t-head)}

/* ---------- 8. Library home ---------- */
.homehead{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 var(--s3);margin:var(--s1) 0 var(--s2)}
.homehead h1{grid-column:1/-1;margin:var(--s2) 0 var(--s1)}
.homehead p{margin:0;color:var(--slate);min-width:0}
.homehead .chipbtn{background:transparent;box-shadow:none;padding:0 .25rem 0 .5rem;color:var(--ink);gap:.3rem}
.homehead .chipbtn .ic{width:20px;height:20px}
.homehead .chipbtn:active{background:var(--paper-deep)}
/* The shelf: one grouped surface; each resource shows a coloured "spine" like a book on a shelf. */
.shelves{display:block;margin:var(--s2) 0 var(--s3);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden}
.shelves:empty{display:none}
.shelf{position:relative;display:flex;align-items:center;gap:var(--s4);width:100%;min-height:5.25rem;margin:0;padding:var(--s3) var(--s4);text-align:left;cursor:pointer;color:var(--charcoal);text-decoration:none;font:inherit;background:var(--surface);border:0;border-radius:0;box-shadow:none}
.shelves>.shelf+.shelf::before{content:"";position:absolute;top:0;left:calc(var(--s4) + 2.75rem + var(--s4));right:0;height:1px;background:var(--line)}
.shelf:active{background:var(--surface-press)}
.shelves .shelf .itile,.stack>.shelf .itile{width:2.75rem;height:3.6rem;border-radius:4px 7px 7px 4px;background:var(--ink);color:#fff;box-shadow:inset 3px 0 0 rgba(0,0,0,.18),inset 0 -6px 0 rgba(0,0,0,.08)}
.shelves .shelf .itile .ic,.stack>.shelf .itile .ic{width:22px;height:22px;stroke-width:2}
.shelves .shelf:nth-child(4n+2) .itile{background:var(--euc-deep)}
.shelves .shelf:nth-child(4n+3) .itile{background:var(--slate)}
.shelves .shelf:nth-child(4n+4) .itile{background:#7a5230}
.shelf.going .itile{background:var(--paper-deep)!important;color:var(--slate);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.shelf .pbody small.okc{font-weight:600}
.shelf .pbody small .okc{font-weight:700}
.shelf.sel{background:var(--wash)}
.shelf.sel b{color:var(--ink-deep)}
.going .prog{margin-top:var(--s2)}
/* Library actions: one primary, then a plain row */
.actiongrid{display:grid;grid-template-columns:1fr;gap:var(--s2);margin:var(--s4) 0 var(--s3)}
.action{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.5rem;margin:0;padding:var(--s3) var(--s4);text-align:left;cursor:pointer;font:inherit;color:var(--charcoal);border:0;border-radius:var(--r);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.action .pbody b{font-size:var(--t-head)}
.action:active{background:var(--paper-deep)}
.action.primary{min-height:3.75rem;background:var(--orange);color:var(--on-orange);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.action.primary:active{background:var(--orange-press);transform:scale(.99)}
.action.primary .itile{color:var(--on-orange);width:2rem}
.action.primary small{color:#3a1a05}
@media (min-width:600px){.actiongrid{grid-template-columns:1fr 1fr}}
.notice{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.5rem;padding:var(--s3) var(--s4);margin:var(--s3) 0;border:0;border-radius:var(--r);background:var(--wash);text-align:left;cursor:pointer;color:var(--charcoal);font:inherit}
.notice u{color:var(--ink);font-weight:700;text-underline-offset:.18em}
.notice .ic{color:var(--ink)}
.notice:active{background:#f8e2d2}
/* Search field: iOS-style filled field with the button beside it */
.srch{display:block;margin:var(--s5) 0 var(--s3);padding:var(--s4)}
.srch label{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);font-size:var(--t-head)}
.srch label .ic{color:var(--ink)}
.srow{display:flex;gap:var(--s2)}.srow input{flex:1;min-width:0}.srow .btn{margin:0;min-height:3.25rem}
.srch input[type=search]{background:var(--paper-deep);border-color:transparent}
.srch input[type=search]:focus{background:#fff;border-color:var(--orange)}
.soon-note{color:var(--slate);margin:var(--s3) 0 0;font-size:var(--t-body)}
/* "Happening now?" — a keypad of six situations on one surface */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:var(--s2) 0 var(--s4);background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:6rem;padding:var(--s3) var(--s1);background:var(--surface);color:var(--charcoal);text-decoration:none;font-weight:700;font-size:var(--t-body);line-height:1.15;text-align:center}
.tile .ic{color:var(--ink);width:30px;height:30px;stroke-width:1.8}
.tile:active{background:var(--surface-press)}
.tile span{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (min-width:900px){.tiles{grid-template-columns:repeat(6,1fr)}}
/* The 15 guides */
.gcard{display:block;padding:0;overflow:hidden;border-radius:var(--r-lg)}
.gcard>summary{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);cursor:pointer;list-style:none;min-height:5rem}
.gcard>summary::-webkit-details-marker{display:none}
.gcard>summary>.itile{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--charcoal);color:#ffb487}
.gcard>summary:active{background:var(--surface-press)}
.sumtoggle{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;color:var(--slate);flex-shrink:0;transition:transform .2s}
.gcard[open] .sumtoggle{transform:rotate(180deg)}
.gcard>.btn{margin:0 var(--s4) var(--s3);width:calc(100% - 2rem)}
.ggrid{list-style:none;margin:0;padding:0 0 var(--s2);display:grid;grid-template-columns:1fr;counter-reset:gnum}
.gcard .ggrid{border-top:1px solid var(--line)}
#view>.ggrid{background:var(--surface);border-radius:var(--r);box-shadow:var(--lift)}
.ggrid>li{position:relative;counter-increment:gnum}
.ggrid>li+li::before{content:"";position:absolute;top:0;left:calc(var(--s4) + 2rem + var(--s3));right:0;height:1px;background:var(--line)}
@media (min-width:600px){.ggrid{grid-template-columns:1fr 1fr}.ggrid>li:nth-child(2)::before{display:none}}
.gitem{display:flex;align-items:center;gap:var(--s3);min-height:3.5rem;padding:var(--s2) var(--s4);color:var(--charcoal);text-decoration:none;font-weight:600;line-height:1.25}
.gitem:active{background:var(--surface-press)}
.gitem .itile{color:var(--ink)}
.gitem small{display:block;font-weight:400;color:var(--slate);font-size:var(--t-body)}

/* ---------- 9. collapsible sheets (FAQ, already-on-device, coming soon) ---------- */
details.sheet{background:var(--surface);border-radius:var(--r);margin:var(--s3) 0;box-shadow:var(--lift)}
details.sheet>summary{display:flex;align-items:center;gap:var(--s3);min-height:3.5rem;padding:var(--s2) var(--s4);cursor:pointer;font-weight:700;list-style:none}
details.sheet>summary::-webkit-details-marker{display:none}
details.sheet>summary>span{flex:1}
details.sheet>summary .ic:first-child{color:var(--ink)}
details.sheet>summary .sumchev{transition:transform .2s;color:var(--slate);width:20px;height:20px}
details.sheet[open]>summary .sumchev{transform:rotate(180deg)}
details.sheet>*:not(summary){margin-left:var(--s4);margin-right:var(--s4)}
details.sheet>*:last-child{margin-bottom:var(--s4)}
details.sheet>p:first-of-type{margin-top:0}
details.sheet>.card{margin:var(--s2) var(--s4)}
.stack>details.sheet>summary{padding-left:var(--s4)}
.have .haverow{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s1) 0;border-top:1px solid var(--line)}
.soonbox>summary .ic:first-child{color:var(--slate)}
.soonbox>.card{margin:0 var(--s4);border-radius:0;box-shadow:none;border-top:1px solid var(--line);padding-inline:0}
.soon{background:transparent}

/* ---------- 10. Add resources (picker) ---------- */
.freecard{flex-wrap:wrap}.freecard .link{min-height:2.75rem;align-self:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}
.chipbtn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:var(--pill);border:0;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);font-weight:700;cursor:pointer;color:var(--charcoal)}
.chipbtn .ic{width:20px;height:20px;color:var(--ink)}
.chipbtn:active{background:var(--surface-press)}
.pick{display:block;padding:0;position:relative}
.pick label{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) var(--s4) var(--s1);margin:0;cursor:pointer;font-weight:400}
.pick label input{margin-top:.35rem}
.pick .lm{margin:0 0 var(--s2) calc(var(--s4) + 1.75rem + var(--s3) + 2.25rem + var(--s3));min-height:2.75rem}
.pick.off .pbody b{color:var(--slate)}
.pick:has(input:checked){background:var(--wash)}
.stack>.pick:has(input:checked)::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.src{color:var(--slate)}
.meta{font-weight:700}
.pbody small.meta{color:var(--charcoal)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--s2)}
.tag{display:inline-block;padding:.1rem .6rem;border-radius:var(--pill);background:var(--paper-deep);font-size:var(--t-body);font-weight:600;color:var(--charcoal)}
.tag.ok{background:var(--euc-wash);color:var(--euc-deep)}
.tag.warn{background:var(--bad-wash);color:var(--bad)}
.tag.soon{background:var(--charcoal);color:var(--paper)}
.sticky{position:sticky;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:10;background:rgba(247,243,235,.9);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 -.5px 0 var(--line-strong);margin:var(--s4) -1rem 0;padding:var(--s2) 1rem var(--s2)}
.sticky p{margin:var(--s1) 0}
.sticky .btn{margin:var(--s1) 0}
body.in-setup .sticky{bottom:0;padding-bottom:max(var(--s2),env(safe-area-inset-bottom))}
@media (min-width:900px){body:not(.in-setup) .sticky{bottom:0}}
.inprog{gap:var(--s3)}

/* ---------- 11. progress, stats, storage meter ---------- */
.prog{display:block;height:6px;border-radius:3px;background:var(--paper-deep);overflow:hidden;margin:var(--s2) 0;box-shadow:inset 0 0 0 1px rgba(34,32,29,.05)}
.prog i{display:block;height:100%;background:var(--orange);border-radius:3px;transition:width .3s}
.qrow{align-items:flex-start}
.qrow .btn{align-self:flex-start}
.statcard{display:block}
.stats{display:grid;grid-template-columns:1fr;gap:var(--s1)}
@media (min-width:600px){.stats{grid-template-columns:1fr 1fr;gap:var(--s3)}}
.stats p{margin:0;display:flex;flex-direction:column}
.stats b{font-size:var(--t-head)}
.stats small{font-size:var(--t-body);color:var(--slate)}
/* iOS Storage-style bar: used segment in orange on a paper track */
.meter{height:.875rem;border-radius:5px;background:var(--paper-deep);overflow:hidden;margin:var(--s4) 0 var(--s1);box-shadow:inset 0 0 0 1px rgba(34,32,29,.06)}
.meter i{display:block;height:100%;background:var(--orange);border-radius:5px 0 0 5px;min-width:4px}
.meter.over i{background:var(--bad)}
.meterkey{display:flex;gap:var(--s4);flex-wrap:wrap;margin:var(--s2) 0 0;color:var(--slate)}
.meterkey span{display:inline-flex;align-items:center;gap:.4rem}
.meterkey span::before{content:"";width:.75rem;height:.75rem;border-radius:3px;background:var(--orange)}
.meterkey span+span::before{background:var(--paper-deep);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ---------- 12. resource detail, heroes ---------- */
.reshead{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4)}.reshead h1{margin:0;font-size:1.75rem}.reshead p{margin:.2rem 0 0}
.reshead .itile.big,.readhead .itile.big{width:4rem;height:5.25rem;border-radius:5px 10px 10px 5px;background:var(--ink);color:#fff;box-shadow:inset 4px 0 0 rgba(0,0,0,.18),inset 0 -8px 0 rgba(0,0,0,.08),0 6px 16px rgba(154,61,6,.22)}
.drivehero{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-top:var(--s5)}.drivehero h1{margin:0}
.drivehero img{width:4rem;height:4rem}

/* ---------- 13. lists (More, results) ---------- */
.rows{list-style:none;padding:0;margin:var(--s2) 0}
.rows.card{display:block;padding:0;overflow:hidden}
.rows.card li{position:relative}
.rows.card li+li::before{content:"";position:absolute;top:0;left:calc(var(--s4) + 2rem + var(--s3));right:0;height:1px;background:var(--line)}
.row{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.75rem;padding:var(--s2) var(--s4);background:none;border:0;text-align:left;color:var(--charcoal);text-decoration:none;cursor:pointer;font:inherit}
.row:active{background:var(--surface-press)}
.row b{display:block;font-size:var(--t-head);font-weight:600}
.row small{display:block;color:var(--slate);font-size:var(--t-body)}
#pdfs .row{margin:0}
#pdfs{background:var(--surface);border-radius:var(--r);box-shadow:var(--lift);overflow:hidden}
#pdfs>li{position:relative}#pdfs>li+li::before{content:"";position:absolute;top:0;left:3.75rem;right:0;height:1px;background:var(--line)}
#pdfs .row.card{box-shadow:none;border-radius:0;background:transparent}
ul.plain{padding-left:1.3rem}ul.plain li{margin:var(--s1) 0}
ol.steps{padding:0;list-style:none;counter-reset:s;margin:var(--s3) 0}
ol.steps>li{counter-increment:s;display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s3) 0}
ol.steps>li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--charcoal);color:var(--paper);font-weight:800}
.readbar{display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0}
.readbar b{display:block}.readbar small{display:block;color:var(--slate);font-size:var(--t-body)}

/* ---------- 14. forms: fields, native-looking checkboxes and switches ---------- */
input[type=text],input[type=search],input[type=email],textarea,select{width:100%;min-height:3.25rem;padding:.65rem .9rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(243,108,33,.22)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5862' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem;padding-right:2.5rem}
textarea{min-height:7rem;line-height:1.45}
label{display:block;font-weight:700;margin:var(--s4) 0 var(--s2)}
label.inline{display:flex;align-items:center;gap:var(--s3);min-height:2.75rem;font-weight:400}
label.normal{font-weight:400}
/* Round iOS-style check */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:1.75rem;height:1.75rem;margin:0;flex-shrink:0;border-radius:50%;border:2px solid #8b8478;background:#fff center/1.05rem no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
input[type=checkbox]:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled{background-color:var(--paper-deep);border-color:var(--line-strong);cursor:not-allowed}
input[type=checkbox]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* Switch (privacy check-in, include device details) */
input[type=checkbox].switch{width:3.25rem;height:2rem;border-radius:1rem;border:0;background:#c9c1b4;background-image:none;position:relative}
input[type=checkbox].switch::after{content:"";position:absolute;top:2px;left:2px;width:1.75rem;height:1.75rem;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
input[type=checkbox].switch:checked{background:var(--euc-deep);background-image:none}
input[type=checkbox].switch:checked::after{transform:translateX(1.25rem)}
label.inline:has(.switch){justify-content:space-between;flex-direction:row-reverse;font-weight:600;min-height:3rem}
.formcard{display:block}
.formcard>label:first-child{margin-top:0}
fieldset.inset{border:0;border-radius:var(--r-sm);margin:var(--s4) 0;padding:var(--s1) var(--s4) var(--s4);background:var(--paper)}
fieldset.inset legend{float:left;width:100%;padding:0;margin:var(--s3) 0 0}
fieldset.inset legend+*{clear:both}

/* ---------- 15. search results and reader ---------- */
.results{list-style:none;padding:0;margin:var(--s2) 0;background:var(--surface);border-radius:var(--r);box-shadow:var(--lift);overflow:hidden}
.results:has(>li.muted:only-child){background:transparent;box-shadow:none}
.results li{position:relative;margin:0}
.results li+li::before{content:"";position:absolute;top:0;left:var(--s4);right:0;height:1px;background:var(--line);z-index:1}
.results li:has(.itile)+li::before{left:calc(var(--s4) + 2rem + var(--s3))}
.results li.muted{padding:var(--s3) var(--s1)}
.results a,.results button{display:flex;gap:var(--s3);align-items:center;width:100%;min-height:3.5rem;text-align:left;background:none;border:0;padding:var(--s3) var(--s4);color:var(--charcoal);text-decoration:none;cursor:pointer;font:inherit}
.results a:active,.results button:active{background:var(--surface-press)}
.results b{display:block;font-size:var(--t-head);font-weight:600}
.results .where{display:block;color:var(--ink);font-size:var(--t-body);font-weight:700}
.results .snip{display:block;color:var(--slate);font-size:var(--t-body)}
.readhead{display:flex;gap:var(--s4);align-items:flex-start;margin:var(--s4) 0 var(--s2)}
.readhead h1{margin:.1rem 0 .3rem;font-size:1.75rem}
.readhead .lede{margin:.2rem 0;font-size:var(--t-body)}
.readhead p{margin:.2rem 0}
/* The article reads like a page of a book: no box, just the page. */
.article-frame{display:block;width:calc(100% + 2rem);margin:0 -1rem;height:70vh;min-height:240px;border:0;border-top:1px solid var(--line);background:var(--paper)}
@media (min-width:600px){.article-frame{width:100%;margin:0;border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--lift)}}
.azrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:4px;margin:var(--s3) 0 var(--s4)}
.azrow button{min-height:2.75rem;border:0;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--hair);font-weight:700;font-size:var(--t-body);cursor:pointer;color:var(--charcoal)}
.azrow button:active{background:var(--surface-press)}
.azrow button[aria-current=true]{background:var(--charcoal);color:var(--paper);box-shadow:none}
.ts-sample{font-size:1.25rem;margin:0}
.readh1{font-size:var(--t-head);margin:0;line-height:1.3}

/* ---------- 16. manage space ---------- */
.sprow{gap:var(--s2);flex-wrap:nowrap;align-items:center}
.sprow label{flex:1;margin:0;align-items:center;gap:var(--s3);min-width:0}
.sprow .btn-sm{min-height:2.75rem;min-width:6rem;margin:0;color:var(--bad);box-shadow:inset 0 0 0 1.5px #e4b9a3}
#rm-multi:not(:disabled){color:var(--bad);box-shadow:inset 0 0 0 1.5px #e4b9a3}
#remove{color:var(--bad)}

/* inline links: tall tap area */
.main p a:not([class]),.main ul.plain li a:not([class]),.main ol.steps li a:not([class]),.guide p a:not([class]),.guide li a:not([class]){display:inline-block;padding:12px 0;margin:-12px 0}
.main p button.link,.main small button.link{display:inline;min-height:0;padding:12px 0;margin:-12px 0;line-height:inherit;font-size:inherit}

/* ---------- 17. guide pages (book-like reading) ---------- */
.guide-page{background:var(--paper)}
.guide-page main{padding-bottom:calc(var(--s7) + env(safe-area-inset-bottom))}
.guide{max-width:36rem}
.saved-line{margin:var(--s4) 0 0;font-size:var(--t-body)}
.guide h1{font-size:2rem;margin:var(--s3) 0 var(--s2)}
.guide-tools{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.guide-tools .btn{margin:0;padding-left:0}
.guide article{margin-top:var(--s2)}
.guide p,.guide li{font-size:1.125rem;line-height:1.62}
.guide article h2{font-size:1.375rem;margin:var(--s6) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--line);position:relative}
.guide article h2::before{content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:3px;background:var(--orange)}
.guide article h3{font-size:1.1875rem}
.guide ol,.guide ul{padding-left:1.5rem}
.guide li{margin:.5rem 0}
.guide li::marker{color:var(--ink);font-weight:700}
.guide ol.steps-list{list-style:none;counter-reset:g;padding:0;margin:var(--s4) 0}
.guide ol.steps-list>li{counter-increment:g;position:relative;padding-left:3rem;margin:var(--s4) 0}
.guide ol.steps-list>li::before{content:counter(g);position:absolute;left:0;top:-.05em;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--charcoal);color:var(--paper);font-weight:800;font-size:1rem}
.img-slot{display:none}
.table-wrap{overflow-x:auto;margin:var(--s4) 0;border-radius:var(--r-sm);box-shadow:var(--lift)}
table{border-collapse:collapse;width:100%;font-size:var(--t-body);background:var(--surface)}
th,td{border-bottom:1px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top}
th{background:var(--paper-deep)}
.print-kit ol.steps-list>li::before{content:"";background:none;border:2px solid currentColor;border-radius:4px;width:1.1em;height:1.1em;color:var(--charcoal)}

/* install help page (setup.html) */
.copybox{display:flex;gap:var(--s2)}.copybox input{flex:1;min-width:0}.copybox .btn{margin:0}
ol.steps>li>.grow{flex:1;min-width:0}
.keybtn{width:100%;font-size:1.3em;padding:18px 12px;word-break:break-all;line-height:1.3}
body:not(.app) .callout{display:block;border-radius:var(--r);padding:var(--s4);margin:var(--s4) 0;font-weight:700}
.walk{position:relative;width:100%;max-width:300px;aspect-ratio:3/2;margin:var(--s3) auto;border-radius:var(--r);background:var(--surface);box-shadow:var(--lift);overflow:hidden}
.walk>svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:walk 10s infinite}
.walk>svg:nth-child(2){animation-delay:2.5s}.walk>svg:nth-child(3){animation-delay:5s}.walk>svg:nth-child(4){animation-delay:7.5s}
.walk.three>svg{animation-duration:7.5s;animation-name:walk3}.walk.three>svg:nth-child(2){animation-delay:2.5s}.walk.three>svg:nth-child(3){animation-delay:5s}
@keyframes walk{0%{opacity:0}3%{opacity:1}25%{opacity:1}28%{opacity:0}100%{opacity:0}}
@keyframes walk3{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
.walk .tap{animation:tap 1.2s infinite;transform-origin:center;transform-box:fill-box}
@keyframes tap{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.2);opacity:.45}}
.walk-video{display:block;width:100%;max-width:300px;margin:var(--s3) auto;border-radius:var(--r)}
#q-hint:empty,#rq-hint:empty{display:none}

/* ---------- 18. motion and print ---------- */
@media (hover:hover){.shelf:hover,.row:hover,.gitem:hover,.results a:hover,.results button:hover,.tile:hover{background:#fbf8f2}}
@media (prefers-reduced-motion:reduce){.walk>svg{animation:none;position:relative;opacity:1;height:auto}.walk{aspect-ratio:auto}.walk .tap,.pstep .tap{animation:none}*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.btn:active,.action:active,#dlbar:active{transform:none}}
@media print{
  .topbar,.brandbar,.tabbar,#dlbar,.guide-tools,.banner,.saved-line,.appfoot{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .main{margin:0;padding:0}
  .wrap{width:100%}
  .guide article h2{border-top:0;padding-top:0}.guide article h2::before{display:none}
  hr{break-after:page;border:0}
  a{color:#000;text-decoration:none}
}
::placeholder{color:#5f6770;opacity:1}
.confirm{scroll-margin-bottom:calc(var(--tabh) + 24px)}
.tsbtn:disabled{opacity:.45;cursor:not-allowed}