/* ============================================================
   Budget Peace — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- Tokens ------------------------------------------------- */
:root {
  /* Colors */
  --color-bg:           #F4F6F8;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #EEF1F4;
  --color-border:       #E3E8EE;

  --color-text-primary:   #0F172A;
  --color-text-secondary: #64748B;
  --color-text-inverse:   #FFFFFF;

  --color-accent:       #4A7C59;   /* sage green */
  --color-accent-light: #D6E8DC;
  --color-accent-dark:  #375C42;

  --color-danger:       #DC2626;
  --color-danger-light: #FEE2E2;

  --color-hero:         #0F172A;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-md:  15px;
  --font-size-lg:  18px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-extra:  800;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-nav: 0 8px 40px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.08);

  /* Layout */
  --top-bar-height:   56px;
  --bottom-nav-clearance: 92px;
  --fab-size:         52px;
  --nav-width:        260px;
  --max-content:      760px;

  /* Transitions */
  --transition-fast: 140ms ease;
  --transition-mid:  240ms ease;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-md);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  min-height:       100%;
  line-height:      1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
img  { display: block; max-width: 100%; }

/* --- Top Bar ----------------------------------------------- */
.top-bar {
  position:       fixed;
  top:            0;
  left:           0;
  right:          0;
  height:         var(--top-bar-height);
  background:     rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:  1px solid var(--color-border);
  display:        flex;
  align-items:    center;
  padding:        0 var(--space-4);
  z-index:        100;
}

.top-bar__hamburger {
  width:           40px;
  height:          40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  border-radius:   var(--radius-sm);
  flex-shrink:     0;
  transition:      background var(--transition-fast);
}
.top-bar__hamburger:hover { background: var(--color-surface-alt); }
.top-bar__hamburger span {
  display:      block;
  width:        20px;
  height:       1.5px;
  background:   var(--color-text-primary);
  border-radius: var(--radius-pill);
}

.top-bar__brand {
  display:        none;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
  color:          var(--color-text-primary);
  text-decoration: none;
  white-space:    nowrap;
}
.top-bar__brand span { color: var(--color-accent); }

.top-bar__title {
  flex:           1;
  text-align:     center;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-semi);
  letter-spacing: -0.01em;
}

.top-bar__action {
  width:  40px;
  height: 40px;
  flex-shrink: 0;
}

/* Top bar desktop nav (hidden on mobile) */
.top-bar__nav {
  display:     none;
  align-items: center;
  gap:         2px;
}
.top-bar__nav-item {
  padding:       6px 14px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-text-secondary);
  transition:    background var(--transition-fast), color var(--transition-fast);
  white-space:   nowrap;
}
.top-bar__nav-item:hover {
  background: var(--color-surface-alt);
  color:      var(--color-text-primary);
}
.top-bar__nav-item.is-active {
  background: var(--color-accent);
  color:      var(--color-text-inverse);
}

/* --- Side Nav ---------------------------------------------- */
.nav-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(15,23,42,0.4);
  z-index:        200;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-mid);
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

.side-nav {
  position:   fixed;
  top:        0;
  left:       0;
  bottom:     0;
  width:      var(--nav-width);
  background: var(--color-surface);
  z-index:    300;
  display:    flex;
  flex-direction: column;
  transform:  translateX(-100%);
  transition: transform var(--transition-mid);
  box-shadow: var(--shadow-lg);
}
.side-nav.is-open { transform: translateX(0); }

.side-nav__header {
  padding:       var(--space-8) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.side-nav__logo {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
  color:          var(--color-text-primary);
}
.side-nav__logo span { color: var(--color-accent); }

.side-nav__links { flex: 1; padding: var(--space-3) 0; }

.side-nav__link {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-6);
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
  width:       100%;
  text-align:  left;
  transition:  background var(--transition-fast), color var(--transition-fast);
}
.side-nav__link:hover,
.side-nav__link.is-active {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.side-nav__link .nav-icon { width: 22px; text-align: center; }
.side-nav__footer {
  padding:    var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.side-nav__footer .side-nav__link {
  padding:   10px var(--space-6);
  font-size: 13px;
}

/* --- Bottom Pill Nav --------------------------------------- */
.bottom-nav {
  position:        fixed;
  bottom:          28px;
  left:            50%;
  transform:       translateX(-50%);
  max-width:       calc(100% - 48px);
  background:      rgba(255,255,255,0.92);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius:   var(--radius-pill);
  padding:         6px;
  display:         flex;
  align-items:     center;
  gap:             4px;
  box-shadow:      0 8px 40px rgba(15,23,42,0.22), 0 2px 10px rgba(15,23,42,0.10);
  z-index:         150;
  white-space:     nowrap;
  overflow:        hidden;
  border:          1px solid rgba(255,255,255,0.6);
}

.bottom-nav__item {
  padding:       10px 14px;
  border-radius: var(--radius-pill);
  flex-shrink:   1;
  min-width:     0;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-text-secondary);
  letter-spacing: -0.01em;
  transition:    background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.bottom-nav__item:hover {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.bottom-nav__item:active { transform: scale(0.95); }
.bottom-nav__item.is-active {
  background: var(--color-accent);
  color:      var(--color-text-inverse);
}

/* --- Main Content ------------------------------------------ */
.main-content {
  padding-top:    var(--top-bar-height);
  padding-bottom: var(--bottom-nav-clearance);
  min-height:     100vh;
}

.page {
  max-width: var(--max-content);
  margin:    0 auto;
  padding:   var(--space-5) var(--space-4) var(--space-8);
}

/* --- FAB --------------------------------------------------- */
.fab {
  position:        fixed;
  bottom:          calc(var(--bottom-nav-clearance) + var(--space-4));
  right:           var(--space-5);
  width:           var(--fab-size);
  height:          var(--fab-size);
  border-radius:   var(--radius-pill);
  background:      var(--color-accent);
  color:           var(--color-text-inverse);
  font-size:       26px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-md);
  z-index:         140;
  transition:      transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  padding-bottom:  2px;
}
.fab:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fab:active { transform: scale(0.94); }
.fab.is-hidden { opacity: 0; pointer-events: none; }

/* --- Cards ------------------------------------------------- */
.card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--color-border);
  padding:       var(--space-4);
}
.card--flush { padding: 0; overflow: hidden; }

