@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600&family=Spectral:wght@300;400;600&family=Fira+Code:wght@400;500&family=Nunito+Sans:wght@400;600;700&display=swap');

/* ── Light tokens (Mist) — default ─────────────────────────────── */
:root {
  --color-bg:           #EDE8E2;
  --color-surface:      #F8F5F0;
  --color-text:         #1C2535;
  --color-text-muted:   #6A7280;
  --color-accent:       #3A6478;
  --color-warn:         #C4402A;
  --color-border:       rgba(28,37,53,0.09);
  --color-ring-track:   rgba(28,37,53,0.08);
  --badge-good-bg:      rgba(61,120,86,0.10);
  --badge-good-text:    #3D7856;
  --badge-warn-bg:      rgba(196,64,42,0.11);
  --badge-warn-text:    #C4402A;
  --badge-accent-bg:    rgba(58,100,120,0.09);
  --badge-accent-text:  #3A6478;
  --card-shadow:        0 2px 4px rgba(28,37,53,0.05), 0 8px 24px rgba(28,37,53,0.09);
  --card-shadow-hover:  0 2px 4px rgba(28,37,53,0.05), 0 8px 24px rgba(28,37,53,0.09), 0 12px 32px rgba(28,37,53,0.07);
  --nav-border:         rgba(28,37,53,0.08);
  --nav-bg:             rgba(237,232,226,0.88);
  --brand-font:         'Spectral', serif;
  --btn-text:           #F8F5F0;
  --input-bg:           rgba(28,37,53,0.04);
  --input-border:       rgba(28,37,53,0.15);
  --input-focus-ring:   rgba(58,100,120,0.25);

  /* aliases for login.html compatibility */
  --color-text-primary:   var(--color-text);
  --color-text-secondary: var(--color-text-muted);
  --shadow-card:          var(--card-shadow);
  --color-sep:            var(--color-border);
  --ff-display:           var(--brand-font);
  --ff-body:              'Nunito Sans', sans-serif;
  --ff-mono:              'Fira Code', monospace;

  /* Weather location dot colours */
  --wx-dot-sun:   #E8A83A;
  --wx-dot-lake:  #5A8498;

  /* Progress bar colours (Weekly Goal Detail) */
  --bar-bg:       rgba(28,37,53,0.08);
  --bar-done:     rgba(61,120,86,0.55);
  --bar-missed:   rgba(196,64,42,0.40);
  --bar-active:   rgba(58,100,120,0.55);

  /* Row-level interaction tokens (Weekly Goal Detail) */
  --row-hover-bg:   rgba(0,0,0,0.02);
  --row-current-bg: rgba(58,100,120,0.04);
  --indent-bg:      rgba(0,0,0,0.015);
}

