/* =====================================================================
   planner.css: the original planner's styles, plus the now-bar,
   dashboard, tasks and dialogs.
   Block colors no longer come from per-category classes (.blk.Gym ...).
   Every colored element sets --c (and --ci for text) inline from the
   category data, so one color edit shows up everywhere.
   ===================================================================== */
/* Design system (OD-6 v2, calmer: docs/next-version/13-DESIGN-SYSTEM.md): lavender paper, white cards with indigo-tinted shadows,
   one indigo primary, clay orange as the second brand color, on Apple's interaction patterns (grouped lists, switches, sheets,
   44 px targets). Fonts (OFL, self-hosted in fonts/): Readex Pro for letters, Mirsa Num (Inter's digits with tabular figures built in)
   for digits and signs, because Readex has no tabular figures; each file loads only when the page has a character in its range.
   Roles: --tint = interactive/brand; --accent = second brand color; --green = done/kept/income; --accent-text = now/today;
   --red = late/over/expense. Spacing on a 4 px grid. Components use these, never raw values. */
@font-face{font-family:"Readex Pro";font-weight:160 700;font-display:swap;src:url(fonts/readexpro-latin.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-weight:160 700;font-display:swap;src:url(fonts/readexpro-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Mirsa Num";font-weight:100 900;font-display:swap;src:url(fonts/mirsa-num.woff2) format('woff2');
  unicode-range:U+0025,U+002B-002F,U+0030-0039,U+003A,U+00B7,U+00D7,U+2212}
:root{
  --paper:#F6F6FB; --ink:#1B1B2B; --muted:#62627A; --line:#E2E2EE; --card:#FFFFFF; --sunk:#EEEEF6; --on-ink:#fff;
  --tint:#4F4A9E; --on-tint:#fff; --accent:#D2702F; --green:#176B41; --green-soft:#E6F5EC; --red:#B22F39;
  /* Text on the orange fill is ink, never white; orange as text uses --accent-text. */
  --on-accent:#241206; --accent-text:#8A431B; --nav-ink:#4F4F66; --focus:#3F3B84; --on-green:#fff; --on-red:#fff; --knob:#fff;
  /* Tint and accent as rgb triplets for shadows; priority chips; timeline gutter; borders; fallbacks. */
  --tint-rgb:79,74,158; --accent-rgb:210,112,47;
  --pri-urgent-bg:#A34848; --pri-urgent-fg:#fff; --pri-high-bg:#F2D7D7; --pri-high-fg:#7A2F2F;
  --gut-1:#F6E7C1; --gut-2:#EEF3F7; --gut-3:#E6EEF4; --gut-4:#D7C9B0; --gut-5:#8E8AA8; --gut-6:#3B4A8A; --gut-ink:#1C1C1E; --gut-ink-late:#fff;
  --dash:#B8BDC7; --ctl-border:#7C7C94; --grabber:#C7C7CC; --block-fallback:#1F2A37; --block-fallback-ink:#fff; --spark:#FFB38A;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --tap:44px; --field-pad:11px 14px; /* --tap: the smallest target (HIG); --field-pad: text fields, copied by the capture overlay */ --r1:8px; --r2:12px; --r3:16px; --r4:20px; --pill:999px;
  --e1:0 1px 2px rgba(35,33,75,.06), 0 4px 12px rgba(35,33,75,.06);
  --e2:0 2px 4px rgba(35,33,75,.06), 0 8px 24px rgba(35,33,75,.10);
  --e3:0 4px 8px rgba(35,33,75,.08), 0 16px 40px rgba(35,33,75,.16);
  --hover:rgba(var(--tint-rgb),.06); --press:rgba(var(--tint-rgb),.12);
  --ease:cubic-bezier(.25,.1,.25,1); --dur:200ms;
  --ppm:1.6; --wppm:.55; color-scheme:light;
}
/* Dark mode: only the neutrals and system colors change. Block colors stay as you picked them, with their own text color (--ci). */
/* Dark values: by system setting, or forced with <html data-theme="dark"> (Settings > Appearance; js/theme.js sets it before first
   paint). Keep the two blocks identical (tools/contrast-check.js fails if they differ); data-theme="light" overrides the system setting. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --paper:#101018; --ink:#EEEEF6; --muted:#9E9EB6; --line:#2E2E42; --card:#1A1A27; --sunk:#101018; --on-ink:#101018;
         --tint:#AFAEDD; --on-tint:#17162F; --on-green:#07210F; --on-red:#240A0D; --spark:#5A2A0C; --accent:#EEA06F; --green:#7CC49A; --green-soft:#0C3A24; --red:#EE8F95; color-scheme:dark;
         --accent-text:#EEA06F; --nav-ink:#B9B9CE; --focus:#CDCDEA; --tint-rgb:175,174,221; --accent-rgb:238,160,111;
         --gut-1:#3A3320; --gut-2:#2A3140; --gut-3:#263140; --gut-4:#3A3426; --gut-5:#3E3C58; --gut-6:#1E2650; --gut-ink:#E6E6F0; --gut-ink-late:#fff;
         --e1:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.35); --e2:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.45); --e3:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 36px rgba(0,0,0,.6);
         --hover:rgba(var(--tint-rgb),.10); --press:rgba(var(--tint-rgb),.18); }
}
:root[data-theme="dark"]{ --paper:#101018; --ink:#EEEEF6; --muted:#9E9EB6; --line:#2E2E42; --card:#1A1A27; --sunk:#101018; --on-ink:#101018;
         --tint:#AFAEDD; --on-tint:#17162F; --on-green:#07210F; --on-red:#240A0D; --spark:#5A2A0C; --accent:#EEA06F; --green:#7CC49A; --green-soft:#0C3A24; --red:#EE8F95; color-scheme:dark;
         --accent-text:#EEA06F; --nav-ink:#B9B9CE; --focus:#CDCDEA; --tint-rgb:175,174,221; --accent-rgb:238,160,111;
         --gut-1:#3A3320; --gut-2:#2A3140; --gut-3:#263140; --gut-4:#3A3426; --gut-5:#3E3C58; --gut-6:#1E2650; --gut-ink:#E6E6F0; --gut-ink-late:#fff;
         --e1:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.35); --e2:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.45); --e3:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 36px rgba(0,0,0,.6);
         --hover:rgba(var(--tint-rgb),.10); --press:rgba(var(--tint-rgb),.18); }
/* The page background: a gradient from the current block's color into the next one's. ui.js tick() sets
   --bgc/--bgn and the mix strengths (weaker for dark block colors and in dark mode, so text keeps its contrast).
   Registered as colors so the change between blocks fades instead of jumping. */
@property --bgc{syntax:'<color>';inherits:true;initial-value:transparent}
@property --bgn{syntax:'<color>';inherits:true;initial-value:transparent}
*{box-sizing:border-box}
html{background:var(--paper)}
body{min-height:100vh;background:linear-gradient(180deg, color-mix(in srgb, var(--bgc) var(--mixa,0%), var(--paper)) 0, color-mix(in srgb, var(--bgn) var(--mixb,0%), var(--paper)) 100vh) fixed}
@media (prefers-reduced-motion:no-preference){ body{transition:--bgc 1s, --bgn 1s} }
html,body{margin:0;color:var(--ink);font-family:"Mirsa Num","Readex Pro",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45;letter-spacing:0;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r1)}
html{scroll-padding-block:72px 96px}   /* 2.4.11: a focused control scrolls clear of the sticky Now bar above and the tab bar below */
html{-webkit-tap-highlight-color:transparent}   /* no smooth scroll-behavior: it animates focus scrolling too, so a control reached by Tab sat under the tab bar until the scroll ended (2.4.11) */
h1,h2,h3{text-wrap:balance} p{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important} }
/* Pressable things: a state layer on hover, a small press. Transform and color only, so nothing shifts. */
button,.btn,summary{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform 120ms var(--ease)}
button:not(:disabled):active,summary:active{transform:scale(.97)}
button:disabled{cursor:not-allowed}
/* One field style for every text input outside dialogs. */
.field,.task-add input,.task-add select,.gate input,.msearch input{padding:var(--field-pad);border:1px solid transparent;border-radius:var(--r2);background:var(--card);color:var(--ink);font-size:16px;box-shadow:var(--e1)}
.field:hover,.task-add input:hover,.task-add select:hover,.msearch input:hover{border-color:var(--line)}
.field:focus,.task-add input:focus,.task-add select:focus,.gate input:focus,.msearch input:focus,.tlabel input:focus,.dlg input:focus,.dlg select:focus,.dlg textarea:focus,.grid input:focus{outline:none;border-color:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent)}
.wrap{max-width:760px;margin:0 auto;padding:var(--s3) var(--s4) 60px}
.wrap.wide{max-width:1100px}
[hidden]{display:none !important}