/* --- Pill List Item ---------------------------------------- */
.pill-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--color-surface);
  border-radius: var(--radius-pill);
  border:        1px solid var(--color-border);
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pill-item:hover {
  border-color: var(--color-accent-light);
  box-shadow:   var(--shadow-sm);
}
.pill-item__label  { flex: 1; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.pill-item__sub    { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pill-item__amount { font-size: var(--font-size-md); font-weight: var(--font-weight-semi); }

/* --- Buttons ----------------------------------------------- */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-5);
  border-radius:   var(--radius-pill);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-semi);
  letter-spacing:  -0.01em;
  transition:      background var(--transition-fast), transform var(--transition-fast);
  white-space:     nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-accent-dark); }

.btn--ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.btn--ghost:hover { background: var(--color-surface-alt); }

.btn--danger { background: var(--color-danger-light); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: white; }

.btn--full { width: 100%; }

/* --- Typography -------------------------------------------- */
.hero-number {
  font-size:      var(--font-size-3xl);
  font-weight:    var(--font-weight-extra);
  color:          var(--color-hero);
  letter-spacing: -0.04em;
  line-height:    1;
}

.hero-label {
  font-size:      var(--font-size-xs);
  color:          var(--color-text-secondary);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section-title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  var(--space-3);
}

/* --- Form Elements ----------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
}

.form-input {
  width:         100%;
  padding:       var(--space-3) var(--space-4);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-md);
  font-family:   inherit;
  color:         var(--color-text-primary);
  background:    var(--color-surface);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-light);
}
.form-input::placeholder { color: var(--color-text-secondary); opacity: 0.5; }

/* Date inputs: contain native control within border radius on mobile */
.form-input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 44px;
  line-height: 1.5;
}
.form-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
.form-input[type="date"]::-webkit-inner-spin-button,
.form-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

.form-select {
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right var(--space-4) center;
  padding-right:      var(--space-8);
}

/* --- Option Cards ------------------------------------------ */
.option-grid { display: grid; gap: var(--space-3); }
.option-grid--2 { grid-template-columns: 1fr 1fr; }
.option-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.option-card {
  padding:       var(--space-5) var(--space-4);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align:    center;
  cursor:        pointer;
  transition:    border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  background:    var(--color-surface);
}
.option-card:hover    { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.option-card.is-selected {
  border-color: var(--color-accent);
  background:   var(--color-accent-light);
}
.option-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semi); }
.option-card__sub   { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* --- Period Navigator -------------------------------------- */
.period-nav {
  display:       flex;
  align-items:   center;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding:       4px;
  margin-bottom: var(--space-4);
  box-shadow:    var(--shadow-sm);
}
.period-nav__arrow {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-pill);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-text-secondary);
  flex-shrink:     0;
  font-size:       16px;
  transition:      background var(--transition-fast), color var(--transition-fast);
}
.period-nav__arrow:not([disabled]):hover {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}
.period-nav__arrow[disabled] { opacity: 0.25; cursor: default; }
.period-nav__label {
  flex:           1;
  text-align:     center;
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semi);
  color:          var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* --- Divider ----------------------------------------------- */
.divider { height: 1px; background: var(--color-border); margin: var(--space-4) 0; }

/* --- Stack ------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--space-2); }
.stack--3 { gap: var(--space-3); }
.period-item + .period-item { margin-top: var(--space-2); }
.stack--4 { gap: var(--space-4); }
.stack--6 { gap: var(--space-6); }

/* --- Utilities --------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }
.text-muted  { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.font-semi   { font-weight: var(--font-weight-semi); }
.font-bold   { font-weight: var(--font-weight-bold); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.hidden { display: none !important; }

/* --- Onboarding -------------------------------------------- */
.ob-wrap {
  max-width: var(--max-content);
  margin:    0 auto;
  padding:   var(--space-8) var(--space-5);
}

.ob-steps {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  margin-bottom:   var(--space-8);
}

.ob-step {
  height:        7px;
  width:         7px;
  border-radius: var(--radius-pill);
  background:    var(--color-border);
  transition:    width var(--transition-mid), background var(--transition-mid);
}
.ob-step.is-done   { background: var(--color-accent-light); width: 22px; }
.ob-step.is-active { background: var(--color-accent);       width: 22px; }

.ob-question {
  margin-bottom: var(--space-6);
}
.ob-question h2 {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin-bottom:  var(--space-2);
}
.ob-question p {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

.ob-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--space-8);
  gap:             var(--space-3);
}
.ob-nav .btn { min-width: 100px; }

.ob-input-money {
  position: relative;
}
.ob-input-money::before {
  content:     '$';
  position:    absolute;
  left:        var(--space-4);
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--color-text-secondary);
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}
.ob-input-money .form-input { padding-left: var(--space-7, 28px); }

/* Bottom nav visibility control */
.bottom-nav.is-hidden { display: none; }

/* --- Speed Dial -------------------------------------------- */
.speed-dial {
  position:       fixed;
  bottom:         calc(var(--bottom-nav-clearance) + var(--fab-size) + var(--space-4));
  right:          var(--space-5);
  z-index:        140;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-3);
  pointer-events: none;
}
.speed-dial.is-open    { pointer-events: auto; }
.speed-dial.is-hidden  { display: none; }

.speed-dial__item {
  display:    flex;
  align-items: center;
  gap:        var(--space-3);
  opacity:    0;
  transform:  translateY(10px) scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
}
.speed-dial.is-open .speed-dial__item              { opacity: 1; transform: translateY(0) scale(1); }
.speed-dial.is-open .speed-dial__item:nth-child(3) { transition-delay: 0ms;   }
.speed-dial.is-open .speed-dial__item:nth-child(2) { transition-delay: 50ms;  }
.speed-dial.is-open .speed-dial__item:nth-child(1) { transition-delay: 100ms; }

