/* Approved Concept 01: neutral, compact, data-first. Loaded last. */
:root,
[data-theme="mono"],
[data-theme="dark"] {
  --bg: #111315;
  --bg-2: #111315;
  --card: #1c1f22;
  --card-2: #25292d;
  --tx: #f2f4f6;
  --tx-2: #acb3bb;
  --tx-3: #919aa3;
  --line: #353b40;
  --line-2: #474e54;
  --field-line: #747f86;
  --accent: #b3dfbd;
  --accent-2: #b3dfbd;
  --accent-3: #9ac9ed;
  --accent-soft: rgba(179,223,189,.10);
  --accent-line: rgba(179,223,189,.32);
  --accent-glow: transparent;
  --mint: #b3dfbd;
  --mint-soft: rgba(179,223,189,.10);
  --grad: #b3dfbd;
  --shadow: none;
  --card-edge: none;
  --on-accent: #182019;
  --button-text: #182019;
}

[data-theme="light"] {
  --bg: #f7f8fa;
  --bg-2: #f7f8fa;
  --card: #ffffff;
  --card-2: #e9edf1;
  --tx: #20272c;
  --tx-2: #56616a;
  --tx-3: #66727c;
  --line: #cbd2d8;
  --line-2: #aeb8c0;
  --field-line: #737d84;
  --accent: #28613c;
  --accent-2: #28613c;
  --accent-3: #25618c;
  --accent-soft: rgba(40,97,60,.08);
  --accent-line: rgba(40,97,60,.28);
  --accent-glow: transparent;
  --mint: #28613c;
  --mint-soft: #e2efe5;
  --grad: #28613c;
  --shadow: none;
  --card-edge: none;
  --on-accent: #ffffff;
  --button-text: #ffffff;
}

