/* ================================================================
   Deck — clock dead centre, four boxes pinned to the four corners,
   then a full page beneath for each one.
   ================================================================ */

:root{
  /* Flat charcoal. Colour is kept for meaning: each module gets its own
     (see subjectColor in utils.js), and red/yellow/green are reserved for
     status. Everything else is greyscale. */
  /* Backgrounds come from the theme sliders (settings.js sets --th-h,
     --th-s and --th-lift); the defaults here are the charcoal look. */
  --th-h:216; --th-s:13%; --th-lift:0%;
  --bg:hsl(var(--th-h) var(--th-s) calc(7.5% + var(--th-lift)));
  --sidebar-bg:hsl(var(--th-h) var(--th-s) calc(5.5% + var(--th-lift)));
  --surface:hsl(var(--th-h) var(--th-s) calc(10% + var(--th-lift)));
  --surface-2:hsl(var(--th-h) var(--th-s) calc(12.5% + var(--th-lift)));
  --raised:hsl(var(--th-h) var(--th-s) calc(16% + var(--th-lift)));
  --line:hsl(var(--th-h) var(--th-s) calc(17% + var(--th-lift)));
  --line-2:hsl(var(--th-h) var(--th-s) calc(13% + var(--th-lift)));
  --text:#eef0f3;
  --soft:#a7adb7;
  --dim:#737984;
  --faint:#474d56;
  /* Primary colour. Mono by default so the subject colours are the only
     colour on the page; the theme picker swaps these four lines. */
  --accent-rgb:238,240,243;
  --accent:rgb(var(--accent-rgb));
  --accent-2:#ffffff;
  --accent-bg:rgba(var(--accent-rgb),.08);
  --on-accent:#111316;
  --red:#f2726f;
  --red-bg:rgba(242,114,111,.14);
  --amber:#f7c548;
  --amber-bg:rgba(247,197,72,.13);
  --green:#7ed6a0;
  --green-bg:rgba(126,214,160,.13);
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  /* hero geometry — corners and centre are positioned from these */
  --nav:54px;
  --edge:22px;
  --top:68px;
  --foot:82px;
  --gutter:14px;
  --colw:clamp(236px,21vw,320px);

  /* Safe areas. With viewport-fit=cover the page runs under the notch and the
     home indicator, so anything pinned to an edge has to add these back. They
     are 0px on every device without a cutout, so they cost nothing elsewhere. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
::selection{background:var(--accent);color:var(--on-accent)}

/* Keyboard users get a visible ring everywhere; mouse users never see it. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.npill:focus-visible,
.wkrow:focus-visible{outline-offset:3px}
.skip{position:fixed;top:8px;left:8px;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:9px 16px;border-radius:9px;font-size:13px;font-weight:500;text-decoration:none;
  transform:translateY(-160%);transition:transform .18s}
.skip:focus{transform:translateY(0)}

/* timetable validation */
.ttcheck{margin-top:9px;font-size:12px;line-height:1.6;color:var(--dim);
  padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.04);display:none}
.ttcheck.ok,.ttcheck.bad{display:block}
.ttcheck.ok{color:var(--green)}
.ttcheck.bad{color:var(--red);background:var(--red-bg)}
.ttcheck b{font-weight:600}
.ttcheck code{font-family:var(--mono);font-size:11px;color:var(--accent-2)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* ---------- nav ----------
   A slim sticky bar on phones and tablets; from 1041px it becomes the
   fixed sidebar (see the min-width query further down). */
.nav{
  /* --sat is the phone's status bar: 0 in a browser, the clock's height
     when installed, since the page then runs to the top of the screen */
  position:sticky;top:0;z-index:40;height:calc(var(--nav) + var(--sat));padding-top:var(--sat);
  display:flex;align-items:center;gap:3px;
  padding-left:calc(var(--edge) + var(--sal));
  padding-right:calc(var(--edge) + var(--sar));
  background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav .mark{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;
  letter-spacing:-.02em;white-space:nowrap}
.nav .mark img{width:26px;height:26px;display:block;flex:0 0 auto}
.nav .grow{flex:1}
.nav .links{display:none}
.nav .links a,.navrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;
  color:var(--soft);text-decoration:none;font-size:13.5px;transition:.15s;white-space:nowrap}
.nav .links a svg,.navrow svg{width:16px;height:16px;flex:0 0 auto;color:var(--dim);transition:.15s}
.nav .links a:hover,.navrow:hover{color:var(--text);background:var(--surface-2)}
.nav .links a.on{color:var(--text);background:var(--raised)}
.nav .links a.on svg{color:var(--text)}
.nav .cnt{margin-left:auto;font:400 12px var(--mono);color:var(--dim)}
.navrow{background:none;border:0;cursor:pointer;font-family:var(--sans)}
.navrow span{display:none}
.nav .who{display:none}

/* ================================================================
   Today — greeting header, the task bar, overview panels, then
   next up and term progress side by side.
   ================================================================ */
/* min-height: Today is a page of its own, not a strip above the Dashboard */
.deck{max-width:1000px;margin:0 auto;min-height:calc(100vh - var(--nav));min-height:calc(100dvh - var(--nav));
  padding:24px calc(30px + var(--sar)) 48px calc(30px + var(--sal))}
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.hello .kicker{font:500 12.5px var(--mono);color:var(--dim)}
.hello h1{margin-top:8px;font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:600;
  letter-spacing:-.035em;line-height:1.08}
.hello p{margin-top:8px;font-size:14px;color:var(--soft);max-width:60ch}
.hello .wx{text-align:right;flex:0 0 auto}
.hello .wx .t{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1}
.hello .wx .t svg{width:28px;height:28px;color:var(--soft)}
.hello .wx .c{margin-top:6px;font:12px var(--mono);color:var(--dim)}

/* deadlines and tasks */
.home{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;align-items:start}
.hcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px 10px}
.hcard > header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.hcard > header h3{font-size:15px;font-weight:600}
.hcard > header span{font:12px var(--mono);color:var(--dim)}
.hrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 0 12px 12px;border-top:1px solid var(--line-2);cursor:pointer;position:relative}
.hrow:first-of-type{border-top:0}
.hrow[data-subj]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:2px;background:var(--subj)}
.hrow:hover .htx b{color:#fff}
.hrow .tick{margin-top:0;width:17px;height:17px;border-radius:5px}
.hdate{width:40px;padding:5px 0 4px;border-radius:9px;background:var(--surface-2);text-align:center;line-height:1.1}
.hdate small{display:block;font:500 9.5px var(--mono);color:var(--dim)}
.hdate b{font-size:16px;font-weight:600}
.hdate.now{background:var(--text);color:var(--bg)} .hdate.now small{color:var(--bg)}
.hdate.late{background:var(--red-bg);color:var(--red)} .hdate.late small{color:var(--red)}
.htx b{display:block;font-size:13.5px;font-weight:500;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htx small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;color:var(--dim)}
.htx small i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.hnone{padding:10px 0 14px;font-size:13.5px;color:var(--dim);line-height:1.6}
.hmore{display:block;padding:10px 0 6px;font-size:12.5px;color:var(--soft);cursor:pointer;
  border-top:1px solid var(--line-2)}
.hmore:hover{color:var(--text)}

/* ---------- tab bar (phones and tablets) ----------
   Fixed to the bottom of the screen on every page, like an app's tab bar,
   with room for the iPhone's home indicator (--sab). */
.hbar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  padding:6px calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal));
  background:var(--sidebar-bg);border-top:1px solid var(--line-2)}
