:root {
  color-scheme: dark;
  --bg: #14161a;
  --panel: #1d2026;
  --line: #2c313a;
  --text: #e6e8ec;
  --muted: #8a909b;
  --accent: #6ea8fe;
  --on-accent: #0c1320;     /* text on an accent-filled button */
  --on-chip: #0c1320;       /* text on a project-coloured chip — dark in every theme */
  --danger: #ff8b9e;        /* overdue, errors, missed */
  --danger-soft: #ffb4c1;   /* text on --danger-bg */
  --danger-bg: #5b2330;
  --warn: #ffd35b;          /* starred, "close", goal lines */
  --good: #7dd58f;
  --good-bg: #1e3a2e;
  --accent-bg: #1e2d3d;
  --pri-hi: #ff9d8a;
  --pri-hi-line: #5b2e23;
  --pri-mid: #e6c06a;
  --missed: #7a3a46;        /* a missed target's bar fill */
  --mark: rgba(255, 211, 91, .25);  /* search-hit highlight */
  --backdrop: rgba(0,0,0,.6);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Type scale: five steps, each >= 12% apart at the small end and 25% across
     the range (Refactoring UI: adjacent values must be clearly different).
     Nothing in the UI goes below --fs-xs. Theme display faces set their own
     heading sizes, since a handwritten or pixel font reads smaller. */
  --fs-xs: .75rem;    /* 12px: chips, badges, uppercase labels, meta */
  --fs-sm: .875rem;   /* 14px: secondary text, notes, form labels */
  --fs-base: 1rem;    /* 16px: body, titles in lists */
  --fs-lg: 1.125rem;  /* 18px: card headings */
  --fs-xl: 1.25rem;   /* 20px */
  /* Radius scale: small (chips, badges), medium (inputs, rows, buttons),
     large (cards). 999px pills sit outside it. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  /* Icons (mak/icons.py): outlined in currentColor; each theme sets how they
     are drawn. --icon-fill is the second colour on an icon's panels; -op is
     how much of it shows normally, -on-op on the current tab. */
  --icon-stroke: 1.75;
  --icon-cap: round;
  --icon-join: round;
  --icon-fill: var(--accent);
  --icon-fill-op: 0;
  --icon-fill-on: var(--accent);
  --icon-fill-on-op: .3;
}
/* Themes: base.html sets <html data-theme="…"> from the user's pref (see
   auth.THEMES). Dark is the :root above; each other theme overrides the same
   tokens at the bottom of this file, plus whatever shape changes it wants. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 var(--font-body);
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: var(--fs-lg); letter-spacing: .5px; }
header a { color: var(--text); text-decoration: none; }

main { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.card h2 { margin: 0 0 1rem; font-size: var(--fs-base); color: var(--muted); font-weight: 600; }

input, textarea, button {
  font: inherit;
  color: var(--text);
}
input, textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .55rem .7rem;
  width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }

button {
  background: var(--accent);
  border: none;
  border-radius: var(--r-md);
  padding: .55rem .9rem;
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.07); }
/* Secondary: outlined, for navigation and repeated row actions (date "Go",
   per-row Save) so each screen keeps one solid primary action. */
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }

.add { display: flex; gap: .5rem; margin-bottom: 1rem; }
.add input { flex: 1; }