* { letter-spacing: 0; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
body::before,
body::after { display:none !important; }
html:has(.launch-quote[open]) { overflow:hidden; }
.launch-quote {
  position:fixed; inset:0; width:100%; max-width:none;
  height:100%; height:100dvh; max-height:none; margin:0;
  box-sizing:border-box; border:0; border-radius:0;
  padding:calc(28px + env(safe-area-inset-top, 0px)) 24px calc(28px + env(safe-area-inset-bottom, 0px));
  background:var(--bg); color:var(--tx); overflow:auto; overscroll-behavior:contain;
}
.launch-quote[open] { display:flex; flex-direction:column; align-items:center; }
.launch-quote::backdrop { background:var(--bg); }
.launch-quote-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; font-size:16px; font-weight:650; }
.launch-quote-mark { width:32px; height:32px; }
.launch-quote-content { width:min(100%, 420px); margin-block:auto; padding-block:32px; text-align:center; flex-shrink:0; }
.launch-quote-content h2 { margin:0 0 20px; font-size:12px; font-weight:600; color:var(--tx-2); }
.launch-quote-content blockquote { margin:0; font-family:Georgia, serif; font-size:26px; line-height:1.4; text-wrap:balance; overflow-wrap:anywhere; }
.launch-quote-content p { margin:20px 0 0; font-size:14px; line-height:1.5; color:var(--tx-2); }
.launch-quote:focus { outline:none; }
.launch-logo-stage { position:absolute; inset:0; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; }
.launch-logo-lockup { display:flex; flex-direction:column; align-items:center; gap:20px; }
.launch-logo-symbol { width:112px; height:112px; transform-origin:center; }
.launch-logo-symbol .arc90-logo-core { transform-box:fill-box; transform-origin:center; }
.launch-logo-wordmark { font-size:27px; line-height:1; font-weight:600; letter-spacing:0; }
.launch-logo-wordmark b { color:var(--accent); font-weight:700; }
@media (prefers-reduced-motion: reduce) {
  .launch-logo-stage { display:none; }
}
#app { max-width: 760px; }
.screen { max-width: 760px; padding-inline: 20px; padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
.brandbar { padding-block: calc(18px + env(safe-area-inset-top, 0px)) 10px; gap:8px; }
.brandbar span { font-weight: 650; letter-spacing: .18em; }
.arc90-logo-mark { display:block; overflow:visible; color:var(--accent); }
.arc90-logo-track,
.arc90-logo-arc { fill:none; stroke-linecap:round; }
.arc90-logo-track { stroke:var(--line-2); stroke-width:8; }
.arc90-logo-arc { stroke:currentColor; stroke-width:8; }
.arc90-logo-start { fill:var(--tx); }
.arc90-logo-core { fill:var(--accent-3); }
.brandbar .brand-symbol { width:22px; height:22px; flex:0 0 22px; filter:none; transform:none; }
.brandbar { background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
.logo-mark .onboarding-symbol { width:100%; height:100%; filter:none; transform:none; }
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: 26px; line-height: 1.15; font-weight: 650; text-wrap: balance; }
.today-header { margin-bottom:4px; }
.today-header h1 { font-size:23px; text-wrap:initial; }
.today-header .sub { font-size:12px; }
.today-header .today-meta { margin-top:10px; gap:8px; }
.today-header .day-mode-trigger { min-height:44px; padding:8px 8px 8px 10px; }
.topbar .sub { margin-top: 5px; font-size: 13px; color: var(--tx-2); }
.today-meta .day-chip { padding-left:0; border:0; background:transparent; box-shadow:none; }
.day-mode-trigger { border:0; background:transparent; }
.eyebrow { color: var(--tx-2); font-size: 11px; font-weight: 600; text-transform: none; }

.card,
.hero-card,
.arc-grid-panel,
.hstat,
.cmd-vital,
.analytics-stat {
  border-color: var(--line);
  box-shadow: none;
  background: var(--card);
}
.card { border-radius: 8px; }
[data-theme="light"] .card { background:var(--card); }
.hero-card { margin-bottom:12px; padding: 8px 0 0; border:0; border-radius: 0; background: transparent; }
.hero-card::before,
.hero-card::after,
.hero-ring::before { display: none; }
.hero-topline { margin-bottom: 10px; }
.hero-card .ring-wrap { width:100px; height:100px; flex:0 0 100px; }
.hero-card .ring-wrap svg { width:100px; height:100px; }
.hero-card .ring-center { inset:18px; gap:3px; }
.hero-card .ring-center .big-num { font-size:24px; line-height:1; font-weight:600; }
.hero-card .ring-center .of { margin:0; font-size:9px; line-height:1.2; font-weight:500; white-space:nowrap; }
.hero-card .hero { gap:14px; }
.metric-context { display:block; margin-top:5px; color:var(--tx-2); font-size:10px; line-height:1.3; }
.next-move-empty { display:block; width:16px; height:16px; border:1.5px solid currentColor; border-radius:50%; }
.hero-topline strong { margin-top: 2px; font-size: 14px; }
.hero-goal-line { display:block; max-width:32ch; margin-top:4px; color:var(--tx-2); font-size:11px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-pill { border-radius: 5px; box-shadow: none; }
.hero-share { border-radius: 6px; background: transparent; }
.hero { gap: 18px; }
.ring-wrap { width: 124px; height: 124px; }
.hero-ring { background:transparent; box-shadow:none; }
.hero-card .ring-track { stroke: var(--line) !important; }
.hero-card .ring-fill { stroke: var(--accent-2) !important; filter: none !important; }
.hero-card .hero-ring svg { transform-origin:center; }
.arc-intro-trace { fill:none; stroke:var(--accent-3); stroke-width:2; stroke-linecap:round; opacity:0; pointer-events:none; }
.hero-card [data-countup] { font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce) {
  .arc-intro-trace { display:none; }
}
.big-num { font-size: 28px; font-weight: 550; }
.ring-center .of { font-size: 11px; color: var(--tx-2); }
.hero-stats { gap: 7px; }
.hstat { padding: 9px 0; border: 0; border-radius: 0; background: transparent; }
.hstat + .hstat { border-top: 1px solid var(--line); }
.hstat-val { font-size: 27px; font-weight: 550; }
.hstat-val.grad { color: var(--tx); background: none; -webkit-text-fill-color: currentColor; }
.hstat-note { font-size: 10px; color: var(--tx-2); }
.goal-copy { font-size: 13px; }
.goal-meter { height: 4px; background: var(--line); }
.goal-meter i { background: var(--accent-2); }
.approved-hero-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:4px; }
.approved-hero-metrics > div,
.approved-hero-metrics > button { min-width:0; min-height:52px; padding:0; border:0; background:transparent; color:var(--tx); text-align:left; }
.approved-hero-metrics span { display:block; color:var(--tx-2); font-size:10px; }
.approved-hero-metrics strong { display:block; margin-top:2px; color:var(--tx); font-size:24px; line-height:1.1; font-weight:550; font-variant-numeric:tabular-nums; }
.approved-hero-metrics strong span { display:inline; color:inherit; font-size:inherit; }
.approved-hero-metrics strong small { color:var(--tx-2); font-size:10px; font-weight:500; }
.approved-hero-metrics > button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.next-move {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin:12px 0 0;
  padding:10px 0;
  border-block:1px solid var(--line);
}
.next-move-mark {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:7px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:16px;
}
.next-move-mark svg { width:17px; height:17px; }
.next-move-copy { min-width:0; }
.next-move-copy > * { display:block; }
.next-move-copy strong { margin-top:2px; color:var(--tx); font-size:14px; line-height:1.3; font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.next-move-copy small { margin-top:3px; color:var(--tx-2); font-size:10px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.next-move-window {
  width:max-content;
  max-width:100%;
  min-height:28px;
  margin:1px 0 -5px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--tx-2);
  font-size:10px;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.next-move-window:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.next-move-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:70px;
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--accent-line);
  border-radius:6px;
  background:var(--accent-soft);
  color:var(--tx);
  font-size:11px;
  font-weight:620;
}
.next-move-action svg { width:16px; height:16px; color:var(--accent); }
.next-move-action:active { transform:scale(.97); }
.next-move-action:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.next-move.is-complete .next-move-mark { color:var(--accent-2); background:var(--mint-soft); }

[data-theme="light"] .hero-card,
[data-theme="light"] .arc-grid-panel { background:transparent; box-shadow:none; }
.arc-grid-panel { margin-top: 18px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.arc-grid-head { margin-bottom: 10px; }
.arc-grid-head b { font-size: 13px; font-weight: 600; }
.arc-grid-head > span { font-weight: 500; }
.arc-grid-panel .grid90 { grid-template-columns: repeat(15, minmax(0,1fr)); gap: 4px; }
.arc-grid-panel .cell { border-radius: 3px; background: #292d31; box-shadow: none; }
[data-theme="light"] .arc-grid-panel .cell { background: #e0e4e9; }
.arc-grid-panel .cell.l1 { background: color-mix(in srgb, var(--accent-2) 32%, var(--bg)); }
.arc-grid-panel .cell.l2 { background: color-mix(in srgb, var(--accent-2) 62%, var(--bg)); }
.arc-grid-panel .cell.l3 { background: var(--accent-2); box-shadow: none; }
.arc-grid-panel .cell.rest { background: transparent; border: 1px dashed var(--tx-3); }
.arc-grid-panel .cell.missed { position: relative; }
.arc-grid-panel .cell.missed::after { content:none; }
.arc-grid-panel .cell.f { background: transparent; border: 1px solid var(--line); opacity: 1; }
.arc-grid-panel .cell.now { outline: 2px solid var(--tx); outline-offset: 1px; }
.arc-grid-legend .missed-key { background:var(--line); }
.arc-grid-legend { justify-content: flex-start; gap: 9px; font-size: 9px; font-weight: 500; }
.arc-grid-legend i { width: 7px; height: 7px; border-radius: 2px; }

.today-habits-section { padding-top: 4px; scroll-margin-top:82px; }
.adaptive-heading h2,
.today-habits-section h2 { font-size: 18px; font-weight: 620; }
.adaptive-habit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; grid-auto-rows:minmax(58px,auto); }
.adaptive-habit-item { min-height:58px; border-radius:7px; background:var(--card); }
.adaptive-habit-item .adaptive-check {
  grid-template-columns:16px minmax(0,1fr);
  grid-template-rows:1fr;
  align-content:center;
  align-items:center;
  column-gap:8px;
  min-height:56px;
  padding:9px;
  border-radius:6px;
  transition:background-color 220ms ease-out, transform 120ms ease-out;
}
.adaptive-habit-item .adaptive-check:active { transform:scale(.98); }
.adaptive-habit-item:has(.adaptive-habit-tools) .adaptive-check { padding-bottom:7px; }
.adaptive-category { display:none; }
.adaptive-name {
  grid-area:1 / 2;
  align-self:center;
  display:block;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
}
.adaptive-purpose { grid-column:2; color:var(--accent-2); font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.adaptive-habit-item.just-completed .adaptive-purpose { animation:purpose-pulse var(--motion-slow) ease-out; }
@keyframes purpose-pulse { 50% { color:var(--tx); opacity:.55; } }
.hero-card.streak-milestone .ring-fill { animation:streak-ring-glow var(--motion-draw) ease-out both; }
@keyframes streak-ring-glow { 50% { filter:drop-shadow(0 0 7px var(--accent)); } }
.streak-milestone-copy { color:var(--accent); font-size:12px; font-weight:700; }
[data-motion="reduced"] .hero-card.streak-milestone .ring-fill { animation:none; }
@media (prefers-reduced-motion: reduce) { .hero-card.streak-milestone .ring-fill { animation:none; } }
.adaptive-target { grid-column:2; color:var(--tx-2); font-size:10px; line-height:1.2; }
.adaptive-state { grid-area:1 / 1; display:grid; place-items:center; width:16px; height:16px; border:1px solid var(--tx-3); border-radius:50%; font-size:12px; }
.adaptive-state svg { width:12px; height:12px; }
.adaptive-check[aria-pressed="true"] { background: var(--mint-soft); }
.adaptive-check[aria-pressed="true"] .adaptive-state { border-color:var(--accent-2); text-decoration:none; animation:none; }
.adaptive-check[data-act="task-sheet"] { background:color-mix(in srgb,var(--card) 82%,var(--bg)); }
.adaptive-check[data-act="task-sheet"] .adaptive-state { color:var(--tx-3); }
.adaptive-check[aria-pressed="true"] .adaptive-name,
.adaptive-check[aria-pressed="true"] .adaptive-state { color: var(--accent-2); text-decoration: none; }
.adaptive-habit-item.just-completed { animation:habit-confirm 220ms cubic-bezier(.2,.8,.2,1); }
.adaptive-habit-item.just-completed .adaptive-check { animation:habit-tint 220ms ease-out; }
.adaptive-habit-item.just-completed .adaptive-state path { animation:check-draw 220ms ease-out both; }
.arc-updated { animation:arc-update 460ms cubic-bezier(.22,1,.36,1); }
@keyframes check-draw {
  from { stroke-dasharray:28; stroke-dashoffset:28; }
  to { stroke-dasharray:28; stroke-dashoffset:0; }
}
@keyframes arc-update {
  from { stroke-dashoffset:var(--previous-arc-offset); }
  to { stroke-dashoffset:var(--next-arc-offset); }
}
@keyframes habit-tint { from { background:var(--card); } to { background:var(--mint-soft); } }
.adaptive-habit-tools { inset: auto 0 0; }
.adaptive-habit-tools .adaptive-window { font-size: 10px; }
.adaptive-habit-tools .adaptive-focus { width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; }

.today-history { padding-block:12px 0; margin-top:18px; border-block:1px solid var(--line); overflow-anchor:none; }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.history-heading h2 { margin:0; font-size:14px; font-weight:600; }
.history-heading button { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 4px 0 12px; background:transparent; border:0; color:var(--tx-2); font-size:12px; }
.history-chevron { display:block; transition:transform 240ms ease; }
.today-history[data-expanded="true"] .history-chevron { transform:rotate(180deg); }
.arc-grid-panel .history-recent { grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:0 0 14px; }
.arc-grid-panel .history-recent .cell { aspect-ratio:auto; min-height:44px; padding:4px 0; border-radius:5px; color:var(--tx); font:inherit; }
.history-recent .cell span { display:block; font-size:9px; line-height:13px; }
.history-recent .cell b { display:block; font-size:12px; font-weight:600; line-height:17px; }
.arc-grid-panel .history-recent .cell.l3 { color:var(--bg); }
.history-disclosure { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 260ms cubic-bezier(.22,1,.36,1), opacity 200ms ease; }
.today-history[data-expanded="true"] .history-disclosure { grid-template-rows:1fr; opacity:1; }
.history-disclosure-inner { min-height:0; overflow:hidden; }
.history-full-content { padding:4px 2px 14px; }
.history-caption { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:11px; color:var(--tx-2); }
.history-updated { animation:history-hit 300ms ease-out; }
.history-fulfilled { animation:history-fulfilled 440ms ease-out; }
@keyframes history-hit { 0% { box-shadow:inset 0 0 0 2px var(--accent); } 100% { box-shadow:inset 0 0 0 0 transparent; } }
@keyframes history-fulfilled { 0%, 100% { transform:scale(1); } 45% { transform:scale(1.08); box-shadow:0 0 0 3px var(--accent-soft); } }

.today-signals { margin-top: 16px; border-top:0; }
.today-signals > * { padding-block: 15px; }
.today-signals h2 { font-size: 14px; font-weight: 600; }
.today-signals .mood-choice-row { position:relative; isolation:isolate; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,44px); gap:3px; }
.today-mood > * { grid-column:var(--mood-column); grid-row:var(--mood-row); }
.today-signals .mood-choice-row button,
.today-signals .mood-choice-row button:last-child { min-height:44px; font-size:11px; padding:0 2px; border:0; background:transparent; }
.today-signals .mood-choice-row button:is(.on,[aria-pressed="true"]) { color:var(--accent); background:transparent; }
.mood-cursor { z-index:-1; min-width:0; border-radius:6px; background:var(--accent-soft); border:1px solid var(--accent); transform-origin:top left; pointer-events:none; }
.signal-confirm { animation:signal-confirm 280ms ease-out; }
.signal-count-tick { animation:signal-count-tick 260ms ease-out; }
.today-mood .signal-confirm { animation:none; }
.today-signals .water-stepper { grid-template-columns:44px minmax(0,1fr) 44px; gap:0; align-items:center; min-height:60px; }
.today-signals .water-stepper button { width:44px; height:44px; min-height:44px; border:0; border-radius:6px; font-size:18px; background:transparent; }
.water-reading { min-width:0; text-align:center; }
.water-stepper strong { position:relative; display:block; height:24px; overflow:hidden; font-size:20px; line-height:24px; font-variant-numeric:tabular-nums; }
.water-count-current { display:block; }
.water-count-previous { position:absolute; inset:0; pointer-events:none; }
.water-reading small { display:block; font-size:10px; color:var(--tx-2); white-space:nowrap; margin-top:3px; }
.water-progress { height:3px; margin:15px 8px 0; background:var(--line); overflow:hidden; border-radius:2px; }
.water-progress > span { display:block; height:100%; background:var(--accent); transform:scaleX(var(--water-progress)); transform-origin:left; }
@keyframes signal-confirm {
  0% { transform:scale(.94); }
  65% { transform:scale(1.025); }
  100% { transform:scale(1); }
}
@keyframes signal-count-tick {
  from { opacity:.35; transform:translateY(var(--signal-travel,6px)); }
  to { opacity:1; transform:translateY(0); }
}
.reflection-share,
.reflection-share:hover {
  border-color:var(--line);
  background:var(--card-2);
  color:var(--tx-2);
}
.support-signal { opacity: .9; }
.adaptive-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:18px; border-block:1px solid var(--line); }
.adaptive-support-grid .support-signal { padding:14px 10px 14px 0; }
.adaptive-support-grid .support-signal + .support-signal { padding-left:10px; padding-right:0; border-left:1px solid var(--line); }
.adaptive-support-grid .support-signal h2 { margin:0 0 10px; font-size:13px; font-weight:600; }
.adaptive-modes button { display:grid; place-items:center; gap:1px; }
.adaptive-modes button small { color:var(--accent); font-size:10px; font-weight:700; text-transform:uppercase; }
.adaptive-recommendation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.adaptive-recommendation p { flex:1; margin:0; color:var(--tx-2); font-size:12px; line-height:1.4; }
.adaptive-recommendation .mini-act { flex:0 0 auto; min-height:44px; padding:6px 9px; color:var(--accent); white-space:nowrap; }

.tabbar-dock { max-width: 760px; }
.tabbar { border-radius: 0; background: color-mix(in srgb,var(--bg) 94%,transparent); border: 0; border-top: 1px solid var(--line); box-shadow: none; }
.tab-btn { border-radius: 6px; color: var(--tx-2); }
.tab-btn.active { color: var(--accent); background: transparent; box-shadow: none; }
.tab-btn.active::before,
.tab-btn.active::after { display: none; }
.dropup { border-radius: 8px; border-color: var(--line); background: var(--card); box-shadow: 0 14px 36px rgba(0,0,0,.24); }

/* One shell grid for content, corner controls, and the fixed navigation. */
:root {
  --shell-left: max(20px, env(safe-area-inset-left, 0px));
  --shell-right: max(20px, env(safe-area-inset-right, 0px));
}
.screen {
  padding-left: var(--shell-left);
  padding-right: var(--shell-right);
}
.brandbar {
  margin-left: calc(-1 * var(--shell-left));
  margin-right: calc(-1 * var(--shell-right));
  padding-left: var(--shell-left);
  padding-right: var(--shell-right);
}
.brandbar.stuck { background:color-mix(in srgb,var(--bg) 96%,transparent); }
.tabbar-dock {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px var(--shell-right) calc(7px + env(safe-area-inset-bottom, 0px)) var(--shell-left);
  transform: none;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}
.tabbar {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding: 0 4px;
  border-top: 0;
  background: transparent;
}
.tab-cursor { position:absolute; top:0; width:24px; height:2px; border-radius:2px; background:var(--accent); pointer-events:none; }
.sheet, .sheet-bg { animation:none; }
.sheet { transition:transform 180ms ease-out, opacity 180ms ease-out; }
.sheet[data-closing="true"] { pointer-events:none; }
@media (prefers-reduced-motion: no-preference) {
  .dropup-group { animation:lab-reveal 240ms ease-out backwards; }
  .dropup-group + .dropup-group { animation-delay:55ms; }
  .arc-fulfilled .hero-ring::after {
    content:''; position:absolute; inset:2px; border:2px solid var(--accent-2); border-radius:50%; pointer-events:none;
    animation:arc-halo 1000ms ease-out both;
  }
  .arc-fulfilled .ring-center { animation:arc-arrival 600ms cubic-bezier(.22,1,.36,1) 100ms; }
  .arc-fulfilled .next-move { animation:arc-complete-wash 1000ms ease-out; }
}
@keyframes lab-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes arc-halo { from { opacity:.65; transform:scale(1); } to { opacity:0; transform:scale(1.45); } }
@keyframes arc-arrival { 0%,100% { transform:scale(1); } 45% { transform:scale(1.08); } }
@keyframes arc-complete-wash { from { background:var(--mint-soft); } to { background:transparent; } }
[data-theme="light"] .tabbar,
[data-theme="dark"] .tabbar,
[data-theme="mono"] .tabbar { background:transparent; box-shadow:none; }
.tabbar-dock { background:var(--bg); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.dropup {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}
.topbar { position: relative; }
.profile-updates { border-block:1px solid var(--line); }
.profile-updates > summary { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:12px 0; list-style:none; font-size:14px; font-weight:600; cursor:pointer; }
.profile-updates > summary::-webkit-details-marker { display:none; }
.profile-updates > summary::after { content:'+'; font-size:20px; color:var(--tx-2); }
.profile-updates[open] > summary::after { content:'-'; }
.profile-updates > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.profile-updates .subscribe-card { padding:4px 0 16px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.profile-updates .subscribe-card .eyebrow,.profile-updates .sub-title { display:none; }
.profile-updates .sub-consent a { color:var(--accent); }
.topbar > .top-mini {
  position: absolute;
  top: 0;
  right: 0;
  align-self: auto;
  margin: 0;
  min-height: 36px;
  padding: 7px 10px;
}
.topbar:has(> .top-mini) > div { padding-right: 68px; }
.side-toggle {
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: var(--shell-left);
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.side-drawer {
  left: var(--shell-left);
  width: min(282px, calc(100vw - var(--shell-left) - var(--shell-right)));
}

#app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
#app select,
#app textarea { border-color:var(--field-line); border-radius:6px; }
.btn { min-height:46px; padding:11px 15px; border-radius:6px; background:var(--accent-2); color:var(--button-text); font-size:14px; font-weight:620; box-shadow:none; }
.btn-ghost { background:transparent; color:var(--tx); border-color:var(--line); }
.mini-act { border-radius:5px; background:transparent; }
.section-title { margin-top:24px; font-size:15px; font-weight:620; }
.count-bub { font-weight:520; }
.tip-tag,
.reminder-state,
.pro-badge { border-radius:4px; box-shadow:none; }

/* Shared secondary-page opener */
.card.tab-hero { padding:16px 0; border-width:1px 0; border-radius:0; background:transparent; }
.th-title { font-size:20px; font-weight:620; }
.th-stats { gap:0; }
.th-stats > div { padding:8px 11px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; }
.th-stats > div:first-child { padding-left:0; border-left:0; }
.th-stats span { font-weight:560; }
.th-stats b { font-weight:550; }

/* Habits */
.mine-grid { gap:6px; }
.mine-grid .mine-row { min-height:58px; padding:8px 9px; border-radius:7px; background:var(--card); }
.mine-grid .mine-row .lib-emoji { border:0; border-radius:4px; background:transparent; }
.mine-row .lib-name { font-weight:600; }
.mine-grid .remove-btn { padding:5px 7px; border:0; border-radius:4px; background:transparent; }
.mine-grid .rhythm-btn { border:1px solid var(--line); color:var(--tx-2); }
.dot7 i { border-radius:2px; }
.library-card { border-radius:8px; background:var(--card); }
.library-toggle i { width:28px; height:28px; border-radius:5px; background:transparent; color:var(--tx-2); border-color:var(--line); }
.templates-card.minimal { padding:0; border:0; background:transparent; }
.template-grid.minimal .template-tile { min-height:48px; padding:10px; border-radius:6px; background:var(--card); }
.template-grid.minimal .template-tile b { font-weight:600; }

/* Focus */
.daily-practice { margin-top:28px; padding-block:24px; border-top:1px solid var(--line); }
.practice-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.practice-heading h2 { font-size:18px; margin:0; }
.practice-heading input { width:145px; min-width:0; max-width:48%; min-height:44px; padding:7px; font-size:13px; box-sizing:border-box; }
.practice-heading input { color-scheme:dark; }
[data-theme="light"] .practice-heading input { color-scheme:light; }
.practice-win-label { display:block; font-size:14px; font-weight:600; margin-bottom:10px; }
.daily-practice textarea { display:block; box-sizing:border-box; width:100%; min-width:0; resize:vertical; padding:12px; border:1px solid var(--field-line); border-radius:8px; background:var(--card); color:var(--tx); font:inherit; font-size:16px; line-height:1.6; }
.practice-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:22px 0; padding:4px; border:1px solid var(--line); border-radius:8px; }
.practice-tabs button { min-width:0; min-height:44px; padding:8px 4px; background:transparent; color:var(--tx-2); border:1px solid transparent; border-radius:5px; font-size:13px; }
.practice-tabs button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.practice-body { min-height:260px; }
.daily-practice .practice-body { margin-top:22px; }
.meditation-panel { margin-top:22px; padding:16px 0; border-top:1px solid var(--line); }
.meditation-panel h2 { margin:0; font-size:16px; font-weight:600; }
.meditation-panel p { margin:5px 0 12px; color:var(--tx-2); font-size:12px; }
.meditation-panel .practice-minutes { max-width:none; margin:0; }
.practice-prompt { display:block; font-size:18px; font-weight:550; line-height:1.45; overflow-wrap:anywhere; }
.practice-hint,.practice-save { color:var(--tx-2); font-size:12px; line-height:1.6; }
.practice-hint { margin:8px 0 14px; }
.practice-save { margin:12px 0 0; }
.practice-meditation { text-align:center; padding:22px 0; }
.practice-meditation-icon { display:inline-flex; color:var(--accent); }
.practice-meditation-icon svg { width:40px; height:40px; }
.practice-meditation h3 { font-size:18px; margin:14px 0 6px; }
.practice-meditation p { color:var(--tx-2); font-size:13px; line-height:1.6; }
.practice-minutes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:300px; margin:22px auto 0; }
.practice-minutes .btn { padding:12px 4px; min-height:44px; }
.focus-page { max-width:560px; margin-inline:auto; }
.focus-header { align-items:center; margin-bottom:0; }
.focus-header h1 { font-size:30px; }
.focus-header .sub { font-size:12px; }
.focus-today-total { padding-left:14px; border-left:1px solid var(--line); text-align:right; flex:none; }
.focus-today-total span { display:block; font-size:10px; color:var(--tx-3); }
.focus-today-total strong { display:block; margin-top:3px; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.focus-stage {
  padding:16px 0 0; border:0; border-radius:0; background:transparent;
  text-align:center;
}
.focus-section-head,
.focus-detail-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.focus-intention > span { color:var(--tx-3); font-size:11px; }
.focus-intention h2 { margin:5px auto 0; max-width:360px; color:var(--tx); font-size:19px; font-weight:550; line-height:1.3; overflow-wrap:anywhere; text-wrap:balance; }
.focus-duration-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;
  max-width:276px; margin:0 auto 16px; padding:4px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
}
.focus-duration {
  min-width:0; min-height:38px; padding:7px 8px; border:1px solid transparent;
  border-radius:5px; background:transparent; color:var(--tx-2); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; transition:background .18s ease,color .18s ease,transform .18s ease;
}
.focus-duration[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
.focus-duration span { font-size:11px; font-weight:450; }
.focus-duration:active { transform:scale(.98); }
.focus-stage .focus-begin {
  display:flex; align-items:center; justify-content:center; gap:14px; width:100%; max-width:320px;
  min-height:52px; margin:0 auto; padding:14px 18px; border-radius:8px; border:0;
  color:var(--on-accent); background:var(--accent); box-shadow:none; font-size:15px; font-weight:650;
  transition:transform .18s ease,filter .18s ease;
}
.focus-begin > span { font-size:21px; line-height:1; }
.focus-stage .focus-begin:active { transform:scale(.985); }
.focus-adjust {
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:42px;
  margin:2px auto 0; padding:8px; border:0; background:transparent; color:var(--tx-3);
  font-size:12px; font-weight:500;
}
.focus-adjust span { font-size:17px; }
.focus-session-ring {
  position:relative; display:grid; place-items:center; width:220px; max-width:100%; aspect-ratio:1;
  margin:14px auto; border-radius:50%; background:transparent; isolation:isolate;
}
.focus-session-ring::before,
.focus-session-ring::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.focus-session-ring::before {
  inset:0; background:repeating-conic-gradient(var(--line-2) 0deg 1deg,transparent 1deg 6deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 0);
}
.focus-session-ring::after {
  inset:18px; background:conic-gradient(var(--accent) var(--focus-angle),var(--line) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
}
.focus-dial-face { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; }
.focus-dial-icon { display:block; height:19px; width:19px; color:var(--accent); margin-bottom:12px; }
.focus-dial-icon svg { width:100%; height:100%; }
.focus-session-ring strong {
  color:var(--tx); font-size:52px; line-height:1; font-weight:400; font-variant-numeric:tabular-nums;
}
.focus-session-ring small { margin-top:10px; color:var(--tx-3); font-size:11px; }
.focus-session-ring .focus-dial-done { font-size:26px; }
.focus-session-state,
.focus-complete-note { margin:0 0 18px; color:var(--tx-2); font-size:11px; }
.focus-session-state { display:flex; align-items:center; justify-content:center; gap:6px; }
.focus-session-state i { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.focus-session-actions { margin-top:0; }
.focus-week-section { margin-top:12px; padding:18px 0 16px; border-top:1px solid var(--line); }
.focus-section-head h2 { margin:0; font-size:14px; font-weight:600; line-height:1.3; }
.focus-week-caption { display:block; margin-top:4px; color:var(--tx-3); font-size:10px; }
.focus-week-total { text-align:right; }
.focus-week-total strong { display:block; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.focus-week-total > span { display:block; margin-top:2px; color:var(--tx-3); font-size:10px; }
.focus-week-bars {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px;
  height:90px; margin-top:14px;
}
.focus-week-day { display:grid; grid-template-rows:13px minmax(0,1fr) 14px; gap:7px; height:100%; min-width:0; text-align:center; }
.focus-week-day b { color:var(--tx-3); font-size:9px; font-weight:500; line-height:13px; }
.focus-week-track { display:flex; align-items:end; height:100%; width:100%; max-width:28px; margin:0 auto; border-radius:4px; background:var(--card-2); overflow:hidden; }
.focus-week-day i {
  display:block; width:100%; height:var(--focus-bar); border-radius:4px;
  background:var(--accent-3); transition:height .45s var(--spring),background .2s ease;
}
.focus-week-day.today i { background:var(--accent); }
.focus-week-day small { color:var(--tx-3); font-size:10px; font-weight:450; }
.focus-week-day.today small { color:var(--accent); font-weight:650; }
.focus-protection-section { padding:0 0 6px; border-top:1px solid var(--line); }
.focus-protection-toggle {
  display:grid; grid-template-columns:38px minmax(0,1fr) auto 14px; align-items:center; gap:11px;
  width:100%; min-height:64px; padding:10px 0; border:0; background:transparent; color:var(--tx); text-align:left;
}
.focus-protection-icon {
  display:grid; place-items:center; width:38px; height:38px; border:0;
  border-radius:6px; background:var(--accent-soft); color:var(--accent);
}
.focus-protection-icon svg { width:19px; height:19px; }
.focus-protection-toggle small { display:block; margin-top:3px; color:var(--tx-3); font-size:10px; font-weight:450; }
.focus-protection-toggle strong { display:block; font-size:13px; font-weight:600; }
.focus-protection-toggle em { color:var(--tx-3); font-size:11px; font-style:normal; font-weight:600; white-space:nowrap; }
.focus-protection-toggle > i { color:var(--tx-3); font-size:19px; font-style:normal; transform:rotate(90deg); transition:transform .2s ease; }
.focus-protection-toggle[aria-expanded="false"] > i { transform:rotate(0); }
.focus-protection-details { padding:4px 0 2px; animation:focus-reveal .22s ease both; }
@keyframes focus-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.focus-native-status {
  display:grid; grid-template-columns:8px minmax(0,1fr); gap:10px; align-items:start;
  padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--card);
}
.focus-native-status > i { width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--tx-3); }
.focus-native-status.ready > i { background:var(--accent); }
.focus-native-status b { display:block; font-size:12.5px; font-weight:620; }
.focus-native-status span { display:block; margin-top:3px; color:var(--tx-2); font-size:11.5px; line-height:1.4; }
.focus-detail-head { margin:18px 0 9px; align-items:center; }
.focus-detail-head > span { font-size:12px; font-weight:620; }
.focus-empty-hint { margin:0 0 10px; color:var(--tx-2); font-size:11.5px; line-height:1.4; }
.focus-target-grid { gap:6px; margin-bottom:10px; }
.focus-target-chip { border-radius:6px; background:var(--card); }
.focus-chip-row { margin-bottom:5px; }
.focus-add-compact input,
.focus-add-compact .btn { border-radius:6px; }
.focus-allday-control {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.focus-allday-control b { display:block; font-size:13px; font-weight:620; }
.focus-allday-control span { display:block; margin-top:3px; color:var(--tx-3); font-size:11px; line-height:1.35; }
.focus-allday-control .allday-switch:disabled { cursor:not-allowed; opacity:.45; }

@media (hover:hover) {
  .focus-duration:hover { border-color:var(--accent-line); background:color-mix(in srgb,var(--accent) 8%,var(--card-2)); }
  .focus-adjust:hover,
  .focus-protection-toggle:hover { color:var(--accent-2); }
}
@media (max-width:370px) {
  .focus-session-ring { width:210px; margin-block:14px; }
  .focus-session-ring strong { font-size:46px; }
  .focus-session-ring .focus-dial-done { font-size:24px; }
  .focus-header h1 { font-size:28px; }
  .focus-week-bars { gap:8px; }
  .focus-protection-toggle { gap:8px; }
  .focus-protection-toggle em { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .focus-duration,
  .focus-week-day i,
  .focus-protection-toggle > i { transition:none; }
  .focus-protection-details { animation:none; }
}

/* AI Guidance */
.coach-overview-card { padding:17px 0; border-width:1px 0; border-radius:0; background:transparent; }
.coach-ov-grade { font-size:22px; font-weight:620; }
.coach-ov-streak { padding:4px 0 4px 14px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; }
.coach-ov-streak b { font-weight:550; }
.coach-roadmap-title { color:var(--tx-2); }
.coach-prompts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.coach-prompt-chip { min-height:48px; padding:9px 10px; border-radius:6px; background:var(--card); text-align:left; }
.ai-card { border-color:var(--line); }
.compact-ai-card .seg,
.provider-mini-row button,
.compact-connect,
.chat-input input,
.chat-send { border-radius:6px; }
.msg { border-radius:7px; }
.msg.ai { border-bottom-left-radius:2px; }
.msg.me { border-bottom-right-radius:2px; background:var(--accent); color:#1c1f22; }
.weekly-ai-card,
.guidance-signal-card { border-color:var(--line); }
.weekly-focus { border-radius:6px; background:var(--card-2); }
.qa-chip { padding:12px 0; border-width:0 0 1px; border-radius:0; background:transparent; }
.qa-answer { margin:0 0 8px; padding:12px; border-radius:0 0 6px 6px; background:var(--card); }

/* Sleep and health */
.bento { gap:8px; }
.mini-stat { padding:13px 12px; }
.sleep-score-card,
.health-sync-card,
.winddown-card,
.sleep-opt-card,
.sleep-wakemood-card,
.sleep-alarm-card,
.sleep-sounds-card,
.sleep-med-card,
.sleep-debt-card,
.sleep-card { background:var(--card); border-color:var(--line); }
.sleep-card .tip-tag { color:var(--tx-2); }
.sleep-score-card .ring-fill { stroke:var(--accent-2); filter:none; }
.vitality-state .dot { box-shadow:none; }
.ss-chip,
.bsv2-slot,
.sound-chip,
.med-item,
.shn-chip { border-radius:6px; background:var(--card-2); box-shadow:none; }
.shb-time { color:var(--tx); text-shadow:none; font-weight:550; }
.bsv2-best,
.sound-active { box-shadow:none; background:var(--accent-soft); }
.alarm-set-btn,
.sounds-stop,
.stm-chip { border-radius:5px; box-shadow:none; }
.stm-chip.on { color:var(--tx); background:var(--accent-soft); border-color:var(--accent-line); }
.med-name { font-weight:620; }
.vital-grid { gap:8px; }
.vital-card { border-radius:7px; background:var(--card); }
.vital-value { font-weight:550; }
.vital-spark .cv-spark-bar { background:var(--accent-2); }
.vital-log input,
.vital-log .btn { border-radius:5px; }

/* Profile */
.reminder-card { background:var(--card); }
.reminder-state { padding:4px 7px; background:transparent; }
.reminder-modes { gap:4px; }
.rem-mode { min-height:60px; padding:8px 4px; border-radius:6px; background:transparent; box-shadow:none; }
.rem-mode.on { color:var(--tx); border-color:var(--accent-line); background:var(--accent-soft); box-shadow:none; }
.rem-mode.on b,
.rem-mode.on small { color:inherit; }
.rem-time-row { border-radius:6px; background:var(--card-2); }
.theme-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.theme-swatch { min-height:74px; padding:8px; border:1px solid var(--line); border-radius:6px; align-items:flex-start; }
.ts-chip { width:100%; max-width:none; height:34px; aspect-ratio:auto; border-radius:4px; background:var(--sw-bg); }
.ts-ring { width:12px; height:12px; border-radius:50%; background:var(--sw-ac); box-shadow:none; }
.theme-swatch.on { border-color:var(--accent); background:var(--accent-soft); }
.theme-swatch.on .ts-chip { border-color:var(--line-2); box-shadow:none; }
.prow { margin:0; padding:13px 0; border-width:0 0 1px; border-radius:0; background:transparent; }
.subscribe-card { padding:17px 0; border-width:1px 0; border-radius:0; background:transparent; }
.sub-input { border-radius:6px; background:var(--card); }
.sub-consent input { width:20px; height:20px; flex-basis:20px; }
.preview-access-row { border-radius:6px; box-shadow:none; }

.protocol-today-card { background:var(--card); border-color:var(--line); }
.protocol-score { min-width:68px; padding:8px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.protocol-score b { color:var(--tx); font-size:23px; font-weight:550; }
.protocol-empty-stack.compact { padding:10px 0 0; border:0; border-radius:0; background:transparent; }
.protocol-empty-stack.compact .pes-hint { max-width:34em; }
.protocol-empty-stack.compact .protocol-starter-grid { gap:6px; }
.protocol-empty-stack.compact .protocol-starter-grid button {
  min-height:66px; padding:8px 5px; border-radius:6px; background:var(--card-2); box-shadow:none;
}
.protocol-empty-stack.compact .protocol-starter-grid button b { font-weight:600; }
.protocol-actions .mini-act { border-radius:5px; background:transparent; }
.protocol-template-card { background:var(--card); border-color:var(--line); }

.approved-range { display:flex; width:max-content; max-width:100%; gap:3px; margin:0 0 18px; padding:3px; border-radius:6px; background:var(--card); }
.approved-range button { min-height:38px; padding:6px 16px; border:0; border-radius:4px; background:transparent; color:var(--tx-2); font-size:12px; }
.approved-range button[aria-pressed="true"] { background:var(--card-2); color:var(--tx); }
.approved-progress-layout { display:grid; gap:0; }
.approved-section { padding:20px 0 24px; border-top:1px solid var(--line); }
.approved-progress-layout > div:first-child > .approved-section:first-child { border-top:0; padding-top:0; }
.approved-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
.approved-section-head h2 { margin:0; font-size:17px; font-weight:620; }
.approved-section-head > span { color:var(--tx-2); font-size:11px; }
.approved-statline { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; }
.approved-statline > div > strong,
.approved-mood-stat strong { display:block; font-size:36px; line-height:1.1; font-weight:520; font-variant-numeric:tabular-nums; }
.approved-statline strong small,
.approved-mood-stat small { font-size:14px; color:var(--tx-2); }
.approved-statline > div > span,
.approved-statline > span,
.approved-mood-stat > span { color:var(--tx-2); font-size:11px; }
.approved-chart { display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px; margin-top:22px; }
.approved-axis { height:154px; display:flex; flex-direction:column; justify-content:space-between; padding-bottom:1px; color:var(--tx-3); font-size:10px; }
.approved-bars { position:relative; display:grid; grid-template-columns:repeat(var(--count),minmax(0,1fr)); gap:5px; }
.approved-bars::before { content:""; position:absolute; z-index:0; top:76px; left:0; right:0; border-top:1px dashed var(--line); }
.approved-bars button { position:relative; z-index:1; min-width:0; min-height:188px; padding:0; border:0; background:transparent; color:var(--tx-2); }
.approved-bar-slot { display:flex; align-items:flex-end; justify-content:center; height:154px; border-bottom:1px solid var(--line); }
.approved-bar { display:block; width:62%; min-height:1px; border-radius:3px 3px 0 0; background:var(--accent-2); opacity:.62; transition:opacity 160ms ease; }
.approved-bars button[aria-pressed="true"] .approved-bar { opacity:1; }
.approved-bars button small { display:block; min-height:34px; padding-top:7px; font-size:9px; line-height:1.25; overflow-wrap:anywhere; }
.approved-bars button[aria-pressed="true"] small { color:var(--tx); }
.approved-no-data { align-self:flex-end; margin-bottom:8px; color:var(--tx-3); font-style:normal; }
.approved-readout { min-height:20px; margin:6px 0 0 37px; color:var(--tx-2); font-size:11px; line-height:1.45; }
.approved-readout b { color:var(--tx); font-weight:550; }
.approved-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.approved-summary b { display:block; font-size:19px; font-weight:520; font-variant-numeric:tabular-nums; }
.approved-summary span { color:var(--tx-2); font-size:10px; }
.approved-categories { display:grid; gap:14px; }
.approved-categories p { display:flex; justify-content:space-between; gap:12px; margin:0 0 7px; font-size:12px; }
.approved-categories p span:last-child { color:var(--tx-2); }
.approved-categories > div > div { height:5px; border-radius:2px; background:var(--line); overflow:hidden; }
.approved-categories i { display:block; height:100%; background:var(--accent-2); border-radius:2px; }
.approved-mood-stat { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.approved-mood-chart svg { display:block; width:100%; height:auto; }
.approved-mood-chart line { stroke:var(--line); stroke-dasharray:3 4; }
.approved-mood-chart text { fill:var(--tx-3); font-size:10px; }
.approved-mood-chart path { fill:none; stroke:var(--accent); stroke-width:2; }
.approved-mood-chart circle { fill:var(--bg); stroke:var(--accent); stroke-width:2; }
@media (prefers-reduced-motion: no-preference) {
  .screen.anim .approved-bar,
  .chart-refresh .approved-bar {
    transform-origin:center bottom;
    animation:chart-rise 540ms cubic-bezier(.22,1,.36,1) backwards;
    animation-delay:calc(var(--motion-order,0) * 45ms);
  }
  .screen.anim .approved-categories i {
    transform-origin:left center;
    animation:chart-spread 650ms cubic-bezier(.22,1,.36,1) 120ms backwards;
  }
  .screen.anim .approved-mood-chart path { animation:mood-draw 750ms ease-out 140ms backwards; }
  .screen.anim .approved-mood-chart circle { animation:chart-point 300ms ease-out 550ms backwards; }
}
@keyframes chart-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes chart-spread { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mood-draw {
  from { stroke-dasharray:1; stroke-dashoffset:1; }
  to { stroke-dasharray:1; stroke-dashoffset:0; }
}
@keyframes chart-point { from { opacity:0; } to { opacity:1; } }
.approved-mood-dates { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding-left:27px; }
.approved-mood-dates button { min-width:0; min-height:38px; padding:4px 0; border:0; background:transparent; color:var(--tx-3); font-size:9px; }
.approved-mood-dates button[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); }
.approved-next-focus p { margin:0; font-size:18px; line-height:1.5; }
.approved-next-focus > span { display:block; margin-top:8px; color:var(--tx-2); font-size:12px; line-height:1.5; }

.screen.anim { animation-duration: 180ms; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@keyframes habit-confirm {
  0% { transform:scale(.98); border-color:var(--accent-2); }
  100% { transform:none; border-color:var(--line); }
}
@media (max-width: 350px) {
  :root { --shell-left:16px; --shell-right:16px; }
  .screen { padding-inline: 16px; }
  .hero { grid-template-columns: 108px minmax(0,1fr); gap: 14px; }
  .ring-wrap { width: 108px; height: 108px; }
  .arc-grid-panel .grid90 { gap: 3px; }
  .adaptive-habit-grid { gap:4px; }
  .adaptive-habit-item .adaptive-check { padding-inline:7px; column-gap:6px; }
  .today-signals { grid-template-columns:1fr; }
  .today-signals > section { padding:12px 0; border-left:0; }
  .today-signals > section + section { border-top:1px solid var(--line); }
  .today-signals > section:first-child { display:grid; grid-template-columns:50px minmax(0,1fr); column-gap:8px; align-items:center; }
  .today-signals > section:first-child h2 { margin:0; }
  .today-signals .water-stepper { min-height:44px; }
  .today-signals .water-progress { grid-column:2; margin-top:8px; }
  .today-signals .mood-choice-row { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:44px; }
  .today-mood > * { grid-column:var(--mood-position); grid-row:1; }
  .next-move { grid-template-columns:28px minmax(0,1fr) 44px; gap:8px; }
  .next-move-mark { width:28px; height:28px; }
  .next-move-action { min-width:44px; width:44px; padding:8px; }
  .next-move-action span { display:none; }
}
@media (min-width: 700px) {
  #app:has(.today-header) { max-width: 760px; }
  .adaptive-habit-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .approved-progress-layout { grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:34px; }
  .approved-progress-side { padding-left:28px; border-left:1px solid var(--line); }
  .approved-progress-side > .approved-section:first-child { border-top:0; padding-top:0; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .history-disclosure, .history-chevron, .adaptive-habit-item .adaptive-check { transition:none; }
  .screen.anim,
  .adaptive-check[aria-pressed="true"] .adaptive-state,
  .adaptive-habit-item.just-completed .adaptive-state path,
  .arc-updated,
  .signal-confirm,
  .signal-count-tick,
  .history-updated,
  .history-fulfilled,
  .adaptive-habit-item.just-completed,
  .adaptive-habit-item.just-completed .adaptive-purpose,
  .adaptive-habit-item.just-completed .adaptive-check { animation: none !important; }
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}