/* Hone · Calendar. The page-specific rules; the tokens are the SAME values
 * as style.css, repeated here so this sheet stands alone and every var()
 * it reads is one it defines (tests/test_css_tokens.py).
 *
 * The design laws from style.css apply unchanged: ONE accent, and it only
 * ever means done, progress, today. Monospace for data only: times, counts,
 * week numbers. Motion under 220ms. Depth from light, not shadow. */
:root{
  --bg:#080a0d; --bg2:#0c1014; --panel:#11161c; --line:#1b222b; --line2:#242d38;
  --ink:#eaf0f7; --dim:#8d9aab; --faint:#7d8a9a;
  --accent:#6ee7a8; --accent-dk:#2f6b4d; --warn:#e6bd6d; --bad:#f08b8b;
  --card:#11161c; --dimline:#2c3644;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  /* aliases the calendar rules read, each mapped onto the system above */
  --paper:var(--bg); --surface:var(--panel); --surface-2:var(--bg2); --surface-3:var(--line);
  --ink-2:var(--dim); --ink-3:var(--faint); --rule:var(--line); --rule-2:var(--line2);
  --accent-2:#8df0bd; --on-accent:#080a0d; --accent-soft:rgba(110,231,168,.13);
  --done:var(--accent); --done-soft:rgba(110,231,168,.13);
  --soon:var(--warn); --late:var(--bad); --late-soft:rgba(240,139,139,.12); --star:var(--warn);
  --focus:var(--accent);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --r:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 60px;display:flex;flex-direction:column;gap:14px}
/* Installed on a phone the page runs edge to edge (viewport-fit=cover, a
   translucent status bar), so its own padding has to clear the notch and
   the home indicator. In a browser tab every inset is zero and this is
   the line above. */