header{display:flex;align-items:flex-start;gap:var(--s3)}
header > div{flex:1;min-width:0}
.gear{flex:none;width:var(--tap);height:var(--tap);border-radius:50%;display:grid;place-items:center;color:var(--tint);margin-top:2px}
.gear:hover{background:var(--hover)}
.gear[aria-pressed="true"]{background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
header h1{font-size:28px;font-weight:600;letter-spacing:-.01em;margin:var(--s1) 0 0;line-height:1.2}
@media (max-width:560px){ header h1{font-size:26px} }

.tabbar{display:flex;gap:2px;margin:14px 0 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabbar :is(a,button){display:flex;align-items:center;gap:8px;padding:10px 12px 12px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;position:relative}
.tabbar a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.tabbar :is(a,button):hover{color:var(--ink)}
.tabbar nav{display:contents} .tabbar a{text-decoration:none}
.tabbar [data-view=now]{order:1} .tabbar [data-view=plan]{order:2} .tabbar .fab{order:3} .tabbar [data-view=tasks]{order:4} .tabbar [data-view=money]{order:5}
/* Phones and tablets: a bottom tab bar. */
@media (max-width:899px){
  .tabbar{position:fixed;inset-inline:0;bottom:0;z-index:30;margin:0;border:0;border-top:1px solid var(--line);background:color-mix(in srgb, var(--card) 88%, transparent);
      -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
      padding:0 0 env(safe-area-inset-bottom);justify-content:space-around;overflow:visible}
  .tabbar :is(a,button){flex:1;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:6px 0 2px;margin:0;border:0;font-size:11px;font-weight:500;color:var(--nav-ink);letter-spacing:0}
  .tabbar :is(a,button) svg{width:24px;height:24px}
  .tabbar .fab{flex:0 0 72px;color:var(--on-tint)}
  .tabbar .fab svg{width:52px;height:52px;padding:13px;box-sizing:border-box;border-radius:50%;background:var(--tint);box-shadow:0 8px 20px rgba(var(--tint-rgb),.4);margin-top:-26px}
  .tabbar .fab span{color:var(--muted)}
  .tabbar .fab:hover{color:var(--on-tint)}
  .tabbar a[aria-current="page"]{color:var(--tint)}
  .tabbar :is(a,button):hover{color:var(--tint)}
  .tabbar .badge{position:absolute;top:4px;inset-inline-start:calc(50% + 10px);margin:0}
  /* On a phone the bar is one line: the block and what's left. The Now tab has the details. */
  .nowbar .tm,.nowbar .nx,.nowbar .lbl{display:none}
  .wrap{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
/* Wide screens: a left rail. */
@media (min-width:900px){
  .wrap{display:grid;grid-template-columns:140px minmax(0,1fr);column-gap:var(--s8);max-width:980px}
  .wrap.wide{max-width:1280px}
  .wrap > header{grid-column:1/-1}
  .wrap > section,.wrap > .plan-seg{grid-column:2}
  .tabbar{grid-column:1;grid-row:2 / span 3;align-self:start;position:sticky;top:96px;flex-direction:column;border:0;margin:14px 0 0}
  .tabbar :is(a,button){text-align:start;margin:0 0 2px;padding:10px 12px;border-bottom:0;border-radius:var(--r2)}
  .tabbar :is(a,button):hover{background:var(--hover)}
  .tabbar a[aria-current="page"]{background:var(--card);color:var(--tint);font-weight:600;box-shadow:var(--e1)}
  .tabbar .fab{order:-1;margin:0 0 14px;background:var(--tint);color:var(--on-tint);font-weight:600;box-shadow:0 6px 16px rgba(var(--tint-rgb),.28)}
  .tabbar .fab:hover{background:color-mix(in srgb, var(--tint) 88%, #000);color:var(--on-tint)}
}
.plan-seg{margin:var(--s4) 0;justify-self:start;width:max-content}
.plan-seg button{min-width:88px}
.tabbar .badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--red);color:var(--on-red);font-size:11px;line-height:18px;text-align:center;margin-inline-start:4px}

/* ---------- persistent now-bar: always visible, colored by the current block ---------- */
.nowbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;width:100%;padding:10px 16px calc(10px);
  padding-top:max(10px, env(safe-area-inset-top));background:var(--c,var(--block-fallback));color:var(--ci,var(--block-fallback-ink));text-align:start;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nowbar .lbl{font-size:11px;font-weight:600;letter-spacing:.08em;opacity:.75}
.nowbar .nm{font-weight:600;font-size:17px}
.nowbar .tm,.nowbar .left{font-variant-numeric:tabular-nums;font-size:14px}
.nowbar .left{font-weight:600}
.nowbar .nx{margin-inline-start:auto;font-size:14px;opacity:.9}
.nowbar .bar{flex-basis:100%;height:3px;border-radius:2px;background:rgba(0,0,0,.12);margin-top:var(--s2);overflow:hidden}
.nowbar .bar i{display:block;height:100%;background:currentColor;opacity:.6}
@media (max-width:560px){ .nowbar .nx{margin-inline-start:0;flex-basis:100%} }

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:640px){ .dash{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--card);border-radius:var(--r3);padding:var(--s4);box-shadow:var(--e1)}
.card h3{margin:0 0 var(--s2);font-size:16px;font-weight:600;color:var(--ink)}
.card.cur{grid-column:1/-1;border:0;background:var(--c,var(--ink));color:var(--ci,var(--on-ink));padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r4);box-shadow:var(--e2)}
.card.cur .bar{display:block;height:4px;border-radius:2px;background:rgba(0,0,0,.14);margin:var(--s3) 0 var(--s1);overflow:hidden}
.card.cur .bar i{display:block;height:100%;background:currentColor;opacity:.7}
.card.cur .then{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid color-mix(in srgb, currentColor 20%, transparent);font-size:15px}
body.on-now .nowbar{display:none}
.card .big{font-size:34px;font-weight:600;line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance}
.card .sub{font-variant-numeric:tabular-nums;opacity:.85}
.card .rem{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.card .meta{font-size:13px;opacity:.8;margin-top:var(--s2)}
.card.span{grid-column:1/-1}
.chip{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;padding:var(--s2) var(--s3);border-radius:var(--pill);background:var(--ink);color:var(--on-ink);font-size:14px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.08);flex:none}
.rlist{list-style:none;margin:0;padding:0;font-size:16px}
.rlist li{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-top:.5px solid var(--line)}
.rlist li:first-child{border-top:0}
.rlist .when{font-variant-numeric:tabular-nums;color:var(--muted);min-width:64px}
.rlist .bell{margin-inline-start:auto;color:var(--muted);flex:none}
.rlist li > .btn{margin-inline-start:auto;flex:none}
#dNotifyState:not(:empty){margin-top:var(--s2)}
.muted{color:var(--muted);font-weight:400;font-size:15px}

/* ---------- day picker (unchanged) ---------- */
.days{display:flex;gap:var(--s2);margin-bottom:var(--s4);align-items:stretch}
.days button{flex:1;padding:var(--s2) 0 var(--s2);border-radius:var(--r2);border:1px solid transparent;font-weight:500;font-size:14px;line-height:1.15;text-align:center;background:var(--card);box-shadow:var(--e1)}
.days button:not(:disabled):not([aria-pressed="true"]):hover{background:var(--sunk)}
.days button:disabled{color:var(--ink);opacity:1;cursor:default}
.days button small{display:block;font-weight:300;color:var(--muted);font-size:12px}
.days button[aria-pressed="true"]{background:var(--tint);color:var(--on-tint);border-color:var(--tint);box-shadow:0 6px 14px rgba(var(--tint-rgb),.3)}
.days button[aria-pressed="true"] small{color:inherit;opacity:.9}
.days button.today{border-color:var(--accent-text)}
.days .wk{flex:0 0 36px;font-size:20px;color:var(--tint)}
.days .wk:disabled{opacity:.35}
@media (max-width:420px){ .days{gap:var(--s1)} .days button{font-size:13px} }

.dayhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);margin:0 0 var(--s3)}
.dayhead h2{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0}
.dayhead span{color:var(--muted);font-weight:300}
.toolbar{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--s2)}
.stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:0 0 var(--s4);font-size:14px;color:var(--muted)}
.stats b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--muted);font-weight:400;margin:var(--s2) 0 0}

