/* §22 — the interface is a lit object in a dark room.
   Content emits, chrome recedes. One warm accent. The season tints, never paints. */
:root {
  --bg: #0A0A0B; --surface-1: #141416; --surface-2: #1E1E21; --surface-3: #2A2A2E;
  --hairline: rgba(255,255,255,0.09);
  --text: #F5F5F7; --text-mute: #9A9AA0; --text-dim: #5E5E63;
  --accent: #DA7756; --accent-press: #C4623F; --accent-glow: rgba(218,119,86,0.14);
  --season: #D6AF3A; --verified: #5E9E7E; --streak-broken: #8A5A4A; --warn: #D6AF3A;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.5; overscroll-behavior: none;
}
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; padding: 0 20px calc(148px + env(safe-area-inset-bottom)); overflow-y: auto; }

/* ── type scale (§22): weight and size carry the hierarchy ── */
.display { font-size: 40px; line-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.title   { font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -0.01em; }
.heading { font-size: 22px; line-height: 28px; font-weight: 600; }
.body-lg { font-size: 18px; line-height: 26px; font-weight: 400; }
.body    { font-size: 16px; line-height: 24px; font-weight: 400; }
.label   { font-size: 13px; line-height: 18px; font-weight: 600; }
.micro   { font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mute { color: var(--text-mute); } .dim { color: var(--text-dim); }
.tab-nums { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--season); }

/* screen header: generous air at the top (§22 spacing s7) */
.screen-head { padding: 48px 0 32px; }
.screen-head .title { margin-top: 6px; }
.screen-head .sub { color: var(--text-mute); font-size: 13px; font-weight: 600; margin-top: 6px; }

/* ── status strip ── */
.status-strip {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; padding-top: env(safe-area-inset-top); flex: none;
}
.status-strip .altitude { color: var(--season); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.sync-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--warn);
  display: inline-block; margin-right: 14px; }
.gear { color: var(--text-dim); background: none; border: none; padding: 8px; cursor: pointer; }

/* ── surfaces: elevation by lightness, never shadows ── */
.card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px; }
.pool {
  /* the lit object: one focused pool of warm light */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(218,119,86,0.10), rgba(218,119,86,0.02) 55%, transparent 75%),
    var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
}

/* ── buttons ── */
.btn-primary {
  display: block; width: 100%; height: 52px; border-radius: 999px; border: none;
  background: linear-gradient(160deg, var(--accent), var(--accent-press)); color: #FFF7F3; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: transform 100ms ease-out, background 100ms ease-out;
  box-shadow: 0 0 44px rgba(218,119,86,0.22);
}
.btn-primary:active { transform: scale(0.97); background: var(--accent-press); }
.btn-secondary {
  display: block; width: 100%; height: 52px; border-radius: 999px;
  background: transparent; border: 1px solid var(--hairline); color: var(--text-mute);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 100ms ease-out;
}
.btn-secondary:active { transform: scale(0.97); }
.btn-text { background: none; border: none; color: var(--text-mute); font-size: 13px;
  font-weight: 600; padding: 14px; cursor: pointer; }

/* ── inputs ── */
input[type=text], input[type=url], input[type=password], input[type=time], textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); color: var(--text); font-size: 16px; padding: 14px;
  font-family: inherit; outline: none;
}
input:focus, textarea:focus { border-color: var(--text-dim); }
textarea { resize: none; }