.speed-dial__label {
  background:    var(--color-text-primary);
  color:         var(--color-text-inverse);
  padding:       6px 14px;
  border-radius: var(--radius-pill);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  white-space:   nowrap;
  box-shadow:    var(--shadow-sm);
}

.speed-dial__btn {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-pill);
  background:      var(--color-accent);
  color:           white;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-md);
  font-size:       var(--font-size-lg);
  flex-shrink:     0;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
  transition:      background var(--transition-fast);
}
.speed-dial__btn:hover { background: var(--color-accent-dark); }

/* FAB rotation when dial is open */
.fab.dial-open { transform: rotate(45deg); }

/* --- Cents (dimmed decimal portion in money display) -------- */
.cents {
  font-size:   0.65em;
  opacity:     0.45;
  font-weight: inherit;
  letter-spacing: 0;
}

/* --- Card Header (title inside a card) --------------------- */
.card-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  padding-bottom: 0;
  border-bottom: none;
}

/* --- Metric Tiles (monthly snapshot) ----------------------- */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}
.metric-tile {
  background:    var(--color-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
}
.metric-tile__label {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: 4px;
}
.metric-tile__value {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height:    1.2;
}

/* --- Spend Progress Bar ------------------------------------ */
.spend-bar {
  height:        5px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  margin-top:    var(--space-4);
  overflow:      hidden;
}
.spend-bar__fill {
  height:        100%;
  border-radius: var(--radius-pill);
  background:    var(--color-accent);
  transition:    width 400ms ease;
}
.spend-bar__fill.is-over { background: var(--color-danger); }
.spend-bar__label {
  font-size:  10px;
  color:      var(--color-text-secondary);
  text-align: right;
  margin-top: 4px;
}

/* --- Dashboard Sections ------------------------------------ */
.dash-section {
  margin-top: var(--space-4);
}

.dash-remaining {
  font-size:      var(--font-size-2xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.03em;
  margin-top:     4px;
  line-height:    1;
}

.stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-2) 0;
}
.stat-row + .stat-row { border-top: 1px solid var(--color-border); }
.stat-row__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.stat-row__value { font-weight: var(--font-weight-semi); font-size: var(--font-size-sm); }

.breakdown-toggle {
  margin-top:  var(--space-3);
  font-size:   var(--font-size-sm);
  color:       var(--color-accent);
  font-weight: var(--font-weight-semi);
  display:     flex;
  align-items: center;
  gap:         4px;
  transition:  color var(--transition-fast);
}
.breakdown-toggle:hover { color: var(--color-accent-dark); }

.period-breakdown { padding-top: var(--space-1); }

/* --- Recurring / Overview Rows ----------------------------- */
.overview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
}
.overview-row + .overview-row { border-top: 1px solid var(--color-border); }
.overview-row__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-width: 0;
}
.overview-row__freq {
  font-size: 10px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
  opacity: 0.8;
  flex-shrink: 0;
}
.overview-row__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  text-align: right;
  flex-shrink: 0;
}

/* --- Card Summary Rows ------------------------------------- */
.card-summary-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2) 0;
}
.card-summary-row + .card-summary-row { border-top: 1px solid var(--color-border); }
.card-summary-dot        { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.card-summary-row__name  { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.card-summary-row__count { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.card-summary-row__total { font-size: var(--font-size-sm); font-weight: var(--font-weight-semi); }

/* --- Horizon Selector -------------------------------------- */
.horizon-selector {
  display:         flex;
  gap:             4px;
  margin-bottom:   var(--space-5);
}
.horizon-btn {
  padding:         5px 14px;
  border-radius:   var(--radius-pill);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semi);
  color:           var(--color-text-secondary);
  border:          1px solid transparent;
  transition:      all var(--transition-fast);
  letter-spacing:  0.01em;
}
.horizon-btn.is-active {
  background:    var(--color-surface);
  border-color:  var(--color-border);
  color:         var(--color-text-primary);
  box-shadow:    var(--shadow-sm);
}
.horizon-btn:not(.is-active):hover {
  color: var(--color-text-primary);
}

/* --- Projection Tiles -------------------------------------- */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: 0;
}
.proj-tile {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-3);
  box-shadow:    var(--shadow-sm);
}
.proj-tile__label {
  font-size:      10px;
  color:          var(--color-text-secondary);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  var(--space-2);
}
.proj-tile__value {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height:    1.1;
}

/* --- Distribution Bars ------------------------------------- */
.dist-bar-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     7px 0;
}
.dist-bar-row + .dist-bar-row { border-top: 1px solid var(--color-border); }
.dist-bar-row__name {
  width:         110px;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.dist-bar-row__track {
  flex:          1;
  height:        6px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  overflow:      hidden;
}
.dist-bar-row__fill {
  height:        100%;
  background:    var(--color-accent);
  border-radius: var(--radius-pill);
  min-width:     3px;
}
.dist-bar-row__amount {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  text-align:  right;
  width:       64px;
  flex-shrink: 0;
}

/* --- Budget Period List Item ------------------------------- */
.period-item {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-4) var(--space-5);
  cursor:        pointer;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.period-item:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-md);
  transform:    translateY(-1px);
}
.period-item:active { transform: scale(0.99); }

.period-item.is-current {
  border-color: var(--color-accent);
  background:   linear-gradient(135deg, #fff 0%, #f0f9f4 100%);
}

.period-item__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-bottom: var(--space-3);
}

.period-item__dates {
  flex:        1;
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semi);
  letter-spacing: -0.01em;
}

.period-item__badge {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-accent-dark);
  background:     var(--color-accent-light);
  padding:        2px 8px;
  border-radius:  var(--radius-pill);
}

.period-item__rows {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
}

.period-item__row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

.period-item__row-label {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

.period-item__row-value {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
}

.period-item__remaining {
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  margin-top:   var(--space-3);
  padding-top:  var(--space-3);
  border-top:   1px solid var(--color-border);
}

.period-item__remaining-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color:       var(--color-text-secondary);
}

.period-item__remaining-value {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}
.period-item__remaining-value.is-negative { color: var(--color-danger); }