.journal { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.journal-date { display: flex; gap: .5rem; align-items: center; }
.journal-date input[type="date"] { width: auto; }

.journal-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.journal-main { flex: 1 1 0; min-width: 0; }
.journal-index { flex: 0 0 260px; }
@media (max-width: 760px) {
  .journal-layout { flex-direction: column; }
  .journal-index { flex-basis: auto; width: 100%; }
}
.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.entry-list a {
  display: block; text-decoration: none; color: var(--text);
  padding: .4rem .55rem; border-radius: var(--r-md); border: 1px solid transparent;
}
.entry-list a:hover { background: var(--bg); }
.entry-list a.on { background: var(--bg); border-color: var(--line); }
.entry-list .entry-date { display: block; font-size: var(--fs-sm); font-weight: 600; }
.entry-list .entry-preview { display: block; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journal-index .empty { color: var(--muted); font-style: italic; }
.journal-search { margin: 0 0 .6rem; }
.search-count { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 .5rem; }
.entry-list .entry-snippet { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.entry-list mark { background: var(--mark); color: var(--text); border-radius: var(--r-sm); padding: 0 .1em; }

.todos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.todos li { display: flex; align-items: center; gap: .6rem; }
.todos .empty { color: var(--muted); font-style: italic; }

.check {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  color: var(--muted);
  line-height: 1;
}
.check:hover { border-color: var(--accent); color: var(--accent); }

.compass { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.compass label { color: var(--muted); font-size: var(--fs-sm); margin-top: .4rem; }
.compass textarea { margin-bottom: .2rem; }

.hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1rem; }
code { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .05rem .35rem; font-size: .85em; }

.sessions { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.sessions li { border-left: 2px solid var(--line); padding-left: .7rem; }
.sessions p { margin: .25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.sessions .empty { color: var(--muted); font-style: italic; border: none; padding-left: 0; }

.session-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.session-head time { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }

.session { border-top: 1px solid var(--line); padding: 1rem 0; }
.session:first-of-type { border-top: none; }
.session .notes { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem; font-size: var(--fs-sm); overflow-x: auto; }

a { color: var(--accent); }

/* ---- header tabs ------------------------------------------------------- */
header { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.tabs a {
  color: var(--muted); text-decoration: none; font-size: var(--fs-base);
  padding: .4rem .75rem; border-radius: var(--r-md); border: 1px solid transparent;
}
.tabs a:hover { color: var(--text); background: var(--panel); }
.tabs a.on { color: var(--text); background: var(--panel); border-color: var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: .35rem; }
.tab-icon { display: inline-flex; }
.icon {
  width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: var(--icon-cap); stroke-linejoin: var(--icon-join);
}
.icon .d, .icon .f { fill: var(--icon-fill); fill-opacity: var(--icon-fill-op); }
.icon .f { stroke: none; }
.icon .s { fill: currentColor; }
.tabs a.on .icon .d, .tabs a.on .icon .f { fill: var(--icon-fill-on); fill-opacity: var(--icon-fill-on-op); }
.info-btn .icon { width: 1rem; height: 1rem; }
.settings-check .icon { color: var(--muted); }
.tab-short { display: none; }  /* phones only: auth.TABS' short label */
.user-bar {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
  font-size: var(--fs-sm); white-space: nowrap;
}
.user-name { color: var(--muted); }
/* ---- info modal -------------------------------------------------------- */
.info-btn {
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: .2rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line); font-weight: 700; line-height: 1; flex: 0 0 auto;
}
.info-btn:hover { color: var(--accent); border-color: var(--accent); }
.info-modal { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; max-width: 540px; width: calc(100% - 2rem); }
.info-modal::backdrop { background: var(--backdrop); }
.info-body { padding: 1.5rem; }
.info-body h3 { margin: 0 0 .75rem; font-size: var(--fs-base); color: var(--accent); }
.info-body p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 .6rem; line-height: 1.55; }
.info-body ul { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 .6rem; padding-left: 1.2rem; line-height: 1.55; }
.info-body li { margin-bottom: .3rem; }
.info-close {
  margin-top: .75rem; background: var(--line); color: var(--text);
  border: none; border-radius: var(--r-md); padding: .5rem 1.2rem; font-weight: 600; cursor: pointer;
}
.info-close:hover { background: var(--accent); color: var(--on-accent); }

/* ---- help page --------------------------------------------------------- */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.help-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem;
}
.help-card:hover { border-color: var(--accent); }
.help-card h3 { margin: 0 0 .5rem; font-size: var(--fs-base); }
.help-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.help-tips { color: var(--muted); font-size: var(--fs-sm); padding-left: 1.2rem; line-height: 1.5; }
.help-tips li { margin-bottom: .4rem; }
/* ---- login ------------------------------------------------------------- */
.login-card { max-width: 360px; margin: 4rem auto; }
.login-card h2 { text-align: center; margin-bottom: 1rem; }
.login-card .error { color: var(--danger); font-size: var(--fs-sm); text-align: center; }

/* ---- todo: sub-nav ----------------------------------------------------- */
.subnav {
  display: flex; gap: .25rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem;
}
.subnav a {
  color: var(--muted); text-decoration: none; padding: .35rem .7rem;
  border-radius: var(--r-md); font-size: var(--fs-sm);
}
.subnav a:hover { background: var(--panel); color: var(--text); }
.subnav a.on { background: var(--panel); color: var(--text); }
.subnav .newbtn { margin-left: auto; color: var(--accent); }

.badge {
  display: inline-block; min-width: 1.2rem; text-align: center;
  background: var(--line); color: var(--text); border-radius: 999px;
  padding: 0 .4rem; font-size: var(--fs-xs); font-weight: 600;
}
.badge.warn { background: var(--danger-bg); color: var(--danger-soft); }
a.badge { text-decoration: none; }

/* ---- todo: card head --------------------------------------------------- */
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.card-head h2 { margin: 0; }
/* Item count beside a card or list heading. */
.card-head h2 .badge, .list-subhead .badge { margin-left: .4rem; vertical-align: middle; }
.card-head-actions { display: flex; gap: .9rem; align-items: center; font-size: var(--fs-sm); }
.card-head-actions a { text-decoration: none; }
.newbtn { font-weight: 600; }

/* ---- todo: filters & quick-add ---------------------------------------- */
.filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters label { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: .4rem; align-items: center; }
.filters select { width: auto; }

.quick-add { flex-wrap: wrap; }
.quick-add input[name="title"] { flex: 1 1 12rem; }
.quick-add select, .quick-add input[type="date"] { width: auto; flex: 0 0 auto; }
.today-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.today-bar .filters { margin-bottom: 0; }
.today-check { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.today-check input { width: auto; }
.list-subhead { margin: 1.25rem 0 .5rem; font-size: var(--fs-base); color: var(--muted); font-weight: 600; }
select { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem .6rem; color: var(--text); }

/* ---- todo: task list & cards ------------------------------------------ */
.tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tasks-list .empty { color: var(--muted); font-style: italic; }
.tasks-list .empty.small { font-style: normal; opacity: .5; }

form.inline { display: inline; margin: 0; }

.task {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .6rem .7rem;
}
.task.done { opacity: .55; }
.task.done .task-title a { text-decoration: line-through; }
.task-body { flex: 1; min-width: 0; }
.task-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-xs); color: var(--muted); margin-right: .4rem; opacity: .7; }
.task-title a { color: var(--text); text-decoration: none; font-weight: 600; }
.task-title a:hover { color: var(--accent); }
.task-meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.task-notes { color: var(--muted); font-size: var(--fs-sm); margin-top: .35rem; white-space: pre-wrap; max-height: 4.5em; overflow: hidden; }

/* Child steps shown inline under a task card (e.g. directive/loop todos). */
.subtasks-inline { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.subtask-inline { display: flex; align-items: flex-start; gap: .45rem; font-size: var(--fs-sm); }
.subtask-inline .subtask-title { color: var(--text); line-height: 1.35; }
.subtask-inline.done .subtask-title { text-decoration: line-through; opacity: .55; }
.subcheck { background: transparent; border: none; color: var(--muted); padding: 0; font-size: var(--fs-base); line-height: 1.3; cursor: pointer; }
.subcheck:hover { color: var(--accent); }
.subcheck.checked { color: var(--accent); }
.task-actions { display: flex; gap: .25rem; align-items: center; }
.task-actions select { padding: .25rem .4rem; font-size: var(--fs-sm); }

.check {
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  width: 1.5rem; height: 1.5rem; padding: 0; color: var(--muted); line-height: 1; font-size: var(--fs-sm);
}
.check:hover { border-color: var(--accent); color: var(--accent); }
.check.checked { color: var(--accent); border-color: var(--accent); }

.ghost { background: transparent; color: var(--muted); border: 1px solid transparent; padding: .2rem .45rem; border-radius: var(--r-sm); }
.ghost:hover { background: var(--panel); color: var(--text); }
.ghost.on { color: var(--warn); }
.ghost.danger:hover { color: var(--danger); }
.linkbtn { background: none; border: none; color: var(--accent); padding: 0; font-weight: 400; cursor: pointer; }
.linkbtn.danger { color: var(--danger); }

/* meta chips */
.chip { font-size: var(--fs-xs); padding: .08rem .5rem; border-radius: 999px; color: var(--on-chip); background: var(--chip, var(--accent)); font-weight: 600; }
.pri { font-size: var(--fs-xs); padding: .08rem .4rem; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--muted); }
.pri.hi { color: var(--pri-hi); border-color: var(--pri-hi-line); }
.pri.mid { color: var(--pri-mid); }
.pri.lo { color: var(--muted); }
.due { font-size: var(--fs-xs); color: var(--muted); }
.due.overdue { color: var(--danger); }
.tag { font-size: var(--fs-xs); color: var(--accent); }
.recur { font-size: var(--fs-xs); color: var(--muted); }
.status { font-size: var(--fs-xs); padding: .05rem .4rem; border-radius: var(--r-sm); border: 1px solid var(--line); text-transform: capitalize; }
.s-in_progress { color: var(--accent); }
.s-blocked { color: var(--danger); }
.s-done { color: var(--muted); }

/* ---- todo: projects grid ---------------------------------------------- */
.project-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.project-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem; }
.project-card.archived { opacity: .55; }
.project-link { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); font-weight: 600; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--chip, var(--accent)); display: inline-block; flex: 0 0 auto; }
.project-counts { color: var(--muted); font-size: var(--fs-sm); margin-top: .45rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.project-counts .muted { color: var(--muted); }
.project-desc { color: var(--muted); font-size: var(--fs-sm); margin: .5rem 0 0; }

/* ---- people ------------------------------------------------------------ */
.people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.person { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .8rem .9rem; }
.person.archived { opacity: .55; }
.person-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.person-name { color: var(--text); text-decoration: none; font-weight: 600; }
.person-name:hover { color: var(--accent); }
.person-rel { color: var(--muted); font-size: var(--fs-sm); }
.person-status { margin: .5rem 0 0; }
.person-notes { color: var(--muted); font-size: var(--fs-sm); margin: .5rem 0 0; white-space: pre-wrap; }

/* ---- todo: project status sections --------------------------------------- */
.status-head { margin: 1.2rem 0 .5rem; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
.status-head:first-of-type { margin-top: .6rem; }

/* ---- todo: forms ------------------------------------------------------- */
.form-card { max-width: 720px; }
form.stack { display: flex; flex-direction: column; gap: .9rem; }
form.stack label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: var(--fs-sm); }
form.stack .row { display: flex; gap: 1rem; flex-wrap: wrap; }
form.stack .row label { flex: 1 1 8rem; }
.recur-fields { border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem .9rem 1rem; }
/* the event form hides fields per kind with [hidden]; labels are display:flex,
   which would otherwise beat the browser's default display:none */
.event-form [hidden] { display: none !important; }
/* a tickbox label in a stacked form sits on one line, box first */
form.stack label.today-check { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); font-size: var(--fs-base); }
.every-row { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.every-row input { width: 4.5rem; }
.recur-fields legend { color: var(--muted); font-size: var(--fs-sm); padding: 0 .4rem; }
.form-actions { display: flex; gap: .6rem; }
.subtasks { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.subtasks h3 { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 .7rem; }
.subtask { align-items: center; }
.subtask.done .subtask-title { text-decoration: line-through; opacity: .6; }
.subtask-title { flex: 1; }

/* ---- habits ------------------------------------------------------------ */
.habits-layout { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.25rem; }
.habits-layout > .card { flex: 1 1 320px; }
.habit-day-head { display: flex; align-items: baseline; gap: .5rem; }
.chip-rel {
  font-size: var(--fs-xs); padding: .05rem .5rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.habit-group { margin-bottom: 1.1rem; }
.habit-group:last-child { margin-bottom: 0; }
.habit-group h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 .5rem; }
.habit-grid { display: flex; flex-direction: column; gap: .5rem; width: 100%; }

.habit-check {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .55rem .7rem; user-select: none;
}
.habit-check:hover { border-color: var(--accent); }
.habit-check { cursor: default; padding-top: .35rem; padding-bottom: .35rem; }
/* ✓ / ✗ pair (templates/_habit_yn.html): outlined at rest, filled when chosen */
.habit-yn { margin-left: auto; display: flex; gap: .35rem; flex: 0 0 auto; }
.habit-streak + .habit-yn { margin-left: .2rem; }
.habit-yn button {
  min-width: 2.25rem; min-height: 2.25rem; padding: 0; font-size: var(--fs-base); line-height: 1;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); background: transparent;
}
.habit-yn .yn-yes:hover { color: var(--good); border-color: var(--good); background: transparent; }
.habit-yn .yn-no:hover { color: var(--danger); border-color: var(--danger); background: transparent; }
.habit-yn .yn-yes[aria-pressed="true"] { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.habit-yn .yn-no[aria-pressed="true"] { background: var(--danger-bg); color: var(--danger-soft); border-color: var(--danger); }
.habit-check.is-off .habit-label { color: var(--text); }
.habit-check.is-on { border-color: var(--accent); }
.habit-check.is-on .habit-label { color: var(--text); }
.habit-label { color: var(--muted); font-size: var(--fs-base); }
.habit-streak { margin-left: auto; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.habit-check.is-on .habit-label { color: var(--text); }

.habit-scale {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .5rem .7rem;
}
.habit-scale select { width: auto; }

.habits-recent .habit-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.habits-recent .habit-history li {
  display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: .4rem;
}
.habits-recent .habit-history li:first-child { border-top: none; padding-top: 0; }
.hist-date { flex: 0 0 5.5rem; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.hist-marks { display: flex; gap: .3rem .5rem; flex-wrap: wrap; }
.mark { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.mark.on { color: var(--good); }
.mark.off { color: var(--danger); }
.mark.na { opacity: .5; }
.mark.scale { color: var(--accent); }

/* habit targets ("5 per week"): a row per habit with a thin progress bar. The
   bar is a plain div width-% — no gradient, no animation: it's a count, and the
   number beside it is the real answer. Status colours the number only, so the
   card stays calm when several targets are open. */
.habit-targets { margin-bottom: 1.25rem; }
.habit-targets .card-head { margin-bottom: .75rem; }
.habit-targets .hint { margin: 0; }
.target-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.target {
  display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(4rem, 20rem) 3.4rem minmax(9rem, 1fr);
  gap: .75rem; align-items: center;
}
.target-name { color: var(--text); font-size: var(--fs-sm); }
.target-bar { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; height: .5rem; overflow: hidden; }
.target-fill { display: block; height: 100%; background: var(--muted); }
.target.is-met .target-fill { background: var(--accent); }
.target.is-missed .target-fill { background: var(--missed); }
.target-count { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.target-count .of { color: var(--muted); font-weight: 400; }
.target.is-met .target-count { color: var(--accent); }
.target.is-missed .target-count { color: var(--danger); }
.target-meta { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .target { grid-template-columns: 1fr 3.4rem; }
  .target-bar { grid-column: 1 / -1; }
  .target-meta { grid-column: 1 / -1; }
}

/* the habit list editor (/habits/manage): one form per row, laid out on a shared
   grid so the rows line up under the header labels. */
.habit-defs { margin-bottom: 1.25rem; }
.def-row {
  display: grid;
  /* every column has a fixed or fr width: each row is its own grid, so an
     `auto` column (the header has no buttons) would size differently per row
     and slide On/Streak out from under their labels */
  grid-template-columns: 1.75rem minmax(9rem, 1fr) 10rem 8rem minmax(17rem, 1.2fr) 2rem 3.25rem 9rem;
  gap: .5rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line);
  background: var(--panel);  /* so a row being dragged isn't see-through */
}
/* drag handle: the only grab point, so text fields and selects stay usable */
.def-handle {
  cursor: grab; color: var(--muted); font-size: var(--fs-lg); line-height: 1; text-align: center;
  user-select: none; touch-action: none; padding: .35rem 0; border-radius: var(--r-sm);
}
.def-handle:hover { color: var(--accent); background: var(--bg); }
.def-chosen .def-handle { cursor: grabbing; color: var(--accent); }
.def-ghost { opacity: .35; }

.def-head { border-top: none; padding-bottom: .3rem; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; }
.def-add { border-top: none; padding-top: 0; }
.def-row.is-off input, .def-row.is-off select { opacity: .6; }
.def-row select, .def-row input[type="number"] { width: 100%; }
.def-target { display: flex; align-items: center; gap: .35rem; }
.def-target input[type="number"] { width: 4rem; }
.def-target select { width: auto; flex: 1 1 auto; min-width: 6rem; }
.def-target .per { color: var(--muted); font-size: var(--fs-sm); }
.def-progress { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.def-progress.is-met { color: var(--accent); }
.def-progress.is-missed { color: var(--danger); }
.def-active { display: flex; justify-content: center; }
.def-active input { width: auto; margin: 0; accent-color: var(--accent); }
.def-actions { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 900px) {
  .def-row { grid-template-columns: 1fr 1fr; position: relative; }
  .def-head { display: none; }
  /* stacked rows: the handle sits in the row's top-right corner, a full
     44px touch target, rather than taking a grid cell of its own */
  .def-handle { position: absolute; top: .3rem; right: 0; width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center; padding: 0; z-index: 1; }
  .def-row > input[name="label"] { width: calc(100% - 3rem); justify-self: start; align-self: flex-start; }
  .def-add > span:first-child { display: none; }
  .def-target { grid-column: 1 / -1; }
}

/* habit category list (manage page) */
.section-list { display: flex; flex-direction: column; gap: .3rem; }
.section-row {
  display: flex; gap: .6rem; align-items: center;
  padding: .4rem .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
}
.section-name { font-weight: 600; }
.section-count { font-size: var(--fs-sm); }

/* compact habits nudge on the Todo Today view */

/* ---- calendar ---------------------------------------------------------- */
/* The month grid needs the room: seven columns beside a day panel inside the
   default 1100px leaves each column ~95px, which truncates every title to two
   words. `main.wide` (opted into per page via the main_class block) buys back
   ~300px, taking a column to ~145px — enough for a time plus a few words. */
main.wide { max-width: 1400px; }

.cal-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.cal-main { flex: 1 1 0; min-width: 0; }
.cal-side { flex: 0 0 300px; }

.cal-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cal-nav .cal-title { margin: 0 .3rem; font-size: var(--fs-base); font-weight: 600; min-width: 9rem; }
.cal-nav a {
  color: var(--muted); text-decoration: none; padding: .25rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.cal-nav a:hover { color: var(--text); background: var(--panel); }
.cal-nav input[type="date"] { width: auto; }

.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin-bottom: .35rem; }
.cal-dow span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); text-align: center; }

/* Seven fixed columns inside a 1100px container is ~145px each, so every cell
   needs minmax(0, 1fr) plus min-width:0 — the same gotcha the kanban columns
   hit. Without it one long event title widens its column and the whole
   seven-column row overflows the card; with it, titles ellipsis instead. */
/* Each week is its own 7-column row so multi-day events can be drawn as bars
   across it. --g is the column gap; a bar's left/width are worked out from it
   so a bar runs continuously across the gaps between days. */
.cal-grid { display: flex; flex-direction: column; gap: var(--g); --g: .35rem; }
.cal-week {
  position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g);
  --bar-h: 1.2rem; --bar-step: 1.35rem; --bar-top: 1.85rem;
}
.cal-cell {
  min-width: 0; min-height: 6.5rem;
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .4rem; text-decoration: none; color: var(--text);
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.out { opacity: .4; }
.cal-cell.today { border-color: var(--accent); }
.cal-cell.sel { background: var(--panel); border-color: var(--accent); }
.cal-daynum { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
/* room under the day number for this week's bars, so chips never sit beneath one */
.cal-lanes { display: block; flex: 0 0 auto; height: calc(var(--lanes, 0) * var(--bar-step)); margin-top: -.2rem; }
.cal-bar {
  position: absolute; z-index: 1; pointer-events: none;  /* clicks reach the day cell */
  top: calc(var(--bar-top) + var(--lane) * var(--bar-step)); height: var(--bar-h);
  left: calc(var(--c) * ((100% - 6 * var(--g)) / 7 + var(--g)));
  width: calc(var(--s) * ((100% - 6 * var(--g)) / 7) + (var(--s) - 1) * var(--g));
  padding: 0 .45rem; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; line-height: var(--bar-h); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--chip) 30%, var(--panel));
  border-left: 3px solid var(--chip);
}
/* continues from last week / into next week: square that end */
.cal-bar.cont-l { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar.cancelled { text-decoration: line-through; opacity: .5; }
.cal-cell.today .cal-daynum { color: var(--accent); }

.cal-ev {
  min-width: 0; font-size: var(--fs-xs); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .05rem .35rem; border-radius: var(--r-sm);
  background: var(--panel); border-left: 2px solid var(--chip, var(--accent));
}
.cal-ev.cancelled { text-decoration: line-through; opacity: .5; }
.cal-ev-time { color: var(--muted); margin-right: .25rem; }
/* a holiday also tints every day it covers (school holidays read at a glance) */
.cal-cell.has-band { background: color-mix(in srgb, var(--band) 16%, var(--bg)); }
.cal-more { font-size: var(--fs-xs); color: var(--muted); }
.cal-evs { display: contents; }   /* desktop: chips stack as if unwrapped; phones: a row of dots */
.cal-marks { margin-top: auto; display: flex; gap: .4rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.cal-marks .warn { color: var(--danger); }

.cal-section { margin-bottom: 1.1rem; }
.cal-section:last-child { margin-bottom: 0; }
.cal-section h4 { margin: 0 0 .5rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cal-section .empty { color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 .5rem; }
details.cal-section { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .7rem; }
details.cal-section summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
details.cal-section summary::-webkit-details-marker { display: none; }
details.cal-section summary::before { content: '▸'; font-size: var(--fs-xs); color: var(--muted); transition: transform .15s; }
details.cal-section[open] summary::before { transform: rotate(90deg); }
details.cal-section summary h4 { margin: 0; }

.cal-ev-row {
  display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem;
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--chip, var(--accent));
  border-radius: var(--r-md); padding: .5rem .6rem;
}
.cal-ev-row.cancelled .cal-ev-title { text-decoration: line-through; opacity: .6; }
.cal-ev-body { flex: 1; min-width: 0; }
.cal-ev-title { font-weight: 600; font-size: var(--fs-sm); }
.cal-ev-meta { color: var(--muted); font-size: var(--fs-xs); }
.cal-ev-notes { color: var(--muted); font-size: var(--fs-sm); margin-top: .3rem; white-space: pre-wrap; }
.cal-ev-actions { display: flex; gap: .3rem; align-items: center; }
.cal-src { white-space: nowrap; }

.cal-task { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.cal-task.done .cal-task-title { text-decoration: line-through; opacity: .6; }
.cal-task-body { flex: 1; min-width: 0; }
.cal-task-title a { color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.cal-task-title a:hover { color: var(--accent); }
.cal-reschedule { margin-top: .3rem; }
.cal-reschedule input[type="date"] { width: auto; font-size: var(--fs-xs); padding: .2rem .4rem; }

.cal-journal { color: var(--muted); font-size: var(--fs-sm); margin: .2rem 0 .5rem; }
.cal-status { color: var(--muted); font-size: var(--fs-sm); }
.cal-status.bad { color: var(--danger); }

@media (max-width: 760px) {
  .cal-layout { flex-direction: column; }
  .cal-side { flex-basis: auto; width: 100%; }
  /* Keep seven columns — a month grid that reflows into a list stops being a
     month. Drop to day numbers and markers; the panel below carries the detail. */
  .cal-cell { min-height: 3.6rem; }
  /* single-day events become dots in their colour (Google ones a hollow ring,
     as on desktop) so a day with something on it never looks empty */
  .cal-evs { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
  .cal-ev {
    flex: 0 0 auto; width: .5rem; height: .5rem; padding: 0; font-size: 0;
    border: none; border-radius: 50%; background: var(--chip, var(--accent));
  }
  .cal-more { display: none; }
  /* phones: no room for text, so a bar becomes a thin coloured strip */
  .cal-week { --bar-h: .3rem; --bar-step: .45rem; --bar-top: 1.45rem; }
  .cal-bar { font-size: 0; padding: 0; border-left: none; background: var(--chip); }
}

/* ---- notes ------------------------------------------------------------- */
.notes-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.note-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem; }
.note-card:hover { border-color: var(--accent); }
.note-card a { display: block; text-decoration: none; color: var(--text); }
.note-card-title { display: block; font-weight: 600; margin: .35rem 0 .25rem; }
.note-card { display: flex; flex-direction: column; }
.note-card > a { flex: 1; }
.note-card-delete { margin: .6rem 0 0; text-align: right; }
.note-card-delete .linkbtn { font-size: var(--fs-sm); }
.note-card-preview { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.note-type-badge {
  display: inline-block; font-size: var(--fs-xs); padding: .05rem .5rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  background: var(--line); color: var(--muted);
}
.note-type-badge.list { background: var(--good-bg); color: var(--good); }
.note-type-badge.text { background: var(--accent-bg); color: var(--accent); }

.notes-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.notes-main { flex: 1 1 0; min-width: 0; }
.notes-index { flex: 0 0 240px; }
@media (max-width: 760px) {
  .notes-layout { flex-direction: column; }
  .notes-index { flex-basis: auto; width: 100%; }
}

.notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.notes-list a {
  display: flex; gap: .4rem; align-items: center; text-decoration: none; color: var(--text);
  padding: .4rem .55rem; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-sm);
}
.notes-list a:hover { background: var(--bg); }
.notes-list a.on { background: var(--bg); border-color: var(--line); }
.notes-list-icon { font-size: var(--fs-sm); flex: 0 0 auto; }

.note-form { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.note-rename { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.note-rename input { flex: 1; }

.note-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.note-item {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .55rem .7rem;
}
.note-item:hover { border-color: var(--accent); }
.note-item.done { opacity: .55; }
.note-item.done .note-item-title { text-decoration: line-through; }
.note-item-check { width: auto; margin: .15rem 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.note-item-body { flex: 1; min-width: 0; }
.note-item-title { display: block; line-height: 1.4; }
.note-item-desc { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: .15rem; white-space: pre-line; line-height: 1.5; }

/* guides library: ready-made checklists (mak/note_guides.py) */
.guide-search { width: 100%; margin: 0 0 .75rem; }
.guide-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.guide-filter button { font-size: var(--fs-sm); padding: .35rem .8rem; }
.guide-filter button.secondary.on { background: var(--accent); color: var(--on-chip); border-color: var(--accent); }
.guide-section { border-top: 1px solid var(--line); }
.guide-section:last-of-type { border-bottom: 1px solid var(--line); }
.guide-section-head {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .85rem .25rem; cursor: pointer; font-weight: 600; list-style: none;
}
.guide-section-head::-webkit-details-marker { display: none; }
.guide-section-head::after { content: "▸"; color: var(--muted); transition: transform .15s; }
.guide-section[open] > .guide-section-head::after { transform: rotate(90deg); }
.guide-section-head .badge { margin-left: auto; }
.guide-section .notes-grid { padding: 0 0 1rem; }
.guide-card { display: flex; flex-direction: column; gap: .75rem; }
.guide-card-body { flex: 1; }
.guide-card .note-card-title { margin-top: 0; }
.guide-meta { display: block; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; margin: 0 0 .4rem; }
.guide-outcome { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.guide-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.guide-view { font-size: var(--fs-sm); }
.guide-actions form { margin: 0; }
.guide-hint { margin: 1.25rem 0 0; }
.guide-card[hidden], .guide-section[hidden] { display: none; }

/* -- habit library (/habits/library): reuses the guide-section fold-outs ------ */
.lib-list { list-style: none; margin: 0; padding: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.lib-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .55rem .7rem;
}
.lib-item:hover { border-color: var(--accent); }
.lib-pick { display: flex; align-items: center; gap: .7rem; flex: 1 1 14rem; min-width: 0; cursor: pointer; }
.lib-pick input { width: auto; margin: 0; accent-color: var(--accent); }
.lib-item:has(input[name="pick"]:checked) { border-color: var(--accent); background: var(--accent-bg); }
.lib-label { font-size: var(--fs-base); }
.lib-meta { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.lib-target { flex: 0 1 auto; }
.lib-target select { flex: 0 1 auto; }
.lib-streak { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
.lib-streak input { width: auto; margin: 0; accent-color: var(--accent); }
/* the days box only means anything for a rolling window */
.lib-target:not(:has(option[value="rolling"]:checked)) input[name^="days-"] { display: none; }
.lib-item.is-added, .lib-item.is-added .lib-pick { cursor: default; opacity: .6; }
.lib-item.is-added .lib-pick { opacity: 1; }
.lib-item.is-added:hover { border-color: var(--line); }
.lib-item.is-added .lib-meta { color: var(--good); }
.lib-count.on { background: var(--accent); color: var(--on-accent); }
/* the Add bar sticks to the bottom while scrolling the list (above the phone tab bar) */
.lib-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 1rem;
  background: var(--panel); padding: .75rem 0; margin-top: .5rem; border-top: 1px solid var(--line);
}
.lib-bar .hint { margin: 0; }
.lib-empty .newbtn { display: inline-block; margin-top: .25rem; }
.lib-empty .lib-empty-alt { margin: 1rem 0 0; }
/* one guide in full (notes_guide_view.html) */
.guide-view-card { max-width: 760px; }
.guide-view-title { font-size: var(--fs-xl); margin: 0 0 .5rem; }
.guide-view-card .guide-outcome { font-size: var(--fs-base); margin: 0 0 1rem; }
.guide-use { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.guide-use .hint { margin: 0; }
.guide-full-steps { margin: 1.25rem 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.guide-full-steps strong { display: block; line-height: 1.4; }

/* web addresses in note items (the `linkify` filter): underlined + ↗ so they read as links */
.ext-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ext-link::after { content: " ↗"; font-size: var(--fs-xs); }
.ext-link:hover { text-decoration-thickness: 2px; }

.note-add { margin-top: 1rem; }
.note-add-row { display: flex; gap: .5rem; }
.note-add-row input { flex: 1; }
.note-add-desc { margin-top: .4rem; font-size: var(--fs-sm); }

/* ---- mobile: task-secondary is inline on desktop ----------------------- */
.task-secondary { display: contents; }

/* ---- mobile-first: phone screens (≤600px) ------------------------------ */
@media (max-width: 600px) {

  /* -- reduce main padding to reclaim horizontal space ------------------- */
  main { padding: 1rem; }
  .card { padding: 1rem; }

  /* -- bottom tab bar ---------------------------------------------------- */
  header { flex-wrap: nowrap; gap: .75rem; padding: .6rem 1rem; }
  header h1 { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-name { display: none; }
  .user-bar { gap: .6rem; }
  /* sub-tabs: the four views share the row equally, with their counts as
     corner bubbles (like app badges) so even a wide theme font fits, and the
     one action is a round "+" at the end. (It used to scroll sideways with
     "+ Task" pinned on top, which covered "All tasks".) */
  .subnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
  .subnav a { position: relative; white-space: nowrap; text-align: center; min-width: 0; }
  .subnav a .badge {
    position: absolute; top: -.35rem; right: -.1rem; margin: 0;
    min-width: 1.15rem; padding: 0 .3rem; font-size: var(--fs-xs); line-height: 1.15rem;
  }
  .subnav .newbtn {
    margin-left: .25rem; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); font-weight: 700; border: 1px solid var(--accent);
  }
  .subnav .newbtn-word { display: none; }
  .subnav .sub-label { display: block; overflow: hidden; text-overflow: ellipsis; }
  .subnav .sub-long { display: none; }
  .tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--panel); border-top: 1px solid var(--line);
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0; padding: 0 .25rem;
    scrollbar-width: none;          /* Firefox */
  }
  .tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  /* all seven tabs share the width equally (icon over a short label), so none
     sits off-screen; the bar can still scroll as a fallback, and base.html then
     scrolls the current tab into view */
  .tabs a {
    flex: 1 1 0; min-width: 0; padding: .45rem .1rem .4rem;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    font-size: var(--fs-xs); white-space: nowrap; border-radius: 0; text-align: center;
  }
  .tab-icon { display: block; font-size: var(--fs-lg); line-height: 1.1; }
  .tab-icon .icon { display: block; width: 1.4rem; height: 1.4rem; }
  .tab-long { display: none; }
  .tab-short { display: inline; }
  .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body { padding-bottom: 3.5rem; }            /* room for the fixed bar */

  /* -- global touch targets (≥40px) -------------------------------------- */
  .check { width: 2.5rem; height: 2.5rem; font-size: var(--fs-lg); }
  .ghost { min-height: 2.5rem; min-width: 2.5rem; padding: .45rem .6rem; font-size: var(--fs-base); }
  .lib-bar { bottom: 3.5rem; }              /* sit above the fixed tab bar */
  .lib-item { min-height: 2.75rem; }
  .lib-target { flex-basis: 100%; padding-left: 1.6rem; }
  .lib-streak { padding-left: 1.6rem; min-height: 2rem; }
  .def-target.lib-target input[type="number"] { width: 4rem; }
  .subcheck { padding: .3rem .4rem; min-width: 1.8rem; min-height: 1.8rem; font-size: var(--fs-base); }
  .linkbtn { padding: .4rem .2rem; }
  .subnav a { padding: .55rem .2rem; }
  .entry-list a { padding: .65rem .55rem; }
  .notes-list a { padding: .65rem .55rem; }

  /* -- todo: task cards -------------------------------------------------- */
  .task { flex-wrap: wrap; padding: .7rem; }
  .task-actions {
    flex-wrap: wrap; gap: .35rem; width: 100%;
    margin-top: .4rem; padding-top: .4rem;
    border-top: 1px solid var(--line);
  }
  .task-actions select { padding: .4rem .5rem; font-size: var(--fs-sm); min-width: 5rem; }
  .task-secondary { display: flex; gap: .35rem; align-items: center; margin-left: auto; }

  /* -- todo: quick-add --------------------------------------------------- */
  .quick-add select, .quick-add input[type="date"] { font-size: var(--fs-sm); padding: .4rem .5rem; }

  /* -- todo: subnav ------------------------------------------------------ */
  .subnav { gap: .15rem; }

  /* -- calendar: tighter grid cells -------------------------------------- */
  .cal-cell { padding: .25rem; min-height: 3rem; }
  .cal-daynum { font-size: var(--fs-xs); }
  .cal-marks { font-size: var(--fs-xs); gap: .15rem; }
  .cal-grid { --g: .2rem; }
  .cal-dow { gap: .2rem; }
  .cal-nav .cal-title { min-width: auto; font-size: var(--fs-sm); }
  .cal-nav a { padding: .4rem .5rem; }
  .cal-reschedule input[type="date"] { font-size: var(--fs-sm); padding: .35rem .4rem; }

  /* -- habits manage: stacked card layout -------------------------------- */
  .def-row {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem 0;
  }
  .def-row.def-head { display: none; }
  /* Show per-field labels via data-label when the column headers are gone */
  .def-row [data-label]::before {
    content: attr(data-label);
    display: block; font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); margin-bottom: .15rem;
  }
  .def-target { flex-wrap: wrap; gap: .35rem; }
  .def-target input[type="number"] { width: 5rem; }
  .def-active { flex-direction: row; gap: .5rem; align-items: center; }
  .def-active::before { align-self: center; margin-bottom: 0; }
  .def-actions { flex-direction: row; gap: .5rem; padding-top: .25rem; }

  /* -- card-head: wrap on narrow screens --------------------------------- */
  .card-head { flex-wrap: wrap; gap: .5rem; }
  /* its actions wrap too, and a date jump (Habits, Journal…) takes a line of
     its own that can shrink — wide theme fonts pushed "Go" off the screen */
  .card-head-actions { flex-wrap: wrap; row-gap: .5rem; max-width: 100%; }
  .card-head-actions .journal-date { flex: 1 1 100%; }
  .card-head-actions .journal-date input[type="date"] { flex: 1 1 auto; min-width: 0; }
}

/* -- Targets (performance goals). Prefixed tgt- so they don't collide with
      the Habits frequency-targets card, which owns .target-* ------------- */
.tgt-summary { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 1rem; }
.tgt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.tgt-row a {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; align-items: center;
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); color: var(--text); text-decoration: none;
}
.tgt-row a:hover { border-color: var(--accent); }
.tgt-name { font-weight: 600; }
.tgt-cat {
  font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .05rem .5rem; justify-self: end;
}
.tgt-cond { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }
.tgt-bar {
  grid-column: 1 / -1; display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; height: .5rem; overflow: hidden;
}
.tgt-bar-lg { height: .65rem; margin: .25rem 0 1rem; background: var(--bg); }
.tgt-fill { display: block; height: 100%; background: var(--muted); }
.tgt-row.is-close .tgt-fill { background: var(--warn); }
.tgt-row.is-achieved .tgt-fill, .tgt-bar.is-achieved .tgt-fill { background: var(--accent); }
.tgt-meta { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }
.tgt-late { color: var(--danger); }

.tgt-back { margin: 0 0 .75rem; font-size: var(--fs-sm); }
.tgt-back a { text-decoration: none; }
.tgt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1.25rem; margin: 0 0 1rem; }
.tgt-facts dt { color: var(--muted); font-size: var(--fs-sm); }
.tgt-facts dd { margin: .1rem 0 0; }
.tgt-facts .muted, .tgt-att-note { color: var(--muted); }

.tgt-chart { width: 100%; height: auto; display: block; margin-top: .5rem; }
.tgt-axis { stroke: var(--line); stroke-width: 1; }
.tgt-tick { fill: var(--muted); font-size: 11px; }
.tgt-goal { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 6 5; }
.tgt-goal-label { fill: var(--warn); font-size: 11px; }
.tgt-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.tgt-dot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.tgt-dot.is-best { fill: var(--accent); }
.tgt-dot.is-met { stroke: var(--warn); }

.tgt-log { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.tgt-log input[type="date"] { width: auto; }
.tgt-log-value { flex: 0 1 11rem; }
.tgt-log-note { flex: 1 1 12rem; }
.tgt-attempts { list-style: none; margin: 0; padding: 0; }
.tgt-attempts li {
  display: flex; gap: .75rem; align-items: center; padding: .45rem 0;
  border-top: 1px solid var(--line); font-size: var(--fs-base);
}
.tgt-att-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.tgt-att-value { font-variant-numeric: tabular-nums; }
.tgt-att-note { flex: 1; font-size: var(--fs-sm); }
.tgt-attempts .is-met .tgt-att-value { color: var(--warn); }
.tgt-empty { color: var(--muted); font-style: italic; }

.tgt-form-card { max-width: 720px; margin: 0 auto; }
.tgt-form { display: flex; flex-direction: column; gap: .9rem; }
.tgt-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: var(--fs-sm); }
.tgt-form-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.tgt-form-row > label { flex: 1 1 10rem; }
.tgt-form select { width: 100%; }
.tgt-form [hidden] { display: none; }
.hint-inline { font-size: var(--fs-sm); opacity: .8; }
.tgt-delete { margin-top: 1.25rem; text-align: right; }

@media (max-width: 600px) {
  .tgt-log input[type="date"], .tgt-log-value, .tgt-log-note, .tgt-log button { flex: 1 1 100%; }
  .tgt-attempts li { flex-wrap: wrap; gap: .25rem .75rem; }
  .tgt-att-note { flex-basis: 100%; order: 5; }
}

/* ---- Insights (charts over Todo / Habits / Targets) ----------------------
   Prefixed ins-. Every mark sets --c from a theme token and the shape decides
   whether that's a fill (SVG) or a background (HTML swatch), so one class
   colours both the chart and its legend key. Habits use one hue (--good) as a
   light→dark ramp mixed into the panel; Todo statuses reuse the colours the
   Todo pages already give them (in progress = accent, blocked = danger). */
.ins-section {
  margin: 1.75rem 0 .75rem; font-size: var(--fs-sm); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.ins-card { margin-bottom: 1.25rem; }
.ins-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; }
.ins-card-head h2 { margin: 0; }
.ins-kpi { color: var(--muted); font-size: var(--fs-sm); }
.ins-kpi strong { color: var(--text); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ins-delta { margin-left: .4rem; }
.ins-chart { width: 100%; height: auto; display: block; }
.ins-narrow { display: none; }
.ins-hm {
  display: grid; grid-template-columns: 2.25rem repeat(var(--weeks), minmax(0, 1fr));
  gap: 3px; max-width: 760px;
}
.ins-hm-month, .ins-hm-day { font-size: var(--fs-xs); color: var(--muted); line-height: 1; white-space: nowrap; }
.ins-hm-month { align-self: end; padding-bottom: 2px; }
.ins-hm-day { align-self: center; }
.ins-hm-cell { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--c); }
.ins-hm-cell.is-today, .ins-hm-cell:hover { outline: 1.5px solid var(--text); outline-offset: -1px; }
.ins-tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ins-axis { stroke: var(--line); stroke-width: 1; }
.ins-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.ins-hit, .ins-hitbar { fill: transparent; cursor: default; }
.ins-hitbar:hover { fill: color-mix(in srgb, var(--text) 6%, transparent); }

/* legend keys: a swatch picks up its mark's --c */
.ins-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .75rem; color: var(--muted); font-size: var(--fs-xs); }
.ins-key { display: inline-flex; align-items: center; gap: .3rem; }
.ins-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.ins-sw-dot { border-radius: 50%; --c: var(--accent); }
.ins-sw-line { height: 2px; width: 16px; border-radius: 1px; --c: var(--accent); }
.ins-sw-goal { height: 0; width: 16px; border-top: 2px dashed var(--warn); background: none; border-radius: 0; }
.ins-note { margin-left: auto; }

/* habits: heatmap ramp */
.ins-heat { --c: color-mix(in srgb, var(--good) 8%, var(--panel)); }
.ins-heat.lv-na { --c: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ins-heat.lv-1 { --c: color-mix(in srgb, var(--good) 30%, var(--panel)); }
.ins-heat.lv-2 { --c: color-mix(in srgb, var(--good) 52%, var(--panel)); }
.ins-heat.lv-3 { --c: color-mix(in srgb, var(--good) 76%, var(--panel)); }
.ins-heat.lv-4 { --c: var(--good); }

/* habits: per-habit matrix */
.ins-matrix { display: flex; flex-direction: column; gap: .35rem; }
.ins-mrow { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3rem 3rem; gap: .75rem; align-items: center; }
.ins-mhead { color: var(--muted); font-size: var(--fs-xs); }
.ins-mhead span:nth-child(n+3), .ins-mrate, .ins-mstreak { text-align: right; font-variant-numeric: tabular-nums; }
.ins-mlabel { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-mcells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; max-width: 30rem; }
.ins-mcell { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--c); }
.ins-mcell.is-on { --c: var(--good); }
.ins-mcell.is-off { --c: color-mix(in srgb, var(--danger) 35%, var(--panel)); }
.ins-mcell.is-na { --c: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ins-mcells .ins-mcell:hover { outline: 1.5px solid var(--text); }
.ins-mrate { font-size: var(--fs-sm); }
.ins-mstreak { font-size: var(--fs-sm); color: var(--muted); }
.ins-mstreak.is-live { color: var(--text); font-weight: 600; }

/* 0-10 ratings */
.ins-dot { fill: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
.ins-avg { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* todo */
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.ins-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem;
}
.ins-tile strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.ins-tile small { font-size: var(--fs-sm); color: var(--muted); margin-left: .1rem; }
.ins-tile span { color: var(--muted); font-size: var(--fs-xs); }
.ins-tile.is-bad strong { color: var(--danger); }
.ins-bar { fill: var(--c); }
.ins-bar.is-added { --c: color-mix(in srgb, var(--muted) 55%, var(--panel)); }
.ins-bar.is-done { --c: var(--accent); }
.ins-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1.25rem; }
.ins-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; height: 9rem; }
.ins-wcol { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ins-wn { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ins-wtrack { flex: 1; width: 100%; max-width: 1.75rem; display: flex; align-items: flex-end; }
.ins-wbar { display: block; width: 100%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.ins-wcol:hover .ins-wbar { background: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.ins-wl { font-size: var(--fs-xs); color: var(--muted); }
.ins-projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ins-projects li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; gap: .75rem; align-items: center; font-size: var(--fs-sm); }
.ins-pname { display: flex; align-items: center; gap: .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ins-pdot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.ins-ptrack { display: flex; gap: 2px; height: .7rem; }
.ins-pseg { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.ins-pseg.is-in_progress { --c: var(--accent); }
.ins-pseg.is-todo { --c: color-mix(in srgb, var(--muted) 55%, var(--panel)); }
.ins-pseg.is-blocked { --c: var(--danger); }
.ins-sw.ins-pseg { height: 11px; }
.ins-pn { font-variant-numeric: tabular-nums; text-align: right; }
.ins-pn em { font-style: normal; color: var(--danger); font-size: var(--fs-xs); margin-left: .25rem; }

/* targets */
.ins-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ins-tcard { display: flex; gap: 1rem; align-items: center; color: var(--text); text-decoration: none; padding: 1rem; }
.ins-tcard:hover { border-color: var(--accent); }
.ins-ring { flex: none; width: 64px; height: 64px; }
.ins-ring-track { fill: none; stroke: var(--bg); stroke-width: 6; }
.ins-ring-fill { fill: none; stroke: var(--muted); stroke-width: 6; stroke-linecap: round; }
.ins-tcard.is-close .ins-ring-fill { stroke: var(--warn); }
.ins-tcard.is-achieved .ins-ring-fill { stroke: var(--accent); }
.ins-ring-text { fill: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ins-tbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ins-tname { font-weight: 600; }
.ins-tmeta { color: var(--muted); font-size: var(--fs-xs); }
.ins-tmeta strong { color: var(--text); }
.ins-spark { width: 100%; height: auto; margin-top: .3rem; overflow: visible; }
.ins-goal { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ins-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ins-spark-dot { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ins-spark-dot.is-best { fill: var(--accent); }

.ins-tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 16rem;
  background: var(--text); color: var(--bg); font-size: var(--fs-xs);
  padding: .35rem .55rem; border-radius: var(--r-sm);
}
.ins-tip[hidden] { display: none; }

@media (max-width: 600px) {
  .ins-hm { gap: 2px; grid-template-columns: 1.9rem repeat(var(--weeks), minmax(0, 1fr)); }
  .ins-hm-cell { border-radius: 2px; }
  .ins-wide { display: none; }
  .ins-narrow { display: block; }
  .ins-narrow .ins-tick { font-size: 14px; }
  .ins-tiles { grid-template-columns: 1fr 1fr; }
  .ins-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* name · rate · streak on one line, the day squares full width beneath */
  .ins-matrix { gap: .7rem; }
  .ins-mrow { grid-template-columns: 1fr auto auto; gap: .3rem .75rem; }
  .ins-mlabel { grid-area: 1 / 1; }
  .ins-mrate { grid-area: 1 / 2; }
  .ins-mstreak { grid-area: 1 / 3; }
  .ins-mcells { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .ins-mhead { display: none; }
  .ins-note { margin-left: 0; }
  .ins-projects li { grid-template-columns: 1fr auto; }
  .ins-ptrack { grid-column: 1 / -1; order: 3; }
}

/* ---- training: interval timer (/training/timer) ------------------------ */
.tmr-page { display: flex; flex-direction: column; gap: 1.25rem; max-width: 720px; margin: 0 auto; }
/* the face takes its colour from the phase: work = good, rest = warn, set
   rest / done = accent, get ready = muted — all theme tokens */
.tmr-face { --c: var(--muted); text-align: center; border-color: var(--c); transition: background .3s, border-color .3s; }
.tmr-face[data-phase="work"] { --c: var(--good); }
.tmr-face[data-phase="rest"] { --c: var(--warn); }
.tmr-face[data-phase="setrest"], .tmr-face[data-phase="done"] { --c: var(--accent); }
.tmr-face:not([data-phase="idle"]) { background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.tmr-face .card-head { text-align: left; }
.tmr-phase { margin: .5rem 0 0; font-size: var(--fs-xl); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c); }
/* the one display size outside the type scale: it's read from across a room */
.tmr-clock { margin: 0; font-size: clamp(5rem, 24vw, 10rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tmr-face.is-paused .tmr-clock { opacity: .45; }
.tmr-bar { height: .6rem; background: var(--bg); border-radius: 999px; overflow: hidden; margin: .75rem 0; }
.tmr-bar span { display: block; height: 100%; width: 0; background: var(--c); }
.tmr-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0 0 1rem; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tmr-meta span:empty { display: none; }
.tmr-controls { display: flex; justify-content: center; gap: .75rem; }
.tmr-controls button { min-width: 8rem; min-height: 3rem; font-size: var(--fs-lg); }
.tmr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem 1rem; align-items: end; }
.tmr-form label:not(.settings-check) { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: var(--fs-sm); }
.tmr-unit { font-size: var(--fs-xs); }  /* inline after the label text */
.tmr-form input:disabled { opacity: .5; }
.tmr-sound { min-height: 2.6rem; }

/* ---- settings + admin -------------------------------------------------- */
.info-btn.on { color: var(--accent); border-color: var(--accent); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.settings-tabs, .settings-themes, .settings-form { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.settings-tabs button, .settings-form button { margin-top: .5rem; }
.settings-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; min-height: 2rem; }
.settings-check input { width: auto; margin: 0; }
/* Settings → Theme: each name in its theme's face (inline font-family);
   no theme's own label styling (caps, outlines) should leak in */
.settings-themes .theme-name { font-weight: 700; font-synthesis: none; /* single-weight faces (VT323, Creepster) stay as drawn, not smeared bold */
  line-height: 1.2; text-transform: none; letter-spacing: 0;
  -webkit-text-stroke: 0; text-shadow: none; }
/* Settings → Theme: each name is a little swatch of its theme. These are the
   one place a rule names another theme's colours outright — they preview a
   theme that isn't the active one, so its tokens aren't on the page. */
.settings-themes .theme-name {
  display: inline-block; padding: .2rem .65rem; border: 1px solid transparent; border-radius: var(--r-md);
}
.theme-name[data-t="dark"]       { background: #14161a; color: #6ea8fe; border-color: #2c313a; }
.theme-name[data-t="paper"]      { background: #f6c945; color: #1d1b18; border: 2px solid #1d1b18; border-radius: 999px; box-shadow: 2px 2px 0 #1d1b18; }
.theme-name[data-t="sage"]       { background: #3d6b4f; color: #ffffff; border-radius: 999px; }
.theme-name[data-t="blush"]      { background: #f8dbe3; color: #ad3a5c; border: 2px dashed #e7a9ba; border-radius: 999px; }
.theme-name[data-t="midnight"]   { background: #0b1026; color: #4fd1c5; border-color: rgba(79, 209, 197, .55); box-shadow: 0 0 10px rgba(79, 209, 197, .35); }
.theme-name[data-t="terminal"]   { background: #000000; color: #7cff8a; border: 3px double #2f7a3a; border-radius: 0; }
.theme-name[data-t="hyperspace"] { background: #000000; color: #ffe81f; border-color: #27324a; border-radius: 2px;
                                   box-shadow: inset 0 -2px 0 #5fb0ff, 0 2px 8px rgba(95, 176, 255, .35); text-shadow: 0 0 6px rgba(255, 232, 31, .5) !important; }
.theme-name[data-t="mission"]    { background: #1f1d18; color: #ffb347; border: 3px outset #b8b09a; border-radius: 4px; }
.theme-name[data-t="synthwave"]  { background: linear-gradient(135deg, #1a0b2e, #3a0f4f); color: #ff4fd8; border-color: #ff4fd8; border-radius: 6px;
                                   text-shadow: 0 0 6px rgba(255, 79, 216, .6) !important; }
.theme-name[data-t="gameboy"]    { background: #9bbc0f; color: #0f380f; border: 3px solid #306230; border-radius: 0; }
.theme-name[data-t="pipboy"]     { background: #071407; color: #4dff9a; border-color: #1f6b35; border-radius: 12px; text-shadow: 0 0 6px rgba(77, 255, 154, .5) !important; }
.theme-name[data-t="arcade"]     { background: #000000; color: #ffe600; border: 3px double #2b3fd6; border-radius: 8px; }
.theme-name[data-t="blueprint"]  { color: #ffffff; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 2px;
                                   /* the colour goes in the last layer, or the whole declaration is dropped */
                                   background: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 8px 8px,
                                               linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 8px 8px, #1d4e89; }
.theme-name[data-t="comic"]      { background: #ffe14d; color: #111111; border: 2.5px solid #111111; border-radius: 4px; box-shadow: 3px 3px 0 #111111; transform: rotate(-2deg); }
.theme-name[data-t="toybox"]     { background: #e3000b; color: #ffffff; border-bottom: 4px solid #a00008; border-radius: 8px; }
.theme-name[data-t="haunted"]    { background: #23152f; color: #ff9a3c; border: 1.5px solid #5a3f74; border-radius: 14px 6px 12px 5px;
                                   text-shadow: 0 0 8px rgba(255, 154, 60, .5) !important; }
.theme-name[data-t="deepsea"]    { background: linear-gradient(180deg, #0a2a42, #04192b); color: #4ff0d8; border-color: #17496b; border-radius: 999px;
                                   box-shadow: 0 0 10px rgba(79, 240, 216, .3); }
.theme-name[data-t="gta"]        { background: #0b0b0f; color: #ffc72c; border-radius: 0; border-bottom: 3px solid #ff3c8e;
                                   -webkit-text-stroke: 3px #000000 !important; paint-order: stroke fill; text-shadow: 2px 2px 0 #000000 !important; }
.theme-name[data-t="fortnite"]   { background: linear-gradient(180deg, #2a7ae0, #3a1a7a); color: #ffe23f; border-top: 3px solid #c55bff; border-radius: 4px;
                                   font-style: italic; text-transform: uppercase !important; text-shadow: 2px 2px 0 rgba(8, 10, 40, .7) !important; }
.theme-name[data-t="minecraft"]  { color: #ffffff; border: 3px solid; border-color: #6e6e6e #1c1c1c #1c1c1c #6e6e6e; border-radius: 0;
                                   background: linear-gradient(180deg, #5d9e36 0 5px, #7a5436 5px); text-shadow: 2px 2px 0 #3f3f3f !important; }

.settings-form label { display: flex; flex-direction: column; gap: .25rem; width: 100%; color: var(--muted); font-size: var(--fs-sm); }
.settings-form .hint { margin: 0; }
/* a tickbox in a settings form (Sounds) stays beside its label, not stacked like the password fields */
.settings-form label.settings-check { flex-direction: row; width: auto; color: var(--text); font-size: var(--fs-base); }
.settings-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.settings-preview .hint { margin: 0; }
.flash { padding: .7rem 1rem; border-radius: var(--r-md); border: 1px solid var(--good); background: var(--good-bg); color: var(--text); margin: 0 0 1rem; }
.flash.is-error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-soft); }
.flash p { margin: .4rem 0 0; }
.admin-pw { font-size: var(--fs-lg); user-select: all; }
.admin-new, .admin-user { margin-bottom: 1rem; }
.admin-user-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.admin-user-head .muted { color: var(--muted); font-size: var(--fs-sm); }
.admin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: .75rem; }
.admin-form label:not(.settings-check) { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: var(--fs-sm); flex: 1 1 10rem; }
.admin-form .hint { flex-basis: 100%; margin: 0; }
.admin-delete summary { cursor: pointer; color: var(--danger); font-size: var(--fs-sm); }
.admin-delete[open] summary { margin-bottom: .75rem; }
button.danger-btn { background: var(--danger-bg); color: var(--danger-soft); border: 1px solid var(--danger); }

/* ==== theme: Paper ======================================================
   Warm cream paper with a faint dot grid, ink outlines with chunky offset
   shadows, mustard pill labels and a typewriter face for labels. Every rule
   is scoped to [data-theme="paper"], so Dark is untouched. Fonts are system
   web fonts (auth.THEME_FONTS): Karla body, JetBrains Mono for the typewriter
   labels. No serifs: Mark doesn't like them, in any theme. */
:root[data-theme="paper"] {
  /* icons: thick ink outlines with mustard panels, like stickers */
  --icon-stroke: 2;
  --icon-fill: var(--highlight);
  --icon-fill-op: 1;
  --icon-fill-on: var(--panel);
  --icon-fill-on-op: 1;
  color-scheme: light;
  --bg: #faf6ee;
  --panel: #fffdf8;
  --line: #d8cfbd;          /* soft dividers; strong outlines use --ink */
  --ink: #1d1b18;
  --text: #1d1b18;
  --muted: #6f6a60;
  --accent: #5b3a9e;        /* purple: links, ticks, "done" */
  --highlight: #f6c945;     /* mustard: buttons, active tab, pill labels */
  --on-accent: #ffffff;     /* on purple; buttons use ink on mustard instead */
  --danger: #b4231b;
  --danger-soft: #8f1b14;
  --danger-bg: #f9d3cd;
  --warn: #92600f;
  --good: #2f7d4a;
  --good-bg: #dcefdf;
  --accent-bg: #e8e0f5;
  --pri-hi: #c2410c;
  --pri-hi-line: #f0c3a8;
  --pri-mid: #a16207;
  --missed: #e3a49c;
  --mark: rgba(246, 201, 69, .55);
  --backdrop: rgba(29, 27, 24, .45);
  --font-body: "Karla", "Avenir Next", system-ui, sans-serif;
  --font-type: "JetBrains Mono", "SF Mono", Menlo, Consolas, ui-monospace, monospace;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
}
[data-theme="paper"] body {
  background-color: var(--bg);
  background-image: radial-gradient(#e4dccb 1px, transparent 1.2px);
  background-size: 18px 18px;
}
[data-theme="paper"] select { font: inherit; }

/* headings + labels in the typewriter face */
[data-theme="paper"] header { border-bottom: 2px solid var(--ink); background: var(--bg); }
[data-theme="paper"] header h1 { font-family: var(--font-type); font-size: 1.3rem; font-weight: 700; letter-spacing: 0; }
[data-theme="paper"] main h1, [data-theme="paper"] main h2 {
  font-family: var(--font-type); color: var(--ink); font-weight: 700;
}
[data-theme="paper"] .card h2 {
  font-family: var(--font-type); color: var(--ink); font-size: 1.15rem; font-weight: 700;
}

/* cards: ink outline + offset shadow — the sticker look */
[data-theme="paper"] .card,
[data-theme="paper"] .help-card,
[data-theme="paper"] .info-modal { border: 2px solid var(--ink); box-shadow: var(--shadow); }

/* pill labels: section heads become mustard tags */
[data-theme="paper"] .habit-group h3,
[data-theme="paper"] .cal-section h4,
[data-theme="paper"] .status-head {
  display: inline-flex; align-items: center; gap: .4rem; width: auto;
  background: var(--highlight); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm);
  padding: .1rem .5rem; font-family: var(--font-type); font-weight: 700; letter-spacing: .5px;
}
[data-theme="paper"] .chip-rel,
[data-theme="paper"] .note-type-badge {
  background: var(--highlight); color: var(--ink); border: 1.5px solid var(--ink);
  font-family: var(--font-type);
}

/* tabs: the active one is a mustard pill */
[data-theme="paper"] .tabs a { font-family: var(--font-type); color: var(--muted); border-radius: 999px; }
[data-theme="paper"] .tabs a:hover { background: transparent; color: var(--ink); }
[data-theme="paper"] .tabs a.on {
  background: var(--highlight); color: var(--ink); border: 1.5px solid var(--ink); font-weight: 700;
}
[data-theme="paper"] .subnav a.on { background: var(--highlight); color: var(--ink); border: 1.5px solid var(--ink); }

/* buttons: mustard, ink outline, press-down shadow. The icon/link-style
   buttons keep their own flat look. */
[data-theme="paper"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary) {
  background: var(--highlight); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
  font-family: var(--font-type);
}
[data-theme="paper"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary):active {
  transform: translate(2px, 2px); box-shadow: none;
}
[data-theme="paper"] .info-close:hover { background: var(--highlight); }

/* form controls: cream fields with an ink edge */
[data-theme="paper"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="paper"] textarea,
[data-theme="paper"] select { background: #fff; border: 1.5px solid var(--ink); }

/* square tick boxes instead of round */
[data-theme="paper"] .check { border: 2px solid var(--ink); border-radius: 6px; color: var(--accent); }
[data-theme="paper"] .habit-check input,
[data-theme="paper"] .note-item-check { accent-color: var(--accent); }

/* rows inside cards: just a soft edge on the paper */
[data-theme="paper"] .task,
[data-theme="paper"] .habit-check,
[data-theme="paper"] .habit-scale,
[data-theme="paper"] .note-item,
[data-theme="paper"] .tgt-row a { background: var(--panel); }
[data-theme="paper"] .habit-check.is-on { border-color: var(--accent); background: var(--accent-bg); }
[data-theme="paper"] .cal-cell.today { border: 2px solid var(--ink); }
[data-theme="paper"] .cal-cell.today .cal-daynum {
  background: var(--highlight); color: var(--ink); border-radius: 999px; padding: 0 .35rem; align-self: flex-start;
}
[data-theme="paper"] .cal-cell.sel { background: var(--accent-bg); }

@media (max-width: 600px) {
  [data-theme="paper"] .tabs { background: var(--panel); border-top: 2px solid var(--ink); padding: .35rem .25rem; }
  [data-theme="paper"] .tabs a { border-radius: 999px; padding: .4rem .8rem; margin: 0 .1rem; }
}

/* Themes below each load their own web fonts (auth.THEME_FONTS → a Google
   Fonts <link> in base.html, only for the active theme). Every font stack
   ends in system fallbacks so a blocked font CDN degrades, not breaks. */

/* ==== theme: Sage ========================================================
   A calm botanical journal: soft geometric headings (Outfit) over a clean sans
   (DM Sans), a misty two-tone wash behind the page, borderless cards that
   float on diffuse shadows, roomy padding, labels trailed by a hairline. */
:root[data-theme="sage"] {
  /* icons: fine lines on soft green panels */
  --icon-stroke: 1.5;
  --icon-fill: var(--accent-bg);
  --icon-fill-op: 1;
  --icon-fill-on: var(--on-accent);
  --icon-fill-on-op: .3;
  color-scheme: light;
  --bg: #eef2ec;
  --panel: #ffffff;
  --line: #d5ded6;
  --text: #1f2d24;
  --muted: #5b6a60;
  --accent: #3d6b4f;
  --on-accent: #ffffff;
  --danger: #b03a2e;
  --danger-soft: #8c2a20;
  --danger-bg: #f6d9d4;
  --warn: #8a5f0e;
  --good: #2f7d4a;
  --good-bg: #d8ecdc;
  --accent-bg: #dcebe0;
  --pri-hi: #b5482a;
  --pri-hi-line: #ebc6b8;
  --pri-mid: #92700f;
  --missed: #e2b1a9;
  --mark: rgba(168, 210, 120, .5);
  --backdrop: rgba(31, 45, 36, .35);
  --font-body: "DM Sans", "Avenir Next", system-ui, sans-serif;
  --font-display: "Outfit", "Avenir Next", system-ui, sans-serif;
}
[data-theme="sage"] body {
  background:
    radial-gradient(55rem 40rem at -10% -15%, #d6e7d6 0%, transparent 60%),
    radial-gradient(50rem 40rem at 110% 105%, #e4ecd6 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="sage"] select { font: inherit; }
[data-theme="sage"] main { padding-top: 2rem; }
/* no backdrop-filter on header: it would become the containing block for
   the phone tab bar (position: fixed inside it) and trap the bar up top */
[data-theme="sage"] header { background: rgba(255, 255, 255, .8); border-bottom: 1px solid var(--line); }
[data-theme="sage"] header h1 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: 0; }
[data-theme="sage"] main h1, [data-theme="sage"] main h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
[data-theme="sage"] .card h2 { font-size: 1.25rem; }
[data-theme="sage"] .card,
[data-theme="sage"] .help-card,
[data-theme="sage"] .info-modal {
  border-color: transparent; border-radius: 22px; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(31, 45, 36, .05), 0 10px 30px rgba(31, 45, 36, .08);
}
[data-theme="sage"] .habits-layout, [data-theme="sage"] .grid { gap: 1.75rem; }
/* labels: small tracked caps in green, trailed by a hairline to the edge */
[data-theme="sage"] .habit-group h3,
[data-theme="sage"] .cal-section h4,
[data-theme="sage"] .status-head {
  display: flex; align-items: center; gap: .6rem;
  color: var(--accent); font-size: var(--fs-xs); letter-spacing: .14em; font-weight: 700;
}
[data-theme="sage"] .habit-group h3::after,
[data-theme="sage"] .cal-section h4::after,
[data-theme="sage"] .status-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
[data-theme="sage"] .habit-check,
[data-theme="sage"] .habit-scale,
[data-theme="sage"] .task,
[data-theme="sage"] .note-item { background: #f5f8f3; border-color: transparent; border-radius: 14px; }
[data-theme="sage"] .habit-check.is-on { background: var(--accent-bg); border-color: transparent; }
[data-theme="sage"] .tabs a.on {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: 999px;
  box-shadow: 0 4px 12px rgba(61, 107, 79, .28);
}
[data-theme="sage"] .subnav a.on { background: var(--accent-bg); color: var(--accent); border-radius: 999px; }
[data-theme="sage"] .chip-rel { background: var(--accent-bg); color: var(--accent); }
[data-theme="sage"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary) {
  border-radius: 999px; padding: .6rem 1.2rem; box-shadow: 0 4px 12px rgba(61, 107, 79, .25);
}
[data-theme="sage"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="sage"] textarea,
[data-theme="sage"] select { background: #f7faf6; border-color: var(--line); border-radius: 12px; }
[data-theme="sage"] .cal-cell { border-color: transparent; background: #f5f8f3; border-radius: 12px; }
[data-theme="sage"] .cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }

/* ==== theme: Blush =======================================================
   Scrapbook stationery: handwritten headings (Caveat) over a rounded sans
   (Quicksand), a gingham tablecloth behind the page, cards with a stitched
   dashed edge, washi-tape section labels, springy "candy" buttons. */
:root[data-theme="blush"] {
  /* icons: rounded, pink panels; the current one tilts (see below) */
  --icon-stroke: 2;
  --icon-fill: var(--accent-bg);
  --icon-fill-op: 1;
  --icon-fill-on: var(--panel);
  --icon-fill-on-op: 1;
  color-scheme: light;
  --bg: #fbf1f1;
  --panel: #fffafa;
  --line: #efd9de;
  --text: #3a2230;
  --muted: #7a5b68;
  --accent: #ad3a5c;
  --on-accent: #ffffff;
  --danger: #b4231b;
  --danger-soft: #8f1b14;
  --danger-bg: #f9d3cd;
  --warn: #8f5a12;
  --good: #3b7d55;
  --good-bg: #dcefe2;
  --accent-bg: #f8dbe3;
  --pri-hi: #c2410c;
  --pri-hi-line: #f0c3a8;
  --pri-mid: #a16207;
  --missed: #e7aab8;
  --mark: rgba(240, 160, 185, .45);
  --backdrop: rgba(58, 34, 48, .35);
  --font-body: "Quicksand", "Avenir Next", system-ui, sans-serif;
  --font-display: "Caveat", "Noteworthy", "Segoe Print", cursive;
}
[data-theme="blush"] body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(232, 150, 175, .10) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg, rgba(232, 150, 175, .10) 0 16px, transparent 16px 32px);
  font-weight: 500;
}
[data-theme="blush"] select { font: inherit; }
[data-theme="blush"] header { background: var(--panel); border-bottom: 2px dashed #ebb5c4; }
[data-theme="blush"] header h1 { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--accent); letter-spacing: 0; }
[data-theme="blush"] header h1 a { color: inherit; }
[data-theme="blush"] main h1, [data-theme="blush"] main h2 {
  font-family: var(--font-display); color: var(--accent); font-size: 2.2rem; font-weight: 700; line-height: 1.05;
}
[data-theme="blush"] .card h2 { color: var(--text); font-size: 1.75rem; }
/* cards: white with a stitched dashed seam just inside the edge */
[data-theme="blush"] .card,
[data-theme="blush"] .help-card,
[data-theme="blush"] .info-modal {
  border: none; border-radius: 22px; padding: 1.5rem;
  outline: 2px dashed #f0bfcc; outline-offset: -9px;
  box-shadow: 0 8px 24px rgba(194, 77, 110, .12);
}
/* labels: a strip of washi tape, slightly askew */
[data-theme="blush"] .habit-group h3,
[data-theme="blush"] .cal-section h4,
[data-theme="blush"] .status-head {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #6b2a43; font-weight: 700; letter-spacing: .08em;
  padding: .2rem .9rem; border-radius: 2px; transform: rotate(-1.5deg);
  background-color: rgba(240, 160, 185, .55);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .4) 0 5px, transparent 5px 10px);
  box-shadow: 0 1px 2px rgba(58, 34, 48, .1);
}
[data-theme="blush"] .habit-group:nth-child(even) h3 { transform: rotate(1.2deg); background-color: rgba(190, 170, 235, .5); color: #46306b; }
[data-theme="blush"] .habit-check,
[data-theme="blush"] .habit-scale,
[data-theme="blush"] .task,
[data-theme="blush"] .note-item { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; }
[data-theme="blush"] .habit-check.is-on { background: var(--accent-bg); border-color: var(--accent); }
[data-theme="blush"] .tabs a { font-weight: 600; }
[data-theme="blush"] .tabs a.on { background: var(--accent-bg); color: var(--accent); border-color: transparent; border-radius: 999px; font-weight: 700; }
[data-theme="blush"] .subnav a.on { background: var(--accent-bg); color: var(--accent); border-radius: 999px; }
[data-theme="blush"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary) {
  border-radius: 999px; padding: .55rem 1.15rem; box-shadow: 0 3px 0 #9c3654;
}
[data-theme="blush"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary):active { transform: translateY(2px); box-shadow: 0 1px 0 #9c3654; }
[data-theme="blush"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="blush"] textarea,
[data-theme="blush"] select { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; }
[data-theme="blush"] .cal-cell { background: #fff; border-radius: 14px; }
[data-theme="blush"] .cal-cell.today { border: 2px dashed var(--accent); }

/* ==== theme: Midnight ====================================================
   Frosted glass under a night sky: geometric display face (Space Grotesk)
   over Inter, a tiled starfield on a navy gradient, translucent blurred
   cards, a teal-to-violet gradient title, glowing dot labels and buttons. */
:root[data-theme="midnight"] {
  /* icons: hairline teal glass; the current one glows (see below) */
  --icon-stroke: 1.5;
  --icon-fill: var(--accent);
  --icon-fill-op: .12;
  --icon-fill-on-op: .3;
  --bg: #0b1026;
  --panel: #18213f;
  --line: #2a3560;
  --text: #e8ecf8;
  --muted: #8f9bc2;
  --accent: #4fd1c5;
  --on-accent: #08121f;
  --danger: #ff8a80;
  --danger-soft: #ffc1bb;
  --danger-bg: #4a1f33;
  --warn: #ffb86b;
  --good: #7be0a6;
  --good-bg: #173a35;
  --accent-bg: #15384a;
  --pri-hi: #ff8a65;
  --pri-hi-line: #5a2c2a;
  --pri-mid: #ffcf6b;
  --missed: #6e2f4a;
  --mark: rgba(79, 209, 197, .3);
  --backdrop: rgba(5, 8, 20, .7);
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --glass: rgba(24, 33, 63, .55);
  --glass-line: rgba(255, 255, 255, .08);
}
[data-theme="midnight"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 9%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 85% 62%, rgba(180,220,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 33% 74%, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 6% 88%, rgba(200,190,255,.6) 50%, transparent 52%),
    linear-gradient(180deg, #1b2556 0%, #0b1026 65%);
  background-size: 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 100% 100%;
  background-attachment: fixed;
}
[data-theme="midnight"] select { font: inherit; }
[data-theme="midnight"] header { background: rgba(11, 16, 38, .7); border-bottom: 1px solid var(--glass-line); }
[data-theme="midnight"] header h1 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.01em; }
[data-theme="midnight"] header h1 a {
  background: linear-gradient(90deg, #4fd1c5, #9f7aea);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="midnight"] main h1, [data-theme="midnight"] main h2 {
  font-family: var(--font-display); color: var(--text); letter-spacing: -.01em; font-weight: 700;
}
[data-theme="midnight"] .card h2 { font-size: 1.15rem; }
[data-theme="midnight"] .card,
[data-theme="midnight"] .help-card,
[data-theme="midnight"] .info-modal {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 36px rgba(0, 0, 0, .45);
}
/* labels: a glowing teal dot before tracked caps */
[data-theme="midnight"] .habit-group h3,
[data-theme="midnight"] .cal-section h4,
[data-theme="midnight"] .status-head {
  display: flex; align-items: center; gap: .5rem; color: var(--accent); letter-spacing: .12em;
}
[data-theme="midnight"] .habit-group h3::before,
[data-theme="midnight"] .cal-section h4::before,
[data-theme="midnight"] .status-head::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
[data-theme="midnight"] .habit-check,
[data-theme="midnight"] .habit-scale,
[data-theme="midnight"] .task,
[data-theme="midnight"] .note-item,
[data-theme="midnight"] .cal-cell { background: rgba(255, 255, 255, .03); border-color: var(--glass-line); border-radius: 12px; }
[data-theme="midnight"] .habit-check.is-on {
  border-color: var(--accent); background: rgba(79, 209, 197, .08);
  box-shadow: 0 0 16px rgba(79, 209, 197, .18);
}
[data-theme="midnight"] .tabs a { font-family: var(--font-display); }
[data-theme="midnight"] .tabs a.on {
  color: var(--text); background: rgba(79, 209, 197, .12); border-color: rgba(79, 209, 197, .5);
  box-shadow: 0 0 14px rgba(79, 209, 197, .25);
}
[data-theme="midnight"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary) {
  background: linear-gradient(135deg, #4fd1c5, #5fb0e8); color: var(--on-accent);
  border-radius: 10px; box-shadow: 0 0 16px rgba(79, 209, 197, .3);
}
[data-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="midnight"] textarea,
[data-theme="midnight"] select { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .1); border-radius: 10px; }
[data-theme="midnight"] .cal-cell.today { border-color: var(--accent); box-shadow: 0 0 12px rgba(79, 209, 197, .25); }

/* ==== theme: Terminal ====================================================
   A green-screen CRT: pixel headings (VT323) over IBM Plex Mono, scanlines
   and a vignette, double-ruled boxes, [ BRACKETED ] labels, inverse-video
   buttons. Square corners everywhere: the one place an !important earns
   its keep, since every component sets its own radius. */
:root[data-theme="terminal"] {
  /* icons: square-ended line art, no fills */
  --icon-stroke: 2;
  --icon-cap: square;
  --icon-join: miter;
  --icon-fill-op: 0;
  --icon-fill-on-op: 0;
  --bg: #000000;
  --panel: #000000;
  --line: #1f4d26;
  --text: #7cff8a;
  --muted: #3fae4e;
  --accent: #b6ff9e;
  --on-accent: #000000;
  --danger: #ff6b5e;
  --danger-soft: #ffb0a8;
  --danger-bg: #3a0f0c;
  --warn: #ffd35b;
  --good: #7cff8a;
  --good-bg: #0f2a13;
  --accent-bg: #10301a;
  --pri-hi: #ff6b5e;
  --pri-hi-line: #4d1f1a;
  --pri-mid: #ffd35b;
  --missed: #4d1f1a;
  --mark: rgba(124, 255, 138, .3);
  --backdrop: rgba(0, 0, 0, .8);
  --font-body: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: "VT323", "IBM Plex Mono", Menlo, monospace;
}
[data-theme="terminal"] * { border-radius: 0 !important; }
[data-theme="terminal"] body {
  background: #000;
  font-size: 15px;
}
/* scanlines over everything; pointer-events: none keeps it click-through */
[data-theme="terminal"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
[data-theme="terminal"] input, [data-theme="terminal"] select,
[data-theme="terminal"] textarea { font: inherit; }
[data-theme="terminal"] header { border-bottom: 3px double var(--line); }
[data-theme="terminal"] header h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: 1; }
/* phosphor glow on the big pixel headings only: body text stays crisp
   green on pure black */
[data-theme="terminal"] header h1, [data-theme="terminal"] main h1, [data-theme="terminal"] main h2 {
  text-shadow: 0 0 6px rgba(124, 255, 138, .45);
}
[data-theme="terminal"] header h1::before { content: "> "; color: var(--muted); }
[data-theme="terminal"] header h1::after { content: "_"; animation: term-blink 1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
[data-theme="terminal"] main h1, [data-theme="terminal"] main h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1; color: var(--accent); letter-spacing: .03em;
}
[data-theme="terminal"] .card h2 { font-size: 1.55rem; }
[data-theme="terminal"] .card,
[data-theme="terminal"] .help-card,
[data-theme="terminal"] .info-modal {
  background: #000; border: 3px double var(--line);
}
[data-theme="terminal"] .habit-group h3,
[data-theme="terminal"] .cal-section h4,
[data-theme="terminal"] .status-head { color: var(--accent); letter-spacing: .1em; }
[data-theme="terminal"] .habit-group h3::before,
[data-theme="terminal"] .cal-section h4::before { content: "[ "; color: var(--muted); }
[data-theme="terminal"] .habit-group h3::after,
[data-theme="terminal"] .cal-section h4::after { content: " ]"; color: var(--muted); }
[data-theme="terminal"] .habit-check,
[data-theme="terminal"] .habit-scale,
[data-theme="terminal"] .task,
[data-theme="terminal"] .note-item,
[data-theme="terminal"] .cal-cell { background: transparent; border: 1px dashed var(--line); }
[data-theme="terminal"] .habit-check.is-on { border: 1px solid var(--text); background: #000; }
[data-theme="terminal"] .habit-check.is-on .habit-label { color: var(--accent); }
[data-theme="terminal"] .habit-check input,
[data-theme="terminal"] .note-item-check { accent-color: var(--text); }
[data-theme="terminal"] .tabs a { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; }
[data-theme="terminal"] .tabs a.on { background: var(--text); color: var(--bg); text-shadow: none; }
/* inverse-video buttons: outlined at rest, filled on hover */
[data-theme="terminal"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary) {
  background: transparent; color: var(--text); border: 1px solid var(--text);
  text-transform: uppercase; letter-spacing: .06em;
}
[data-theme="terminal"] button:not(.check, .ghost, .linkbtn, .subcheck, .secondary):hover {
  background: var(--text); color: var(--bg); text-shadow: none; filter: none;
}
[data-theme="terminal"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="terminal"] textarea,
[data-theme="terminal"] select { background: #000; border-color: var(--line); caret-color: var(--text); }
[data-theme="terminal"] .cal-cell.today { border: 1px solid var(--text); }

/* ---- shared: secondary buttons per theme ----------------------------- */
[data-theme="paper"] button.secondary {
  background: var(--panel); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm); font-family: var(--font-type);
}
[data-theme="sage"] button.secondary,
[data-theme="blush"] button.secondary { border-radius: 999px; background: var(--panel); border: 1.5px solid var(--line); }
[data-theme="midnight"] button.secondary { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); border-radius: 10px; }
[data-theme="terminal"] button.secondary { border: 1px dashed var(--line); text-transform: uppercase; }

/* ---- shared: themed bottom tab bar on phones --------------------------- */
@media (max-width: 600px) {
  [data-theme="sage"] .tabs, [data-theme="midnight"] .tabs {
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: .35rem .25rem;
  }
  [data-theme="sage"] .tabs { background: rgba(255, 255, 255, .85); }
  [data-theme="midnight"] .tabs { background: rgba(11, 16, 38, .85); border-top-color: var(--glass-line); }
  [data-theme="blush"] .tabs { background: var(--panel); border-top: 2px dashed #ebb5c4; padding: .35rem .25rem; }
  [data-theme="terminal"] .tabs { border-top: 3px double var(--line); }
  [data-theme="terminal"] header h1 { font-size: 1.4rem; }
  [data-theme="blush"] header h1 { font-size: 1.8rem; }
  [data-theme="sage"] .tabs a, [data-theme="blush"] .tabs a, [data-theme="midnight"] .tabs a {
    border-radius: 999px; padding: .45rem .85rem; margin: 0 .1rem;
  }
  [data-theme="sage"] main, [data-theme="blush"] main { padding-top: 1.25rem; }
  [data-theme="sage"] .card, [data-theme="blush"] .card { padding: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="terminal"] header h1::after { animation: none; }
}

/* ---- todo today: "Coming up" strip (next 7 days of events) ----------- */
.coming-up {
  margin-bottom: 1rem; padding: .6rem .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.coming-up-head {
  display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); text-decoration: none; margin-bottom: .35rem;
}
.coming-up ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.coming-up li a {
  display: flex; gap: .75rem; align-items: baseline; text-decoration: none; color: var(--text);
  padding: .2rem 0 .2rem .6rem; border-left: 3px solid var(--chip, var(--accent));
}
.coming-when { flex: 0 0 6.5rem; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.coming-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="paper"] .coming-up { border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
[data-theme="sage"] .coming-up { border-color: transparent; border-radius: 22px; box-shadow: 0 10px 30px rgba(31, 45, 36, .08); }
[data-theme="blush"] .coming-up { border: none; border-radius: 22px; outline: 2px dashed #f0bfcc; outline-offset: -7px; }
[data-theme="midnight"] .coming-up { background: var(--glass); border-color: var(--glass-line); border-radius: 16px; }
[data-theme="terminal"] .coming-up { background: #000; border: 3px double var(--line); }

/* ---- training (trn-) ------------------------------------------------- */
.trn-page { display: flex; flex-direction: column; gap: 1rem; }
.trn-page .card h2 { margin-bottom: .75rem; }
.trn-page .card-head h2 { margin: 0; }
.trn-btn {
  display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 600;
  padding: .55rem 1.1rem; border-radius: var(--r-md); text-decoration: none;
}
.trn-live { border-color: var(--accent); }
.trn-live-title { margin: 0 0 .25rem; font-weight: 600; font-size: var(--fs-lg); }
.trn-start, .trn-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.trn-start input[name="title"], .trn-meta input[name="title"] { flex: 1 1 12rem; }
.trn-start input[type="date"], .trn-meta input[type="date"] { width: auto; flex: 0 0 auto; }
.trn-list, .trn-ex-list, .trn-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.trn-list a, .trn-ex-list a {
  display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; text-decoration: none; color: var(--text);
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
}
.trn-list a:hover, .trn-ex-list a:hover { border-color: var(--accent); }
.trn-list-date { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-decoration: none; }
.trn-list-title { font-weight: 600; flex: 1; min-width: 0; }
.trn-list-meta { color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }
.trn-ex-list .is-archived a { opacity: .6; }
.trn-filter { margin-bottom: .5rem; }
.trn-history li { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.trn-history-sets { font-variant-numeric: tabular-nums; }
.trn-notes { white-space: pre-line; color: var(--muted); font-size: var(--fs-sm); }

/* the live workout page: one card per exercise, one row per set */
.trn-ex-head { display: flex; align-items: center; gap: .5rem; }
.trn-ex-name { font-weight: 600; font-size: var(--fs-lg); color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
.trn-ex-video { text-decoration: none; }
.trn-last { margin: .15rem 0 .5rem; color: var(--muted); font-size: var(--fs-sm); }
.trn-sets { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.trn-set { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.trn-set.is-done { border-color: var(--good); background: var(--good-bg); }
.trn-set.is-error { border-color: var(--danger); }
.trn-set-no { flex: 0 0 1.5rem; color: var(--muted); font-size: var(--fs-sm); text-align: center; font-variant-numeric: tabular-nums; }
.trn-field { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--fs-sm); }
.trn-field { min-width: 0; }
.trn-field input { width: 4.75rem; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; padding: .45rem .3rem; }
.trn-tick {
  margin-left: auto; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; padding: 0; font-size: var(--fs-lg);
  background: transparent; color: var(--muted); border: 2px solid var(--line); border-radius: 50%;
}
.trn-tick[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: var(--bg); }
/* themes restyle every button (Paper fills them, Terminal outlines in caps);
   an unticked set must still read as empty, so pin the tick's look */
[data-theme] button.trn-tick { background: transparent; color: var(--muted); border: 2px solid var(--line); box-shadow: none; text-transform: none; }
[data-theme] button.trn-tick[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: var(--bg); }
.trn-set-del { color: var(--muted); }
.trn-addset { font-size: var(--fs-sm); }
.trn-addex { display: flex; flex-direction: column; gap: .6rem; }
.trn-new-ex summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
.trn-new-ex-fields, .trn-form-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.trn-new-ex-fields label, .trn-form-row > label { flex: 1 1 10rem; }
.trn-addex label, .trn-finish label, .trn-ex-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: var(--fs-sm); }
.trn-addex select, .trn-ex-form select { width: 100%; }
.trn-finish, .trn-ex-form { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.trn-finish input[name="rpe"] { width: 6rem; }
.trn-finish > button, .trn-ex-form > button { align-self: flex-start; }
.trn-finish-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.trn-danger { color: var(--danger); }
.trn-archive { margin-top: 1rem; }
@media (max-width: 600px) {
  .trn-set { gap: .3rem; padding: .3rem .35rem; }
  .trn-field { gap: .2rem; }
  .trn-field input { width: 3.4rem; padding: .45rem .2rem; }
  .trn-set-no { flex-basis: 1rem; }
  .trn-set .ghost.trn-set-del { min-width: 1.75rem; padding: .3rem .2rem; }
  .trn-start button { flex: 1 1 100%; }
}

/* ---- icons per theme: the shape extras the tokens can't express -------- */
[data-theme="blush"] .tabs a.on .icon { transform: rotate(-8deg); }
[data-theme="midnight"] .tabs a.on .icon { filter: drop-shadow(0 0 4px rgba(79, 209, 197, .65)); }
[data-theme="midnight"] .info-btn:hover .icon { filter: drop-shadow(0 0 3px rgba(79, 209, 197, .6)); }
[data-theme="terminal"] .icon { shape-rendering: crispEdges; }
[data-theme="terminal"] .icon .s { fill: currentColor; }

/* ---- phone tab bar: equal-width tabs in every theme ---------------------
   Last in the file on purpose: themes above give .tabs a wide pill padding,
   which would push Notes/Insights off-screen again. */
@media (max-width: 600px) {
  [data-theme] .tabs { padding-left: .15rem; padding-right: .15rem; }
  [data-theme] .tabs > a { padding: .4rem 0 .35rem; margin: 0; border-radius: var(--r-md); }
  /* labels use each theme's body face: display/mono faces are too wide for a
     seventh of a phone ("Calendar" in JetBrains Mono is ~58px) */
  [data-theme] .tabs .tab-label { font-size: var(--fs-xs); letter-spacing: 0; font-family: var(--font-body); }
  [data-theme="terminal"] .tabs .tab-label { font-family: var(--font-display); }  /* its pixel face is narrow enough */
}