@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Lora:wght@400;600&display=swap');

:root {
  --bg:        #f4f7fb;
  --surface:   #ffffff;
  --surface2:  #edf2f8;
  --border:    rgba(42,127,212,0.12);
  --border-md: rgba(42,127,212,0.22);
  --text:      #0f1f35;
  --text2:     #3a5068;
  --text3:     #7a95b0;
  --blue:      #2a7fd4;
  --blue-lt:   #e8f2fc;
  --blue-md:   #b5d4f4;
  --terra:     #c2542a;
  --terra-lt:  #faece7;
  --terra-md:  #f0997b;
  --green:     #3b6d11;
  --green-lt:  #eaf3de;
  --amber:     #ba7517;
  --amber-lt:  #faeeda;
  --red:       #a32d2d;
  --red-lt:    #fcebeb;
  --shadow-sm: 0 1px 4px rgba(42,127,212,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(42,127,212,.12),0 2px 4px rgba(0,0,0,.04);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{background:var(--surface);border-bottom:1px solid var(--border-md);position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(42,127,212,.1)}
.nav-inner{max-width:1200px;margin:0 auto;padding:10px 20px;min-height:56px;height:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nav-brand{font-family:'Lora',serif;font-size:1.1rem;font-weight:600;color:var(--blue);letter-spacing:-.01em;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-user{font-size:.75rem;color:var(--text3);white-space:nowrap}
.nav-logout{font-size:.75rem;color:var(--terra);text-decoration:none;font-weight:600;transition:opacity .15s;white-space:nowrap}
.nav-logout:hover{opacity:.75}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.main{max-width:1200px;margin:0 auto;padding:0 20px 60px}
.page-header{padding:28px 0 20px}
.greeting{font-family:'Lora',serif;font-size:1.55rem;font-weight:600;color:var(--text);line-height:1.25;letter-spacing:-.02em}
.date-line{font-size:.78rem;color:var(--text3);margin-top:4px}

/* ── Progress ─────────────────────────────────────────────────────────────── */
.progress-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text3);margin:18px 0 6px;font-weight:500}
.progress-label{color:var(--blue);font-weight:600}
.progress-track{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;border:1px solid var(--border)}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),#5ba4e8);border-radius:99px;transition:width .5s ease}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);margin-bottom:20px;position:sticky;top:56px;z-index:90;background:var(--bg);padding-top:6px;margin-top:-6px}
.tabs::-webkit-scrollbar{display:none}
/* Admin subtabs (and any other nested .tabs) flow normally — don't try to
   stick or we'd collide with the outer sticky tabs at the same top:56px. */
.tab-content .tabs{position:static;top:auto;z-index:auto;background:transparent;padding-top:0;margin-top:0}

/* ── Sticky retirement stats bar ─────────────────────────────────────────────
   Compact live-updating bar pinned just below the nav+tabs stack (~100px) so
   users see ending-balance/depletion/year-1/lifetime-tax feedback while
   editing inputs. Total height ~52px so it doesn't crowd the form. Disabled
   in print and on narrow screens (<720px) where it'd take too much space. */
#retirementStatsBar{position:sticky;top:100px;z-index:50;background:var(--bg);padding:8px 0 6px;margin-bottom:10px}
#retirementStatsBar.is-stuck{box-shadow:0 6px 14px -8px rgba(15,31,53,.18),0 1px 0 var(--border)}
.stats-bar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow-sm);position:relative}
.stats-bar-cell{display:flex;flex-direction:column;justify-content:center;min-width:0}
.stats-bar-cell + .stats-bar-cell{border-left:1px solid var(--border);padding-left:12px}
.stats-bar-label{font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-bar-value{font-size:.95rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-bar-value.warn{color:var(--terra)}
.stats-bar-value.bad{color:#a32d2d}
.stats-bar-delta{font-size:.7rem;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.stats-bar-delta.up-good{color:#1b6e1b}
.stats-bar-delta.down-good{color:#1b6e1b}
.stats-bar-delta.up-bad{color:#a32d2d}
.stats-bar-delta.down-bad{color:#a32d2d}
.stats-bar-delta.neutral{color:var(--text3)}
.stats-bar-grid > .stats-bar-cell:last-child{padding-right:90px}
.stats-bar-baseline-btn{position:absolute;top:6px;right:8px;background:transparent;border:1px solid var(--border-md);border-radius:99px;padding:2px 9px;font-size:.66rem;font-weight:600;color:var(--text3);cursor:pointer;line-height:1.4;transition:all .15s;font-family:inherit}
.stats-bar-baseline-btn:hover{color:var(--blue);border-color:var(--blue-md);background:var(--surface2)}
.stats-bar-baseline-btn.is-active{color:var(--blue);border-color:var(--blue-md);background:rgba(42,127,212,.06)}
@media print{#retirementStatsBar{position:static !important;box-shadow:none !important}}
@media (max-width:720px){#retirementStatsBar{position:static;box-shadow:none}.stats-bar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-bar-cell + .stats-bar-cell{border-left:0;padding-left:0}.stats-bar-cell:nth-child(odd){border-right:1px solid var(--border);padding-right:12px}}

/* ── Compact numeric inputs ───────────────────────────────────────────────────
   Short numeric inputs (ages, percentages, fixed-decimal amounts) don't need
   to stretch to the full grid-cell width — they look unbalanced and waste
   horizontal space. Apply `form-input-num` to cap an input at a reasonable
   width while letting the surrounding label and help text use the full
   column. Used in strategy accordions (mega backdoor, DAFs, etc) and any
   field that holds a value of <= ~10 characters. */
.form-input-num{max-width:180px}
.form-input-num.form-input-num-wide{max-width:240px}  /* for slightly longer values like dollar amounts */
@media (max-width:720px){.form-input-num,.form-input-num.form-input-num-wide{max-width:none}}

/* ── Segment cards in 2-up grid ───────────────────────────────────────────────
   Used in strategy accordion containers (Roth conv, QCDs, Asset Sales, DAFs)
   so multiple segments render side-by-side at desktop, making it easy to
   visually diff them. The internal `.card` elements set their own bg/border;
   this class only handles the 2-column flow. Falls back to 1-up at narrow
   widths (<840px) where each card needs the full row to be readable. */
.segments-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.segments-grid > .card{margin-bottom:0}  /* override per-card margin since gap handles spacing */
@media (max-width:840px){.segments-grid{grid-template-columns:1fr}}

/* ── Modeling Scenarios grid ──────────────────────────────────────────────────
   Container that holds the 5 strategy cards (Roth conv / QCDs / Asset Sales /
   Mega Backdoor / DAFs) in a 2-up grid. Each strategy card is a `.scenario-
   card` — sibling style to `.card` but with a header bar for the enable
   toggle and a body for the form contents.
   When the strategy has segments inside (Roth/QCD/Sales/DAF), the inner
   segments-grid switches to 1-up since the outer card is now half-width
   already. The 5th card spans full width via `.scenario-card.span-full` so
   the bottom row isn't lopsided. */
.scenarios-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scenarios-grid .scenario-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column}
.scenarios-grid .scenario-card.span-full{grid-column:1 / -1}
.scenarios-grid .scenario-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.scenarios-grid .scenario-card-title{font-weight:600;color:var(--text);font-size:.95rem;flex:1}
.scenarios-grid .scenario-card-summary{font-size:.74rem;color:var(--text3);margin-left:auto}
.scenarios-grid .scenario-card-help{font-size:.72rem;color:var(--text3);margin-bottom:10px;line-height:1.5}
.scenarios-grid .scenario-card-help a{color:var(--blue);text-decoration:none}
.scenarios-grid .scenario-card-help a:hover{text-decoration:underline}
/* When in 2-up mode, force the inner segments-grid to 1-up so segment cards
   stack vertically inside their now-narrower parent scenario card. */
.scenarios-grid .scenario-card .segments-grid{grid-template-columns:1fr}
@media (max-width:840px){
  .scenarios-grid{grid-template-columns:1fr}
  .scenarios-grid .scenario-card.span-full{grid-column:1}
}
.tab{flex-shrink:0;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text2);padding:10px 14px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--blue);border-bottom-color:var(--blue-md)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:700}
.badge{background:var(--terra);color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.tab-content{display:none}.tab-content.active{display:block}
.admin-tab-content{display:none}.admin-tab-content.active{display:block}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.section-title{font-family:'Lora',serif;font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-.01em}
.section-sub{font-size:.78rem;color:var(--text3);margin-bottom:16px;line-height:1.5}
.cat-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-weight:700;color:var(--blue)}
.empty-msg{font-size:.85rem;color:var(--text3);padding:20px 0;text-align:center}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:14px;font-weight:700}

/* ── Check item ───────────────────────────────────────────────────────────── */
.check-item{display:flex;flex-direction:row;align-items:stretch;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:6px;cursor:pointer;transition:border-color .15s,background .15s;box-shadow:var(--shadow-sm);user-select:none;overflow:hidden}
.check-item:hover{border-color:var(--border-md);background:var(--surface2)}
.check-item.done-item{opacity:.9;background:#e8f8ef;border-color:#5aba8a}
/* Inner content wrapper — owns the padding that .check-item used to have.
   Allows the drag-handle to stretch edge-to-edge as a column inside the card. */
.check-item > .item-body{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 14px}
/* Drag handle column — sits inside the card's rounded outline as a left strip
   with subtle gray tint and a thin right border, matching the Cliopanion visual. */
.check-item > .drag-handle{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  color:var(--text3);
  font-size:1.15rem;
  line-height:1;
  width:30px;
  flex-shrink:0;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  background:rgba(0,0,0,.06);
  border-right:1px solid var(--border);
  transition:color .15s,background .15s;
}
.check-item > .drag-handle:hover{ color:var(--blue); background:rgba(0,0,0,.11); }
.check-item > .drag-handle:active{ cursor:grabbing; }
.sortable-ghost{ opacity:.4 }
.sortable-chosen{ cursor:grabbing }
.sortable-drag{ box-shadow:0 4px 14px rgba(0,0,0,.15) }
.checkbox{width:22px;height:22px;min-width:22px;border-radius:6px;border:1.5px solid var(--border-md);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;background:var(--surface)}
.checkbox.checked{background:var(--blue);border-color:var(--blue)}
.check-mark{color:#fff;font-size:.82rem;font-weight:700;line-height:1}
.item-emoji{font-size:1.1rem;flex-shrink:0}
.item-text-wrap{flex:1;min-width:0}
.item-text{font-size:.875rem;font-weight:500;color:var(--text)}
.item-cat{font-size:.7rem;margin-top:1px;color:var(--text3)}
.del-btn{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:1rem;padding:3px 6px;border-radius:6px;transition:all .15s;flex-shrink:0;line-height:1}
.del-btn:hover{color:var(--red);background:var(--red-lt)}

/* ── Add form ─────────────────────────────────────────────────────────────── */
.add-form{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}

/* ── Activity card ────────────────────────────────────────────────────────── */
.activity-card{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);margin-bottom:6px;transition:all .15s;box-shadow:var(--shadow-sm)}
.activity-card:hover{border-color:var(--border-md);transform:translateX(3px)}
.act-emoji{font-size:1.2rem;flex-shrink:0;margin-top:1px}
.act-text{font-size:.875rem;font-weight:500;color:var(--text)}

/* ── Suggestion box ───────────────────────────────────────────────────────── */
.suggestion-box{display:flex;align-items:flex-start;gap:16px;background:var(--terra-lt);border:1px solid var(--terra-md);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px}
.sugg-label{font-size:.68rem;color:var(--terra);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-weight:700}
.sugg-text{font-family:'Lora',serif;font-size:1rem;font-weight:600;color:var(--text)}

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.stat-num{font-family:'Lora',serif;font-size:1.65rem;font-weight:600;line-height:1.1}
.stat-lbl{font-size:.7rem;color:var(--text3);margin-top:4px;font-weight:500}
.teal{color:var(--blue)}.purple{color:#534ab7}.peach{color:var(--terra)}

/* ── History ──────────────────────────────────────────────────────────────── */
.hist-row{display:flex;align-items:center;gap:12px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.hist-date{font-size:.74rem;color:var(--text3);width:100px;flex-shrink:0;font-weight:500}
.hist-track{flex:1;height:5px;background:var(--surface2);border-radius:99px;overflow:hidden}
.hist-fill{height:100%;border-radius:99px;transition:width .4s}
.hist-pct{font-size:.74rem;font-weight:700;width:36px;text-align:right;flex-shrink:0}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:1px solid var(--border-md);border-radius:var(--r-sm);font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.82rem;padding:9px 16px;transition:all .15s;white-space:nowrap;background:var(--surface);color:var(--text)}
.btn:hover{background:var(--surface2);border-color:var(--border-md);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#1e6bbf;border-color:#1e6bbf}
.btn-teal{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-teal:hover{background:#1e6bbf;border-color:#1e6bbf}
.btn-peach{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn-peach:hover{background:#a8441f;border-color:#a8441f}
.btn-ghost{background:var(--surface);color:var(--text2);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface2)}
.btn-dashed{background:transparent;border:1.5px dashed var(--border-md);color:var(--text3);width:100%;margin-top:8px;padding:10px;font-size:.82rem;border-radius:var(--r-md)}
.btn-dashed:hover{background:var(--surface2);color:var(--text2)}
.btn-suggest{background:var(--terra);color:#fff;border-color:var(--terra);width:100%;margin-top:14px;padding:12px 20px;font-size:.88rem;border-radius:var(--r-md)}
.btn-suggest:hover{background:#a8441f;border-color:#a8441f}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:.75rem;color:var(--text2);margin-bottom:5px;font-weight:600}
.form-input{background:var(--surface);border:1px solid var(--border-md);border-radius:var(--r-sm);color:var(--text);padding:9px 13px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.875rem;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.form-input::placeholder{color:var(--text3)}
.form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,127,212,.12)}
select.form-input{width:auto}
textarea.form-input{resize:vertical}

/* ── Info banner ──────────────────────────────────────────────────────────── */
.info-banner{background:var(--blue-lt);border:1px solid var(--blue-md);border-radius:var(--r-md);padding:12px 16px;font-size:.8rem;color:#185fa5;line-height:1.6;margin-bottom:16px}

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.login-box{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 36px;box-shadow:var(--shadow-md)}
.login-logo{font-family:'Lora',serif;font-size:1.6rem;font-weight:600;color:var(--text);margin-bottom:6px}
.login-sub{font-size:.82rem;color:var(--text3);margin-bottom:28px;line-height:1.5}
.msg{border-radius:var(--r-sm);padding:10px 14px;font-size:.82rem;margin-bottom:16px;font-weight:500}
.msg.error{background:var(--red-lt);border:1px solid #f7c1c1;color:var(--red)}
.msg.info{background:var(--blue-lt);border:1px solid var(--blue-md);color:#185fa5}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-md);border-radius:2px}

/* ── Grid utilities ───────────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-2-sm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.grid-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Summary card grid ───────────────────────────────────────────────────── */
.summary-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:center}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .nav-inner{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 20px}
  .nav-right{width:100%;gap:8px;flex-wrap:wrap}
  .nav-brand{font-size:1rem}
  .summary-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-panels{grid-template-columns:1fr}
  .grid-2-sm{grid-template-columns:1fr}
  .check-item{overflow:hidden}
  .check-item a,.check-item div{overflow-wrap:break-word;word-break:break-word}
  a{word-break:break-all}
}
@media(max-width:520px){
  .greeting{font-size:1.3rem}
  .stat-num{font-size:1.3rem}
  .hist-date{width:80px;font-size:.7rem}
  .card{padding:14px 16px}
  .login-box{padding:30px 24px}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .summary-grid{grid-template-columns:1fr 1fr}
}

/* ── Accordion ────────────────────────────────────────────────────────────── */
.accordion-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.accordion-header,.accordion-header-div{width:100%;background:transparent;border:none;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:600;color:var(--text);text-align:left;transition:background .15s;box-sizing:border-box}
.accordion-header:hover,.accordion-card>div.accordion-header:hover{background:var(--surface2)}
.accordion-arrow{font-size:.85rem;color:var(--text3);transition:transform .2s;display:inline-block}
.accordion-card.open .accordion-arrow{transform:rotate(180deg)}
.accordion-body{padding:0 20px 20px;border-top:1px solid var(--border)}

/* ── iOS keyboard bounce fix ─────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
}
html { height: -webkit-fill-available; }

/* ──────────────────────────────────────────────────────────────────────────
   Mobile bottom tabbar (hidden on desktop). Activates at max-width:768px.
   ────────────────────────────────────────────────────────────────────── */
.mobile-tabbar, .mobile-more-overlay { display:none; }

@media(max-width:768px){
  /* Hide the desktop horizontal tab strip on mobile — navigation is the bar */
  .tabs { display:none; }

  /* Reserve space so content doesn't hide behind the fixed bar */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* Fixed bottom navigation bar */
  .mobile-tabbar {
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:90;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 10px rgba(15,31,53,.05);
  }
  .mtab{
    flex:1;
    padding:8px 2px 6px;
    background:none;
    border:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:.68rem;
    font-weight:500;
    color:var(--text3);
    cursor:pointer;
    transition:color .12s;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
  }
  .mtab svg{ width:22px; height:22px; stroke-width:2; }
  .mtab.active{ color:var(--blue); }
  .mtab:active{ background:var(--surface2); }

  /* Slide-up "More" sheet with backdrop */
  .mobile-more-overlay{
    display:block;
    position:fixed; inset:0;
    z-index:100;
  }
  .mobile-more-overlay[hidden]{ display:none; }
  .mobile-more-backdrop{
    position:absolute; inset:0;
    background:rgba(15,31,53,.45);
    animation:mobFadeIn .18s ease-out;
  }
  .mobile-more-sheet{
    position:absolute;
    bottom:0; left:0; right:0;
    background:var(--surface);
    border-radius:18px 18px 0 0;
    padding:12px 12px calc(16px + env(safe-area-inset-bottom));
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 -8px 32px rgba(15,31,53,.2);
    animation:mobSlideUp .22s cubic-bezier(.2,.7,.3,1);
  }
  .mobile-more-handle{
    width:40px; height:4px;
    background:#d4d9e0;
    border-radius:2px;
    margin:4px auto 14px;
  }
  .mobile-more-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 14px;
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
  }
  .mobile-more-item:active{ background:var(--surface2); }
  .mobile-more-item svg{ width:22px; height:22px; flex-shrink:0; color:var(--text3); }
  .mobile-more-item[style*="terra"] svg{ color:var(--terra); }
  .mobile-more-close{
    width:calc(100% - 8px);
    margin:6px 4px 0;
    padding:14px;
    font-size:.95rem;
    font-weight:500;
  }

  @keyframes mobFadeIn { from { opacity:0 } to { opacity:1 } }
  @keyframes mobSlideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }
}

/* ──────────────────────────────────────────────────────────────────────────
   iOS Safari auto-zooms any input with computed font-size < 16px on focus,
   which visually "jumps" the page larger. Bumping inputs to 16px on mobile
   only prevents the zoom while preserving the compact desktop design.
   ────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="month"],
  select,
  textarea {
    font-size:16px;
  }
}

/* ── Spinner ────────────────────────────────────────────────────────────────
   Reusable CSS-only spinner. Use .spinner (default 16px, muted) for inline
   button use; add .spinner-lg for 32px centered use inside cards/panels.
   Color inherits from currentColor so you can re-tint with a wrapping color.
   ─────────────────────────────────────────────────────────────────────── */
.spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spinnerRotate .7s linear infinite;
  vertical-align:-2px;
}
.spinner-lg{
  width:28px;height:28px;
  border-width:3px;
}
@keyframes spinnerRotate{ to{ transform:rotate(360deg) } }

/* ── (Sortable drag-to-reorder: handle/item-body styles now live inline with
       .check-item at the top of the file, matching the Cliopanion pattern) ── */

/* ── Scenario Manager modal ─────────────────────────────────────────────── */
.sm-list{max-height:360px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.sm-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .15s}
.sm-row:last-child{border-bottom:none}
.sm-row:hover{background:var(--surface2)}
.sm-row.active{background:rgba(42,127,212,.06)}
.sm-row-main{flex:1;min-width:0}
.sm-row-name{font-size:.88rem;font-weight:600;color:var(--text)}
.sm-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--blue);background:rgba(42,127,212,.14);padding:1px 6px;border-radius:99px;margin-left:6px;vertical-align:middle}
.sm-row-notes{font-size:.76rem;color:var(--text2);margin-top:2px}
.sm-row-meta{font-size:.72rem;color:var(--text3);margin-top:3px}
.sm-row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}

/* ── Compare Scenarios modal ───────────────────────────────────────────── */
.am-modal:has(.cmp-chart-wrap){max-width:960px;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain}
.cmp-picker{border:1px solid var(--border);border-radius:var(--r-md);max-height:320px;overflow-y:auto;margin-bottom:12px}
.cmp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.cmp-row:last-child{border-bottom:none}
.cmp-row:hover{background:var(--surface2)}
.cmp-row.active{background:rgba(42,127,212,.05)}
.cmp-row input[type=checkbox]{margin:0;flex-shrink:0;width:16px;height:16px;cursor:pointer}
.cmp-row-text{flex:1;min-width:0}
.cmp-row-name{font-size:.88rem;font-weight:600;color:var(--text)}
.cmp-row-notes{font-size:.74rem;color:var(--text3);margin-top:2px}

.cmp-legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font-size:.82rem}
.cmp-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.cmp-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px}

.cmp-chart-wrap{margin-bottom:20px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px}
.cmp-chart-title{font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:8px}
.cmp-chart-wrap canvas{max-height:280px}

.cmp-section-title{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin:18px 0 8px}
.cmp-metrics{width:100%;border-collapse:collapse;font-size:.84rem;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.cmp-metrics th,.cmp-metrics td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.cmp-metrics thead th{background:var(--surface2);font-weight:600;font-size:.78rem;color:var(--text2)}
.cmp-metrics tbody tr:last-child td{border-bottom:none}
.cmp-metrics tbody tr:hover{background:var(--surface2)}
.cmp-metrics td:first-child{font-weight:500;color:var(--text2)}

.cmp-diff{margin-top:4px}
.cmp-diff summary{cursor:pointer;font-size:.82rem;font-weight:500;color:var(--text2);padding:8px 0;user-select:none}
.cmp-diff summary:hover{color:var(--blue)}
.cmp-diff[open] summary{margin-bottom:8px}
.cmp-nodiff{font-size:.82rem;color:var(--text3);font-style:italic;padding:10px 0}

/* ── Compare: AI panel ─────────────────────────────────────────────────── */
.cmp-ai-slot{margin:6px 0 20px}
.cmp-ai-launch{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface2);border:1px dashed var(--border-md);border-radius:var(--r-md);flex-wrap:wrap}
.cmp-ai-hint{font-size:.78rem;color:var(--text3);line-height:1.5;flex:1;min-width:220px}
.cmp-ai-loading{display:flex;align-items:center;gap:12px;padding:24px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);font-size:.86rem;color:var(--text2);justify-content:center}
.cmp-ai-panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px}
.cmp-ai-header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.cmp-ai-summary{font-size:.92rem;line-height:1.55;color:var(--text);margin-bottom:4px;font-weight:500}
.cmp-ai-section-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin:16px 0 8px}
.cmp-ai-winners{display:flex;flex-direction:column;gap:8px}
.cmp-ai-winner{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.cmp-ai-winner-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cmp-ai-dim{font-size:.78rem;color:var(--text3);font-weight:500}
.cmp-ai-sep{color:var(--text3);font-size:.78rem}
.cmp-ai-wins{font-size:.86rem;font-weight:600;color:var(--blue)}
.cmp-ai-reason{font-size:.82rem;line-height:1.5;color:var(--text2)}
.cmp-ai-tradeoffs{display:flex;flex-direction:column;gap:10px}
.cmp-ai-tradeoff{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.cmp-ai-tradeoff-title{font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:4px}
.cmp-ai-tradeoff-body{font-size:.82rem;line-height:1.5;color:var(--text2)}
.cmp-ai-rec{margin-top:14px;padding:12px 14px;background:rgba(42,127,212,.08);border:1px solid rgba(42,127,212,.25);border-radius:var(--r-md)}
.cmp-ai-rec-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.cmp-ai-rec-title{font-size:.92rem;font-weight:600;color:var(--text);margin-bottom:4px}
.cmp-ai-rec-body{font-size:.84rem;line-height:1.55;color:var(--text2)}

/* Compare modal sticky titlebar. The titlebar container wraps both the
   title row (title + close X) and the color legend, so both travel
   together when the modal content scrolls beneath. Negative margins pull
   it flush to the modal's corners. High z-index keeps Chart.js tooltips
   and any other overlay elements from bleeding above it. */
.cmp-titlebar{position:sticky;top:-24px;z-index:100;background:var(--surface);
  margin:-24px -26px 14px -26px;padding:16px 24px 10px 26px;
  border-bottom:1px solid var(--border)}
.cmp-titlebar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cmp-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);font-size:1.2rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;flex-shrink:0;padding:0}
.cmp-close:hover{background:var(--border-md);color:var(--text)}

/* Retirement tab scenario bar: allow controls to wrap onto multiple
   rows when the viewport is too narrow to fit them on one line (mobile).
   Without this, the bar overflows off the right edge of the screen and
   clips the Compare/⚙ buttons. The outer right-side flex already wraps
   via inline style; this makes the scenario-bar itself wrappable too. */
.scenario-bar{flex-wrap:wrap;row-gap:6px}

/* ── Feedback thumbs widget ────────────────────────────────────────────── */
.fb-thumbs{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;font-size:.78rem}
.fb-thumbs-q{color:var(--text3);font-weight:500}
.fb-thumb{background:transparent;border:none;padding:2px 6px;font-size:1.05rem;cursor:pointer;border-radius:6px;transition:background .12s,transform .1s;line-height:1}
.fb-thumb:hover{background:var(--blue-lt)}
.fb-thumb:active{transform:scale(.92)}
.fb-thumbs-followup{gap:8px;padding:6px 10px}
.fb-thumb-input{flex:1;min-width:220px;padding:5px 10px;font-size:.76rem;background:var(--surface);border:1px solid var(--border-md);border-radius:6px;color:var(--text);font-family:inherit}
.fb-thumb-input:focus{outline:none;border-color:var(--blue)}
.fb-thumb-send{padding:4px 12px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:.74rem;font-weight:600;cursor:pointer;font-family:inherit}
.fb-thumb-send:hover{filter:brightness(1.08)}
.fb-thumb-skip{background:transparent;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:2px 6px;line-height:1}
.fb-thumb-skip:hover{color:var(--text2)}
.fb-thumbs-done{background:rgba(59,109,17,.08);border-color:rgba(59,109,17,.25);color:var(--green);font-weight:500}

/* Feedback nav button — subtle, doesn't compete with primary actions */
.nav-feedback-btn{color:var(--text2)}
.nav-feedback-btn:hover{color:var(--blue)}

@media(max-width:640px){
  /* Hide feedback button label on very narrow screens to keep nav tight */
  .nav-feedback-btn{display:none}
  .fb-thumbs{flex-wrap:wrap}
  .fb-thumb-input{min-width:140px}
}