/* Hamgam Salmand: design tokens + components. Components use tokens only (design.md §2). */
:root, [data-theme="light"] {
  --bg: #F7F9F9; --surface: #FFFFFF; --surface-alt: #EEF3F3; --surface-hover: #E6EEEE;
  --surface-raised: #FFFFFF; --card-edge: #DCE3E3;
  --text: #2B2D42; --text-muted: #555A6E; --border: #DCE3E3; --border-strong: #7E8A8C;
  --primary: #005C53; --primary-hover: #00463F; --primary-soft: #E3EFEE;
  --accent-fill: #005C53; --accent-fill-hover: #00463F; --on-accent: #FFFFFF;
  --sos: #F4A261; --sos-press: #D9893F; --sos-edge: #A3561B; --on-sos: #2B2D42;
  --warning: #8F4500; --warning-soft: #FDF1E6; --warning-line: #F4A261; --on-warning: #FFFFFF;
  --success: #3F4D1C; --success-soft: #EEF1E3; --success-line: #8A9A5B;
  --info: #005C53; --info-soft: #E3EFEE;
  --danger: #B42332; --danger-soft: #FCECEE; --on-danger: #FFFFFF;
  --track: #ECEFF1;
  --topbar-bg: #005C53; --topbar-text: #FFFFFF;
  --tabbar-bg: rgb(255 255 255 / 94%);
  --backdrop: rgb(43 45 66 / 45%);
  --shadow-sm: 0 0 .5px rgb(16 24 40 / .14), 0 1px 1px rgb(16 24 40 / .10);
  --shadow-md: 0 0 .5px rgb(16 24 40 / .14), 0 2px 6px rgb(16 24 40 / .08), 0 8px 18px rgb(16 24 40 / .06);
  --shadow-lg: 0 0 .5px rgb(16 24 40 / .2), 0 10px 30px rgb(16 24 40 / .18);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0F1716; --surface: #16201F; --surface-alt: #1C2827; --surface-hover: #24302F;
  --surface-raised: #1C2827; --card-edge: rgb(255 255 255 / 6%);
  --text: #E8EEED; --text-muted: #A9B6B4; --border: #2A3736; --border-strong: #5E716F;
  --primary: #6CCFC2; --primary-hover: #8EDCD1; --primary-soft: #243C39;
  --accent-fill: #6CCFC2; --accent-fill-hover: #8EDCD1; --on-accent: #0B1514;
  --sos: #F4A261; --sos-press: #C9813F; --sos-edge: #F4A261; --on-sos: #1B1C2A;
  --warning: #F6B27A; --warning-soft: #3A352A; --warning-line: #B97843; --on-warning: #1B1C2A;
  --success: #C3D48E; --success-soft: #2B362A; --success-line: #7C8B52;
  --info: #6CCFC2; --info-soft: #243C39;
  --danger: #FFABB2; --danger-soft: #3D252A; --on-danger: #291317;
  --track: #24302F;
  --topbar-bg: #12302C; --topbar-text: #E8EEED;
  --tabbar-bg: rgb(22 32 31 / 94%);
  --backdrop: rgb(0 0 0 / 55%);
  --shadow-sm: none; --shadow-md: none;
  color-scheme: dark;
}
:root {
  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --gutter: 16px; --topbar-h: 64px; --tabbar-safe-bottom: env(safe-area-inset-bottom, 0px); --tabbar-h: calc(76px + var(--tabbar-safe-bottom)); --tabbar-lift: 0px;
  --motion: 150ms; --expand: 300ms cubic-bezier(.25,.46,.45,.94);
  --font: "Vazirmatn", Tahoma, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
html[data-text-size="large"] { font-size: 20px; }
html[data-text-size="xlarge"] { font-size: 22px; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  line-height: 1.6; font-variant-numeric: tabular-nums; letter-spacing: 0;
  min-height: 100vh; overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.3rem; font-weight: 600; line-height: 1.4; }
h2 { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
h3 { font-size: .95rem; font-weight: 600; }
a { color: var(--primary); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.muted { color: var(--text-muted); }
.small { font-size: .8rem; }
.meta { font-size: .8rem; color: var(--text-muted); }
.ltr, .code { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.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; }
.grid > *, .row-flex > * { min-width: 0; }
.stack { display: grid; gap: 12px; }
.row-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.bi { line-height: 1; vertical-align: -0.125em; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h);
  background: var(--topbar-bg); color: var(--topbar-text);
  display: flex; align-items: center; gap: 10px; padding: 8px var(--gutter);
}
.topbar .inner { max-width: 1040px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; min-width: 0; color: inherit; background: none; border: 0; padding: 0; text-align: start; }
.brand .mark { font-size: 1.1rem; }
.brand .elder { font-weight: 500; font-size: .8rem; opacity: .9; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title {
  font-weight: 600; font-size: 1.05rem; line-height: 1.4; min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.tb-btn {
  position: relative; min-height: 48px; min-width: 48px; padding: 0 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 12px; color: inherit; font-weight: 600; font-size: .85rem;
}
.tb-btn .bi { font-size: 1.25rem; }
.tb-btn.avatar { border-radius: 50%; width: 48px; padding: 0; font-size: .85rem; }
.tb-btn .dot {
  position: absolute; top: 2px; inset-inline-end: 2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--sos); color: var(--on-sos); font-size: .7rem; font-weight: 600; line-height: 20px; text-align: center;
}
.tb-btn.listening { background: var(--sos); color: var(--on-sos); }
.offline-banner {
  background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--warning-line);
  padding: 8px var(--gutter); font-size: .85rem; display: flex; gap: 8px; align-items: center; justify-content: center;
}
/* Voice commands are a root-screen tool; on sub-pages the bar shows Back + context only. */
.topbar.is-sub #tb-voice { display: none; }
#tb-title { transition: opacity var(--motion); }
.topbar.is-sub.heading-visible #tb-title { opacity: 0; }
/* Path back to Home on sub-pages: each level is a ≥ 44 px target; the current page is plain text. */
.crumbs { max-width: 1040px; margin: 0 auto; padding: 6px var(--gutter) 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumb {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600; color: var(--primary); text-decoration: none; background: none; border: 0;
}
a.crumb, button.crumb { background: var(--primary-soft); }
a.crumb:hover, button.crumb:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.crumb .bi { font-size: 1rem; }
.crumb.current { color: var(--text); padding-inline: 8px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 44px; }
.crumb-sep { color: var(--text-muted); font-size: .8rem; padding: 0 4px; display: inline-flex; }
.view {
  max-width: 1040px; margin: 0 auto; padding: 4px var(--gutter) calc(var(--tabbar-h) + 40px);
  outline: none;
}
.view.no-tabs { padding-bottom: 40px; }
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 25;
  background: var(--surface);
  border-top: 1px solid var(--border); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + var(--tabbar-lift) + var(--tabbar-safe-bottom)) max(8px, env(safe-area-inset-left, 0px));
}
@media (max-width: 640px) {
  :root { --tabbar-lift: 12px; }
  .tabbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
.tabs { max-width: 640px; margin: 0 auto; display: flex; justify-content: space-around; align-items: stretch; gap: 4px; }
@media (max-width: 640px) {
  .tabs { max-width: 360px; gap: 2px; }
}
.tab {
  flex: 1 1 0; min-width: 0; min-height: 60px; padding: 4px; background: none; border: 0; border-radius: 12px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-muted); font-size: .9rem; font-weight: 600;
}
.tab-icon { width: 1.35rem; height: 1.35rem; flex: none; }
.tab-icon-wrap { position: relative; display: inline-flex; flex: none; }
.tab-badge {
  position: absolute; top: -7px; inset-inline-end: -13px; min-width: 22px; height: 22px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  border: 2px solid var(--surface); background: var(--text); color: var(--surface);
  font-size: .7rem; font-weight: 700; line-height: 1; white-space: nowrap; direction: ltr;
}
.tab[aria-current="page"] { color: var(--on-accent); background: var(--accent-fill); }
.tab.sos-tab { color: var(--danger); }

/* ---------- live emergency notices ---------- */
.emergency-live-region:not(:empty) {
  position: sticky; top: var(--topbar-h); z-index: 26;
  max-height: 50vh; max-height: 50dvh; overflow: auto;
  max-width: 1040px; margin: 8px auto; padding: 0 var(--gutter); background: var(--bg);
}
.emergency-live { display: grid; gap: 10px; padding-block: 4px; }
.emergency-live-card { border: 2px solid var(--border-strong); border-radius: var(--radius); padding: 14px; }
.emergency-live-card.is-active { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.emergency-live-card.is-closed, .emergency-live-card.is-tracking { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.emergency-live-card h2 { font-size: 1.05rem; margin-bottom: 4px; }
.emergency-live-card p { overflow-wrap: anywhere; font-size: .95rem; }
.emergency-live-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.emergency-live-actions .btn { min-height: 48px; white-space: normal; }
.emergency-live-note { color: var(--text); font-size: .95rem; }
.emergency-live-error { margin-block: 8px; font-size: .95rem; }
.emergency-live-error .btn { margin-inline-start: 8px; }
.emergency-page-nav { margin-block-end: 16px; }

/* ---------- page header ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: 10px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.count { background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-pill); padding: 0 12px; font-size: .85rem; font-weight: 600; }
.section { margin-top: 24px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1rem; font-weight: 600; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.section-title .link { margin-inline-start: auto; order: 2; }

/* ---------- buttons ---------- */
.btn {
  min-height: 52px; border-radius: 12px; border: 2px solid var(--primary);
  background: var(--surface); color: var(--primary); font-weight: 600; padding: 6px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-align: center;
  transition: background var(--motion), transform 80ms;
}
.btn:hover { background: var(--primary-soft); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.btn.primary:hover { background: var(--accent-fill-hover); }
.btn.neutral { border-color: var(--text); color: var(--text); }
.btn.neutral:hover { background: var(--surface-hover); }
.btn.warn { border-color: var(--warning-line); color: var(--warning); background: var(--warning-soft); }
.btn.danger, .btn.destructive, .btn.emergency { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.btn.danger:hover, .btn.destructive:hover, .btn.emergency:hover { background: color-mix(in srgb, var(--danger) 90%, var(--text)); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { min-height: 44px; padding: 4px 14px; font-size: .9rem; }
.btn.lg { min-height: 64px; font-size: 1.05rem; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 140px; }
.link-btn { background: none; border: 0; color: var(--primary); font-weight: 600; padding: 10px 0; min-height: 48px; text-decoration: underline; text-underline-offset: 4px; }
.icon-btn { min-width: 48px; min-height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.icon-btn .bi { font-size: 1.2rem; }

/* ---------- SOS hero ---------- */
.sos {
  width: 100%; min-height: 112px; border: 2px solid var(--danger); border-radius: var(--radius-lg);
  background: var(--danger); color: var(--on-danger);
  padding: 16px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-top: 16px;
}
.sos:active { transform: translateY(3px); }
.sos .big { font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.sos .sub { font-size: .82rem; max-width: 520px; text-align: center; }
.sos.active { background: var(--danger-soft); color: var(--danger); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.card {
  background: var(--surface-raised); border: 1px solid var(--card-edge); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); position: relative; min-width: 0;
}
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.card-head h2 { flex: 1; display: flex; align-items: center; gap: 8px; }
.card-head .bi { color: var(--primary); }
a.card, button.card { display: block; text-decoration: none; color: inherit; text-align: start; width: 100%; transition: border-color var(--motion), transform var(--motion); }
a.card:hover, button.card:hover { border-color: var(--primary); transform: translateY(-1px); }
.row { padding: 12px 0; border-bottom: 1px dashed var(--border); display: block; color: inherit; text-decoration: none; }
.row:last-child { border-bottom: 0; }
.row .title { font-weight: 600; }
.row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.row.dose-done { background: var(--success-soft); border-radius: 12px; padding: 10px 12px; border-bottom: 0; margin: 4px 0; }
.row.dose-done .item-actions { margin-top: 4px; }
.undo-dose { flex: 0 0 auto !important; color: var(--text); text-decoration: underline; text-underline-offset: 4px; padding-inline: 4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stat {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  text-align: start; color: inherit; text-decoration: none; display: block; min-height: 72px;
}
.stat .fig { font-size: 1.7rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.stat.accent .fig { color: var(--primary); }
.stat .cap { font-size: .8rem; color: var(--text-muted); }
.att-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; text-align: start; text-decoration: none; color: var(--text);
  background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: 12px; padding: 8px 12px; margin-top: 8px;
}
.att-row.critical { border-width: 2px; border-color: var(--danger); background: var(--danger-soft); }
.att-row .bang { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sos); color: var(--on-sos); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.att-row.critical .bang { background: var(--danger); color: var(--on-danger); }
.att-row .txt { flex: 1; min-width: 0; }
.bang { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sos); color: var(--on-sos); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
/* Local demo role switcher */
.role-switch { margin: 14px 0 6px; padding: 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.rs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rs-head h2 { font-size: .95rem; display: flex; gap: 6px; align-items: center; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 8px; }
.rs-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; min-height: 96px; border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; }
.rs-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.rs-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--primary-soft); color: var(--primary); }
.rs-name { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.35; }
.rs-sub { font-size: .75rem; color: var(--text-muted); text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
.rs-btn[aria-current="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.rs-btn[aria-current="true"] .rs-ico { background: var(--on-accent); color: var(--accent-fill); }
.rs-btn[aria-current="true"] .rs-sub { color: var(--on-accent); }
.rs-btn:disabled:not([aria-current]) { opacity: .55; cursor: not-allowed; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--border); }
.data-table th { font-size: .8rem; color: var(--text-muted); font-weight: 600; background: var(--surface-alt); }
.data-table tr:last-child td { border-bottom: 0; }
.att-row .chev, .chev { color: var(--text-muted); }
.banner {
  display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; margin-top: 12px;
  background: var(--info-soft); border: 1px solid var(--primary); color: var(--text);
}
.banner.warn { background: var(--warning-soft); border-color: var(--warning-line); }
.banner .bi { font-size: 1.3rem; color: var(--primary); }
.banner.warn .bi { color: var(--warning); }
.banner .txt { flex: 1; min-width: 0; }
.progress { height: 10px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-fill); border-radius: inherit; }

/* ---------- status badges: text + icon + colour, never colour alone ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill); padding: 2px 10px;
  font-size: .78rem; font-weight: 600; border: 1.5px solid; white-space: nowrap; flex: none;
}
.st-open, .st-active, .st-upcoming, .st-requested, .st-planned { background: var(--info-soft); border-color: var(--primary); color: var(--primary); }
.st-done, .st-taken, .st-resolved, .st-updated, .st-confirmed { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.st-delegated { background: var(--surface); border-color: var(--text-muted); color: var(--text); border-style: dashed; }
.st-overdue, .st-missed, .st-due, .st-paused, .st-notified, .st-sent, .st-visited, .st-high { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.st-ended, .st-cancelled, .st-snoozed, .st-low, .st-medium { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-muted); }
.st-acknowledged { background: var(--info-soft); border-color: var(--primary); color: var(--primary); }
.st-overdue { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-size: .85rem; font-weight: 600; color: var(--text); }
.field .hint { font-size: .78rem; color: var(--text-muted); }
.req::after { content: " *"; color: var(--warning); }
.input, input.input, select.input, textarea.input {
  width: 100%; min-height: 52px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 10px 14px; font-size: 1rem; color: var(--text);
}
textarea.input { min-height: 96px; resize: vertical; }
.input:hover { border-color: var(--text-muted); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input[aria-invalid="true"] { border-color: var(--warning-line); border-width: 2px; }
.input.ltr { direction: ltr; text-align: left; }
.with-mic { display: flex; gap: 8px; align-items: stretch; }
.with-mic > .input { flex: 1; min-width: 0; }
.mic-btn { flex: none; width: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--primary); }
.mic-btn.listening { background: var(--sos); color: var(--on-sos); border-color: var(--sos-edge); }
.error-msg { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; color: var(--text); background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: 8px; padding: 6px 10px; }
.error-msg::before { content: "!"; font-weight: 600; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--sos); color: var(--on-sos); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px; padding: 4px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.chip .n { font-weight: 500; opacity: .85; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--accent-fill); margin-top: 2px; }
.check.on { border-color: var(--primary); background: var(--primary-soft); }
.form-actions {
  position: sticky; bottom: calc(var(--tabbar-h) + 6px); z-index: 5;
  display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow-md);
}
.form-actions .btn { flex: 1; }
.form-actions .save-status { flex: 1 1 100%; justify-content: center; }
.form-actions .save-status.is-idle { display: none; }
.form-actions:has(.save-status) { flex-wrap: wrap; }
.label-row > .label { font-size: .85rem; font-weight: 600; color: var(--text); }
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 1.3rem; }
.stepper output { min-width: 3ch; text-align: center; font-size: 1.3rem; font-weight: 600; }
.time-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.time-list .chip { direction: ltr; }
.time-chip { padding-block: 0; padding-inline: 8px 4px; gap: 2px; }
.time-chip input { border: 0; background: transparent; color: inherit; font: inherit; min-height: 48px; width: 8.8em; padding: 0 6px; color-scheme: dark; }
[data-theme="dark"] .time-chip input { color-scheme: light; }
.time-chip button { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.time-chip button:hover { background: rgb(255 255 255 / 15%); }

/* ---------- lists ---------- */
.list { display: grid; gap: 12px; grid-template-columns: 1fr; }
.item-title { font-weight: 600; font-size: 1rem; }
.item-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.item-actions .btn { flex: 1 1 120px; }
.toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.filters .chip { flex: none; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv > div { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.kv .k { font-size: .78rem; color: var(--text-muted); }
.kv .v { font-weight: 600; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 8px 0; padding-inline-start: 22px; border-inline-start: 2px solid var(--border); margin-inline-start: 6px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }

/* ---------- detail screens: title, primary facts, secondary details, grouped actions ---------- */
.med-head { margin: 18px 0 14px; }
.med-head h1 { font-size: 1.45rem; line-height: 1.35; }
.med-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.med-purpose { margin-top: 6px; color: var(--text-muted); font-size: 1rem; }
.med-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--card-edge); box-shadow: var(--shadow-sm); min-width: 0; }
.fact-k { font-size: .85rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.fact-k .bi { color: var(--primary); }
.fact-v { font-size: 1.3rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fact-v small { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.fact-sub { font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.med-details { margin: 0; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.med-details > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.med-details > div:last-child { border-bottom: 0; }
.med-details dt { font-size: .9rem; color: var(--text-muted); font-weight: 600; }
.med-details dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.med-details dd .bi-patch-check-fill { color: var(--success); }
.med-actions, .decision-group, .danger-zone { max-width: 640px; }
.med-actions { display: grid; gap: 10px; }
.btn-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 10px; }
.safety-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--info-soft); border: 1px solid var(--primary); color: var(--text); font-size: 1rem; line-height: 1.7; }
.safety-note .bi { color: var(--primary); font-size: 1.2rem; flex: none; margin-top: 3px; }
.med-history li { padding-block: 10px; }
.tl-title { font-weight: 600; }
.tl-title .bi { font-size: .8rem; color: var(--text-muted); }
.tl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .85rem; color: var(--text-muted); }
.tl-meta .bi { color: var(--primary); }
.tl-note { margin-top: 4px; font-size: .9rem; }
.danger-zone { margin-top: 32px; padding: 16px; border: 1.5px dashed var(--danger); border-radius: var(--radius); background: var(--danger-soft); }
.danger-zone h2 { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 1rem; }
.danger-zone p { margin: 6px 0 12px; font-size: .95rem; }
/* Task details keep ownership separate from completion and deadline state. */
.task-detail { max-width: 860px; margin-inline: auto; }
.task-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin: 20px 0 16px; }
.task-head h1 { overflow-wrap: anywhere; }
.task-detail .badge { font-size: .9rem; border-style: solid; }
.task-head .st-open { background: var(--accent-fill); color: var(--on-accent); }
.task-head .st-done { background: var(--success); color: var(--bg); border-color: var(--success); }
.task-head .st-overdue { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.task-facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.task-detail .fact-k, .task-detail .fact-sub, .task-detail .tl-meta { font-size: .95rem; }
.task-value { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.task-deadline.soon { background: var(--warning-soft); border-color: var(--warning); }
.task-deadline.overdue { background: var(--danger-soft); border-color: var(--danger); }
.task-urgency { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.task-deadline.soon .task-urgency { color: var(--warning); }
.task-deadline.overdue .task-urgency { color: var(--danger); }
.task-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 12px; }
.task-context { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.task-context h2 { font-size: 1rem; margin-bottom: 6px; }
.task-context p { white-space: pre-line; overflow-wrap: anywhere; }
.task-context-link { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.task-context-link bdi { min-width: 0; }
.task-actions { position: sticky; bottom: calc(var(--tabbar-h) + 12px); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; margin-top: 24px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.task-actions .btn { flex: 1 1 160px; }
.task-history li { padding-block: 12px; }
.task-history .tl-title { overflow-wrap: anywhere; }
.task-cancel { padding: 16px; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-soft); }
.task-cancel h2 { color: var(--danger); font-size: 1rem; }
.task-cancel p { margin: 8px 0 12px; }
.task-cancel .btn { min-width: 160px; }
@media (max-width: 640px) {
  .task-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-deadline { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .med-facts { grid-template-columns: 1fr 1fr; }
  .med-facts .fact:first-child { grid-column: 1 / -1; }
  .med-details > div { grid-template-columns: 1fr; gap: 2px; }
}
.day-head { font-weight: 600; font-size: .9rem; color: var(--text-muted); margin: 18px 0 6px; }
.filters.wrap { flex-wrap: wrap; overflow: visible; }
/* Compact day-grouped history: one line per reading, note on a second line only when present. */
.vday { margin-top: 14px; }
.vday-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 6px; border-bottom: 1px solid var(--border); }
.vday-head h3 { font-size: .95rem; }
.vday-head .meta { white-space: nowrap; }
.vlist { list-style: none; margin: 0; padding: 0; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-height: 48px; padding: 6px 4px; border-bottom: 1px dashed var(--border); }
.vrow:last-child { border-bottom: 0; }
.vrow .vk { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-muted); font-size: .85rem; }
.vrow .vk .bi { color: var(--primary); font-size: 1.05rem; flex: none; }
.vrow .vv { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.vrow .vv .unit { font-weight: 400; font-size: .78rem; color: var(--text-muted); unicode-bidi: isolate; }
.vrow .vt { font-size: .8rem; color: var(--text-muted); min-width: 3.2em; text-align: end; }
.vrow .vn { grid-column: 1 / -1; font-size: .8rem; color: var(--text-muted); padding-inline-start: 26px; }
.history-more { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.feed-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.feed-item .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 1.1rem; }
.feed-item .body { flex: 1; min-width: 0; }
.feed-item.private .ico { background: var(--warning-soft); color: var(--warning); }

/* ---------- empty / loading ---------- */
.empty { text-align: center; padding: 32px 16px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty .art { font-size: 2.6rem; color: var(--primary); }
.empty h2 { margin-top: 6px; }
.empty p { color: var(--text-muted); font-size: .9rem; margin: 6px auto 14px; max-width: 420px; }
.skeleton { background: linear-gradient(90deg, var(--surface-alt), var(--surface-hover), var(--surface-alt)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); min-height: 84px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.load-error { text-align: center; padding: 24px; }

/* ---------- sheet / modal ---------- */
.backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 40; }
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 41; max-width: 640px; margin: 0 auto;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg);
}
.sheet .handle { width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sheet-body { display: grid; gap: 12px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }
.menu-list { display: grid; }
.menu-list a, .menu-list button {
  width: 100%; min-height: 60px; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); text-decoration: none; padding: 0 4px;
}
.menu-list .bi:first-child { width: 28px; font-size: 1.25rem; color: var(--primary); text-align: center; }
.menu-list .chev { margin-inline-start: auto; }
.sheet-title { min-width: 0; }
.sheet-title .meta { margin-top: 2px; }
.close-pill { flex: none; }

/* Emergency is a bounded dialog, not a replacement page; its exit stays visible. */
.sos-backdrop { z-index: 54; }
.sheet.sos-sheet { --sos-safe-bottom: env(safe-area-inset-bottom, 0px); z-index: 55; display: flex; flex-direction: column; padding: 0; max-height: 92vh; max-height: 92dvh; overflow: hidden; }
@media (max-width: 767px) {
  .sheet.sos-sheet {
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + var(--sos-safe-bottom)); border-radius: var(--radius-lg);
    max-height: calc(100vh - 32px - var(--sos-safe-bottom) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 32px - var(--sos-safe-bottom) - env(safe-area-inset-top, 0px));
  }
}
.sos-sheet .handle { display: none; }
.sos-sheet .sheet-head { flex: none; margin: 0; padding: 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sos-sheet .sheet-title h2 { color: var(--danger); font-size: 1.1rem; }
.sos-sheet .sheet-title .meta { font-size: .9rem; line-height: 1.6; }
.sos-sheet [data-sheet-close] { min-height: 48px; }
.sos-sheet .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; grid-auto-rows: max-content; gap: 16px; padding: 16px 16px 24px; scroll-padding-block: 24px; }
.sos-sheet h3 { font-size: 1rem; }
.sos-sheet .warn-box, .sos-sheet .info-box, .sos-copy { font-size: .95rem; line-height: 1.7; }
.sos-copy { color: var(--text-muted); }
.sos-status { padding: 16px; background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius); text-align: center; }
.sos-status h3 { color: var(--danger); font-size: 1.15rem; }
.sos-status p { margin-top: 6px; }
.sos-status.is-resolved { background: var(--success-soft); border-color: var(--success); }
.sos-status.is-resolved h3 { color: var(--success); }
.sos-loading { padding: 24px 0; text-align: center; }
.sos-section { display: grid; gap: 10px; min-width: 0; }
.sos-section .steps { margin: 0; }
.sos-section .step { font-size: .95rem; flex-wrap: wrap; }
.sos-section .step > span:last-child { color: var(--text-muted); font-size: .9rem; }
.sos-contact-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 10px; }
.sos-sheet .btn { overflow-wrap: anywhere; }
.sos-end, .sos-return { padding-top: 16px; border-top: 1px solid var(--border); }
.sos-return { display: grid; gap: 10px; }

/* ---------- "More" sheet: grouped tile grid ---------- */
.more-sheet { max-height: 92vh; padding-inline: 16px; }
.more-nav { display: grid; gap: 22px; padding-bottom: 6px; }
.more-section { min-width: 0; }
.tone-teal { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.tone-amber { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.tone-sage { --tone: var(--success); --tone-soft: var(--success-soft); }
.tone-neutral { --tone: var(--text-muted); --tone-soft: var(--surface-alt); }
.more-head {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; margin-bottom: 12px;
  border: 1.5px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tone-soft) 60%, var(--surface));
}
.more-head-ico { color: var(--tone); font-size: 1.1rem; display: inline-flex; }
.more-head h3 { color: var(--tone); font-size: .95rem; white-space: nowrap; }
.more-head-hint { color: var(--text-muted); font-size: .78rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-head-hint::before { content: "•"; margin-inline-end: 8px; color: var(--tone); }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 16px 10px; }
.more-grid > li { min-width: 0; }
.more-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text); border-radius: 22px; }
.more-ico {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  color: var(--tone); font-size: 1.75rem; background-color: var(--tone-soft);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 55%), transparent 55%);
  border: 1.5px solid color-mix(in srgb, var(--tone) 22%, transparent);
  box-shadow: var(--shadow-sm); transition: border-color var(--motion), transform 80ms;
}
[data-theme="dark"] .more-ico { background-image: linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 55%); }
.more-label { font-size: .8rem; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.more-tile:hover .more-ico { border-color: var(--tone); }
.more-tile:active .more-ico { transform: scale(.95); }
.more-tile:focus-visible { outline: none; }
.more-tile:focus-visible .more-ico { outline: 3px solid var(--primary); outline-offset: 3px; }
/* Current screen: solid accent tile + underlined label, never colour alone. */
.more-tile[aria-current="page"] .more-ico { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.more-tile[aria-current="page"] .more-label { color: var(--primary); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.fullscreen { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow: auto; padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.fullscreen .inner { max-width: 560px; margin: 0 auto; }
.count-big { font-size: 1.5rem; font-weight: 600; text-align: center; margin: 14px 0 6px; }
.countdown { font-size: 4rem; font-weight: 600; text-align: center; color: var(--danger); line-height: 1.2; }
.steps { list-style: none; margin: 14px 0; padding: 0; }
.step { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border); color: var(--text-muted); }
.step .mark { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.step .txt { flex: 1; }
.step.done { color: var(--text); }
.step.done .mark { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.warn-box { background: var(--warning-soft); border: 1px solid var(--warning-line); border-radius: 12px; padding: 10px 12px; font-size: .85rem; color: var(--text); }
.warn-box.critical { background: var(--danger-soft); border-color: var(--danger); }
.warn-box.critical .bang { background: var(--danger); color: var(--on-danger); }
.info-box { background: var(--info-soft); border: 1px solid var(--primary); border-radius: 12px; padding: 10px 12px; font-size: .85rem; color: var(--text); }

/* ---------- toast ---------- */
.toasts { position: fixed; inset-inline: 0; bottom: calc(var(--tabbar-h) + 14px); z-index: 60; display: grid; gap: 8px; justify-items: center; padding: 0 12px; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 560px; width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-lg); font-weight: 500;
}
.toast.error { background: var(--warning-soft); color: var(--text); border: 2px solid var(--warning-line); }
.toast .txt { flex: 1; }
.toast button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 10px; min-height: 40px; padding: 0 12px; font-weight: 600; }
/* Inline autosave status: sits at the end of a setting's label row, same spot every time. */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.save-status { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-size: .8rem; font-weight: 600; border-radius: var(--radius-pill); padding: 0 10px; transition: opacity var(--motion); }
.save-status.is-idle { opacity: 0; padding: 0; }
.save-status.is-saving { color: var(--text-muted); background: var(--surface-alt); }
.save-status.is-saving .bi { animation: spin 1s linear infinite; }
.save-status.is-saved { color: var(--success); background: var(--success-soft); }
.save-status.is-error { color: var(--warning); background: var(--warning-soft); }

/* ---------- reminder (W9) ---------- */
.reminder { text-align: center; }
.reminder .when { color: var(--text-muted); }
.reminder .drug { font-size: 1.6rem; font-weight: 600; margin-top: 14px; }
.reminder .btn { min-height: 64px; font-size: 1.1rem; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: .75rem; color: var(--text-muted); font-weight: 600; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1 / 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 600; padding: 0;
}
.cal-day.other { opacity: .35; }
.cal-day.today { border: 2px solid var(--primary); }
.cal-day[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.cal-day .dots { display: flex; gap: 2px; height: 6px; }
.cal-day .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: block; }
.cal-day .dots i.warn { background: var(--sos); }
.cal-day[aria-pressed="true"] .dots i { background: var(--on-accent); }

/* ---------- games ---------- */
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; }
.game-card { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--primary); background: var(--primary-soft); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; }
.game-card.open { background: var(--surface); }
.game-card.matched { background: var(--success-soft); border-color: var(--success-line); }
.big-num { font-size: 2.6rem; font-weight: 600; text-align: center; letter-spacing: .1em; }

/* ---------- auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; margin-bottom: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.auth-tabs [role="tab"] { min-height: 52px; padding: 8px 12px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 600; }
.auth-tabs [aria-selected="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand .logo { font-size: 2.2rem; color: var(--primary); }
.auth-brand h1 { font-size: 1.5rem; }
.wizard-progress { display: flex; gap: 6px; margin: 8px 0 18px; }
.wizard-progress span { flex: 1; height: 8px; border-radius: 4px; background: var(--track); }
.wizard-progress span.on { background: var(--accent-fill); }

/* ---------- responsive (overrides after base rules) ---------- */
@media (min-width: 768px) {
  .cards, .list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: var(--radius-lg); max-height: 85vh; }
  .sheet.more-sheet { max-width: 720px; max-height: 88vh; padding-inline: 24px; }
  .sheet .handle { display: none; }
  .kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  :root { --gutter: 12px; }
  .tb-btn { min-width: 44px; padding: 0 8px; }
}
/* Phones: on sub-pages the title needs the room; voice commands stay on the root screens. */
@media (max-width: 640px) {
  /* Page-header actions share one full-width row as equal halves. */
  .head-actions { width: 100%; flex-wrap: nowrap; }
  .head-actions > .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: nowrap; }
}
@media (pointer: coarse) {
  .chip, .btn.sm { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .topbar, .tabbar, .toasts, .offline-banner { display: none !important; }
}