:root {
  --ground: #f2f4ee;
  --surface: #ffffff;
  --ink: #18221c;
  --muted: #5c6960;
  --line: #dde3d8;
  --edge: #c5cebf;
  --raised: 0 0 0 1px #18221c0d, 0 1px 2px #18221c0f;
  --moss: #3d6b4b;
  --moss-soft: #dfeadf;
  --moss-deep: #1f3d29;
  --amber: #cf8a24;
  --amber-soft: #f6e7cc;
  --amber-ink: #8a5a12;
  --work: #3f5f8a;
  --personal: #8a5a3f;
  --exercise: #6b4fa0;
  --quick: #cf8a24;
  --on-quick: #18221c;
  --seg-on: #ffffff;
  --danger: #b04a3c;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  /* crisp corners: blocks and sheets --r, controls --r-s, tiny marks --r-xs */
  --r: 4px;
  --r-s: 3px;
  --r-xs: 2px;
  --fs-xs: .78rem;
  --fs-s: .88rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101613; --surface: #18201b; --ink: #e3eadf; --muted: #8e9b92; --line: #26312a; --edge: #36443a;
    --moss: #7fb08a; --moss-soft: #1f3226; --moss-deep: #c4e6ca; --amber: #e8a849; --amber-soft: #3a2c15; --amber-ink: #e8a849;
    --raised: 0 0 0 1px #ffffff0d;
    --work: #86a6d4; --personal: #d09a7a; --exercise: #b09ad8; --quick: #e8a849; --danger: #e07b6c;
    --on-quick: #18221c; --seg-on: #34423a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #101613; --surface: #18201b; --ink: #e3eadf; --muted: #8e9b92; --line: #26312a; --edge: #36443a;
  --moss: #7fb08a; --moss-soft: #1f3226; --moss-deep: #c4e6ca; --amber: #e8a849; --amber-soft: #3a2c15; --amber-ink: #e8a849;
  --raised: 0 0 0 1px #ffffff0d;
  --work: #86a6d4; --personal: #d09a7a; --exercise: #b09ad8; --quick: #e8a849; --danger: #e07b6c;
  --on-quick: #18221c; --seg-on: #34423a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* the hidden attribute must win over every display rule below (.view, .sheet, .toast, .install, .block...) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font: 16px/1.45 var(--body);
  padding: env(safe-area-inset-top, 0px) 16px calc(84px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
  max-width: 560px; margin-inline: auto;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; opacity: .6; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
h2 { font: 700 1.05rem/1.2 var(--display); margin: 0; letter-spacing: -0.01em; }
.muted { color: var(--muted); font-size: var(--fs-s); }

.top { display: flex; justify-content: space-between; align-items: center; padding-block: 10px 6px; }
.brand { display: flex; align-items: center; gap: 8px; font: 700 1.3rem var(--display); letter-spacing: -0.02em; min-width: 0; }
.mark { width: 20px; height: 20px; flex: none; }
.brand-name { display: none; }
.view-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { position: relative; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-s); }
.sync { width: 32px; height: 32px; margin: -12px -10px -12px -4px; display: grid; place-items: center; --dot: var(--moss); }
.sync::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); transition: background .3s; }
.sync.pending, .sync.alert { --dot: var(--amber); }
.sync.offline { --dot: var(--danger); }
.banner { margin: 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--amber-soft); color: var(--ink); font-size: var(--fs-s); }
.install { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: var(--r-s); background: var(--moss-soft); font-size: var(--fs-s); }
.install span { flex: 1; min-width: 0; }
.install .ghost { flex: none; margin: 0; padding: 8px 10px; }
.install .go { color: var(--moss); font-weight: 700; }

/* minmax(0, 1fr): a wide child (a nowrap label, a range input) can never push a card past the screen edge */
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.block { background: var(--surface); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; box-shadow: var(--raised); }
.block > p { margin: 0; }
.block-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; }
.block-h h2 { flex: 1 1 auto; }

/* one small step */
.stuck {
  display: grid; gap: 2px; text-align: left; padding: 16px 76px 16px 16px; border-radius: var(--r);
  background: var(--moss); color: var(--ground); position: relative;
}
.stuck-k { font-size: var(--fs-s); opacity: .8; }
.stuck-v { font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.stuck-n { position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: grid; justify-items: center; line-height: 1; opacity: .9; }
.stuck-n b { font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.stuck-n small { font-size: var(--fs-xs); opacity: .85; margin-top: 2px; }
.stuck:active { scale: .985; }

/* trial */
.trial-row { display: flex; align-items: center; gap: 12px; }
.trial-row .label { flex: 1; margin: 0; }
.label { margin: 0; font-weight: 700; }
/* an arm that asks nothing tonight: quiet, lined up with the checkbox labels, a dash where the box would be.
   Rows at the routine's pitch, so Tonight and Evening routine read as one kind of list */
.off-row { margin: 0; min-height: 48px; display: flex; align-items: center; padding-left: 46px; color: var(--muted); font-size: var(--fs-s); position: relative; }
.off-row::before { content: ""; position: absolute; left: 8px; top: 50%; width: 12px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--edge); }
.off-row.on { color: var(--ink); font-size: 1rem; font-weight: 700; }
.off-row.on::before { left: 9px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--moss); }
#tonight { row-gap: 2px; }
#tonight > .block-h { margin-bottom: 10px; }
.num { font-variant-numeric: tabular-nums; }

.seg { display: flex; gap: 3px; background: var(--line); padding: 3px; border-radius: var(--r-s); }
.seg button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: var(--r-xs); font-weight: 700; font-size: .92rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px #0002; }
/* sized by their labels, so "Yesterday" is never cut to "Yeste…" by an equal split */
.seg.small button { flex: 1 0 auto; min-height: 34px; padding: 4px 12px; font-size: var(--fs-s); }
.seg.scale { display: grid; grid-template-columns: repeat(5, 1fr); }
.seg.scale button { font-variant-numeric: tabular-nums; }
.q { margin: 4px 0 -4px; }
.seg .count { font-weight: 400; opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }

.ghost { color: var(--muted); padding: 10px; margin: -6px -4px; border-radius: var(--r-s); }
/* last in a card's header or row: its word ends on the card's edge, over the times and counts below, even when it wraps */
.block-h .ghost:last-child, .trial-row .ghost:last-child { margin-right: -10px; margin-left: auto; }
.small { font-size: var(--fs-s); }

/* habits */
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.habit { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.check {
  width: 28px; height: 28px; border-radius: var(--r-s); border: 2px solid var(--edge); flex: none; position: relative;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.check::before { content: ""; position: absolute; inset: -10px; } /* 48px tap target around the 28px box */
.check svg { width: 16px; height: 16px; stroke: var(--ground); stroke-width: 3; fill: none; opacity: 0; }
.on .check { background: var(--moss); border-color: var(--moss); }
.on .check svg { opacity: 1; }
.pop .check { animation: pop .35s ease-out; }
@keyframes pop { 40% { scale: 1.25; } }
.habit-name { flex: 1; text-align: left; padding-block: 10px; }
.habit-when { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.earlier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 10px 46px; }
.chip { min-height: 36px; padding: 7px 12px; border-radius: var(--r-s); background: var(--line); font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; }
/* "done earlier": a quiet clock, so the list isn't a column of repeated words */
.later { width: 44px; height: 44px; margin: -6px -10px -6px 0; display: grid; place-items: center; color: var(--muted); border-radius: var(--r-s); opacity: .7; }
.later[aria-expanded="true"] { color: var(--moss); opacity: 1; }
.later svg, .x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip:active { background: var(--moss-soft); }
.x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--danger); border-radius: var(--r-s); margin-right: -8px; }
.x svg { stroke-width: 2; }
/* edit mode: arrows to reorder, 44px squares so a thumb hits the right one */
.habit.editing { gap: 6px; }
.habit.editing .habit-name { padding-left: 2px; overflow-wrap: anywhere; min-width: 0; }
.mv { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-s); background: var(--line); color: var(--ink); }
.mv:active:not(:disabled) { background: var(--moss-soft); }
.mv:disabled { opacity: .3; }
.mv svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.inline-add, .todo-add { display: flex; gap: 8px; }
.inline-add input, .todo-add input, input.note {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: var(--r-s); border: 1px solid var(--edge); background: var(--ground);
  font-size: max(16px, 1rem); /* 16px keeps iOS from zooming on focus */
}
.inline-add button { background: var(--moss); color: var(--ground); padding: 0 14px; min-height: 44px; border-radius: var(--r-s); font-weight: 700; }

