/* ---------- tokens ---------- */
:root {
  --bg: #f5f2ec;
  --rail: #ece7de;
  --surface: #ffffff;
  --surface-2: #f2eee6;
  --ink: #1f1c18;
  --ink-2: #4a453e;
  --muted: #8a847a;
  --line: #e7e1d6;
  --accent: #c4553a;
  --accent-soft: #f7e4dc;
  --on-accent: #ffffff;
  --late: #c43a3a;
  --shadow: 0 1px 0 rgba(60, 40, 20, .03), 0 10px 30px -18px rgba(60, 40, 20, .25);

  /* chart + colour slots (validated categorical order) */
  --chart: #2a78d6;
  --blue: #2a78d6; --green: #1baf7a; --yellow: #eda100; --violet: #6250d6; --pink: #e87ba4;
  --h0: #2a78d6; --h1: #eb6834; --h2: #1baf7a; --h3: #eda100; --h4: #e87ba4; --h5: #008300; --h6: #6250d6; --h7: #e34948;

  --serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --heading: var(--serif);
  --card-border: var(--line);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --radius: 20px;
  --rail-w: calc(70px + env(safe-area-inset-left, 0px));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131211;
    --rail: #0e0d0c;
    --surface: #1d1b19;
    --surface-2: #282522;
    --ink: #f2eee7;
    --ink-2: #cfc8bd;
    --muted: #968f84;
    --line: #33302b;
    --accent: #e27458;
    --accent-soft: #3b2520;
    --on-accent: #1a0f0b;
    --late: #f07070;
    --shadow: none;
    --chart: #3987e5;
    --blue: #3987e5; --green: #199e70; --yellow: #c98500; --violet: #9085e9; --pink: #d55181;
    --h0: #3987e5; --h1: #d95926; --h2: #199e70; --h3: #c98500; --h4: #d55181; --h5: #008300; --h6: #9085e9; --h7: #e66767;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; }
body.noscroll { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- left rail ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 30;
  background: var(--rail); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: calc(var(--safe-top) + 12px) 6px calc(var(--safe-bottom) + 12px) calc(6px + env(safe-area-inset-left, 0px));
}
.rail-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.rail-logo img { width: 34px; height: 34px; border-radius: 10px; }
.rail-logo span { display: none; font: 600 20px var(--heading); }
.rail-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; border-radius: 14px; color: var(--muted); font-size: 10.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.rail-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { color: var(--ink-2); }
.rail-btn.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.rail-btn .badge {
  position: absolute; top: 4px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font: 700 10.5px/17px var(--sans); font-style: normal; text-align: center;
}
.rail-spacer { flex: 1; }

/* ---------- page ---------- */
main {
  margin-left: var(--rail-w);
  padding: calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 40px);
  max-width: calc(1180px + var(--rail-w));
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 2px 18px; flex-wrap: wrap; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.display { font: 600 32px/1.08 var(--heading); letter-spacing: -.01em; margin: 0; }
.display em { font-style: italic; font-weight: 400; color: var(--ink-2); }
.sub { color: var(--muted); margin-top: 4px; font-size: 14px; }

.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.today-grid, .plan-grid, .cal-layout { display: grid; gap: 14px; align-items: start; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card.pad { padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 6px; }
.card-head.flush { padding: 0 0 10px; }
.card-head h3, .card-title { font: 600 20px/1.2 var(--heading); margin: 0; }
.card-title { margin-bottom: 12px; }
.card-head h4, .h4 { font-size: 15px; font-weight: 650; margin: 0; }
.card.focus { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.empty { color: var(--muted); padding: 10px 18px 14px; font-size: 15px; }
.empty.small { padding: 2px 18px 12px; font-size: 13px; }
.section { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 10px; display: flex; justify-content: space-between; align-items: center; }

.link { color: var(--accent); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-h { display: inline-flex; align-items: center; gap: 4px; }
.link-h svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.hint { display: block; width: calc(100% - 36px); margin: 4px 18px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  font-weight: 600; font-size: 15px; background: var(--surface-2); color: var(--ink);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: var(--surface-2); }
.btn.danger { background: transparent; color: var(--late); border: 1px solid var(--line); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn .count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); border-radius: 999px; padding: 1px 8px; font-size: 13px; }
.btn:disabled { opacity: .55; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--line);
}
.icon-btn.small { width: 30px; height: 30px; background: var(--surface-2); border: 0; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:disabled { opacity: .35; }
.period-nav { display: flex; gap: 8px; align-items: center; }

/* ---------- to-do rows ---------- */
.todo { display: flex; align-items: center; gap: 12px; padding: 9px 18px; min-height: 48px; }
.todo + .todo { border-top: 1px solid var(--line); }
.check {
  width: 22px; height: 22px; border-radius: 7px; border: 1.8px solid color-mix(in srgb, var(--muted) 70%, transparent); flex: none;
  display: grid; place-items: center; transition: background .15s, border-color .15s, transform .1s;
}
.check:active { transform: scale(.9); }
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after { content: ""; width: 10px; height: 5.5px; border: 2.2px solid var(--on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check.big { width: 28px; height: 28px; border-radius: 9px; }
.todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.todo-title { overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.todo-meta { font-size: 12.5px; color: var(--muted); }
.todo-meta.late { color: var(--late); }
.todo.done .todo-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.todo.goal .todo-title { font-weight: 600; }
.flag { width: 15px; height: 15px; fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.quick { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; flex: none; }
.more { color: var(--muted); }
.more svg { width: 20px; height: 20px; fill: currentColor; }

.add-todo { display: flex; align-items: center; gap: 12px; padding: 6px 18px 12px; }
.todo + .add-todo, .empty + .add-todo { border-top: 1px solid var(--line); padding-top: 10px; }
.add-plus svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.add-todo input[name=title], .add-todo input[name=text] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font-size: 16px; }
.add-todo input::placeholder { color: var(--muted); }
.goal-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; opacity: .45; }
.goal-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.goal-toggle:has(input:checked) { opacity: 1; background: var(--accent-soft); }
.goal-toggle .flag { width: 17px; height: 17px; }

.carry { margin: 4px 14px 6px; padding: 9px 12px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.carry button { font-weight: 650; color: var(--accent); white-space: nowrap; }

.ring { width: 26px; height: 26px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.progress-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* habits chips on Today */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 999px; background: var(--surface-2); display: inline-flex; align-items: center; gap: 8px; font-size: 15px; transition: background .15s; }
.chip-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.chip.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.chip.on .chip-dot { background: var(--c); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.mini strong { font: 600 17px var(--heading); margin-top: 6px; }
.mini-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.mini-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mini.warm { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mini.warm .muted { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.mini.warm .mini-icon { background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }

/* ---------- schedule: day view (pills) ---------- */
.ti { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.125em; flex: none; }
.schedule .card-head { padding-bottom: 10px; }
.allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.allday span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.tl-scroll { padding: 6px 14px 18px 10px; }
.tl { position: relative; margin-top: 8px; cursor: copy; }
.tl-rail { position: absolute; left: 68px; top: 0; bottom: 0; width: 2px; background: var(--line); border-radius: 1px; }
.tl-hour { position: absolute; left: 0; width: 44px; text-align: right; font-size: 11px; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.tl-now { position: absolute; left: 48px; right: 0; height: 2px; background: var(--late); z-index: 5; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--late); }
.tl-item { position: absolute; left: 0; right: 0; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tl-pill {
  position: absolute; top: 0; width: 34px; border-radius: 17px; background: var(--c); color: #fff;
  display: flex; justify-content: center; padding-top: 7px; font-size: 18px; z-index: 2;
  box-shadow: 0 0 0 3px var(--surface);
}
.tl-item.ev .tl-pill { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); }
.tl-item.done .tl-pill { opacity: .45; }
.tl-text { position: absolute; top: 1px; right: 36px; display: flex; flex-direction: column; min-width: 0; }
.tl-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item.ev .tl-title { font-weight: 500; color: var(--ink-2); }
.tl-item.done .tl-title { text-decoration: line-through; color: var(--muted); }
.tl-tick { position: absolute; right: 2px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c); }
.tl-tick.on { background: var(--c); }
.tl-tick.on::after { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 9px; border: 2.2px solid #fff; border-top: 0; border-left: 0; transform: rotate(40deg); }
.tl-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; cursor: ns-resize; touch-action: none; }
.tl-resize::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 12px; height: 3px; margin-left: -6px; border-radius: 2px; background: rgba(255,255,255,.7); opacity: 0; transition: opacity .15s; }
.tl-item:hover .tl-resize::after, .tl-item.lifting .tl-resize::after { opacity: 1; }
.tl-item.lifting .tl-pill { box-shadow: 0 0 0 3px var(--surface), 0 8px 20px -6px rgba(0,0,0,.35); }

/* ---------- schedule: week view ---------- */
.wk-wrap { margin-top: 4px; }
.wk-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-left: 22px; margin-bottom: 6px; }
.wk-day { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); padding: 2px 0; border-radius: 10px; }
.wk-day b { font-size: 14px; color: var(--ink); font-weight: 600; }
.wk-day.today b { background: var(--accent); color: var(--on-accent); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.wk { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin-left: 22px; }
.wk-hour { position: absolute; left: -22px; right: 0; border-top: 1px dashed var(--line); }
.wk-hour span { position: absolute; left: 0; top: -7px; font-size: 10.5px; color: var(--muted); background: var(--surface); padding-right: 3px; }
.wk-col { position: relative; border-left: 1px solid transparent; }
.wk-col::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); opacity: .6; }
.wk-col.today { background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 10px; }
.wk-now { position: absolute; left: 2px; right: 2px; height: 2px; background: var(--late); z-index: 3; }
.wk-pill {
  position: absolute; left: 50%; border-radius: 999px; background: var(--c); color: #fff;
  display: flex; justify-content: center; padding-top: 3px; font-size: 13px; cursor: pointer; z-index: 2;
  box-shadow: 0 0 0 2px var(--surface); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.wk-pill.ev { background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); }
.wk-pill.done { opacity: .45; }

/* ---------- plan ---------- */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 3px; margin-bottom: 16px; border: 1px solid var(--line); }
.seg button { padding: 7px 16px; border-radius: 9px; font-size: 14.5px; color: var(--muted); font-weight: 550; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.breakdown { display: flex; flex-direction: column; gap: 10px; }
.breakdown { gap: 8px; }
.day-card .card-head { padding: 8px 10px 8px 18px; }
.day-card .card-head + .todo { border-top: 1px solid var(--line); }
.day-card:not(:has(.todo)) { opacity: .75; box-shadow: none; }
.day-card .todo { min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.day-card.is-today { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.day-card.is-today h4, .day-card.is-today .h4 { color: var(--accent); }

/* ---------- calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 10px 4px; }
.cal-wd { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.cal-day { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; font-variant-numeric: tabular-nums; font-size: 15px; }
.cal-day.other { opacity: .35; }
.cal-day.today span { color: var(--accent); font-weight: 750; }
.cal-day.sel { background: var(--ink); color: var(--bg); }
.cal-day.sel span { color: var(--bg); }
.marks { display: flex; gap: 3px; height: 5px; }
.marks b, .cal-legend b { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.marks b.e, .cal-legend b.e { background: var(--blue); }
.marks b.t, .cal-legend b.t { background: var(--accent); }
.marks b.b, .cal-legend b.b { background: var(--green); }
.cal-legend { display: flex; gap: 14px; justify-content: center; padding: 4px 0 14px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- habits ---------- */
.period-bar { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; }
.period-bar > div { display: flex; flex-direction: column; flex: 1; }
.period-bar strong { font: 600 18px var(--heading); }
.swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; display: inline-block; }

.week-board { padding: 16px 14px 14px; }
.wb-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 16px; flex-wrap: wrap; }
.wb-score { display: flex; align-items: center; gap: 12px; }
.wb-score .ring { width: 48px; height: 48px; }
.wb-score .ring circle { stroke-width: 4.5; }
.wb-score b { font: 600 26px var(--heading); display: block; }
.wb-score span { font-size: 13px; color: var(--muted); }
.wb-facts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.wb-facts b { color: var(--ink); font-size: 15px; }
.wb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 6px; align-items: center; }
.wb-corner { display: none; }
.wb-grid .wb-name { grid-column: 1 / -1; margin-top: 8px; }
.wb-day { text-align: center; display: flex; flex-direction: column; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.wb-day b { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.wb-day.today b, .wb-day.today span { color: var(--accent); }
.wb-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 550; }
.wb-name span:not(.swatch) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wb-name em { font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wb-name.total { color: var(--muted); font-size: 12px; font-weight: 500; padding-top: 6px; }
.wb-cell { aspect-ratio: 1 / 1; border-radius: 9px; background: var(--surface-2); transition: background .15s, transform .1s; max-width: 46px; width: 100%; justify-self: center; }
.wb-cell:active { transform: scale(.9); }
.wb-cell.on { background: var(--c); }
.wb-cell.today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.wb-cell.future { opacity: .35; }
.wb-total { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); padding-top: 6px; }
.bar-mini { width: 8px; height: 26px; border-radius: 4px; background: var(--surface-2); display: flex; align-items: flex-end; overflow: hidden; }
.bar-mini i { width: 100%; background: var(--accent); border-radius: 4px; }

.month-cards, .hcards { display: grid; gap: 12px; }
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc-head button { display: flex; align-items: center; gap: 8px; font: 600 17px var(--heading); }
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 10px 0 12px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mc-wd { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.mc-cell { aspect-ratio: 1 / 1; border-radius: 50%; font-size: 12px; display: grid; place-items: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mc-cell.on { background: var(--c); color: #fff; font-weight: 650; }
.mc-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mc-cell:disabled { opacity: .35; }

/* stat tiles + charts */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.tile span { font-size: 12px; color: var(--muted); }
.tile b { font: 600 28px/1.1 var(--heading); }
.tile small { font: 500 14px var(--sans); color: var(--muted); }
.tile em { font-style: normal; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-card { margin-bottom: 12px; }
.card-title .muted { font: 400 14px var(--sans); }
.chart { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis, .heat .axis { fill: var(--muted); font-size: 12px; font-family: var(--sans); }
.heat .axis { font-size: 10px; }
.chart .label { fill: var(--ink); font-size: 12px; font-weight: 650; font-family: var(--sans); }
.chart .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .end, .chart .cursor { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .cursor { opacity: 0; pointer-events: none; }
.chart .cursor.on { opacity: 1; }
.chart .bar { fill: color-mix(in srgb, var(--chart) 45%, var(--surface)); }
.chart .bar.best { fill: var(--chart); }
.chart-note { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.hcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hcard-head strong { flex: 1; font: 600 17px var(--heading); }
.hcard-head .swatch { background: var(--c, currentColor); }
.hcard-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.heat { width: 300px; max-width: 100%; height: auto; }
.heat .cell { fill: var(--surface-2); }
.heat .cell.pre { opacity: .35; }
.hcard-stats { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; flex: 1; min-width: 160px; }
.hcard-stats div:not(.meter) { display: flex; flex-direction: column; }
.hcard-stats b { font: 600 24px var(--heading); }
.hcard-stats span { font-size: 12px; color: var(--muted); }
.hcard-stats .meter { flex-basis: 100%; margin: 0; }
.tip {
  position: absolute; z-index: 80; pointer-events: none; transform: translate(-50%, -100%);
  background: var(--ink); color: var(--bg); font-size: 13px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.tip.show { opacity: 1; }

/* ---------- lists ---------- */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.list-card { padding: 16px; display: flex; flex-direction: column; gap: 2px; min-height: 130px; text-align: left; }
.list-card strong { font: 600 19px var(--heading); }
.list-card ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.list-card li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.list-card li::before { content: "○ "; color: var(--muted); }

/* ---------- journal ---------- */
.entries { display: grid; gap: 12px; }
.entry { padding: 16px 18px; }
.entry-when { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.entry-when .link { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.entry-text { font: 18px/1.5 var(--heading); margin: 8px 0 0; white-space: pre-wrap; }
details { margin-top: 10px; }
summary { color: var(--accent); font-size: 14px; cursor: pointer; font-weight: 550; }
.orig { white-space: pre-wrap; color: var(--ink-2); font-size: 15px; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }

/* ---------- forms ---------- */
.settings { display: grid; gap: 12px; margin-bottom: 12px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 2px 6px; }
.input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 11px 13px; outline: none; font-size: 16px; }
.input:focus { border-color: var(--accent); background: var(--surface); }
textarea.input { min-height: 100px; resize: vertical; font-family: var(--heading); font-size: 17px; line-height: 1.5; }
textarea.input.big { min-height: 240px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.actions .spacer { flex: 1; }
.help { font-size: 14px; color: var(--muted); line-height: 1.45; margin: 0 0 12px; }

/* ---------- sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 8, .38); opacity: 0; transition: opacity .2s; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: 24px 24px 0 0; padding: 8px 20px calc(var(--safe-bottom) + 22px);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  max-width: 620px; margin: 0 auto;
}
.sheet.open { pointer-events: auto; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; padding: 0; background-clip: content-box; border-top: 8px solid transparent; border-bottom: 8px solid transparent; box-sizing: content-box; touch-action: none; cursor: grab; }
.sheet h2 { margin: 0 0 16px; font: 600 24px var(--heading); }
.sheet-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.title-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 22px/1.2 var(--heading); padding: 4px 0; }
.sheet-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.pill input[type=time] { border: 0; background: transparent; outline: 0; font-size: 14px; padding: 0; }
.goal-pill input { position: absolute; opacity: 0; pointer-events: none; }
.goal-pill .ti { width: 15px; height: 15px; }
.todo-title .pin-mark { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--accent); }
.goal-pill:has(input:checked) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sheet-sub { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.move { display: grid; gap: 10px; }
.move-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.move-row > span { font-size: 13px; color: var(--muted); padding-top: 7px; }
.move-row > div, .suggest > div, .durs { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; background: var(--surface); cursor: pointer; }
.mchip:hover { border-color: var(--accent); }
.mchip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mchip .flag { width: 13px; height: 13px; }
.mchip.pick { color: var(--accent); border-style: dashed; }
.mchip.pick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.suggest { margin: -4px 0 14px; display: grid; gap: 6px; }
.durs { margin: -4px 0 14px; }
.colors { display: flex; gap: 10px; margin-bottom: 4px; }
.color input { position: absolute; opacity: 0; pointer-events: none; }
.color i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.0); }
.color input:checked + i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.summary-box { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--surface-2); font: 17px/1.55 var(--heading); white-space: pre-wrap; }

/* check-in */
.q { text-align: center; padding: 6px 0 4px; }
.q .kind { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.q .ask { font: 600 26px/1.25 var(--heading); margin: 12px 0 6px; }
.q .answers { display: grid; gap: 10px; margin-top: 22px; }
.q .answers button { padding: 15px; border-radius: 16px; background: var(--surface-2); font-weight: 600; font-size: 17px; text-align: center; }
.q .answers button.yes { background: var(--accent); color: var(--on-accent); }
.progress { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.progress b { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.stat { background: var(--surface-2); border-radius: 14px; padding: 12px; text-align: center; }
.stat b { display: block; font: 600 26px var(--heading); }
.stat span { font-size: 12px; color: var(--muted); }

.toast {
  position: fixed; left: calc(50% + var(--rail-w) / 2); bottom: calc(var(--safe-bottom) + 24px); transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - var(--rail-w) - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ---------- Today: header, week strip, dots, now bar ---------- */
.today-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 10px; }
.today-head .year { font-style: normal; color: var(--accent); font-weight: 600; }
.head-actions { display: flex; align-items: center; gap: 6px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 0 0 14px; }
.ws-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 14px; font-size: 12px; color: var(--muted); transition: background .15s; }
.ws-day b { font-size: 17px; color: var(--ink); font-weight: 600; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ws-day.today b { color: var(--accent); }
.ws-day.sel b { background: var(--accent); color: var(--on-accent); }
.ws-marks { display: flex; gap: 3px; height: 5px; }
.ws-marks u { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ws-marks u.e { background: var(--blue); }
.ws-marks u.b { background: var(--green); }
.back-today { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 14px; margin: -6px 2px 12px; }
.back-today svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dots-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); }
.dots-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.dots-head b { font: 600 18px var(--heading); color: var(--ink); }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dots.month { grid-template-columns: repeat(8, 1fr); gap: 3px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); display: block; }
.dots i.l0, .dots i.none { background: var(--surface-2); }
.dots i.l1 { background: color-mix(in srgb, var(--green) 30%, var(--surface)); }
.dots i.l2 { background: color-mix(in srgb, var(--green) 60%, var(--surface)); }
.dots i.l3 { background: var(--green); }
.dots i.future { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.dots i.today { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); }
.now-bar {
  position: fixed; z-index: 25; left: calc(var(--rail-w) + 14px); right: 14px; bottom: calc(var(--safe-bottom) + 14px);
  max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--bg); border-radius: 999px; padding: 12px 18px; font-size: 15px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
}
.now-bar .ti { font-size: 20px; }
.now-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-bar.soft { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
main[data-tab="today"] { padding-bottom: calc(var(--safe-bottom) + 96px); }

/* tick balls */
.check { border-radius: 50%; }
.check.big { border-radius: 50%; }
.hl-tag { color: var(--green); display: inline-flex; font-size: 12px; opacity: .8; }

/* ---------- habits ---------- */
.seg.small { margin: 0; padding: 2px; }
.seg.small button { padding: 4px 10px; font-size: 13px; }
.habits-card .card-head { margin-bottom: 4px; }
.hbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 12px 6px; padding: 6px 0 4px; }
.hbtn { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.hcirc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--c); background: var(--surface); box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--c) 45%, transparent); transition: background .15s, color .15s, transform .1s; flex: none; }
.hbtn:active .hcirc { transform: scale(.92); }
.hbtn.on .hcirc { background: var(--c); color: #fff; box-shadow: none; }
.hname { font-size: 12px; color: var(--ink-2); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcirc.big { width: 46px; height: 46px; font-size: 22px; background: var(--c); color: #fff; box-shadow: none; }
.hcirc.tiny { width: 26px; height: 26px; font-size: 14px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); box-shadow: none; }
.wb-cell { border-radius: 50%; max-width: 34px; }
.hchips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.hchips::-webkit-scrollbar { display: none; }
.hchip { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; border: 1px solid var(--line); }
.hchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mcal-head { font-size: 14px; color: var(--ink-2); margin: 2px 0 10px; }
.mc-ring { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.mc-ring .ring { position: absolute; inset: 6%; width: 88%; height: 88%; }
.mc-ring .ring circle { stroke-width: 3.5; }
.mc-ring span { position: relative; }
.mc-ring.today span { color: var(--accent); font-weight: 700; }
.mc-ring:disabled { opacity: .35; }
.center { text-align: center; }
.mc-cell.on { background: var(--c); }
.detail-grid { display: grid; gap: 12px; }
.week-balls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 11px; color: var(--muted); }
.week-balls > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week-balls .wb-cell { width: 100%; }
.period-bar.compact { margin: 0 0 10px; }
.period-bar.compact strong { font-size: 16px; }
.ranking { display: grid; gap: 4px; margin-bottom: 8px; }
.rank-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(50px, 1fr) 40px 34px; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 12px; }
.rank-row:hover { background: var(--surface-2); }
.rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.rank-val { font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.rank-streak { font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 1px; }
.chart .line { stroke: var(--lc, var(--chart)); }
.chart .end, .chart .cursor { fill: var(--lc, var(--chart)); }
.chart.weekday .bar { fill: color-mix(in srgb, var(--bar, var(--chart)) 40%, var(--surface)); }
.chart.weekday .bar.best { fill: var(--bar, var(--chart)); }
.yr-wrap { display: grid; gap: 4px; }
.yr-row { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.yr-balls { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; }
.yr-balls i { aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); }
.yr-balls i.on { background: var(--c); }
.yr-balls i.none, .yr-balls i.future { background: transparent; }
.yr-balls i.pre { opacity: .35; }

/* ---------- health ---------- */
.metrics { display: grid; gap: 14px; }
.metric-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.metric-head span { display: inline-flex; align-items: center; gap: 6px; }
.metric-head b { font: 600 20px var(--heading); font-variant-numeric: tabular-nums; }
.metric-head small { font: 400 12px var(--sans); color: var(--muted); }
.metric.unset .metric-head b { color: var(--muted); }
.metric.unset input[type=range] { opacity: .45; }
.metric-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
input[type=range].low::-webkit-slider-runnable-track { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 35%, var(--surface)), color-mix(in srgb, var(--late) 70%, var(--surface))); }
input[type=range].high::-webkit-slider-runnable-track { background: linear-gradient(90deg, color-mix(in srgb, var(--late) 40%, var(--surface)), color-mix(in srgb, var(--green) 80%, var(--surface))); }
/* Health sliders: each style's own bad → good pair (Pastel keeps the default above). */
:root[data-theme="paper"] { --sl-bad: #e8c9b6; --sl-good: #b0613a; }
:root[data-theme="ocean"] { --sl-bad: #bfe6ea; --sl-good: #2fa4b0; }
:root[data-theme="matcha"] { --sl-bad: #dbe8c4; --sl-good: #6a9a5b; }
:root[data-theme="stone"] { --sl-bad: #cfdbe4; --sl-good: #3d6e8f; }
:root[data-theme="arcade"] { --sl-bad: #ff5c8a; --sl-good: #39ff9e; }
:root[data-theme="candy"] { --sl-bad: #ff8fc8; --sl-good: #9fd8ff; }
:root[data-theme="citrus"] { --sl-bad: #ff7aa6; --sl-good: #ffd23f; --sl-from: 35%; --sl-to: 65%; }
:root[data-theme="index"] { --sl-bad: #e8b48f; --sl-good: #93c4bf; }
:root[data-theme="comic"] { --sl-bad: #3ec9ff; --sl-good: #ff5c8a; }
:root[data-theme="nightpastel"] { --sl-bad: #f2a684; --sl-good: #7fcfae; }
:root[data-theme="cats"] { --sl-bad: #f4a3a8; --sl-good: #9fd6b8; }
:is(:root[data-theme="paper"],:root[data-theme="ocean"],:root[data-theme="matcha"],:root[data-theme="stone"],:root[data-theme="arcade"],:root[data-theme="candy"],:root[data-theme="citrus"],:root[data-theme="index"],:root[data-theme="comic"],:root[data-theme="nightpastel"],:root[data-theme="cats"],:root[data-theme="galaxy"],:root[data-theme="win95"],:root[data-theme="vaporwave"],:root[data-theme="vaporpastel"],:root[data-theme="bauhaus"],:root[data-theme="gba"],:root[data-theme="lofi"],:root[data-theme="tarot"],:root[data-theme="tarotparch"]) input[type=range].high::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--sl-bad) var(--sl-from, 0%), var(--sl-good) var(--sl-to, 100%)); }
:is(:root[data-theme="paper"],:root[data-theme="ocean"],:root[data-theme="matcha"],:root[data-theme="stone"],:root[data-theme="arcade"],:root[data-theme="candy"],:root[data-theme="citrus"],:root[data-theme="index"],:root[data-theme="comic"],:root[data-theme="nightpastel"],:root[data-theme="cats"],:root[data-theme="galaxy"],:root[data-theme="win95"],:root[data-theme="vaporwave"],:root[data-theme="vaporpastel"],:root[data-theme="bauhaus"],:root[data-theme="gba"],:root[data-theme="lofi"],:root[data-theme="tarot"],:root[data-theme="tarotparch"]) input[type=range].low::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--sl-good) var(--sl-from, 0%), var(--sl-bad) var(--sl-to, 100%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--accent-soft); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper button { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); font-size: 18px; font-weight: 600; display: grid; place-items: center; }
.stepper b { min-width: 46px; text-align: center; }
.mood-face { display: inline-flex; font-size: 20px; }
.mood-face.lv0 { color: var(--late); } .mood-face.lv1 { color: var(--h1); } .mood-face.lv2 { color: var(--h3); } .mood-face.lv3 { color: var(--green); } .mood-face.lv4 { color: var(--h5); }
.mood-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
.gym-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.gym-row:first-of-type { border-top: 0; }
.gym-main { display: flex; flex-direction: column; text-align: left; font-size: 15px; }
.hc-cell { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--green) calc(var(--g) * 70%), var(--surface-2)); font-variant-numeric: tabular-nums; }
.hc-cell.empty { background: transparent; color: var(--muted); }
.hc-cell .mood-face { font-size: 18px; }
.hc-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hc-cell:disabled { opacity: .3; }
.mc-grid.hc { gap: 5px; }
.patterns { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.patterns li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 15px; line-height: 1.4; }
.patterns li .ti { font-size: 18px; margin-top: 2px; }
.patterns li.good .ti { color: var(--green); }
.patterns li.bad .ti { color: var(--late); }
.patterns em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.metric-list { display: grid; gap: 2px; margin-bottom: 10px; }
.metric-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------- forms: switches, icon picker ---------- */
.switch { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 4px 0 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { width: 42px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick i { display: grid; place-items: center; height: 40px; border-radius: 12px; background: var(--surface-2); font-size: 19px; color: var(--ink-2); cursor: pointer; }
.icon-pick input:checked + i { background: var(--accent); color: var(--on-accent); }
.more-opts { margin: 4px 0 8px; }
.more-opts .icon-pick { margin-top: 8px; }
.mchip.radio input { position: absolute; opacity: 0; pointer-events: none; }
.mchip.radio:has(input:checked) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pill select { border: 0; background: transparent; font-size: 14px; color: inherit; outline: 0; }

/* ---------- press, hold and move ---------- */
[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.drag-ghost { position: fixed !important; z-index: 90; pointer-events: none; opacity: .95; transform: scale(1.03) rotate(-1deg);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.4); background: var(--surface); border-radius: 14px; }
.drag-ghost.wk-pill { background: var(--c); border-radius: 999px; }
.drag-ghost.tl-item { background: transparent; box-shadow: none; }
.drag-src { opacity: .3; }
.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.drop-on { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)) !important; }
.drop-time { position: fixed; z-index: 95; transform: translate(-50%, -100%); background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; pointer-events: none; opacity: 0; }
.drop-time.show { opacity: 1; }

/* ---------- wider screens: sidebar with names, two columns ---------- */
@media (min-width: 560px) {
  .hbtns { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .wb-grid { grid-template-columns: minmax(130px, 1.8fr) repeat(7, minmax(30px, 1fr)); }
  .wb-corner { display: block; }
  .wb-grid .wb-name { grid-column: auto; margin-top: 0; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .month-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (min-width: 900px) {
  :root { --rail-w: 220px; }
  .rail { padding: 22px 14px; gap: 4px; }
  .rail-logo { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 10px; margin-bottom: 22px; }
  .rail-logo span { display: inline; }
  .rail-btn { flex-direction: row; gap: 12px; padding: 10px 12px; font-size: 15px; }
  .rail-btn svg { width: 21px; height: 21px; }
  .rail-btn .badge { position: static; margin-left: auto; }
  main { padding: 32px 32px 48px; }
  .display { font-size: 40px; }
  .today-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .today-grid .schedule { position: sticky; top: 20px; }
  .today-grid .schedule .tl-scroll, .cal-layout .schedule .tl-scroll { max-height: calc(100vh - 140px); overflow-y: auto; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .now-bar { left: calc(var(--rail-w) + 32px); }
}
@media (max-width: 380px) {
  main { padding-left: 12px; padding-right: 12px; }
  .display { font-size: 28px; }
  .duo { grid-template-columns: 1fr; }
}

/* Today header on narrow screens */
.today-head .display { white-space: nowrap; }
.btn { white-space: nowrap; }
@media (max-width: 600px) {
  .today-head .display { font-size: 26px; }
  .now-bar { font-size: 14px; padding: 11px 16px; }
}
.duo.dots-duo { grid-template-columns: 1fr 1fr; align-items: start; }
.dots-duo .dots-card { padding: 10px 12px; }
.hc-cell { width: 100%; max-width: 44px; justify-self: center; }
.mc-ring, .mc-cell { width: 100%; max-width: 44px; justify-self: center; }
.hc-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.hc-cell .mood-face { font-size: 15px; }
.hc-cell small { font-size: 10.5px; font-weight: 600; color: var(--ink-2); margin-top: 1px; }
.rank-row { grid-template-columns: minmax(0, 1fr) 40px 34px; grid-template-areas: "name name name" "bar val streak"; row-gap: 4px; }
.rank-name { grid-area: name; }
.rank-bar { grid-area: bar; margin-left: 34px; }
.rank-val { grid-area: val; }
.rank-streak { grid-area: streak; }

/* ======================================================================
   Styles (themes). "Paper" is the default above and follows the phone's
   light/dark setting. The others set every colour themselves.
   Tints colour the Today sections: 1 Today, 2 This week, 3 Habits, 4–5 dots.
   ====================================================================== */
.card.tint-1 { background: var(--tint-1, var(--surface)); }
.card.tint-2 { background: var(--tint-2, var(--surface)); }
.card.tint-3 { background: var(--tint-3, var(--surface)); }
.dots-card.tint-4 { background: var(--tint-4, var(--surface)); }
.dots-card.tint-5 { background: var(--tint-5, var(--surface)); }
.dots-card { border-color: var(--card-border); }

:root[data-theme="pastel"] {
  --bg: #f5f6fa; --rail: #eceef5; --surface: #ffffff; --surface-2: #f0f1f7;
  --ink: #1c2233; --ink-2: #4a5068; --muted: #8a90a6; --line: #e6e8f0;
  --accent: #ef7655; --accent-soft: #fde6df; --on-accent: #ffffff; --late: #d9483b;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif; --sans: "DM Sans", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: 0 6px 24px -14px rgba(40, 50, 90, .25);
  --tint-1: #fde8df; --tint-2: #e8e6fb; --tint-3: #ddf3ea; --tint-4: #fff1d2; --tint-5: #fbe4ee;
  color-scheme: light;
}
:root[data-theme="citrus"] {
  --bg: #fffdf6; --rail: #fff6d6; --surface: #ffffff; --surface-2: #fff6dd;
  --ink: #26221a; --ink-2: #4f4836; --muted: #8f876f; --line: #f1e8c9;
  --accent: #ff4f8b; --accent-soft: #ffe0ec; --on-accent: #ffffff; --late: #e2443b;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif; --sans: "DM Sans", -apple-system, system-ui, sans-serif;
  --radius: 26px; --card-border: transparent; --shadow: none;
  --tint-1: #fff0a3; --tint-2: #ffd8e7; --tint-3: #c9f1ea; --tint-4: #d9ecff; --tint-5: #ffe3c4;
  color-scheme: light;
}
/* Headings in sans-serif styles read better a little bolder and tighter. */
:root[data-theme="pastel"] .display, :root[data-theme="citrus"] .display, :root[data-theme="matcha"] .display, :root[data-theme="ocean"] .display, :root[data-theme="nightpastel"] .display{ font-weight: 800; letter-spacing: -.02em; }
:root[data-theme="pastel"] .display em { font-style: normal; }

/* Style picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-tile { border-radius: 16px; padding: 10px; border: 2px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.theme-tile.on { border-color: var(--accent); }
.theme-prev { border-radius: 12px; padding: 8px; display: grid; gap: 5px; height: 96px; }
.theme-prev .tp-h { font-size: 18px; line-height: 1; font-weight: 700; }
.theme-prev .tp-row { display: flex; gap: 4px; }
.theme-prev .tp-card { flex: 1; height: 22px; border-radius: 7px; }
.theme-prev .tp-dot { width: 14px; height: 14px; border-radius: 50%; }
.theme-tile b { font-size: 15px; }
.theme-tile span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.checkin-btn .ti { font-size: 16px; }
@media (max-width: 600px) {
  .today-head .display { font-size: 24px; }
  .checkin-btn .lbl { display: none; }
  .checkin-btn { padding: 6px 10px; gap: 4px; }
  .head-actions { gap: 4px; }
  .head-actions .icon-btn.small { width: 28px; height: 28px; }
}

/* ---------- colour drawings (Fluent Emoji) ---------- */
.emo { width: 1.2em; height: 1.2em; display: block; flex: none; pointer-events: none; }
.art { display: block; pointer-events: none; -webkit-user-drag: none; }
.hcirc .emo { width: 26px; height: 26px; }
.hcirc.big .emo { width: 26px; height: 26px; }
.hcirc.tiny .emo { width: 16px; height: 16px; }
.hbtn .hcirc { background: var(--surface); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.hbtn .hcirc .emo { opacity: .45; filter: grayscale(.6); transition: opacity .15s, filter .15s; }
.hbtn.on .hcirc { background: color-mix(in srgb, var(--c) 28%, var(--surface)); box-shadow: inset 0 0 0 2.5px var(--c); color: inherit; }
.hbtn.on .hcirc .emo { opacity: 1; filter: none; }
.hcirc.big { background: color-mix(in srgb, var(--c) 28%, var(--surface)); }
.tl-pill { background: color-mix(in srgb, var(--c) 30%, var(--surface)); padding-top: 6px; }
.tl-pill .emo { width: 20px; height: 20px; }
.tl-item.ev .tl-pill { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.wk-pill { background: color-mix(in srgb, var(--c) 34%, var(--surface)); }
.wk-pill .emo { width: 14px; height: 14px; }
.wk-pill.ev { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.icon-pick i .emo { width: 22px; height: 22px; }
.mood-face .emo { width: 20px; height: 20px; }
.hc-cell .mood-face .emo { width: 16px; height: 16px; }
.now-bar .emo { width: 20px; height: 20px; }
.gym-row .hcirc .emo { width: 16px; height: 16px; }

/* ---------- big drawings ---------- */
.today-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.head-art { width: 48px; height: 48px; flex: none; }
.today-title .eyebrow { margin-bottom: 0; }
.empty-art { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 20px 20px; }
.empty-art .art { width: 72px; height: 72px; margin-bottom: 6px; }
.empty-art b { font: 600 17px var(--heading); }
.empty-art span { font-size: 14px; color: var(--muted); max-width: 300px; }
.celebrate { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--green) 18%, var(--surface)); }
.celebrate .art { width: 56px; height: 56px; }
.celebrate b { display: block; font: 700 19px var(--heading); }
.celebrate span { font-size: 13px; color: var(--ink-2); }
.sheet-art { display: flex; justify-content: center; margin: 0 0 6px; }
.sheet-art .art { width: 64px; height: 64px; }

/* ---------- colour per section (Pastel) ----------
   --sec: the section's colour (header circles, active menu item), --sec-card: lighter, for its cards,
   --sec-ink: dark text/icon in that colour. Other styles don't set these, so they stay as they were. */
:root[data-theme="pastel"] body[data-tab="today"]    { --sec: #fde3d8; --sec2: #fbd3c4; --sec-ink: #c2531c; }
:root[data-theme="pastel"] body[data-tab="plan"]     { --sec: #e5e2fb; --sec2: #d6d1f7; --sec-card: #f3f1fd; --sec-ink: #534ab7; }
:root[data-theme="pastel"] body[data-tab="calendar"] { --sec: #d9e9fb; --sec2: #c3dcf7; --sec-card: #eef5fd; --sec-ink: #185fa5; }
:root[data-theme="pastel"] body[data-tab="habits"]   { --sec: #d6f1e5; --sec2: #bfe8d6; --sec-card: #edf8f3; --sec-ink: #0f6e56; }
:root[data-theme="pastel"] body[data-tab="health"]   { --sec: #fadbe7; --sec2: #f6c6d8; --sec-card: #fdf0f5; --sec-ink: #993556; }
:root[data-theme="pastel"] body[data-tab="lists"]    { --sec: #ffecc2; --sec2: #fde0a0; --sec-card: #fff8e6; --sec-ink: #a06a00; }
:root[data-theme="pastel"] body[data-tab="journal"]  { --sec: #fde3d8; --sec2: #fbd3c4; --sec-card: #fef3ee; --sec-ink: #c2531c; }
:root[data-theme="pastel"] body[data-tab="settings"] { --sec: #e6e8f2; --sec2: #d9dcea; --sec-card: #f7f8fb; --sec-ink: #4a5068; }
:root[data-theme="pastel"] {
  --list-0: #fde8df; --list-1: #e8e6fb; --list-2: #ddf3ea; --list-3: #fff1d2; --list-4: #fbe4ee; --list-5: #dcecfb;
}
body:not([data-tab="today"]) main .card, body:not([data-tab="today"]) main .tile, body:not([data-tab="today"]) main .hcard { background: var(--sec-card, var(--surface)); }
body:not([data-tab="today"]) main .card.focus { background: var(--sec, var(--surface)); }
body main .card.list-card.lc-0, body main .card.lc-0.focus { background: var(--list-0, var(--sec-card, var(--surface))); }
body main .card.list-card.lc-1, body main .card.lc-1.focus { background: var(--list-1, var(--sec-card, var(--surface))); }
body main .card.list-card.lc-2, body main .card.lc-2.focus { background: var(--list-2, var(--sec-card, var(--surface))); }
body main .card.list-card.lc-3, body main .card.lc-3.focus { background: var(--list-3, var(--sec-card, var(--surface))); }
body main .card.list-card.lc-4, body main .card.lc-4.focus { background: var(--list-4, var(--sec-card, var(--surface))); }
body main .card.list-card.lc-5, body main .card.lc-5.focus { background: var(--list-5, var(--sec-card, var(--surface))); }
.rail-btn.on { color: var(--sec-ink, var(--accent)); background: var(--sec, var(--surface)); }
body[data-tab] .eyebrow { color: var(--sec-ink, var(--muted)); }
/* The soft circles behind each screen's title. */
main { position: relative; isolation: isolate; overflow-x: clip; }
main::before, main::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
main::before { top: -80px; right: -60px; width: 250px; height: 210px; background: var(--sec, transparent); }
main::after { top: 40px; right: -36px; width: 110px; height: 110px; background: var(--sec2, transparent); }
.today-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art greet actions" "art title title"; column-gap: 10px; row-gap: 0; align-items: center; }
.today-head .head-art { grid-area: art; }
.today-head .eyebrow { grid-area: greet; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-head .display { grid-area: title; }
.today-head .head-actions { grid-area: actions; }
@media (max-width: 600px) { .today-head .head-art { width: 42px; height: 42px; } }
@media (max-width: 600px) { .gname { display: none; } }
.card.tint-4 { background: var(--tint-4, var(--surface)); }
.card.tint-6 { background: var(--tint-6, var(--surface)); }
:root[data-theme="pastel"] { --tint-6: #edf4fd; }
.card.tint-6 .tl-pill { box-shadow: 0 0 0 3px var(--tint-6); }
.card.tint-6 .tl-hour { color: #7d8db0; }
.mini-icon { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.mini-icon .emo { width: 22px; height: 22px; }

/* Compact to-do lists */
.todo { padding: 6px 16px; min-height: 40px; gap: 10px; }
.todo-title { font-size: 15px; line-height: 1.3; }
.todo-meta { font-size: 12px; line-height: 1.3; }
.check { width: 20px; height: 20px; }
.check.on::after { width: 9px; height: 5px; }
.card-head { padding: 12px 16px 4px; }
.card-head h3, .card-title { font-size: 18px; }
.add-todo { padding: 4px 16px 10px; gap: 10px; }
.todo + .add-todo, .empty + .add-todo { padding-top: 6px; }
.add-todo input[name=title], .add-todo input[name=text] { font-size: 15px; padding: 6px 0; }
.add-plus svg { width: 20px; height: 20px; }
.quick { font-size: 12px; padding: 4px 10px; }
.carry { margin: 2px 12px 4px; padding: 7px 10px; font-size: 13px; }
.day-card .todo { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }

/* Habit colours in Pastel: softer, so they sit with the rest instead of shouting. */
:root[data-theme="pastel"] {
  --h0: #8db6ea; --h1: #f2a684; --h2: #7fcfae; --h3: #f2c96e; --h4: #f0a6c2; --h5: #a3cc8f; --h6: #b4a8ee; --h7: #ee9d9d;
}
.mini { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 10px 12px; }
.mini .mini-icon { grid-row: 1 / 3; width: 32px; height: 32px; }
.mini strong { margin-top: 0; font-size: 15px; line-height: 1.2; }
.mini .small { font-size: 12px; line-height: 1.25; }
@media (max-width: 600px) {
  .seg:not(.small) { display: flex; width: 100%; }
  .seg:not(.small) button { flex: 1; padding: 7px 4px; font-size: 14px; }
}
.col.tight { gap: 10px; }
.dots-duo .mini { padding: 9px 10px; column-gap: 8px; }
.dots-duo .mini .mini-icon { width: 28px; height: 28px; }
.dots-duo .mini strong { font-size: 14px; }
@media (max-width: 600px) {
  .dots-duo .mini .small { display: none; }
  .dots-duo .mini { grid-template-rows: auto; padding: 8px 9px; column-gap: 7px; }
  .dots-duo .mini .mini-icon { grid-row: 1; width: 26px; height: 26px; }
  .dots-duo .mini .mini-icon .emo { width: 18px; height: 18px; }
  .dots-duo .mini strong { font-size: 13px; }
  .col.tight { gap: 8px; }
}
.dots-duo { align-items: stretch; }
.dots-duo > .dots-card { display: flex; flex-direction: column; justify-content: center; }
.plan-dots { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.plan-dots.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan-dots.three .dots-card { padding: 9px 9px; }
.plan-dots.three .dots-head { font-size: 12px; }
.plan-dots.three .dots-head b { font-size: 15px; }
.plan-dots.three .dots.month { gap: 2px; }
@media (max-width: 380px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo .mini .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo.dots-duo { align-items: stretch; }
@media (max-width: 600px) {
  .duo .mini .small { display: none; }
  .duo .mini { grid-template-rows: auto; padding: 10px; }
  .duo .mini .mini-icon { grid-row: 1; }
  .duo .mini strong { font-size: 14px; }
}
.today-head { grid-template-areas: "art greet actions" "art title title" "art sub sub"; }
.today-sub { grid-area: sub; font-size: 14px; color: var(--muted); margin-top: 1px; }
@media (max-width: 600px) { .today-head .eyebrow { font-size: 10.5px; letter-spacing: .03em; } }
.today-head { grid-template-areas: "art greet actions" "art title title" "art sub nav"; }
.week-nav { grid-area: nav; display: flex; gap: 4px; justify-self: end; }
@media (max-width: 600px) { .today-head .eyebrow { font-size: 11px; letter-spacing: .05em; } }
.cal-wd { padding: 2px 0 8px; }
.cal-wd span { display: inline-block; min-width: 30px; padding: 3px 6px; border-radius: 999px; background: var(--sec, var(--surface-2)); color: var(--sec-ink, var(--ink-2)); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
.cal-wd span { background: color-mix(in srgb, var(--sec-ink, var(--ink-2)) 22%, var(--sec2, var(--surface-2))); color: var(--sec-ink, var(--ink)); }
.dots-duo .dots i { width: 100%; max-width: 22px; justify-self: center; }
.dots-duo .dots.month i { max-width: 16px; }
/* Month weekday labels: one shared bubble across the row */
.cal-wd { padding: 6px 0; margin-bottom: 8px; background: color-mix(in srgb, var(--sec-ink, var(--ink-2)) 22%, var(--sec2, var(--surface-2))); }
.cal-wd:first-child { border-radius: 999px 0 0 999px; }
.cal-wd:nth-child(7) { border-radius: 0 999px 999px 0; }
.cal-wd span { background: none; padding: 0; min-width: 0; }
/* Week view day header: same shared bubble as the month view */
.wk-head { background: color-mix(in srgb, var(--sec-ink, var(--ink-2)) 22%, var(--sec2, var(--surface-2))); border-radius: 18px; padding: 4px 0; margin-bottom: 10px; }
.wk-day span { color: var(--sec-ink, var(--ink-2)); font-weight: 700; font-size: 11.5px; }
.wk-day b { color: var(--sec-ink, var(--ink)); }
.wk-day.today b { background: var(--accent); color: var(--on-accent); }

/* Sidebar icons in circles, each in its section's colour */
.rdot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; transition: box-shadow .15s; }
.rail-btn .rdot svg { width: 19px; height: 19px; }
.rail-btn.on { background: transparent; box-shadow: none; }
.rail-btn.on .rdot { box-shadow: 0 0 0 2.5px var(--rail), 0 0 0 4.5px currentColor; }
.rail-btn.on > span:not(.rdot) { font-weight: 700; }
:root[data-theme="pastel"] .rail-btn[data-tab="today"]    { --rd: #fde3d8; --ri: #c2531c; }
:root[data-theme="pastel"] .rail-btn[data-tab="plan"]     { --rd: #e5e2fb; --ri: #534ab7; }
:root[data-theme="pastel"] .rail-btn[data-tab="calendar"] { --rd: #d9e9fb; --ri: #185fa5; }
:root[data-theme="pastel"] .rail-btn[data-tab="habits"]   { --rd: #d6f1e5; --ri: #0f6e56; }
:root[data-theme="pastel"] .rail-btn[data-tab="health"]   { --rd: #fadbe7; --ri: #993556; }
:root[data-theme="pastel"] .rail-btn[data-tab="lists"]    { --rd: #ffecc2; --ri: #a06a00; }
:root[data-theme="pastel"] .rail-btn[data-tab="journal"]  { --rd: #fde3d8; --ri: #c2531c; }
:root[data-theme="pastel"] .rail-btn[data-tab="style"],
:root[data-theme="pastel"] .rail-btn[data-tab="settings"] { --rd: #e6e8f2; --ri: #4a5068; }
:root[data-theme="pastel"] .rail-btn .rdot { background: var(--rd); color: var(--ri); }
:root[data-theme="pastel"] .rail-btn.on { color: var(--ri); }
@media (min-width: 900px) { .rail-btn { align-items: center; } .rail-btn .rdot { width: 30px; height: 30px; } }
.rail-btn .badge { z-index: 2; top: 2px; right: 6px; }
@media (min-width: 900px) { .rail-btn .badge { position: static; } }
/* Sheet buttons stay visible at the bottom, even in long sheets or with the keyboard open */
.sheet-panel form > .actions:last-child, .sheet-panel > div > .actions:last-child, #sheet-body > .actions:last-child {
  position: sticky; bottom: calc(-22px - var(--safe-bottom)); z-index: 3; margin: 14px -20px 0; padding: 12px 20px calc(12px + var(--safe-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
/* Sheet buttons on phones: equal columns, so they never overlap */
@media (max-width: 600px) {
  #sheet-body .actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  #sheet-body .actions .spacer { display: none; }
  #sheet-body .actions .btn { justify-content: center; padding: 11px 6px; font-size: 14px; }
}

/* Tighter lists everywhere (to-dos, plan days, list items) */
.todo { padding: 3px 14px; min-height: 34px; gap: 9px; }
.todo-title { font-size: 14.5px; line-height: 1.25; }
.todo-meta { font-size: 11.5px; line-height: 1.2; }
.check { width: 18px; height: 18px; border-width: 1.6px; }
.check.on::after { width: 8px; height: 4.5px; border-width: 2px; }
.todo + .todo { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
.card-head { padding: 10px 14px 2px; }
.card-head h3, .card-title { font-size: 17px; }
.add-todo { padding: 2px 14px 8px; gap: 9px; }
.todo + .add-todo, .empty + .add-todo, .carry + .add-todo { padding-top: 4px; }
.add-todo input[name=title], .add-todo input[name=text] { font-size: 14.5px; padding: 5px 0; }
.add-plus svg { width: 18px; height: 18px; }
.goal-toggle { width: 26px; height: 26px; }
.quick { font-size: 11.5px; padding: 3px 9px; }
.carry { margin: 2px 10px 2px; padding: 6px 10px; font-size: 12.5px; }
.day-card .todo { min-height: 30px; padding-top: 2px; padding-bottom: 2px; font-size: 13.5px; }
.day-card .card-head { padding: 6px 10px 6px 14px; }
.col, .today-grid, .plan-grid, .cal-layout, .breakdown { gap: 10px; }
.empty { padding: 8px 14px 10px; font-size: 14px; }
.progress-label { font-size: 13px; }
.ring { width: 22px; height: 22px; }

/* ---------- New styles: Ocean and Night pastel ----------
   Each style can give six section colours (--p1..--p6) with a dark ink for each (--i1..--i6);
   the rules after the two blocks turn them into section colours, menu circles and list colours. */
:root[data-theme="ocean"] {
  --bg: #f2f9fa; --rail: #e4f1f3; --surface: #fcfefe; --surface-2: #e9f4f5;
  --ink: #173238; --ink-2: #3f5d63; --muted: #6f9095; --line: #d9eaec;
  --accent: #2fa4b0; --accent-soft: #d4eff1; --on-accent: #ffffff; --late: #d4564a;
  --heading: "Outfit", system-ui, sans-serif; --sans: "Outfit", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: 0 6px 24px -14px rgba(20, 70, 80, .25);
  --p1: #d4eff1; --i1: #1d7580; --p2: #f4ecdc; --i2: #8a6630; --p3: #dbe8fb; --i3: #2b5ea8;
  --p4: #d8f2e4; --i4: #1f7a52; --p5: #fde2dc; --i5: #b2493a; --p6: #fdf1cc; --i6: #8f6c00;
  --tint-1: #d4eff1; --tint-2: #f4ecdc; --tint-3: #d8f2e4; --tint-4: #fdf1cc; --tint-5: #fde2dc; --tint-6: #eaf5f8;
  --h0: #7fb6ea; --h1: #f2a684; --h2: #6fcfc6; --h3: #f2c96e; --h4: #f0a6c2; --h5: #8fcf9f; --h6: #a9b4f0; --h7: #ee9d9d;
  color-scheme: light;
}
:root[data-theme="nightpastel"] {
  --bg: #1b1d2b; --rail: #161827; --surface: #24263a; --surface-2: #2e3049;
  --ink: #f1eefc; --ink-2: #c9c5e4; --muted: #9a97b8; --line: #34364f;
  --accent: #f2a684; --accent-soft: #45343a; --on-accent: #2a1a14; --late: #ff8f8f;
  --heading: "Comfortaa", ui-rounded, system-ui, sans-serif; --sans: "Nunito", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: none;
  --p1: #3d2f36; --i1: #f6b99c; --p2: #322f4f; --i2: #c5b9f7; --p3: #283a52; --i3: #9fc6f2;
  --p4: #22403a; --i4: #93dcbd; --p5: #43293a; --i5: #f3a8c6; --p6: #423826; --i6: #f3d27a;
  --tint-1: #3d2f36; --tint-2: #322f4f; --tint-3: #22403a; --tint-4: #423826; --tint-5: #43293a; --tint-6: #262c40;
  --h0: #8db6ea; --h1: #f2a684; --h2: #7fcfae; --h3: #f2c96e; --h4: #f0a6c2; --h5: #a3cc8f; --h6: #b4a8ee; --h7: #ee9d9d;
  --blue: #8db6ea; --green: #7fcfae; --yellow: #f2c96e; --violet: #b4a8ee; --pink: #f0a6c2; --chart: #8db6ea;
  color-scheme: dark;
}
/* Matcha */
:root[data-theme="matcha"] {
  --bg: #f4f6ee; --rail: #e9eddf; --surface: #fdfdf9; --surface-2: #eef1e6;
  --ink: #24331f; --ink-2: #4b5a44; --muted: #7b8a72; --line: #e2e7d7;
  --accent: #6a9a5b; --accent-soft: #e1edd8; --on-accent: #ffffff; --late: #c2533b;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif; --sans: "DM Sans", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: 0 6px 24px -14px rgba(40, 60, 30, .22);
  --p1: #e3efd6; --i1: #3f6b31; --p2: #f3ead7; --i2: #7a5a2a; --p3: #dcebe8; --i3: #2f6a62;
  --p4: #e8f0c9; --i4: #5b6f12; --p5: #f5e1df; --i5: #94443c; --p6: #fbefc9; --i6: #8a6a00;
  --tint-1: #e3efd6; --tint-2: #f3ead7; --tint-3: #e8f0c9; --tint-4: #fbefc9; --tint-5: #f5e1df; --tint-6: #eef4ec;
  --h0: #8fb9d9; --h1: #e8a77f; --h2: #8cc79a; --h3: #e6c46a; --h4: #e3a3b5; --h5: #a9c77e; --h6: #b3a7d9; --h7: #e09a8f;
  color-scheme: light;
}
/* Section colours from --p1..--p6 (Pastel keeps its own hand-picked set above). */
body[data-tab="today"], body[data-tab="journal"] { --sec: var(--p1); --sec-ink: var(--i1); }
body[data-tab="plan"]     { --sec: var(--p2); --sec-ink: var(--i2); }
body[data-tab="calendar"] { --sec: var(--p3); --sec-ink: var(--i3); }
body[data-tab="habits"]   { --sec: var(--p4); --sec-ink: var(--i4); }
body[data-tab="health"]   { --sec: var(--p5); --sec-ink: var(--i5); }
body[data-tab="lists"]    { --sec: var(--p6); --sec-ink: var(--i6); }
body[data-tab] { --sec2: color-mix(in srgb, var(--sec), var(--sec-ink) 14%); --sec-card: color-mix(in srgb, var(--sec) 55%, var(--surface)); }
body[data-tab="today"] { --sec-card: initial; }
:root { --list-0: var(--p1); --list-1: var(--p2); --list-2: var(--p4); --list-3: var(--p6); --list-4: var(--p5); --list-5: var(--p3); }
.rail-btn[data-tab="today"], .rail-btn[data-tab="journal"] { --rd: var(--p1); --ri: var(--i1); }
.rail-btn[data-tab="plan"]     { --rd: var(--p2); --ri: var(--i2); }
.rail-btn[data-tab="calendar"] { --rd: var(--p3); --ri: var(--i3); }
.rail-btn[data-tab="habits"]   { --rd: var(--p4); --ri: var(--i4); }
.rail-btn[data-tab="health"]   { --rd: var(--p5); --ri: var(--i5); }
.rail-btn[data-tab="lists"]    { --rd: var(--p6); --ri: var(--i6); }
.rail-btn .rdot { background: var(--rd, var(--surface-2)); color: var(--ri, var(--ink-2)); }
.rail-btn.on { color: var(--ri, var(--accent)); }
:root[data-theme="nightpastel"] .hbtn.on .hcirc .emo, :root[data-theme="nightpastel"] .tl-pill .emo { filter: none; }
:root[data-theme="nightpastel"] .now-bar { background: var(--accent); color: var(--on-accent); }

/* ---------- Paper, refreshed: warm but neutral (earth tones, serif headings, light paper grain) ---------- */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4f1ea; --rail: #ebe6dc; --surface: #fcfaf6; --surface-2: #efebe3;
  --ink: #23201b; --ink-2: #4a453d; --muted: #8a8378; --line: #e3ddd1;
  --accent: #b0613a; --accent-soft: #f1e1d6; --on-accent: #ffffff; --late: #b4442f;
  --card-border: #e6e0d4;
  --p1: #ede3d3; --i1: #7a5530; --p2: #e5e2db; --i2: #4f4a42; --p3: #dfe5ea; --i3: #3d5568;
  --p4: #e3e6d6; --i4: #56603a; --p5: #ecdcd5; --i5: #8a4b3b; --p6: #efe4c8; --i6: #7d6420;
  --tint-1: #f0e8db; --tint-2: #e9e6df; --tint-3: #e6e9db; --tint-4: #f2e9d3; --tint-5: #efe2dc; --tint-6: #eaeef1;
  --h0: #7f9bb5; --h1: #c98a5e; --h2: #8fae8b; --h3: #d1b06a; --h4: #c49a9a; --h5: #9aa86f; --h6: #9d94b8; --h7: #c78484;
  --blue: #6f8fae; --green: #7f9f78; --yellow: #c9a54f; --violet: #8f87ad; --pink: #c08f8f; --chart: #6f8fae;
}
/* A very light paper grain on the page background */
:root[data-theme="paper"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="stone"] .display { font-weight: 800; letter-spacing: -.02em; }
:root[data-theme="stone"] .display em { font-style: normal; }

/* Stone (colourful version): muted section colours, steel-blue accent. */
:root[data-theme="stone"] {
  --bg: #f5f6f7; --rail: #eceef0; --surface: #ffffff; --surface-2: #eff1f3;
  --ink: #1d2329; --ink-2: #48525c; --muted: #85909b; --line: #e3e7eb;
  --accent: #3d6e8f; --accent-soft: #e3edf4; --on-accent: #ffffff; --late: #c0503c;
  --heading: "Plus Jakarta Sans", system-ui, sans-serif; --sans: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --radius: 18px; --card-border: #e6e9ec; --shadow: 0 1px 2px rgba(20, 30, 40, .04);
  --p1: #e6edf2; --i1: #2f5873; --p2: #ecebe6; --i2: #5a5544; --p3: #e4ecee; --i3: #2f6066;
  --p4: #e7ede4; --i4: #44633c; --p5: #f0e6e2; --i5: #8a4a3a; --p6: #f1ecdf; --i6: #776126;
  --tint-1: #eaf0f4; --tint-2: #f0efea; --tint-3: #e9efe6; --tint-4: #f3eee2; --tint-5: #f3eae6; --tint-6: #eef3f5;
  --h0: #7e9cb8; --h1: #c99673; --h2: #86b0a0; --h3: #cdb26e; --h4: #b9a0b0; --h5: #98ae84; --h6: #9e9ec4; --h7: #c48e88;
  --blue: #5d86a8; --green: #6f9a84; --yellow: #c2a35a; --violet: #8c8cb6; --pink: #b38a9a; --chart: #3d6e8f;
  color-scheme: light;
}

/* ======================= Fun styles ======================= */

/* Comic: thick black outlines, hard shadows, primary colours */
:root[data-theme="comic"] {
  --bg: #fff7e0; --rail: #ffefc2; --surface: #ffffff; --surface-2: #fff3cf;
  --ink: #111111; --ink-2: #2b2b2b; --muted: #5c5c5c; --line: #111111;
  --accent: #ff5c8a; --accent-soft: #ffe0ea; --on-accent: #ffffff; --late: #e0242f;
  --heading: "Rubik", system-ui, sans-serif; --sans: "Rubik", -apple-system, system-ui, sans-serif;
  --radius: 14px; --card-border: #111111; --shadow: 4px 4px 0 #111111;
  --p1: #7ad7ff; --i1: #111; --p2: #ffd23f; --i2: #111; --p3: #ff9fd0; --i3: #111;
  --p4: #b8f36b; --i4: #111; --p5: #ff8a7a; --i5: #111; --p6: #c3a6ff; --i6: #111;
  --tint-1: #7ad7ff; --tint-2: #c3a6ff; --tint-3: #b8f36b; --tint-4: #ffd23f; --tint-5: #ff9fd0; --tint-6: #ffffff;
  --h0: #2e7cf6; --h1: #ff7a1a; --h2: #1fbf5f; --h3: #ffc400; --h4: #ff4fa0; --h5: #00a3a3; --h6: #7c4dff; --h7: #e0242f;
  --blue: #2e7cf6; --green: #1fbf5f; --yellow: #ffc400; --violet: #7c4dff; --pink: #ff4fa0; --chart: #2e7cf6;
  color-scheme: light;
}
:root[data-theme="comic"] .card, :root[data-theme="comic"] .dots-card, :root[data-theme="comic"] .tile, :root[data-theme="comic"] .hcard { border: 2.5px solid #111; box-shadow: 4px 4px 0 #111; }
:root[data-theme="comic"] .todo + .todo { border-top: 1.5px dashed #111; }
:root[data-theme="comic"] .check { border: 2px solid #111; background: #fff; }
:root[data-theme="comic"] .check.on { background: #ffd23f; border-color: #111; }
:root[data-theme="comic"] .check.on::after { border-color: #111; }
:root[data-theme="comic"] .btn { border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
:root[data-theme="comic"] .rail-btn .rdot { border: 2px solid #111; }
:root[data-theme="comic"] .seg { border: 2px solid #111; }
:root[data-theme="comic"] .seg button.on { background: #ffd23f; box-shadow: none; }
:root[data-theme="comic"] main::before { border: 2.5px solid #111; }
:root[data-theme="comic"] main::after { display: none; }
:root[data-theme="comic"] .display { font-weight: 800; letter-spacing: -.02em; }
:root[data-theme="comic"] .display .year { background: #ff5c8a; color: #fff; padding: 0 6px; border: 2.5px solid #111; border-radius: 8px; }
:root[data-theme="comic"] .now-bar { background: #111; color: #fff; }
:root[data-theme="comic"] .tl-pill, :root[data-theme="comic"] .wk-pill { border: 2px solid #111; }

/* Arcade: retro video game, pixel type, neon on purple */
:root[data-theme="arcade"] {
  --bg: #1a1033; --rail: #140b29; --surface: #22154a; --surface-2: #2d1d5e;
  --ink: #f6f0ff; --ink-2: #d6c9ff; --muted: #9d8fd1; --line: #3a2a73;
  --accent: #39ff9e; --accent-soft: #1d3a3a; --on-accent: #120a26; --late: #ff5c8a;
  --heading: "Press Start 2P", monospace; --sans: "VT323", monospace;
  --radius: 4px; --card-border: #39ff9e; --shadow: none;
  --p1: #1d3a3a; --i1: #39ff9e; --p2: #3a1d4a; --i2: #ff5cf0; --p3: #1b2f4a; --i3: #5ce1ff;
  --p4: #3a361a; --i4: #ffe14d; --p5: #3a221d; --i5: #ff7a5c; --p6: #2a1d4a; --i6: #b388ff;
  --tint-1: #1f2a40; --tint-2: #2a1d4a; --tint-3: #1d3a2e; --tint-4: #2e2a1a; --tint-5: #3a1d38; --tint-6: #1b2140;
  --h0: #5ce1ff; --h1: #ff7a5c; --h2: #39ff9e; --h3: #ffe14d; --h4: #ff5cf0; --h5: #8aff5c; --h6: #b388ff; --h7: #ff5c8a;
  --blue: #5ce1ff; --green: #39ff9e; --yellow: #ffe14d; --violet: #b388ff; --pink: #ff5cf0; --chart: #5ce1ff;
  color-scheme: dark;
}
:root[data-theme="arcade"] body { font-size: 19px; }
:root[data-theme="arcade"] .display { font-size: 17px !important; line-height: 1.5; font-weight: 400; }
:root[data-theme="arcade"] .card-head h3, :root[data-theme="arcade"] .card-title, :root[data-theme="arcade"] .mini strong,
:root[data-theme="arcade"] .h4, :root[data-theme="arcade"] .period-bar strong, :root[data-theme="arcade"] .empty-art b { font-size: 11px !important; line-height: 1.6; font-weight: 400; }
:root[data-theme="arcade"] .eyebrow { font-family: "Press Start 2P", monospace; font-size: 9px !important; letter-spacing: 0; }
:root[data-theme="arcade"] .todo-title, :root[data-theme="arcade"] .add-todo input { font-size: 19px !important; }
:root[data-theme="arcade"] .todo-meta, :root[data-theme="arcade"] .small, :root[data-theme="arcade"] .muted, :root[data-theme="arcade"] .tl-time,
:root[data-theme="arcade"] .hname, :root[data-theme="arcade"] .rail-btn span, :root[data-theme="arcade"] .dots-head span { font-size: 15px !important; }
:root[data-theme="arcade"] .tl-title, :root[data-theme="arcade"] .btn, :root[data-theme="arcade"] .seg button { font-size: 17px !important; }
:root[data-theme="arcade"] .card, :root[data-theme="arcade"] .dots-card, :root[data-theme="arcade"] .tile, :root[data-theme="arcade"] .hcard { border: 2px solid var(--sec-ink, var(--accent)); }
:root[data-theme="arcade"] body[data-tab="today"] .card.tint-1 { border-color: #39ff9e; } :root[data-theme="arcade"] .card.tint-2 { border-color: #b388ff; }
:root[data-theme="arcade"] .habits-card { border-color: #ffe14d !important; } :root[data-theme="arcade"] .schedule { border-color: #5ce1ff !important; }
:root[data-theme="arcade"] .check { border-radius: 2px; border-color: var(--accent); }
:root[data-theme="arcade"] .hcirc, :root[data-theme="arcade"] .rdot { border-radius: 6px !important; }
:root[data-theme="arcade"] main::before, :root[data-theme="arcade"] main::after { display: none; }
:root[data-theme="arcade"] .display .year { color: #ffe14d; }
:root[data-theme="arcade"] .now-bar { background: #39ff9e; color: #120a26; border-radius: 4px; }
:root[data-theme="arcade"] .tl-pill, :root[data-theme="arcade"] .wk-pill { border-radius: 6px; }

/* Kitties: paw prints for ticks, cats instead of the other drawings */
:root[data-theme="cats"] {
  --bg: #fff3e6; --rail: #fbe7d3; --surface: #fffaf4; --surface-2: #f8eadb;
  --ink: #3a2a20; --ink-2: #5e4a3c; --muted: #a08b7a; --line: #f0dfcc;
  --accent: #e07a3c; --accent-soft: #fde3cc; --on-accent: #ffffff; --late: #c8402f;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif; --sans: "DM Sans", -apple-system, system-ui, sans-serif;
  --radius: 22px; --card-border: transparent; --shadow: 0 6px 22px -14px rgba(90, 50, 20, .3);
  --p1: #ffd9b8; --i1: #b5531c; --p2: #e8e0f7; --i2: #6a4fb3; --p3: #dcebf7; --i3: #2f6a9e;
  --p4: #dff1dc; --i4: #3f7a3a; --p5: #fbdbe3; --i5: #a8406a; --p6: #fff0c4; --i6: #93700a;
  --tint-1: #ffe2c8; --tint-2: #ece5f8; --tint-3: #e3f3e0; --tint-4: #fff3cf; --tint-5: #fde2e9; --tint-6: #eef5fb;
  --h0: #8db6ea; --h1: #f2a684; --h2: #7fcfae; --h3: #f2c96e; --h4: #f0a6c2; --h5: #a3cc8f; --h6: #b4a8ee; --h7: #ee9d9d;
  color-scheme: light;
}
:root[data-theme="cats"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e07a3c' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="cats"] .check { border: 0; background: url("emoji/paw.svg") center / 17px no-repeat; opacity: .28; filter: grayscale(1); }
:root[data-theme="cats"] .check.on { background-color: transparent; opacity: 1; filter: none; }
:root[data-theme="cats"] .check.on::after { display: none; }
:root[data-theme="cats"] .display { font-weight: 700; }

/* Candy: sweet colours, bubbly type, soft "sticker" shadows */
:root[data-theme="candy"] {
  --bg: #ffe9f5; --rail: #ffd9ef; --surface: #ffffff; --surface-2: #fff0f8;
  --ink: #3d1f3a; --ink-2: #6b3f66; --muted: #b07aa6; --line: #ffd0ea;
  --accent: #ff3fa4; --accent-soft: #ffd6ec; --on-accent: #ffffff; --late: #e0244f;
  --heading: "Baloo 2", ui-rounded, system-ui, sans-serif; --sans: "Baloo 2", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: 0 5px 0 rgba(255, 63, 164, .16);
  --p1: #c9f5ff; --i1: #157a99; --p2: #e5d6ff; --i2: #7b3ff2; --p3: #fff3a8; --i3: #8a6d00;
  --p4: #d6ffc9; --i4: #2f8a1f; --p5: #ffd0e6; --i5: #c2297a; --p6: #ffe0b8; --i6: #b35c00;
  --tint-1: #ffffff; --tint-2: #f1e8ff; --tint-3: #e6ffde; --tint-4: #fff7c4; --tint-5: #ffe0ef; --tint-6: #e8fbff;
  --h0: #4fc3f7; --h1: #ff8a3d; --h2: #4cd964; --h3: #ffd23f; --h4: #ff5fb2; --h5: #2ec4b6; --h6: #9b5cff; --h7: #ff4f6d;
  --blue: #4fc3f7; --green: #4cd964; --yellow: #ffd23f; --violet: #9b5cff; --pink: #ff5fb2; --chart: #9b5cff;
  color-scheme: light;
}
:root[data-theme="candy"] .display { font-weight: 800; color: var(--accent); }
:root[data-theme="candy"] body[data-tab="today"] .display::after { content: " ✨"; }
:root[data-theme="candy"] .card-head h3, :root[data-theme="candy"] .card-title { color: #7b3ff2; font-weight: 800; }
:root[data-theme="candy"] body { font-weight: 500; }
:root[data-theme="candy"] .card.focus { box-shadow: 0 5px 0 #ffb3dd; }
:root[data-theme="arcade"] .mini strong { font-family: "VT323", monospace; font-size: 19px !important; line-height: 1.1; }
:root[data-theme="arcade"] .today-sub { font-size: 16px; }
:root[data-theme="comic"] main::before { border: 0; }

/* Feel like a native app on iPhone: no double-tap zoom, no rubber-band bounce on the page, no grey tap flashes */
html, body { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }

/* Work / Personal */
.area-row { padding: 2px 14px 4px; }
.area-seg { display: inline-flex; }
.area-seg button { padding: 3px 12px; font-size: 12.5px; }
.area-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.area-dot.work { background: #4472c4; }
.area-dot.personal { background: #ef7655; }
.habits-card .card-head { gap: 6px; }
.habits-card .card-head h3 { flex: 1; }
.manage-list { display: grid; gap: 4px; margin-bottom: 6px; }
.manage-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; text-align: left; font-size: 15px; }
.manage-row:hover { background: var(--surface-2); }
.manage-row span:nth-child(2) { flex: 1; }
.manage-row svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.mchip .emo { width: 16px; height: 16px; }
.mchip.radio:has(input:checked) .emo { filter: brightness(1.1); }

/* Habit & self-care icons: colour line icon on a tinted circle (style C) */
.hbtn .hcirc { background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); box-shadow: none; }
.hbtn .hcirc .ti { font-size: 23px; opacity: .75; }
.hbtn.on .hcirc { background: var(--c); color: #fff; box-shadow: none; }
.hbtn.on .hcirc .ti { opacity: 1; }
.hcirc.big { background: var(--c); color: #fff; }
.hcirc.big .ti { font-size: 22px; }
.hcirc.tiny { color: var(--c); }
.hcirc.tiny .ti { font-size: 14px; }
.manage-row .hcirc.tiny { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
/* Icon picker by category */
.icon-group { margin-bottom: 10px; }
.icon-group > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 2px 5px; }
.icon-pick i .ti { font-size: 20px; }

/* Citrus: the big screen title in pink on every section (Today keeps "Sunday" black with a pink number) */
:root[data-theme="citrus"] body:not([data-tab="today"]) .display { color: #d6336c; }
/* Citrus: menu icons in pink (circles unchanged) */
:root[data-theme="citrus"] .rail-btn .rdot { color: #d6336c; }
:root[data-theme="citrus"] .rail-btn.on { color: #d6336c; }

/* ---------- Index: white file cards with a coloured tab (navy, red, brown, green, mustard, petrol) ---------- */
:root[data-theme="index"] {
  --bg: #ffffff; --rail: #fafafa; --surface: #ffffff; --surface-2: #f4f4f4;
  --ink: #1b1b1b; --ink-2: #444444; --muted: #8a8a8a; --line: #e6e6e6;
  --accent: #2f5597; --accent-soft: #e8eef8; --on-accent: #ffffff; --late: #c0392b;
  --heading: "Work Sans", system-ui, sans-serif; --sans: "Work Sans", -apple-system, system-ui, sans-serif;
  --radius: 10px; --card-border: #2f5597; --shadow: none;
  --h0: #2f5597; --h1: #c0392b; --h2: #3d7a3a; --h3: #c08a00; --h4: #8b5a2b; --h5: #1f6f78; --h6: #6b4c9a; --h7: #d35400;
  --blue: #2f5597; --green: #3d7a3a; --yellow: #c08a00; --violet: #6b4c9a; --pink: #c0392b; --chart: #2f5597;
  color-scheme: light;
}
:root[data-theme="index"] main::before, :root[data-theme="index"] main::after { display: none; }
:root[data-theme="index"] .rail { border-right: 1px solid #eeeeee; }
:root[data-theme="index"] .rail-btn .rdot { background: #f3f3f3; color: #444; }
:root[data-theme="index"] .rail-btn.on .rdot { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="index"] .rail-btn.on { color: var(--accent); }
:root[data-theme="index"] .display { font-weight: 700; letter-spacing: -.02em; }
:root[data-theme="index"] .display .year, :root[data-theme="index"] .display em { color: var(--t2); font-style: normal; }
:root[data-theme="index"] body[data-tab] .eyebrow { color: #8a8a8a; }
/* Every card is white with a thin border in its tab colour */
:root[data-theme="index"] .card, :root[data-theme="index"] .dots-card, :root[data-theme="index"] .tile, :root[data-theme="index"] .hcard,
:root[data-theme="index"] main .card.list-card, :root[data-theme="index"] body:not([data-tab="today"]) main .card,
:root[data-theme="index"] body:not([data-tab="today"]) main .card.focus {
  background: var(--surface) !important; border: 1.5px solid var(--tab, var(--t1)); box-shadow: none; overflow: visible; position: relative;
}
:root[data-theme="index"] .card, :root[data-theme="index"] .dots-card, :root[data-theme="index"] .hcard { margin-top: 14px; }
:root[data-theme="index"] .duo { margin-top: 4px; }
/* The tab: the card title sits on the top border */
:root[data-theme="index"] .card-head h3, :root[data-theme="index"] .card-title, :root[data-theme="index"] .card-head .h4, :root[data-theme="index"] .dots-head span {
  position: absolute; top: -13px; left: 12px; margin: 0; background: var(--tab, var(--t1)); color: #fff !important;
  font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px 5px; border-radius: 7px 7px 0 0;
}
:root[data-theme="index"] .card-title .muted { color: rgba(255,255,255,.8); font: inherit; text-transform: none; }
:root[data-theme="index"] .card-title::before, :root[data-theme="index"] .card-head h3::before { display: none; }
:root[data-theme="index"] .card-head { padding-top: 14px; }
:root[data-theme="index"] .card.pad { padding-top: 20px; }
:root[data-theme="index"] .card.pad > .card-head.flush { padding-top: 0; }
:root[data-theme="index"] .dots-head { padding-top: 6px; }
:root[data-theme="index"] .dots-head b { margin-left: auto; color: var(--tab); }
:root[data-theme="index"] .mini strong { color: var(--tab); }
:root[data-theme="index"] .mini-icon { background: #f4f4f4; }
/* Tab colours, in turn */
:root[data-theme="index"] .card:nth-of-type(6n+1), :root[data-theme="index"] .dots-card:nth-of-type(6n+1) { --tab: var(--t1); }
:root[data-theme="index"] .card:nth-of-type(6n+2), :root[data-theme="index"] .dots-card:nth-of-type(6n+2) { --tab: var(--t2); }
:root[data-theme="index"] .card:nth-of-type(6n+3), :root[data-theme="index"] .dots-card:nth-of-type(6n+3) { --tab: var(--t3); }
:root[data-theme="index"] .card:nth-of-type(6n+4), :root[data-theme="index"] .dots-card:nth-of-type(6n+4) { --tab: var(--t4); }
:root[data-theme="index"] .card:nth-of-type(6n+5), :root[data-theme="index"] .dots-card:nth-of-type(6n+5) { --tab: var(--t5); }
:root[data-theme="index"] .card:nth-of-type(6n+6), :root[data-theme="index"] .dots-card:nth-of-type(6n+6) { --tab: var(--t6); }
/* Today: fixed colours per card */
:root[data-theme="index"] .card.tint-1 { --tab: var(--t1); }
:root[data-theme="index"] .card.mini.tint-4 { --tab: var(--t2); }
:root[data-theme="index"] .card.mini.tint-2 { --tab: var(--t6); }
:root[data-theme="index"] .dots-card.tint-4 { --tab: var(--t4); }
:root[data-theme="index"] .dots-card.tint-5 { --tab: var(--t5); }
:root[data-theme="index"] .schedule { --tab: var(--t3); }
:root[data-theme="index"] .habits-card { --tab: var(--t4); }
:root[data-theme="index"] .dots i.l1 { background: #c9d6ec; } :root[data-theme="index"] .dots i.l2 { background: #7f9bcf; } :root[data-theme="index"] .dots i.l3 { background: #2f5597; }
:root[data-theme="index"] .cal-wd, :root[data-theme="index"] .wk-head { background: #f1f1f1; }
:root[data-theme="index"] .now-bar { background: #1b1b1b; }
:root[data-theme="index"] .seg { background: #f4f4f4; border-color: #e6e6e6; }
:root[data-theme="index"] .card-head { justify-content: flex-end; min-height: 24px; }
:root[data-theme="index"] .habits-card .card-head h3 { flex: none; }
:root[data-theme="index"] .habits-card .card-head { gap: 6px; }
/* Work / Personal dots: turquoise and peach-pink */
.area-dot.work { background: #1a9fd0; }
.area-dot.personal { background: #f6a089; }

/* Summarise button under the Plan tabs */
.sum-row { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.sum-row .ti { width: 15px; height: 15px; }

/* A to-do that wasn't done that day and moved on: stays there in grey */
.todo.trace { opacity: .55; }
.todo.trace .trace-check { border-style: dashed; pointer-events: none; }
.todo.trace .todo-meta { color: var(--muted); }
.qm-title { font-size: 20px; margin-bottom: 14px; }
.qm { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qm .mchip { font-size: 15px; padding: 10px 14px; }

/* Galaxy: navy night with stars, a peach planet behind the title, pastel planets for colours */
:root[data-theme="galaxy"] {
  --bg: #0f1230; --rail: #0b0d26; --surface: #191c45; --surface-2: #232758;
  --ink: #eef0ff; --ink-2: #c9cdf2; --muted: #9399cf; --line: #2c3170;
  --accent: #b9a6f2; --accent-soft: #2f2a5e; --on-accent: #15112e; --late: #ff8fa8;
  --heading: "Fredoka", ui-rounded, system-ui, sans-serif; --sans: "Nunito", -apple-system, system-ui, sans-serif;
  --radius: 22px; --card-border: rgba(185, 166, 242, .18); --shadow: 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px -18px rgba(120, 100, 255, .5);
  --p1: #2c2a5c; --i1: #c7b8ff; --p2: #23365a; --i2: #9fd0ff; --p3: #1f3f45; --i3: #8fe0c8; --p4: #3d3047; --i4: #ffc2a0;
  --p5: #43294a; --i5: #f3a8d6; --p6: #3f3a26; --i6: #f5d98a;
  --tint-1: #232758; --tint-2: #2a2453; --tint-3: #1d3542; --tint-4: #33283f; --tint-5: #362544; --tint-6: #1d2450;
  --h0: #8fc8f2; --h1: #f2a684; --h2: #7fcfae; --h3: #f5d98a; --h4: #f3a8d6; --h5: #a3e08f; --h6: #b9a6f2; --h7: #ff8fa8;
  --blue: #8fc8f2; --green: #9d8cf0; --yellow: #f5d98a; --violet: #b9a6f2; --pink: #f3a8d6; --chart: #b9a6f2;
  --sl-bad: #f2a684; --sl-good: #b9a6f2;
  color-scheme: dark;
}
:root[data-theme="galaxy"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 120px, #d9d2ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 230px 170px, #b9e3ff 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 210px, #fff 50%, transparent 51%);
  background-size: 260px 240px; background-attachment: fixed;
}
:root[data-theme="galaxy"] main::before { top: -50px; right: -50px; width: 170px; height: 170px; background: #f2a684; box-shadow: inset -26px -18px 0 #d9825f; opacity: .9; }
:root[data-theme="galaxy"] main::after { top: 18px; right: -86px; width: 250px; height: 46px; background: transparent; border: 3px solid rgba(245, 217, 138, .55); transform: rotate(-16deg); }
:root[data-theme="galaxy"] .display { font-weight: 700; }
:root[data-theme="galaxy"] .display .year { color: #f5d98a; }
:root[data-theme="galaxy"] .dots i.l3 { box-shadow: 0 0 6px rgba(185, 166, 242, .8); }
:root[data-theme="galaxy"] .check.on { box-shadow: 0 0 8px rgba(185, 166, 242, .7); }
:root[data-theme="galaxy"] .now-bar { background: #b9a6f2; color: #15112e; }

/* Windows 95: teal desktop, grey bevelled windows with a blue title bar, square ticks */
:root[data-theme="win95"] {
  --bg: #008080; --rail: #c0c0c0; --surface: #c0c0c0; --surface-2: #ffffff;
  --ink: #000000; --ink-2: #202020; --muted: #404040; --line: #808080;
  --accent: #000080; --accent-soft: #c3c7e6; --on-accent: #ffffff; --late: #c00000;
  --heading: "VT323", monospace; --sans: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --radius: 0px; --card-border: transparent; --shadow: none;
  --p1: #c0c0c0; --i1: #000080; --p2: #c0c0c0; --i2: #800000; --p3: #c0c0c0; --i3: #008000;
  --p4: #c0c0c0; --i4: #808000; --p5: #c0c0c0; --i5: #800080; --p6: #c0c0c0; --i6: #008080;
  --tint-1: #c0c0c0; --tint-2: #c0c0c0; --tint-3: #c0c0c0; --tint-4: #c0c0c0; --tint-5: #c0c0c0; --tint-6: #c0c0c0;
  --h0: #000080; --h1: #c04000; --h2: #008000; --h3: #b08800; --h4: #a0207a; --h5: #008080; --h6: #5a2d9c; --h7: #c00000;
  --blue: #000080; --green: #000080; --yellow: #b08800; --violet: #5a2d9c; --pink: #a0207a; --chart: #000080;
  --sl-bad: #ffffff; --sl-good: #000080;
  --w-hi: #ffffff; --w-lo: #808080; --w-dk: #000000;
  color-scheme: light;
}
:root[data-theme="win95"] body { font-size: 14px; }
:root[data-theme="win95"] main::before, :root[data-theme="win95"] main::after { display: none; }
/* Raised grey windows */
:root[data-theme="win95"] .card, :root[data-theme="win95"] .dots-card, :root[data-theme="win95"] .tile, :root[data-theme="win95"] .hcard,
:root[data-theme="win95"] .sheet-panel, :root[data-theme="win95"] .btn, :root[data-theme="win95"] .mchip, :root[data-theme="win95"] .pill,
:root[data-theme="win95"] .icon-btn, :root[data-theme="win95"] .now-bar {
  background: #c0c0c0 !important; color: #000; border-radius: 0 !important;
  border: 2px solid; border-color: var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
  box-shadow: inset -1px -1px 0 var(--w-lo), inset 1px 1px 0 #dfdfdf !important;
}
:root[data-theme="win95"] .btn:active, :root[data-theme="win95"] .mchip:active, :root[data-theme="win95"] .mchip.on, :root[data-theme="win95"] .pill:has(input:checked) {
  border-color: var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk); box-shadow: inset 1px 1px 0 var(--w-lo) !important;
}
:root[data-theme="win95"] .btn.primary { font-weight: 700; outline: 1px solid #000; outline-offset: -5px; }
/* The blue title bar on every window */
:root[data-theme="win95"] .card-head, :root[data-theme="win95"] .card.pad > .card-title:first-child, :root[data-theme="win95"] .dots-head {
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; margin: 2px 2px 8px; padding: 3px 8px; border-radius: 0;
}
:root[data-theme="win95"] .card.pad > .card-title:first-child { margin: -14px -16px 12px; }
:root[data-theme="win95"] .card-head h3, :root[data-theme="win95"] .card-head .muted, :root[data-theme="win95"] .card-head span,
:root[data-theme="win95"] .dots-head span, :root[data-theme="win95"] .dots-head b { color: #fff !important; font-family: Verdana, Tahoma, sans-serif; font-size: 13px; font-weight: 700; }
:root[data-theme="win95"] .card-head .progress-label svg { display: none; }
:root[data-theme="win95"] .card-head .link, :root[data-theme="win95"] .card-head button { color: #fff; }
/* Sunken white fields and square ticks */
:root[data-theme="win95"] .input, :root[data-theme="win95"] select, :root[data-theme="win95"] textarea, :root[data-theme="win95"] .add-todo input {
  background: #fff; border-radius: 0; border: 2px solid; border-color: var(--w-lo) var(--w-hi) var(--w-hi) var(--w-lo); box-shadow: inset 1px 1px 0 var(--w-dk);
}
:root[data-theme="win95"] .check { border-radius: 0 !important; background: #fff; border: 2px solid; border-color: var(--w-lo) var(--w-hi) var(--w-hi) var(--w-lo); box-shadow: inset 1px 1px 0 var(--w-dk); }
:root[data-theme="win95"] .check.on { background: #fff; }
:root[data-theme="win95"] .check.on::after { border-color: #000; }
:root[data-theme="win95"] .hcirc, :root[data-theme="win95"] .rdot { border-radius: 0 !important; }
:root[data-theme="win95"] .dots i { border-radius: 0; }
/* The desktop around the windows: white text on teal */
:root[data-theme="win95"] .page-head, :root[data-theme="win95"] .page-head .eyebrow, :root[data-theme="win95"] .page-head .sub,
:root[data-theme="win95"] .today-head, :root[data-theme="win95"] .today-head .eyebrow, :root[data-theme="win95"] .week-strip { color: #fff; }
:root[data-theme="win95"] .display { font-size: 40px; font-weight: 400; color: #fff; text-shadow: 1px 1px 0 #000; }
:root[data-theme="win95"] .display .year { color: #ffff00; }
:root[data-theme="win95"] .page-head .icon-btn, :root[data-theme="win95"] .today-head .icon-btn { color: #000; }
/* Taskbar-like sidebar */
:root[data-theme="win95"] .rail { border-right: 2px solid var(--w-dk); box-shadow: inset -1px 0 0 var(--w-lo), inset 1px 0 0 var(--w-hi); }
:root[data-theme="win95"] .rail-btn { border-radius: 0; color: #000; }
:root[data-theme="win95"] .rail-btn.on { background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk); }
:root[data-theme="win95"] .seg { background: #c0c0c0; border-radius: 0; border: 2px solid; border-color: var(--w-lo) var(--w-hi) var(--w-hi) var(--w-lo); }
:root[data-theme="win95"] .seg button { border-radius: 0; color: #000; }
:root[data-theme="win95"] .seg button.on { background: #c0c0c0; border: 2px solid; border-color: var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi); box-shadow: none; font-weight: 700; }
:root[data-theme="win95"] .tl-pill, :root[data-theme="win95"] .wk-pill { border-radius: 0; }
:root[data-theme="win95"] .sheet-grab { background: #000080; border-radius: 0; }
:root[data-theme="win95"] .summary-box { background: #fff; border-radius: 0; border: 2px solid; border-color: var(--w-lo) var(--w-hi) var(--w-hi) var(--w-lo); }
:root[data-theme="win95"] .today-sub, :root[data-theme="win95"] .ws-day, :root[data-theme="win95"] .ws-day b { color: #fff; }
:root[data-theme="win95"] .ws-day.today b { color: #ffff00; }
:root[data-theme="win95"] .ws-day.sel b { background: #000080; color: #fff; }
:root[data-theme="win95"] .dots-head { margin: -10px -12px 10px; gap: 8px; }
:root[data-theme="win95"] .mini strong { font: 700 13px Verdana, Tahoma, sans-serif !important; }
:root[data-theme="win95"] .card.pad > .card-head { margin: -14px -16px 12px; padding: 3px 8px; }
:root[data-theme="win95"] .card-head > .muted.small { display: none; }

/* Vaporwave A: neon night. Violet sky, striped sun, neon grid at the bottom, dark cards with a neon edge */
:root[data-theme="vaporwave"] {
  --bg: #2b1055; --rail: #1c0a3d; --surface: rgba(26, 10, 58, .86); --surface-2: #3a1a6e;
  --ink: #fdf3ff; --ink-2: #e2c9ff; --muted: #b59ad9; --line: #5a2f8f;
  --accent: #ff6ec7; --accent-soft: #4a1a5e; --on-accent: #1a0a3a; --late: #ffd36e;
  --heading: "VT323", monospace; --sans: "VT323", monospace;
  --radius: 12px; --card-border: #ff6ec7; --shadow: 0 0 12px rgba(255, 110, 199, .45);
  --p1: #3a1a6e; --i1: #5ef7ff; --p2: #4a1a5e; --i2: #ff6ec7; --p3: #1f2a6e; --i3: #8fb8ff;
  --p4: #4a2a3e; --i4: #ffd36e; --p5: #3e1a4e; --i5: #ff9ee0; --p6: #1a3a5e; --i6: #7affd4;
  --tint-1: rgba(26,10,58,.86); --tint-2: rgba(26,10,58,.86); --tint-3: rgba(26,10,58,.86); --tint-4: rgba(26,10,58,.86); --tint-5: rgba(26,10,58,.86); --tint-6: rgba(26,10,58,.86);
  --h0: #5ef7ff; --h1: #ff6ec7; --h2: #7affd4; --h3: #ffd36e; --h4: #ff9ee0; --h5: #b388ff; --h6: #8fb8ff; --h7: #ff8f6e;
  --blue: #5ef7ff; --green: #5ef7ff; --yellow: #ffd36e; --violet: #b388ff; --pink: #ff6ec7; --chart: #5ef7ff;
  --sl-bad: #ff6ec7; --sl-good: #5ef7ff;
  color-scheme: dark;
  background: linear-gradient(#2b1055 0%, #5a1e7a 45%, #b23a9e 72%, #ff6ec7 100%) fixed;
}
:root[data-theme="vaporwave"] body { background: transparent; font-size: 19px; }
:root[data-theme="vaporwave"] body::after {
  content: ""; position: fixed; left: -30%; right: -30%; bottom: 0; height: 30vh; z-index: -2; pointer-events: none;
  background: #1a0a3a; background-image: linear-gradient(#5ef7ff 1px, transparent 1px), linear-gradient(90deg, #5ef7ff 1px, transparent 1px);
  background-size: 34px 22px; transform: perspective(160px) rotateX(48deg); transform-origin: bottom; opacity: .75;
}
:root[data-theme="vaporwave"] main::before { top: -40px; right: -40px; width: 190px; height: 190px; background: repeating-linear-gradient(#ffd36e 0 12px, #ff6ec7 12px 16px); clip-path: inset(0 0 40% 0); opacity: .9; }
:root[data-theme="vaporwave"] main::after { display: none; }
:root[data-theme="vaporwave"] .display { font-family: "Monoton", "VT323", monospace; font-weight: 400; font-size: 30px; color: #5ef7ff; text-shadow: 0 0 10px #5ef7ff; letter-spacing: 1px; }
:root[data-theme="vaporwave"] .display .year { color: #ffd36e; text-shadow: 0 0 10px #ffd36e; }
:root[data-theme="vaporwave"] .card, :root[data-theme="vaporwave"] .dots-card, :root[data-theme="vaporwave"] .tile, :root[data-theme="vaporwave"] .hcard { border: 1px solid #ff6ec7; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
:root[data-theme="vaporwave"] .card-head h3, :root[data-theme="vaporwave"] .card-title, :root[data-theme="vaporwave"] .mini strong { color: #ff6ec7; font-size: 22px; font-weight: 400; }
:root[data-theme="vaporwave"] .todo-title, :root[data-theme="vaporwave"] .add-todo input { font-size: 20px !important; }
:root[data-theme="vaporwave"] .check { border-radius: 3px; transform: rotate(45deg) scale(.85); border-color: #5ef7ff; }
:root[data-theme="vaporwave"] .check.on { background: #5ef7ff; box-shadow: 0 0 8px #5ef7ff; }
:root[data-theme="vaporwave"] .check.on::after { transform: rotate(-90deg) translate(1px, 0); border-color: #1a0a3a; }
:root[data-theme="vaporwave"] .dots i.l3 { box-shadow: 0 0 6px #5ef7ff; }
:root[data-theme="vaporwave"] .sheet-panel { background: #1f0b45; border-top: 1px solid #ff6ec7; }
:root[data-theme="vaporwave"] .now-bar { background: #ff6ec7; color: #1a0a3a; }
:root[data-theme="vaporwave"] .rail { background: rgba(28, 10, 61, .92); }

/* Vaporwave B: pastel daytime. Pink-lilac-mint sky, striped sun, Windows 98 style windows with a pink-blue title bar */
:root[data-theme="vaporpastel"] {
  --bg: #e9d9ff; --rail: #fbeaff; --surface: #ffffff; --surface-2: #f6effd;
  --ink: #3a2a6a; --ink-2: #5a4890; --muted: #8a7ab8; --line: #d9c9f2;
  --accent: #ff6ec7; --accent-soft: #ffe0f2; --on-accent: #ffffff; --late: #e0457b;
  --heading: "Syncopate", "Josefin Sans", sans-serif; --sans: "VT323", monospace;
  --radius: 0px; --card-border: #3a2a6a; --shadow: 4px 4px 0 #5ec8ff;
  --p1: #ffe0f2; --i1: #c4357f; --p2: #dff3ff; --i2: #2a7fb8; --p3: #e0fbf4; --i3: #1f8a6f;
  --p4: #fff3d6; --i4: #a87a10; --p5: #efe3ff; --i5: #6a3ab8; --p6: #ffe6dc; --i6: #c25a3a;
  --tint-1: #ffffff; --tint-2: #ffffff; --tint-3: #ffffff; --tint-4: #ffffff; --tint-5: #ffffff; --tint-6: #ffffff;
  --h0: #5ec8ff; --h1: #ff6ec7; --h2: #4fd8b8; --h3: #ffc85e; --h4: #c79bff; --h5: #8ee08f; --h6: #ff9e7a; --h7: #ff7aa8;
  --blue: #5ec8ff; --green: #ff6ec7; --yellow: #ffc85e; --violet: #c79bff; --pink: #ff6ec7; --chart: #ff6ec7;
  --sl-bad: #5ec8ff; --sl-good: #ff6ec7;
  color-scheme: light;
  background: linear-gradient(160deg, #ffd6ec 0%, #d9c7ff 50%, #b8f2ea 100%) fixed;
}
:root[data-theme="vaporpastel"] body { background: transparent; font-size: 19px; }
:root[data-theme="vaporpastel"] main::before { top: -30px; right: -50px; width: 180px; height: 180px; background: repeating-linear-gradient(#ff9ecf 0 12px, #ffc8a0 12px 16px); opacity: .85; }
:root[data-theme="vaporpastel"] main::after { display: none; }
:root[data-theme="vaporpastel"] .display { font-weight: 700; font-size: 24px; color: #fff; text-shadow: 2px 2px 0 #ff6ec7, 4px 4px 0 #5ec8ff; letter-spacing: 1px; }
:root[data-theme="vaporpastel"] .display .year { color: #fff; }
:root[data-theme="vaporpastel"] .card, :root[data-theme="vaporpastel"] .dots-card, :root[data-theme="vaporpastel"] .tile, :root[data-theme="vaporpastel"] .hcard { border: 2px solid #3a2a6a; background: #fff !important; }
:root[data-theme="vaporpastel"] main .card:nth-of-type(even), :root[data-theme="vaporpastel"] .dots-card:nth-child(even) { box-shadow: 4px 4px 0 #ff6ec7; }
:root[data-theme="vaporpastel"] .card-head, :root[data-theme="vaporpastel"] .card.pad > .card-title:first-child, :root[data-theme="vaporpastel"] .dots-head {
  background: linear-gradient(90deg, #ff6ec7, #5ec8ff); color: #fff; padding: 2px 10px; margin: 0 0 8px;
}
:root[data-theme="vaporpastel"] .card.pad > .card-title:first-child, :root[data-theme="vaporpastel"] .card.pad > .card-head { margin: -16px -18px 12px; }
:root[data-theme="vaporpastel"] .dots-head { margin: -12px -14px 10px; gap: 8px; }
:root[data-theme="vaporpastel"] .card-head h3, :root[data-theme="vaporpastel"] .card-head span, :root[data-theme="vaporpastel"] .card-head .link, :root[data-theme="vaporpastel"] .card-head button,
:root[data-theme="vaporpastel"] .dots-head span, :root[data-theme="vaporpastel"] .dots-head b, :root[data-theme="vaporpastel"] .card-title { color: #fff !important; font: 400 20px "VT323", monospace; }
:root[data-theme="vaporpastel"] .card-head > .muted.small { display: none; }
:root[data-theme="vaporpastel"] .card-head .progress-label svg { display: none; }
:root[data-theme="vaporpastel"] .todo-title, :root[data-theme="vaporpastel"] .add-todo input { font-size: 20px !important; }
:root[data-theme="vaporpastel"] .mini strong { font: 400 20px "VT323", monospace; }
:root[data-theme="vaporpastel"] .check { border-radius: 0; border: 2px solid #3a2a6a; }
:root[data-theme="vaporpastel"] .btn, :root[data-theme="vaporpastel"] .mchip, :root[data-theme="vaporpastel"] .pill, :root[data-theme="vaporpastel"] .seg, :root[data-theme="vaporpastel"] .input { border-radius: 0; border: 2px solid #3a2a6a; }
:root[data-theme="vaporpastel"] .seg button { border-radius: 0; }
:root[data-theme="vaporpastel"] .seg button.on { background: #ff6ec7; color: #fff; }
:root[data-theme="vaporpastel"] .rail-btn { border-radius: 0; }
:root[data-theme="vaporpastel"] .sheet-panel { border-radius: 0; border-top: 3px solid #3a2a6a; }
:root[data-theme="vaporpastel"] .now-bar { background: #3a2a6a; color: #fff; border-radius: 0; box-shadow: 4px 4px 0 #ff6ec7; }

/* Bauhaus: cream, black lines and the three primaries; circle, square and triangle */
:root[data-theme="bauhaus"] {
  --bg: #f2ede1; --rail: #e9e3d3; --surface: #ffffff; --surface-2: #f7f3ea;
  --ink: #111111; --ink-2: #2a2a2a; --muted: #6b665c; --line: #d8d1c0;
  --accent: #1f4fa3; --accent-soft: #dfe6f3; --on-accent: #ffffff; --late: #e63b2e;
  --heading: "Josefin Sans", "Futura", sans-serif; --sans: "Josefin Sans", "Futura", -apple-system, sans-serif;
  --radius: 0px; --card-border: #111; --shadow: none;
  --p1: #f2ede1; --i1: #1f4fa3; --p2: #f2ede1; --i2: #e63b2e; --p3: #f2ede1; --i3: #c99a00;
  --p4: #f2ede1; --i4: #111111; --p5: #f2ede1; --i5: #e63b2e; --p6: #f2ede1; --i6: #1f4fa3;
  --tint-1: #ffffff; --tint-2: #ffffff; --tint-3: #ffffff; --tint-4: #ffffff; --tint-5: #ffffff; --tint-6: #ffffff;
  --h0: #1f4fa3; --h1: #e63b2e; --h2: #f4c430; --h3: #111111; --h4: #1f4fa3; --h5: #e63b2e; --h6: #f4c430; --h7: #555555;
  --blue: #1f4fa3; --green: #1f4fa3; --yellow: #f4c430; --violet: #1f4fa3; --pink: #e63b2e; --chart: #1f4fa3;
  --sl-bad: #e63b2e; --sl-good: #1f4fa3;
  color-scheme: light;
}
:root[data-theme="bauhaus"] main::before { top: -60px; right: -60px; width: 170px; height: 170px; background: #e63b2e; }
:root[data-theme="bauhaus"] main::after { top: 64px; right: 70px; width: 64px; height: 56px; border-radius: 0; background: #f4c430; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-theme="bauhaus"] .display { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
:root[data-theme="bauhaus"] .eyebrow { letter-spacing: .2em; }
:root[data-theme="bauhaus"] .card, :root[data-theme="bauhaus"] .dots-card, :root[data-theme="bauhaus"] .tile, :root[data-theme="bauhaus"] .hcard { border: 3px solid #111; background: #fff !important; box-shadow: inset 10px 0 0 var(--bh, #1f4fa3); padding-left: 10px; }
:root[data-theme="bauhaus"] .card { padding-left: 10px; }
:root[data-theme="bauhaus"] main .card:nth-of-type(3n+2), :root[data-theme="bauhaus"] .dots-card:nth-child(2) { --bh: #e63b2e; }
:root[data-theme="bauhaus"] main .card:nth-of-type(3n), :root[data-theme="bauhaus"] .hcard { --bh: #f4c430; }
:root[data-theme="bauhaus"] .card-head h3, :root[data-theme="bauhaus"] .card-title, :root[data-theme="bauhaus"] .mini strong { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 14px; }
:root[data-theme="bauhaus"] .check { border-radius: 0; border: 2px solid #111; }
:root[data-theme="bauhaus"] .check.on { background: #e63b2e; border-color: #111; }
:root[data-theme="bauhaus"] .dots i { border-radius: 0; }
:root[data-theme="bauhaus"] .dots i:nth-child(3n+1) { border-radius: 50%; }
:root[data-theme="bauhaus"] .dots i:nth-child(3n) { clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
:root[data-theme="bauhaus"] .dots i.l1, :root[data-theme="bauhaus"] .dots i.l2 { background: #f4c430; }
:root[data-theme="bauhaus"] .dots i.l3 { background: #1f4fa3; }
:root[data-theme="bauhaus"] .btn, :root[data-theme="bauhaus"] .mchip, :root[data-theme="bauhaus"] .pill, :root[data-theme="bauhaus"] .seg, :root[data-theme="bauhaus"] .input, :root[data-theme="bauhaus"] .icon-btn { border-radius: 0; border: 2px solid #111; }
:root[data-theme="bauhaus"] .btn.primary { background: #111; color: #fff; }
:root[data-theme="bauhaus"] .seg button { border-radius: 0; color: #111; }
:root[data-theme="bauhaus"] .seg button.on { background: #111; color: #fff; }
:root[data-theme="bauhaus"] .hcirc, :root[data-theme="bauhaus"] .tl-pill, :root[data-theme="bauhaus"] .wk-pill { border-radius: 0 !important; }
:root[data-theme="bauhaus"] .rail-btn { border-radius: 0; }
:root[data-theme="bauhaus"] .rail-btn .rdot { border-radius: 50%; }
:root[data-theme="bauhaus"] .rail-btn.on { background: #111; color: #fff; }
:root[data-theme="bauhaus"] .sheet-panel { border-radius: 0; border-top: 4px solid #111; }
:root[data-theme="bauhaus"] .now-bar { background: #111; color: #fff; border-radius: 0; }
:root[data-theme="vaporwave"] .display { font-size: 25px; }
:root[data-theme="vaporwave"] .display .year { margin-left: 8px; font-family: "VT323", monospace; font-size: 38px; }
:root[data-theme="vaporpastel"] .dots-card, :root[data-theme="bauhaus"] .dots-card, :root[data-theme="vaporpastel"] .tile, :root[data-theme="bauhaus"] .tile { border-radius: 0; }

/* Game Boy Advance: purple console shell everywhere, a grass route on Today, a battle sky on Habits and Health.
   Cards are white RPG dialog boxes; ticks and balls are pixel squares. */
:root[data-theme="gba"] {
  --bg: #4b3fa8; --rail: #2a2066; --surface: #ffffff; --surface-2: #eef0f8;
  --ink: #283050; --ink-2: #3a4470; --muted: #6a7298; --line: #c8cce0;
  --accent: #5a4fcf; --accent-soft: #e4e0ff; --on-accent: #ffffff; --late: #d04040;
  --heading: "Press Start 2P", monospace; --sans: "Pixelify Sans", "VT323", monospace;
  --radius: 8px; --card-border: #283050; --shadow: none;
  --p1: #e4e0ff; --i1: #5a4fcf; --p2: #ffe4c8; --i2: #c86020; --p3: #d8f0d0; --i3: #2f8a3a;
  --p4: #d8e8ff; --i4: #3870d0; --p5: #ffd8d8; --i5: #d04040; --p6: #fff4c0; --i6: #a07800;
  --tint-1: #ffffff; --tint-2: #ffffff; --tint-3: #ffffff; --tint-4: #ffffff; --tint-5: #ffffff; --tint-6: #ffffff;
  --h0: #3870d0; --h1: #f08030; --h2: #48c860; --h3: #f8c030; --h4: #e060a0; --h5: #78c850; --h6: #8058d0; --h7: #d04040;
  --blue: #3870d0; --green: #48c860; --yellow: #f8c030; --violet: #8058d0; --pink: #e060a0; --chart: #3870d0;
  --sl-bad: #f05040; --sl-good: #48c860;
  color-scheme: light;
}
:root[data-theme="gba"] body {
  font-size: 17px;
  background-color: #4b3fa8; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.6px); background-size: 6px 6px;
}
/* Today: grass route with a sand path */
:root[data-theme="gba"] body[data-tab="today"] {
  background-color: #78c850;
  background-image: linear-gradient(#e8d098, #e8d098), radial-gradient(#58a838 2px, transparent 2.5px), radial-gradient(#98e070 1.5px, transparent 2px);
  background-size: 100% 22px, 16px 16px, 22px 22px; background-position: 0 calc(var(--safe-top) + 196px), 0 0, 8px 11px; background-repeat: no-repeat, repeat, repeat;
}
/* Habits and Health: battle screen, sky over sand with grass platforms */
:root[data-theme="gba"] body[data-tab="habits"], :root[data-theme="gba"] body[data-tab="health"] {
  background-color: #e8d898; background-image: linear-gradient(#88c8f8 0, #c8e8ff 280px, #f8f0c8 280px, #e8d898 900px); background-repeat: no-repeat; background-size: 100% 900px;
}
:root[data-theme="gba"] main::before, :root[data-theme="gba"] main::after { display: none; }
:root[data-theme="gba"] body[data-tab="habits"] main::before, :root[data-theme="gba"] body[data-tab="health"] main::before {
  display: block; top: 250px; right: 6px; width: 170px; height: 34px; background: #78c850; box-shadow: inset 0 -7px 0 #58a838;
}
/* Titles: white pixel letters with a dark outline, readable on every background */
:root[data-theme="gba"] .display { font-size: 20px; line-height: 1.4; font-weight: 400; color: #fff; text-shadow: 2px 0 #283050, -2px 0 #283050, 0 2px #283050, 0 -2px #283050, 2px 2px #283050; }
:root[data-theme="gba"] .display .year { color: #f8c030; }
:root[data-theme="gba"] .eyebrow, :root[data-theme="gba"] .page-head .sub, :root[data-theme="gba"] .today-sub, :root[data-theme="gba"] .ws-day, :root[data-theme="gba"] .ws-day b {
  color: #fff; text-shadow: 1px 1px 0 #283050;
}
:root[data-theme="gba"] .eyebrow { font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0; }
:root[data-theme="gba"] .ws-day.sel b { background: #f8c030; color: #283050; text-shadow: none; border-radius: 4px; }
:root[data-theme="gba"] body[data-tab="habits"] .page-head .sub, :root[data-theme="gba"] body[data-tab="health"] .page-head .sub { color: #283050; text-shadow: none; }
/* Dialog-box cards with a coloured inner ring */
:root[data-theme="gba"] .card, :root[data-theme="gba"] .dots-card, :root[data-theme="gba"] .tile, :root[data-theme="gba"] .hcard, :root[data-theme="gba"] .sheet-panel {
  background: #fff !important; border: 3px solid #283050; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ring, #f8b860);
}
:root[data-theme="gba"] main .card:nth-of-type(3n+2), :root[data-theme="gba"] .dots-card:nth-child(2) { --ring: #60a8f8; }
:root[data-theme="gba"] main .card:nth-of-type(3n) { --ring: #e87878; }
:root[data-theme="gba"] .sheet-panel { border-radius: 8px 8px 0 0; --ring: #60a8f8; }
:root[data-theme="gba"] .card-head h3, :root[data-theme="gba"] .card-title, :root[data-theme="gba"] .mini strong, :root[data-theme="gba"] .dots-head b {
  font: 400 11px/1.6 "Press Start 2P", monospace; color: #5a4fcf;
}
:root[data-theme="gba"] .todo-title, :root[data-theme="gba"] .add-todo input { font-size: 18px !important; }
:root[data-theme="gba"] .check { border-radius: 2px !important; border: 2.5px solid #283050; }
:root[data-theme="gba"] .check.on { background: #48c860; border-color: #283050; }
:root[data-theme="gba"] .dots i, :root[data-theme="gba"] .hcirc, :root[data-theme="gba"] .tl-pill, :root[data-theme="gba"] .wk-pill { border-radius: 2px !important; }
:root[data-theme="gba"] .btn, :root[data-theme="gba"] .mchip, :root[data-theme="gba"] .pill, :root[data-theme="gba"] .icon-btn { border: 2.5px solid #283050; border-radius: 6px; }
:root[data-theme="gba"] .btn.primary { background: #d04040; color: #fff; }
:root[data-theme="gba"] .seg { background: #fff; border: 2.5px solid #283050; border-radius: 8px; }
:root[data-theme="gba"] .seg button.on { background: #5a4fcf; color: #fff; }
/* The sidebar is the console's darker purple with round A/B-like buttons */
:root[data-theme="gba"] .rail { border-right: 3px solid #1c1650; }
:root[data-theme="gba"] .rail-btn { color: #c8c0ff; }
:root[data-theme="gba"] .rail-btn .rdot { border-radius: 50% !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
:root[data-theme="gba"] .rail-btn.on { background: #4b3fa8; color: #fff; border-radius: 10px; }
:root[data-theme="gba"] .now-bar { background: #fff; color: #283050; border: 3px solid #283050; box-shadow: inset 0 0 0 2px #60a8f8; border-radius: 8px; }
:root[data-theme="gba"] .toast { background: #fff; color: #283050; border: 3px solid #283050; box-shadow: inset 0 0 0 2px #60a8f8; border-radius: 8px; font-family: "Pixelify Sans", monospace; }
:root[data-theme="gba"] .toast::after { content: " ▼"; }

/* Vaporwave night: a different illustrated scene behind each screen (Today keeps the sun and grid), plus a VHS look */
:root[data-theme="vaporwave"] body:not([data-tab="today"])::after { display: none; }
:root[data-theme="vaporwave"] body:not([data-tab="today"])::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: center / cover no-repeat;
}
:root[data-theme="vaporwave"] body[data-tab="plan"]::before, :root[data-theme="vaporwave"] body[data-tab="lists"]::before { background-image: url(art/vapor/pool.svg); }
:root[data-theme="vaporwave"] body[data-tab="calendar"]::before { background-image: url(art/vapor/city.svg); }
:root[data-theme="vaporwave"] body[data-tab="habits"]::before { background-image: url(art/vapor/beach.svg); }
:root[data-theme="vaporwave"] body[data-tab="health"]::before { background-image: url(art/vapor/garden.svg); }
:root[data-theme="vaporwave"] body[data-tab="journal"]::before { background-image: url(art/vapor/room.svg); }
:root[data-theme="vaporwave"] body[data-tab="settings"]::before { background-image: url(art/vapor/nosignal.svg); }
:root[data-theme="vaporwave"] body:not([data-tab="today"]) main::before { display: none; }
/* See-through glass cards so the scene shows */
:root[data-theme="vaporwave"] body:not([data-tab="today"]) { --surface: rgba(26, 10, 58, .7); }
:root[data-theme="vaporwave"] body:not([data-tab="today"]) .card, :root[data-theme="vaporwave"] body:not([data-tab="today"]) .tile, :root[data-theme="vaporwave"] body:not([data-tab="today"]) .hcard, :root[data-theme="vaporwave"] body:not([data-tab="today"]) .dots-card { background: rgba(26, 10, 58, .7) !important; }
/* VHS: PLAY, date stamp, scanlines and a little colour split on the titles */
#vhs { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: "VT323", monospace; color: #fff;
  background: repeating-linear-gradient(rgba(0,0,0,.13) 0 1px, transparent 1px 3px); }
#vhs span { position: absolute; text-shadow: 2px 0 #ff2fd0, -2px 0 #2fe0ff; }
.vhs-play { right: 16px; top: calc(var(--safe-top) + 10px); font-size: 22px; }
.vhs-date { left: calc(var(--rail-w) + 14px); bottom: calc(var(--safe-bottom) + 12px); font-size: 20px; line-height: 1.05; }
:root[data-theme="vaporwave"] body:not([data-tab="today"]) .display { color: #fff; text-shadow: 2px 0 #ff2fd0, -2px 0 #2fe0ff; }

/* Lofi: pixel-art scene behind every screen (one per section), soft lavender glass cards, pixel titles */
:root[data-theme="lofi"] {
  --bg: #3e3f86; --rail: rgba(30, 24, 70, .88); --surface: rgba(250, 245, 255, .9); --surface-2: rgba(236, 228, 255, .92);
  --ink: #2b2156; --ink-2: #4a3f80; --muted: #7a70a8; --line: rgba(120, 100, 190, .28);
  --accent: #8a6ae0; --accent-soft: #ece4ff; --on-accent: #ffffff; --late: #e05a8a;
  --heading: "Pixelify Sans", "VT323", monospace; --sans: "Nunito", -apple-system, system-ui, sans-serif;
  --radius: 14px; --card-border: rgba(255, 255, 255, .6); --shadow: 0 8px 24px -14px rgba(20, 10, 60, .6);
  --p1: #ece4ff; --i1: #6a4ac8; --p2: #ffe4f2; --i2: #c04a8a; --p3: #e0f4ff; --i3: #2a7ab8;
  --p4: #e4f8ee; --i4: #2f8a5a; --p5: #fff2d8; --i5: #a86a10; --p6: #f0e4ff; --i6: #7a4ab8;
  --tint-1: rgba(250,245,255,.9); --tint-2: rgba(250,245,255,.9); --tint-3: rgba(250,245,255,.9); --tint-4: rgba(250,245,255,.9); --tint-5: rgba(250,245,255,.9); --tint-6: rgba(250,245,255,.9);
  --h0: #8a6ae0; --h1: #f08ac0; --h2: #5ac898; --h3: #f0b84a; --h4: #7ab0f0; --h5: #e07a6a; --h6: #b88af0; --h7: #4ab8c0;
  --blue: #7ab0f0; --green: #8a6ae0; --yellow: #f0b84a; --violet: #b88af0; --pink: #f08ac0; --chart: #8a6ae0;
  --sl-bad: #f08ac0; --sl-good: #8a6ae0;
  color-scheme: light;
}
:root[data-theme="lofi"] { background: #3e3f86; }
:root[data-theme="lofi"] body { background: transparent; }
:root[data-theme="lofi"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #3e3f86 center bottom / cover no-repeat; image-rendering: pixelated;
}
:root[data-theme="lofi"] body[data-tab="today"]::before { background-image: url(art/lofi/px-balcony.png); }
:root[data-theme="lofi"] body[data-tab="plan"]::before { background-image: url(art/lofi/px-terrace.png); }
:root[data-theme="lofi"] body[data-tab="calendar"]::before { background-image: url(art/lofi/px-train.png); }
:root[data-theme="lofi"] body[data-tab="habits"]::before, :root[data-theme="lofi"] body[data-tab="settings"]::before { background-image: url(art/lofi/px-room.png); }
:root[data-theme="lofi"] body[data-tab="health"]::before { background-image: url(art/lofi/px-bedroom.png); }
:root[data-theme="lofi"] body[data-tab="lists"]::before { background-image: url(art/lofi/px-ramen.png); }
:root[data-theme="lofi"] body[data-tab="journal"]::before { background-image: url(art/lofi/px-library.png); }
:root[data-theme="lofi"] main::before, :root[data-theme="lofi"] main::after { display: none; }
:root[data-theme="lofi"] .card, :root[data-theme="lofi"] .dots-card, :root[data-theme="lofi"] .tile, :root[data-theme="lofi"] .hcard {
  background: rgba(250, 245, 255, .9) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* Titles and text sitting directly on the scene: white pixel letters with a hard dark shadow */
:root[data-theme="lofi"] .display { font-weight: 600; color: #fff; text-shadow: 2px 2px 0 #2b2156; letter-spacing: .5px; }
:root[data-theme="lofi"] .display .year { color: #ffd36e; }
:root[data-theme="lofi"] .eyebrow, :root[data-theme="lofi"] .page-head .sub, :root[data-theme="lofi"] .today-sub,
:root[data-theme="lofi"] .ws-day, :root[data-theme="lofi"] .ws-day b { color: #fff; text-shadow: 1px 1px 0 #2b2156; }
:root[data-theme="lofi"] .ws-day.sel b { background: #8a6ae0; text-shadow: none; }
:root[data-theme="lofi"] .card-head h3, :root[data-theme="lofi"] .card-title, :root[data-theme="lofi"] .mini strong { font-family: "Pixelify Sans", monospace; font-weight: 600; }
:root[data-theme="lofi"] .check { border-radius: 4px; }
:root[data-theme="lofi"] .rail-btn { color: #d8ccff; }
:root[data-theme="lofi"] .rail-btn.on { background: rgba(255, 255, 255, .16); color: #fff; }
:root[data-theme="lofi"] .seg { background: rgba(250, 245, 255, .85); }
:root[data-theme="lofi"] .now-bar { background: #2b2156; color: #fff; }
:root[data-theme="lofi"] .sheet-panel { background: #f8f4ff; }

/* Highlighter marker on appointments (to-dos and time blocks) */
.mark { background: linear-gradient(transparent 52%, var(--mk) 52%, var(--mk) 92%, transparent 92%); padding: 0 2px; margin: 0 -2px; border-radius: 2px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[color-scheme="dark"] .mark, :root[data-theme="tarot"] .mark, :root[data-theme="gradient"][data-grad="night"] .mark, :root[data-theme="index"][data-cards="night"] .mark, :root[data-theme="nightpastel"] .mark, :root[data-theme="galaxy"] .mark, :root[data-theme="arcade"] .mark, :root[data-theme="vaporwave"] .mark { background: linear-gradient(transparent 52%, color-mix(in srgb, var(--mk) 55%, transparent) 52%, color-mix(in srgb, var(--mk) 55%, transparent) 92%, transparent 92%); }
.hl-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 2px; }
.hl-pick > span { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; }
.hl-pick .ti { width: 15px; height: 15px; }
.hl-sw input { position: absolute; opacity: 0; pointer-events: none; }
.hl-sw i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--mk); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; }
.hl-sw.none i { background: var(--surface-2); position: relative; }
.hl-sw.none i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: var(--muted); transform: rotate(-45deg); }
.hl-sw input:checked + i { border-color: var(--ink); }

/* ---------- Agenda (day columns) and Pages (two-page week) ---------- */
.ag-strip, .pg-strip { display: flex; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; margin: 0 -16px; padding: 2px 16px 16px; }
.ag-strip::-webkit-scrollbar, .pg-strip::-webkit-scrollbar { display: none; }
.ag-strip { gap: 8px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
.ag-strip .ag-day { flex: 0 0 calc((100% - 16px) / 3); scroll-snap-align: start; min-height: 58vh; }
@media (min-width: 700px) { .ag-strip .ag-day { flex-basis: calc((100% - 48px) / 7); } }
.ag-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow); min-width: 0; position: relative; }
.ag-day.today { border: 2px solid var(--accent); }
.ag-day.mon { box-shadow: var(--shadow), -5px 0 0 -3px var(--accent-soft); }
.ag-head { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.ag-head small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.ag-head b { font: 600 17px var(--heading); color: var(--ink); }
.ag-day.today .ag-head b { color: var(--accent); }
.ag-allday { display: flex; flex-direction: column; gap: 2px; }
.ag-chip { display: block; text-align: left; font-size: 11.5px; line-height: 1.25; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); color: var(--ink); border-left: 3px solid var(--c, var(--accent)); overflow-wrap: anywhere; }
.ag-chip.mine { --c: var(--accent); }
.ag-chip.done { opacity: .5; text-decoration: line-through; }
.ag-items { display: flex; flex-direction: column; gap: 1px; }
.ag-it { display: flex; gap: 4px; align-items: flex-start; text-align: left; font-size: 12.5px; line-height: 1.25; padding: 3px 2px; border-radius: 6px; width: 100%; color: var(--ink); min-width: 0; }
.ag-it i { font-style: normal; font-size: 10.5px; color: var(--muted); flex: none; padding-top: 1px; font-variant-numeric: tabular-nums; }
.ag-it span { min-width: 0; overflow-wrap: anywhere; }
.ag-it.ev, .ag-it.blk { border-left: 3px solid var(--c); padding-left: 4px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.ag-it.ev { opacity: .9; }
.ag-it.done span, .ag-it.td.done span { text-decoration: line-through; color: var(--muted); }
.ag-it.td { padding: 2px 0; }
.ag-it .check { width: 15px !important; height: 15px !important; flex: none; margin-top: 1px; }
.ag-it .check.on::after { width: 7px; height: 4px; }
.ag-tt { display: flex; gap: 4px; text-align: left; min-width: 0; color: inherit; font: inherit; }
.ag-add { margin-top: auto; align-self: center; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); opacity: .7; }
.ag-add svg { width: 16px; height: 16px; }
/* Pages: one week per screen, snapping like turning a page */
.pg-strip { scroll-snap-type: x mandatory; gap: 0; }
.pg-spread { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 2px; }
.pg-page { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 66vh; box-shadow: var(--shadow); min-width: 0; }
.pg-page:first-child { border-radius: var(--radius) 4px 4px var(--radius); border-right-width: 2px; box-shadow: var(--shadow), inset -8px 0 10px -10px rgba(0,0,0,.25); }
.pg-page:last-child { border-radius: 4px var(--radius) var(--radius) 4px; border-left: 0; box-shadow: var(--shadow), inset 8px 0 10px -10px rgba(0,0,0,.25); }
.pg-page .ag-day { border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; box-shadow: none; background: transparent; flex: 1; min-height: 0; }
.pg-page .ag-day.today { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 0; border-bottom: 1px dashed var(--line); }
.pg-page .ag-head { justify-content: flex-start; border-bottom: 0; }
.pg-page .ag-add { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; margin: 0; }
.pg-wknd { display: grid; grid-template-columns: 1fr 1fr; flex: 1; border-bottom: 1px dashed var(--line); }
.pg-wknd .ag-day { border-bottom: 0; }
.pg-wknd .ag-day:first-child { border-right: 1px dashed var(--line); }
.pg-notes { padding: 6px; background: color-mix(in srgb, var(--accent-soft) 45%, transparent); flex: 1.1; font-size: 12.5px; }
.pg-notes .todo { padding: 2px 0; min-height: 0; }
.pg-notes .todo-title { font-size: 12.5px !important; }
.pg-notes .add-todo input { font-size: 12.5px !important; }
.ag-it.ev, .ag-it.blk { flex-direction: column; gap: 0; }
.ag-tt { flex-direction: column; gap: 0; }
.ag-it i { padding-top: 0; }
.ag-it span { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.notes-head small { text-transform: none; font-weight: 600; }
.hab-tag { color: var(--accent); margin-left: 3px; }
/* Work / Personal at hand in the to-do sheet */
.area-pick { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin: 0 0 10px; }
.area-pick input { position: absolute; opacity: 0; pointer-events: none; }
.area-pick span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.area-pick input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Animals: the Kitties theme with each animal's colours (data-animal on the root) */
:root[data-theme="cats"][data-animal="dog"] { --bg: #f8f0e6; --rail: #efe2d2; --surface: #fffaf4; --surface-2: #f2e6d8; --line: #eadccb; --accent: #b07a4a; --accent-soft: #f0e0cc; --tint-1: #f3e2cc; --ink: #3a2a1e; --sl-good: #b07a4a; }
:root[data-theme="cats"][data-animal="dog"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23b07a4a' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="bunny"] { --bg: #fff0f5; --rail: #fde2ec; --surface: #fffafc; --surface-2: #fbe6ee; --line: #f6d6e2; --accent: #e86a9a; --accent-soft: #fcd8e6; --tint-1: #ffe0ec; --ink: #4a2a38; --sl-good: #e86a9a; }
:root[data-theme="cats"][data-animal="bunny"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e86a9a' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="fox"] { --bg: #fff1e8; --rail: #fde0cc; --surface: #fffaf6; --surface-2: #f9e6da; --line: #f2d8c6; --accent: #e8642a; --accent-soft: #fcd8c2; --tint-1: #ffdcc4; --ink: #3e2418; --sl-good: #e8642a; }
:root[data-theme="cats"][data-animal="fox"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23e8642a' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="frog"] { --bg: #eff8ec; --rail: #ddefd6; --surface: #fbfff9; --surface-2: #e6f2e0; --line: #d6eacc; --accent: #4aa060; --accent-soft: #d4ecd4; --tint-1: #ddf2d6; --ink: #1e3a24; --sl-good: #4aa060; }
:root[data-theme="cats"][data-animal="frog"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%234aa060' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="panda"] { --bg: #f4f4f6; --rail: #e6e6ec; --surface: #ffffff; --surface-2: #ececf0; --line: #dcdce4; --accent: #4a4a5a; --accent-soft: #e2e2ea; --tint-1: #ececf2; --ink: #22222c; --sl-good: #4a4a5a; }
:root[data-theme="cats"][data-animal="panda"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%234a4a5a' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="penguin"] { --bg: #eef5fb; --rail: #dcebf7; --surface: #fafdff; --surface-2: #e4eef8; --line: #d2e2f0; --accent: #3a8ac8; --accent-soft: #d4e6f6; --tint-1: #dceefb; --ink: #1a2a3a; --sl-good: #3a8ac8; }
:root[data-theme="cats"][data-animal="penguin"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%233a8ac8' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="cats"][data-animal="hamster"] { --bg: #fbf3e6; --rail: #f4e4c8; --surface: #fffbf3; --surface-2: #f6ead6; --line: #eedcbc; --accent: #d8a050; --accent-soft: #f6e2bc; --tint-1: #fbe8c6; --ink: #3e2e18; --sl-good: #d8a050; }
:root[data-theme="cats"][data-animal="hamster"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23d8a050' opacity='.07'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Ccircle cx='19' cy='26' r='4'/%3E%3Ccircle cx='27' cy='20' r='4'/%3E%3Ccircle cx='35' cy='20' r='4'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3Cellipse cx='88' cy='92' rx='9' ry='8'/%3E%3Ccircle cx='77' cy='80' r='4'/%3E%3Ccircle cx='85' cy='74' r='4'/%3E%3Ccircle cx='93' cy='74' r='4'/%3E%3Ccircle cx='100' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"); }

/* Without drawings: hide the big illustrations */
:root[data-art="off"] img.art { display: none; }
:root[data-art="off"] .sheet-art { display: none; }

/* Style picker: families grouped, then the chosen style's options */
.st-group { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 6px; }
.fam-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
.fam-grid .theme-tile b { font-size: 13px; }
.st-panel { margin-top: 16px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.st-panel h3 { margin: 0 0 4px; font: 600 18px var(--heading); }
.st-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.st-row { display: flex; flex-wrap: wrap; gap: 6px; }
.st-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-size: 14px; color: var(--ink-2); }
.st-opt.on { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--accent); }
.st-opt i { width: 20px; height: 20px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.st-opt img { width: 24px; height: 24px; }

/* Dreamy: pearly sky with pink clouds, a crescent moon and a sparkling sea; frosted glass cards */
:root[data-theme="dreamy"] {
  --bg: #b9abc0; --rail: rgba(255, 255, 255, .42); --surface: rgba(255, 255, 255, .62); --surface-2: rgba(255, 255, 255, .5);
  --ink: #463c50; --ink-2: #5e5468; --muted: #857a8e; --line: rgba(255, 255, 255, .6);
  --accent: #c47a9e; --accent-soft: rgba(255, 228, 240, .8); --on-accent: #ffffff; --late: #c0506e;
  --heading: "Cormorant Garamond", Georgia, serif; --sans: "Nunito", -apple-system, system-ui, sans-serif;
  --radius: 22px; --card-border: rgba(255, 255, 255, .7); --shadow: 0 8px 30px -16px rgba(80, 50, 90, .35);
  --p1: rgba(255,240,246,.7); --i1: #a85a80; --p2: rgba(240,236,255,.7); --i2: #6a5aa8; --p3: rgba(232,246,248,.7); --i3: #3a7a88;
  --p4: rgba(240,248,236,.7); --i4: #4a7a4a; --p5: rgba(255,238,230,.7); --i5: #a8604a; --p6: rgba(255,248,226,.7); --i6: #8a7020;
  --tint-1: rgba(255,255,255,.62); --tint-2: rgba(255,255,255,.62); --tint-3: rgba(255,255,255,.62); --tint-4: rgba(255,255,255,.62); --tint-5: rgba(255,255,255,.62); --tint-6: rgba(255,255,255,.62);
  --h0: #9ab8e8; --h1: #f0a6c2; --h2: #9fd6c8; --h3: #f2d08a; --h4: #d6a6e8; --h5: #b8d89a; --h6: #c8b8f0; --h7: #f0a0a8;
  --blue: #9ab8e8; --green: #c47a9e; --yellow: #f2d08a; --violet: #c8b8f0; --pink: #f0a6c2; --chart: #c47a9e;
  --sl-bad: #c8b8f0; --sl-good: #f0a6c2;
  color-scheme: light; background: #b9abc0;
}
:root[data-theme="dreamy"] body { background: transparent; }
:root[data-theme="dreamy"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #b9abc0 url(art/dreamy/sky.svg) center / cover no-repeat; }
:root[data-theme="dreamy"] main::before, :root[data-theme="dreamy"] main::after { display: none; }
:root[data-theme="dreamy"] .card, :root[data-theme="dreamy"] .dots-card, :root[data-theme="dreamy"] .tile, :root[data-theme="dreamy"] .hcard, :root[data-theme="dreamy"] .ag-day, :root[data-theme="dreamy"] .pg-page {
  background: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .75); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
:root[data-theme="dreamy"] .display { font-weight: 600; font-size: 36px; color: #fff; text-shadow: 0 1px 12px rgba(120, 80, 130, .45); }
:root[data-theme="dreamy"] .display .year { color: #fff0f6; font-style: italic; }
:root[data-theme="dreamy"] .eyebrow, :root[data-theme="dreamy"] .page-head .sub, :root[data-theme="dreamy"] .today-sub, :root[data-theme="dreamy"] .ws-day, :root[data-theme="dreamy"] .ws-day b { color: #fff; text-shadow: 0 1px 8px rgba(100, 70, 110, .5); }
:root[data-theme="dreamy"] .card-head h3, :root[data-theme="dreamy"] .card-title { font-weight: 700; font-size: 20px; }
:root[data-theme="dreamy"] .rail { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:root[data-theme="dreamy"] .rail-btn { color: #fff; }
:root[data-theme="dreamy"] .sheet-panel { background: rgba(250, 244, 250, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme="dreamy"] .check.on { box-shadow: 0 0 10px rgba(255, 220, 240, .9); }

/* Gradient: a big soft blurred colour orb behind everything (the trendy wallpaper); colours by variant */
:root[data-theme="gradient"] {
  --bg: #f6f4fa; --rail: rgba(255, 255, 255, .55); --surface: rgba(255, 255, 255, .66); --surface-2: rgba(255, 255, 255, .55);
  --ink: #23202e; --ink-2: #4a4658; --muted: #7d788c; --line: rgba(255, 255, 255, .7);
  --accent: #8a5cf0; --accent-soft: rgba(237, 228, 255, .85); --on-accent: #ffffff; --late: #e0457b;
  --heading: "Outfit", system-ui, sans-serif; --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius: 22px; --card-border: rgba(255, 255, 255, .8); --shadow: 0 10px 30px -18px rgba(40, 30, 80, .35);
  --g1: #ffb38a; --g2: #ff7ab6; --g3: #a98bff;
  --p1: rgba(255,255,255,.6); --i1: #6a3ad0; --p2: rgba(255,255,255,.6); --i2: #c0306a; --p3: rgba(255,255,255,.6); --i3: #2a6ab0;
  --p4: rgba(255,255,255,.6); --i4: #2a8a5a; --p5: rgba(255,255,255,.6); --i5: #c0602a; --p6: rgba(255,255,255,.6); --i6: #8a6a00;
  --tint-1: rgba(255,255,255,.66); --tint-2: rgba(255,255,255,.66); --tint-3: rgba(255,255,255,.66); --tint-4: rgba(255,255,255,.66); --tint-5: rgba(255,255,255,.66); --tint-6: rgba(255,255,255,.66);
  --h0: var(--g3); --h1: var(--g1); --h2: #7ad8b8; --h3: #f8c860; --h4: var(--g2); --h5: #9ad87a; --h6: #8ab0ff; --h7: #ff8a8a;
  --blue: #8ab0ff; --green: var(--accent); --yellow: #f8c860; --violet: var(--g3); --pink: var(--g2); --chart: var(--accent);
  --sl-bad: var(--g1); --sl-good: var(--g3);
  color-scheme: light; background: #f6f4fa;
}
:root[data-theme="gradient"][data-grad="sea"] { --g1: #7ad8ff; --g2: #6af0c8; --g3: #9a9cff; --accent: #2a8ad0; --bg: #f2f8fb; }
:root[data-theme="gradient"][data-grad="sunset"] { --g1: #ffd36a; --g2: #ff7a5a; --g3: #d65ab8; --accent: #e0563a; --bg: #fdf6f2; }
:root[data-theme="gradient"][data-grad="lime"] { --g1: #e8ff6a; --g2: #6ae8a8; --g3: #3ab8d8; --accent: #1f9a7a; --bg: #f4faf4; }
:root[data-theme="gradient"][data-grad="berry"] { --g1: #ff5ab8; --g2: #9a5aff; --g3: #4a7aff; --accent: #8a3ae0; --bg: #f7f3fc; }
:root[data-theme="gradient"][data-grad="night"] { --g1: #ff7ab6; --g2: #7a5aff; --g3: #2ac8e8; --accent: #b48aff; --bg: #12101c; --ink: #f3f0ff; --ink-2: #cfc8ea; --muted: #9a92b8; --surface: rgba(30, 26, 48, .6); --surface-2: rgba(40, 34, 62, .6); --line: rgba(255,255,255,.12); --card-border: rgba(255,255,255,.12); --rail: rgba(18, 16, 28, .6); --tint-1: rgba(30,26,48,.6); --tint-2: rgba(30,26,48,.6); --tint-3: rgba(30,26,48,.6); --tint-4: rgba(30,26,48,.6); --tint-5: rgba(30,26,48,.6); --tint-6: rgba(30,26,48,.6); --accent-soft: rgba(80, 60, 140, .5); color-scheme: dark; }
:root[data-theme="gradient"] body { background: transparent; }
:root[data-theme="gradient"] body::before {
  content: ""; position: fixed; inset: -15%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 46% 36%, var(--g1) 0, transparent 26%),
    radial-gradient(circle at 60% 46%, var(--g2) 0, transparent 30%),
    radial-gradient(circle at 42% 56%, var(--g3) 0, transparent 32%),
    var(--bg);
  filter: blur(46px) saturate(1.15);
}
:root[data-theme="gradient"] main::before, :root[data-theme="gradient"] main::after { display: none; }
:root[data-theme="gradient"] .card, :root[data-theme="gradient"] .dots-card, :root[data-theme="gradient"] .tile, :root[data-theme="gradient"] .hcard, :root[data-theme="gradient"] .ag-day, :root[data-theme="gradient"] .pg-page {
  background: var(--surface) !important; border: 1px solid var(--card-border); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
:root[data-theme="gradient"] .display { font-weight: 700; letter-spacing: -.02em; }
:root[data-theme="gradient"] .rail { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root[data-theme="gradient"] .sheet-panel { background: color-mix(in srgb, var(--bg) 92%, white); }

/* Self care (Soft palette): cream, dusty rose and sage, calm serif titles */
:root[data-theme="selfcare"] {
  --bg: #fbf6f1; --rail: #f4ebe3; --surface: #fffdfa; --surface-2: #f6eee7;
  --ink: #3e3532; --ink-2: #625652; --muted: #9a8a82; --line: #efe4da;
  --accent: #c98282; --accent-soft: #f8e2e0; --on-accent: #ffffff; --late: #c0504e;
  --heading: "DM Serif Display", Georgia, serif; --sans: "Nunito", -apple-system, system-ui, sans-serif;
  --radius: 24px; --card-border: transparent; --shadow: 0 6px 24px -16px rgba(120, 80, 60, .28);
  --p1: #f8e4e1; --i1: #a85a5a; --p2: #e3ece0; --i2: #4f7a4a; --p3: #f6ecd9; --i3: #8a6a2a;
  --p4: #ece6f1; --i4: #6a5a8a; --p5: #fbe6d8; --i5: #a8603a; --p6: #e2eef0; --i6: #3a7078;
  --tint-1: #f8e4e1; --tint-2: #e3ece0; --tint-3: #f6ecd9; --tint-4: #ece6f1; --tint-5: #fbe6d8; --tint-6: #e2eef0;
  --h0: #a8c4d8; --h1: #e8a8a0; --h2: #a8c8a0; --h3: #e8c88a; --h4: #e0a8b8; --h5: #b8c8a0; --h6: #c0b0d8; --h7: #d89a9a;
  --blue: #a8c4d8; --green: #a8c8a0; --yellow: #e8c88a; --violet: #c0b0d8; --pink: #e0a8b8; --chart: #c98282;
  --sl-bad: #e8c8c0; --sl-good: #a8c8a0;
  color-scheme: light;
}
:root[data-theme="selfcare"] .display { font-weight: 400; letter-spacing: 0; }
:root[data-theme="selfcare"] .card-head h3, :root[data-theme="selfcare"] .card-title, :root[data-theme="selfcare"] .mini strong { font-weight: 400; font-size: 19px; }
:root[data-theme="selfcare"] main::before { background: #f8e4e1; }
:root[data-theme="selfcare"] main::after { background: #e3ece0; }
/* Self care: soft hand-drawn doodles (tea, candle, moon, sprigs, flowers, sparkles) spread around the edges, and a kind phrase on top */
:root[data-theme="selfcare"] body { background: transparent; }
:root[data-theme="selfcare"] { background: #fbf6f1; }
:root[data-theme="selfcare"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #fbf6f1 url(art/selfcare/emojis.jpg) center top / 390px auto repeat-y; }
:root[data-theme="selfcare"] main::before, :root[data-theme="selfcare"] main::after { display: none; }
:root[data-theme="selfcare"] .card, :root[data-theme="selfcare"] .dots-card, :root[data-theme="selfcare"] .tile, :root[data-theme="selfcare"] .hcard { background: rgba(255, 253, 250, .9) !important; }
:root[data-theme="selfcare"] .today-head .eyebrow { font: 600 21px "Caveat", cursive; letter-spacing: 0; text-transform: none; color: #b9787a; }
:root[data-theme="selfcare"] .today-head .eyebrow { white-space: normal; overflow: visible; line-height: 1.1; }
/* Galaxy: denser star field with twinkles, a shooting star, a rocket and a UFO */
:root[data-theme="galaxy"] { background: #0f1230; }
:root[data-theme="galaxy"] body { background: transparent !important; background-image: none !important; }
:root[data-theme="galaxy"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #0f1230 url(art/galaxy/space.svg) center / cover no-repeat; }

/* Index cards colour sets (data-cards on the root): the six tab colours and the page */
:root[data-theme="index"] { --t1: #2f5597; --t2: #c0392b; --t3: #8b5a2b; --t4: #3d7a3a; --t5: #c08a00; --t6: #1f6f78; }
:root[data-theme="index"][data-cards="pastel"] { --t1: #8aa8e0; --t2: #f08aa0; --t3: #c8a07a; --t4: #8ac8a0; --t5: #f0c070; --t6: #a8a0e0; --bg: #fbf9fc; --accent: #8a7ad8; }
:root[data-theme="index"][data-cards="kraft"] { --t1: #5a6a8a; --t2: #a85a4a; --t3: #7a5a3a; --t4: #6a7a4a; --t5: #b08a3a; --t6: #4a7a7a; --bg: #e9dcc6; --surface: #fbf6ec; --rail: #e2d3ba; --accent: #8a5a3a; }
:root[data-theme="index"][data-cards="bright"] { --t1: #1f6fff; --t2: #ff3b5c; --t3: #ff8a1f; --t4: #18b06a; --t5: #f5b800; --t6: #8a4dff; --accent: #1f6fff; }
:root[data-theme="index"][data-cards="mono"] { --t1: #2b2b2b; --t2: #5a5a5a; --t3: #7a7a7a; --t4: #3e3e3e; --t5: #6a6a6a; --t6: #4a4a4a; --accent: #2b2b2b; }
:root[data-theme="index"][data-cards="night"] { --t1: #6a8ae8; --t2: #f07a8a; --t3: #d8a070; --t4: #6ad0a0; --t5: #f0c060; --t6: #9a8af0; --bg: #16171d; --surface: #22232b; --surface-2: #2c2d36; --rail: #1b1c23; --ink: #eceef5; --ink-2: #c4c7d4; --muted: #8a8ea0; --line: #33343e; --accent: #8aa8ff; color-scheme: dark; }
:root[data-theme="index"][data-cards="night"] .rail-btn .rdot { background: #2c2d36; color: #c4c7d4; }
:root[data-theme="index"][data-cards="night"] .mini-icon { background: #2c2d36; }
/* Comic drawings (when "With drawings" is on): halftone dots in the corners, POW/BAM/WOW bursts, a speech bubble and speed lines */
:root[data-theme="comic"] { background: #fff7e0; }
:root[data-theme="comic"]:not([data-art="off"]) body { background: transparent; }
:root[data-theme="comic"]:not([data-art="off"]) body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: #fff7e0 url(art/comic/bg.png) center / cover no-repeat; }
/* Pastel: the candy-style solid "lip" under each card (as in Candy), in Pastel's coral */
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .card, :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .dots-card, :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tile, :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .hcard {
  --lipbg: var(--lipdef, #ebe6f5);
  box-shadow: 0 5px 0 color-mix(in oklch, var(--lipbg) 78%, #7a4a8a 22%);
  box-shadow: 0 5px 0 oklch(from var(--lipbg) calc(l - .1) calc(c + .05) h);
}
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-1 { --lipbg: var(--tint-1); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-2 { --lipbg: var(--tint-2); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-3 { --lipbg: var(--tint-3); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-4 { --lipbg: var(--tint-4); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-5 { --lipbg: var(--tint-5); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) .tint-6 { --lipbg: var(--tint-6); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) body:not([data-tab="today"]) main :is(.card, .tile, .hcard) { --lipbg: var(--sec-card, var(--surface)); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) body:not([data-tab="today"]) main .card.focus { --lipbg: var(--sec, var(--surface)); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-0 { --lipbg: var(--list-0, var(--sec-card, var(--surface))); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-1 { --lipbg: var(--list-1, var(--sec-card, var(--surface))); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-2 { --lipbg: var(--list-2, var(--sec-card, var(--surface))); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-3 { --lipbg: var(--list-3, var(--sec-card, var(--surface))); }
:root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-4 { --lipbg: var(--list-4, var(--sec-card, var(--surface))); } :root:is([data-theme="pastel"], [data-theme="ocean"], [data-theme="matcha"]) main .card.list-card.lc-5 { --lipbg: var(--list-5, var(--sec-card, var(--surface))); }
:root[data-theme="ocean"] { --lipdef: #dceef0; }
:root[data-theme="matcha"] { --lipdef: #e3ecd8; }

/* Tarot (Night and Parchment): celestial line art behind, cards with a double gold frame, Cinzel titles numbered in Roman numerals */
:root[data-theme="tarot"] {
  --bg: #141228; --rail: rgba(16, 14, 34, .9); --surface: rgba(22, 20, 44, .82); --surface-2: rgba(36, 32, 66, .85);
  --ink: #ece0b8; --ink-2: #d6c79a; --muted: #a8996e; --line: rgba(201, 168, 90, .3);
  --accent: #c9a85a; --accent-soft: rgba(201, 168, 90, .18); --on-accent: #141228; --late: #e07a7a;
  --gold: #c9a85a; --frame-bg: rgba(22, 20, 44, .82);
  --heading: "Cinzel", Georgia, serif; --sans: "Cormorant Garamond", Georgia, serif;
  --radius: 4px; --card-border: var(--gold); --shadow: none;
  --p1: rgba(201,168,90,.1); --i1: #e8cf8a; --p2: rgba(201,168,90,.1); --i2: #d8b0e0; --p3: rgba(201,168,90,.1); --i3: #a8c8e8;
  --p4: rgba(201,168,90,.1); --i4: #b8d8a8; --p5: rgba(201,168,90,.1); --i5: #e8a8a8; --p6: rgba(201,168,90,.1); --i6: #e8d8a8;
  --tint-1: var(--frame-bg); --tint-2: var(--frame-bg); --tint-3: var(--frame-bg); --tint-4: var(--frame-bg); --tint-5: var(--frame-bg); --tint-6: var(--frame-bg);
  --h0: #c9a85a; --h1: #d8a070; --h2: #a8c8a0; --h3: #e8cf8a; --h4: #c8a0d0; --h5: #a8c0e0; --h6: #b8a0e8; --h7: #e08a8a;
  --blue: #a8c0e0; --green: #c9a85a; --yellow: #e8cf8a; --violet: #b8a0e8; --pink: #d8a0b8; --chart: #c9a85a;
  --sl-bad: #6a5a8a; --sl-good: #e8cf8a;
  color-scheme: dark; background: #141228;
}
:root[data-theme="tarotparch"] {
  --bg: #efe3c8; --rail: rgba(232, 218, 186, .92); --surface: #f8f0dc; --surface-2: #f1e6cc;
  --ink: #3a2418; --ink-2: #5a3a28; --muted: #8a6a4a; --line: rgba(160, 122, 52, .35);
  --accent: #9a2e2e; --accent-soft: rgba(154, 46, 46, .12); --on-accent: #f8f0dc; --late: #9a2e2e;
  --gold: #a07a34; --frame-bg: #f8f0dc;
  --heading: "Cinzel", Georgia, serif; --sans: "Cormorant Garamond", Georgia, serif;
  --radius: 4px; --card-border: var(--gold); --shadow: none;
  --p1: #f1e6cc; --i1: #9a2e2e; --p2: #f1e6cc; --i2: #6a3a6a; --p3: #f1e6cc; --i3: #2a4a6a; --p4: #f1e6cc; --i4: #3a5a2a; --p5: #f1e6cc; --i5: #8a4a1a; --p6: #f1e6cc; --i6: #7a6a1a;
  --tint-1: #f8f0dc; --tint-2: #f8f0dc; --tint-3: #f8f0dc; --tint-4: #f8f0dc; --tint-5: #f8f0dc; --tint-6: #f8f0dc;
  --h0: #9a2e2e; --h1: #a07a34; --h2: #3a5a2a; --h3: #b08a3a; --h4: #6a3a6a; --h5: #2a4a6a; --h6: #8a4a1a; --h7: #5a3a28;
  --blue: #2a4a6a; --green: #9a2e2e; --yellow: #b08a3a; --violet: #6a3a6a; --pink: #9a2e2e; --chart: #9a2e2e;
  --sl-bad: #d8c49a; --sl-good: #9a2e2e;
  color-scheme: light; background: #efe3c8;
}
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) body { background: transparent; font-size: 17px; }
:root[data-theme="tarot"] body::before, :root[data-theme="tarotparch"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: center / cover no-repeat; }
:root[data-theme="tarot"] body::before { background-color: #141228; background-image: url(art/tarot/night.svg); }
:root[data-theme="tarotparch"] body::before { background-color: #efe3c8; background-image: url(art/tarot/parchment.svg); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) main::before, :root:is([data-theme="tarot"], [data-theme="tarotparch"]) main::after { display: none; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) main { counter-reset: arcana; }
/* Double gold frame on every card */
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) :is(.card, .dots-card, .tile, .hcard, .ag-day, .pg-page) {
  background: var(--frame-bg) !important; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -6px; border-radius: 4px; box-shadow: none;
}
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .card-head, :root:is([data-theme="tarot"], [data-theme="tarotparch"]) .card.pad { padding-top: 14px; }
/* Titles: small caps, letter-spaced, numbered like arcana (I · TODAY, II · …) */
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) :is(.card-head h3, .card-title) { font: 600 12.5px var(--heading); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) :is(.card-head h3, .card-title)::before { content: counter(arcana, upper-roman) " · "; counter-increment: arcana; display: inline; width: auto; height: auto; background: none; margin: 0; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .display { font-weight: 700; letter-spacing: .04em; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .display .year { color: var(--gold); font-style: normal; letter-spacing: .08em; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .eyebrow { font-family: "Cinzel", serif; letter-spacing: .3em; color: var(--gold); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .mini strong { font: 600 13px "Cinzel", serif; letter-spacing: .08em; }
/* Ticks become diamonds */
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .check { border-radius: 1px; transform: rotate(45deg) scale(.82); border: 1.5px solid var(--gold); background: transparent; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .check.on { background: var(--gold); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .check.on::after { transform: rotate(-90deg) translate(1px, 0); border-color: var(--frame-bg); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .hcirc { border: 1.5px solid var(--gold); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .btn, :root:is([data-theme="tarot"], [data-theme="tarotparch"]) .seg { border-radius: 4px; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .seg button { border-radius: 3px; font-family: "Cinzel", serif; letter-spacing: .06em; font-size: 13px; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .sheet-panel { background: var(--bg); border-top: 1px solid var(--gold); }
:root[data-theme="tarot"] .sheet-panel { background: #1b1836; }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) .now-bar { background: var(--frame-bg); color: var(--ink); border: 1px solid var(--gold); border-radius: 4px; }
/* Tarot: the sun with an eye and the moon phases sit fully visible above every screen's title */
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) main { padding-top: calc(var(--safe-top) + 112px); }
:root:is([data-theme="tarot"], [data-theme="tarotparch"]) main::before {
  display: block; content: ""; position: absolute; z-index: 0; top: calc(var(--safe-top) + 4px); left: 50%; right: auto; width: 230px; height: 102px;
  transform: translateX(-50%); border-radius: 0; background: center / contain no-repeat; pointer-events: none;
}
:root[data-theme="tarot"] main::before { background-image: url(art/tarot/top-night.svg); }
:root[data-theme="tarotparch"] main::before { background-image: url(art/tarot/top-parch.svg); }


/* Pages: a full day scrolls on its own (swipe up inside it), so its to-dos never spill over the next day. */
.pg-page .ag-day { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pg-page .ag-day::-webkit-scrollbar { display: none; }
.pg-page .ag-day .ag-head { position: sticky; top: -6px; z-index: 1; background: var(--surface); margin: -6px -6px 2px; padding: 6px 6px 3px; }
.pg-page .ag-day.today .ag-head { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* Agenda/Pages: the month title stays on one line, so swiping into a longer month name doesn't push everything down. */
#ag-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(1em, 8.4vw); }
.page-head > div:has(#ag-title) { min-width: 0; flex: 1; }

/* Lists: "…" under a card with more than three items; tap it to see them all. */
.lc-more { display: block; align-self: stretch; text-align: center; font-size: 20px; line-height: 1; padding: 2px 0 0; color: var(--muted); letter-spacing: 2px; }

/* Summary screen: same section colours and scenes as Plan. */
:root[data-theme="pastel"] body[data-tab="summary"] { --sec: #e5e2fb; --sec2: #d6d1f7; --sec-card: #f3f1fd; --sec-ink: #534ab7; }
:root[data-theme="pastel"] .rail-btn[data-tab="summary"] { --rd: #e5e2fb; --ri: #534ab7; }
:root:not([data-theme="pastel"]) body[data-tab="summary"] { --sec: var(--p2); --sec-ink: var(--i2); }
:root:not([data-theme="pastel"]) .rail-btn[data-tab="summary"] { --rd: var(--p2); --ri: var(--i2); }
:root[data-theme="vaporwave"] body[data-tab="summary"]::before { background-image: url(art/vapor/pool.svg); }
:root[data-theme="lofi"] body[data-tab="summary"]::before { background-image: url(art/lofi/px-terrace.png); }
.sum-stats { grid-template-columns: repeat(4, 1fr); margin-top: 4px; }
.sum-stats .stat { padding: 10px 4px; }
.sum-story h3 { display: flex; align-items: center; gap: 6px; }
.sum-story h3 .ti { width: 18px; height: 18px; }
.sum-text { margin: 8px 0 0; font: 16px/1.55 var(--heading); white-space: pre-wrap; color: var(--ink); }
.sum-habits { display: grid; gap: 7px; margin-top: 6px; }
.sum-h { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr 3em; align-items: center; gap: 10px; font-size: 14px; }
.sum-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-h i { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--accent) var(--p), var(--line) var(--p)); }
.sum-h b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sum-care span + span::before { content: " · "; }
.sum-col { display: flex; flex-direction: column; gap: 14px; }

/* Agenda: weeks stand apart — a "Week 45" strip before each Monday and a tint on alternate weeks. */
.ag-strip .ag-wk { flex: 0 0 22px; display: flex; align-items: flex-start; justify-content: center; margin: 0 2px 0 6px; border-left: 2px solid var(--accent); border-radius: 0; }
.ag-strip .ag-wk:first-child { margin-left: 0; }
.ag-wk span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 10px 0 0 4px; white-space: nowrap; }
.ag-strip .ag-day.wk-alt { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ag-strip .ag-day.mon { box-shadow: var(--shadow); }

/* Swiping pages: no sideways scrollbar while a page slides in or out. */
html, body { overflow-x: clip; }