.npill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;
  background:none;border:0;border-radius:10px;padding:6px 2px;cursor:pointer;transition:.15s;
  font:500 10.5px var(--sans);color:var(--dim)}
.npill span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npill svg{width:21px;height:21px;flex:0 0 auto}
.npill:hover{color:var(--soft)}
.npill.on{color:var(--text)}
.npill.on svg{color:var(--text)}

.tick{flex:0 0 15px;height:15px;margin-top:2px;border:1.5px solid var(--faint);border-radius:4px;
  cursor:pointer;position:relative;transition:.15s;background:none}
.tick:hover{border-color:var(--accent)}
.done .tick{background:var(--accent);border-color:var(--accent)}
.done .tick::after{content:"";position:absolute;left:4.4px;top:1.4px;width:3.4px;height:7.6px;
  border:solid var(--on-accent);border-width:0 1.7px 1.7px 0;transform:rotate(43deg)}
.done .t,.done .ttl{text-decoration:line-through;color:var(--dim)}

/* ---------- command bar ---------- */
.ask{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;transition:border-color .15s}
.ask .lead{color:var(--dim);display:grid;place-items:center}
.ask .lead svg{width:15px;height:15px}
.ask:focus-within{border-color:var(--accent)}
.ask input{flex:1;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--sans);font-size:14px}
.ask input::placeholder{color:var(--dim)}
.kbd{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;background:var(--surface-2)}
button.kbd{cursor:pointer;line-height:inherit}
button.kbd:hover{color:var(--text);border-color:var(--faint)}
.state{font-size:12px;color:var(--dim);white-space:nowrap;cursor:pointer;display:flex;
  align-items:center;gap:7px}
.state:hover{color:var(--soft)}
.pip{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.state.on .pip{background:var(--green)}
.state.wait .pip{background:var(--amber)}

/* ================= pages ================= */
/* scroll-margin keeps a jumped-to heading clear of the sticky bar */
.page{min-height:calc(100vh - var(--nav));
  min-height:calc(100dvh - var(--nav));padding:28px 0 64px;
  border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--nav) + var(--sat))}
/* --edge keeps this in step with the overview's gutter — they used to be 14px
   and 12px, which read as the pages being a hair off-centre from each other. */
.wrap{max-width:1180px;margin:0 auto;
  padding-left:calc(30px + var(--sal));padding-right:calc(30px + var(--sar))}