/* the count as quiet as Tonight's night number; the streak, when there is one, in amber */
.streak { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.streak b { font-family: var(--display); color: var(--amber-ink); }
@media (pointer: coarse) { .block-h .seg.small button, .earlier .chip { min-height: 40px; } }

/* mood */
.mood { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mood-val { font: 700 2.75rem/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mood-val.unset { color: var(--muted); }
.mood-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
input.note { width: 100%; }
input[type="range"].unset { opacity: .45; }
input[type="range"] { width: 100%; margin: 0; accent-color: var(--moss); height: 32px; }
@media (pointer: coarse) { input[type="range"] { height: 40px; margin-block: -4px; } }
/* each number under the thumb's centre at that value (it travels 8px in from each end; 5 is 4/9 of the way) */
.mood-scale { position: relative; height: 1.25em; margin: -6px 8px 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.25; }
.mood-scale span { position: absolute; left: 0; translate: -50%; font-variant-numeric: tabular-nums; }
.mood-scale span:nth-child(2) { left: 44.444%; }
.mood-scale span:last-child { left: 100%; }

/* todos */
.todo-add input { font-size: 1.05rem; background: var(--surface); }
.todo-add .add { width: 48px; min-height: 48px; border-radius: var(--r-s); background: var(--kc, var(--ink)); color: var(--surface); font-size: 1.5rem; line-height: 1; }
.todo-add[data-kind="quick"] .add { color: var(--on-quick); }
/* which section a new todo goes in: a tap steps Med, High, Low */
.prio-pick { min-width: 56px; min-height: 48px; padding: 0 10px; border-radius: var(--r-s); background: var(--line); color: var(--muted); font-size: var(--fs-s); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.prio-pick svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.prio-pick[data-prio="high"] { color: var(--danger); }
.prio-pick[data-prio="low"] { font-weight: 400; }
/* High, Medium, Low: a small label over each card; an empty one is hidden, except as a drop zone while a row is carried */
.todo-secs { display: grid; gap: 14px; }
.todo-sec { display: grid; gap: 6px; }
.todo-sec.none { display: none; }
.todo-secs.dragging .todo-sec.none { display: grid; }
.sec-label { margin: 0; padding-left: 2px; font: 700 var(--fs-xs)/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.todo-sec[data-prio="high"] .sec-label { color: var(--danger); }
.todo-secs.plain:not(.dragging) .sec-label { display: none; }
.todo-secs.dragging .todos { overflow: visible; min-height: 52px; }
.todo-secs.dragging .todos:not(:has(> .todo)), .todo-secs.dragging .todos:has(> .todo.dragging:only-child) { outline: 1px dashed var(--edge); outline-offset: -1px; }
/* one card per list, rows split by hairlines (like the routine and the rules), not a stack of floating cards */
.todos { list-style: none; margin: 0; padding: 0; display: grid; background: var(--surface); border-radius: var(--r); box-shadow: var(--raised); overflow: hidden; }
.todo { display: flex; align-items: center; gap: 14px; padding: 4px 14px; min-height: 52px; }
.todo + .todo { border-top: 1px solid var(--line); }
.todo .check { border-color: var(--kc, var(--line)); }
.todo.on .check { background: var(--kc, var(--moss)); border-color: var(--kc, var(--moss)); }
.todo-text { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-block: 10px; text-align: left; cursor: text; }
.todo-text[contenteditable="true"] { outline: none; border-bottom: 1px dashed var(--muted); }
/* open rows: grip, check, text, size, the menu button */
.todo.movable { flex-wrap: wrap; gap: 0 8px; padding: 4px 4px 4px 0; }
.todo.movable .check { margin-right: 4px; }
.grip { align-self: stretch; width: 28px; flex: none; display: grid; place-items: center; color: var(--muted); opacity: .55; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.grip svg { width: 16px; height: 16px; fill: currentColor; }
.todo.dragging { position: relative; z-index: 2; background: var(--surface); box-shadow: 0 6px 18px #0003, 0 0 0 1px var(--edge); border-radius: var(--r-s); cursor: grabbing; }
.todo.dragging .grip { opacity: 1; cursor: grabbing; }
.todo.dragging + .todo, .todo + .todo.dragging { border-top-color: transparent; }
/* size: a small chip in its own colour (M when he hasn't picked one: app.js sizeOf) */
.size { --sc: var(--edge); position: relative; width: 30px; height: 24px; flex: none; border-radius: var(--r-xs); border: 1px solid var(--sc);
  background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); font-size: var(--fs-xs); font-weight: 700; line-height: 1; letter-spacing: .02em; }
.size::before { content: ""; position: absolute; inset: -10px -7px; } /* a 44px tap target around the chip */
.size[data-size="xs"] { --sc: var(--moss); }
.size[data-size="s"] { --sc: var(--work); }
.size[data-size="m"] { --sc: var(--amber); color: var(--amber-ink); }
.size[data-size="l"] { --sc: var(--danger); }
/* the grip and ⋯ likewise, with a mouse: on the row's hover or focus, and while its panel is open or it's carried; a touch screen always shows them */
@media (hover: hover) and (pointer: fine) {
  .grip, .more { transition: opacity .15s; }
  .todo.movable:not(:hover, :focus-within, .dragging, :has(> .todo-more)) :is(.grip, .more) { opacity: 0; }
}
/* 40px wide for a thumb, pulled 4px towards the size chip so the text keeps its width */
.more { width: 40px; height: 44px; margin-left: -4px; flex: none; display: grid; place-items: center; color: var(--muted); border-radius: var(--r-s); opacity: .7; }
.more[aria-expanded="true"] { color: var(--moss); opacity: 1; }
.more svg { width: 18px; height: 18px; fill: currentColor; }
/* the row's menu, under it: priority, then snooze */
.todo-more { flex: 1 0 100%; display: grid; gap: 8px; padding: 2px 10px 12px 36px; }
.todo-more .seg { justify-self: start; }
.snooze-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.snooze-k { color: var(--muted); font-size: var(--fs-s); margin-right: 2px; }
.chip small { font-weight: 400; color: var(--muted); }
.chip.pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.chip.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
/* on the phone: priority across the panel, and the four snooze choices a 2x2 grid of even chips under their label */
@media (max-width: 799px) {
  .todo-more .seg { justify-self: stretch; }
  .snooze-row { display: grid; grid-template-columns: 1fr 1fr; }
  .snooze-k { grid-column: 1 / -1; }
  .snooze-row .chip.pick { justify-content: center; }
}
/* a thumb needs 40px: the menu's size, priority and snooze chips, and Unsnooze */
@media (pointer: coarse) { .todo-more .seg button, .todo-more .chip, .todos.snoozed .chip { min-height: 40px; } }
/* done and snoozed rows line up with the open ones: the check under their check (past the grip), the text under their text */
.todos.done .todo { gap: 12px; padding-left: 36px; }
/* snoozed: the text, its wake day in a small line under it, Unsnooze on the right */
.todos.snoozed .todo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 4px 4px 4px 76px; }
.todos.snoozed .todo-text { padding-block: 8px 0; cursor: default; opacity: .7; } /* a little quieter than the open ones: not for now */
.todo-wake { grid-row: 2; padding-bottom: 8px; color: var(--muted); font-size: var(--fs-s); }
.todos.snoozed .chip { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.todos.done, .todos.snoozed, .todos:has(> .empty) { background: none; box-shadow: none; }
.todos.done .todo { opacity: .6; }
.todos.done .todo-text { text-decoration: line-through; cursor: default; }
.done-wrap summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 2px; color: var(--muted); font-size: var(--fs-s); font-weight: 700; cursor: pointer; list-style: none; }
.done-wrap summary::-webkit-details-marker { display: none; }
/* a chevron that points down once the list is open */
.done-wrap summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 3px 2px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: -45deg; transition: rotate .2s; }
.done-wrap[open] summary::before { rotate: 45deg; }
.done-wrap[open] summary { margin-bottom: 6px; }
.done-week { margin-left: auto; font-weight: 400; }
.empty { color: var(--muted); padding: 18px 4px; text-align: center; }
.leaving { animation: leave .4s ease forwards; }
@keyframes leave { to { opacity: 0; translate: 24px 0; } }

/* trends */
#view-trends { font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 320px; }
.dow { text-align: center; color: var(--muted); font-size: var(--fs-xs); }
.cell { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--line); padding: 0; min-width: 0;
  display: grid; place-items: center; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* the number reads on every shade in both themes: ink on the pale greens, the page colour on the deep ones */
.cell.part { color: var(--ink); }
.cell.lit { color: var(--ground); }
.cell.today { outline: 2px solid var(--amber); outline-offset: 0; }
/* name, a bar of the nights done, the count: the bars line up so the weak habit shows at a glance */
.rates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.rates li { display: grid; grid-template-columns: minmax(0, 1fr) 36% 3em; align-items: center; gap: 12px; }
.rates span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rates span::first-letter { text-transform: uppercase; }
.rates .bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--moss) calc(var(--f) * 100%), var(--line) 0); }
.rates b { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--muted); text-align: right; }
.chart svg { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font: var(--fs-xs) var(--body); font-variant-numeric: tabular-nums; }
.chart-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: var(--fs-xs); }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { flex: none; width: 10px; height: 10px; border-radius: var(--r-xs); }
.chart-key .k-ran { background: color-mix(in srgb, var(--moss) 35%, transparent); }
.chart-key .k-wk { background: var(--moss-deep); }
.chart-key .k-mt { background: var(--work); }
.chart-key .k-pr { background: color-mix(in srgb, var(--moss) 74%, transparent); }
/* Keeper % by start time, under the chart: a quiet table, one bar per row on 0–100%, in the chart's two shades
   (light: the block, dark: its Keeper share). Fixed columns, so the bars of both groups line up and fit at 360px */