/* ---------- task lists (day panel, dashboard, tasks tab) ---------- */
.tasks{margin:var(--s4) 0 var(--s4);padding:var(--s3) var(--s4) var(--s4);border-radius:var(--r3);background:var(--card);box-shadow:var(--e1)}
.tasks-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s1)}
.tasks-head h3{margin:0;font-size:17px;font-weight:600}
.tasks-head span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tlist{list-style:none;margin:0;padding:0}
.tlist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) 0;border-top:.5px solid var(--line)}
.tlist li:first-child{border-top:0}
.tlist input[type=checkbox]{flex:none}
.tlist .tt{flex:1 1 0;min-width:120px;font-size:15px;overflow-wrap:anywhere;text-align:start;padding:2px 0}
.tlist .tt:hover{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tlist .play{margin-inline-start:auto}
.tlist li.done .tt{text-decoration:line-through;color:var(--muted)}
.tlist .tag{font-size:11px;padding:2px var(--s2);border-radius:999px;background:var(--c,var(--sunk));color:var(--ci,var(--ink));white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis;flex:none}
.tlist .pri{font-size:11px;font-weight:600;padding:1px var(--s2);border-radius:4px;flex:none}
.pri.Urgent{background:var(--pri-urgent-bg);color:var(--pri-urgent-fg)} .pri.High{background:var(--pri-high-bg);color:var(--pri-high-fg)} .pri.Low{color:var(--muted)}
.tlist .due{font-size:12px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.tlist .due.late{color:var(--red);font-weight:500}
.tlist .x{color:var(--muted);font-size:20px;line-height:1;padding:0 var(--s1);flex:none}
.tlist .x:hover{color:var(--red)}
.tlist .empty{font-size:14px;color:var(--muted);font-weight:300;padding:var(--s1) 0 2px;border-top:0;display:block}
.tlist .acts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--s2);padding-inline-start:var(--s8)}
.acts button{font-size:13px;padding:var(--s1) var(--s3);border-radius:var(--pill);background:var(--sunk);font-weight:500}
.acts button:hover{background:color-mix(in srgb, var(--ink) 12%, var(--sunk))}
.task-add{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.task-add input{flex:1 1 170px;min-width:0}
.task-add select{flex:1 1 160px;min-width:0}
/* capture preview: what the line will create */
.qprev{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);min-height:0;font-size:12px}
.qprev:empty{display:none}
.qprev span{padding:2px var(--s2);border-radius:999px;background:var(--c,var(--sunk));color:var(--ci,var(--ink))}
.qprev .ttl{background:none;padding-inline-start:0;font-weight:500;font-size:13px}
.link{font-size:15px;color:var(--tint);margin-top:var(--s3);display:block}
.filters{display:flex;gap:var(--s2);margin:var(--s3) 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-inline-end:24px}
.filters button{scroll-snap-align:start}
.filters button{flex:none}
.overdue{margin:var(--s3) 0;padding:var(--s3) var(--s4);border-radius:var(--r3);background:var(--card);box-shadow:inset 3px 0 0 var(--red)}
.overdue h3{margin:0 0 var(--s1);font-size:14px;font-weight:600;color:var(--red)}
.filters button{padding:var(--s2) var(--s4);border:0;border-radius:var(--r2);background:var(--card);font-size:14px;font-weight:500;box-shadow:var(--e1)}
.filters button:not([aria-pressed="true"]):hover{background:var(--sunk)}
.filters button[aria-pressed="true"]{background:var(--tint);color:var(--on-tint)}
.filters b{font-weight:600;margin-inline-start:var(--s1);opacity:.7}

/* ---------- timeline ---------- */
.tl{position:relative;display:grid;grid-template-columns:52px 1fr;gap:0 10px}   /* .now reaches back 52 + 10 px */
.gutter{position:relative;border-radius:6px;background:linear-gradient(180deg,var(--gut-1) 0%,var(--gut-2) 22%,var(--gut-3) 45%,var(--gut-4) 62%,var(--gut-5) 75%,var(--gut-6) 100%)}
.gutter .h{position:absolute;inset-inline-end:6px;transform:translateY(-50%);font-size:11px;font-weight:500;color:var(--gut-ink);font-variant-numeric:tabular-nums}
.gutter .h.late{color:var(--gut-ink-late)}
.gutter .p{position:absolute;inset-inline:0;height:2px;background:var(--green)}
.track{position:relative}
.blk{position:absolute;inset-inline:0;border-radius:6px;padding:4px 10px;overflow:hidden;display:flex;gap:8px;align-items:flex-start;text-align:start;width:100%;background:var(--c);color:var(--ci);border:1px solid rgba(0,0,0,.05)}
.blk .n{flex:1;min-width:0;font-weight:500;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .t{font-size:12px;opacity:.88;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.blk .note{position:absolute;inset-inline:10px;top:26px;font-size:12px;font-weight:300;opacity:.75;line-height:1.3;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.blk.tiny{padding:1px 10px}
.blk{min-height:24px}   /* 2.5.8: a 5-minute block is still a 24 px target */
.blk.tiny .n,.blk.tiny .t{font-size:11px;line-height:1.1;padding-top:0}
.blk.dashed{background:transparent;border:1px dashed var(--dash);color:var(--muted)}
.blk.dashed .n{font-weight:400}
.blk.custom{inset-inline-start:32%;width:68%;z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.18);border-inline-start:4px solid rgba(0,0,0,.25)}
.blk.edited .n::after{content:" ✎";opacity:.6}
.blk.cur{box-shadow:0 0 0 2px var(--accent-text)}
.blk.done .n{text-decoration:line-through;opacity:.55}
.blk.done::after{content:"✓";position:absolute;inset-inline-end:10px;bottom:4px;font-size:12px;color:currentColor}
.blk.done .t{opacity:.55}
.now{position:absolute;inset-inline:-62px 0;height:0;border-top:2px solid var(--accent-text);pointer-events:none;z-index:2}
.now::before{content:"";position:absolute;inset-inline-start:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent-text)}

/* ---------- week ---------- */
.week{display:grid;grid-template-columns:36px repeat(7,1fr);gap:4px}
.week .col h3{font-size:13px;font-weight:600;margin:0 0 4px;text-align:center}
.week .col h3 small{display:block;font-weight:300;color:var(--muted);font-size:11px}
.week .col h3.today{color:var(--accent-text)}
.week .col .body{position:relative;background:var(--sunk);border-radius:6px}
.wb{position:absolute;inset-inline:0;width:100%;border:0;text-align:start;font-family:inherit;font-size:10px;line-height:1.15;padding:1px 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:3px;background:var(--c);color:var(--ci)}
.wb.dashed{background:transparent;border:1px dashed var(--dash);color:var(--muted)}
.wb.custom{inset-inline-start:30%;width:70%;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.wgut{position:relative}
.wgut .h{position:absolute;inset-inline-end:4px;transform:translateY(-50%);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);font-size:13px;color:var(--muted)}
.legend .dot{margin-inline-end:var(--s2);border-radius:3px;vertical-align:-1px}

/* ---------- budget (unchanged) ---------- */
.kpis{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s3);margin:var(--s2) 0 var(--s6)}
.kpi{padding:var(--s3) var(--s4);border-radius:var(--r3);background:var(--card);box-shadow:var(--e1)}
.kpi b{display:block;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi span{font-size:13px;color:var(--muted)}
@media (max-width:560px){.kpis{grid-auto-flow:row;grid-template-columns:1fr 1fr;row-gap:var(--s4)}}

/* ---------- settings ---------- */
fieldset{border:0;padding:0;margin:0 0 var(--s6);min-width:0}
legend{font-size:17px;font-weight:600;padding:0;margin-bottom:var(--s1)}
/* Settings: each group is a card. */
#view-settings > fieldset,#settingsForm > fieldset,#view-settings details.more > fieldset,#mSetup > fieldset{background:var(--card);border-radius:var(--r3);
  padding:var(--s3) var(--s4);margin:0 0 var(--s5);box-shadow:var(--e1)}