.lede{margin-bottom:20px}
.page h2{font-size:clamp(1.45rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.page .sub{margin-top:6px;font-size:13.5px;color:var(--soft);max-width:62ch}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:30px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 15px}
.tile .n{font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.tile .l{margin-top:7px;font-size:12px;color:var(--dim)}
.tile.bad .n{color:var(--red)} .tile.hot .n{color:var(--amber)}
.tile.good .n{color:var(--green)} .tile.blue .n{color:var(--accent-2)}

.secline{display:flex;align-items:center;gap:11px;margin:24px 0 12px}
.lede + .secline{margin-top:0}            /* no double gap under a page title */
.secline h4{font-size:12.5px;font-weight:600;
  color:var(--soft);white-space:nowrap}
.secline .rule{flex:1;height:1px;background:var(--line-2)}
.secline .act{font-size:12.5px;color:var(--dim);cursor:pointer}
.secline .act:hover{color:var(--accent-2)}

/* ---------- day timeline (dashboard) ---------- */
.dayview{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:22px}
.dside{display:flex;flex-direction:column;gap:16px;min-width:0}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 18px;min-width:0}
.tcard > header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.tcard > header h3{font-size:14px;font-weight:600}
.tcard > header span{font:12px var(--mono);color:var(--dim)}

.tgrid{position:relative;margin:10px 0 4px}
.thour{position:absolute;left:0;right:0;border-top:1px solid var(--line-2)}
.thour span{position:absolute;top:-8px;left:0;padding-right:8px;background:var(--surface);
  font:11px var(--mono);color:var(--faint)}
.tlane{position:absolute;top:0;bottom:0;left:58px;right:0}
.tblock{position:absolute;border-radius:9px;padding:8px 12px;overflow:hidden;
  border-left:3px solid var(--subj);background:color-mix(in srgb,var(--subj) 14%,var(--surface-2))}
.tblock b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tblock small{display:block;margin-top:2px;font:12px var(--mono);color:var(--soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tblock.past{opacity:.45}
.tblock.live{box-shadow:0 0 0 1px var(--subj)}
.nowtag{font:500 10.5px var(--mono);color:#111316;background:var(--subj);padding:1px 6px;border-radius:99px}
.tfree{position:absolute;left:0;right:0;border:1px dashed var(--line);border-radius:9px;
  display:grid;place-items:center;padding:0 12px;text-align:center;font-size:12.5px;color:var(--dim)}
.tnow{position:absolute;left:44px;right:0;border-top:2px solid var(--red);z-index:2;pointer-events:none}
.tnow::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.tnow span{position:absolute;right:0;top:-19px;font:500 11px var(--mono);color:var(--red)}
.tempty{margin-top:12px;font-size:13px;color:var(--dim)}
.tempty a{color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

.drow{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line-2)}
.drow:first-of-type{border-top:0;padding-top:2px}
.drow .tick{margin-top:3px}
.drow .dtx b{display:block;font-size:14px;font-weight:500;line-height:1.35}
.drow .dtx small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);margin-top:2px}
.drow .dtx small i{width:8px;height:8px;border-radius:2px}
.dpill{font:500 11.5px var(--mono);padding:2px 8px;border-radius:99px;background:var(--raised);color:var(--soft);white-space:nowrap}
.dpill.hot{background:var(--red);color:#111316}
.dnums{display:flex;gap:28px;flex-wrap:wrap}
.dnums div{font:12px var(--mono);color:var(--dim)}
.dnums b{display:block;font:600 24px var(--sans);letter-spacing:-.02em;color:var(--text);margin-bottom:2px}
.nothing{padding:6px 0;color:var(--dim);font-size:13.5px}

@media (max-width:860px){ .dayview{grid-template-columns:1fr} }

/* ---------- month grid (calendar) ---------- */
.mnav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mnav h3{font-size:15.5px;font-weight:600;letter-spacing:-.02em;min-width:180px}
.mnav .grow{flex:1}
.arrow{background:var(--surface);border:1px solid var(--line);color:var(--soft);border-radius:8px;
  width:32px;height:30px;cursor:pointer;font-size:13px;font-family:var(--sans);transition:.15s}
.arrow:hover{color:var(--text);border-color:var(--faint)}
.month{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.mrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mrow.names{margin-bottom:7px}
.mname{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--dim);text-align:center;padding:4px 0}
.wkrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:3px 4px}
.cell{height:64px;border-radius:8px;padding:6px 8px;background:var(--bg);
  border:1px solid transparent;display:flex;flex-direction:column;gap:5px;min-height:0}
.cell{width:100%;text-align:left;cursor:pointer;color:var(--text);font-family:var(--sans);transition:border-color .15s}
.cell:hover{border-color:var(--faint)}
.cell.out{opacity:.28}
.cell.now{border-color:var(--accent)}
.cell .cd{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.cell.now .cd{color:var(--accent-2);font-weight:700}
.cell .dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
.cell .dots i{width:5px;height:5px;border-radius:50%;display:block}
.cell .dots i.cls{background:var(--accent)}
.cell .dots i.tsk{background:var(--soft)}

/* ---------- page header with a switch (Calendar, Dashboard) ---------- */
.lede-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{background:none;border:0;border-radius:7px;padding:6px 14px;font:13px var(--sans);color:var(--dim);cursor:pointer}
.seg button:hover:not(:disabled){color:var(--text)}
.seg button.on{background:var(--raised);color:var(--text);font-weight:500}
.seg button:disabled{opacity:.4;cursor:default}
.mnav .act{background:none;border:0;font:12.5px var(--sans);color:var(--dim);cursor:pointer;padding:6px 4px}
.mnav .act:hover{color:var(--text)}
.termline{font-size:12.5px;color:var(--soft)}

/* ---------- calendar: week ---------- */
.weekgrid{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.weekgrid .wh{background:none;border:0;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line);
  padding:8px 6px;font:500 11px var(--mono);color:var(--dim);text-align:center;cursor:pointer;min-width:0}
.weekgrid .wh.blank{border-left:0;cursor:default}
.weekgrid .wh b{display:block;font:600 16px var(--sans);color:var(--soft)}
.weekgrid .wh.t{background:var(--raised)}
.weekgrid .wh.t b{color:var(--text)}
.weekgrid .wh:hover:not(.blank) b{color:var(--text)}
.weekgrid .wh .due{display:block;margin-top:3px;font:500 10.5px var(--sans);color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weekgrid .wt{position:relative}
.weekgrid .wt span{position:absolute;right:8px;top:-7px;font:10.5px var(--mono);color:var(--faint)}
.weekgrid .wt span:first-child{top:2px}
.wc{position:relative;border-left:1px solid var(--line-2);cursor:pointer}
.wc .hl{position:absolute;left:0;right:0;border-top:1px solid var(--line-2)}
.wc.t{background-color:rgba(255,255,255,.025)}
.wb{position:absolute;border-radius:7px;padding:5px 7px;font-size:12px;font-weight:600;line-height:1.25;overflow:hidden;
  background:color-mix(in srgb,var(--subj) 20%,var(--surface-2));border-left:3px solid var(--subj)}
.wb small{display:block;font:10.5px var(--mono);color:var(--soft);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb.past{opacity:.45}
.wnow{position:absolute;left:0;right:0;border-top:2px solid var(--red);pointer-events:none}
.agenda{display:none}
.weekgrid{position:relative}
.wempty{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);z-index:2;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 22px;
  display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--dim)}
.wempty b{color:var(--text);font-size:14px;font-weight:600}
.wempty a{color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#cal-key{margin-top:12px}
.subkey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--soft)}
.subkey span{display:flex;align-items:center;gap:7px}
.subkey span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--subj)}

