/* DailyHabitAI app shell. Brand: ivory, navy serif, cobalt controls, orange accents. Mobile first, safe-area aware. */
:root {
  --ivory: #fffdf8; --paper: #fff; --sand: #f6f1e8; --line: #ebe4d8; --line-strong: #ddd3c4;
  --ink: #172033; --ink-2: #3e4a56; --ink-3: #6b7480; --navy: #12367f; --cobalt: #1550b8; --cobalt-soft: #e7efff;
  --orange: #ee5d2b; --orange-soft: #fff0e6; --green: #2f7d4f; --green-soft: #e4f3e8; --amber: #d98a1c; --amber-soft: #fff3dc;
  --danger: #c2412d; --radius: 20px; --radius-small: 14px; --shadow: 0 1px 2px #1720330d, 0 6px 18px #17203312;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 52px; --tab-h: 58px; --col: 560px;
  --serif: 'Fraunces', Georgia, serif; --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html.app-html { background: var(--ivory); -webkit-text-size-adjust: 100%; }
body.app {
  margin: 0; min-height: 100dvh; background: var(--ivory); color: var(--ink); font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 24px);
}
body.app.no-tabbar { padding-bottom: calc(var(--safe-bottom) + 24px); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label, .tabbar, .navbar { touch-action: manipulation; }
button, .tabbar, .navbar, .check-btn, .list-row, .habit-row, .segment, .choice { -webkit-user-select: none; user-select: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.icon { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #f2783c; outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }

/* ---------- boot ---------- */
.boot { min-height: 70dvh; display: grid; place-items: center; }
.boot img { animation: spin 2.4s linear infinite; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }
.noscript { padding: 40px 20px; max-width: var(--col); margin: auto; }

/* ---------- install bar (browser only) ---------- */
.install-bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + var(--safe-top)) 12px 8px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.install-bar img { border-radius: 9px; }
.install-bar p { flex: 1; margin: 0; display: grid; font-size: 13px; line-height: 1.25; min-width: 0; }
.install-bar p span { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-install-bar .navbar { top: 50px; }

/* ---------- screens ---------- */
.screens { max-width: var(--col); margin: 0 auto; }
.screen { min-height: 60dvh; }
.navbar {
  position: sticky; top: 0; z-index: 20; height: calc(var(--nav-h) + var(--safe-top)); padding: var(--safe-top) 8px 0;
  display: grid; grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr); align-items: center;
  background: color-mix(in srgb, var(--ivory) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
body.has-install-bar .navbar { padding-top: 0; height: var(--nav-h); }
.navbar.is-scrolled, .navbar.is-compact { border-bottom-color: var(--line); }
.navbar-title { margin: 0; font-weight: 700; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.navbar.is-scrolled .navbar-title, .navbar.is-compact .navbar-title { opacity: 1; transform: none; }
.navbar-side { display: flex; align-items: center; gap: 2px; }
.navbar-actions { justify-content: flex-end; }
.navbar-back { display: inline-flex; align-items: center; gap: 0; color: var(--cobalt); font-weight: 600; text-decoration: none; min-height: 44px; padding-right: 8px; }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; display: inline-grid; place-items: center; color: var(--cobalt); cursor: pointer; }
.icon-btn:active { background: var(--cobalt-soft); }
.icon-btn.is-disabled { color: var(--ink-3); opacity: .6; }
.screen-body { padding: 0 16px; }
.large-title { padding: 2px 4px 14px; }
.large-title h1 { font: 700 34px/1.1 var(--serif); letter-spacing: -.03em; margin: 0; color: var(--ink); }
.large-subtitle { margin: 4px 0 0; color: var(--ink-3); font-weight: 600; font-size: 15px; }
.section-title { font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 26px 4px 10px; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + var(--safe-bottom)); padding: 0 max(8px, calc((100vw - var(--col)) / 2)) var(--safe-bottom);
  background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.tabbar a.is-active { color: var(--cobalt); }
.tabbar a:active .icon { transform: scale(.9); }
.tabbar .icon { transition: transform .15s; }

/* ---------- buttons ---------- */
.btn {
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .12s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-primary { background: var(--cobalt); color: #fff; box-shadow: 0 4px 14px #1550b833; }
.btn-soft { background: var(--cobalt-soft); color: var(--navy); }
.btn-quiet { background: transparent; color: var(--cobalt); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn-large { min-height: 54px; font-size: 16px; border-radius: 16px; }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cobalt); font-weight: 700; text-decoration: none; padding: 10px 0; }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 0 0 12px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-title { font: 700 19px/1.2 var(--serif); letter-spacing: -.02em; margin: 0 0 6px; }
.card-kicker { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); margin: 0 0 6px; }
.card-text { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.link-card { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; color: var(--ink); }
.link-card span { display: grid; }
.link-card small { color: var(--ink-3); }
.link-card .icon { color: var(--ink-3); }

/* ---------- week strip ---------- */
.week-strip { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.strip-day { display: grid; justify-items: center; gap: 4px; }
.strip-weekday { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.strip-ring { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.strip-ring svg { position: absolute; inset: 0; }
.strip-ring b { position: relative; font-size: 14px; font-weight: 700; }
.strip-day.is-today .strip-ring b { color: #fff; }
.strip-day.is-today .strip-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--cobalt); }
.strip-day.is-today .strip-weekday { color: var(--cobalt); }
.strip-day.is-empty .strip-ring b { color: var(--ink-3); }
.strip-day.is-today.is-empty .strip-ring b { color: #fff; }

/* ---------- rings ---------- */
.ring-track { stroke: var(--line); }
.ring-value { stroke: var(--green); transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.ring-small .ring-track { stroke: var(--line); }

/* ---------- today cards ---------- */
.today-list { display: grid; gap: 12px; }
.today-card { padding: 0; overflow: hidden; margin: 0; }
.today-card-row { display: flex; align-items: center; gap: 4px; padding: 12px 12px 12px 12px; }
.today-card-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 2px; text-align: left; cursor: pointer; border-radius: 14px; }
.today-card-main:active { background: var(--sand); }
.today-card-text { display: grid; min-width: 0; gap: 1px; }
.today-kicker { font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: .03em; }
.today-name { font: 700 18px/1.2 var(--serif); letter-spacing: -.02em; }
.today-step { font-size: 15px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-cue { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-card.is-done, .today-card.is-small { background: #fbfdf9; }
.today-card.is-done .today-step, .today-card.is-small .today-step { color: var(--ink-3); }
.today-card.is-skip { opacity: .82; }

.check-btn { position: relative; flex: none; width: 64px; height: 64px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; color: var(--line-strong); text-decoration: none; }
.check-btn .check-ring { position: absolute; inset: 3px; }
.check-btn .check-ring .ring-track { stroke: var(--line-strong); }
.check-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s, transform .2s; }
.check-btn.is-pending .check-icon { color: color-mix(in srgb, var(--cobalt) 45%, var(--paper)); }
.check-btn.is-pending .check-ring .ring-track { stroke: color-mix(in srgb, var(--cobalt) 28%, var(--paper)); }
.check-btn.is-pending:active .check-icon { transform: scale(.9); background: var(--green-soft); color: var(--green); }
.check-btn.is-done .check-icon { background: var(--green); color: #fff; }
.check-btn.is-small .check-icon { background: var(--amber-soft); color: var(--amber); }
.check-btn.is-small .ring-value { stroke: var(--amber); }
.check-btn.is-skip .check-icon { background: var(--sand); color: var(--ink-3); }
.check-btn.is-rest .check-icon { color: var(--line-strong); }
.check-btn.is-finished { color: var(--orange); background: var(--orange-soft); width: 52px; height: 52px; margin: 6px; }
.check-label { position: absolute; bottom: -2px; font-size: 10px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.check-btn.is-done .check-label, .check-btn.is-small .check-label { display: none; }
.check-btn.is-popping .check-icon { animation: pop .38s cubic-bezier(.2,1.6,.4,1); background: var(--green); color: #fff; }
.check-btn.is-popping .ring-value { stroke-dashoffset: 0 !important; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.card-prompts { border-top: 1px solid var(--line); background: var(--sand); padding: 12px 14px; }
.prompt p { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.prompt-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.all-done { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--green-soft); color: #1f5a37; margin: 0 0 12px; animation: rise .4s ease; }
.all-done strong { display: block; font: 700 17px/1.2 var(--serif); }
.all-done p { margin: 2px 0 0; font-size: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.add-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 12px 0 0; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); color: var(--cobalt); font-weight: 700; text-decoration: none; }
.add-row:active { background: var(--cobalt-soft); }

/* ---------- setup + review cards ---------- */
.setup-card { background: var(--cobalt-soft); border-color: #d3e0fb; box-shadow: none; }
.setup-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 0; border: 0; border-top: 1px solid #d3e0fb; background: none; cursor: pointer; color: var(--ink); }
.setup-row:disabled { cursor: default; }
.setup-row .icon { color: var(--cobalt); }
.setup-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid #a9bfe9; display: grid; place-items: center; }
.setup-check.is-done { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.setup-text { flex: 1; display: grid; }
.setup-text small { color: var(--ink-3); font-size: 13px; }
.setup-dismiss { margin: -10px -10px 0 0; color: var(--ink-3); }
.review-card { background: var(--orange-soft); border-color: #f7d9c6; box-shadow: none; }

/* ---------- thumbs ---------- */
.thumb { --size: 56px; width: var(--size); height: var(--size); flex: none; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--sand); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-large { --size: 96px; border-radius: 26px; margin: 8px 0 14px; }
.tone-blue { background: #e3f0ff; } .tone-peach { background: #ffe8d9; } .tone-green { background: #edf5c6; }
.tone-yellow { background: #fff0cc; } .tone-violet { background: #f1e6ff; } .tone-mint { background: #dff4ea; }

/* ---------- lists ---------- */
.group { margin: 0 0 22px; }
.group-title { font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 4px 8px; }
.group-note { margin: 8px 4px 0; font-size: 13px; color: var(--ink-3); }
.group-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.group-list > li + li, .group-list > .list-row + .list-row { border-top: 1px solid var(--line); }
.list-row { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; background: none; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; }
.list-row:active, .habit-row:active, .progress-row:active { background: var(--sand); }
.list-row > .icon:first-child { color: var(--cobalt); }
.list-row > .icon:last-child { color: #b9b1a4; }
.list-row.is-danger, .list-row.is-danger > .icon:first-child { color: var(--danger); }
.row-label { flex: 1; font-weight: 500; }
.row-value { color: var(--ink-3); font-size: 15px; }
.list-empty { margin: 0; padding: 14px; color: var(--ink-3); }
.habit-row, .progress-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.habit-row > .icon:last-child, .progress-row > .icon:last-child { color: #b9b1a4; }
.habit-row-text, .progress-row-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.habit-row-text strong, .progress-row-text strong { font: 700 17px/1.2 var(--serif); letter-spacing: -.01em; }
.habit-row-meta { font-size: 13px; color: var(--ink-3); }
.habit-row.is-archived { opacity: .7; }
.list-note { font-size: 13px; color: var(--ink-3); margin: 10px 4px; }
.archived { margin-top: 18px; }
.archived summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 10px 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--sand); color: var(--ink-2); white-space: nowrap; }
.chip-time { background: var(--cobalt-soft); color: var(--navy); }
.chip-done { background: var(--green-soft); color: var(--green); }
.chip-small { background: var(--amber-soft); color: #8a560d; }
.chip-now { background: var(--orange-soft); color: var(--orange); margin-left: 6px; }

/* status colours: calm, never red for a missed day */
.s-done { --c: var(--green); } .s-small { --c: #e9a73b; } .s-skip { --c: #cfc6b8; } .s-missed { --c: #efe9df; }
.s-rest, .s-rest-upcoming { --c: #efe9df; } .s-upcoming, .s-before, .s-after { --c: #fff; }
.week-dots { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #0000000f; }
.dot.s-before, .dot.s-after { visibility: hidden; }
.dot.is-today { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.bar { display: block; height: 6px; border-radius: 6px; background: var(--sand); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.progress-row-text small { color: var(--ink-3); font-size: 13px; }

/* ---------- habit detail ---------- */
.habit-hero { padding: 8px 4px 18px; }
.habit-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.habit-hero-ring { position: relative; width: 76px; height: 76px; display: grid; place-items: center; }
.habit-hero-ring svg { position: absolute; inset: 0; }
.habit-hero-ring span, .stat-ring span { display: grid; justify-items: center; line-height: 1; }
.habit-hero-ring b { font: 700 22px/1 var(--serif); }
.habit-hero-ring small, .stat-ring small { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.habit-hero-name { font: 700 30px/1.1 var(--serif); letter-spacing: -.03em; margin: 0 0 6px; }
.habit-hero-rule { margin: 0 0 4px; font-weight: 600; color: var(--navy); }
.habit-hero-meta { margin: 0; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); padding: 3px; border-radius: 12px; margin: 8px 0 14px; }
.segment { min-height: 38px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.segment[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px #17203326; }
.grid-head p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.day-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.cell { aspect-ratio: 1; border-radius: 12px; background: var(--c); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--ink-2); box-shadow: inset 0 0 0 1px #00000010; }
.cell-btn { width: 100%; height: 100%; border: 0; background: none; border-radius: 12px; font-weight: 700; font-size: 14px; color: inherit; cursor: pointer; }
.cell.s-done, .cell.s-small { color: #fff; }
.cell.s-small { color: #6d4509; }
.cell.is-today { box-shadow: 0 0 0 2.5px var(--cobalt); }
.legend { list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-3); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px #00000014; }
.why-quote { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--radius-small); background: var(--orange-soft); }
.why-quote p { margin: 0; font: 600 18px/1.35 var(--serif); color: var(--ink); }
.why-quote small { color: var(--ink-3); font-size: 12px; }
.note-card { padding: 14px 16px; border-radius: var(--radius-small); background: var(--paper); border: 1px solid var(--line); margin: 0 0 10px; }
.note-card strong { font-size: 14px; }
.note-card p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.finish-card { background: var(--green-soft); border-color: #cfe7d6; }
.plan-phase { margin: 0 0 18px; }
.plan-phase-title { display: flex; align-items: center; font: 700 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 4px 8px; }
.plan-phase-note { margin: 0 4px 10px; font-size: 14px; color: var(--ink-2); }
.plan-days, .preview-days { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plan-days li + li, .preview-days li + li { border-top: 1px solid var(--line); }
.plan-day { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.plan-day:active { background: var(--sand); }
.plan-day.is-today { background: #f3f7ff; }
.plan-day > .icon { color: #b9b1a4; }
.plan-day-num { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--c, var(--sand)); box-shadow: inset 0 0 0 1px #00000010; }
.plan-day-num.s-done { color: #fff; }
.plan-day-text { flex: 1; min-width: 0; display: grid; }
.plan-day-text strong { font-weight: 600; font-size: 15px; }
.plan-day-text small { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-days li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }

/* ---------- progress ---------- */
.stat-card { display: flex; align-items: center; gap: 16px; }
.stat-ring { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-items: center; }
.stat-ring svg { position: absolute; inset: 0; }
.stat-ring b { font: 700 26px/1 var(--serif); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendar-head .card-title { margin: 0; }
.calendar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-weekday { font-size: 11px; font-weight: 700; color: var(--ink-3); padding-bottom: 4px; }
.calendar-day { min-height: 44px; border-radius: 10px; display: grid; align-content: center; justify-items: center; gap: 3px; font-size: 14px; font-weight: 600; }
.calendar-day.is-today { background: var(--cobalt-soft); color: var(--navy); }
.calendar-day.is-future { color: #c2baad; }
.calendar-dots { display: flex; gap: 2px; min-height: 6px; }
.calendar-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.calendar-dots i.s-done { background: var(--green); } .calendar-dots i.s-small { background: #e9a73b; } .calendar-dots i.s-skip { background: #cfc6b8; }

/* ---------- empty + onboarding ---------- */
.empty { text-align: center; padding: 48px 20px; display: grid; justify-items: center; gap: 4px; }
.empty-title { font: 700 22px/1.2 var(--serif); margin: 0; }
.empty-text { color: var(--ink-2); margin: 0 0 16px; max-width: 320px; }
.empty-note { color: var(--ink-3); font-size: 14px; margin: 0 4px 12px; }
.onboarding { display: grid; gap: 10px; padding: 4px 0 12px; }
.onboarding-art { border-radius: 28px; overflow: hidden; background: #fff0d5; aspect-ratio: 3 / 2; }
.onboarding-art img { width: 100%; height: 100%; object-fit: cover; }
.onboarding-title { font: 700 28px/1.1 var(--serif); letter-spacing: -.03em; margin: 10px 0 0; }
.onboarding-text { margin: 0 0 8px; color: var(--ink-2); }

/* ---------- sheets ---------- */
dialog.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: var(--col); max-height: 92dvh; border: 0; padding: 0 0 calc(18px + var(--safe-bottom));
  border-radius: 26px 26px 0 0; background: var(--ivory); color: var(--ink); box-shadow: 0 -10px 40px #17203326; overflow: auto; overscroll-behavior: contain;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.9,.25,1);
}
dialog.sheet.is-open { transform: none; }
dialog.sheet::backdrop { background: #17203300; transition: background .28s; }
dialog.sheet.is-open::backdrop { background: #1720335c; }
.sheet-handle { width: 40px; height: 5px; border-radius: 5px; background: #d6cebf; margin: 8px auto 0; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 4px 20px; background: var(--ivory); }
.sheet-title { font: 700 20px/1.2 var(--serif); letter-spacing: -.02em; margin: 0; }
.sheet-close { color: var(--ink-3); background: var(--sand); width: 34px; height: 34px; }
.sheet-body { padding: 4px 20px 0; display: grid; gap: 12px; }
.sheet-text { margin: 0; color: var(--ink-2); }
.sheet-subtitle { font: 700 16px/1.2 var(--sans); margin: 8px 0 0; }
.sheet-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); }
.sheet-actions { display: grid; gap: 4px; margin-top: 4px; }
.day-title { font: 700 26px/1.15 var(--serif); letter-spacing: -.03em; margin: -4px 0 0; }
.day-action { margin: 0; font-size: 18px; line-height: 1.5; }
.day-small { background: var(--orange-soft); border-radius: var(--radius-small); padding: 12px 14px; font-size: 16px; }
.day-why { margin: 0; color: var(--ink-2); font-size: 15px; }
.day-tip { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--navy); background: var(--cobalt-soft); border-radius: var(--radius-small); padding: 10px 12px; }
.day-tip .icon { margin-top: 2px; color: var(--cobalt); }
.day-actions { display: grid; gap: 6px; margin-top: 4px; }
.day-marked { display: flex; align-items: center; gap: 10px; }
.day-marked p { margin: 0; color: var(--ink-2); font-size: 14px; }
.day-change { display: grid; gap: 2px; }
.day-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.menu-list { display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 4px; }
.menu-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; background: none; text-align: left; font-weight: 600; cursor: pointer; color: var(--ink); }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row .icon { color: var(--cobalt); }
.menu-row.is-danger, .menu-row.is-danger .icon { color: var(--danger); }
.menu-row:active { background: var(--sand); }
.choice-row { width: 100%; display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--radius-small); border: 1px solid var(--line); background: var(--paper); cursor: pointer; color: var(--ink); }
.choice-row small { color: var(--ink-3); }
.choice-row:active { background: var(--cobalt-soft); border-color: #c9d8f5; }
.review-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.review-stat { display: grid; justify-items: center; padding: 10px 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.review-stat b { font: 700 22px/1 var(--serif); }
.review-stat span { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field-input { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); padding: 10px 12px; font-size: 16px; }
.field-status { margin: 0; min-height: 20px; font-size: 14px; color: var(--ink-2); }
.time-field { display: grid; place-items: center; }
.time-input { font: 700 40px/1 var(--serif); text-align: center; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--paper); padding: 14px 20px; min-width: 220px; color: var(--ink); }
.fine-print { margin: 0; font-size: 12px; color: var(--ink-3); }
.code-box { width: 100%; font: 12px/1.4 ui-monospace, monospace; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px; background: var(--paper); }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.install-step { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-small); padding: 12px; }
.install-step p { margin: 2px 0 6px; font-size: 14px; color: var(--ink-2); }
.install-num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.install-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cobalt-soft); color: var(--cobalt); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-bottom) + 10px); z-index: 60; display: grid; justify-items: center; padding: 0 12px; pointer-events: none; }
body.no-tabbar .toasts { bottom: calc(var(--safe-bottom) + 16px); }
.toast { pointer-events: auto; max-width: 520px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: #1b2436; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px #17203340; transform: translateY(20px); opacity: 0; transition: transform .25s, opacity .25s; }
.toast.is-in { transform: none; opacity: 1; }
.toast span { flex: 1; }
.toast-action { border: 0; background: none; color: #9fc0ff; font-weight: 700; padding: 6px 8px; cursor: pointer; }

/* ---------- wizard ---------- */
.screen.is-wizard .navbar { grid-template-columns: 64px 1fr 64px; }
.wizard { padding-top: 4px; }
.wizard-progress { height: 6px; background: var(--sand); border-radius: 6px; overflow: hidden; }
.wizard-progress i { display: block; height: 100%; width: 0; background: var(--cobalt); border-radius: 6px; transition: width .3s; }
.wizard-count { margin: 10px 2px 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.wizard-error { margin: 6px 2px 0; color: var(--danger); font-weight: 600; font-size: 14px; min-height: 0; }
.wizard-error:empty { display: none; }
.wizard-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard-form legend { font: 700 27px/1.15 var(--serif); letter-spacing: -.03em; padding: 0; margin: 10px 0 8px; }
.wizard-form .build-help { margin: 0 0 14px; color: var(--ink-2); }
.wizard-form .choice-grid, .wizard-form .choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.wizard-form .choice { position: relative; cursor: pointer; }
.wizard-form .choice input { position: absolute; opacity: 0; pointer-events: none; }
.wizard-form .choice span { min-height: 56px; display: flex; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; line-height: 1.25; transition: border-color .15s, background .15s, transform .1s; }
.wizard-form .choice:active span { transform: scale(.98); }
.wizard-form .choice input:checked + span { border-color: var(--cobalt); background: var(--cobalt-soft); color: var(--navy); box-shadow: inset 0 0 0 1px var(--cobalt); }
.wizard-form .choice input:focus-visible + span { outline: 3px solid #f2783c; outline-offset: 2px; }
.wizard-form .build-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.wizard-form .build-field .optional { font-weight: 500; color: var(--ink-3); }
.wizard-form input[type=text], .wizard-form input:not([type]), .wizard-form input[type=time], .wizard-form textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--paper); padding: 12px 14px; font-size: 16px; font-weight: 500; color: var(--ink); }
.wizard-form textarea { min-height: 96px; resize: vertical; }
.wizard { padding-bottom: 150px; }
.wizard-nav, .wizard-footer { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 18px max(16px, calc((100vw - var(--col)) / 2 + 16px)) calc(12px + var(--safe-bottom)); background: linear-gradient(to top, var(--ivory) 78%, #fffdf800); }
body.no-tabbar .install-bar { display: none !important; }
body.no-tabbar .navbar { top: 0; padding-top: var(--safe-top); height: calc(var(--nav-h) + var(--safe-top)); }
.wizard-nav .btn-primary { flex: 1; }
.wizard-footer { flex-direction: column; }
.wizard-preview { display: grid; }
.preview-name { font: 700 30px/1.1 var(--serif); letter-spacing: -.03em; margin: 0 0 6px; }
.preview-rule { margin: 0 0 16px; font-weight: 600; color: var(--navy); }

.version { text-align: center; color: var(--ink-3); font-size: 12px; margin: 6px 0 0; }

/* ---------- view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  html[data-nav="forward"]::view-transition-old(root) { animation-name: slide-out-left; }
  html[data-nav="forward"]::view-transition-new(root) { animation-name: slide-in-right; }
  html[data-nav="back"]::view-transition-old(root) { animation-name: slide-out-right; }
  html[data-nav="back"]::view-transition-new(root) { animation-name: slide-in-left; }
  html[data-nav="tab"]::view-transition-old(root) { animation: fade-out .14s ease both; }
  html[data-nav="tab"]::view-transition-new(root) { animation: fade-in .18s ease both; }
  .tabbar { view-transition-name: tabbar; }
  .install-bar { view-transition-name: installbar; }
  ::view-transition-group(tabbar), ::view-transition-group(installbar) { animation: none; }
}
@keyframes slide-in-right { from { transform: translateX(30%); opacity: 0; } }
@keyframes slide-out-left { to { transform: translateX(-12%); opacity: 0; } }
@keyframes slide-in-left { from { transform: translateX(-12%); opacity: 0; } }
@keyframes slide-out-right { to { transform: translateX(30%); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

@media (min-width: 700px) {
  .screen-body { padding: 0 24px; }
  .large-title h1 { font-size: 40px; }
}

/* ---------- dark theme tokens (the rest is generated into app-dark.css) ---------- */
html[data-theme="dark"] {
  --ivory: #12151c; --paper: #1a1f29; --sand: #232834; --line: #2c3240; --line-strong: #3a4151;
  --ink: #eceae4; --ink-2: #c3c8d2; --ink-3: #939cab; --navy: #a9c3f5; --cobalt: #6f9bf2; --cobalt-soft: #1c2a47;
  --orange: #ff8a5c; --orange-soft: #33231b; --green: #4fb77a; --green-soft: #17291f; --amber: #f0b04a; --amber-soft: #33291a;
  --danger: #ff7a66; --shadow: 0 1px 2px #0000004d, 0 6px 18px #00000059;
}
html[data-theme="dark"] .btn-primary { background: #2f6ad9; box-shadow: 0 4px 14px #0000004d; }
html[data-theme="dark"] .toast { background: #eceae4; color: #172033; }
html[data-theme="dark"] .toast-action { color: #1550b8; }
html[data-theme="dark"] dialog.sheet.is-open::backdrop { background: #000000a6; }
html[data-theme="dark"] .navbar { background: color-mix(in srgb, var(--ivory) 86%, transparent); }
html[data-theme="dark"] .tabbar { background: color-mix(in srgb, var(--paper) 90%, transparent); }
html[data-theme="dark"] .strip-day.is-today .strip-ring::before { background: var(--cobalt); }
html[data-theme="dark"] .cell.s-small { color: #3d2a06; }

/* ---------- newsletter + feedback forms inside sheets ---------- */
.engage-form { display: grid; gap: 14px; padding-bottom: 6px; }
.engage-intro { margin: 0; color: var(--ink-2); font-size: 15px; }
.engage-field { display: grid; gap: 6px; }
.engage-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.engage-input { width: 100%; min-height: 50px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); color: var(--ink); padding: 12px 14px; font-size: 16px; }
textarea.engage-input { min-height: 110px; resize: vertical; }
.engage-topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.engage-topics legend { padding: 0; margin-bottom: 8px; }
.engage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.engage-chip { position: relative; cursor: pointer; }
.engage-chip input { position: absolute; opacity: 0; pointer-events: none; }
.engage-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.engage-chip input:checked + span { background: var(--cobalt-soft); border-color: var(--cobalt); color: var(--navy); }
.engage-chip input:focus-visible + span { outline: 3px solid #f2783c; outline-offset: 2px; }
.engage-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.engage-consent input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--cobalt); }
.engage-submit { min-height: 54px; border: 0; border-radius: 16px; background: var(--cobalt); color: #fff; font-weight: 700; font-size: 16px; }
html[data-theme="dark"] .engage-submit { background: #2f6ad9; }
.engage-submit:disabled { opacity: .6; }
.engage-status { margin: 0; color: var(--danger); font-size: 14px; font-weight: 600; }
.engage-status:empty { display: none; }
.engage-fine { margin: 0; font-size: 12px; color: var(--ink-3); }
.engage-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.engage-done { padding: 8px 0 12px; }
.engage-done-title { font: 700 22px/1.2 var(--serif); margin: 0 0 6px; }
.engage-done-text { margin: 0; color: var(--ink-2); }
.theme-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-option { display: grid; justify-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.theme-option[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.theme-swatch { width: 52px; height: 36px; border-radius: 10px; border: 1px solid #0000001f; }
.theme-swatch.is-light { background: linear-gradient(135deg, #fffdf8 55%, #1550b8 55%); }
.theme-swatch.is-dark { background: linear-gradient(135deg, #12151c 55%, #6f9bf2 55%); }
.theme-swatch.is-system { background: linear-gradient(135deg, #fffdf8 50%, #12151c 50%); }