/* --- Bottom Sheet ------------------------------------------ */
.sheet-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(15,23,42,0.45);
  z-index:        400;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-mid);
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position:      fixed;
  top:           50%;
  left:          16px;
  right:         16px;
  bottom:        auto;
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  padding:       var(--space-5) var(--space-5) var(--space-6);
  z-index:       500;
  transform:     translate(0, -48%);
  opacity:       0;
  transition:    transform 220ms ease, opacity 220ms ease;
  max-height:    82vh;
  overflow-y:    auto;
}
.sheet.is-open {
  transform: translate(0, -50%);
  opacity:   1;
}
.sheet__handle { display: none; }

.sheet__handle {
  width:         36px;
  height:        4px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  margin:        var(--space-2) auto var(--space-5);
}

.sheet__title {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-5);
}

/* --- Expense Pill ------------------------------------------ */
.expense-pill {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor:        pointer;
}
.expense-pill:hover { border-color: var(--color-accent-light); box-shadow: var(--shadow-sm); }
.expense-pill.is-expanded { border-color: var(--color-accent); }

.expense-pill__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
}

.expense-pill__name   { flex: 1; font-weight: var(--font-weight-medium); }
.expense-pill__amount { font-weight: var(--font-weight-semi); }
.expense-pill__chevron {
  color:      var(--color-text-secondary);
  font-size:  12px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.expense-pill.is-expanded .expense-pill__chevron { transform: rotate(180deg); }

.expense-pill__details {
  display:       none;
  padding:       var(--space-3) var(--space-4) var(--space-4);
  border-top:    1px solid var(--color-border);
  background:    var(--color-bg);
}
.expense-pill.is-expanded .expense-pill__details { display: block; }

.expense-pill__meta {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            var(--space-2) var(--space-4);
  margin-bottom:  var(--space-4);
}
.expense-pill__meta-item {}
.expense-pill__meta-label {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  font-weight: var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.expense-pill__meta-value {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top:  2px;
}

.expense-pill__actions {
  display: flex;
  gap:     var(--space-2);
}

/* --- Wallet Cards ------------------------------------------ */
.wallet-row {
  display:    flex;
  gap:        var(--space-4);
  overflow-x: auto;
  padding:    var(--space-1) var(--space-1) var(--space-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.wallet-row::-webkit-scrollbar { display: none; }

.wallet-card {
  flex-shrink:   0;
  width:         300px;
  height:        176px;
  border-radius: var(--radius-xl);
  padding:       var(--space-5);
  color:         #fff;
  cursor:        pointer;
  scroll-snap-align: start;
  display:       flex;
  flex-direction: column;
  justify-content: space-between;
  transition:    transform var(--transition-fast), box-shadow var(--transition-fast);
  position:      relative;
  overflow:      hidden;
  user-select:   none;
}
.wallet-card::after {
  content:       '';
  position:      absolute;
  top:           -40px;
  right:         -40px;
  width:         160px;
  height:        160px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.06);
  pointer-events: none;
}
.wallet-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wallet-card:active { transform: scale(0.97); }
.wallet-card.is-selected { box-shadow: 0 0 0 3px #fff, var(--shadow-lg); }

.wallet-card__type {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity:        0.75;
}

.wallet-card__number {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-semi);
  letter-spacing: 0.2em;
  margin-top:     auto;
}

.wallet-card__name {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity:     0.9;
  margin-top:  var(--space-1);
}

.wallet-empty {
  width:         300px;
  height:        176px;
  border-radius: var(--radius-xl);
  border:        2px dashed var(--color-border);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  gap:           var(--space-2);
  color:         var(--color-text-secondary);
  cursor:        pointer;
  flex-shrink:   0;
  transition:    border-color var(--transition-fast), background var(--transition-fast);
}
.wallet-empty:hover {
  border-color: var(--color-accent);
  background:   var(--color-accent-light);
}
.wallet-empty__icon  { font-size: 28px; }
.wallet-empty__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

.card-detail {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-border);
  overflow:      hidden;
  margin-top:    var(--space-4);
}
.card-detail__header {
  padding:       var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  justify-content: space-between;
  align-items:   center;
}
.card-detail__actions {
  display: flex;
  gap:     var(--space-2);
}


/* --- Home Mode Switch -------------------------------------- */
.home-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.home-mode-switch__btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.home-mode-switch__btn.is-active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.home-mode-switch__btn:not(.is-active):hover {
  color: var(--color-text-primary);
}

.home-supporting-copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.45;
}

.health-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.health-horizon-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-health-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.structure-total-row,
.monthly-bills-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-3);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-border);
}
.structure-total-row__label,
.monthly-bills-total__label {
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  font-weight:var(--font-weight-medium);
}
.structure-total-row__value {
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-xl);
  letter-spacing:-0.02em;
}
.monthly-bills-total__value {
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);
}

.period-shortcut-card .metric-grid {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.period-shortcut__top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-4);
}
.period-shortcut__range {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-primary);
}
.period-shortcut__caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.period-shortcut__remaining {
  text-align:right;
}
.period-shortcut__remaining-label {
  font-size:10px;
  color:var(--color-text-secondary);
  margin-bottom:2px;
}
.period-shortcut__remaining-value {
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  letter-spacing:-0.02em;
}
.period-shortcut__action {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semi);
}

/* --- Home: desktop-only elements hidden on mobile ----------- */
.period-detail { display: none; }
.home-welcome { display: none; }

/* --- Bill mini-cards (global base) -------------------------- */
.period-bill-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 6px;
}
.period-bill-card:last-child { margin-bottom: 0; }
.period-bill-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.period-bill-card__amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.period-bill-card__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* --- Pay Period remaining tile ------------------------------ */
.pd-remaining-tile {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}
.pd-remaining-tile--danger {
  background: var(--color-danger-light);
}

/* --- Rail title (hidden on mobile, shown on desktop) -------- */
.rail-title { display: none; }