/* ---------- dashboard: stats ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{padding:14px 16px}
.kpi .l{font-size:12.5px;color:var(--dim)}
.kpi .n{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-top:2px;white-space:nowrap}
.kpi .n small{font-size:13px;color:var(--dim);font-weight:400;margin-left:4px;letter-spacing:0}
.kpi .d{font:12px var(--mono);color:var(--green);margin-top:2px}
.kpi .d.bad{color:var(--red)}
.kpi .d.dim{color:var(--dim)}
.kpi .d a{color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.meter{height:6px;background:var(--surface-2);border-radius:3px;margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--text);border-radius:3px}
.meter.good i{background:var(--green)}
.meter.bad i{background:var(--red)}
.kpi .meter + .d{margin-top:6px}
.srow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-top:12px}
.srow.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.box{padding:16px 18px}
.box h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;font-weight:600}
.box h3 span{font:400 12px var(--mono);color:var(--dim)}
.box .hnone a{color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.chart{display:flex;align-items:flex-end;gap:14px;height:150px;margin-top:16px;padding-bottom:22px;
  border-bottom:1px solid var(--line-2)}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;
  height:100%;position:relative}
.chart .col i{width:100%;max-width:38px;border-radius:6px 6px 2px 2px;background:var(--raised)}
.chart .col.cur i{background:var(--text)}
.chart .col b{font:500 11px var(--mono);color:var(--soft)}
.chart .col span{position:absolute;bottom:-20px;font:10.5px var(--mono);color:var(--dim)}
.hb{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.hb > div{display:grid;grid-template-columns:minmax(0,130px) 1fr 52px;gap:10px;align-items:center;
  font-size:12.5px;color:var(--soft)}
.hb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .t{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.hb .t i{display:block;height:100%;border-radius:4px;background:var(--c)}
.hb em{font:normal 12px var(--mono);color:var(--dim);text-align:right}
.cats{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:16px 0 12px;gap:2px}
.cats i{display:block;height:100%}
.lg{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--soft)}
.lg b{color:var(--text);font-weight:500;margin-right:4px}
.lg span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:6px}
.streak{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;margin-top:16px}
.streak i{aspect-ratio:1;border-radius:4px;background:var(--surface-2)}
.streak i.a{background:#3a5a46}
.streak i.b{background:#5c9b72}
.streak i.c{background:var(--green)}
.cap{font-size:12px;color:var(--dim);margin-top:10px}

/* ---------- tasks ---------- */
.tasklist{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.item{border-top:1px solid var(--line-2);transition:background .15s}
.item:first-child{border-top:0}
.item:hover,.item.open{background:var(--surface-2)}
.item .lead{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;cursor:pointer}
.item .lead .body{flex:1;min-width:0}
.item .ttl{font-size:13.5px;line-height:1.4}
.item .metas{margin-top:6px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tag{font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--line);
  color:var(--soft);background:var(--surface-2)}
.tag.mod{color:var(--accent-2);border-color:rgba(var(--accent-rgb),.28);background:var(--accent-bg)}
.tag.hi{color:var(--red);border-color:rgba(242,114,111,.28);background:var(--red-bg)}
.tag.due-late{color:var(--red);border-color:rgba(242,114,111,.28);background:var(--red-bg)}
.tag.due-soon{color:var(--amber);border-color:rgba(227,162,76,.28);background:var(--amber-bg)}
.tag.note{color:var(--dim)}
.item .chev{color:var(--faint);font-size:11px;transition:transform .2s;padding-top:3px}
.item.open .chev{transform:rotate(90deg);color:var(--soft)}
.more{display:none;padding:2px 18px 20px 46px}
.item.open .more{display:block}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;
  margin-bottom:14px}
.fld label{display:block;font-size:11px;color:var(--dim);margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;color:var(--text);padding:8px 11px;font-family:var(--sans);font-size:13px;
  outline:none}
.fld textarea{min-height:76px;resize:vertical;line-height:1.6}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent)}
.trash{background:none;border:1px solid var(--line);color:var(--dim);border-radius:7px;
  padding:7px 13px;font-size:12px;cursor:pointer;font-family:var(--sans);transition:.15s}
.trash:hover{color:var(--red);border-color:rgba(242,114,111,.4)}
/* ---------- new task ---------- */
.newwrap{margin-bottom:6px}
.newbtn{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:12px 16px;
  font-family:var(--sans);color:var(--text);transition:.16s
}
.newbtn:hover{border-color:var(--accent);border-style:solid;background:var(--surface-2)}
.newbtn .ni{flex:0 0 36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-bg);color:var(--accent-2)}
.newbtn .ni svg{width:18px;height:18px}
.newbtn .nl{flex:1;display:flex;flex-direction:column;gap:2px}
.newbtn .nl b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.newbtn .nl i{font-style:normal;font-size:12.5px;color:var(--dim)}
.newbtn .nk{font-size:11.5px;color:var(--faint);white-space:nowrap}
.newwrap.open .newbtn{display:none}

.newform{display:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px 18px}
.newwrap.open .newform{display:grid}
.nrow.wide{grid-column:1/-1}
.nrow label{display:block;font-size:12px;font-weight:500;color:var(--soft);margin-bottom:6px}
.nrow input,.nrow select,.nrow textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:10px 13px;font-family:var(--sans);font-size:13.5px;outline:none}
.nrow textarea{min-height:74px;resize:vertical;line-height:1.6}
.nrow input:focus,.nrow select:focus,.nrow textarea:focus{border-color:var(--accent)}
/* iPhone draws date boxes at their own natural width, which can run off a
   narrow screen; let them shrink like any other box */
.nrow input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;
  text-align:left;min-height:40px}
.nrow input[type=date]::-webkit-date-and-time-value{text-align:left}
.paygrid > *,.nrow{min-width:0}
.nquick{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap;margin-top:-4px}
.nquick button{background:var(--surface-2);border:1px solid var(--line);color:var(--dim);
  border-radius:20px;padding:5px 13px;font-size:12px;cursor:pointer;font-family:var(--sans);
  transition:.15s}
.nquick button:hover{color:var(--text);border-color:var(--faint)}
.nquick button.on{background:var(--accent-bg);color:var(--accent-2);
  border-color:rgba(var(--accent-rgb),.35)}
.nerr{grid-column:1/-1;font-size:12.5px;color:var(--red);display:none}
.nerr.on{display:block}
.nends{grid-column:1/-1;display:flex;gap:9px;justify-content:flex-end;margin-top:2px}

/* search */
.tsearch{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:12px;
  transition:border-color .15s}