#view-settings > fieldset > legend,#settingsForm > fieldset > legend,#view-settings details.more > fieldset > legend{float:inline-start;width:100%;margin-bottom:var(--s1)}
#view-settings > fieldset > legend + *,#settingsForm > fieldset > legend + *,#view-settings details.more > fieldset > legend + *{clear:both}
fieldset p{margin:0 0 var(--s3);color:var(--muted);font-size:13px;font-weight:400}
/* Rows of a grouped list: label left, value right, a hairline between rows (iOS Settings). */
.grid{display:grid;grid-template-columns:1fr;gap:0}
.grid label{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font-size:15px;min-height:48px;padding:var(--s1) 0;border-top:1px solid var(--line)}
.grid label:first-child{border-top:0}
.grid label > span{display:grid}
.grid label small{font-size:13px;color:var(--muted)}
.grid input{width:auto;min-width:96px;max-width:140px;padding:var(--s2) var(--s3);border:0;border-radius:var(--r1);background:var(--sunk);color:var(--ink);text-align:end;font-variant-numeric:tabular-nums;font-size:15px}
.grid input[type=time]{text-align:start}
.grid select{padding:var(--s2) var(--s3);border:0;border-radius:var(--r1);background:var(--sunk);color:var(--ink);font-size:15px}
.weekend{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line);font-size:15px}
.weekend .daypick{margin:var(--s1) 0 0}
.seg{display:inline-flex;gap:2px;padding:var(--s1);border-radius:var(--r2);background:var(--card);box-shadow:var(--e1)}
.seg button{padding:var(--s2) var(--s4);border-radius:calc(var(--r2) - 3px);font-weight:500;font-size:14px;color:var(--muted)}
.seg button:not([aria-pressed="true"]):hover{color:var(--ink);background:var(--hover)}
.seg button[aria-pressed="true"]{background:var(--tint);color:var(--on-tint);font-weight:600;box-shadow:0 4px 12px rgba(var(--tint-rgb),.3)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s3)}
/* Buttons, three tiers: primary (filled ink, one per view or dialog), default (tonal), ghost (text). Danger is tonal red. */
/* Buttons (HIG): filled tint for the one main action, tinted for the rest, plain tint text for minor ones. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2) var(--s4);border:0;border-radius:var(--r2);
  background:color-mix(in srgb, var(--tint) 11%, transparent);color:var(--tint);font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap}
.btn:hover{background:color-mix(in srgb, var(--tint) 20%, transparent)}
.btn.primary{background:var(--tint);color:var(--on-tint);box-shadow:0 6px 16px rgba(var(--tint-rgb),.28)}
.btn.primary:hover{background:color-mix(in srgb, var(--tint) 88%, #000)}
.btn.danger{background:color-mix(in srgb, var(--red) 12%, var(--card));color:var(--red)}
.btn.danger:hover{background:color-mix(in srgb, var(--red) 20%, var(--card))}
.btn.ghost{background:transparent;color:var(--tint);font-weight:500}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{padding:var(--s2) var(--s4);font-size:14px}
.saved{font-size:13px;color:var(--muted)}
.cats{display:grid;gap:var(--s2)}
.cat{display:grid;grid-template-columns:var(--tap) 1fr auto 70px var(--tap);gap:var(--s1);align-items:center;font-size:14px}
.cat input[type=text],.cat input[type=number],.cat select{padding:var(--s2) var(--s2);border:1px solid var(--line);border-radius:var(--r1);background:var(--card);color:var(--ink);min-width:0}
.cat label{display:flex;gap:var(--s1);align-items:center;white-space:nowrap;font-size:13px}
.cat.head{font-size:12px;color:var(--muted)}
.status{padding:var(--s3) var(--s3);border-radius:var(--r2);background:var(--sunk);font-size:14px;margin-bottom:var(--s3)}
.status.ok{background:var(--green-soft)} .status.bad{background:color-mix(in srgb, var(--red) 22%, var(--card))}

/* ---------- dialogs (native <dialog>) ---------- */
dialog{border:0;border-radius:var(--r4);padding:0;width:min(520px, calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:var(--e3);color:var(--ink);background:var(--card)}
dialog::backdrop{background:rgba(20,24,31,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media (prefers-reduced-motion:no-preference){ dialog[open]{animation:dlgIn 220ms var(--ease)} @keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.98)}} }
/* Phones: dialogs are bottom sheets, closer to the thumb. */
@media (max-width:560px){
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--r4) var(--r4) 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
  @media (prefers-reduced-motion:no-preference){ dialog[open]{animation:sheetIn 260ms var(--ease)} @keyframes sheetIn{from{transform:translateY(40%);opacity:.4}} }
}
.dlg{padding:var(--s5) var(--s5) var(--s4);display:grid;gap:var(--s3)}
.dlg h3{margin:0 0 2px;font-size:20px;font-weight:600}
.dlg label{display:grid;gap:var(--s1);font-size:13px;color:var(--muted)}
.dlg input:not([type=checkbox]):not([type=radio]),.dlg select,.dlg textarea{width:100%;padding:var(--field-pad);border:0;border-radius:var(--r2);background:var(--sunk);color:var(--ink);font-size:16px}
.dlg .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.dlg .inline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:14px;color:var(--ink)}
.dlg .inline label{display:flex;gap:var(--s1);align-items:center;color:var(--ink);font-size:14px}
.dlg .row{margin-top:var(--s2)}
.dlg .row .btn.primary{min-width:96px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;/* physical: centred with translateX(-50%) */bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:calc(100vw - 32px);
  padding:var(--s3) var(--s4);border-radius:var(--r3);background:var(--c,var(--ink));color:var(--ci,var(--on-ink));box-shadow:var(--e2);font-weight:500}
@media (prefers-reduced-motion:no-preference){ .toast:not([hidden]){animation:toastIn 220ms var(--ease)} @keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}} }
@media (prefers-reduced-motion:no-preference){.blk,.days button,.nowbar{transition:opacity .15s,background .3s}}

/* ---------- tap targets: 44 px on every screen (HIG; WCAG 2.5.8 asks 24). A smaller visual (round checkbox, habit check, timer)
   keeps its size: the box grows to --tap, a transparent border shows only the middle, and a negative margin keeps the layout. ---------- */
.days button,.check,.gate .agree,.cat label,.task-add input,.task-add select,.grid input,.grid select,.cat input:not([type=checkbox]),.cat select,.dlg input:not([type=checkbox]):not([type=radio]),.dlg select,.dlg textarea,.field,
.dlg .inline label,#bdInsertRow,.hmore summary,details.more-fields > summary,.dlg .howlong label,.card.cur .track,#txnForm .seg label,.daypick button,.hcal button{min-height:var(--tap)}
.tlist li{min-height:48px}
.x,.ptg .more,.hlist .more,.pill.more,.btn,.filters button,.seg button,.acts button,.pill,.chip,.addlink,.capchips button,.chips span,.toast .undo{min-width:var(--tap);min-height:var(--tap)}
.tlist .tt,.hlist .tt{min-height:var(--tap);margin-block:-10px}
.tlist input[type=checkbox]{width:var(--tap);height:var(--tap);margin:-10px}
.hk{width:var(--tap);height:var(--tap);margin:-6px}
.play{width:var(--tap);height:var(--tap);margin:-4px}
.addlink,.gate a.agree{display:inline-flex;align-items:center;justify-content:center}
input[type=color]{width:var(--tap);height:var(--tap);padding:0;border:1px solid var(--line);border-radius:var(--r1);background:var(--card)}
/* ---------- phones: 16 px inputs (no iOS zoom-on-focus) ---------- */
@media (max-width:899px){
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .task-add input,.task-add select,.grid input,.dlg input:not([type=checkbox]):not([type=radio]),.dlg select,.dlg textarea{font-size:16px}
  .task-add .btn{flex:0 0 auto}
  .wrap{padding-inline-start:var(--s4);padding-inline-end:var(--s4)}
  .dayhead .toolbar{margin-inline-start:0;width:100%}
}
.check{display:flex;gap:var(--s2);align-items:center}

/* Settings: the rarely-touched parts are folded away. */
details.more{margin:var(--s2) 0 0}
details.more > summary{cursor:pointer;font-weight:400;font-size:17px;margin-bottom:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;
  background:var(--card);border-radius:var(--r3);padding:var(--s3) var(--s4);min-height:var(--tap)}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"›";font-size:22px;color:var(--grabber);transition:transform var(--dur) var(--ease)}
details.more[open] > summary::after,details.more-fields[open] > summary::after{transform:rotate(90deg)}
[dir=rtl] :is(details.more,details.more-fields)[open] > summary::after{transform:rotate(-90deg)}
details.more[open] > summary{margin-bottom:var(--s5)}
.dlg details.more > :not(summary) + *{margin-top:var(--s3)}   /* the sheet fields inside More keep the sheet's spacing */
#delBox{margin:var(--s4) 0 0}#delBox > summary{margin:0}#delBox[open] > summary{margin-bottom:var(--s1)}
#delList h4{margin:var(--s3) 0 0;font-size:13px;font-weight:500;color:var(--muted)}
.muted a,.status a,.hint a{color:var(--tint);font-weight:500;text-decoration:none}