/* --- Home Dashboard (desktop 3-column) --------------------- */
/* Desktop-only. Mobile renders flat source order unchanged:
   welcome(hidden) → mode-switch → period → notes →
   structure → bills → health.                                 */

@media (min-width: 1200px) {

  /* ---- Grid container ------------------------------------- */
  .home-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8) 0;
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    grid-template-rows: auto auto auto;
    gap: 20px 32px;
    align-items: start;
  }

  /* Hide mobile mode switch */
  .home-page > .home-mode-switch {
    display: none;
  }

  /* ---- Welcome header (desktop only) ---------------------- */
  .home-welcome {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    padding: var(--space-2) 0 var(--space-1);
  }
  .home-welcome__heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .home-welcome__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* ---- Column placement ----------------------------------- */
  /* Row 1 = welcome (full width), rows 2–3 = dashboard grid  */

  /* LEFT rail: health (spans rows 2–3) */
  .home-section-health {
    grid-column: 1;
    grid-row: 2 / 4;
    margin-top: 0;
  }

  /* CENTER workspace: period (row 2) + structure (row 3) */
  .home-section-period {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
  .home-section-structure {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
  }

  /* RIGHT rail: bills (row 2) + notes (row 3) */
  .home-section-bills {
    grid-column: 3;
    grid-row: 2;
    margin-top: 0;
  }
  .home-page > .notes-card {
    grid-column: 3;
    grid-row: 3;
    margin-top: -16px;
    align-self: start;
  }

  /* ========================================================= */
  /* CENTER — dominant workspace                               */
  /* ========================================================= */

  /* Period card — THE hero. Eye lands here first. */
  .period-shortcut-card {
    padding: 28px 32px !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
    border: 1px solid rgba(74,124,89,0.22);
    background: linear-gradient(145deg, #ffffff 0%, #eef8f1 50%, #e4f3e9 100%);
  }
  .period-shortcut-card .card-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
  }
  /* Tier 1 — primary decision number */
  .period-shortcut-card .period-remaining {
    font-size: var(--font-size-2xl) !important;
    line-height: 1.1;
  }
  .period-shortcut-card .period-shortcut__action {
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    margin-top: var(--space-3) !important;
  }

  /* Period detail — desktop-only expanded snapshot */
  .period-detail {
    display: block;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(74,124,89,0.12);
  }
  .period-detail__metrics {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-3);
  }
  .period-detail__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .period-detail__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-medium);
  }
  .period-detail__value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi);
    color: var(--color-text-primary);
  }
  .period-detail__bar-track {
    height: 6px;
    background: rgba(74,124,89,0.10);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .period-detail__bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width var(--transition-mid);
  }
  .period-detail__bar-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  /* Bills-in-period preview */
  .period-bills-preview {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(74,124,89,0.10);
  }
  .period-bills-preview__header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
  }
  .period-bills-preview__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
  }
  .period-bills-preview__name {
    font-weight: var(--font-weight-normal);
  }
  .period-bills-preview__amt {
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .period-bills-preview__more {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  /* Structure card — main analytical workspace */
  .home-card--center {
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.05);
    border-color: rgba(15,23,42,0.08);
  }
  .home-card--center .card-header {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
  }
  .home-card--center .home-supporting-copy {
    margin-bottom: var(--space-4);
  }

  /* Metric tiles — Tier 2 numbers, 3-col layout */
  .home-metric-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
  }
  .home-metric-grid .metric-tile {
    padding: var(--space-3);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
  }
  .home-metric-grid .metric-tile__value {
    font-size: var(--font-size-xl);
    letter-spacing: -0.02em;
  }

  /* ========================================================= */
  /* SIDE RAILS — quiet, supporting, utilitarian               */
  /* ========================================================= */

  .home-card--side {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
    border-color: var(--color-border);
  }
  .rail-title {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: var(--font-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
  }
  .home-card--side .card-header {
    display: none;
  }
  .home-card--side .home-supporting-copy {
    font-size: var(--font-size-xs);
    line-height: 1.4;
  }

  /* ---- Left rail: bills always expanded on desktop -------- */
  #bills-hidden {
    display: block !important;
  }
  .home-section-bills #bills-expand {
    display: none;
  }
  .home-section-bills .overview-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
  }
  .home-section-bills .overview-row + .overview-row {
    border-top: 1px solid var(--color-border);
  }
  .home-section-bills .overview-row__amount {
    font-size: var(--font-size-sm);
  }
  .home-section-bills .monthly-bills-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-size: var(--font-size-sm);
  }

  /* ---- Notes: interactive, clickable on desktop ----------- */
  .home-page > .notes-card {
    padding: 10px 14px !important;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  }
  .home-page > .notes-card .notes-header {
    cursor: pointer;
  }
  .home-page > .notes-card .notes-header:hover {
    color: var(--color-accent);
  }
  .home-page > .notes-card .notes-header:hover .card-header {
    color: var(--color-accent);
  }
  .home-page > .notes-card .card-header {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
  }
  .home-page > .notes-card .notes-header__chevron {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
  }
  .home-page > .notes-card .notes-header:hover .notes-header__chevron {
    color: var(--color-accent);
  }

  /* ---- Right rail: Tier 3 numbers, informational ---------- */
  .home-section-health .home-proj-grid {
    grid-template-columns: 1fr;
  }
  .home-section-health .proj-tile {
    padding: var(--space-1) var(--space-2);
  }
  .home-section-health .proj-grid {
    gap: 6px;
  }
  .home-section-health .health-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }
  .home-section-health .health-horizon-label {
    font-size: var(--font-size-xs);
  }
  .home-section-health .horizon-btn {
    font-size: var(--font-size-xs);
    padding: 3px 8px;
  }
  .home-section-health .proj-tile__value {
    font-size: var(--font-size-md);
  }
  .home-section-health .proj-tile__label {
    font-size: var(--font-size-xs);
  }

  /* ---- Bill mini-cards (desktop overrides) ------------------ */
  .period-bill-card {
    cursor: pointer;
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
  }
  .period-bill-card:hover {
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    background: rgba(74,124,89,0.03);
  }
  .period-bill-card__amount {
    font-size: var(--font-size-md);
  }

  /* ---- Period detail typography bumps (desktop) ------------ */
  .period-detail__value {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
  }
  .period-bills-preview__header {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semi);
  }

  /* ---- Period metric stat-boxes (desktop) ------------------ */
  .period-detail__metric {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .period-detail__label {
    font-size: 11px !important;
    letter-spacing: 0.05em;
  }
  .period-detail__bar-track {
    height: 8px !important;
  }
  .period-detail__bar-fill {
    border-radius: 4px;
  }

  /* ---- Darken desktop typography (slate-600) --------------- */
  .home-page .home-supporting-copy,
  .home-page .text-muted,
  .period-detail__label,
  .period-detail__bar-label,
  .period-bills-preview__header,
  .period-bill-card__note,
  .home-card--side .card-header {
    color: #475569;
  }

  /* ---- Financial Health card — cleaner, still secondary ---- */
  .home-section-health .home-card--side {
    padding: 14px 16px;
  }
  .home-section-health .horizon-btn {
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: all var(--transition-fast);
  }
  .home-section-health .horizon-btn.is-active {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-color: var(--color-accent-light);
    font-weight: var(--font-weight-semi);
  }
  .home-section-health .proj-tile {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .home-section-health .proj-tile__value {
    font-weight: var(--font-weight-semi);
  }
  .home-section-health .proj-tile__label {
    color: #475569;
  }
  .home-section-health .health-horizon-label {
    color: #475569;
  }

  /* ---- Notes clickable on desktop ------------------------- */
  .home-page .notes-item {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }
  .home-page .notes-item:hover {
    background: rgba(74,124,89,0.06);
    box-shadow: 0 1px 4px rgba(15,23,42,0.06);
  }

  /* ---- Pay period: breakdown expanded by default ----------- */
  #period-breakdown {
    display: block !important;
  }
  #breakdown-toggle {
    display: none;
  }
}