.tsearch:focus-within{border-color:var(--accent)}
.tsearch .ti{color:var(--dim);display:grid;place-items:center}
.tsearch .ti svg{width:15px;height:15px}
.tsearch input{flex:1;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--sans);font-size:13.5px}
.tsearch input::placeholder{color:var(--dim)}
.tclear{background:none;border:0;color:var(--dim);font-size:17px;cursor:pointer;
  padding:0 4px;line-height:1;display:none}
.tsearch.has .tclear{display:block}
.tclear:hover{color:var(--text)}

/* subtasks */
.subs{margin-bottom:14px}
.subs .sh{font-size:11px;color:var(--dim);margin-bottom:7px;display:flex;
  align-items:center;gap:9px}
.subs .bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.09);
  overflow:hidden;max-width:150px}
.subs .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;
  transition:width .3s}
.sub{display:flex;align-items:center;gap:10px;padding:6px 0}
.sub .sbox{flex:0 0 14px;height:14px;border:1.5px solid var(--faint);border-radius:4px;
  cursor:pointer;position:relative;transition:.15s}
.sub .sbox:hover{border-color:var(--accent)}
.sub.on .sbox{background:var(--accent);border-color:var(--accent)}
.sub.on .sbox::after{content:"";position:absolute;left:4px;top:1.2px;width:3.2px;height:7px;
  border:solid var(--on-accent);border-width:0 1.6px 1.6px 0;transform:rotate(43deg)}
.sub .stx{flex:1;font-size:13px;line-height:1.4}
.sub.on .stx{text-decoration:line-through;color:var(--dim)}
.sub .sx{color:var(--faint);cursor:pointer;font-size:14px;padding:0 3px;opacity:0}
.sub:hover .sx{opacity:1}
.sub .sx:hover{color:var(--red)}
.subadd{display:flex;align-items:center;gap:10px;margin-top:6px}
.subadd input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;
  color:var(--text);padding:7px 11px;font-family:var(--sans);font-size:12.5px;outline:none}
.subadd input:focus{border-color:var(--accent)}

.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.chip{background:var(--surface);border:1px solid var(--line);color:var(--dim);border-radius:8px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.15s;font-family:var(--sans)}
.chip:hover{color:var(--text)}
.chip.on{background:var(--raised);color:var(--text);border-color:var(--faint)}

/* ---------- spending ---------- */
.budgetbar{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-bottom:14px}
.budgetbar .top{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.budgetbar .amt{font-size:22px;font-weight:600;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.budgetbar .of{font-size:13px;color:var(--dim)}
.budgetbar .right{margin-left:auto;font-size:13px;font-weight:500}
.budgetbar .track{height:9px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.budgetbar .fill{height:100%;border-radius:9px;background:var(--accent);transition:width .5s ease}
/* money: green with plenty of budget left, red once it's running out (moneyTone) */
.budgetbar.good .fill{background:var(--green)}
.budgetbar.bad .fill{background:var(--red)}
.budgetbar.good .right{color:var(--green)}
.budgetbar.bad .right{color:var(--red)}
.budgetbar .days{margin-top:10px;font-size:12px;color:var(--dim)}

/* adding a payment: tap amounts to tally them, or type your own */
.payform{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column;gap:16px}
.tally{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.qbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:78px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;color:var(--text);
  font-family:var(--sans);cursor:pointer;transition:transform .08s,border-color .15s,background .15s}
.qbtn b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.qbtn small{font-size:11.5px;color:var(--dim)}
.qbtn:hover{border-color:var(--faint);background:var(--raised)}
.qbtn:active{transform:scale(.96)}
.total{min-width:170px;text-align:right}
.total b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.total small{display:block;font:12px var(--mono);color:var(--dim);margin-top:4px;
  max-width:220px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tacts{display:flex;justify-content:flex-end;gap:12px;margin-top:6px}
.tacts .act,.own .act{background:none;border:0;padding:2px 0;font:12.5px var(--sans);color:var(--dim);cursor:pointer}
.tacts .act:hover:not(:disabled),.own .act:hover{color:var(--text)}
.tacts .act:disabled{opacity:.35;cursor:default}
.paygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.payfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.own{display:flex;align-items:center;gap:12px}
.own input{width:130px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:8px 11px;font-family:var(--sans);font-size:13.5px;outline:none}
.own input:focus{border-color:var(--accent)}

/* the budget's own settings: a pop-up from the box's top-right corner */
.budgetwrap{position:relative}
.budgetwrap .budgetbar .top{padding-right:44px}
.budgetwrap .budgetbar .days:only-child{padding-right:44px}
.bedit{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--soft);cursor:pointer;transition:.15s}
.bedit:hover,.bedit.on{color:var(--text);border-color:var(--faint)}
.bedit svg{width:16px;height:16px}
.budgetset{position:absolute;top:54px;right:14px;z-index:20;width:min(560px,calc(100% - 28px));
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.budgetset[hidden]{display:none}
.budgetset .why{grid-column:1/-1;margin:0;font-size:12px;color:var(--dim)}

.spendlist{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sprow{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line-2)}
.sprow:first-child{border-top:0}
.sprow:hover{background:var(--surface-2)}
.sprow .dot{flex:0 0 9px;height:9px;border-radius:50%}
.sprow .sn{flex:1;min-width:0}
.sprow .sn b{display:block;font-size:13.5px;font-weight:500}
.sprow .sn i{font-style:normal;display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.sprow .sa{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
/* always visible and a comfortable size to tap; red only when pointed at */
.sprow .sx{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;color:var(--dim);transition:.15s}
.sprow .sx svg{width:17px;height:17px}
.sprow .sx:hover,.sprow .sx:focus-visible{color:var(--red);border-color:rgba(242,114,111,.45);background:var(--red-bg)}

.hollow{border:1px dashed var(--line);border-radius:14px;padding:42px 30px;text-align:center;
  color:var(--dim);font-size:13.5px;line-height:1.8;grid-column:1/-1}
.hollow b{color:var(--soft);font-weight:500}

/* ---------- overlays ---------- */
#note{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);z-index:90;
  background:var(--raised);border:1px solid var(--line);border-radius:11px;padding:9px 12px 9px 18px;
  font-size:13px;color:var(--text);opacity:0;pointer-events:none;transition:.25s;
  box-shadow:0 10px 34px rgba(0,0,0,.5);display:flex;align-items:center;gap:14px}
#note.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#note .undo{background:var(--accent);border:0;border-radius:7px;color:var(--on-accent);font-weight:600;
  font-size:12.5px;padding:5px 13px;cursor:pointer;font-family:var(--sans)}
#note .undo:hover{opacity:.88}

/* ---------- install tip ---------- */
#install-tip{position:fixed;left:50%;bottom:calc(18px + var(--sab));transform:translateX(-50%);z-index:85;
  width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:12px;
  background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:13px;color:var(--soft);line-height:1.5}
#install-tip[hidden]{display:none}
#install-tip img{flex:0 0 auto;border-radius:9px}
#install-tip .itx{flex:1;min-width:0}
#install-tip b{color:var(--text);font-weight:600}
#install-tip .btn{margin-left:8px;padding:6px 14px;min-height:0}
#install-tip .share{width:16px;height:16px;vertical-align:-3px;fill:none;stroke:var(--text);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#install-tip .ix{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:none;border:0;
  color:var(--dim);font-size:20px;cursor:pointer}
#install-tip .ix:hover{color:var(--text);background:var(--surface-2)}

/* ---------- command palette ---------- */
#pal{position:fixed;inset:0;z-index:80;display:none;justify-content:center;
  align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(12vh + var(--sat)) calc(20px + var(--sar))
          calc(20px + var(--sab)) calc(20px + var(--sal));
  background:rgba(10,11,13,.66);}
#pal.on{display:flex}
.palbox{width:min(620px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.palin{display:flex;align-items:center;gap:11px;padding:15px 17px;
  border-bottom:1px solid var(--line-2)}
.palin .pi{color:var(--dim);display:grid;place-items:center}
.palin .pi svg{width:16px;height:16px}
.palin input{flex:1;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--sans);font-size:15px}
.palin input::placeholder{color:var(--dim)}
.palres{max-height:52vh;max-height:52dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:7px}
.palsec{font-size:12.5px;font-weight:600;
  color:var(--dim);padding:10px 11px 6px}
.palrow{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:10px;
  cursor:pointer;transition:background .12s}
.palrow:hover{background:var(--surface-2)}
.palrow.sel{background:var(--accent-bg);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.32)}
.palrow .pic{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--soft)}
.palrow.sel .pic{background:rgba(var(--accent-rgb),.28);color:var(--accent-2)}
.palrow .pic svg{width:14px;height:14px}
.palrow .ptx{flex:1;min-width:0}
.palrow .pn{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.palrow .ps{font-size:11.5px;color:var(--dim);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.palrow .pw{font-size:11.5px;color:var(--dim);white-space:nowrap}
.palnone{padding:28px 14px;text-align:center;color:var(--dim);font-size:13px}
.palfoot{display:flex;gap:16px;padding:10px 17px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--dim)}
.palfoot b{color:var(--soft);font-weight:600;font-family:var(--mono);font-size:10.5px}

/* ---------- in-page editor dialog ---------- */
#mini{position:fixed;inset:0;z-index:72;display:none;align-items:flex-start;
  justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(10,11,13,.72);
  padding:calc(20px + var(--sat)) calc(20px + var(--sar))
          calc(20px + var(--sab)) calc(20px + var(--sal))}