/* ── Dark tokens (Lodge) — OS preference ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #1C2535;
    --color-surface:      #263244;
    --color-text:         #E6E1D6;
    --color-text-muted:   #7A8898;
    --color-accent:       #C4A06A;
    --color-warn:         #D4593C;
    --color-border:       rgba(230,225,214,0.08);
    --color-ring-track:   rgba(230,225,214,0.08);
    --badge-good-bg:      rgba(126,200,164,0.13);
    --badge-good-text:    #7EC8A4;
    --badge-warn-bg:      rgba(212,89,60,0.14);
    --badge-warn-text:    #D4593C;
    --badge-accent-bg:    rgba(196,160,106,0.12);
    --badge-accent-text:  #C4A06A;
    --card-shadow:        0 4px 28px rgba(0,0,0,0.36), 0 0 0 1px rgba(196,160,106,0.08);
    --card-shadow-hover:  0 6px 36px rgba(0,0,0,0.50), 0 0 0 1px rgba(196,160,106,0.12);
    --nav-border:         rgba(230,225,214,0.07);
    --nav-bg:             rgba(28,37,53,0.90);
    --brand-font:         'Source Serif 4', serif;
    --btn-text:           #1C2535;
    --input-bg:           rgba(230,225,214,0.04);
    --input-border:       rgba(230,225,214,0.15);
    --input-focus-ring:   rgba(196,160,106,0.25);
    --wx-dot-sun:         #C4A06A;
    --wx-dot-lake:        #4A7A8A;
    --bar-bg:             rgba(230,225,214,0.08);
    --bar-done:           rgba(126,200,164,0.45);
    --bar-missed:         rgba(212,89,60,0.40);
    --bar-active:         rgba(196,160,106,0.50);
    --row-hover-bg:       rgba(255,255,255,0.03);
    --row-current-bg:     rgba(196,160,106,0.04);
    --indent-bg:          rgba(255,255,255,0.02);
  }
}

/* ── Manual overrides — take precedence over media query ────────── */
:root[data-theme="dark"] {
  --color-bg:           #1C2535;
  --color-surface:      #263244;
  --color-text:         #E6E1D6;
  --color-text-muted:   #7A8898;
  --color-accent:       #C4A06A;
  --color-warn:         #D4593C;
  --color-border:       rgba(230,225,214,0.08);
  --color-ring-track:   rgba(230,225,214,0.08);
  --badge-good-bg:      rgba(126,200,164,0.13);
  --badge-good-text:    #7EC8A4;
  --badge-warn-bg:      rgba(212,89,60,0.14);
  --badge-warn-text:    #D4593C;
  --badge-accent-bg:    rgba(196,160,106,0.12);
  --badge-accent-text:  #C4A06A;
  --card-shadow:        0 4px 28px rgba(0,0,0,0.36), 0 0 0 1px rgba(196,160,106,0.08);
  --card-shadow-hover:  0 6px 36px rgba(0,0,0,0.50), 0 0 0 1px rgba(196,160,106,0.12);
  --nav-border:         rgba(230,225,214,0.07);
  --nav-bg:             rgba(28,37,53,0.90);
  --brand-font:         'Source Serif 4', serif;
  --btn-text:           #1C2535;
  --input-bg:           rgba(230,225,214,0.04);
  --input-border:       rgba(230,225,214,0.15);
  --input-focus-ring:   rgba(196,160,106,0.25);
  --wx-dot-sun:         #C4A06A;
  --wx-dot-lake:        #4A7A8A;
  --bar-bg:             rgba(230,225,214,0.08);
  --bar-done:           rgba(126,200,164,0.45);
  --bar-missed:         rgba(212,89,60,0.40);
  --bar-active:         rgba(196,160,106,0.50);
  --row-hover-bg:       rgba(255,255,255,0.03);
  --row-current-bg:     rgba(196,160,106,0.04);
  --indent-bg:          rgba(255,255,255,0.02);
}
:root[data-theme="light"] {
  --color-bg:           #EDE8E2;
  --color-surface:      #F8F5F0;
  --color-text:         #1C2535;
  --color-text-muted:   #6A7280;
  --color-accent:       #3A6478;
  --color-warn:         #C4402A;
  --color-border:       rgba(28,37,53,0.09);
  --color-ring-track:   rgba(28,37,53,0.08);
  --badge-good-bg:      rgba(61,120,86,0.10);
  --badge-good-text:    #3D7856;
  --badge-warn-bg:      rgba(196,64,42,0.11);
  --badge-warn-text:    #C4402A;
  --badge-accent-bg:    rgba(58,100,120,0.09);
  --badge-accent-text:  #3A6478;
  --card-shadow:        0 2px 4px rgba(28,37,53,0.05), 0 8px 24px rgba(28,37,53,0.09);
  --card-shadow-hover:  0 2px 4px rgba(28,37,53,0.05), 0 8px 24px rgba(28,37,53,0.09), 0 12px 32px rgba(28,37,53,0.07);
  --nav-border:         rgba(28,37,53,0.08);
  --nav-bg:             rgba(237,232,226,0.88);
  --brand-font:         'Spectral', serif;
  --btn-text:           #F8F5F0;
  --input-bg:           rgba(28,37,53,0.04);
  --input-border:       rgba(28,37,53,0.15);
  --input-focus-ring:   rgba(58,100,120,0.25);
}

/* ── Base reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: var(--ff-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Wake background canvas — fixed div instead of body background-attachment:fixed,
   which has known cross-browser quirks. The div IS the viewport so background-size
   100% 100% always matches the SVG coordinate system exactly. */
#stride-wake-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ────────────────────────────────────────────────────────── */
.app-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 58px;
  padding: 0 36px;
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--nav-bg);
}

.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand:hover { text-decoration: none; }

.nav-logo-circle { stroke: var(--color-accent); }
.nav-logo-letter { fill: var(--color-accent); }

.nav-brand-text { display: flex; align-items: baseline; gap: 16px; }
.nav-name {
  font-family: var(--brand-font);
  font-size: 1.2rem; font-weight: 600;
  color: var(--color-text); letter-spacing: -0.01em; line-height: 1;
}
.nav-tagline {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-text-muted); line-height: 1;
}

.nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.nav-center-label {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-text); line-height: 1;
}
.nav-center-date {
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 400;
  color: var(--color-text-muted); line-height: 1;
}

.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-user {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-body); font-size: 12px;
  color: var(--color-text-muted);
}
.nav-username { font-weight: 600; color: var(--color-text); }
.nav-user-link {
  color: var(--color-text-muted); text-decoration: none; font-size: 12px;
  transition: color 0.15s;
}
.nav-user-link:hover { color: var(--color-accent); text-decoration: none; }
button.nav-user-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--ff-body);
}
.nav-divider { opacity: 0.4; }