/* Sign-in gate */
body.locked > :not(.gate):not(.toast):not(#outDlg){display:none !important}
body.locked{background:var(--paper)}
/* SCR-01 onboarding: over the app until Open Today */
body.onboarding > :not(.onb):not(.toast){display:none !important}
.onb{min-height:100dvh;display:grid;place-items:center;padding:var(--s6) var(--s4)}
.onb-in{display:grid;gap:var(--s3);width:min(520px,100%)}
.onb h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.onb fieldset{margin:0;padding:var(--s3) var(--s4);background:var(--card);border-radius:var(--r3);box-shadow:var(--e1)}
.onb-blocks{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.onb-blocks span{color:var(--muted)}
.gate{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:var(--s2);padding:var(--s6) var(--s4);text-align:center}
.gate h1{margin:var(--s2) 0 0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.gate p{margin:0 0 var(--s3);color:var(--muted);max-width:32ch;text-wrap:balance}
.gate form{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;width:min(360px,100%)}
.gate input{flex:1 1 200px;font-size:16px}
.gate .agree{flex-basis:100%}
.gate a.agree{color:var(--tint);font-weight:500;text-decoration:none}
.gate label.agree{display:flex;gap:var(--s2);align-items:center;justify-content:center}
.gate .agree input{flex:none;width:20px;height:20px;padding:0;box-shadow:none}
.gate:not(.land) .ld,.gate.land .nl{display:none}   /* an iOS Safari tab opened by a sign-in link shows the key instead (OD-10) */

/* Habits: pills on Now, rows with a 12-week grid under Tasks → Habits */
.pills{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{padding:var(--s2) var(--s4);border:0;border-radius:var(--r2);background:var(--sunk);font-weight:500}
.pill:not([aria-pressed="true"]):hover{background:var(--sunk)}
.pill[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.pill[aria-pressed="true"]::before{content:"✓ "}
.hlist{list-style:none;margin:0 0 var(--s3);padding:0}
.hlist li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.hlist li:first-child{border-top:0}
.hlist .tt{flex:1 1 0;min-width:120px;text-align:start;font-size:16px;font-weight:500}
.hlist .due{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hlist .empty{display:block;color:var(--muted);font-weight:300;font-size:14px}
.hk{flex:none;border-radius:50%;border:6px solid transparent;box-shadow:inset 0 0 0 2px var(--ctl-border);background:var(--card) padding-box;transition:background .2s}
.hk[aria-pressed="true"]{background-color:var(--green);box-shadow:none}
.hk[aria-pressed="true"]::after{content:"✓";color:var(--on-green);font-weight:700}
.hk:disabled{opacity:.35}
.hk.skip::after{content:"–";font-weight:700}
.hk.part::after{content:"◐";color:var(--green)}
.hlist .more,.pill.more{flex:none;border:0;background:transparent;font-size:18px;color:var(--muted)}
.hcheck{display:inline-flex;gap:2px}
.pill.skip{background:var(--sunk);color:var(--muted)}
.pill.skip::before{content:"– "}
.pill small{font-size:12px;opacity:.8}
.hmore summary{display:flex;align-items:center;color:var(--muted);cursor:pointer}
.hdscore b{font-size:28px;font-weight:600}
.hcalnav{display:flex;align-items:center;justify-content:space-between}
.hcal{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
.hcal th{font-size:12px;font-weight:500;color:var(--muted)}
.hcal th abbr{text-decoration:none}
.hcal button{width:100%;border:0;border-radius:var(--r2);background:transparent;font-size:15px}
.hcal .y{background:var(--green);color:var(--on-green)}
.hcal .h{background:color-mix(in srgb, var(--green) 35%, transparent)}
.hcal .m{color:var(--muted);border:1px dashed var(--line)}
.hcal .s,.hcal .p,.hcal .n{color:var(--muted)}
.hcal .o{border:2px solid var(--ctl-border)}
.dots{flex-basis:100%;display:grid;grid-template-rows:repeat(7,8px);grid-auto-flow:column;grid-auto-columns:8px;gap:2px;padding-inline-start:44px}
.dots i{border-radius:2px;background:transparent}
.dots i.y{background:var(--green)} .dots i.m{background:var(--line)} .dots i.n{background:color-mix(in srgb, var(--line) 35%, transparent)}
.daypick{display:flex;gap:2px;margin:var(--s2) 0}   /* seven 44 px days fit a phone's 326 px card */
.daypick button{flex:1;max-width:48px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);font-size:13px;font-weight:500}
.daypick button:not([aria-pressed="true"]):hover{background:var(--sunk)}

/* Timers */
.play{flex:none;display:grid;place-items:center;border-radius:50%;color:var(--muted);border:4px solid transparent;box-shadow:inset 0 0 0 1px var(--line);background:var(--card) padding-box}
.play:hover{color:var(--ink);background:var(--sunk)}
.play.on{color:var(--on-red);background-color:var(--red);box-shadow:none}
.card.cur .track{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:var(--s2) var(--s4);border-radius:999px;background:color-mix(in srgb, currentColor 14%, transparent);font-weight:500}
.timer{position:fixed;z-index:25;left:50%;/* physical: centred with translateX(-50%) */transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--s3);
  max-width:calc(100% - 32px);padding-block:var(--s2);padding-inline:var(--s4) var(--s2);border-radius:999px;background:var(--c,var(--ink));color:var(--ci,var(--on-ink));box-shadow:0 6px 20px rgba(0,0,0,.18)}
.timer .rec{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;animation:rec 1.6s ease-in-out infinite}
.timer .lbl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.timer .el{font-variant-numeric:tabular-nums;opacity:.85}
.timer .btn{background:transparent;border-color:currentColor;color:inherit}
@keyframes rec{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .timer .rec{animation:none} }
@media (min-width:900px){ .timer{inset-inline-start:auto;inset-inline-end:24px;transform:none;bottom:24px} }
body:has(#timer:not([hidden])) .wrap{padding-bottom:calc(150px + env(safe-area-inset-bottom))}

/* Update ready */
.updatebar{position:fixed;z-index:40;left:50%;/* physical: centred with translateX(-50%) */transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));padding:10px 18px;border-radius:999px;
  background:var(--ink);color:var(--on-ink);box-shadow:0 6px 20px rgba(0,0,0,.2);white-space:nowrap;font-size:15px}

/* Stats */
.sh{font-size:17px;font-weight:600;margin:0 0 var(--s3)}
.sh .muted{font-size:13px;margin-inline-start:var(--s2)}
.hbars{list-style:none;margin:0 0 var(--s6);padding:0;display:grid;gap:var(--s3)}
.hbars li{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:baseline}
.hbars .nm{font-weight:500;font-size:15px}
.hbars .num{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:end}
.hbars .num small{display:block;font-size:12px}
.hbars .under{color:var(--red);font-weight:500}
.hbars .track{grid-column:1/-1;display:block;height:10px;border-radius:5px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.hbars .track i{display:block;height:100%;border-radius:5px;background:color-mix(in srgb, var(--c,var(--muted)) 78%, #000)}
.vbars{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);height:150px;align-items:end;margin-bottom:var(--s3)}
.vb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:var(--s1)}
.vb i{display:block;width:min(28px,70%);border-radius:4px 4px 0 0;background:var(--ink);opacity:.75;min-height:2px}
.vb b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-height:1em}
.vb span{font-size:12px;color:var(--muted)}
.vb.today span{color:var(--ink);font-weight:600}

/* Week template editor */
.tback{display:inline-flex;align-items:center;min-height:var(--tap);margin:calc(-1 * var(--s2)) 0 var(--s1);padding:0 var(--s1);font-size:17px;color:var(--tint)}
#tDays button{padding:var(--s3) 0}
.ttimes{grid-template-columns:1fr 1fr;column-gap:var(--s4);margin:0 0 var(--s3)}
.ttimes label:nth-child(2){border-top:0}
.ttimes label{flex-direction:column;align-items:stretch;gap:var(--s1);font-size:14px;color:var(--muted)}
.ttimes input{min-width:0;max-width:none;width:100%}
.tlabel{display:flex;align-items:center;gap:var(--s3);font-size:14px;color:var(--muted);margin:0 0 var(--s3)}
.tlabel input{flex:1;min-width:0;min-height:var(--tap);padding:var(--s2) var(--s3);border:0;border-radius:var(--r1);background:var(--sunk);color:var(--ink);font-size:15px}
.steps{list-style:none;margin:0 0 var(--s4);padding:0;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 var(--s3);padding-block:var(--s1);padding-inline:var(--s3) var(--s1);border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps li.sel{box-shadow:inset 3px 0 0 var(--accent-text);background:var(--sunk)}
.steps .st{display:grid;gap:1px;text-align:start;min-width:0;min-height:var(--tap);padding:var(--s2) 0}
.steps .st b{font-weight:500;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.steps .tm{font-size:13px;font-variant-numeric:tabular-nums}
.steps .rl{font-size:12px;color:var(--muted)}
.steps .warn{font-size:12px;font-weight:500;color:var(--red)}
.steps .mv{display:flex}
.steps .mv button{width:var(--tap);height:var(--tap);border-radius:var(--r1);font-size:18px;color:var(--muted)}
.steps .mv button:hover:not(:disabled){background:var(--sunk);color:var(--ink)}
.steps .mv button:disabled{opacity:.25;cursor:default}
.steps .wkly{grid-column:2/-1;display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted);margin:calc(-1 * var(--s1)) 0 var(--s1)}
.steps .wkly button{min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--pill);background:var(--card);font-size:12px;color:var(--ink)}
.tacts{margin-bottom:var(--s4)}
.tcopy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:calc(-1 * var(--s1)) 0 var(--s4)}
.tcopy .daypick{flex:1 1 100%;margin:0}
.daypick button:disabled{opacity:.3;cursor:default}
.tscope{margin:0 0 var(--s4)}
.tscope p{margin:0 0 var(--s2)}
#view-template[data-asking] > :not(.thead,.tscope){display:none}
#tLens{margin-bottom:var(--s2)}
#tLens > summary{margin-bottom:var(--s2)}
#tLens .hint{margin:0 0 var(--s3)}
#tLenGrid span{min-width:0}
#tLenGrid small{display:block;font-size:12px;color:var(--muted);font-weight:300}
.tsave{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);margin:var(--s3) calc(-1 * var(--s4)) 0;padding:var(--s2) var(--s4);
  background:color-mix(in srgb, var(--card) 88%, transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
.tsave .muted{margin-inline-end:auto}
.btn:disabled{opacity:.45;cursor:default}
.dlg .howlong{margin:0;display:grid;gap:0}
.dlg .howlong legend{font-size:13px;font-weight:400;color:var(--muted);margin-bottom:var(--s1)}
.dlg .howlong label{display:flex;align-items:center;gap:var(--s2);color:var(--ink);font-size:15px}
.dlg .howlong input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.thead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}

/* Plan my week sheet */
.ptargets{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ptg{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--s1) var(--s3);padding-block:var(--s1);padding-inline:var(--s3) var(--s1);border-top:1px solid var(--line)}
.ptg:first-child{border-top:0}
.ptg .nm{font-size:15px;overflow-wrap:anywhere}
.dlg .ptg label.h{display:flex;align-items:center;gap:var(--s2);font-size:14px}
.dlg .ptg label.h input{width:76px;text-align:end}
.ptg .more{border-radius:var(--r1);font-size:18px;color:var(--muted)}
.ptg .more[aria-expanded="true"]{background:var(--sunk);color:var(--ink)}
.ptg .place{grid-column:1/-1;padding-block:0 var(--s3);padding-inline:0 var(--s2)}
.ptg .daypick{margin:var(--s1) 0 var(--s2)}
#pdStep1,#pdStep2{display:grid;gap:var(--s3)}
#pdStep1[hidden],#pdStep2[hidden]{display:none}
#pdStep2 h4{margin:var(--s1) 0 0;font-size:15px}
.padds,.padds ul,.punplaced{list-style:none;margin:0;padding:0;font-size:14px}
.padds > li{padding:var(--s2) 0;border-top:1px solid var(--line)}
.padds > li:first-child{border-top:0}
.padds ul li{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1)}
.padds .tm{color:var(--muted);font-variant-numeric:tabular-nums}
.padds .rem{color:var(--muted)}
.punplaced li{padding:var(--s1) 0}
.ptable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ptable th{text-align:start;font-weight:500;color:var(--muted);font-size:12px}
.ptable td,.ptable th{padding-block:5px;padding-inline:0 6px;border-bottom:1px solid var(--line)}
.ptable small{color:var(--muted)}
.pnone{margin:0;font-weight:500}
@media (max-width:899px){
  .tsave{bottom:calc(58px + env(safe-area-inset-bottom))}
  body:has(#view-template:not([hidden])) .wrap{padding-bottom:calc(58px + env(safe-area-inset-bottom))}   /* the save bar ends on the tab bar, no page gap */
  .tlabel input{font-size:16px}
}

/* Money */
.insights{list-style:none;margin:calc(-1 * var(--s2)) 0 var(--s6);padding:0;display:grid;gap:var(--s2)}
.insights li{padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--card);font-size:14px;box-shadow:var(--e1)}
.insights li.bad{box-shadow:inset 3px 0 0 var(--red)}
.insights li.good{box-shadow:inset 3px 0 0 var(--green)}
.insights li.bad b{color:var(--red)} .insights li.good b{color:var(--green)}
.insights li.muted:empty{display:none}
.hbars .track{position:relative}
.hbars .track.over i{background:var(--red)}
.hbars .track s{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.55}
.hbars b.bad{color:var(--red);font-weight:600}
.mbars{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);align-items:end}
.mb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:var(--s1)}
.mb div{display:flex;gap:var(--s1);align-items:flex-end}
.mb i,.key{display:inline-block;width:min(14px,3vw);border-radius:3px 3px 0 0;min-height:2px}
.mb .in,.key.in{background:var(--tint)} .mb .out,.key.out{background:var(--accent)}
.key{width:10px;height:10px;border-radius:2px;margin-block:0;margin-inline:var(--s2) var(--s1);vertical-align:-1px}
.mb span{font-size:12px;color:var(--muted)} .mb.today span{color:var(--ink);font-weight:600}
.txns li.dhead{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted);padding:var(--s3) 0 2px;border-top:0}
.txns li.dhead span{font-weight:300}
.txns .tt small,#mRules .tt small{display:block;font-size:12px;color:var(--muted);font-weight:300}
.txns .amt{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:500}
.txns .amt.in{color:var(--green)}
#mRules .tt{flex:1}
.mcats .cat{grid-template-columns:var(--tap) 1fr 70px 96px var(--tap)}
#txnForm .seg{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);box-shadow:none}
#txnForm .seg label{display:flex;align-items:center;justify-content:center;padding:var(--s2) var(--s4);border-radius:calc(var(--r2) - 3px);color:var(--muted);font-size:15px;font-weight:500;cursor:pointer}
#txnForm .seg label:has(input:checked){background:var(--tint);color:var(--on-tint);box-shadow:0 4px 12px rgba(var(--tint-rgb),.3)}
#txnForm .seg input{position:absolute;opacity:0}
#txnForm .seg label:focus-within{outline:2px solid var(--tint);outline-offset:2px}
/* Amount first and big; types as chips. */
.dlg .amount span:has(> input){display:flex;align-items:baseline;gap:var(--s2);border-bottom:2px solid var(--line);padding:2px 0 var(--s1)}
.dlg .amount span:has(> input):focus-within{border-color:var(--tint)}
.dlg .amount b{font-size:18px;color:var(--muted);font-weight:500}
.dlg .amount input{background:transparent !important;padding:0 !important;font-size:36px !important;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:none !important}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;padding:0;margin:0}
.chips legend{font-size:13px;color:var(--muted);margin-bottom:var(--s2);font-weight:400;float:inline-start;width:100%}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0}
.chips span{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--pill);background:var(--sunk);font-size:14px;font-weight:500}
.chips span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.chips input:checked + span{background:var(--tint);color:var(--on-tint)}
.chips input:focus-visible + span{outline:2px solid var(--tint);outline-offset:2px}