.wrap{padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- masthead ---------- */
.mast{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.mast-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;padding:15px 18px 13px;border-bottom:1px solid var(--rule)}
.brand{display:flex;flex-direction:column;gap:3px;margin-right:auto}
.brand h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.periodline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.period{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:14px;font-weight:500}
.period .dim{color:var(--ink-3)}
.navgroup{display:flex;align-items:center;gap:2px}
.navbtn{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:3px;background:var(--surface-2);color:var(--ink-2);font-size:13px;line-height:1}
.navbtn:hover{border-color:var(--rule-2);color:var(--ink)}
.navbtn.today{width:auto;padding:0 10px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.seg{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--surface-2)}
.seg button{padding:6px 11px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.seg button + button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.pill{border:1px solid var(--rule);background:var(--surface-2);border-radius:3px;padding:6px 10px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pill[aria-pressed="true"]{border-color:var(--rule-2);color:var(--ink);background:var(--surface-3)}

.rail{display:flex;flex-wrap:wrap}
.stat{flex:1 1 0;min-width:100px;padding:10px 17px;display:flex;flex-direction:column;gap:1px;border-right:1px solid var(--rule)}
.stat b{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.stat.is-late b{color:var(--late)}
.stat.is-done b{color:var(--done)}
.progwrap{flex:2 1 200px;padding:12px 17px;display:flex;flex-direction:column;gap:7px;justify-content:center}
.progtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.progpct{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .28s ease}
.bar.full span{background:var(--done)}

/* ---------- my day ---------- */
.myday{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.mdhead{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.mdhead .sun{color:var(--soon);font-size:12px}
.mdtitle{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mdcount{font-family:var(--sans);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mdactions{margin-left:auto;display:flex;gap:6px}
.mdlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 12px;padding:6px 8px}
.mdempty{padding:10px 14px;font-size:13px;color:var(--ink-3)}
.sugg{border-top:1px solid var(--rule);background:var(--surface-2);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.suggrow{display:flex;align-items:center;gap:8px;padding:4px 5px;border-radius:3px}
.suggrow:hover{background:var(--surface-3)}
.suggrow .t{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggwhy{font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.suggwhy.late{color:var(--late)}
.addmini{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--rule-2);border-radius:3px;padding:2px 7px;color:var(--ink-2);background:var(--surface)}
.addmini:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- composer ---------- */
.composer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:9px 10px 9px 12px;box-shadow:var(--shadow)}
.composer input[type="text"]{flex:1 1 260px;min-width:0;border:none;background:none;color:var(--ink);padding:5px 2px}
.composer input::placeholder{color:var(--ink-3)}
.composer input:focus{outline:none}
.composer select{font-family:var(--sans);font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:6px 8px}
.addbtn{padding:7px 15px;background:var(--accent);color:var(--on-accent);border-radius:3px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.addbtn:hover{background:var(--accent-2)}
.hint{margin:-8px 0 -2px;font-family:var(--sans);font-size:11px;color:var(--ink-3);padding:0 2px}
.hint code{background:var(--surface-3);border-radius:2px;padding:1px 4px;color:var(--ink-2)}

/* ---------- notices ---------- */
.notice{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:var(--r);padding:9px 13px;background:var(--surface-2);font-size:13px;color:var(--ink-2);margin-bottom:8px}
.notice:last-child{margin-bottom:0}
.notice.late{background:var(--late-soft);border-color:var(--late);color:var(--late)}
.linkbtn{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:1px}
.notice .spacer{margin-left:auto}

/* ---------- week board ---------- */
.board{border:1px solid var(--rule);border-radius:var(--r);background:var(--rule);box-shadow:var(--shadow);overflow:hidden;display:grid;gap:1px;grid-template-columns:repeat(7,minmax(0,1fr))}
.day{background:var(--surface);padding:0 0 8px;display:flex;flex-direction:column;min-height:168px}
.day.off{background:var(--surface-2)}
.day.is-today{box-shadow:inset 0 2px 0 var(--accent)}
.dayhead{display:flex;align-items:baseline;gap:6px;padding:9px 10px 7px;border-bottom:1px solid var(--rule);margin-bottom:5px}
.dow{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.dnum{font-family:var(--sans);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.day.is-today .dnum,.day.is-today .dow{color:var(--accent)}
.day.has-late .dnum{color:var(--late)}
.daycount{margin-left:auto;font-family:var(--sans);font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tasks{display:flex;flex-direction:column;gap:1px;padding:0 4px;flex:1}
.dayadd{margin:6px 6px 0;padding:4px;font-family:var(--sans);font-size:11px;color:var(--ink-3);text-align:left;border:1px dashed transparent;border-radius:3px}
.day:hover .dayadd{border-color:var(--rule-2);color:var(--ink-2)}

/* ---------- task ---------- */
.task{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;border-radius:3px;position:relative}
.task:hover{background:var(--surface-2)}
.check{flex:none;width:15px;height:15px;margin-top:2px;border:1.5px solid var(--rule-2);border-radius:3px;display:grid;place-items:center;background:var(--surface)}
.check:hover{border-color:var(--accent)}
.check svg{width:9px;height:9px;opacity:0;transition:opacity .12s ease}
.task.done .check{background:var(--done);border-color:var(--done)}
.task.done .check svg{opacity:1;stroke:var(--on-accent)}
.tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ttitle{font-size:13.5px;line-height:1.35;overflow-wrap:break-word;cursor:pointer;text-align:left;align-self:flex-start;border-bottom:1px solid transparent}
.ttitle:hover{border-bottom-color:var(--rule-2)}
.task.done .ttitle{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.tmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mchip{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:4px}
.mchip.time{color:var(--ink-2)}
.mchip.overdue{color:var(--late)}
.mchip.cat{color:var(--ink-2)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent)}
.star{flex:none;width:17px;height:17px;margin-top:1px;display:grid;place-items:center;color:var(--rule-2);font-size:11px;line-height:1;border-radius:3px}
.star:hover{color:var(--star)}
.star.on{color:var(--star)}
.task .star{opacity:0}
.task:hover .star,.task .star.on,.task:focus-within .star{opacity:1}
.tacts{display:flex;gap:1px;flex:none;opacity:0;transition:opacity .12s ease}
.task:hover .tacts,.task:focus-within .tacts{opacity:1}
.tacts button{width:19px;height:19px;display:grid;place-items:center;color:var(--ink-3);font-family:var(--sans);font-size:11px;border-radius:3px;line-height:1}
.tacts button:hover{background:var(--surface-3);color:var(--ink)}
.tacts button.del:hover{color:var(--late)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- day (schedule) view ---------- */
.dayview{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:14px;align-items:start}
.sched{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.schedhead{display:flex;align-items:baseline;gap:9px;padding:9px 13px;border-bottom:1px solid var(--rule)}
.grid{position:relative}
.hour{display:grid;grid-template-columns:52px minmax(0,1fr);border-bottom:1px solid var(--rule);height:48px}
.hour:last-child{border-bottom:none}
.hourlab{font-family:var(--sans);font-size:10px;color:var(--ink-3);padding:3px 8px 0 0;text-align:right;font-variant-numeric:tabular-nums}
.hourslot{border-left:1px solid var(--rule);cursor:crosshair}
.hourslot:hover{background:var(--surface-2)}
.blocks{position:absolute;left:52px;right:6px;top:0;bottom:0;pointer-events:none}
.block{position:absolute;pointer-events:auto;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:3px;padding:2px 6px;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:1px}
.block:hover{filter:brightness(.97)}
.block .bt{font-family:var(--sans);font-size:9.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.block .bn{font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block.short{flex-direction:row;align-items:baseline;gap:6px;padding-top:1px}
.block.short .bn{font-size:11px}
.block.done{background:var(--surface-2);border-left-color:var(--done)}
.block.done .bn{text-decoration:line-through;color:var(--ink-3)}
.nowline{position:absolute;left:44px;right:0;height:1px;background:var(--late);z-index:3;pointer-events:none}
.nowline::before{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--late)}
.sidecol{display:flex;flex-direction:column;gap:14px}
.panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.panel h2{margin:0;font-size:11px}

/* ---------- month ---------- */
.monthgrid{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:14px;align-items:start}
.cal{border:1px solid var(--rule);border-radius:var(--r);background:var(--rule);box-shadow:var(--shadow);overflow:hidden;display:grid;gap:1px;grid-template-columns:repeat(7,minmax(0,1fr))}
.calhead{background:var(--surface-2);padding:6px 8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.cell{background:var(--surface);min-height:94px;padding:6px 7px;display:flex;flex-direction:column;gap:3px;text-align:left;align-items:stretch;width:100%}
.cell.pad{background:var(--surface-2)}
.cell:hover{background:var(--surface-3)}
.cell.is-today{box-shadow:inset 0 2px 0 var(--accent)}
.cellnum{font-family:var(--sans);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cell.pad .cellnum{color:var(--ink-3);font-weight:400}
.cell.is-today .cellnum{color:var(--accent)}
.cell.has-late .cellnum{color:var(--late)}
.chip{font-size:11px;line-height:1.3;padding:1px 5px;border-radius:2px;background:var(--surface-2);border-left:2px solid var(--accent);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.done{border-left-color:var(--done);color:var(--ink-3);text-decoration:line-through}
.more{font-family:var(--sans);font-size:10px;color:var(--ink-3)}
.wkrow{display:flex;flex-direction:column;gap:4px}
.wktop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wklabel{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-2);border-bottom:1px solid transparent}
.wkrow.now .wklabel{color:var(--accent)}
.wklabel:hover{border-bottom-color:var(--rule-2)}
.wkcount{font-family:var(--sans);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.minibar{height:4px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.minibar span{display:block;height:100%;background:var(--accent);border-radius:99px}
.minibar.full span{background:var(--done)}

/* ---------- planned ---------- */
.planned{display:flex;flex-direction:column;gap:12px}
.group{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.grouphead{display:flex;align-items:baseline;gap:9px;padding:9px 13px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.grouphead.late{background:var(--late-soft)}
.grouphead.late .eyebrow{color:var(--late)}
.grouplist{display:flex;flex-direction:column;gap:1px;padding:5px 7px}
.task.row .ttitle{font-size:14px}
.task.row{padding:6px 7px}

/* ---------- anytime ---------- */
.anytime{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.anyhead{display:flex;align-items:baseline;gap:9px}
.anylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px 10px}
.empty{font-size:12.5px;color:var(--ink-3);padding:2px}

/* ---------- detail pane ---------- */
.backdrop{position:fixed;inset:0;background:rgba(12,15,20,.22);z-index:25}
.pane{position:fixed;top:0;right:0;bottom:0;width:min(372px,100%);background:var(--surface);border-left:1px solid var(--rule);box-shadow:-16px 0 44px -34px rgba(0,0,0,.7);z-index:30;display:flex;flex-direction:column;gap:0;overflow-y:auto}
.modalback{position:fixed;inset:0;background:rgba(12,15,20,.34);z-index:40;display:grid;place-items:center;padding:20px}
.modal{width:min(400px,100%);background:var(--surface);border:1px solid var(--rule);border-radius:6px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6);padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;max-height:88vh;overflow-y:auto}
.modal h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.modal p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.modal input[type="email"]{width:100%;background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:9px 10px;color:var(--ink);font-size:14px}
.modalrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.modalrow .spacer{margin-left:auto}
.mbtn{border:1px solid var(--rule);border-radius:3px;padding:7px 13px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2)}
.mbtn:hover{border-color:var(--rule-2);color:var(--ink)}
.mbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mbtn.primary:hover{background:var(--accent-2)}
.mbtn.danger{color:var(--late)}
.mbtn.danger:hover{border-color:var(--late);background:var(--late-soft)}
.modal .who{font-family:var(--sans);font-size:12px;color:var(--ink);background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:8px 10px;overflow-wrap:anywhere}
.modal .divider{height:1px;background:var(--rule);margin:2px 0}
.pill.acct{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.02em}
.notice.good{background:var(--done-soft);border-color:var(--done);color:var(--done)}
.panehead{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:2}
.panehead .spacer{margin-left:auto}
.panebody{padding:12px 14px 22px;display:flex;flex-direction:column;gap:14px}
.ptitle{width:100%;background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:8px 9px;color:var(--ink);font-size:15px;line-height:1.35}
.field{display:flex;flex-direction:column;gap:5px}
.field > label{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.field input[type="date"],.field input[type="time"],.field input[type="text"],.field select{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:6px 8px;color:var(--ink);font-size:13px;width:100%;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.quickchips{display:flex;flex-wrap:wrap;gap:5px}
.qchip{border:1px solid var(--rule);border-radius:3px;padding:3px 8px;font-family:var(--sans);font-size:10.5px;color:var(--ink-2);background:var(--surface-2)}
.qchip:hover{border-color:var(--accent);color:var(--accent)}
.toggles{display:flex;flex-wrap:wrap;gap:6px}
.tgl{display:flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:3px;padding:5px 9px;font-size:12px;color:var(--ink-2);background:var(--surface-2)}
.tgl[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.steps{display:flex;flex-direction:column;gap:3px}
.step{display:flex;align-items:center;gap:7px;padding:3px 2px}
.step input[type="text"]{flex:1;background:none;border:none;border-bottom:1px solid transparent;color:var(--ink);font-size:13px;padding:2px 0}
.step input[type="text"]:focus{outline:none;border-bottom-color:var(--rule-2)}
.step.done input[type="text"]{color:var(--ink-3);text-decoration:line-through}
.stepdel{color:var(--ink-3);font-family:var(--sans);font-size:11px;width:18px;height:18px;border-radius:3px}
.stepdel:hover{color:var(--late);background:var(--surface-3)}
.danger{align-self:flex-start;font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--late);border:1px solid var(--rule);border-radius:3px;padding:6px 11px}
.danger:hover{border-color:var(--late);background:var(--late-soft)}
.panemeta{font-family:var(--sans);font-size:10px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:10px}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding-top:4px;font-family:var(--sans);font-size:10.5px;color:var(--ink-3)}
.keys{display:flex;flex-wrap:wrap;gap:11px}
kbd{font-family:var(--sans);font-size:10px;background:var(--surface);border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;padding:1px 4px;color:var(--ink-2)}

@media (max-width:980px){
  .monthgrid,.dayview{grid-template-columns:minmax(0,1fr)}
  .board{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .pane{top:auto;left:0;width:100%;max-height:86vh;border-left:none;border-top:1px solid var(--rule);border-radius:8px 8px 0 0}
}
@media (max-width:720px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell{min-height:72px}
  .chip{display:none}
  .stat{min-width:86px;padding:9px 12px}
  .stat b{font-size:19px}
  /* A phone shows the three tiles a person acts on; Overdue comes back
     the moment it is not zero (calendar.js marks it "less" only at zero). */
  .stat.less{display:none}
  /* No keyboard, no keyboard hints. */
  .keys{display:none}
  /* The syntax line is a reference, not a headline: it appears while the
     composer has focus, which is the one moment it is useful. */
  .hint{display:none}
  .composer:focus-within + .hint{display:block;margin-top:2px}
  .welcome-btn{flex:1 1 100%}
  .rail.is-empty{display:none}
  .install-btns{flex:1 1 100%}
  .install-btn{flex:1 1 auto}
}
@media (max-width:460px){
  .board{grid-template-columns:minmax(0,1fr)}
  .day{min-height:0}
}

/* THE SIGN-IN CARD, first thing on the page for a visitor with no
   session. One accent-edged surface, one sentence about what signing in
   is for, one button in the composer's own style. Hidden the moment there
   is a session; the pill in the header stays for later. */
.welcome{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;background:var(--surface);
  border:1px solid var(--accent-dk);border-left:3px solid var(--accent);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 16px}
.welcome-copy{flex:1 1 320px;min-width:0}
.welcome-copy h2{margin:0 0 4px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.welcome-copy p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.welcome-btn{min-height:44px;padding:9px 20px;font-size:12px;flex:0 0 auto}
/* THE EMPTY BOARD. No example tasks: a week full of somebody else's dentist
   reads as clutter, not as help. Three chips that fill the composer teach
   the syntax by being typed. They are buttons, so they meet the 44px law. */
.starter{border:1px dashed var(--rule-2);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.starter p{margin:0;font-size:13px;color:var(--ink-2)}
.starter-chips{display:flex;flex-wrap:wrap;gap:8px}
.starter-chip{min-height:44px;padding:8px 13px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface-2);
  color:var(--ink);font-family:var(--mono);font-size:13px;text-align:left}
.starter-chip:hover{border-color:var(--accent);color:var(--accent)}

/* THE HOME SCREEN. One line, shown once there is something on the board
   and never inside the installed app: on Chrome and Android the button is
   the browser's own install prompt; on an iPhone, where no page may ask,
   the sentence says where Safari keeps it. "Not now" is remembered. */
.install{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:12px 16px}
.install-copy{flex:1 1 300px;min-width:0}
.install-copy h2{margin:0 0 3px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.install-copy p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.install-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.install-btn{min-height:44px;padding:9px 18px;font-size:12px}
.install-later{min-height:44px}

/* DATA, and only data, in monospace. */
.period,.stat b,.dnum,.daycount,.progpct,.wkcount,.hourlab,.block .bt,.mchip.time,
.cellnum,.mdcount,.who,kbd,.hint code,code{font-family:var(--mono)}
.eyebrow,.dow,.calhead,.seg button,.pill,.addbtn,.navbtn.today,.linkbtn,.addmini,.mbtn,
.field > label,.verdict,.tag,.mchip,.suggwhy,.overdue,.qchip,.dayadd,.hint,.foot{letter-spacing:.06em}
/* Hone's category is a word, not a colour: the one accent stays for progress. */
.dot{display:none}
.mchip.cat{color:var(--dim)}
/* Topics coming back from schedule.py: read-only, warn-coloured, never a checkbox. */
.due{display:flex;align-items:flex-start;gap:6px;padding:4px 6px;border-radius:3px;
  border-left:2px solid var(--warn);background:rgba(230,189,109,.08);text-decoration:none;color:inherit}
.due:hover{background:rgba(230,189,109,.14)}
.due .dl{font-size:12.5px;line-height:1.35;color:var(--ink)}
.due .dm{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.due .dm b{font-family:var(--mono);font-weight:600}
.chip.due-chip{border-left-color:var(--warn);color:var(--warn)}
.gsiWrap{display:flex;justify-content:center;min-height:44px}