.kby { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.kby h3 { margin: 0; font: 700 var(--fs-s)/1.3 var(--body); }
.kby-t { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-s); }
.kby-t .c-l { width: 5.2em; } .kby-t .c-p { width: 3.4em; } .kby-t .c-n { width: 2.4em; } .kby-t .c-w { width: 4.4em; }
.kby-t th, .kby-t td { padding: 2px 0 2px 8px; font-weight: 400; text-align: right; white-space: nowrap; }
.kby-t :is(th, td):first-child { padding-left: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.kby-t thead th { color: var(--muted); font-size: var(--fs-xs); }
.kby-t td:nth-child(3) { font-weight: 700; }
.kby-t td:nth-child(n+4) { color: var(--muted); }
.kby-t tr.none { color: var(--muted); }
.kby-t .kby-g th { padding: 10px 0 2px; text-align: left; font: 700 var(--fs-xs)/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kby-bar { display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--moss-deep) calc(var(--f) * 100%), color-mix(in srgb, var(--moss) 35%, transparent) 0); }
.kby-n { margin: 0; font-size: var(--fs-xs); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* sheet */
.sheet { position: fixed; inset: 0; background: #0006; display: grid; align-items: end; z-index: 20; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet-card { background: var(--surface); border-radius: var(--r); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 528px; width: 100%; margin-inline: auto; animation: rise .25s ease-out; }
@keyframes rise { from { translate: 0 30px; opacity: 0; } }
.sheet-k { margin: 0; color: var(--muted); font-size: var(--fs-s); }
.sheet-task { margin: 0; font: 700 1.5rem/1.2 var(--display); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { min-height: 48px; padding: 12px 18px; border-radius: var(--r-s); font-weight: 700; background: var(--line); }
.btn.primary { background: var(--moss); color: var(--ground); flex: 1; }

/* toast + tabs */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: 528px; margin-inline: auto;
  background: var(--ink); color: var(--ground); border-radius: var(--r); padding: 6px 8px 6px 16px; min-height: 48px;
  display: flex; align-items: center; gap: 8px; z-index: 15;
}
.toast span { flex: 1; }
.toast .ghost { color: var(--amber); font-weight: 700; margin: 0; padding: 10px 12px; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; gap: 4px;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tabs button { flex: 1; max-width: 160px; display: grid; justify-items: center; gap: 2px; padding: 6px; min-height: 52px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; position: relative; }
/* typing: the keyboard is up, the tab bar would only sit on top of the input */
body:has(input:not([type="range"]):focus, [contenteditable="true"]:focus) .tabs { display: none; }
body:has(input:not([type="range"]):focus, [contenteditable="true"]:focus) .toast { bottom: 16px; }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-current="page"] { color: var(--moss); }
.badge { position: absolute; top: 2px; left: calc(50% + 8px); font-size: .68rem; background: var(--amber); color: var(--ground); border-radius: var(--r-xs); padding: 0 4px; min-width: 16px; font-variant-numeric: tabular-nums; }
.badge:empty { display: none; }

/* wide screens: a laptop, or a phone in "desktop site" mode (~980px). The phone layout above is untouched. */
@media (min-width: 800px) {
  html { font-size: 17px; }
  body { font-size: 17px; max-width: 1080px; padding: 0 32px 48px; }
  .top { display: grid; grid-template-columns: 1fr auto 1fr; padding-block: 20px 16px; gap: 24px; }
  .mark { width: 26px; height: 26px; }
  .brand-name { display: inline; }
  .view-title { display: none; }
  .meta { justify-self: end; white-space: nowrap; } /* its column grows to fit the date, so the nav never runs into it */
  main, .view { gap: 18px; }
  .block { padding: 20px; }
  #view-todos, #view-rules { max-width: 720px; width: 100%; margin-inline: auto; }
  /* the strips and cards above them take the same column (Calendar and Trends use the full width) */
  main:has(> #view-todos:not([hidden]), > #view-rules:not([hidden])) > :is(.banner, .alarm, .ping, .nowbar, .install) { max-width: 720px; width: 100%; margin-inline: auto; }
  /* the routine and the trial on the left, mood and Keeper work stacked on the right: the tall Keeper card (its
     chart and the Keeper % by start time) leaves no hole between the routine and the trial */
  #view-trends { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  #view-trends > .block:last-child { grid-area: 2 / 1; }
  /* the tab bar becomes a compact nav in the header row */
  .tabs { position: static; background: none; border: 0; padding: 0; gap: 2px; }
  .tabs button { flex: none; max-width: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; font-size: .9rem; border-radius: var(--r-s); }
  .tabs button:hover { color: var(--ink); }
  body:has(input:not([type="range"]):focus, [contenteditable="true"]:focus) .tabs { display: flex; }
  body:has(input:not([type="range"]):focus, [contenteditable="true"]:focus) .toast { bottom: 24px; }
  .tabs button[aria-current="page"] { background: var(--surface); box-shadow: var(--raised); }
  .tabs svg { width: 20px; height: 20px; }
  .badge { position: static; margin-left: -2px; }
  .toast { bottom: 24px; max-width: 480px; }
  .sheet { align-items: center; }
}
/* a phone in "desktop site" mode is wide but still a small screen held close: scale it all up,
   so each column reads like the phone layout. A laptop (fine pointer) keeps the plain sizes. */
@media (min-width: 800px) and (pointer: coarse) {
  html { zoom: 1.3; }
}
/* not enough room for the wordmark beside the nav: the mark alone (a zoomed phone is always this narrow) */
@media (min-width: 800px) and (max-width: 959px), (min-width: 800px) and (pointer: coarse) {
  .brand-name { display: none; }
}
@media (min-width: 1200px) {
  html, body { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* focus-block ping bar */
.ping { display: grid; gap: .6rem; padding: .85rem 1rem; margin-block-end: 1rem; background: var(--amber-soft); color: var(--ink); border: 2px solid var(--amber); border-radius: var(--r); }
.ping-t { display: grid; gap: .2rem; }
.ping-t b { font-family: var(--display); font-size: 1.1rem; }
.ping-a { display: flex; flex-wrap: wrap; gap: .4rem; }
.ping-a button, .ping-f button { font: inherit; min-height: 44px; padding: .45rem .8rem; border-radius: var(--r-s); border: 1px solid var(--amber-ink); background: var(--surface); color: var(--ink); cursor: pointer; }
.ping-f { display: flex; gap: .4rem; }
.ping-f input { flex: 1; min-width: 0; font: inherit; padding: .45rem .6rem; border-radius: var(--r-s); border: 1px solid var(--edge); background: var(--surface); color: var(--ink); }
.ping-goal { font-size: var(--fs-s); color: var(--amber-ink); font-weight: 700; overflow-wrap: anywhere; }
/* loud = the 2nd ping onward: red, a slow pulse and bold answers, so it can't be read as routine */
.ping.loud { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); animation: urge 1.6s ease-in-out infinite; }
.ping.loud .ping-t b { color: var(--danger); font-size: 1.25rem; }
.ping.loud .ping-a button { border-color: var(--danger); font-weight: 700; }
@keyframes urge { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 30%, transparent); } }

/* focus blocks */
.focus-bar { height: 4px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; }
.focus-bar i { display: block; height: 100%; width: 0; background: var(--moss); transition: width 1s linear; }
.outcome { flex: none; font-weight: 700; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outcome.ok { color: var(--moss); }
.outcome.warn { color: var(--amber-ink); }
.outcome.bad { color: var(--danger); }
.outcome.note { color: var(--muted); font-weight: 400; font-style: italic; }
.outcome.muted { color: var(--muted); }

/* rules: the standing conditions, grouped by section */
.rules-today { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-s); }
.rule-secs { display: grid; gap: 20px; }
.rule-sec { display: grid; gap: 6px; }
.rule-sec h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.rule-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r); color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.rule-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rules { list-style: none; margin: 0 0 0 13px; padding: 0 0 0 23px; border-left: 2px solid color-mix(in srgb, var(--tone) 35%, transparent); display: grid; }
.rules li { display: grid; justify-items: start; gap: 3px; padding-block: 9px; border-top: 1px solid var(--line); }
.rules li:first-child { border-top: 0; padding-top: 4px; }
.rules li:last-child { padding-bottom: 2px; }
/* the title and its Draft tag run as one line of text, so the tag sits right after the last word, not at the far edge */
.rules .rule-h { overflow-wrap: anywhere; }
.rules p { margin: 0; color: var(--muted); font-size: var(--fs-s); line-height: 1.45; overflow-wrap: anywhere; }
.rules .pen { margin-top: 3px; }
/* a draft reads quieter through its title colour and the tag; no fading, so its text stays legible in dark mode */
.rules li.draft b { color: var(--muted); }
.rules li.draft .pen { opacity: .75; }
.rules .tag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px dashed var(--muted); border-radius: var(--r-xs); color: var(--muted); font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.rule-secs .empty { margin: 0; color: var(--muted); font-size: var(--fs-s); }
@media (max-width: 420px) { .rules { margin-left: 13px; padding-left: 15px; } }

.pen { flex: none; padding: 1px 6px; border-radius: var(--r-xs); background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; font-size: var(--fs-xs); }
/* a settled stake: "€5 owed" in red, "€5 kept" in green, "€5 waived" grey */
.pen.st-missed { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.pen.st-done { background: var(--moss-soft); color: var(--moss); }
.pen.st-waived { background: var(--line); color: var(--muted); }
/* a 📷 window not open yet (Oct 5, Fela: "Maybe make it gray and low contrast if it's not there yet"): grey words on no
   fill in a thin grey edge, amber once it opens */
.pen.proof.soon { background: transparent; color: var(--muted); font-weight: 400; box-shadow: inset 0 0 0 1px var(--edge); }
/* several stakes on one event: their badges side by side, all under the name when they don't fit beside it (where the
   name gives way to a single badge), and in a calendar block too low for that only the first, beside it (calFit) */
.pens { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; gap: 2px 4px; }

/* calendar: a time grid, one day on a phone, three on a wide screen. Colours by kind:
   focus moss, meeting work-blue, appointment personal-brown, commitment amber */
.cal-bar { display: flex; align-items: center; gap: 6px; }
.cal-bar h2 { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-td { font: inherit; }
.cal-td::before { content: " · "; }
@media (max-width: 799px) {
  .cal-bar h2 { line-height: 1.1; }
  .cal-td { display: block; font: 400 var(--fs-xs)/1.3 var(--body); color: var(--muted); letter-spacing: 0; }
  .cal-td::before { content: none; }
}
.cal-bar .ghost { margin: 0; padding: 8px 10px; }
.cal-arr { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-s); color: var(--ink); }
.cal-arr:disabled { opacity: .3; }
.cal-arr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal { --n: 1; display: grid; grid-template-columns: 40px repeat(var(--n), minmax(0, 1fr)); column-gap: 6px; touch-action: pan-y;
  /* a finger held on a block (to drag it) selects no text, not even beside it, and opens no callout */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* with several days the header row (their names, all-day commitments under them) stays in view while the grid scrolls
   under it; one day's header holds just its all-day items, which would cover the morning's events, so it scrolls away */
.cal-gh, .cal-dh { background: var(--ground); padding-block: 4px 6px; }
.cal.days .cal-gh, .cal.days .cal-dh { position: sticky; top: var(--nowbar-h, 0px); z-index: 3; }
/* day names on one line, chips under them; a column no wider than its day, so a long all-day title ends in "…"
   instead of widening the page */
.cal-dh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; min-width: 0; }
.cal-dn { font-weight: 700; font-size: var(--fs-s); color: var(--muted); }
.cal-dh.today .cal-dn { color: var(--moss); }
.cal-all { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 8px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--amber) 16%, var(--surface)); border-left: 3px solid var(--amber); font-size: var(--fs-s); font-weight: 700; text-align: left; }
.cal-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.st-done, .cal-chip.st-waived { opacity: .6; }
.cal-chip.st-waived .cal-chip-t { text-decoration: line-through; }
.cal-chip.st-missed { border-left-color: var(--danger); }
/* Connect calendar: his own calendar's events, read-only. A calendar glyph, faint stripes over the meeting colour,
   a dashed edge when marked Free; all-day ones are chips in the meeting colour */