#mini.on{display:flex}
.minisheet{width:min(600px,100%)}
.mini2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.editbtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);color:var(--soft);border-radius:9px;padding:7px 14px;
  font-size:12.5px;cursor:pointer;font-family:var(--sans);transition:.15s}
.editbtn:hover{color:var(--text);border-color:var(--accent);background:var(--surface-2)}
.editbtn svg{width:14px;height:14px}

#setup{position:fixed;inset:0;z-index:70;display:none;align-items:flex-start;
  justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(10,11,13,.72);
  padding:calc(20px + var(--sat)) calc(20px + var(--sar))
          calc(20px + var(--sab)) calc(20px + var(--sal))}
#setup.on{display:flex}
.sheet{width:min(820px,100%);margin:auto;max-height:90vh;max-height:90dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:32px 36px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.sheet h3{font-size:23px;font-weight:600;letter-spacing:-.03em}
.sheet .s{font-size:14px;color:var(--dim);margin:7px 0 26px}
.sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.sheet .cols .wide{grid-column:1/-1}
.setsec{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:16px 0 18px}
.setsec h4{font-size:12.5px;font-weight:600;
  color:var(--dim);white-space:nowrap}
.setsec .rule{flex:1;height:1px;background:var(--line-2)}
.f{margin-bottom:19px}
.f label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.f input,.f textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:11px 14px;font-family:var(--sans);font-size:14px;outline:none}
.f textarea{font-family:var(--mono);font-size:12.5px;min-height:170px;resize:vertical;line-height:1.75}

/* page order list */
.pagelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.prow{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;cursor:grab;transition:.15s}
.prow:hover{border-color:var(--faint)}
.prow.dragging{opacity:.4;cursor:grabbing}
.prow.over{border-color:var(--accent);background:var(--accent-bg)}
.prow .pgrip{color:var(--faint);font-size:12px;letter-spacing:-2px}
.prow .pnum{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:18px}
.prow .pic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--soft);flex:0 0 auto}
.prow .pic svg{width:14px;height:14px}
.prow .pnm{flex:1;font-size:13.5px;font-weight:500}
.prow .pmv{display:flex;gap:5px}
.pbtn{background:var(--surface-2);border:1px solid var(--line);color:var(--soft);border-radius:7px;
  width:28px;height:26px;cursor:pointer;font-size:12px;font-family:var(--sans);transition:.15s}
.pbtn:hover:not(:disabled){color:var(--text);border-color:var(--accent)}
.pbtn:disabled{opacity:.3;cursor:default}