.nav-welcome {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 12px;
}

.nav-theme-btn {
  background: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); transition: background 0.15s, color 0.15s;
  padding: 0;
}
.nav-theme-btn:hover { background: var(--color-border); color: var(--color-text); }

/* ── Mobile settings menu ───────────────────────────────────────── */
.nav-settings { position: relative; display: none; }

.nav-settings-btn {
  background: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); transition: background 0.15s, color 0.15s;
  padding: 0;
}
.nav-settings-btn:hover { background: var(--color-border); color: var(--color-text); }

.nav-settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  min-width: 168px;
  padding: 6px;
  z-index: 200;
}
.nav-settings-menu[hidden] { display: none; }

.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.12s;
}
.settings-item:hover { background: var(--color-border); text-decoration: none; }
.settings-item-icon {
  color: var(--color-text-muted);
  display: flex; align-items: center; flex-shrink: 0;
}

.settings-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 6px;
}

/* ── Main content ───────────────────────────────────────────────── */
.app-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 36px 56px;
  position: relative; z-index: 1;
}

/* ── Daily Brief layout ─────────────────────────────────────────── */
.daily-brief { display: flex; flex-direction: column; gap: 0; }

.section-label {
  font-family: var(--ff-body);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted);
  display: block; margin-bottom: 10px;
}

/* ── Weather section ────────────────────────────────────────────── */
.section-weather { margin-bottom: 22px; }

.weather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Weather card ────────────────────────────────────────────────── */
.wx-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px 18px;
}

.wx-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.wx-location-row { display: flex; align-items: center; gap: 8px; }
.wx-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wx-dot-sun  { background: var(--wx-dot-sun);  opacity: 0.85; }
.wx-dot-lake { background: var(--wx-dot-lake); opacity: 0.75; }

.wx-location-name {
  font-family: var(--ff-body);
  font-size: 12.5px; font-weight: 700;
  color: var(--color-text); letter-spacing: 0.01em;
}

.wx-temp-big {
  font-family: var(--brand-font);
  font-size: 3.2rem; font-weight: 400;
  color: var(--color-text); letter-spacing: -0.03em; line-height: 1;
  display: block; margin-bottom: 4px;
}
.wx-condition {
  font-family: var(--ff-body);
  font-size: 14px; font-weight: 600;
  color: var(--color-text); margin-bottom: 6px;
}
.wx-at-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
.wx-at-item { display: flex; align-items: baseline; gap: 3px; }
.wx-at-lbl {
  font-family: var(--ff-mono);
  font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0.6;
}
.wx-at-val {
  font-family: var(--ff-mono);
  font-size: 11.5px; font-weight: 500; color: var(--color-text-muted);
}
.wx-at-sep { font-size: 9px; color: var(--color-border); opacity: 0.8; }

.wx-details {
  display: flex; gap: 18px; margin-bottom: 14px;
}
.wx-detail {
  display: flex; flex-direction: column; gap: 1px;
}
.wx-detail-label {
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0.7;
}
.wx-detail-val {
  font-family: var(--ff-body);
  font-size: 12.5px; font-weight: 600; color: var(--color-text);
}

.wx-sun-times {
  display: flex; gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.wx-sun-item {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--ff-mono); font-size: 10px;
  color: var(--color-text-muted); letter-spacing: 0.04em;
}
.wx-sun-lbl {
  font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.55;
}

/* ── Weather error states ────────────────────────────────────────── */
.wx-error {
  grid-column: 1 / -1;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px;
  opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
}
.wx-error-msg {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.wx-card-error { opacity: 0.55; }
.wx-error-inline {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 12px 0;
}

/* ── Calendar section ───────────────────────────────────────────── */
.section-calendar { margin-bottom: 0; }

.calendar-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px 22px;
  min-height: 80px;
}

/* Event list */
.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cal-event {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 16px;
  padding: 9px 0 9px 10px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

/* Hairline timeline accent */
.cal-event::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-accent);
  opacity: 0.22;
  border-radius: 2px;
}

.cal-event:first-child { padding-top: 2px; }
.cal-event:first-child::before { top: 2px; }
.cal-event:last-child  { border-bottom: none; padding-bottom: 2px; }
.cal-event:last-child::before  { bottom: 2px; }

/* Time column — monospace for precision */
.cal-event-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 1px;
  gap: 1px;
}