.cal-g { width: 11px; height: 11px; flex: none; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cal-chip.ical { background: color-mix(in srgb, var(--work) 14%, var(--surface)); border-left-color: var(--work); font-weight: 600; }
.cal-chip.ical .cal-g, .cal-ev.ical .cal-g { color: var(--work); }
/* the sleep trial's exercise for the day (Gym, Pool): a quiet mark, not a button */
.cal-chip.ex { min-height: 26px; padding-block: 2px; background: color-mix(in srgb, var(--exercise) 10%, var(--surface)); border-left-color: var(--exercise); font-weight: 600; }
.cal-gut { position: relative; }
.cal-gut span { position: absolute; right: 0; translate: 0 -50%; font-size: var(--fs-xs); color: var(--muted); line-height: 1; }
.cal-col { position: relative; min-width: 0; border-radius: var(--r-xs);
  background: var(--surface) repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hh)); box-shadow: var(--raised); }
/* focus blocks already done today: a faint moss layer behind, with a strip on the right that stays in view */
.cal-done { position: absolute; left: 0; right: 0; z-index: 0; padding: 0; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--moss) 13%, transparent); border-right: 6px solid color-mix(in srgb, var(--moss) 55%, transparent); }
.cal-ev { --k: var(--moss); position: absolute; z-index: 1; margin-left: 2px; min-height: 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; text-align: left; font-size: var(--fs-xs); line-height: 1.25;
  background: color-mix(in srgb, var(--k) 18%, var(--surface)); border-left: 3px solid var(--k); border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--surface); }