/* theme picker */
.tpick{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.trow{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;margin-bottom:12px}
.trow label{font-size:12.5px;color:var(--soft)}
.tpick input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);cursor:pointer;margin:0}
.tpick .hue{background:linear-gradient(90deg,hsl(0 70% 45%),hsl(60 70% 45%),hsl(120 70% 45%),
  hsl(180 70% 45%),hsl(240 70% 45%),hsl(300 70% 45%),hsl(359 70% 45%))}
.tpick .str{background:linear-gradient(90deg,#2a2d33,var(--pick,#3b4a6b))}
.tpick input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#eef0f3;border:3px solid var(--bg);box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.tpick input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:#eef0f3;border:3px solid var(--bg)}
.tfoot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500}
.tfoot .act{background:none;border:0;font:12.5px var(--sans);color:var(--dim);cursor:pointer;padding:4px 0}
.tfoot .act:hover{color:var(--text)}

/* ---------- login ---------- */
/* align-items:center on a fixed overlay cuts the top off any box taller than
   the screen and you can't scroll to it. flex-start + margin:auto on the child
   still centres it when it fits, but lets it scroll when it doesn't. */
#gate{position:fixed;inset:0;z-index:95;display:none;align-items:flex-start;
  justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(20px + var(--sat)) calc(20px + var(--sar))
          calc(20px + var(--sab)) calc(20px + var(--sal));
  background:var(--bg)}
#gate.on{display:flex}
.gbox{position:relative;margin:auto;width:min(410px,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:32px 32px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gmark{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.gmark .gi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-bg);color:var(--accent-2)}
.gmark .gi svg{width:19px;height:19px}
.gmark h2{font-size:19px;font-weight:600;letter-spacing:-.025em}
.gmark p{font-size:12.5px;color:var(--dim);margin-top:1px}
.gtabs{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:20px}
.gtab{flex:1;background:none;border:0;border-radius:8px;padding:8px;font-size:13px;
  color:var(--dim);cursor:pointer;font-family:var(--sans);transition:.15s}
.gtab.on{background:var(--raised);color:var(--text);font-weight:500}
.gf{margin-bottom:14px}
.gf label{display:block;font-size:12px;color:var(--soft);margin-bottom:6px}
.gf input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:11px 13px;font-family:var(--sans);font-size:14px;outline:none}
.gf input:focus{border-color:var(--accent)}
.gerr{font-size:12.5px;color:var(--red);margin-bottom:13px;display:none;line-height:1.5}
.gerr.on{display:block}
.gerr.ok{color:var(--green)}
.gforgot{margin:-6px 0 13px}
.gforgot button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.gforgot button:hover{color:var(--accent)}
.gforgot button:disabled{opacity:.5;cursor:default;text-decoration:none}
.gbtn{width:100%;background:var(--accent);border:0;border-radius:10px;color:var(--on-accent);font-weight:600;
  font-size:14px;padding:12px;cursor:pointer;font-family:var(--sans);transition:.15s}
.gbtn:hover{opacity:.9}
.gbtn:disabled{opacity:.5;cursor:default}
.gkeep{display:flex;align-items:center;gap:9px;margin:0 0 14px;cursor:pointer;
  font-size:12.5px;color:var(--soft);user-select:none}
.gkeep input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
.gor{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:11.5px;color:var(--faint)}
.gor::before,.gor::after{content:"";flex:1;height:1px;background:var(--line-2)}
.gbtn.ghost{background:none;border:1px solid var(--line);color:var(--soft);font-weight:500}
.gbtn.ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--faint);opacity:1}
.gguest{margin-top:9px;font-size:11.5px;color:var(--dim);line-height:1.6;text-align:center}
/* opened from a reset-password email: only the new-password fields apply */
#gate.reset .gtabs,#gate.reset #g-user-wrap,#gate.reset .gkeep,#gate.reset .gforgot,
#gate.reset .gor,#gate.reset #g-guest,#gate.reset .gguest{display:none!important}
.gnote{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--dim);line-height:1.65}
.f input:focus,.f textarea:focus{border-color:var(--accent)}
.f .why{margin-top:6px;font-size:12px;color:var(--dim);line-height:1.6}
.f code{font-family:var(--mono);font-size:11.5px;color:var(--accent-2)}
.ends{display:flex;gap:9px;justify-content:flex-end;margin-top:24px}
.btn{cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:9px 18px;font-size:13px;
  background:none;color:var(--soft);font-family:var(--sans);transition:.15s}
.btn:hover{color:var(--text);border-color:var(--faint)}
.btn.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.btn.go:hover{opacity:.88;color:var(--on-accent)}

/* ---------- subject colours ----------
   Anything tied to a module carries data-subj and --subj (see utils.js):
   a short bar down its left edge, and a tinted module tag. */
.item{position:relative}
.item[data-subj]::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;
  background:var(--subj)}
.item[data-subj]::before{top:16px;bottom:auto;height:22px}
.item.done[data-subj]::before{opacity:.4}
.item[data-subj] .tag.mod{color:var(--subj);border-color:color-mix(in srgb,var(--subj) 35%,transparent);
  background:color-mix(in srgb,var(--subj) 11%,transparent)}
.cell .dots i.tsk{background:var(--soft)}

/* ---------- narrow ---------- */
/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their contents — one 7-column strip then drags the whole page
   wider than the screen. Letting them shrink is what stops sideways scrolling. */
.deck > *, .hello > div, .ask, .hbar,
.tiles, .month, .mrow, .wkrow, .cols, .tile, .cell, .sprow{min-width:0}