.cal-time-start,
.cal-time-end {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.cal-time-start { font-weight: 500; }

.cal-time-end {
  opacity: 0.65;
  font-size: 0.70rem;
}

/* All-day badge */
.cal-allday-badge {
  font-family: var(--ff-mono);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.75;
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1px;
}

/* Event body */
.cal-event-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cal-event-title {
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.35;
}

/* Source calendar chip — signals whose event it is (e.g. "Family"). */
.cal-event-calendar {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-event-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  opacity: 0.80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-event-location svg {
  flex-shrink: 0;
  opacity: 0.70;
}

/* Empty state */
.cal-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  opacity: 0.70;
  padding: 2px 0;
  letter-spacing: 0.01em;
}

/* Error state */
.cal-error {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-warn);
  opacity: 0.60;
  font-size: 0.88rem;
  padding: 2px 0;
}

.cal-error-icon { flex-shrink: 0; }

/* ── Metrics layout ─────────────────────────────────────────────── */
/* Desktop: 3-col — weekly goal (col-1), active days (col-2), sleep (col-3).
   .metric-mini-row uses display:contents so its children join the parent grid. */
.metrics-layout {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 220px) minmax(190px, 220px);
  gap: 12px;
}
.metric-mini-row { display: contents; }

/* ── Metric card shell ──────────────────────────────────────────── */
.metric-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px 22px;
  color: inherit;
  display: block;
  text-decoration: none;
}
a.metric-card {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
a.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
}

/* ── Mini card (companion cards — Active Days, Sleep) ───────────── */
.mini-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px 22px;
  color: inherit;
  display: block;
  text-decoration: none;
}
a.mini-card {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
a.mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
}

/* ── Sleep card null state ──────────────────────────────────────── */
.slp-null {
  color: var(--color-text-muted);
  opacity: 0.45;
}

/* ── Placeholder card (pre-implementation stubs) ────────────────── */
.card-placeholder {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  border: 1.5px dashed var(--color-border);
  padding: 20px 22px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}
.placeholder-label {
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Badges — shared ────────────────────────────────────────────── */
.badge {
  font-family: var(--ff-mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 5px;
  white-space: nowrap; display: inline-block;
}
.badge-good    { color: var(--badge-good-text);   background: var(--badge-good-bg);   }
.badge-warn    { color: var(--badge-warn-text);   background: var(--badge-warn-bg);   }
.badge-accent  { color: var(--badge-accent-text); background: var(--badge-accent-bg); }
.badge-nice    { color: var(--badge-good-text);   background: var(--badge-good-bg);   }
.badge-marginal { color: var(--badge-accent-text); background: var(--badge-accent-bg); }
.badge-bad     { color: var(--badge-warn-text);   background: var(--badge-warn-bg);   }
.badge-loading { color: var(--color-text-muted);  background: var(--color-ring-track); opacity: 0.6; animation: badge-pulse 1.4s ease-in-out infinite; }

/* ── Verdict badge ───────────────────────────────────────────────── */
.verdict-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; padding: 4px 10px;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 0.3; }
}

/* ── Metric card content — shared header ────────────────────────── */
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.card-label { display: flex; flex-direction: column; gap: 2px; }
.card-label-main {
  font-family: var(--ff-body);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.card-label-sub {
  font-family: var(--ff-body);
  font-size: 11px; color: var(--color-text-muted);
}

/* ── Companion card stat display ────────────────────────────────── */
.stat-mid {
  font-family: var(--brand-font);
  font-size: 2.1rem; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--color-text); margin-bottom: 3px;
}
.stat-sub {
  font-family: var(--ff-body);
  font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 10px;
}

/* ── Active Days pip row ─────────────────────────────────────────── */
.days-pip-row { display: flex; gap: 4px; }

.day-col {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}