/* Money insights. Needs/wants/kept: a validated 3-hue set per mode (dataviz validator), always with text labels. */
:root{ --need:#5468C8; --want:#C08A1A; --kept:#2E8B57 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --need:#6F84DA; --want:#B0811F; --kept:#3FA47A } }
:root[data-theme="dark"]{ --need:#6F84DA; --want:#B0811F; --kept:#3FA47A }
.health{margin:0 0 var(--s6)}
.split{position:relative;display:flex;gap:2px;height:16px;border-radius:5px;overflow:hidden;background:var(--sunk)}
.split i{display:block;height:100%}
.split .need,.splitkey .need{background:var(--need)} .split .want,.splitkey .want{background:var(--want)} .split .kept,.splitkey .kept{background:var(--kept)}
.split .neg,.splitkey .neg{background:repeating-linear-gradient(45deg, var(--red) 0 3px, transparent 3px 6px)}
.split s{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.splitkey{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s2) 0 var(--s3);font-size:13px;color:var(--muted)}
.splitkey i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:var(--s1);vertical-align:-1px}
.splitkey b{color:var(--ink);font-weight:600}
.health ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.health li{display:grid;grid-template-columns:22px auto auto 1fr;gap:2px var(--s2);align-items:baseline;padding:var(--s2) 0;border-top:1px solid var(--line);font-size:14px}
.health li .st{font-weight:700;text-align:center}
.health li .w{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.health li.good .st,.health li.good .w{color:var(--green)} .health li.ok .st,.health li.ok .w{color:var(--accent-text)} .health li.bad .st,.health li.bad .w{color:var(--red)}
.health li .tx{grid-column:2/-1;color:var(--muted);font-size:13px}
.flow{margin:0 0 var(--s6)}
.flow svg{display:block;width:100%;height:auto;overflow:visible}
.flow .rib path{fill:var(--c);opacity:.45;stroke:var(--card);stroke-width:1}
.flow .rib path:hover{opacity:.75}
.flow rect{fill:color-mix(in srgb, var(--c) 80%, #000)} .flow rect.mid{fill:var(--ink)}
.flow text{font-size:11px;fill:var(--ink);font-weight:500;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.flow tspan{fill:var(--muted);font-weight:400}
.mcatbars li{display:block}
.mcatbars button{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:baseline;width:100%;text-align:start;padding:var(--s1) var(--s2);margin:calc(-1 * var(--s1)) calc(-1 * var(--s2));border-radius:8px;box-sizing:content-box}
.mcatbars button:hover{background:var(--sunk)} .mcatbars button[aria-pressed="true"]{background:var(--sunk);box-shadow:inset 3px 0 0 var(--ink)}
.mcatbars .nm small{margin-inline-start:var(--s2);font-size:11px;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);max-width:420px}
.heat b{font-size:11px;font-weight:500;color:var(--muted);text-align:center}
.heat button{aspect-ratio:1;min-height:34px;border-radius:6px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);
  background:color-mix(in srgb, var(--tint) var(--p), var(--card));border:1px solid var(--line)}
.heat button.z{background:var(--card)}
.heat button.f{background:transparent;border-style:dashed;color:var(--muted);opacity:.6}
.heat button.td{box-shadow:0 0 0 2px var(--accent-text)}
.heat button.sel{outline:2px solid var(--ink);outline-offset:1px}
.cap{font-size:13px;color:var(--muted);margin:var(--s2) 0 var(--s6);min-height:1.3em}
.cap b{color:var(--ink);font-weight:600}
.mbars{position:relative;height:170px;margin-bottom:0}
.mb{border-radius:8px;padding:0;background:none}
.mb:hover{background:var(--sunk)}
.mb b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;min-height:1em}
.mb .one{width:min(26px,6vw);background:color-mix(in srgb, var(--c) 80%, #000)}
.mbars s.avg{position:absolute;inset-inline:0;border-top:2px dashed var(--muted);pointer-events:none}
.msearch{margin:0 0 var(--s1)}
.msearch input{flex:1 1 200px;min-width:0}
.row.sub-act{margin:calc(-1 * var(--s3)) 0 var(--s6)}
fieldset .row.sub-act{margin:0 0 var(--s3)}
#listRows input{flex:1 1 0;min-width:0}
/* A task row: checkbox | title over its labels | timer. Overdue options run under the title. */
.tlist li.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);row-gap:2px}
.tlist li.task > :first-child{grid-row:1 / span 2;align-self:start;margin-top:-8px}
.tlist li.task .tt{grid-column:2;min-width:0}
.tlist li.task .meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);min-width:0}
.tlist li.task .meta .tag{max-width:100%}
.tlist li.task .play{grid-column:3;grid-row:1 / span 2;margin:-4px}
.tlist li.task .acts{grid-column:2 / -1;padding-inline-start:0;margin-top:var(--s2)}
.vbars.none{position:relative;height:90px}
.vbars.none::before{content:var(--css-noTasksDone);position:absolute;inset:0 0 28px;display:grid;place-items:center;color:var(--muted);font-size:14px}