.cal-ev.k-meeting { --k: var(--work); }
.cal-ev.k-appointment { --k: var(--personal); }
.cal-ev.k-exercise { --k: var(--exercise); }
.cal-ev.k-commit { --k: var(--amber); }
.cal-ev-t { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cal-ev-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); }
.cal-ev.short { flex-direction: row; align-items: center; padding-block: 1px; }
/* a short block is one row: the title first, then the time, stake and status where the lane has room for them;
   what doesn't fit wraps to a second row that stays out of sight, so a narrow lane still names the event */
.cal-ev.short .cal-ev-t { flex: 1; flex-wrap: wrap; max-height: 1.4rem; overflow: hidden; }
.cal-ev.short .cal-ev-t b { flex: 1 1 auto; max-width: 100%; }
.cal-ev.short.ical .cal-ev-t b { max-width: calc(100% - 17px); } /* the glyph and its gap stay on the row */
.cal-ev-t .num { flex: none; color: var(--muted); }
.cal-ev-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted); }
.cal-ev:not(.short) .cal-ev-t:has(> .pens > .pen + .pen:not(.nofit)) { flex-wrap: wrap; row-gap: 2px; }
.cal-ev.short .pens { display: contents; } /* in a short block's one row, each badge shows if it has room */
.cal-ev .pen { border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); padding-block: 0; }
.cal-ev .pen.st-missed { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cal-ev .pen.st-done { border-color: color-mix(in srgb, var(--moss) 45%, transparent); }
.cal-ev .pen.st-waived { border-color: var(--edge); }
.cal-ev .pen.proof.soon { border-color: var(--edge); box-shadow: none; }
.cal-ev.off { background: var(--surface); border-left-style: dashed; opacity: .65; }
.cal-ev.off b { text-decoration: line-through; color: var(--muted); }
.cal-ev.ical { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--k) 9%, transparent) 6px 12px),
  color-mix(in srgb, var(--k) 13%, var(--surface)); }
.cal-ev.ical.free { border-left-style: dashed; opacity: .75; }
/* side by side with others its lane is narrow: the title wraps at spaces instead of ending in "…" after a word, for
   planned blocks, commitments and his calendar's events alike. A word is never split: one too long for the lane
   ends in "…", as does the last line. As many lines as the block's height allows (--tl, set with it) */
.cal-ev:not(.short) .cal-ev-t { align-items: flex-start; }
.cal-ev:not(.short) .cal-ev-t .cal-g { align-self: flex-start; margin-top: 3px; }
.cal-ev:not(.short) .cal-ev-t b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--tl, 2); line-clamp: var(--tl, 2); }
/* under the title, what doesn't fit whole in the block is left out, never cut through a line (calFit in app.js): a
   wrapped time keeps the lines that fit */
