/* Fonts are stored with the app (fonts/), so they work offline. Each theme uses its own. */
@font-face{font-family:"Unbounded";src:url(../fonts/unbounded.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}

/* Layout: one narrow column like a pocket checklist.
   Themes: <html data-theme="soft|scrap|cozy" data-accent="...">. The theme decides the whole look
   (there is no separate dark mode: Cozy night is the dark one).
   Text colors meet 4.5:1 contrast; "faint" colors are only used for lines and empty cells. */

/* A · Soft planner (default) */
:root, :root[data-theme="soft"]{
  --bg:#F4EFE8; --surface:#FFFFFF; --ink:#1F1B18; --muted:#736A64; --faint:#A39992; --line:#E2D9CF; --track:#E2D9CF;
  --accent:#CDBDF2; --on-accent:#1F1B18; --link:#1F1B18; --bar:#1F1B18;
  --primary-bg:#1F1B18; --primary-fg:#F4EFE8; --btn-bg:transparent; --btn-fg:#1F1B18; --btn-border:#1F1B18;
  --warn:#A4442F; --warn-soft:#F8E6DC; --good:#387049; --tick-bg:#1F1B18; --tick-fg:var(--accent); --check:#1F1B18;
  --r-card:18px; --r-inner:14px; --r-chip:12px; --r-btn:999px; --r-input:12px; --r-tick:8px; --shadow:none;
  --c-ink:#1F1B18; --c-red:#D0574B; --c-orange:#D98A3D; --c-pink:#D46FA0; --c-purple:#8C6BD1; --c-blue:#4F79C9; --c-teal:#3F9A94; --c-green:#5E9A5A;
  --display:"Unbounded", system-ui, sans-serif; --heading:"Manrope", system-ui, sans-serif; --hand:"Manrope", system-ui, sans-serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif; --mono:"DM Mono", ui-monospace, monospace;
  color-scheme:light;
}
:root[data-theme="soft"][data-accent="butter"]{--accent:#F5DE97}
:root[data-theme="soft"][data-accent="sage"]{--accent:#BCD7B2}
:root[data-theme="soft"][data-accent="peach"]{--accent:#F4C4B8}

/* B · Scrapbook */
:root[data-theme="scrap"]{
  --bg:#ECE3D4; --surface:#FBF8F2; --ink:#2E2A26; --muted:#6D6358; --faint:#A3988A; --line:#DDD2C0; --track:#D9CDBA;
  --accent:#D98E73; --on-accent:#2E2A26; --link:#2E2A26; --bar:#6F8F7A;
  --primary-bg:#2E2A26; --primary-fg:#FBF8F2; --btn-bg:#FBF8F2; --btn-fg:#2E2A26; --btn-border:#2E2A26;
  --warn:#9A4F37; --warn-soft:#F3E2D6; --good:#52695A; --tick-bg:#6F8F7A; --tick-fg:#FBF8F2; --check:#2E2A26;
  --r-card:4px; --r-inner:4px; --r-chip:6px; --r-btn:8px; --r-input:6px; --r-tick:4px; --shadow:0 1px 0 #D6CBB8;
  --c-ink:#2E2A26; --c-red:#B85C45; --c-orange:#C98A3E; --c-pink:#C2718F; --c-purple:#8A73B0; --c-blue:#5B7FA6; --c-teal:#4F8C88; --c-green:#6F8F7A;
  --display:"Caveat", cursive; --heading:"Caveat", cursive; --hand:"Caveat", cursive;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif; --mono:"Manrope", system-ui, sans-serif;
  color-scheme:light;
}
:root[data-theme="scrap"][data-accent="seaglass"]{--accent:#8FB3B0}
:root[data-theme="scrap"][data-accent="mustard"]{--accent:#D9B45B}
:root[data-theme="scrap"][data-accent="lavender"]{--accent:#A99BCB}

/* C · Cozy night (the dark theme) */
:root[data-theme="cozy"]{
  --bg:#2A2140; --surface:#3A2E58; --chip:#4A3D6B; --ink:#F6EEFF; --muted:#B8A9D6; --faint:#8E80AE; --line:#4A3D6B; --track:#4A3D6B;
  --accent:#FF9EC2; --on-accent:#2A2140; --link:var(--accent); --bar:#9FE3C4;
  --primary-bg:var(--accent); --primary-fg:#2A2140; --btn-bg:#4A3D6B; --btn-fg:#F6EEFF; --btn-border:#4A3D6B;
  --warn:#FFD9A8; --warn-soft:#FFD9A8; --on-warn:#2A2140; --good:#9FE3C4; --tick-bg:#9FE3C4; --tick-fg:#2A2140; --check:#9FE3C4;
  --r-card:22px; --r-inner:18px; --r-chip:14px; --r-btn:999px; --r-input:14px; --r-tick:9px; --shadow:none;
  --c-ink:#F6EEFF; --c-red:#FF8FA3; --c-orange:#FFB27A; --c-pink:#FF9EC2; --c-purple:#B9A6FF; --c-blue:#8FB8FF; --c-teal:#7FE0D8; --c-green:#9FE3C4;
  --display:"Fredoka", system-ui, sans-serif; --heading:"Fredoka", system-ui, sans-serif; --hand:"Fredoka", system-ui, sans-serif;
  --body:"Nunito", "Segoe UI", system-ui, sans-serif; --mono:"Nunito", system-ui, sans-serif;
  color-scheme:dark;
}
:root[data-theme="cozy"][data-accent="mint"]{--accent:#9FE3C4}
:root[data-theme="cozy"][data-accent="peach"]{--accent:#FFD9A8}
:root[data-theme="cozy"][data-accent="periwinkle"]{--accent:#B9A6FF}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);
  padding:max(20px, env(safe-area-inset-top)) 16px 48px;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
h1,h2{font-family:var(--heading);margin:0;text-wrap:balance}
h1{font-size:1.9rem;line-height:1.1;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:700}
p{margin:0}
.eyebrow{font-size:.72rem;letter-spacing:.09em;color:var(--muted);font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sample{font-size:.78rem;color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
header{display:flex;flex-direction:column;gap:6px}
.notice{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-weight:600;font-size:.9rem}

/* Today's load */
.load{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.load .big{font-family:var(--heading);font-size:1.5rem;font-weight:700}
.bar{grid-column:1/-1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--bar);border-radius:99px;transition:width .3s}
.pill{font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--link);white-space:nowrap}
.pill.heavy{background:var(--warn-soft);color:var(--on-warn, var(--warn))}
.pill.clear{background:transparent;color:var(--good);border:1px solid currentColor}

/* Left hanging */
.hanging{background:var(--warn-soft);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.hanging h2{color:var(--warn)}
.hang-help{font-size:.85rem}
.hang-list{display:flex;flex-direction:column;gap:8px}
.hang-item{background:var(--surface);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.hang-title{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.inline-row{display:flex;gap:6px;flex-wrap:wrap}
.inline-row input{flex:1;min-width:0}

/* Controls */
button{font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 11px}
button:hover{border-color:var(--link)}
button.primary{background:var(--accent);border-color:var(--link);color:var(--surface)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px}

/* Streams and tasks */
.streams{display:flex;flex-direction:column;gap:18px}
.stream{display:flex;flex-direction:column}
.stream-head{display:flex;align-items:center;gap:8px;padding:0 2px 6px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--c)}
.stream-head .count{margin-left:auto;font-size:.8rem;color:var(--muted)}
.task{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:start}
.task+.task{margin-top:6px}
.check{width:28px;height:28px;border-radius:8px;border:2px solid var(--muted);background:transparent;padding:0;display:grid;place-items:center}
.check svg{width:16px;height:16px;stroke:var(--surface);stroke-width:3;fill:none;opacity:0}
.task.done .check{background:var(--c);border-color:var(--c)}
.task.done .check svg{opacity:1}
.t-main{min-width:0;overflow-wrap:anywhere}
.t-title{font-weight:600}
.task.done .t-title{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.t-detail{font-size:.82rem;color:var(--muted)}
.t-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.est{font-size:.78rem;color:var(--muted)}
.tag{font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 5px;white-space:nowrap}
.notebtn{border:0;background:none;padding:0;font-size:.78rem;color:var(--link);font-weight:600}
.note{grid-column:2/-1;font-size:.85rem;background:var(--bg);border-radius:8px;padding:6px 9px;margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.note-edit{grid-column:2/-1;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.note-edit textarea{min-height:56px;resize:vertical}
.closed{text-align:center;padding:14px;border:1px dashed var(--good);color:var(--good);border-radius:12px;font-weight:600}
.empty{text-align:center;padding:14px;border:1px dashed var(--line);color:var(--muted);border-radius:12px}

/* Add form */
.add-wrap{display:flex;flex-direction:column;gap:8px}
form.add{display:grid;grid-template-columns:1fr 1fr 90px auto;gap:8px}
form.add #newTitle{grid-column:1/-1}
@media (max-width:440px){form.add{grid-template-columns:1fr 80px}form.add select{grid-column:1/-1}}

/* Consistency */
.cons{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.cons-list{display:flex;flex-direction:column;gap:8px}
.cons-row{display:grid;grid-template-columns:104px 1fr 62px;gap:10px;align-items:center}
.cons-name{display:flex;align-items:center;gap:8px;font-size:.88rem;min-width:0}
.cons-name span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cells{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cell{height:16px;border-radius:4px;background:var(--line)}
.cell.full{background:var(--c)}
.cell.part{background:linear-gradient(to top,var(--c) 50%,var(--line) 50%)}
.cell.none{background:transparent;border:1px dashed var(--line)}
.days{font-size:.68rem;color:var(--muted);text-align:center}
.pct{text-align:right;font-size:.85rem;white-space:nowrap}
.cons-key{font-size:.75rem;color:var(--muted)}

footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Screen switcher */
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;align-self:flex-start}
.tabs a{font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none;padding:6px 16px;border-radius:9px}
.tabs a[aria-current="page"]{background:var(--accent-soft);color:var(--link)}
.tabs a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.view{display:flex;flex-direction:column;gap:22px}

/* Streams screen */
.s-list{display:flex;flex-direction:column;gap:12px}
.s-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.s-card.archived{opacity:.75}
.s-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.s-head h2{margin-right:auto}
.s-head .actions{width:100%}
.s-card form.inline-row input{flex:1}
.r-list{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.r-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.r-main{flex:1;min-width:160px;overflow-wrap:anywhere}
button.link{border:0;background:none;padding:4px 0;color:var(--link);align-self:flex-start}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:32px;height:32px;border-radius:50%;padding:0;background:var(--c);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.s-add{display:flex;flex-direction:column;gap:10px}
.s-add .inline-row input{flex:1}
.r-form{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:10px;padding:10px}
.r-form input,.r-form select{background:var(--surface)}
.r-form-row{display:grid;grid-template-columns:1fr 80px;gap:8px}
.r-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.r-form legend{font-size:.72rem;letter-spacing:.09em;color:var(--muted);font-weight:600;padding:0;margin-bottom:4px}
.opt{display:flex;align-items:center;gap:8px;font-size:.9rem}
.opt input{margin:0;width:18px;height:18px;accent-color:var(--link)}
.days-pick{display:flex;gap:4px;flex-wrap:wrap;padding-left:26px}
.day input{position:absolute;opacity:0;pointer-events:none}
.day span{display:block;min-width:42px;text-align:center;font-size:.8rem;font-weight:600;padding:6px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.day input:checked+span{background:var(--accent);border-color:var(--link);color:var(--surface)}
.day input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.r-form:has(input[value="weekdays"]:not(:checked)) .days-pick,
.r-form:has(input[value="weekly"]:not(:checked)) select[name="weeklyDay"]{opacity:.45}
.r-form select[name="weeklyDay"]{margin-left:26px;align-self:flex-start}
.form-error{color:var(--warn);font-size:.85rem;font-weight:600}
.archived-wrap{display:flex;flex-direction:column;gap:10px}

/* Stream order buttons */
.order{display:flex;gap:4px}
.order button{padding:2px 9px;font-size:.9rem;line-height:1.4}
button:disabled{opacity:.35;cursor:default}
button:disabled:hover{border-color:var(--line)}

/* Week screen */
.week-nav{display:flex;gap:6px;flex-wrap:wrap}
.w-days{display:flex;flex-direction:column;gap:12px}
.w-day{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.w-day.is-today{border-color:var(--link);box-shadow:0 0 0 1px var(--accent)}
.w-day.is-past{background:transparent}
.w-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.w-sum{margin-left:auto;font-size:.8rem;color:var(--muted)}
.w-list{display:flex;flex-direction:column;gap:6px}
.w-task{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:start;padding:8px 10px;border-radius:10px;background:var(--bg);border-left:3px solid var(--c)}
.w-task .check{width:24px;height:24px;border-radius:7px}
.w-task .check svg{width:14px;height:14px}
.w-task.done .check{background:var(--c);border-color:var(--c)}
.w-task.done .check svg{opacity:1}
.w-task.done .t-title{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.w-task.muted .t-title{color:var(--muted)}
.w-task.preview{background:transparent;border:1px dashed var(--line);border-left:3px dashed var(--c)}
.w-glyph{width:24px;height:24px;display:grid;place-items:center;font-weight:700;color:var(--muted)}
.w-glyph.warn{color:var(--warn)}
.w-form{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:10px;padding:10px}
.w-form input,.w-form select,.w-form textarea{background:var(--surface)}
.w-form-row{display:grid;grid-template-columns:1fr 80px;gap:8px}
.w-form textarea{min-height:52px;resize:vertical}
button.danger{color:var(--warn);margin-left:auto}
.w-glyph.good{color:var(--good)}

/* Report screen */
.report{display:flex;flex-direction:column;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:440px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tile .big{font-family:var(--heading);font-size:1.4rem;font-weight:700;line-height:1.2}
.rep-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.rep-row{display:grid;grid-template-columns:minmax(0,1fr) 38px 68px 42px 54px;gap:4px;align-items:center;font-size:.88rem}
.rep-row>span:not(:first-child){text-align:right}
.rep-head{font-size:.62rem;letter-spacing:.05em}
.rep-row .mono{white-space:nowrap}
.rep-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rep-list li{display:flex;gap:10px;align-items:baseline;overflow-wrap:anywhere}
.copy-btn{align-self:flex-start}

/* Backup & install screen */
.backup-status{font-weight:600}
.backup-status.warn{color:var(--warn)}
.install-steps{display:flex;flex-direction:column;gap:8px}
.install-steps .primary{align-self:flex-start}
.footer-link{color:var(--link);font-weight:600;text-decoration:none;white-space:nowrap}
.footer-link:hover{text-decoration:underline}
.notice.ok{background:var(--accent-soft);color:var(--link)}

/* Left hanging, grouped by day */
.hang-list{gap:14px}
.hang-day{display:flex;flex-direction:column;gap:8px}
.hang-day-head{display:flex;align-items:baseline;gap:8px}
.hang-day-head h3{font-family:var(--heading);font-size:.95rem;margin:0;color:var(--warn)}
.hang-cap{font-size:.85rem;font-weight:600;color:var(--warn)}
.bulk-drop input{background:var(--surface)}
.hang-day.compact{background:var(--surface);border-radius:10px;padding:10px 12px}
.hang-day-head .link{margin-left:auto;padding:0}
.hang-compact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.hang-compact li{display:flex;align-items:baseline;gap:8px;overflow-wrap:anywhere}
.hang-compact .dot{transform:translateY(-1px)}

/* "How much time do you have?" card on Today */
.time-card{background:var(--accent-soft);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.time-card h2{color:var(--link)}
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.chip{min-height:44px;padding:6px 4px;font-size:.9rem;border-color:transparent}
.custom-time input{flex:1;min-width:0;background:var(--surface)}
.custom-time button{min-height:40px}
.time-running{display:flex;align-items:center;gap:12px;justify-content:space-between}
a.button{font-weight:600;font-size:.9rem;text-decoration:none;border-radius:8px;padding:10px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap}
a.button.primary{background:var(--accent);border-color:var(--link);color:var(--surface)}
a.button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Next up screen: one task at a time, big buttons within thumb reach */
.next-body{display:flex;flex-direction:column;gap:14px;min-height:calc(100dvh - 190px)}
.next-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.next-left{font-family:var(--heading);font-size:2rem;font-weight:700;line-height:1.1}
.next-rule{font-size:.8rem;color:var(--muted)}
.next-card{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.next-stream{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted)}
.next-title{font-size:1.5rem;line-height:1.2;overflow-wrap:anywhere}
.next-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted)}
.next-card .note{margin:0}
.next-actions{margin-top:auto;position:sticky;bottom:max(12px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;
  background:var(--bg);padding-top:8px}
.next-actions button,.next-summary button.big{min-height:52px;font-size:1rem}
button.big{min-height:60px;font-size:1.1rem;border-radius:12px}
.next-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.next-actions .link{align-self:center;min-height:40px}
.next-form{display:flex;flex-direction:column;gap:8px}
.next-form input{min-height:48px;background:var(--surface)}
.next-progress{text-align:center}
.next-summary{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.over-time{font-size:.82rem;font-weight:600}

/* Heavy day helper */
.lighten-btn{grid-column:1/-1;justify-self:start;color:var(--warn);border-color:var(--warn)}
.lighten{background:var(--surface);border:1px solid var(--warn);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.lighten h2{color:var(--warn)}
.cap-chips{grid-template-columns:repeat(6,1fr);margin-top:6px}
.cap-chips .chip{background:var(--bg);font-size:.82rem;min-height:40px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--surface);border-color:var(--link)}
.lighten-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lighten-row{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:10px;background:var(--bg);border-left:3px solid var(--c)}
.lighten-pick{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.lighten-pick input{width:20px;height:20px;margin-top:2px;accent-color:var(--link);flex:none}
.lighten-pick>span{display:flex;flex-direction:column}
.lighten-row select{background:var(--surface);margin-left:30px}
@media (max-width:440px){.cap-chips{grid-template-columns:repeat(3,1fr)}}

/* First-run setup */
body.setup-mode .tabs, body.setup-mode footer{display:none}
.setup-body{display:flex;flex-direction:column;gap:18px}
.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tpl{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 8px;align-items:center;text-align:left;
  padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);min-height:64px}
.tpl .dot{grid-row:1/3}
.tpl-name{font-size:1rem;font-weight:800;font-family:var(--heading)}
.tpl[aria-pressed="true"]{border-color:var(--c);background:var(--accent-soft)}
.tpl[aria-pressed="true"] .tpl-name::after{content:" ✓";color:var(--link)}
.setup-actions{display:flex;flex-direction:column;gap:10px;position:sticky;bottom:max(12px, env(safe-area-inset-bottom));background:var(--bg);padding-top:8px}
.setup-actions .big:disabled{opacity:.45}
.setup-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.setup-routine{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:4px 0}
.setup-routine input{width:20px;height:20px;margin-top:2px;accent-color:var(--link);flex:none}
.setup-routine>span{display:flex;flex-direction:column}

/* Templates on the Streams screen */
.tpl-pick{display:flex;flex-direction:column;gap:6px}
.tpl-chips{display:flex;flex-wrap:wrap;gap:6px}
.tpl-chip{min-height:36px;padding:4px 12px;border:1px solid var(--line);background:var(--surface)}
.tpl-routines{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}

/* Neglected streams: quiet lines above "Add a task" */
.neglect{display:flex;flex-direction:column;gap:4px}
.neglect-row{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.neglect-row strong{color:var(--ink);font-weight:600}
.neglect-row .link{margin-left:auto;padding:4px 0;white-space:nowrap}

/* Import screen */
.import-body{display:flex;flex-direction:column;gap:14px}
.import-file{align-self:center;overflow-wrap:anywhere}
.field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.field select,.field input{font-weight:400}
.req{color:var(--muted);font-weight:400}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:440px){.map-grid{grid-template-columns:1fr}}
.check-row{display:flex;align-items:center;gap:8px;font-size:.9rem}
.check-row input{width:18px;height:18px;accent-color:var(--link);margin:0;flex:none}
fieldset.past{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
fieldset.past legend{font-size:.85rem;font-weight:600;padding:0;margin-bottom:4px}
.import-summary{font-size:1rem}
.table-wrap{overflow-x:auto}
table.preview{width:100%;border-collapse:collapse;font-size:.85rem}
table.preview th{text-align:left;font-size:.7rem;letter-spacing:.06em;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--line)}
table.preview td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
.skipped summary{cursor:pointer;font-weight:600;color:var(--warn);font-size:.9rem}
.skipped ul{margin:6px 0 0;padding-left:18px;font-size:.85rem;display:flex;flex-direction:column;gap:2px}
table.preview td.nowrap{white-space:nowrap}


/* =========================================================================================
   Themes: shared component styles (colors, shapes and fonts come from the variables above)
   ========================================================================================= */
body{font-weight:500}
h1{font-family:var(--display);letter-spacing:-.02em}
h2,h3{font-family:var(--heading);font-weight:800}
.eyebrow,.r-form legend,table.preview th,.rep-head,.field-label{letter-spacing:.01em;font-size:.78rem;font-weight:700}
.mono,.est,.w-sum,.pct,.next-left,.load .big,.tile .big{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Shapes */
.load,.hanging,.cons,.s-card,.w-day,.tile,.rep-card,.time-card,.next-card,.next-summary,.lighten,.tpl,.tpl-routines,
.empty,.closed,.sample,.notice,.theme-card,.hang-day.compact{border-radius:var(--r-card);box-shadow:var(--shadow)}
.task,.w-task,.hang-item,.lighten-row,.note,.r-form,.w-form,.next-form input{border-radius:var(--r-inner)}
.chip,.day span,.tpl-chip{border-radius:var(--r-chip)}
input,select,textarea{border-radius:var(--r-input);background:var(--surface);border:1.5px solid var(--line);min-height:44px}
textarea{min-height:56px}
.check{border-radius:var(--r-tick);border-color:var(--muted)}
.load,.cons,.s-card,.w-day,.tile,.rep-card,.next-card,.next-summary,.tpl,.tpl-routines,.theme-card{background:var(--surface);border-color:var(--line)}

/* Buttons: same labels in every theme; at least 44px to tap */
button,a.button{min-height:44px;border-radius:var(--r-btn);border:1.5px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);
  padding:8px 16px;font-weight:700;font-size:.85rem}
button:hover{border-color:var(--btn-border);filter:brightness(.97)}
button.primary,a.button.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg)}
button.link,.notebtn{min-height:44px;border:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.notebtn{min-height:32px;padding:4px 0;position:relative}
.notebtn::after{content:"";position:absolute;inset:-6px -4px}
button.danger{color:var(--warn)}
button:disabled:hover{border-color:var(--btn-border)}
.order button{min-width:44px}
.check,.swatch{position:relative;min-height:0}
.check::after,.swatch::after{content:"";position:absolute;inset:-8px}
.check{width:28px;height:28px;border-width:2px}
.task.done .check,.w-task.done .check{background:var(--tick-bg);border-color:var(--tick-bg)}
.check svg{stroke:var(--tick-fg)}
.swatch{width:36px;height:36px;border-color:var(--surface)}
.day span{min-height:44px;display:grid;place-items:center;border:1.5px solid var(--line)}
.day input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip{border:1.5px solid transparent;background:var(--surface);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.opt input,.check-row input,.setup-routine input,.lighten-pick input{accent-color:var(--check)}
.tabs{border-radius:calc(var(--r-btn) + 4px);background:var(--surface);border:1.5px solid var(--line)}
.tabs a{min-height:44px;display:grid;place-items:center;padding:0 14px;border-radius:var(--r-btn);color:var(--muted);font-weight:700}
.tabs a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.footer-link,.notice.ok{color:var(--link)}
.footer-link{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.notice{background:var(--warn-soft);color:var(--on-warn, var(--warn))}
.notice.ok{background:var(--accent);color:var(--on-accent)}
.pill{background:var(--accent);color:var(--on-accent);font-weight:700}
.pill.heavy{background:var(--warn-soft);color:var(--on-warn, var(--warn))}
.tag{border-color:var(--line)}
.cell{background:var(--track)}
.cell.none{border-color:var(--faint);border-style:dashed}
.bar{background:var(--track)}

/* Today: the "how much time" block is the one solid accent block */
.time-card{background:var(--accent);color:var(--on-accent)}
.time-card h2,.time-card .t-detail,.time-card .eyebrow{color:var(--on-accent)}
.time-card .chip{background:var(--surface);color:var(--ink)}
.time-card button:not(.chip){background:var(--surface);color:var(--ink);border-color:var(--surface)}
.time-card a.button.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.load-line{font-size:1.05rem;font-weight:700}
.load-line .mono{font-weight:500}
.lighten{border:1.5px solid var(--warn)}
.lighten-btn{color:var(--warn);border-color:var(--warn);background:transparent}
.closed{border:1.5px dashed var(--good);color:var(--good);font-size:1rem}
.empty{border:1.5px dashed var(--faint);color:var(--muted)}

/* Theme picker (setup step 1 and Settings) */
.theme-cards{display:grid;gap:10px}
.theme-card{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;text-align:left;
  padding:12px 14px;border:2px solid var(--line);min-height:76px;color:var(--ink)}
.theme-card[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.theme-card[aria-pressed="true"] .theme-name::after{content:" ✓"}
.theme-swatch{grid-row:1/3;width:64px;height:48px;border-radius:10px;display:flex;align-items:flex-end;gap:4px;padding:6px;border:1px solid rgba(0,0,0,.12)}
.theme-swatch i{flex:1;height:60%;border-radius:4px}
.theme-swatch i:nth-child(2){height:85%}
.theme-name{font-weight:800;font-size:1rem}
.accent-pick{display:flex;flex-direction:column;gap:8px}
.accent-swatch{background:var(--c)}
.accent-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}

/* ---------- A · Soft planner ---------- */
:root[data-theme="soft"] h1{font-size:2.1rem;line-height:1.05}
:root[data-theme="soft"] .hanging{background:transparent;border:1.5px dashed var(--ink)}
:root[data-theme="soft"] .hanging h2,:root[data-theme="soft"] .hang-day-head h3{color:var(--ink)}
:root[data-theme="soft"] .hang-item{border:1px solid var(--line)}
:root[data-theme="soft"] .task{border-left-width:1px}
:root[data-theme="soft"] .task .t-title{font-weight:700}

/* ---------- B · Scrapbook ---------- */
:root[data-theme="scrap"] h1{font-size:2.8rem;line-height:1.05;letter-spacing:0;font-weight:700;
  /* washi tape under each line of the title */
  text-decoration:underline;text-decoration-thickness:.32em;text-underline-offset:-.22em;text-decoration-skip-ink:none;
  text-decoration-color:color-mix(in srgb, var(--accent) 70%, transparent)}
:root[data-theme="scrap"] h2,:root[data-theme="scrap"] h3{font-size:1.5rem;font-weight:700;letter-spacing:0}
:root[data-theme="scrap"] .stream-head h2,:root[data-theme="scrap"] .s-head h2,:root[data-theme="scrap"] .cons-name,
:root[data-theme="scrap"] .next-stream,:root[data-theme="scrap"] .time-card h2,:root[data-theme="scrap"] .load-line,
:root[data-theme="scrap"] .closed,:root[data-theme="scrap"] .empty,:root[data-theme="scrap"] .theme-name,:root[data-theme="scrap"] .tpl-name{font-family:var(--hand);font-weight:700}
:root[data-theme="scrap"] .load-line,:root[data-theme="scrap"] .closed,:root[data-theme="scrap"] .empty{font-size:1.4rem}
:root[data-theme="scrap"] .cons-name{font-size:1.15rem}
:root[data-theme="scrap"] .time-card{background:var(--surface);color:var(--ink)}
:root[data-theme="scrap"] .time-card h2,:root[data-theme="scrap"] .time-card .t-detail{color:var(--ink)}
:root[data-theme="scrap"] .time-card .chip{background:var(--bg)}
:root[data-theme="scrap"] .hanging{background:var(--surface);box-shadow:var(--shadow)}
:root[data-theme="scrap"] .hang-item{border:1px solid var(--line)}
:root[data-theme="scrap"] .tabs a[aria-current="page"]{background:var(--ink);color:var(--surface)}
/* Washi tape on cards */
:root[data-theme="scrap"] :is(.time-card,.load,.hanging,.rep-card,.w-day.is-today,.next-card,.next-summary,.cons){position:relative}
:root[data-theme="scrap"] :is(.time-card,.load,.hanging,.rep-card,.w-day.is-today,.next-card,.next-summary,.cons)::before{content:"";position:absolute;
  top:-9px;left:calc(50% - 40px);width:80px;height:18px;background:var(--accent);opacity:.7;transform:rotate(-2deg);pointer-events:none}
:root[data-theme="scrap"] :is(.rep-card,.cons,.hanging):nth-child(even)::before{left:auto;right:18px;transform:rotate(3deg)}
/* A few cards slightly tilted, like glued-in paper */
:root[data-theme="scrap"] :is(.w-day,.s-card,.rep-card,.tile):nth-child(odd){transform:rotate(.6deg)}
:root[data-theme="scrap"] :is(.w-day,.s-card,.rep-card,.tile):nth-child(even){transform:rotate(-.6deg)}
:root[data-theme="scrap"] .load{transform:rotate(-.6deg)}

/* ---------- C · Cozy night ---------- */
:root[data-theme="cozy"] h1{font-size:2.1rem;font-weight:700;letter-spacing:-.01em}
:root[data-theme="cozy"] h2,:root[data-theme="cozy"] h3{font-weight:600;font-size:1.15rem}
:root[data-theme="cozy"] :is(input,select,textarea){background:var(--chip);border-color:var(--chip);color:var(--ink)}
:root[data-theme="cozy"] .chip{background:var(--chip);color:var(--ink)}
:root[data-theme="cozy"] .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
:root[data-theme="cozy"] .time-card .chip{background:#2A2140;color:var(--ink)}
:root[data-theme="cozy"] .time-card :is(input){background:#2A2140;border-color:#2A2140}
:root[data-theme="cozy"] .tabs{background:var(--surface);border-color:var(--surface)}
:root[data-theme="cozy"] .task,:root[data-theme="cozy"] .w-task{border-color:transparent}
:root[data-theme="cozy"] .note{background:var(--chip)}
:root[data-theme="cozy"] .w-task{background:var(--chip)}
:root[data-theme="cozy"] .theme-swatch{border-color:rgba(255,255,255,.18)}
/* Stream names as small pills in the stream color */
:root[data-theme="cozy"] .stream-head h2,:root[data-theme="cozy"] .s-head h2{background:var(--c);color:#2A2140;border-radius:999px;padding:2px 12px;font-size:.95rem}
:root[data-theme="cozy"] .stream-head .dot,:root[data-theme="cozy"] .s-head .dot{display:none}
/* Left hanging: warm peach card with dark text */
:root[data-theme="cozy"] .hanging{background:#FFD9A8;color:#2A2140;--ink:#2A2140;--muted:#5B4A78;--link:#2A2140;--surface:#FFE9CC;--line:#F1C48F;
  --btn-bg:transparent;--btn-fg:#2A2140;--btn-border:#2A2140;--primary-bg:#2A2140;--primary-fg:#FFD9A8;--warn:#2A2140;--chip:#FFE9CC}
:root[data-theme="cozy"] .hanging :is(input){background:#FFF4E5;border-color:#F1C48F;color:#2A2140}
:root[data-theme="cozy"] .hang-item,:root[data-theme="cozy"] .hang-day.compact{background:#FFE9CC}
.load .pill{grid-column:1/-1;justify-self:start;white-space:normal;font-size:.85rem;padding:4px 12px}
:root[data-theme="scrap"] .time-card button:not(.chip){background:var(--bg);border-color:var(--ink)}
.accent-pick{margin-top:10px}


/* =========================================================================================
   Compact Today: on a normal day everything fits on one phone screen
   ========================================================================================= */
#view-today{gap:14px}
.today-head{gap:4px}
.header-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.header-row h1{min-width:0}
.load-pill{flex:none;align-self:center;border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:700;white-space:nowrap;
  background:var(--ink);color:var(--bg)}
.load-pill[data-state="heavy"]{background:var(--warn-soft);color:var(--on-warn, var(--warn));box-shadow:inset 0 0 0 1.5px var(--warn)}
.load-pill[data-state="closed"]{background:transparent;color:var(--good);box-shadow:inset 0 0 0 1.5px var(--good)}
.heavy-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem;font-weight:700;color:var(--warn)}
.heavy-line .link{padding:0 2px;min-height:0;position:relative}
.heavy-line .link::after{content:"";position:absolute;inset:-12px -6px}
.sample{align-self:flex-start;border:0;padding:0;font-size:.8rem}
.sample a{color:var(--link);font-weight:700;display:inline-block;padding:10px 0;margin:-10px 0}

/* Time row */
.time-card{padding:10px 12px;gap:8px}
.time-card h2{font-size:.98rem}
.chips{grid-template-columns:repeat(6,1fr);gap:5px}
.chip{min-height:44px;padding:4px 2px;font-size:.8rem;white-space:nowrap}
.time-hint{font-size:.78rem}

/* Left-hanging strip */
.hanging{padding:6px 6px 6px 14px;gap:8px}
.hang-strip{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hang-strip h2{font-size:.95rem;line-height:1.3}
.hang-strip button{flex:none}
.hang-body{display:flex;flex-direction:column;gap:10px;padding:0 8px 8px 0}
.hanging.demo{pointer-events:none}

/* Tasks: shorter rows (the tick still has a 44px tap area) */
.streams{gap:10px}
.stream-head{padding:0 2px 4px;min-height:28px}
.stream-head h2{font-size:.95rem}
.task{padding:6px 10px;gap:0 10px;align-items:center}
.task+.task{margin-top:4px}
.t-detail{line-height:1.35}
.t-side{flex-direction:row;align-items:center;gap:8px}
.tag{border:0;padding:0;font-size:.85rem}
.stream-fold{all:unset;cursor:pointer;display:flex;align-items:center;min-height:28px}
.stream-fold:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.stream-folded{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 12px;text-align:left;
  background:transparent;border:1.5px dashed var(--line);color:var(--muted);font-size:.9rem}
.stream-folded .sf-name{font-weight:700;color:var(--ink)}
.stream-folded .sf-tick{color:var(--good);font-weight:800}
.stream-folded .count{margin-left:auto;font-size:.8rem}
.closed,.empty{padding:10px 12px;font-size:.95rem}
.empty a{color:var(--link);font-weight:700}
.empty-how{display:block;font-size:.82rem}
.neglect-row{min-height:44px}

/* Add a task: round ＋ button and a bottom sheet */
.fab{position:fixed;z-index:20;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;padding:0;font-size:1.7rem;line-height:1;display:grid;place-items:center;
  background:var(--primary-bg);color:var(--primary-fg);border:0;box-shadow:0 6px 18px rgba(0,0,0,.22)}
@media (min-width:600px){.fab{right:calc(50% - 280px)}}
.sheet-wrap{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,16,30,.45)}
.sheet{position:relative;width:100%;max-width:560px;background:var(--bg);border-radius:18px 18px 0 0;
  padding:18px 16px max(16px, env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.2)}
form.sheet.add{grid-template-columns:90px 1fr 1fr;align-items:center}
form.sheet.add h2{grid-column:1/-1}
form.sheet.add #newTitle,form.sheet.add select{grid-column:1/-1}
form.sheet.add button{grid-row:auto}

/* First-run tour: dim everything, light up one thing */
.tour{position:fixed;inset:0;z-index:40}
.tour-hole{position:fixed;border-radius:var(--r-card);box-shadow:0 0 0 200vmax rgba(15,10,25,.62);pointer-events:none;transition:all .2s}
.tour-tip{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;background:var(--surface);color:var(--ink);
  border-radius:var(--r-card);padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.tour-tip p{font-size:1rem;font-weight:600}
.tour-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
:root[data-theme="scrap"] .tour-tip p{font-family:var(--hand);font-size:1.35rem;line-height:1.25}
:root[data-theme="cozy"] .tour-tip{border:1.5px solid var(--accent)}

/* Theme touches on the compact parts */
:root[data-theme="scrap"] .load-pill{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transform:rotate(2deg)}
:root[data-theme="scrap"] .load-pill[data-state="heavy"]{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1.5px var(--warn)}
:root[data-theme="scrap"] .hang-strip h2{font-family:var(--hand);font-size:1.35rem;font-weight:700}
:root[data-theme="scrap"] .time-card h2{font-size:1.35rem}
:root[data-theme="scrap"] .stream-head h2{font-size:1.3rem}
:root[data-theme="scrap"] .stream-folded .sf-name{font-family:var(--hand);font-size:1.2rem}
:root[data-theme="scrap"] .hanging::before{width:56px;height:14px;top:-7px}
:root[data-theme="cozy"] .load-pill{background:var(--accent);color:var(--on-accent)}
:root[data-theme="cozy"] .load-pill[data-state="heavy"]{background:var(--warn-soft);color:var(--on-warn)}
:root[data-theme="cozy"] .stream-head h2{font-size:.9rem}
:root[data-theme="cozy"] .stream-folded{border-color:var(--chip)}
:root[data-theme="cozy"] .sheet{background:var(--surface)}
/* Today title sits next to the load pill, so it is a bit smaller than on other screens */
#view-today{gap:12px}
#todayTitle{font-size:1.75rem}
:root[data-theme="scrap"] #todayTitle{font-size:2.3rem}
:root[data-theme="cozy"] #todayTitle{font-size:1.8rem}
.streams{gap:8px}
.stream-head{min-height:24px;padding-bottom:3px}
.task{padding:5px 10px}
:root[data-theme="scrap"] #view-today .stream-head h2{font-size:1.15rem;line-height:1.1}
:root[data-theme="scrap"] #view-today .time-card h2{font-size:1.2rem;line-height:1.1}
.time-card .chips+.time-hint,.time-card form+.time-hint{margin-top:-2px}

/* QC fixes (Oct 6): the list clears the ＋ button, quieter rows, Today titles on one line */
#view-today{padding-bottom:84px} /* the last row can always scroll clear of the ＋ button */
button.t-main{all:unset;box-sizing:border-box;display:block;min-width:0;min-height:30px;padding:2px 0;cursor:pointer;overflow-wrap:anywhere;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
button.t-main:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.t-main .t-line,.t-main .t-detail{display:block}
.note-icon{font-size:.75rem;vertical-align:1px}
.row-more{grid-column:2/-1;display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.row-more .note{grid-column:auto;margin-top:0}
.row-more .actions button{min-height:40px;padding:6px 14px}
:root[data-theme="soft"] #todayTitle{font-size:clamp(1.2rem, 6vw, 1.75rem);letter-spacing:-.03em}
.wrap{gap:16px}
#view-today .streams{gap:6px}
#view-today .stream-head{min-height:22px;padding-bottom:2px}
#view-today .task+.task{margin-top:3px}
:root[data-theme="cozy"] #view-today .stream-head h2{padding:0 10px;line-height:1.55}
:root[data-theme="cozy"] .hang-strip h2{font-size:1rem;line-height:1.25}

/* =========================================================================================
   Ready to sell: unlock screen, top line, info sheet, update line, error screen, help pages
   ========================================================================================= */
/* Unlock */
.unlock-body{display:flex;flex-direction:column;gap:18px;padding-top:6vh}
.unlock-body header{gap:8px}
.unlock-form{display:flex;flex-direction:column;gap:10px}
.unlock-form input{font-family:var(--mono);letter-spacing:.02em;font-size:16px}
.unlock-form .big{min-height:50px;font-size:1rem}
.unlock-line{font-size:.9rem}
.form-error.unlock-line{color:var(--warn);font-weight:700}
.unlock-links{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
:root[data-theme="cozy"] .form-error.unlock-line{color:var(--accent)}

/* One line at the top of Today */
.top-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:.82rem;font-weight:600;line-height:1.35;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-chip);padding:7px 12px}
.top-line .link{min-height:0;padding:0 2px;font-size:.82rem;position:relative}
.top-line .link::after{content:"";position:absolute;inset:-12px -6px} /* still easy to tap */
.top-line .link.quiet{color:var(--muted);margin-left:auto}
.top-line.sample{background:none;border:0;box-shadow:none;padding:0;font-weight:500;color:var(--muted);font-size:.8rem}
.top-line.sample a{color:var(--link);font-weight:700;display:inline-block;padding:10px 0;margin:-10px 0}
:root[data-theme="cozy"] .top-line:not(.sample){background:var(--chip);border-color:var(--chip)}

/* Info sheet (Where's my key? · Add to your home screen · What's new) */
.info-sheet{display:flex;flex-direction:column;gap:12px;max-height:85vh;overflow:auto}
.info-body{display:flex;flex-direction:column;gap:10px}
.how-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:how}
.how-steps li{display:flex;align-items:center;gap:12px;counter-increment:how}
.how-steps li::before{content:counter(how);font-family:var(--mono);font-weight:700;color:var(--muted);width:1em}
.how-icon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center}
.how-icon svg{width:24px;height:24px;fill:none;stroke:var(--link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.changes h3{font-size:1rem;margin:0 0 4px}
.changes ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px}
:root[data-theme="scrap"] .info-sheet h2{font-family:var(--hand);font-size:1.6rem}

/* Settings */
.link-list{display:flex;flex-direction:column}
.link-list a{min-height:44px;display:flex;align-items:center;color:var(--link);font-weight:700;border-bottom:1px solid var(--line)}
.link-list a:last-child{border-bottom:0}

/* "New version ready" */
.toast{position:fixed;z-index:35;left:16px;right:88px;bottom:max(16px, env(safe-area-inset-bottom));max-width:420px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 14px;font-weight:700;font-size:.9rem;
  background:var(--ink);color:var(--bg);border-radius:var(--r-card);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* Error screen */
.crash{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px 16px}
.crash-box{max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px}
body.crashed{overflow:hidden}

/* Help & legal pages */
.page{padding-top:8px}
.back-link{align-self:flex-start}
/* "Something didn't work. Try again." (a stray error; the app stays on screen) */
.error-toast{top:max(16px, env(safe-area-inset-top));bottom:auto;right:16px;margin:0 auto;padding:12px 14px;
  background:var(--warn-soft);color:var(--on-warn, var(--warn));border:1.5px solid var(--warn)}
/* What the app does, in one line (unlock screen, first setup step) */
.pitch{font-weight:700;font-size:1rem;line-height:1.4;color:var(--ink);border-left:3px solid var(--accent);padding-left:10px}
/* Feedback (beta) */
.feedback-link{text-align:center;font-size:.85rem}
.feedback-link .link{color:var(--muted)}
.feedback-form{display:flex;flex-direction:column;gap:10px}
.feedback-form textarea{min-height:120px;resize:vertical}