/* --- Bill Detail Modal ------------------------------------- */
.bill-detail__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.bill-detail__rows {
  display: flex;
  flex-direction: column;
}
.bill-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.bill-detail__row:last-child {
  border-bottom: none;
}
.bill-detail__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.bill-detail__value {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.bill-detail__placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-sm);
}
.bill-detail__separator {
  height: 0;
  margin: var(--space-2) 0;
  border-top: 1px dashed var(--color-border);
}
.bill-detail__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.bill-detail__delete-btn {
  color: var(--color-danger) !important;
}

/* --- Note Detail Modal ------------------------------------ */
.note-detail__header {
  margin-bottom: var(--space-4);
}
.note-detail__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.note-detail__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.note-detail__text {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-primary);
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 40px;
}
.note-detail__textarea {
  width: 100%;
  min-height: 80px;
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.note-detail__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(74,124,89,0.15);
}
.note-detail__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.note-detail__delete-btn {
  color: var(--color-danger) !important;
}

/* --- Settings page density -------------------------------- */
.settings-page .option-card {
  padding: var(--space-2) var(--space-3);
}
.settings-page .option-card__title {
  font-size: var(--font-size-sm);
}
.settings-page .option-card__sub {
  font-size: var(--font-size-xs);
}
.settings-page .form-group {
  gap: var(--space-1);
}
.settings-page .form-input {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}
.settings-page .ob-input-money .form-input {
  padding-left: var(--space-6, 24px);
}

/* --- Notes ------------------------------------------------ */
.notes-card         { margin: var(--space-4) 0; }
.notes-header       { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.notes-header__chevron { color: var(--text-muted); font-size: var(--font-size-sm); }
.notes-count        { color: var(--text-muted); font-size: var(--font-size-xs); }
.notes-body.is-hidden { display: none; }
.notes-body         { margin-top: var(--space-2); }
.notes-list         { display: flex; flex-direction: column; }
.notes-item         { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-2); font-size: var(--font-size-sm);
                      border-bottom: 1px solid var(--color-border); border-left: 2px solid var(--color-accent); margin-left: 0;
                      border-radius: 2px 0 0 2px; transition: background var(--transition-fast); }