.day-col .day-pip {
  width: 100%; height: 7px; border-radius: 3.5px;
  background: var(--color-ring-track);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.day-col.pip-active .day-pip {
  background: var(--color-accent);
  box-shadow: 0 1px 6px var(--color-accent);
}
.day-col.pip-future { opacity: 0.35; }

.day-letter {
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
.day-col.pip-active .day-letter {
  color: var(--color-accent);
  font-weight: 500;
}

/* ── Metrics section wrapper ────────────────────────────────────── */
.metrics-section { margin-bottom: 22px; }

/* Minimum height for cards that still show placeholder stubs */
.metric-card { min-height: 140px; }
.mini-card   { min-height: 110px; }

/* ── Metric card header (label + badge row) ─────────────────────── */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.card-label { display: flex; flex-direction: column; gap: 2px; }
.card-label-main {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.card-label-sub {
  font-family: 'Fira Code', monospace;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--color-text-muted); opacity: 0.65;
}

/* ── Weekly Goal card inner layout ─────────────────────────────── */
.card-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ring-stats-col { display: flex; flex-direction: column; gap: 3px; }
.stat-big {
  font-family: var(--brand-font);
  font-size: 3.0rem; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--color-text);
}
.stat-unit { font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.stat-of   { font-family: 'Nunito Sans', sans-serif; font-size: 12px; color: var(--color-text-muted); }
.stat-pct  {
  font-family: 'Fira Code', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--color-accent); margin-top: 5px;
}

/* ── Weekly Goal ring arc animation ────────────────────────────── */
@keyframes ring-fill {
  from { stroke-dashoffset: 226.19; }
  to   { stroke-dashoffset: var(--ring-offset, 0); }
}
.ring-arc {
  animation: ring-fill 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.1s;
}
.ring-arc-done {
  filter: drop-shadow(0 0 4px var(--color-accent));
}

/* ── Mobile (phones) ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-nav { height: 52px; padding: 0 18px; }
  .nav-brand svg { width: 24px; height: 24px; }
  .nav-tagline { display: none; }
  .nav-user { display: none; }
  .nav-theme-btn { display: none; }
  .nav-settings { display: block; }

  .app-content { padding: 20px 16px 52px; max-width: none; }
  .daily-brief { display: flex; flex-direction: column; gap: 18px; }
  .section-weather,
  .section-calendar,
  .metrics-section { margin-bottom: 0; }

  /* Weather: side-by-side on mobile (matches mockup) */
  .weather-grid { gap: 8px; }
  .wx-card { padding: 14px 12px 12px; }
  .wx-temp-big { font-size: 2.4rem; margin-bottom: 2px; }
  .wx-condition { font-size: 11.5px; margin-bottom: 4px; }
  .wx-at-row { gap: 8px; margin-bottom: 8px; }
  .wx-at-val { font-size: 10.5px; }
  .wx-sun-times { gap: 8px; flex-wrap: wrap; }
  .wx-7day-affordance { display: none; }

  /* Health metrics: weekly goal full-width, then 2-col row for companions */
  .metrics-layout { display: flex; flex-direction: column; gap: 8px; }
  .metric-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mini-card { padding: 14px 14px 15px; }

  /* Weekly goal card: ensure full width */
  .metric-card.metric-weekly-goal { width: 100%; }
}

/* ── Weather card tap targets (stride-19) ───────────────────────── */
.wx-card-tap {
  display: block; text-decoration: none; color: inherit;
  border-radius: 12px;
}
.wx-card-tap:hover .wx-card {
  box-shadow: var(--card-shadow-hover);
  text-decoration: none;
}
.wx-card-tap:hover { text-decoration: none; }

.wx-7day-affordance {
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-accent); opacity: 0.75;
  margin-left: auto; align-self: center; white-space: nowrap;
}

/* ── Weather detail page (stride-19) ───────────────────────────── */
/* ── Weather detail — Panoramic layout ─────────────────────────── */
.wx-detail-page { padding: 0; }

.wx-pano-loading {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 32px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: 0.08em;
  animation: badge-pulse 1.4s ease-in-out infinite;
  margin-bottom: 12px;
}
.wx-pano-strip-loading { height: 64px; padding: 0; }

/* Banner — full-width 3-column grid */
.wx-pano-banner {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
  border-top: 5px solid transparent;
}
.wx-pano-banner.wx-verdict-nice     { border-top-color: var(--badge-good-text); }
.wx-pano-banner.wx-verdict-marginal { border-top-color: var(--badge-accent-text); }
.wx-pano-banner.wx-verdict-bad      { border-top-color: var(--badge-warn-text); }

/* Banner — left */
.wx-pano-loc {
  font-family: var(--brand-font);
  font-size: 1.55rem; font-weight: 400; letter-spacing: -0.025em; line-height: 1;
  color: var(--color-text); margin-bottom: 2px;
}
.wx-pano-sub {
  display: block;
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 10px;
}
.wx-pano-badge {
  display: inline-flex; align-items: center;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 5px; line-height: 1; white-space: nowrap;
}
.wx-pano-banner.wx-verdict-nice .wx-pano-badge     { color: var(--badge-good-text);   background: var(--badge-good-bg);   }
.wx-pano-banner.wx-verdict-marginal .wx-pano-badge { color: var(--badge-accent-text); background: var(--badge-accent-bg); }
.wx-pano-banner.wx-verdict-bad .wx-pano-badge      { color: var(--badge-warn-text);   background: var(--badge-warn-bg);   }

/* Banner — center */
.wx-pano-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.wx-pano-temp-row { display: flex; align-items: center; gap: 10px; }
.wx-pano-temp {
  font-family: var(--brand-font);
  font-size: 4rem; font-weight: 300; letter-spacing: -0.06em; line-height: 1;
  color: var(--color-text);
}
.wx-pano-cond {
  font-family: var(--ff-body); font-size: 13.5px; font-weight: 600; color: var(--color-text);
}
.wx-pano-at-row {
  display: flex; align-items: baseline; gap: 14px; margin-top: 2px;
}
.wx-pano-at-item { display: flex; align-items: baseline; gap: 3px; }
.wx-pano-at-lbl {
  font-family: var(--ff-mono);
  font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0.6;
}
.wx-pano-at-val {
  font-family: var(--ff-body); font-size: 12px; color: var(--color-text-muted);
}
.wx-pano-at-sep { font-size: 9px; color: var(--color-border); opacity: 0.8; }