.cal-ev-m > .nofit, .cal-ev .pens > .nofit { display: none; }
.cal-ev-m > .clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ml); line-clamp: var(--ml); overflow: hidden; }
.cal-now { position: absolute; left: -4px; right: 0; z-index: 2; height: 2px; margin-top: -1px; background: var(--danger); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
/* skipped blocks: the same layer, a red strip */
.cal-done.skip { background: color-mix(in srgb, var(--danger) 8%, transparent); border-right-color: color-mix(in srgb, var(--danger) 55%, transparent); }
/* what happened on a planned block, on the event itself: "✓ started 14:49 · Worked" */
.cal-ev-st { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-weight: 700; color: var(--muted); }
.cal-ev-st > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-st.ok { color: var(--moss); }
.cal-ev-st.warn { color: var(--amber-ink); }
.cal-ev-st.bad { color: var(--danger); }
.cal-ev-st svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cal-ev-t .cal-ev-st { flex: none; }
.cal-ev-was { font-style: italic; }
/* a planned block being dragged: lifted, with a dashed outline where it was and its new start above it */
.cal-ev.dragging { z-index: 2; cursor: grabbing; transition: translate 60ms; box-shadow: 0 0 0 1px var(--surface), 0 4px 12px #0000003d; }
.cal-ghost { position: absolute; z-index: 0; margin-left: 2px; min-height: 18px; border: 1.5px dashed var(--muted); border-radius: var(--r-xs); pointer-events: none; }
.cal-drag-t { position: absolute; z-index: 3; margin-left: 2px; translate: 0 calc(-100% - 2px); padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--ink); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; pointer-events: none; }
.cal-drag-t.bad { background: var(--danger); }
@media (hover: hover) {
  .cal-ev.grab { cursor: grab; }
  .cal-ev:hover, .cal-chip:not(.ex):hover { filter: brightness(.97); }
  .cal-done:hover { background: color-mix(in srgb, var(--moss) 20%, transparent); }
}

/* the day's numbers above the grid: done so far, planned still to come, the gap to the target */
.cal-sum { display: grid; gap: 8px; }
.cal-ss { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.cal-s { display: grid; gap: 5px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); }
.cal-s-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.cal-s-h b { font: 700 1.2rem/1.2 var(--display); }
.cal-s-gap { margin-left: auto; font-size: var(--fs-s); font-weight: 700; color: var(--muted); }
.cal-s-gap.ok { color: var(--moss); }
.cal-s-gap.warn { color: var(--amber-ink); }
.cal-s-m { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.cal-s-bar { display: flex; height: 6px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; }
.cal-s.short .cal-s-bar { background: var(--amber-soft); }
.cal-s-bar i { display: block; height: 100%; }
.cal-s-bar .d { background: var(--moss); }
.cal-s-bar .w { background: var(--moss-deep); }
.cal-s-bar .m { background: var(--work); }
.cal-s-wk { color: var(--ink); }
.cal-s-bar .p { background: color-mix(in srgb, var(--moss) 35%, transparent); }
.cal-sa { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-sb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 12px; border-radius: var(--r-s);
  background: var(--line); font-size: var(--fs-s); font-weight: 700; }
.cal-sb.on { background: var(--moss-soft); color: var(--ink); }
.cal-sb.on .num { color: var(--moss); flex: none; }
.cal-sb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-sb.owed b { color: var(--danger); }
.cal-sb.warn { background: var(--amber-soft); color: var(--amber-ink); }
.cal-sb .cal-g { width: 13px; height: 13px; }
/* a phone says just "Start", and keeps the strip one row: when the chips don't fit (owed, unresolved, the calendar) it
   scrolls sideways, edge to edge across the 16px margins; the 4px above and below leave room for the focus ring */
@media (max-width: 799px) {
  .cal-sb-w { display: none; }
  .cal-sa { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: -4px -16px; padding: 4px 16px; scroll-padding-inline: 16px; }
  .cal-sa::-webkit-scrollbar { display: none; }
  .cal-sa > * { flex: none; }
}

/* the event card: beside the event on a wide screen, full width (16px margins) near it on a phone */
.calpop { position: fixed; z-index: 18; top: 0; left: 0; width: 340px; max-width: calc(100vw - 32px); overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 16px; border-radius: var(--r);
  background: var(--surface); border-top: 4px solid var(--k, var(--moss)); box-shadow: var(--raised), 0 8px 24px #0000002e; animation: calpop-in .12s ease-out; }
@keyframes calpop-in { from { opacity: 0; translate: 0 4px; } }
.calpop.k-meeting { --k: var(--work); }
.calpop.k-appointment { --k: var(--personal); }
.calpop.k-exercise { --k: var(--exercise); }
.calpop.k-commit { --k: var(--amber); }
.calpop-h { display: flex; align-items: center; gap: 8px; margin: -6px -10px -6px 0; }
.calpop-k { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--muted); font-size: var(--fs-s); }
.calpop-k .outcome { max-width: none; }
.calpop-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-s); color: var(--muted); }
.calpop-x:hover { background: var(--line); color: var(--ink); }
.calpop-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.calpop-t { margin: -4px 0 0; font: 700 1.2rem/1.25 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.calpop-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.calpop-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: var(--fs-s); }
.calpop-dl dt { color: var(--muted); }
.calpop-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.calpop-dl dd.ok { color: var(--moss); font-weight: 700; }
.calpop-dl dd.warn { color: var(--amber-ink); font-weight: 700; }
.calpop-dl dd.bad { color: var(--danger); font-weight: 700; }
.calpop-dl dd.note { color: var(--muted); font-style: italic; }
.calpop-dl dd.muted { color: var(--muted); font-weight: 700; }
.calpop-dl dd.pen-t { color: var(--amber-ink); font-weight: 700; }
.calpop-list { display: grid; gap: 6px; }
.calpop-list > span { display: grid; }
.calpop-sub { color: var(--muted); font-size: var(--fs-xs); }
.calpop-sub.bad { color: var(--danger); }
.calpop-foot { margin: 0; font-size: var(--fs-xs); }
/* Owed to Iulia: each entry, what it's for over its day and note, the amount on the right */
.ledger { display: grid; gap: 8px; font-size: var(--fs-s); }
.ledger-r { display: flex; align-items: baseline; gap: 12px; }
.ledger-r > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ledger-r b { flex: none; }
.ledger-r b.ok { color: var(--moss); }
.calpop-a { display: flex; flex-wrap: wrap; gap: 8px; }
.calpop-a .btn { min-height: 40px; padding: 8px 14px; }
.btn.bad { background: var(--danger); color: var(--ground); }
.calpop-f { display: grid; gap: 10px; }
.calpop-ft { margin: 0; font-weight: 700; font-size: var(--fs-s); }
.calpop-f label { display: grid; gap: 4px; font-size: var(--fs-s); color: var(--muted); }
.calpop-f .note { color: var(--ink); padding-block: 8px; }
.calpop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.calpop-chips .chip { min-height: 34px; flex: 1 0 auto; }
/* −5 / +5 wrap as a pair, so a narrow popup gets a row of lengths and a row to adjust, never one lone chip */
.calpop-adj { display: flex; gap: 6px; flex: 1 0 auto; }
.calpop-hint { margin: 0; font-size: var(--fs-s); color: var(--muted); }
.calpop-hint.ok { color: var(--moss); }
.calpop-hint.bad { color: var(--danger); }
.calpop-hint:empty { display: none; }
/* a connected calendar in its card: name and where it points, when it last synced, Disconnect */
.calc { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-s); background: color-mix(in srgb, var(--work) 8%, var(--surface)); border-left: 3px solid var(--work); }
.calc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.calc-h b { min-width: 0; overflow-wrap: anywhere; }
.calc-s { font-size: var(--fs-s); }
.calc .calpop-a { margin-top: 4px; }
/* the calendar bridge in that card: three numbered steps until it's connected, then a card like a connected calendar */
.bridge { display: grid; gap: 8px; }
.calc.bridge { gap: 4px; }
.bridge-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-size: var(--fs-s); }
.bridge-steps li { padding-left: 2px; }
.bridge-steps li > * + * { margin-top: 6px; }
.calpop-a a.btn { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.bridge-code { display: block; width: 100%; max-height: 7.5em; resize: vertical; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--edge);
  background: var(--ground); color: var(--ink); font: max(16px, 1rem)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: auto; }
.calpop-dl dd a { color: inherit; }
@media (pointer: coarse) { .calpop-a .btn { min-height: 44px; } .calpop-chips .chip { min-height: 40px; } }
@media (min-width: 800px) {
  .cal { grid-template-columns: 48px repeat(var(--n), minmax(0, 1fr)); column-gap: 10px; }
  #view-calendar[data-mode="grid"] .cal-sum { padding-left: 58px; }
}

/* block alarm: at the top of every tab while a planned block is starting (a big Start, small Snooze and Skip)
   or the running block's time is up (the Keeper % slider). It stays in view while scrolling. */
.alarm { position: sticky; top: 8px; z-index: 20; display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface)); border: 2px solid var(--danger);
  box-shadow: 0 8px 24px #0000002e; animation: urge 1.6s ease-in-out infinite; }
.alarm-t { display: grid; gap: 2px; min-width: 0; }
.alarm-k { font-size: var(--fs-s); font-weight: 700; color: var(--danger); }
.alarm-t b { font: 700 1.35rem/1.2 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.alarm-go { min-height: 60px; border-radius: var(--r-s); background: var(--moss); color: var(--ground); font: 700 1.3rem var(--display); }
.alarm-a { display: flex; gap: 8px; }
.alarm-a button { flex: 1 1 auto; white-space: nowrap; min-height: 44px; border-radius: var(--r-s); border: 1px solid var(--edge); background: var(--surface); font-size: var(--fs-s); font-weight: 700; color: var(--muted); }

/* the sync dot's panel: sync state and whether this device can ring, with the switch and a test */
.syncpop { position: absolute; top: calc(100% + 10px); right: -6px; z-index: 19; width: 300px; max-width: calc(100vw - 32px); display: grid; gap: 10px;
  padding: 12px 14px 14px; border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--raised), 0 8px 24px #0000002e;
  white-space: normal; text-align: left; font-size: var(--fs-s); animation: calpop-in .12s ease-out; }
.syncpop-t { margin: 0; }
.syncpop .calpop-a .btn { flex: 1 1 auto; }

/* sound locked (the browser wants a click first): a small chip in the header, beside the sync dot, until any
   click or tap anywhere unlocks it (so it needs no thumb-sized target). Negative margins keep the header its height. */
.sndchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-block: -4px; padding: 2px 9px; border-radius: var(--r-s);
  background: var(--amber-soft); color: var(--amber-ink); border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.sndchip svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* a phone: the chip takes the date's place while it shows */