@media (max-width:1040px){
  body{padding-bottom:calc(64px + var(--sab))}            /* room for the tab bar */
  #note,#install-tip{bottom:calc(76px + var(--sab))}
  .page{padding-top:20px;min-height:0}
  .cell{height:auto;aspect-ratio:1}
}
/* Two-up panels need room; on a phone they stack. */
@media (max-width:659px){
  .home,.srow,.srow.even{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* seven time columns don't fit a phone: the week becomes a list */
  .weekgrid{display:none}
  .agenda{display:flex;flex-direction:column;gap:10px}
  .agenda .ad{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
  .agenda .ad.t{border-color:var(--faint)}
  .agenda h4{font-size:13px;font-weight:600;margin-bottom:6px}
  .agenda .al{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:6px 0 6px 10px;position:relative;font-size:13.5px}
  .agenda .al[data-subj]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    border-radius:2px;background:var(--subj)}
  .agenda .al time{font:12px var(--mono);color:var(--dim);padding-top:1px}
  .agenda .al small{display:block;font-size:12px;color:var(--dim)}
  .agenda .al.due{color:var(--red)}
  .agenda .al.free{color:var(--dim);padding-left:0}
  .mnav{flex-wrap:wrap}
  .mnav h3{min-width:0}
}

/* ---------- sidebar ----------
   Wide screens get the nav as a fixed column down the left; everything
   else shifts right by its width. The bottom pill bar is for thumbs, so it
   goes once the sidebar is there. */
@media (min-width:1041px){
  :root{--side:200px;--nav:0px}
  body{padding-left:var(--side)}
  .nav{position:fixed;left:0;top:0;bottom:0;width:var(--side);height:auto;
    flex-direction:column;align-items:stretch;gap:2px;padding:22px 14px 16px;
    background:var(--sidebar-bg);border-right:1px solid var(--line-2);border-bottom:0}
  .nav .mark{padding:0 10px 24px}
  .nav .links{display:flex;flex-direction:column;gap:2px}
  .navrow{width:100%}
  .navrow span{display:inline}
  .nav .who{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:14px 10px 0;
    border-top:1px solid var(--line-2);font-size:13px;min-width:0}
  .nav .who b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav .who .state{font-size:12px;white-space:normal}
  .hbar{display:none}
}
/* ---------- phones ---------- */
@media (max-width:620px){
  :root{--edge:12px}
  body{overflow-x:hidden}                 /* belt and braces behind the fixes above */
  /* same --edge the overview uses, so every page lines up on both margins */
  .wrap{padding-left:calc(var(--edge) + var(--sal));
        padding-right:calc(var(--edge) + var(--sar))}

  .nav{padding-left:calc(12px + var(--sal));padding-right:calc(12px + var(--sar));gap:0}
  .deck{padding:22px calc(var(--edge) + var(--sar)) 28px calc(var(--edge) + var(--sal))}
  .deck{padding-top:20px}
  .hello{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
  .hello .wx{text-align:left}
  .hello .wx .t{justify-content:flex-start;font-size:26px}

  /* the week strip has to stay seven across, so make the cells small enough */

  /* calendar */
  .month{padding:9px}
  .mrow,.wkrow{gap:3px}
  .wkrow{padding:3px}
  .cell{padding:4px;border-radius:6px;aspect-ratio:1}
  .cell .cd{font-size:10.5px}
  .cell .dots{gap:2px}
  .cell .dots i{width:4px;height:4px}
  .mname{font-size:8.5px;padding:2px 0}
  .mnav h3{min-width:0;font-size:15px}

  /* dashboard / tasks / spending */
  /* minmax(0,…) — a plain 1fr never shrinks past the item's own content */
  .tcard{padding:16px 14px}
  .tlane{left:50px}
  .tnow{left:38px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .tile{padding:13px 14px}
  .tile .n{font-size:25px}
  .more{padding-left:14px}
  .item .lead{padding:13px 14px}
  .newform,.sheet .cols,.mini2,.grid2,.budgetset,.paygrid{grid-template-columns:1fr}
  .tally{grid-template-columns:1fr}
  .total{text-align:left}
  .total small{margin-left:0}
  .tacts{justify-content:flex-start}
  .qbtn{min-height:64px}
  .sheet{padding:22px 18px;border-radius:14px}
  .sprow{padding:11px 13px;gap:11px}

  .ask{padding:9px 13px;border-radius:12px}
  .kbd{display:none}

  .gbox{padding:24px 20px;border-radius:16px}
  .palbox{border-radius:13px}
  #pal{padding:calc(8vh + var(--sat)) calc(12px + var(--sar))
              calc(12px + var(--sab)) calc(12px + var(--sal))}
}

/* ---------- touch devices ----------
   Keyed off the pointer rather than the width, so a tablet and a phone held
   in landscape get these too — both fall outside the 620px query above.

   The input rule is the important one. iOS Safari zooms the whole page in
   whenever you focus a field whose text is under 16px, and once it has zoomed
   the page is wider than the screen: everything reads as shifted sideways and
   cut off at the edges. Every field here was 13.5–15px, login included, so it
   fired on the very first tap. 16px is the threshold that stops it. */
@media (pointer:coarse){
  /* every field-bearing selector in the file, listed so each match beats the
     class+element rule it is overriding rather than relying on !important */
  input,select,textarea,
  .gf input,.gkeep input,
  .f input,.f textarea,
  .fld input,.fld textarea,.fld select,
  .nrow input,.nrow select,.nrow textarea,
  .ask input,.tsearch input,.subadd input,.palin input,.own input{font-size:16px}
  /* the timetable box stays mono, just above the zoom threshold */
  .f textarea{font-size:16px;line-height:1.6}
  .gkeep input{width:19px;height:19px}

  /* ~44px is the smallest thing a thumb hits reliably; these were half that */
  .navrow{min-height:40px}
  .npill{min-height:44px}
  .arrow{min-width:40px;height:38px}
  .pbtn{width:36px;height:34px}
  .editbtn{min-height:40px}
  .btn{min-height:42px}
  /* login screen: the tabs and the forgot link are the first things anyone
     taps on a phone, and both were well under thumb size */
  .gtab{min-height:42px}
  #g-forgot{min-height:40px;padding:12px 4px}
  .palrow,.prow{min-height:44px}
  .sprow .sx{width:44px;height:44px}

  .tick{flex-basis:19px;height:19px}
  .done .tick::after{left:5.8px;top:2.2px;width:4px;height:9.4px}
}

/* ---------- short viewports ----------
   A phone in landscape is only ~390px tall. The palette's 12vh top padding and
   tall result list leave nothing on screen, so tighten both. */
@media (max-height:560px){
  #pal{padding-top:calc(16px + var(--sat))}
  .palres{max-height:46vh;max-height:46dvh}
}