/* ── tab bar ── */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: calc(68px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(20,20,22,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-around; z-index: 40;
}
.tab { background: none; border: none; color: var(--text-dim); display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer; width: 64px; padding: 8px 0; }
.tab.active { color: var(--season); }
.tab .micro { display: none; }
.tab.active .micro { display: block; }
.tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.tab-log {
  width: 58px; height: 58px; border-radius: 999px; background: var(--accent); border: none;
  display: flex; align-items: center; justify-content: center; margin-top: -20px; cursor: pointer;
  box-shadow: 0 0 0 6px var(--bg), 0 0 32px rgba(218,119,86,0.35);
}
.tab-log svg { width: 26px; height: 26px; stroke: #FFF7F3; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.tab-log.active { background: var(--accent-press); }

/* ── the Log: domain rows are objects being lit, not checkboxes ── */
.domain-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.domain-row {
  display: flex; align-items: center; min-height: 64px; gap: 16px; padding: 10px 16px;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md);
  cursor: pointer; transition: background 300ms ease-out, border-color 300ms ease-out;
}
.domain-row:active { background: var(--surface-2); }
.domain-row .glyph {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); transition: all 300ms ease-out;
}
.domain-row .glyph svg { width: 22px; height: 22px; stroke: var(--text-dim); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease-out; }
.domain-row .name { flex: 1; color: var(--text-mute); font-size: 16px; font-weight: 600;
  transition: color 300ms ease-out; }
.domain-row .sub { color: var(--text-dim); font-size: 12px; font-weight: 400; margin-top: 1px; }
.domain-row .lamp {
  width: 10px; height: 10px; border-radius: 999px; flex: none;
  background: var(--surface-3); transition: all 300ms ease-out;
}
.domain-row.on {
  background: linear-gradient(90deg, var(--accent-glow), var(--surface-1) 70%);
  border-color: rgba(218,119,86,0.35);
}
.domain-row.on .glyph { background: rgba(218,119,86,0.18); }
.domain-row.on .glyph svg { stroke: var(--accent); }
.domain-row.on .name { color: var(--text); }
.domain-row.on .lamp { background: var(--verified); box-shadow: 0 0 12px rgba(94,158,126,0.8); }
.domain-row.readonly { cursor: default; }
.domain-row.readonly:active { background: var(--surface-1); }

/* ── the timer ── */
.timer-idle { margin: 8px 0 0; padding: 28px 20px 24px; text-align: center; }
.timer-idle .coach { color: var(--text-dim); font-size: 12px; margin-top: 14px; }
.timer-running { margin: 8px 0 0; padding: 28px 16px 0; text-align: center; }
.pulse-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent);
  display: inline-block; margin-right: 10px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
.timer-running .display { font-size: 56px; line-height: 60px; margin-top: 10px;
  text-shadow: 0 0 44px rgba(218,119,86,0.35); }
.hold-zone {
  height: 120px; margin: 24px -16px 0; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--text-mute); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; overflow: hidden;
  touch-action: none;
}
.hold-zone .ring { width: 34px; height: 34px; }
.hold-zone .ring circle.track { stroke: var(--surface-3); }
.hold-zone .ring circle.fill { stroke: var(--accent); stroke-dasharray: 88; stroke-dashoffset: 88; }
.hold-zone.holding circle.fill { transition: stroke-dashoffset 800ms linear; stroke-dashoffset: 0; }
.pause-zone { height: 56px; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.session-row { display: flex; justify-content: space-between; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); color: var(--text-mute); font-size: 14px; }
.session-row:last-child { border-bottom: none; }

/* ── step preview: the day's number, emitting ── */
.step-preview { text-align: center; padding: 40px 0 8px; }
.step-preview .n { font-size: 64px; line-height: 64px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  text-shadow: 0 0 56px rgba(218,119,86,0.30); }
.step-preview .cap { color: var(--text-dim); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 8px; }
.step-preview .empty { color: var(--text-mute); font-size: 16px; }
.chip { display: inline-block; background: var(--accent-glow); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; margin-top: 12px; }