@media (max-width: 799px) { .meta:has(#sndchip:not([hidden])) #dateline { display: none; } }

/* the now bar, at the top of every tab: the block under way (moss), time's up (amber), or with no block the
   event under way or next (its kind's colour). One row: the name with its times under it, the clock, the button;
   the running block's progress along the card's bottom edge. The rest (the Keeper % slider, Start next) below it. */
.nowbar { position: sticky; top: 0; z-index: 4; display: grid; gap: 6px; padding-block: 4px; margin-block: -4px; background: var(--ground); }
.nowc { --k: var(--moss); position: relative; display: grid; gap: 8px; padding: 6px 10px 6px 12px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); border-left: 4px solid var(--k); }
.nowc.over { --k: var(--amber); background: var(--amber-soft); }
.nowc.k-meeting { --k: var(--work); }
.nowc.k-appointment { --k: var(--personal); }
.nowc.k-exercise { --k: var(--exercise); }
.nowc.k-commit, .nowc.due { --k: var(--amber); }
.nowc-r { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 36px; }
.nowc-x { flex: 1; display: grid; min-width: 0; }
.nowc-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nowc-k { flex: none; font-size: var(--fs-s); font-weight: 700; color: var(--k); }
.nowc.over .nowc-k, .nowc.due .nowc-k, .nowc.k-commit .nowc-k { color: var(--amber-ink); }
.nowc-g { flex: 0 1 auto; min-width: 0; font: 700 1rem/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowc-t { flex: none; font: 700 1.4rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nowc.over .nowc-t, .nowc.ev .nowc-t { font-size: 1rem; }
.nowc.over .nowc-t, .nowc.due .nowc-t { color: var(--amber-ink); }
.nowc .focus-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 var(--r) 0; }
.nowc-m { font-size: var(--fs-xs); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowc-h .pen { position: relative; top: -1px; }
.nowc-h:has(> .pens > .pen + .pen) { flex-wrap: wrap; row-gap: 2px; }
.nowc-h:has(> .pens > .pen + .pen) .nowc-g { max-width: calc(100% - 3rem); } /* the name stays beside "Next" */
.nowc.over .nowc-h:has(> .pens > .pen + .pen) .nowc-g { max-width: calc(100% - 5rem); } /* and beside "Time's up" */
/* "then <next> at 15:10" under the row, the full card wide; a long name gives way, its time stays */
.nowc-n { display: flex; gap: .3em; margin-top: -6px; min-width: 0; font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; }
.nowc-n span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nowc-n span:last-child { flex: none; }
.nowc-r .ghost { flex: none; margin: -4px -6px -4px -8px; padding: 8px 10px; }
.nowc-r .btn { flex: none; min-height: 36px; padding: 6px 16px; }
.nowc-q { margin: 0; font-weight: 700; }
.nowc-next { justify-self: start; }
/* the end ask he missed: amber edge on the plain surface (time's up is the amber card), the question and its
   times, then the slider kept compact (no hint, smaller readouts) with Save and Skipped */
.nowc.miss { --k: var(--amber); gap: 6px; }
.nowc.miss .nowc-q { font-size: var(--fs-s); line-height: 1.3; overflow-wrap: anywhere; }
.nowc.miss .fp { gap: 2px; }
.nowc.miss .fp-h { display: none; }
.nowc.miss .fp-v { font-size: 1.1rem; }
.nowc.miss .fp-m, .nowc.miss .fp-pl { font-size: var(--fs-xs); }
.nowc.miss .fp-a { margin-top: 4px; }
/* the start check: the first task with its stake and deadline, Task open under it; run out, the miss in red */
.nowc-task { display: grid; gap: 6px; }
.nowc-task .pen { display: inline-block; }
.nowc-task .btn { justify-self: stretch; min-height: 44px; }
.nowc-task.miss { margin: 0; font-size: var(--fs-s); font-weight: 700; color: var(--danger); }
@media (pointer: coarse) { .nowc-r { min-height: 44px; } .nowc-r .btn, .nowc-r .ghost { min-height: 44px; } }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { flex: 1 0 auto; min-width: 52px; min-height: 44px; padding: 8px 10px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--edge);
  font-weight: 700; font-variant-numeric: tabular-nums; }
.fchip:active { background: var(--moss-soft); }
.fchip.skip { color: var(--muted); font-weight: 400; }
.fchip:disabled { opacity: .5; }
/* the core and productive slider (now bar, block card, alarm, ping bar): what counts in a line, each handle's % and
   minutes above the track (lit while it moves), one track with two handles, then Save and Skipped. The core part of
   the track dark, as the chart's Keeper work, the productive part above it mid green, the rest light */
.fp { display: grid; gap: 6px; } /* its card's full width (Oct 4, 20:36: "weird alignment doesnt fill full width") */
.fp-h { margin: 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); }
.fp-o { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.fp-c, .fp-p { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 6px; margin-inline: -6px; border-radius: var(--r-s); min-width: 0;
  transition: background-color .15s, color .15s; }
.fp-o .hot { background: var(--moss-soft); color: var(--moss-deep); }
.fp-pl { color: var(--muted); font-size: var(--fs-s); }
.fp-v { font: 700 1.35rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp-m { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-o .hot .fp-m, .fp-o .hot .fp-pl { color: inherit; font-weight: 700; }
/* the core's name: Keeper unless he names another (amber then, an upgrade); a tap puts a text box in its place */
.fp-l, .fp-li { align-self: center; min-height: 30px; max-width: 12em; padding: 2px 8px; border-radius: var(--r-s); font-weight: 700; }
.fp-l { border: 1px dashed var(--edge); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp.up .fp-l { border: 1px solid var(--amber); background: var(--amber-soft); color: var(--amber-ink); }
.fp-li { width: 10em; border: 1px solid var(--moss); background: var(--surface); }
@media (pointer: coarse) { .fp-l, .fp-li { min-height: 40px; } .fp-li { font-size: max(16px, 1rem); } }
/* the track: 44px tall to take a finger; a drag along it doesn't scroll the page, one up or down still does. The
   rail runs 14px in from each end so a handle at 0 or 100 stays on it. --c and --p: the two values */
.fp-t { position: relative; height: 44px; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: pointer; }
.fp-rail { position: absolute; left: 14px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--line); }
.fp-rail i { position: absolute; top: 0; bottom: 0; border-radius: inherit; }
.fp-fc { left: 0; width: calc(var(--c) * 1%); background: var(--moss-deep); }
.fp-fp { left: calc(var(--c) * 1%); width: calc((var(--p) - var(--c)) * 1%); background: color-mix(in srgb, var(--moss) 60%, transparent); }
.fp-n { position: absolute; top: 50%; width: 44px; height: 44px; translate: -50% -50%; display: grid; place-items: center; touch-action: none; border-radius: 50%; }
.fp-n[data-w="c"] { left: calc(14px + (100% - 28px) * var(--c) / 100); }
.fp-n[data-w="p"] { left: calc(14px + (100% - 28px) * var(--p) / 100); }
.fp-n::before { content: ""; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; box-shadow: 0 1px 3px #0003; }
.fp-n[data-w="c"]::before { background: var(--moss-deep); border: 3px solid var(--surface); }
.fp-n[data-w="p"]::before { background: var(--surface); border: 3px solid var(--moss); }
.fp-n:focus-visible { outline: none; }
.fp-n:focus-visible::before { outline: 2px solid var(--moss); outline-offset: 2px; }
.fp-a { display: flex; gap: 8px; }
.fp-a .btn { min-height: 44px; padding: 8px 16px; }
.fp-k { flex: none; background: var(--surface); border: 1px solid var(--edge); color: var(--muted); font-weight: 400; }
.fp .btn:disabled { opacity: .5; }

/* the sleep window in each calendar column: before the wake time and after bedtime, faint and under the events;
   Oura's measured sleep as a thin bar on the left edge */
.cal-sleep { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; border-radius: var(--r-xs);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 10%, transparent) 0 6px, transparent 6px 12px); }
.cal-sleep span { position: absolute; right: 6px; bottom: 2px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.2; }
.cal-sleep.bed span { top: 2px; bottom: auto; }
.cal-oura { position: absolute; left: 0; width: 3px; z-index: 0; pointer-events: none; border-radius: var(--r-xs); background: color-mix(in srgb, var(--work) 55%, transparent); }

/* the end-of-block alarm: amber, the Keeper % slider in place of the big Start */
.alarm.end { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); border-color: var(--amber); }
.alarm.end .alarm-k { color: var(--amber-ink); }
.alarm-f, #ping-fp { display: grid; gap: 6px; }
.alarm-fq, .ping-q { font-weight: 700; }
.ping-q { margin: 0; }
#alarm-mute { color: var(--danger); border-color: var(--danger); }
/* a thumb, not a mouse: Start a block and Owed at 44px */
@media (pointer: coarse) { .cal-sb { min-height: 44px; } }

/* Grid or Detail, beside the day arrows: icons alone on a phone, so the day's name keeps the room */
.cal-mode { flex: none; }
.cal-mode button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 10px; }
.cal-mode svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .cal-mode button { min-height: 44px; min-width: 44px; } }