.notes-item:hover   { background: rgba(74,124,89,0.04); }
.notes-item__text   { flex: 1; min-width: 0; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-item__input  { flex: 1; min-width: 0; font-size: var(--font-size-sm); padding: 2px var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; }
.notes-item__edit   { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; font-size: 14px; flex-shrink: 0; }
.notes-item__edit:hover { color: var(--color-accent); }
.notes-item__del    { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; font-size: 14px; flex-shrink: 0; }
.notes-item__del:hover { color: var(--danger); }
.notes-add          { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.notes-add input    { flex: 1; }

/* --- Notes Page ------------------------------------------- */
.notes-page-list    { display: flex; flex-direction: column; }
.notes-page-item    { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-2);
                      border-bottom: 1px solid var(--color-border); border-left: 2px solid var(--color-accent);
                      border-radius: 2px 0 0 2px; transition: background var(--transition-fast); }
.notes-page-item:hover { background: rgba(74,124,89,0.04); }
.notes-page-item__text { flex: 1; min-width: 0; font-size: var(--font-size-sm); line-height: 1.5; word-break: break-word; }
.notes-page-item__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.notes-page-item__textarea { width: 100%; font-size: var(--font-size-sm); line-height: 1.5; resize: vertical; }

/* --- Mobile density overrides ----------------------------- */
@media (max-width: 767px) {
  .sheet .option-card {
    padding: var(--space-3) var(--space-3);
  }
  .sheet .option-card__title {
    font-size: var(--font-size-sm);
  }
  .sheet .option-card__sub {
    font-size: var(--font-size-xs);
  }
}

@media (min-width: 768px) {
  /* Brand visible, centered with title */
  .top-bar__brand {
    display: block;
    margin-right: var(--space-2);
  }

  /* More breathing room in the page */
  .top-bar { padding: 0 var(--space-6); border-bottom-color: var(--color-border); }

  /* FAB: 2 diameters left, 1 diameter up from mobile position */
  .fab {
    right:  calc(var(--space-5) + var(--fab-size) * 2);
    bottom: calc(var(--bottom-nav-clearance) + var(--space-4));
  }

  /* Sheet becomes a centered modal on desktop */
  .sheet {
    left:          50%;
    right:         auto;
    bottom:        auto;
    top:           50%;
    width:         460px;
    max-width:     90vw;
    border-radius: var(--radius-xl);
    padding:       var(--space-5) var(--space-6) var(--space-6);
    transform:     translate(-50%, -48%);
    opacity:       0;
    transition:    transform 220ms ease, opacity 220ms ease;
    max-height:    85vh;
  }
  .sheet.is-open {
    transform: translate(-50%, -50%);
    opacity:   1;
  }
}

@media (max-width: 640px) {
  .metric-grid,
  .proj-grid {
    grid-template-columns: 1fr;
  }

  .health-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-mode-switch {
    width: 100%;
  }

  .home-mode-switch__btn {
    flex: 1;
    text-align: center;
  }
}

/* --- Compare Page ----------------------------------------- */
.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cmp-chip {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cmp-chip:hover { background: var(--color-surface-alt); }
.cmp-chip.is-selected {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.cmp-table {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-row {
  display: grid;
  grid-template-columns: 110px repeat(var(--cmp-cols), minmax(140px, 1fr));
  min-height: 40px;
  align-items: start;
}
.cmp-row--header {
  align-items: center;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.cmp-label {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.cmp-cell {
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  border-left: 1px solid var(--color-border);
}
.cmp-cell--header {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.cmp-cell--bold {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}
.cmp-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--color-border);
}
.cmp-header-badges { display: inline; }
@media (max-width: 767px) {
  .cmp-header-badges { display: none; }
  .cmp-row {
    grid-template-columns: 80px repeat(var(--cmp-cols), minmax(120px, 1fr));
  }
  .cmp-label {
    font-size: var(--font-size-xs);
    padding: 6px 8px;
  }
  .cmp-cell {
    font-size: var(--font-size-xs);
    padding: 6px 8px;
  }
  .cmp-cell--header {
    font-size: var(--font-size-sm);
  }
}
.cmp-mobile-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .cmp-mobile-hint { display: none; }
}
.cmp-top-label {
  font-size: 11px;
  color: var(--color-text-muted, #999);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.cmp-top-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.cmp-top-item:last-child { border-bottom: none; }
.cmp-top-item__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cmp-top-item__value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.cmp-expense-extra.is-hidden { display: none; }
.cmp-expand-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) 0 0;
  font-weight: var(--font-weight-semi);
}
.cmp-expand-btn:hover { text-decoration: underline; }

/* --- Scenario Cards --------------------------------------- */
.sc-card {
  padding: var(--space-3) var(--space-4);
  transition: box-shadow var(--transition-fast);
}
.sc-card--active {
  border: 2px solid var(--color-accent);
}
.sc-card__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.sc-card__badge {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.sc-card__badge--primary {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.sc-card__actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* --- Scenario Selector ------------------------------------ */
.scenario-selector {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: 40px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  z-index: 98;
  overflow-x: auto;
}
.scenario-selector.is-hidden { display: none; }
.scenario-pill {
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.scenario-pill:hover { background: var(--color-surface-alt); }
.scenario-pill.is-active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Shift content when scenario selector is visible */
.scenario-selector:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 40px);
}
/* When both scenario selector AND time travel strip are visible */
.scenario-selector:not(.is-hidden) ~ .time-travel-strip {
  top: calc(var(--top-bar-height) + 40px);
}
.scenario-selector:not(.is-hidden) ~ .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 40px + 36px);
}

/* --- Time Travel Strip ------------------------------------ */
.time-travel-strip {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  height: 36px;
  background: #FEF3C7;
  border-bottom: 1px solid #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  z-index: 99;
  font-size: var(--font-size-sm);
  color: #92400E;
}
.time-travel-strip.is-hidden { display: none; }
.time-travel-strip__label { font-weight: var(--font-weight-medium); }
.time-travel-strip__actions { display: flex; gap: var(--space-2); }
.time-travel-strip__btn {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semi);
  color: #92400E;
  border: 1px solid #F59E0B;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}
.time-travel-strip__btn:hover { background: rgba(255,255,255,0.9); }

/* Shift main content down when strip is visible */
.time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 36px);
}

/* Top bar time travel button (mobile) */
.top-bar__tt-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 18px;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.top-bar__tt-btn:hover { background: var(--color-surface-alt); }

/* Mobile time travel panel — slides down below top bar */
.tt-mobile-panel {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tt-mobile-panel.is-hidden { display: none; }
.tt-mobile-panel__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tt-mobile-panel__input {
  flex: 1;
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  min-width: 0;
}
.tt-mobile-panel__cancel {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  color: var(--color-text-secondary);
  padding: 8px 12px;
  white-space: nowrap;
}

/* Hide mobile panel on desktop */
@media (min-width: 768px) {
  .tt-mobile-panel { display: none !important; }
}

/* Inline time travel control (desktop) — hidden on mobile by default */
.top-bar__tt-inline {
  display: none;
  position: relative;
}
.top-bar__tt-inline-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.top-bar__tt-inline-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

/* Desktop: show inline, hide top-bar action button */
@media (min-width: 768px) {
  .top-bar__tt-inline { display: flex; }
  .top-bar__action    { display: none; }
}

/* ============================================================
   Demo Mode — Onboarding, Coach, Suggestion, Nav Hiding
   ============================================================ */

/* --- Demo Nav Hiding --------------------------------------- */
[data-demo-hidden] { display: none !important; }

/* --- Demo Onboarding Card ---------------------------------- */
.demo-onboarding {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         var(--space-5);
}
.demo-onboarding__card {
  width:      100%;
  max-width:  440px;
  padding:    var(--space-8) var(--space-6);
}
.demo-onboarding__logo {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-6);
}
.demo-onboarding__logo span { color: var(--color-accent); }
.demo-onboarding__title {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin-bottom:  var(--space-2);
}
.demo-onboarding__sub {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Demo Coach Overlay ------------------------------------ */
.demo-coach-spotlight {
  position:      fixed;
  z-index:       1000;
  border-radius: var(--radius-lg);
  box-shadow:    0 0 0 9999px rgba(15, 23, 42, 0.5);
  pointer-events: none;
  opacity:       0;
  transition:    opacity 300ms ease;
}
.demo-coach-spotlight.is-visible { opacity: 1; }

.demo-coach-card {
  position:      fixed;
  z-index:       1001;
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  padding:       var(--space-5);
  box-shadow:    var(--shadow-lg);
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity 300ms ease, transform 300ms ease;
}
.demo-coach-card.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.demo-coach-card--above.is-visible { transform: translateY(0); }
.demo-coach-card--above { transform: translateY(-8px); }

.demo-coach-card__title {
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -0.02em;
  margin-bottom:  var(--space-2);
}
.demo-coach-card__text {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
  line-height: 1.5;
}

.demo-coach-arrow {
  position:  fixed;
  z-index:   1001;
  width:     0;
  height:    0;
  opacity:   0;
  transition: opacity 300ms ease;
}
.demo-coach-arrow.is-visible { opacity: 1; }
.demo-coach-arrow--up {
  border-left:   8px solid transparent;
  border-right:  8px solid transparent;
  border-bottom: 10px solid var(--color-surface);
}
.demo-coach-arrow--down {
  border-left:   8px solid transparent;
  border-right:  8px solid transparent;
  border-top:    10px solid var(--color-surface);
}

/* --- Demo Completion Card ---------------------------------- */
.demo-completion {
  padding:       var(--space-8) var(--space-5);
  margin-bottom: var(--space-5);
}

/* --- Demo Banner ------------------------------------------- */
.demo-banner {
  background:    var(--color-accent-light);
  color:         var(--color-accent-dark);
  text-align:    center;
  padding:       6px var(--space-4);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  letter-spacing: -0.01em;
  z-index:       90;
}

/* Shift content for demo banner — using body class */
body.has-demo-banner .main-content {
  padding-top: calc(var(--top-bar-height) + 32px);
}
body.has-demo-banner .scenario-selector:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 40px);
}
body.has-demo-banner .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 36px);
}
body.has-demo-banner .scenario-selector:not(.is-hidden) ~ .time-travel-strip:not(.is-hidden) ~ .main-content {
  padding-top: calc(var(--top-bar-height) + 32px + 40px + 36px);
}