/* Banner — right */
.wx-pano-right {
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
}
.wx-pano-details { display: flex; gap: 22px; }
.wx-pano-detail  { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wx-pano-dlbl {
  font-family: var(--ff-mono); font-size: 7.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-muted); opacity: 0.6;
}
.wx-pano-dval {
  font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: var(--color-text);
}
.wx-pano-sun {
  display: flex; gap: 16px;
  padding-top: 9px; border-top: 1px solid var(--color-border);
}
.wx-pano-sun-item { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wx-pano-slbl {
  font-family: var(--ff-mono); font-size: 7px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-text-muted); opacity: 0.5;
}
.wx-pano-sval {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--color-text-muted);
}

/* ── 7-day strip — CSS grid ─────────────────────────────────────── */
.wx-pano-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.wx-day-col {
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  border: 1.5px solid var(--color-border);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 10px 6px 16px; gap: 4px;
  min-height: 210px;
}

.wx-day-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
.wx-day-col.wx-verdict-nice     .wx-day-bar { background: var(--badge-good-text); }
.wx-day-col.wx-verdict-marginal .wx-day-bar { background: var(--badge-accent-text); opacity: 0.7; }
.wx-day-col.wx-verdict-bad      .wx-day-bar { background: var(--badge-warn-text); }

.wx-day-name {
  font-family: var(--ff-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 4px;
}
.wx-day-col.wx-verdict-nice     .wx-day-name { color: var(--badge-good-text); }
.wx-day-col.wx-verdict-marginal .wx-day-name { color: var(--badge-accent-text); }
.wx-day-col.wx-verdict-bad      .wx-day-name { color: var(--color-text-muted); }

.wx-day-date {
  font-family: var(--ff-mono);
  font-size: 8px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0.7;
}

.wx-day-high {
  font-family: var(--brand-font);
  font-size: 1.85rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1;
  margin-top: 2px;
}
.wx-day-col.wx-verdict-nice     .wx-day-high { color: var(--badge-good-text); }
.wx-day-col.wx-verdict-marginal .wx-day-high { color: var(--badge-accent-text); }
.wx-day-col.wx-verdict-bad      .wx-day-high { color: var(--color-text-muted); }

.wx-day-feel-lbl {
  font-family: var(--ff-mono);
  font-size: 6px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted); opacity: 0.45; line-height: 1;
}
.wx-day-actual {
  font-family: var(--ff-mono);
  font-size: 8px; letter-spacing: 0.05em;
  color: var(--color-text-muted); opacity: 0.55; line-height: 1;
}
.wx-day-hl {
  font-size: 6px; letter-spacing: 0.10em; opacity: 0.7;
  margin-right: 1px;
}

.wx-day-verdict {
  font-family: var(--ff-mono);
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap;
}
.wx-day-col.wx-verdict-nice     .wx-day-verdict { color: var(--badge-good-text);   background: var(--badge-good-bg);   }
.wx-day-col.wx-verdict-marginal .wx-day-verdict { color: var(--badge-accent-text); background: var(--badge-accent-bg); }
.wx-day-col.wx-verdict-bad      .wx-day-verdict { color: var(--badge-warn-text);   background: var(--badge-warn-bg);   }

.wx-day-cond {
  font-family: var(--ff-body); font-size: 7px; line-height: 1.25;
  color: var(--color-text-muted); opacity: 0.7;
}

/* ── Error state ────────────────────────────────────────────────── */
.wx-detail-error {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 24px 22px;
  color: var(--color-warn);
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: 0.06em;
}

/* ── Active Days detail page ────────────────────────────────────── */
.acd-detail-page {
  width: 100%; max-width: 560px;
  margin: 0 auto;
}

.acd-back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-body); font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s;
}
.acd-back-link:hover { color: var(--color-accent); text-decoration: none; }

.acd-page-head { margin-bottom: 28px; }

.acd-page-title {
  font-family: var(--brand-font);
  font-size: 2rem; font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-text); margin: 0 0 4px;
}

.acd-page-sub {
  font-family: var(--ff-body); font-size: 13px;
  color: var(--color-text-muted); margin: 0;
}

/* Grid */
.acd-grid { width: 100%; }

.acd-header-row,
.acd-week-row {
  display: grid;
  grid-template-columns: 42px repeat(8, 1fr);
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}