/* iOS controls: round checkboxes (Reminders), switches for on/off settings, a grabber on sheets. */
.tlist input[type=checkbox]{appearance:none;-webkit-appearance:none;border-radius:50%;border:10px solid transparent;box-shadow:inset 0 0 0 2px var(--ctl-border);background:var(--card) padding-box;display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tlist input[type=checkbox]:checked{background-color:var(--tint);box-shadow:none}
.tlist input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid var(--on-tint);border-width:0 2.5px 2.5px 0;/* physical: check mark, never mirrored */transform:translateY(-1px) rotate(45deg)}
.cat label input,#xdRepeat input,.dlg .inline[data-for] input,.dlg .inline[data-r] input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;border-radius:31px;background:rgba(120,120,128,.16);cursor:pointer;
  transition:background-color var(--dur) var(--ease)}
.cat label input::after,#xdRepeat input::after,.dlg .inline[data-for] input::after,.dlg .inline[data-r] input::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform var(--dur) var(--ease)}
.cat label input:checked,#xdRepeat input:checked,.dlg .inline[data-for] input:checked,.dlg .inline[data-r] input:checked{background:var(--tint)}
.cat label input:checked::after,#xdRepeat input:checked::after,.dlg .inline[data-for] input:checked::after,.dlg .inline[data-r] input:checked::after{transform:translateX(20px)}
#xdRepeat label,.dlg .inline[data-for] label,.dlg .inline[data-r] label{width:100%;justify-content:space-between;flex-direction:row-reverse;gap:var(--s3);font-size:17px;min-height:var(--tap)}
@media (max-width:560px){ dialog .dlg::before{content:"";justify-self:center;width:36px;height:5px;border-radius:3px;background:var(--grabber);margin:calc(-1 * var(--s2)) 0 2px} }

/* ---------- finance-app components ---------- */
/* Hero card: solid brand color, big number, decorative circles and a dot grid. The Now card gets the same decoration. */
.hero,.card.cur{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.card.cur::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;inset-inline-end:-70px;top:-90px;border-radius:50%;border:34px solid rgba(255,255,255,.12)}
.card.cur::after{content:"";position:absolute;z-index:-1;width:84px;height:56px;inset-inline-start:18px;bottom:14px;opacity:.35;
  background:radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 2px) 0 0/12px 12px}
.card.cur::after{inset-inline-start:auto;inset-inline-end:22px;bottom:18px;opacity:.25;background-image:radial-gradient(circle, currentColor 1.5px, transparent 2px)}
.hero{display:grid;gap:2px;padding:var(--s6) var(--s6) var(--s5);border-radius:var(--r4);background:var(--tint);color:var(--on-tint);box-shadow:var(--e2);margin:0 0 var(--s4)}
.hero .lbl{font-size:14px;opacity:.85}
.hero b{font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums}
.hero .arith,.hero .rate{font-size:13px;opacity:.85}
.hero .spark{position:absolute;overflow:visible}
.hero .spark polyline{fill:none;stroke:var(--spark);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hero .spark polygon{fill:rgba(255,179,138,.22)}
.inout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:0 0 var(--s6)}
.inout > div{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r2);background:var(--card);box-shadow:var(--e1)}
.inout i{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r1);flex:none}
.inout i.in{background:color-mix(in srgb, var(--tint) 12%, transparent);color:var(--tint)}
.inout i.out{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-text)}
.inout span{display:grid;font-size:13px;color:var(--muted);min-width:0}
.inout b{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Section header with an action on the right ("+ Add new"). */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.shead .sh{margin-bottom:var(--s3);margin-inline-end:auto}
.accts li.total .tt{font-weight:600}
.goals progress{display:block;width:100%;height:6px;margin-top:var(--s1)}
.addlink{color:var(--tint);font-size:14px;font-weight:500}
.addlink:hover{text-decoration:underline}
/* Horizontal tiles: indigo and orange in turn. */
.tiles{display:flex;gap:var(--s3);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--s4)) var(--s6);padding:var(--s1) var(--s4) var(--s4)}
.tile{position:relative;overflow:hidden;isolation:isolate;flex:0 0 138px;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px;border-radius:var(--r3);
  background:var(--tint);color:var(--on-tint);text-align:start;scroll-snap-align:start;box-shadow:var(--e2)}