/* the detail view: one day's column, and for today the day's cards beside it when wide; on a phone the night and the morning
   over it (.day-top), the rest under it */
.cal-wrap, .day-top, .day-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.cal-ev-x { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the time with his calendar's place: a link too long for a line ends in "…" */
.cal-ev-bad { color: var(--danger); font-weight: 700; }
@media (min-width: 800px) {
  .cal-wrap.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  .day-cards { gap: 18px; }
}
/* on a laptop the cards stay beside the part of the day in view: under the now bar, or, when taller than the
   window, they scroll with the page both ways (app.js cardsStick pins them with a margin each time the scroll turns),
   held once their last card shows going down, or (.up) once their top is under the now bar going up */
@media (min-width: 800px) and (pointer: fine) {
  .cal-wrap.two .day-cards { position: sticky; top: min(calc(var(--nowbar-h, 0px) + 12px), calc(100vh - var(--cards-h, 0px) - 18px)); }
  .cal-wrap.two .day-cards.up { align-self: end; top: auto; bottom: calc(100vh - var(--cards-h, 0px) - var(--nowbar-h, 0px) - 12px); }
}
/* room for the sleep rating in one row */
@media (min-width: 960px) and (pointer: fine) {
  .seg.scale { grid-template-columns: repeat(10, 1fr); }
  .seg.scale button { padding-inline: 0; }
}

/* desktop density: a laptop or desktop with a mouse or trackpad, at arm's length. Type at 15px (17-18px before), and
   controls at mouse sizes from one set of tokens: --ctl for buttons, segments and icon buttons, --ctl-s for the small
   ones (chips, small segments), --ctl-l for the main actions and inputs. A phone, and a phone in "desktop site" mode
   (coarse, zoomed 1.3), keep everything above. Last in the file, so it wins over the rules it tightens. */
@media (min-width: 800px) and (pointer: fine) {
  :root { --ctl: 32px; --ctl-s: 26px; --ctl-l: 34px; --chk: 22px; }
  html, body { font-size: 15px; }
  body { padding: 0 24px 40px; }
  .top { padding-block: 12px 10px; gap: 20px; }
  .mark { width: 22px; height: 22px; }
  .tabs button { min-height: var(--ctl); padding: 4px 12px; gap: 6px; }
  .tabs svg { width: 18px; height: 18px; }
  .sndchip { min-height: 24px; }
  main, .view { gap: 14px; }
  .block { padding: 14px 16px; gap: 10px; }
  .block-h { min-height: 28px; }
  .stuck { padding: 12px 64px 12px 14px; }
  .install .ghost { padding: 4px 10px; }
  .ghost { padding: 6px 8px; margin: -4px -2px; }
  .block-h .ghost:last-child, .trial-row .ghost:last-child { margin-right: -8px; }

  /* segments, chips, buttons */
  .seg button { min-height: var(--ctl); padding: 5px 10px; }
  .seg.small button { min-height: var(--ctl-s); padding: 2px 10px; }
  .chip, .calpop-chips .chip { min-height: var(--ctl-s); padding: 3px 10px; }
  .btn { min-height: var(--ctl-l); padding: 6px 14px; }
  .calpop-a .btn { min-height: var(--ctl); padding: 5px 12px; }
  .inline-add button { min-height: var(--ctl); }
  .fchip { min-width: 44px; min-height: var(--ctl); padding: 4px 8px; }
  .fp-t { height: 32px; }
  .fp-n { width: 28px; height: 28px; }
  .fp-n::before { width: 18px; height: 18px; }
  .fp-l, .fp-li { min-height: var(--ctl-s); }
  .fp-a .btn { min-height: var(--ctl); padding: 5px 14px; }
  input[type="range"] { height: 24px; }
  .mood-scale { margin-top: -2px; }
  .inline-add input, .todo-add input, input.note { padding: 6px 10px; font-size: 1rem; }
  .done-wrap summary { min-height: var(--ctl); }
  .toast { min-height: 40px; }
  .toast .ghost { padding: 6px 10px; }
  .sheet-card { padding: 18px; }

  /* the routine and Tonight: rows at 36px, a 22px box; the dashes and the "done earlier" chips stay under the names
     (box + 10 gap + the name button's 6px) */
  .habit { min-height: 36px; gap: 10px; }
  .habit-name { padding-block: 6px; }
  .check { width: var(--chk); height: var(--chk); }
  .check::before { inset: -6px; }
  .check svg { width: 13px; height: 13px; }
  .off-row { min-height: 36px; padding-left: 38px; }
  .off-row::before { left: 5px; }
  .off-row.on::before { left: 6px; }
  .earlier { padding: 0 0 8px 38px; }
  .later, .x, .mv { width: var(--ctl); height: var(--ctl); }
  .later { margin: -2px -6px -2px 0; }

  /* todos: 40px rows; snoozed text still under the open rows' text (grip 28 + 8 + box + 4 + 8) */
  .todo-add .add { width: var(--ctl-l); min-height: var(--ctl-l); font-size: 1.3rem; }
  .prio-pick { min-width: 48px; min-height: var(--ctl-l); }
  .todo { min-height: 40px; padding: 2px 12px; gap: 12px; }
  .todo.movable { padding: 2px 4px 2px 0; }
  .todo-text { padding-block: 6px; }
  .more { width: var(--ctl); height: var(--ctl); }
  .todos.snoozed .todo { padding: 2px 4px 2px 70px; }

  /* calendar: the bar, the strip under the summary, all-day chips, the event card */
  .cal-arr { width: var(--ctl); height: var(--ctl); }
  .cal-bar .ghost { padding: 4px 10px; }
  .cal-sb { min-height: 30px; padding: 4px 10px; }
  .cal-chip { min-height: var(--ctl-s); padding: 2px 8px; }
  .calpop-h { margin: -4px -8px -4px 0; }
  .calpop-x { width: 30px; height: 30px; }

  /* the now bar, the block alarm and the ping bar */
  .nowc-r { min-height: var(--ctl); }
  .nowc-r .ghost { padding: 4px 8px; }
  .nowc-r .btn { min-height: 30px; padding: 4px 14px; }
  .nowc-task .btn { min-height: var(--ctl-l); }
  .alarm-go { min-height: 44px; font-size: 1.15rem; }
  .alarm-a button { min-height: var(--ctl); }
  .ping-a button, .ping-f button { min-height: var(--ctl); padding: .3rem .8rem; }
  .cal-wrap.two { gap: 16px; }
  .day-cards { gap: 14px; }
}