.acd-header-row {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.acd-day-header,
.acd-count-header {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
  text-align: center;
}

.acd-count-header { color: transparent; }

/* Staggered entry animation */
/* Animates transform only — never opacity. With `both` fill-mode a row holds the
   `from` state whenever the animation does not run, so fading from opacity 0
   made the entire row (labels and counts included) permanently invisible on any
   client that did not run it. Failing closed to a 4px offset is imperceptible,
   and matches `ring-fill` above, whose `from` is likewise a visible state. */
@keyframes acd-row-in {
  from { transform: translateY(4px); }
  to   { transform: translateY(0); }
}
.acd-week-row {
  animation: acd-row-in 0.28s ease both;
  border-radius: 5px;
  padding: 2px 0;
  transition: background 0.15s;
}
.acd-week-row:hover { background: var(--color-border); }

/* Stagger each row: 12 rows × 30ms offset. Indices start at 2 because
   .acd-header-row is .acd-grid's first child, so the week rows are children
   2–13. Targeting 1–12 left the last row unmatched (falling back to the
   shorthand's 0ms) so it animated first, ahead of rows 1–11. */
.acd-week-row:nth-child(2)  { animation-delay:  0ms; }
.acd-week-row:nth-child(3)  { animation-delay: 30ms; }
.acd-week-row:nth-child(4)  { animation-delay: 60ms; }
.acd-week-row:nth-child(5)  { animation-delay: 90ms; }
.acd-week-row:nth-child(6)  { animation-delay:120ms; }
.acd-week-row:nth-child(7)  { animation-delay:150ms; }
.acd-week-row:nth-child(8)  { animation-delay:180ms; }
.acd-week-row:nth-child(9)  { animation-delay:210ms; }
.acd-week-row:nth-child(10) { animation-delay:240ms; }
.acd-week-row:nth-child(11) { animation-delay:270ms; }
.acd-week-row:nth-child(12) { animation-delay:300ms; }
.acd-week-row:nth-child(13) { animation-delay:330ms; }

/* Current week: subtle accent left border */
.acd-week-row--current {
  border-left: 2px solid var(--color-accent);
  padding-left: 4px;
  margin-left: -6px;
}

.acd-week-label {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-right: 6px;
}
.acd-week-month {
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted); line-height: 1;
}
.acd-week-day {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  color: var(--color-text-muted); line-height: 1.2;
}
.acd-week-row--current .acd-week-month,
.acd-week-row--current .acd-week-day {
  color: var(--color-accent);
}

/* aspect-ratio drives the square shape; min-height is a floor so a cell can
   never collapse to zero height and vanish if it does not resolve. The floor
   sits below the smallest real cell (~34px at the mobile breakpoint), so it
   never affects normal layout. Same reason on .acd-week-count below. */