.tile.t1{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px rgba(var(--accent-rgb),.3)}
.tile.over{background:var(--red);color:var(--on-red)}
.tile::before{content:"";position:absolute;z-index:-1;width:120px;height:120px;inset-inline-end:-50px;top:-50px;border-radius:50%;border:22px solid rgba(255,255,255,.14)}
.tile.t1::after{content:"";position:absolute;z-index:-1;inset-block-start:10px;inset-inline-end:10px;width:48px;height:36px;opacity:.4;background:radial-gradient(circle,currentColor 1.5px,transparent 2px) 0 0/9px 9px}
.tile b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tile span{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile i{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 30%,transparent);margin-top:var(--s2);overflow:hidden}
.tile i s{display:block;height:100%;background:currentColor;border-radius:2px}
.tile[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.tile.empty{background:var(--card);color:var(--tint);border:2px dashed color-mix(in srgb, var(--tint) 35%, transparent);box-shadow:none;justify-content:center;align-items:center;text-align:center}
.tile.empty b{font-size:28px}
/* Category icon squares in lists. */
.ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r2);background:color-mix(in srgb, var(--c) 45%, var(--card));color:var(--ink);font-weight:600;font-size:15px}
/* Lists as white cards. */
.txns,#mRules,.hbars.mcatbars{background:var(--card);border-radius:var(--r3);padding:var(--s1) var(--s4);box-shadow:var(--e1)}
.hbars.mcatbars{padding:var(--s3) var(--s4);gap:var(--s4)}
.txns li.dhead{padding:var(--s4) 0 var(--s1)}
/* The add sheet. */
.addgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s3)}
.addgrid button{display:grid;justify-items:center;gap:var(--s2);padding:var(--s4) var(--s2);border-radius:var(--r3);background:var(--sunk);font-weight:500;font-size:14px}
.addgrid button svg{width:44px;height:44px;padding:10px;box-sizing:border-box;border-radius:var(--r2);background:var(--tint);color:var(--on-tint)}
.addgrid button[value=out] svg{background:var(--accent);color:var(--on-accent)}
.addgrid button[value=in] svg{background:var(--green);color:var(--on-green)}
.addgrid button:hover{background:color-mix(in srgb, var(--tint) 10%, var(--sunk))}

/* Block sheet */
.bdmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin:calc(-1 * var(--s1)) 0 0;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.bdmeta small{flex-basis:100%;font-size:14px;color:var(--ink);margin-top:var(--s1)}
.bdacts{display:grid;grid-template-columns:2fr 1.4fr 1fr;gap:var(--s2)}
.bdh{margin:var(--s2) 0 0;font-size:15px;font-weight:600}
/* Journeys: Tasks/Habits switch, overdue header, Now actions, undo toast, Money parts. */
.tseg{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0 0 var(--s4)}
.ohead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.curacts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.curacts .track{margin-top:0 !important}
.card.cur .track[aria-pressed="true"]{background:color-mix(in srgb, currentColor 24%, transparent)}
.toast{display:flex;align-items:center;gap:var(--s4)}
.toast .undo{margin-inline-start:auto;padding:var(--s2) var(--s3);border-radius:var(--r1);font-weight:600;color:inherit;background:color-mix(in srgb, currentColor 18%, transparent)}
h2.part{font-size:22px;font-weight:600;margin:var(--s8) 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.insights li.start{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--muted)}
details.more-fields{display:grid;gap:var(--s3)}
details.more-fields > summary{cursor:pointer;color:var(--tint);font-weight:500;font-size:15px;list-style:none;display:flex;align-items:center}
details.more-fields > summary::-webkit-details-marker{display:none}
details.more-fields > summary::after{content:"›";margin-inline-start:var(--s2);transition:transform var(--dur) var(--ease)}
details.more-fields[open]{gap:var(--s3)}
details.more-fields > :not(summary){margin-top:var(--s3)}
.dlg .amount input{-moz-appearance:textfield;appearance:textfield}
.dlg .amount input::-webkit-inner-spin-button,.dlg .amount input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.daypick button[aria-pressed="true"]{background:color-mix(in srgb, var(--tint) 14%, var(--card));border-color:transparent;color:var(--tint)}
/* Hero pace chart: this month (solid) against a usual month (dashed). */
.hero .spark{width:46%;height:56px;inset-inline-end:18px;bottom:16px}
.hero .spark polyline{vector-effect:non-scaling-stroke}
.hero .spark polyline.usual{stroke:rgba(255,255,255,.55);stroke-dasharray:4 4;stroke-width:2}
.hero .pace{font-size:13px;opacity:.9;margin-top:var(--s2);max-width:52%}
/* Now nudges: slipped tasks, the weekly review. */
.card.nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);box-shadow:inset 4px 0 0 var(--tint),var(--e1)}
.card.nudge > div{display:grid;min-width:0}
.card.nudge .acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.card.nudge span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Weekly review sheet */
.rvtiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.rvtiles div{display:grid;padding:var(--s3);border-radius:var(--r2);background:var(--sunk)}
.rvtiles b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.rvtiles span{font-size:12px;color:var(--muted)}
.rvlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rvlist li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:14px}
.rvlist li:first-child{border-top:0}
.rvlist b.ok{color:var(--green)} .rvlist b.bad{color:var(--red)}
/* Type-first add */
.addline{display:flex;gap:var(--s2)} .addline input{flex:1;min-width:0}
/* Swipe feedback: the row slides; past the threshold it shows what will happen. */
li[data-sw]{position:relative;transition:none}
li[data-sw="end"]{background:color-mix(in srgb, var(--green) 14%, var(--card))}
li[data-sw="start"]{background:color-mix(in srgb, var(--red) 14%, var(--card))}
li[data-sw="end"]::after{content:var(--css-swipeDone);position:absolute;inset-inline-start:-64px;top:50%;transform:translateY(-50%);color:var(--green);font-weight:600}
li[data-sw="start"]::after{content:var(--css-swipeDelete);position:absolute;inset-inline-end:-70px;top:50%;transform:translateY(-50%);color:var(--red);font-weight:600}
.tlist li{transition:transform 180ms var(--ease)}

/* Right to left (08 I18N-4, I18N-5): index.html gets dir="rtl" from the string table. Layout above is logical; these are the direction-bound pieces. */
[dir=rtl] .cat label input:checked::after,[dir=rtl] #xdRepeat input:checked::after,[dir=rtl] .dlg .inline[data-for] input:checked::after,[dir=rtl] .dlg .inline[data-r] input:checked::after{transform:translateX(-20px)}
[dir=rtl] .filters{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent)}
:lang(ar) body{line-height:1.6}
/* Arabic type (TC-I18N-14, 12 §13.9): letters are joined, so no letter-spacing anywhere (it wins over every rule above);
   no weight under 400 and nothing under the 12 px caption: the rules above that go lower. */
:lang(ar) *{letter-spacing:0!important}
:lang(ar) :is(.days button small,.dayhead span,.tlist .empty,.blk .note,.week .col h3 small,.hlist .empty,#tLenGrid small,.txns li.dhead span,.txns .tt small,#mRules .tt small){font-weight:400}
:lang(ar) :is(.tabbar a,.tabbar button,.tabbar .badge,.nowbar .lbl,.tlist .tag,.tlist .pri,.gutter .h,.blk.tiny .n,.blk.tiny .t,.week .col h3 small,.wb,.wgut .h,.flow text,.mcatbars .nm small,.heat b){font-size:12px}
.anchor-row{padding:var(--s1) 0 var(--s2);border-top:1px solid var(--line)}
.anchor-row:first-of-type{border-top:0}
.anchor-row .x{margin-inline-start:auto}
/* SCR-20 capture: recognized words are tinted and underlined on a layer behind the field (CAP-02-R5) */
.capin{position:relative;flex:1;min-width:0;border-radius:var(--r2);background:var(--card);box-shadow:var(--e1)}
.capin .field{position:relative;width:100%;background:transparent;box-shadow:none;line-height:22px}
.caphl{position:absolute;inset:0;padding:var(--field-pad);border:1px solid transparent;font-size:16px;line-height:22px;white-space:pre;overflow:hidden;color:transparent;pointer-events:none}
.caphl mark{color:transparent;background:color-mix(in srgb, var(--tint) 18%, transparent);border-radius:4px;text-decoration:underline 2px var(--tint);text-underline-offset:4px}
.capchips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.capchips:empty{display:none}
.capchips button{padding:var(--s1) var(--s3);border-radius:999px;border:1px solid transparent;background:color-mix(in srgb, var(--tint) 14%, var(--card));color:var(--ink);font-size:14px}
.capchips .kind{background:var(--tint);color:var(--on-tint);font-weight:600}
.capchips .off{background:none;border:1px dashed var(--muted)}
.qprev .err{background:none;color:var(--red)}
.srow{display:grid;gap:2px;width:100%;padding:var(--s3) 0;text-align:start}
.srow small{color:var(--muted)}
#searchOut{overflow:auto;max-height:60dvh}
#searchOut h4 .btn{margin-inline-start:var(--s2)}
.dlg > .row:has(#searchText){display:flex;gap:var(--s2);align-items:center}