/* --- Demo Suggestion Strip --------------------------------- */
.demo-suggestion {
  position:      fixed;
  bottom:        calc(var(--bottom-nav-clearance) + var(--space-2));
  left:          50%;
  transform:     translateX(-50%);
  max-width:     calc(100% - 32px);
  width:         440px;
  background:    var(--color-surface);
  border:        1px solid var(--color-accent-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-3) var(--space-4);
  box-shadow:    var(--shadow-md);
  z-index:       140;
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  font-size:     var(--font-size-sm);
  animation:     demo-suggestion-in 400ms ease both;
}
@keyframes demo-suggestion-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.demo-suggestion span { flex: 1; color: var(--color-text-secondary); }
.demo-suggestion__btn {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semi);
  color:         var(--color-accent);
  white-space:   nowrap;
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  transition:    background var(--transition-fast);
}
.demo-suggestion__btn:hover { background: var(--color-accent-light); }
.demo-suggestion__close {
  font-size:     18px;
  color:         var(--color-text-secondary);
  padding:       2px 4px;
  line-height:   1;
  transition:    color var(--transition-fast);
}
.demo-suggestion__close:hover { color: var(--color-text-primary); }

/* ============================================================
   Auth Screen
   ============================================================ */

.auth-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  min-height:      100dvh;
  padding:         var(--space-6);
  background:      var(--color-bg);
}

.auth-card {
  width:           100%;
  max-width:       400px;
  background:      var(--color-surface);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-md);
  padding:         var(--space-8) var(--space-6);
  text-align:      center;
}

.auth-card__brand {
  font-size:       var(--font-size-xl);
  font-weight:     var(--font-weight-bold);
  letter-spacing:  -0.03em;
  color:           var(--color-text-primary);
  margin-bottom:   var(--space-2);
}

.auth-card__brand span {
  color: var(--color-accent);
}

.auth-card__tagline {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-6);
}

.auth-card__divider {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  margin:       var(--space-5) 0;
  color:        var(--color-text-secondary);
  font-size:    var(--font-size-sm);
}

.auth-card__divider::before,
.auth-card__divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

.auth-google-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  width:           100%;
  padding:         var(--space-3) var(--space-4);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  background:      var(--color-surface);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-primary);
  cursor:          pointer;
  transition:      background var(--transition-fast), border-color var(--transition-fast);
}

.auth-google-btn:hover {
  background:   var(--color-surface-alt);
  border-color: var(--color-text-secondary);
}

.auth-google-btn:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

.auth-google-btn svg {
  width:  20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-email-group {
  display:   flex;
  flex-direction: column;
  gap:       var(--space-3);
}

.auth-email-group .form-input {
  text-align: center;
}

.auth-card__footer {
  margin-top: var(--space-6);
  font-size:  var(--font-size-sm);
  color:      var(--color-text-secondary);
}

.auth-card__footer a {
  color:           var(--color-accent);
  text-decoration: none;
  font-weight:     var(--font-weight-medium);
}

.auth-card__footer a:hover {
  text-decoration: underline;
}

.auth-message {
  margin-top:    var(--space-4);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  line-height:   1.4;
}

.auth-message--success {
  background: var(--color-accent-light);
  color:      var(--color-accent-dark);
}

.auth-message--error {
  background: var(--color-danger-light);
  color:      var(--color-danger);
}

/* Loading spinner for auth boot */
.auth-loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  min-height:      100dvh;
  gap:             var(--space-4);
  color:           var(--color-text-secondary);
  font-size:       var(--font-size-sm);
}

.auth-loading__spinner {
  width:          32px;
  height:         32px;
  border:         3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius:  50%;
  animation:      auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}