.acd-cell {
  aspect-ratio: 1;
  min-height: 22px;
  border-radius: 5px;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.acd-cell--active {
  background: var(--color-accent);
  box-shadow: 0 1px 8px var(--color-accent);
}
.acd-cell--inactive {
  background: var(--color-border);
}
.acd-week-row:hover .acd-cell--inactive {
  background: var(--color-ring-track);
}

.acd-week-count {
  aspect-ratio: 1;
  min-height: 22px;
  border-radius: 0 5px 5px 0;
  background: var(--color-border);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.acd-week-count--good {
  background: var(--badge-good-text);
  box-shadow: 0 1px 8px var(--badge-good-text);
}
.acd-count-num {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  color: var(--color-text-muted);
}
.acd-week-count--good .acd-count-num { color: var(--btn-text); }
.acd-week-row--current .acd-count-num { color: var(--color-accent); }
.acd-week-row--current .acd-week-count--good .acd-count-num { color: var(--btn-text); }

/* Legend */
.acd-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 20px;
  font-family: var(--ff-body); font-size: 12px; color: var(--color-text-muted);
}
.acd-legend-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.acd-legend-dot--active  { background: var(--color-accent); }
.acd-legend-dot--inactive { background: var(--color-border); }
.acd-legend-label { margin-right: 10px; }

/* ── Active Days detail mobile ──────────────────────────────────── */
@media (max-width: 640px) {
  .acd-detail-page { max-width: none; }
  .acd-page-title { font-size: 1.6rem; }
  .acd-header-row,
  .acd-week-row {
    grid-template-columns: 34px repeat(8, 1fr);
    gap: 3px;
    margin-bottom: 3px;
  }
  .acd-week-month { display: none; }
  .acd-week-day { font-size: 10px; }
  .acd-day-header { font-size: 8px; }
  .acd-count-num { font-size: 10px; }
  .acd-cell { border-radius: 4px; }
  .acd-week-count { border-radius: 0 4px 4px 0; }
  .acd-week-row--current { margin-left: -4px; padding-left: 2px; }
}

/* ── Weather detail mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* Banner stacks to single column */
  .wx-pano-banner {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    gap: 0;
  }
  .wx-pano-left  { margin-bottom: 14px; }
  .wx-pano-center { align-items: flex-start; margin-bottom: 12px; }
  .wx-pano-right {
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
  }
  .wx-pano-detail { align-items: flex-start; }
  .wx-pano-details { margin-bottom: 8px; }
  .wx-pano-sun { border-top: none; padding-top: 0; }
  .wx-pano-sun-item { align-items: flex-start; }

  /* Strip becomes a vertical list */
  .wx-pano-strip {
    display: flex; flex-direction: column; gap: 6px;
  }
  .wx-pano-strip .wx-day-col {
    display: grid;
    grid-template-columns: 52px 26px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 10px 12px 10px 10px;
    min-height: 52px;
    border-left: 4px solid transparent;
    border-top: none;
  }
  .wx-pano-strip .wx-day-col.wx-verdict-nice     { border-left-color: var(--badge-good-text); }
  .wx-pano-strip .wx-day-col.wx-verdict-marginal { border-left-color: var(--badge-accent-text); }
  .wx-pano-strip .wx-day-col.wx-verdict-bad      { border-left-color: var(--badge-warn-text); }

  .wx-pano-strip .wx-day-bar     { display: none; }
  .wx-pano-strip .wx-day-verdict { display: none; }
  .wx-pano-strip .wx-day-name    { grid-column: 1; grid-row: 1; margin-top: 0; }
  .wx-pano-strip .wx-day-date    { grid-column: 1; grid-row: 2; }
  .wx-pano-strip .wx-day-col > svg { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; }
  .wx-pano-strip .wx-day-cond    { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 11.5px; opacity: 1; }
  .wx-pano-strip .wx-day-feel-lbl { display: none; }
  .wx-pano-strip .wx-day-high   { grid-column: 4; grid-row: 1; text-align: right; font-size: 1.05rem; margin-top: 0; }
  .wx-pano-strip .wx-day-actual { grid-column: 4; grid-row: 2; text-align: right; }
}

/* ── Voice Mode FAB + bottom sheet (voice-mode-04) ──────────────── */
.voice-fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  z-index: 90;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.voice-fab:hover  { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34); }
.voice-fab:active { transform: scale(0.94); }

.voice-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.40);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* The `display: flex` above overrides the [hidden] attribute's display:none,
   so force the closed overlay to stay hidden — otherwise it covers the FAB. */
.voice-sheet-overlay[hidden] { display: none; }
.voice-sheet-overlay.open { opacity: 1; }

.voice-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 40vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.voice-sheet-overlay.open .voice-sheet { transform: translateY(0); }

.voice-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 6px auto 14px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0.4;
}

.voice-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 8px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--color-text);
  font-family: var(--ff-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.voice-option:hover { background: var(--color-border); }

.voice-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
}

.voice-option-label { font-weight: 600; }

.voice-option-coming {
  margin-left: auto;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.voice-option-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.voice-option-disabled:hover { background: none; }

/* Playback states (voice-mode-06). All share a min-height so swapping the sheet
   body between menu / generating / playing / done / error causes no layout shift. */
.voice-sheet-body { min-height: 132px; }

.voice-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 132px;
  padding: 12px 8px;
  text-align: center;
}
.voice-state[hidden] { display: none; }

.voice-state-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.voice-state-done-label { font-weight: 600; }

/* Generating — pulsing accent circle. */
.voice-pulse {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: voice-pulse 1.4s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1);   opacity: 1; }
}

/* Playing — decorative CSS waveform (no Web Audio analyser). */
.voice-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
}
.voice-waveform span {
  display: block;
  width: 5px;
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
  transform-origin: center;
  animation: voice-wave 0.9s ease-in-out infinite;
}
.voice-waveform span:nth-child(1) { animation-delay: 0s; }
.voice-waveform span:nth-child(2) { animation-delay: 0.15s; }
.voice-waveform span:nth-child(3) { animation-delay: 0.3s; }
.voice-waveform span:nth-child(4) { animation-delay: 0.45s; }
.voice-waveform span:nth-child(5) { animation-delay: 0.6s; }
@keyframes voice-wave {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

.voice-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.voice-stop-btn:active { transform: scale(0.94); }

/* Error — warning icon + retry text button. */
.voice-error-icon { color: var(--color-warn); display: flex; }
.voice-retry-btn {
  border: none;
  background: none;
  color: var(--color-accent);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .voice-sheet,
  .voice-sheet-overlay,
  .voice-fab { transition: none; }
  .voice-pulse,
  .voice-waveform span { animation: none; }
  .acd-week-row { animation: none; }
}