/* ── sheets and modals ── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(10,10,11,0.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 50;
  display: flex; align-items: flex-end; }
.sheet-backdrop.center { align-items: center; justify-content: center; padding: 20px; }
.sheet { width: 100%; background: var(--surface-1); border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--hairline);
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  animation: rise 300ms ease-out; }
.sheet.card-modal { border-radius: var(--r-lg); border: 1px solid var(--hairline); animation: none; }
@keyframes rise { from { transform: translateY(40%); opacity: 0.4 } to { transform: none; opacity: 1 } }
.sheet.colloquy { animation-duration: 450ms; }
.toast { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text-mute); font-size: 13px; padding: 11px 20px; border-radius: 999px;
  z-index: 60; white-space: nowrap; }

.empty-line { text-align: center; color: var(--text-mute); padding: 48px 24px; font-size: 16px; line-height: 24px; }

/* ── settings ── */
.settings-group { margin-bottom: 32px; }
.settings-group > .micro { color: var(--text-dim); margin-bottom: 10px; }
.settings-row { padding: 16px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.settings-row:last-child { border-bottom: none; }
.settings-row .note { color: var(--text-dim); font-size: 13px; line-height: 18px; margin-top: 3px; }

/* ── onboarding ── */
.onb { display: flex; flex-direction: column; justify-content: center; flex: 1;
  padding: 0 24px 64px; gap: 18px; min-height: 100dvh;
  background: radial-gradient(90% 50% at 50% 30%, rgba(218,119,86,0.07), transparent 70%), var(--bg); }
.token-box { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 18px; font-family: ui-monospace, monospace; font-size: 15px; word-break: break-all; }

/* ── The Way ── */
.lectio { padding: 40px 0 28px; }
.lectio .scripture { font-size: 19px; line-height: 28px; font-style: italic; }
.lectio .application { color: var(--text-mute); font-size: 15px; line-height: 23px; margin-top: 10px; }
.lectio .citation { color: var(--season); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.map-wrap { margin: 0 -20px; position: relative; }
.map-svg { width: 100%; display: block; }
.next-card { position: sticky; bottom: 8px; margin: 12px 0 0; display: flex; align-items: center; gap: 14px; }
.ring-wrap { width: 40px; height: 40px; flex: none; }
.node-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: #9A9AA0; }
.node-label.current { fill: #F5F5F7; }
.avatar-token { transition: transform 700ms ease-in-out; } /* the signature 700 ms step */

/* ── Ricordanze ── */
.bar-row { padding: 16px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.bar-row:last-child { border-bottom: none; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bar-track { height: 6px; background: var(--surface-3); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width 600ms ease-out; }
.rung { display: flex; justify-content: space-between; padding: 9px 0 9px 14px; color: var(--text-dim); font-size: 14px; }
.rung.held { color: var(--text); }
.nearest { border-color: rgba(218,119,86,0.5); }

/* ── Bottega ── */
.cat-row { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0 6px; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.item-card { flex: none; width: 132px; background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 14px; cursor: pointer; }
.item-card.dimmed { opacity: 0.45; }
.item-card .price { color: var(--text-mute); font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.item-card .owned-mark { color: var(--verified); font-size: 12px; font-weight: 700; margin-top: 6px; }

/* ── Archive ── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.cal-cell { aspect-ratio: 1; border-radius: 8px; background: var(--surface-1);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  color: var(--text-dim); cursor: pointer; font-variant-numeric: tabular-nums; }
.mile-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--hairline); font-size: 14px; }
.mile-row:last-child { border-bottom: none; }

/* ── Colloquy: the one ornamented moment ── */
.colloquy-portrait { width: 96px; height: 96px; border-radius: 999px; border: 1px solid var(--hairline);
  margin: 0 auto 22px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--surface-2); }
.colloquy .scripture { font-size: 19px; line-height: 28px; font-style: italic; text-align: center; }
.colloquy .divider { height: 1px; background: var(--hairline); margin: 22px 48px; }
.colloquy .application { color: var(--text-mute); text-align: center; font-size: 15px; line-height: 23px; }

/* ── Wintering ── */
.ember-line { text-align: center; color: var(--warn); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; padding: 10px 0; }

/* streaks: broken is muted brown, never red, never an alarm */
.streak-broken { color: var(--streak-broken); }

/* ── domain rows: two tap zones — name opens the page, lamp side toggles ── */
.domain-row .zone-open { display: flex; align-items: center; gap: 16px; flex: 1;
  min-width: 0; min-height: 44px; cursor: pointer; }
.domain-row .zone-toggle { display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; width: 30%; min-width: 92px; min-height: 44px; align-self: stretch; cursor: pointer; }
.domain-row.readonly .zone-toggle { cursor: default; }

/* ── v5: the Way floating stack — position line riding above the verse dock,
   both pinned together under the status strip once the hero scrolls away ── */
.way-float { position: fixed; top: calc(44px + env(safe-area-inset-top)); left: 0; right: 0;
  z-index: 30; background: rgba(10,10,11,0.86); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; }
.way-float.visible { opacity: 1; pointer-events: auto; }
.float-pos { min-height: 56px; margin: 8px 20px 0; padding: 10px 14px 12px; }
.float-pos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.float-pos-head .label:first-child { white-space: nowrap; }
.bar-track.thin { height: 3px; margin-top: 8px; }
.float-verse { padding: 8px 20px 12px; cursor: pointer; }
.float-verse .dock-cit { color: var(--season); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; }
.float-verse .dock-verse { color: var(--text); font-size: 14px; line-height: 20px;
  font-style: italic; font-weight: 400; margin-top: 3px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── domain dashboard pages ── */
.strip-back { width: 44px; height: 44px; margin-left: -12px; display: flex; align-items: center;
  justify-content: center; background: none; border: none; color: var(--text-mute); cursor: pointer; }
.dom-medal { width: 72px; height: 72px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; }
.dom-medal svg { width: 36px; height: 36px; stroke: var(--accent); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.week-dots { display: flex; gap: 10px; margin-top: 14px; }
.week-dots span { width: 12px; height: 12px; border-radius: 999px; background: var(--surface-3); }
.week-dots span.on { background: var(--accent); box-shadow: 0 0 10px rgba(218,119,86,0.5); }
.plan-ex { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.plan-ex:last-child { border-bottom: none; }

/* ── the workout logger ── */
.logger-sheet { max-height: 92vh; overflow-y: auto; }
.ex-row { display: flex; align-items: center; gap: 8px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); }
.ex-row:last-child { border-bottom: none; }
.ex-row .ex-name { flex: 1; min-width: 0; }
.ex-row input { width: 60px; padding: 12px 6px; text-align: center;
  font-variant-numeric: tabular-nums; flex: none; }
.ex-done { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; transition: all 200ms ease-out; }
.ex-done.on { background: var(--accent); color: #FFF7F3; border-color: var(--accent);
  box-shadow: 0 0 14px rgba(218,119,86,0.45); }
.ex-done svg { width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* segmented control: exactly three quiet options */
.seg { display: flex; border: 1px solid var(--hairline); border-radius: 999px;
  overflow: hidden; margin-top: 16px; }
.seg button { flex: 1; min-height: 44px; background: none; border: none;
  color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button.sel { background: var(--accent-glow); color: var(--accent); }

/* honor seals: quiet once-forever rows */
.seal-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; }
.seal-row .seal-dot { color: var(--accent); font-size: 15px; }
.seal-row.held .label { color: var(--text-mute); }
.hold-row { min-height: 56px; display: flex; align-items: center; gap: 12px;
  color: var(--text-mute); font-size: 13px; font-weight: 600; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: none; }
.hold-row .ring { width: 28px; height: 28px; flex: none; }
.hold-row .ring circle.track { stroke: var(--surface-3); }
.hold-row .ring circle.fill { stroke: var(--accent); stroke-dasharray: 88; stroke-dashoffset: 88; }
.hold-row.holding circle.fill { transition: stroke-dashoffset 800ms linear; stroke-dashoffset: 0; }

/* ── Ricordanze medallions ── */
.ric-row { display: flex; gap: 14px; align-items: flex-start; }
.ric-medal { position: relative; width: 44px; height: 44px; flex: none; margin-top: 2px; }
.ric-medal .ring-svg { position: absolute; inset: 0; width: 44px; height: 44px; }
.ric-medal .disc { position: absolute; inset: 5px; border-radius: 999px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; }
.ric-medal .disc svg { width: 18px; height: 18px; stroke: var(--text-mute); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Bottega item art ── */
.item-card { width: 148px; }
.item-thumb { width: 60px; height: 60px; margin-bottom: 10px; border-radius: var(--r-sm);
  background: var(--surface-2); overflow: hidden; display: flex; align-items: center;
  justify-content: center; }
.item-thumb.mark svg { stroke: var(--text-mute); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; width: 34px; height: 34px; }

/* ── v4: the Way hero banner ── */
.way-hero { padding: 20px 16px; margin-bottom: 8px; }
.tile-row { display: flex; gap: 10px; }
.tile-row .stat-tile { flex: 1; }
.stat-tile { background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.stat-n { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.way-hero .stat-tile { background: var(--surface-2); }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 4px;
  scrollbar-width: none; }
.tile-scroll::-webkit-scrollbar { display: none; }
.tile-scroll .stat-tile { flex: none; min-width: 108px; }

/* the chart toggle in the status strip */
.chart-toggle { width: 44px; height: 44px; margin-left: 2px; display: flex; align-items: center;
  justify-content: center; background: none; border: none; color: var(--text-dim); cursor: pointer; }
.chart-toggle.on { color: var(--season); }

/* ── v5: the exam board ── */
.exam-card { margin-top: 12px; }
.exam-card.gone { opacity: 0.5; }
.exam-head { display: flex; align-items: flex-start; gap: 14px; }
.exam-days { font-size: 26px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em;
  text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.exam-days.soon { color: var(--season); }
.exam-days .exam-days-cap { display: block; font-size: 10px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* ── v7: exam hour pills, Set-hours row, and the complete state ── */
.exam-pills { display: flex; gap: 8px; margin-top: 14px; }
.exam-pills .pill-btn { flex: 1 1 25%; }
.pill-btn { min-height: 48px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--text-mute); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform 100ms ease-out; }
.pill-btn:active { transform: scale(0.97); }
.pill-btn:disabled { opacity: 0.35; cursor: default; }
.pill-btn:disabled:active { transform: none; }
.exam-set-toggle { display: block; width: 100%; min-height: 48px; padding: 12px;
  color: var(--text-dim); }
.exam-set-row { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
input[type=number].exam-set-in { flex: 1; min-width: 0; min-height: 48px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--text); font-size: 16px; padding: 0 14px; font-family: inherit; outline: none;
  text-align: center; font-variant-numeric: tabular-nums; }
input[type=number].exam-set-in:focus { border-color: var(--text-dim); }
.exam-card.done { border-color: rgba(94,158,126,0.55);
  box-shadow: 0 0 28px rgba(94,158,126,0.16); }
.exam-card.done .exam-days { color: var(--verified); }

/* ── v5: the + category chip's inline input ── */
input[type=text].chip-input { flex: none; width: 148px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; font-size: 13px; }

/* ── v4: TODAY tasks ── */
.task-row { display: flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--hairline); }
.task-row:last-child { border-bottom: none; }
.task-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  min-height: 44px; cursor: pointer; }
.task-check { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--surface-3);
  flex: none; display: flex; align-items: center; justify-content: center; }
.task-check svg { width: 14px; height: 14px; stroke: #0A0A0B; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.task-row.done .task-check { background: var(--verified); border-color: var(--verified); }
.task-text { font-size: 15px; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.task-row.done .task-text { color: var(--text-dim); text-decoration: line-through; }
.task-x { width: 44px; height: 44px; flex: none; display: flex; align-items: center;
  justify-content: center; background: none; border: none; color: var(--text-dim); cursor: pointer; }
.task-add-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.task-add-row input { flex: 1; padding: 11px 14px; }
.task-plus { width: 44px; height: 44px; flex: none; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text-mute);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.task-plus svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; }
.legend-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.legend-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }

/* ── v4: Leonardo day carousel ── */
.day-carousel { display: flex; gap: 12px; overflow-x: auto; margin: 12px -20px 0;
  padding: 2px 20px 6px; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.day-carousel::-webkit-scrollbar { display: none; }
.day-card { flex: none; width: min(86%, 320px); scroll-snap-align: center; }
.car-chev { width: 44px; height: 44px; background: none; border: none; color: var(--text-dim);
  cursor: pointer; }
.ex-remove { width: 32px; height: 32px; flex: none; border-radius: 999px; margin-right: 4px;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text-mute);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.plan-ex { gap: 8px; align-items: center; }
.add-ex { cursor: pointer; min-height: 48px; }

/* ── v4: exercise picker ── */
.picker-sheet { position: fixed; inset: 0; z-index: 55; background: var(--bg);
  display: flex; flex-direction: column; animation: rise 250ms ease-out;
  padding-top: env(safe-area-inset-top); }
.picker-head { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px 4px;
  scrollbar-width: none; flex: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--text-mute);
  font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-btn.sel { background: var(--accent-glow); border-color: rgba(218,119,86,0.5);
  color: var(--accent); }
.picker-list { flex: 1; overflow-y: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
.picker-row { display: flex; align-items: center; gap: 12px; min-height: 56px;
  border-bottom: 1px solid var(--hairline); cursor: pointer; }
.picker-row:last-child { border-bottom: none; }

/* ── v4: the workout logger, full screen ── */
.logger-full { height: 100dvh; max-height: none; border-radius: 0; overflow-y: auto;
  padding-top: calc(24px + env(safe-area-inset-top)); }
.exl-card { display: flex; align-items: stretch; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-md); margin-top: 12px;
  overflow: hidden; }
.exl-main { flex: 1; min-width: 0; padding: 16px; }
.overload { margin-top: 10px; border: 1px solid rgba(201,162,39,0.55); border-radius: var(--r-sm);
  color: var(--season); font-size: 13px; font-weight: 600; padding: 8px 12px;
  display: inline-block; }
.set-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.set-row .set-lab { width: 42px; flex: none; }
.set-in { flex: 1; height: 48px; padding: 0 10px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 16px; width: auto; }
.exl-done { width: 56px; flex: none; border: none; border-left: 1px solid var(--hairline);
  background: var(--surface-1); color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 200ms ease-out; }
.exl-done svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.exl-card.on { border-color: rgba(218,119,86,0.4); }
.exl-card.on .exl-done { background: var(--accent); color: #FFF7F3; }

/* ── v8: the Way hero — streak flame, mini avatar, bank line, the goal ── */
.stat-n.streak-lit { color: var(--season); text-shadow: 0 0 20px rgba(201,162,39,0.4); }
.hero-head { display: flex; align-items: flex-start; gap: 12px; }
.hero-avatar { flex: none; width: 44px; height: 52px; margin: -2px -4px 0 0; padding: 0;
  background: none; border: none; cursor: pointer; display: flex; align-items: flex-end;
  justify-content: center; }
.hero-avatar svg { display: block; filter: drop-shadow(0 0 10px rgba(218,119,86,0.25)); }
.goal-card { margin-top: 10px; padding: 12px 16px; cursor: pointer;
  border-color: rgba(201,162,39,0.35); }
.goal-card .label:first-child { color: var(--season); }

/* ── v8: the Bottega goal star ── */
.item-card { position: relative; }
.goal-star { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  background: none; border: none; color: var(--text-dim); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.goal-star.on { color: var(--season); text-shadow: 0 0 12px rgba(201,162,39,0.5); }

/* ── v8: the Witness ── */
.wit-seg { margin-top: 0; }
.wit-seg button.sel { background: var(--accent-glow); color: var(--accent); }

/* ── PIN pad entry ── */
.pin-dot { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--text-dim);
  transition: all 150ms ease-out; }
.pin-dot.filled { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 14px rgba(218,119,86,0.5); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; max-width: 280px; margin: 8px auto 0; }
.pin-key { height: 68px; border-radius: 999px; background: var(--surface-1);
  border: 1px solid var(--hairline); color: var(--text); font-size: 26px; font-weight: 500;
  cursor: pointer; transition: transform 100ms ease-out, background 100ms ease-out;
  font-variant-numeric: tabular-nums; }
.pin-key:active { transform: scale(0.94); background: var(--surface-2); }


/* ═══════════════════════════════════════════════════════════════════
   PORTED DESIGN SYSTEM — editorial type + game-feel motion (from Olympus.dc)
   Textual headings & Scripture become Cormorant; numbers stay tabular sans.
   ═══════════════════════════════════════════════════════════════════ */
.title, .heading { font-family: var(--serif); letter-spacing: 0; }
.title { font-size: 34px; line-height: 36px; font-weight: 600; }
.heading { font-size: 24px; line-height: 30px; font-weight: 600; }
.screen-head .title { font-weight: 600; }
.lectio .scripture, .colloquy .scripture, .float-verse .dock-verse {
  font-family: var(--serif); font-style: italic; font-weight: 500; }
.lectio .scripture { font-size: 24px; line-height: 32px; }
.colloquy .scripture { font-size: 26px; line-height: 34px; }
.node-label, .node-label.current { font-family: var(--serif); font-weight: 600; font-size: 13px; }
.ric-row .label, .bar-head .label, .day-card .heading, .exam-card .label { font-family: var(--serif); }

@keyframes glowPulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(214,175,58,.35)); }
  50% { filter: drop-shadow(0 0 20px rgba(214,175,58,.7)); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes shimmerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the log FAB breathes; primary buttons carry a warm bloom */
.tab-log { background: linear-gradient(160deg, var(--accent), var(--accent-press));
  animation: breathe 4s ease-in-out infinite; }
.btn-primary { box-shadow: 0 0 46px rgba(218,119,86,.30); }
.tab.active { color: var(--season); }

/* the day's step number emits warm light */
.step-preview .n { background: linear-gradient(180deg, #FFFFFF, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(218,119,86,.42)); }

/* lit lamps, streaks, medallions, verified exams glow */
.domain-row.on .lamp { box-shadow: 0 0 14px rgba(94,158,126,.9); }
.stat-n.streak-lit { text-shadow: 0 0 20px rgba(214,175,58,.45); }
.week-dots span.on { box-shadow: 0 0 10px rgba(218,119,86,.6); }
.exam-card.done { box-shadow: 0 0 30px rgba(94,158,126,.18); }

/* rank-up medallion & Colloquy portrait pulse gold */
.dom-medal { animation: glowPulse 5s ease-in-out infinite; }
.colloquy-portrait { border-color: rgba(214,175,58,.4); animation: glowPulse 6s ease-in-out infinite; }

/* screens rise in softly */
.screen > .screen-head { animation: shimmerIn 400ms ease-out; }

/* the Way avatar token on the map carries the warm bloom */
.hero-avatar svg { filter: drop-shadow(0 0 12px rgba(218,119,86,.5)); }


/* ── the Way: the pinned summit banner (the goal, always in view) ── */
.summit-banner { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  margin: 0 -20px 6px; padding: 12px 20px;
  background: linear-gradient(100deg, rgba(214,175,58,0.14), rgba(20,20,22,0.88) 80%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(214,175,58,0.28); }
.summit-banner .micro { color: var(--season); }
.summit-banner .heading { font-size: 20px; line-height: 1.1; }
.summit-banner { transition: opacity 300ms ease-out; }
.summit-banner.sb-yield { opacity: 0; pointer-events: none; }
.summit-peak { width: 30px; height: 30px; flex: none; color: var(--season);
  animation: glowPulse 5s ease-in-out infinite; }
.summit-peak svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.4; }