/* Outflow model pages: shared chrome and panel styling.
   Loaded by every model page. Overrides the calculators' own styles through #root,
   so each calculator's engine and markup stay as they are. */

/* site header bar */
.of-bar{background:#FFFFFF;border-bottom:1px solid #D3D9E1;font-family:'IBM Plex Sans',system-ui,sans-serif;}
.of-bar-in,.of-rel-in{max-width:1440px;margin:0 auto;padding:0 clamp(1rem,6.6vw,6rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.of-bar-in{justify-content:space-between;min-height:68px;}
.of-crumb{display:flex;align-items:center;gap:0.75rem;font-size:0.9375rem;color:#4A5568;min-width:0;}
.of-crumb a{color:#4A5568;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.of-crumb a:hover{color:#13233A;}
.of-crumb a.of-home{font-family:'Fraunces',Georgia,serif;font-size:1.375rem;font-weight:600;color:#13233A;gap:0.5rem;}
.of-crumb .sep{color:#9AA6B6;}
.of-crumb .cur{color:#13233A;font-weight:600;}
.of-nav{display:flex;gap:1.75rem;font-size:0.9375rem;font-weight:600;}
.of-nav a{color:#13233A;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;border-bottom:1.5px solid transparent;}
.of-nav a:hover{border-bottom-color:#0F5F59;}
.of-rel{background:#FFFFFF;border-top:1px solid #D3D9E1;font-family:'IBM Plex Sans',system-ui,sans-serif;}
.of-rel-in{padding-top:1.375rem;padding-bottom:1.375rem;}
.of-rel .lab{font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#4A5568;margin-right:0.25rem;}
.of-rel a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid #C4CCD7;border-radius:8px;text-decoration:none;color:#13233A;font-size:0.9375rem;transition:border-color .2s ease;}
.of-rel a:hover{border-color:#13233A;}
.of-noscript{max-width:1440px;margin:0 auto;padding:2rem clamp(1rem,6.6vw,6rem);font-family:'IBM Plex Sans',sans-serif;color:#13233A;line-height:1.6;}
.of-noscript h1{font-family:'Fraunces',serif;font-size:2rem;margin:0 0 0.75rem;}
@media (max-width:640px){.of-nav{display:none;}.of-crumb .mid{display:none;}}

/* tokens and page frame */
#root .wrap{
  --ink:#13233A; --muted:#4A5568; --line:#D3D9E1; --faint:#E4E8ED; --accent:#0F5F59;
  --buy:#13233A; --rent:#0F5F59; --capital:#13233A; --financing:#0F5F59;
  --tipbg:#13233A; --track:rgba(19,35,58,0.10);
  --panel:#FFFFFF; --panel-line:#D3D9E1; --seg-track:#E1E6EC;
  max-width:1440px; min-height:0;
  padding:2.75rem clamp(1rem,6.6vw,6rem) 3.5rem;
}
#root .wrap > .brand{display:none;}
#root h1{font-weight:400;font-size:clamp(2.2rem,4.2vw,3.5rem);line-height:1.06;letter-spacing:-0.015em;margin-bottom:1rem;max-width:26ch;}
#root .lede{font-size:1.125rem;line-height:1.6;color:#3A4658;max-width:62ch;margin-bottom:2rem;}

/* result bar: dark, full bleed, stays in view */
#root .resultbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;
  background:var(--ink);color:#FFFFFF;padding:1rem 0;margin-bottom:2rem;
  box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);}
#root .rb-l{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;min-width:0;}
#root .rb-lab{font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#8FD3CB;white-space:nowrap;}
#root .rb-val{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.25rem,2.2vw,1.875rem);line-height:1.2;}
#root .rb-r{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;}
#root .resultbar .toolbar{display:flex;gap:0.625rem;margin:0;flex-wrap:wrap;}
#root .resultbar .toolbar button,#root .resultbar .rb-link{font-family:'IBM Plex Sans',sans-serif;font-size:0.9375rem;font-weight:500;letter-spacing:0;text-transform:none;
  min-height:44px;padding:0 1.125rem;border-radius:8px;border:1px solid #5B6B82;background:transparent;color:#FFFFFF;cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none;transition:background .2s ease,border-color .2s ease;}
#root .resultbar .toolbar button:hover,#root .resultbar .rb-link:hover{border-color:#FFFFFF;background:rgba(255,255,255,0.06);color:#FFFFFF;}
#root .resultbar .toolbar button.ghost{background:#FFFFFF;border-color:#FFFFFF;color:var(--ink);font-weight:600;order:9;}
#root .resultbar .toolbar button.ghost:hover{background:#E4E8ED;color:var(--ink);}
#root .resultbar .flash{color:#8FD3CB;font-size:0.75rem;}
#root .resultbar :focus-visible{outline-color:#8FD3CB;}

/* control band: Simple / Advanced as a segmented switch */
#root .controls{border:none;padding:0;margin-bottom:1.5rem;gap:1rem 1.5rem;}
#root .detail-label{display:none;}
#root .adv-toggle,#root .segmented,#root .mode-select,#root .scen-pick,#root .endchoice-btns{display:flex;gap:4px;padding:4px;background:var(--seg-track);border:none;border-radius:10px;flex-wrap:wrap;margin-left:0;}
#root .adv-toggle button,#root .segmented button,#root .mode-btn,#root .scen-pick button,#root .endchoice-btns button{
  font-family:'IBM Plex Sans',sans-serif;font-size:0.875rem;letter-spacing:0;text-transform:none;font-weight:500;
  flex:1 1 auto;min-height:40px;padding:0 1rem;border:none;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s ease,color .2s ease;}
#root .adv-toggle button:hover,#root .segmented button:hover,#root .mode-btn:hover,#root .scen-pick button:hover,#root .endchoice-btns button:hover{color:var(--ink);}
#root .adv-toggle button.on,#root .segmented button.on,#root .mode-btn.active,#root .scen-pick button.on,#root .endchoice-btns button.on{
  background:#FFFFFF;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(19,35,58,0.12);}
#root .adv-toggle button.adv-on{color:var(--accent);}
#root .controls label,#root .scen-label,#root .hz-control label{font-family:'IBM Plex Sans',sans-serif;font-size:0.875rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;}
#root .scen{border:none;padding:0;margin-bottom:1rem;gap:0.75rem 1rem;}

/* panels */
#root .stage-side,#root .chart-box,#root .verdict,#root .assume,#root .cards .card,#root .grid .card,#root .legend-panel,
#root .panel > .fields,#root .readout,#root .reveal,#root .sig{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;}
#root .chart-box{padding:1.5rem;margin-bottom:1.25rem;}
#root .verdict{padding:1.5rem;margin-bottom:1.25rem;border-left:1px solid var(--panel-line);border-top:4px solid var(--accent);}
#root .verdict.buy,#root .verdict.lose{border-top-color:var(--buy);}
#root .verdict.rent,#root .verdict.win{border-top-color:var(--rent);}
#root .verdict-lead{font-weight:400;font-size:1.375rem;}
#root .hz-control{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:0.875rem 1.5rem;margin-bottom:1.25rem;}

/* two-column stage: inputs left, results right */
#root .stage{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:1.5rem 2rem;align-items:start;margin-bottom:2rem;}
#root .stage-side{padding:1.5rem;position:sticky;top:6.5rem;max-height:calc(100vh - 7.5rem);overflow:auto;}
#root .stage-side .controls{margin-bottom:1.25rem;}
#root .stage-side .adv-toggle{width:100%;}
#root .stage-side .assume{background:none;border:none;border-radius:0;padding:0;margin:0;}
#root .stage-side .assume-grid{grid-template-columns:1fr;gap:1rem;}
#root .stage-main{min-width:0;}
@media (max-width:900px){
  #root .stage{grid-template-columns:1fr;}
  #root .stage-side{position:static;max-height:none;overflow:visible;}
}

/* fields: bordered boxes */
#root .field-label{font-family:'IBM Plex Sans',sans-serif;font-size:0.875rem;letter-spacing:0;color:var(--ink);font-weight:500;}
#root .field-hint{font-family:'JetBrains Mono',monospace;font-size:0.6875rem;}
#root .field-input{background:#FFFFFF;border:1px solid #C4CCD7;border-radius:8px;min-height:44px;padding:0 0.75rem;margin-top:0.25rem;}
#root .field-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,95,89,0.15);}
#root .field-input input{font-size:1rem;padding:0.5rem 0;}
#root .field-input.projected{border-style:dashed;border-color:var(--warn);}
#root .group-head{font-size:0.75rem;letter-spacing:0.08em;border-bottom:1px solid var(--line);color:var(--muted);padding-bottom:0.5rem;margin:1.5rem 0 0.25rem;}
#root .group-head:first-child{margin-top:0;}
#root .fields{gap:0.875rem;}
#root .tip{width:16px;height:16px;font-size:0.625rem;}

/* rent vs. buy path cards and car cards */
#root .cards,#root .grid{gap:1.25rem;}
#root .cards .card,#root .grid .card{padding:1.5rem;}
#root .card-head{border-top:none;padding-top:0;}
#root .cards .card{border-top-width:4px;}
#root .winner-tag{top:-11px;left:1.25rem;right:auto;background:var(--accent);color:#FFFFFF;border-radius:999px;padding:0.2rem 0.6rem;}
#root .grid .card.winner{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
#root .views{border-color:var(--line);}
#root details.tune summary{font-family:'IBM Plex Sans',sans-serif;font-size:0.9375rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--accent);min-height:44px;display:flex;align-items:center;}
#root .add-btn{border-radius:14px;border-color:#B7C0CC;min-height:120px;}

/* car legend */
#root .legend-panel,#root .controls + .legend{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem;}
#root .chart-box .legend{background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 0.5rem;}

/* cost of borrowing worksheet */
#root .panel{border:none;padding:0;gap:1.5rem 2rem;grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:start;}
#root .controls + .panel{border:none;padding-top:0;}
#root .panel > .fields,#root .readout{padding:1.5rem;}
#root .reveal{padding:1.5rem;margin-bottom:1.25rem;}
#root .effbox{border-left:none;background:#FBF1EE;border-radius:8px;padding:0.625rem 0.875rem;}
@media (max-width:760px){#root .panel{grid-template-columns:1fr;}}

/* lump sum scenario matrix */
#root .sig{padding:1.5rem;}
#root .sig-cell{border-top:1px solid var(--line);}

/* notes and footer */
#root .notes{border-top:2px solid var(--ink);margin-top:3rem;}
#root .notes h2{font-weight:400;font-size:1.75rem;}
#root .closer{border-left:none;border-top:2px solid var(--warn);padding:1rem 0 0;font-weight:400;}
#root .footer-mark{border-top:1px solid var(--line);}

@media (max-width:640px){
  #root .wrap{padding-top:1.75rem;}
  #root .resultbar{position:static;}
  #root .stage-side{top:0;}
  #root .rb-r,#root .resultbar .toolbar{width:100%;}
  #root .resultbar .toolbar button,#root .resultbar .rb-link{flex:1 1 auto;justify-content:center;}
}

/* refinements */
#root .stage-side .detail-group{width:100%;}
#root .mode-select{flex-wrap:nowrap;}
#root .mode-btn{padding:0 0.5rem;min-width:0;}
#root .rb-r{margin-left:auto;}

/* roth vs. traditional */
#root .wrap{--trad:#13233A;--roth:#0F5F59;--card:#FFFFFF;--band:rgba(15,95,89,0.10);}
#root .inputs.stage-side{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:1.5rem;gap:0.875rem;}
#root .stage-side > .controls{background:none;border:none;padding:0;margin:0 0 0.25rem;}
#root .seg-toggle{display:flex;gap:4px;padding:4px;background:var(--seg-track);border-radius:10px;}
#root .seg-toggle button{font-family:'IBM Plex Sans',sans-serif;font-size:0.875rem;letter-spacing:0;text-transform:none;font-weight:500;
  flex:1 1 auto;min-height:40px;padding:0 0.75rem;border:none;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;}
#root .seg-toggle button.on{background:#FFFFFF;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(19,35,58,0.12);}
#root .adv-toggle button.on.adv-on{background:#FFFFFF;color:var(--accent);}
#root .rates,#root .tornado,#root .results details.tune{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:1.5rem;}
#root .results .verdict{border-left:1px solid var(--panel-line);}
#root .verdict.trad{border-top-color:var(--trad);} #root .verdict.roth{border-top-color:var(--roth);} #root .verdict.mix{border-top-color:var(--warn);}
#root .results .chart-box{margin-bottom:0;}
#root .results .verdict{margin-bottom:0;}
#root .note-inline{border-radius:8px;}
#root .tor-track{background:var(--faint);border-radius:4px;}
#root .notes h2 + p{margin-top:0;}
/* input panels scroll with the page, so nothing is hidden inside an inner scroll area */
#root .stage-side{position:static;max-height:none;overflow:visible;}

/* static explanation and FAQ, served in the HTML for readers and crawlers */
.of-article{border-top:1px solid #D3D9E1;background:#FFFFFF;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#13233A;}
.of-article-in{max-width:1440px;margin:0 auto;padding:3.5rem clamp(1rem,6.6vw,6rem) 3.5rem;}
.of-article-in > *{max-width:46rem;}
.of-eyebrow{font-family:'JetBrains Mono',monospace;font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;color:#0F5F59;margin:0 0 0.625rem;}
.of-article h2{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.125rem);line-height:1.15;margin:2.5rem 0 1rem;}
.of-article h2:first-of-type{margin-top:0;}
.of-article p{font-size:1.0625rem;line-height:1.7;color:#3A4658;margin:0 0 1rem;}
.of-article .of-answer{font-size:1.1875rem;line-height:1.65;color:#13233A;border-left:3px solid #0F5F59;padding-left:1.25rem;}
.of-article .of-assume{font-family:'JetBrains Mono',monospace;font-size:0.8125rem;color:#4A5568;}
.of-faq{display:flex;flex-direction:column;gap:0;max-width:46rem;}
.of-q{border-top:1px solid #D3D9E1;padding:1.25rem 0 0.25rem;}
.of-q:last-child{border-bottom:1px solid #D3D9E1;}
.of-q h3{font-size:1.0625rem;font-weight:600;margin:0 0 0.5rem;color:#13233A;}
.of-q p{margin-bottom:1rem;}