/* Cash Runway Planner — a flat finance instrument: cool grey panel, square edges, tabular numbers, green for cash, red for deficit. */
:root{
  --ink:#14212b;--ink2:#3b4954;--muted:#5b6872;--line:#d3d9de;--line2:#e8ecef;
  --bg:#f3f5f7;--panel:#fff;--wash:#f7f9fa;
  --green:#0b6e4f;--green-lt:#d6efe5;--red:#b42318;--red-lt:#fdecea;--amber:#a15c07;--amber-lt:#fdf3e1;--slate:#475569;--green-mid:#3c9d7c;
  --focus:#2563eb;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:var(--green)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:30}
.skip:focus{top:10px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(24px,calc((100vw - 1360px)/2));background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand-sub{font-size:13px;color:var(--muted);padding-left:10px;border-left:1px solid var(--line)}
.top nav{display:flex;gap:2px}
.top nav a{color:var(--ink2);text-decoration:none;font-size:15px;padding:10px 12px}
.top nav a:hover{color:var(--ink);background:var(--wash)}

main{max-width:1360px;margin:0 auto;padding:0 24px}
.intro{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;padding:22px 0 16px}
h1{font-size:34px;line-height:1.1;font-weight:750;letter-spacing:-.02em;margin:0}
.intro p{margin:0;font-size:16.5px;color:var(--ink2);max-width:640px}
h2{font-size:19px;font-weight:700;margin:0;letter-spacing:-.005em}
h3{font-size:16px;font-weight:700;margin:0}

/* KPIs */
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;border:1px solid var(--line);background:var(--panel)}
.kpi{padding:16px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi:first-child{border-left:0}
.k-lab{font-size:13px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi strong{font:700 24px/1.2 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi strong.neg{color:var(--red)}.kpi strong.pos{color:var(--green)}
.k-big{font-size:40px!important;line-height:1.05!important}
.k-sub{font-size:14px;color:var(--ink2)}
.track{position:relative;height:8px;background:var(--line2);margin-top:10px}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.track i.warn{background:var(--amber)}.track i.bad{background:var(--red)}
.track b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}

/* work */
.work{display:grid;grid-template-columns:440px minmax(0,1fr);gap:0;border:1px solid var(--line);border-top:0;background:var(--panel);margin-bottom:22px}
.inputs{padding:18px 20px 22px;border-right:1px solid var(--line)}
.in-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sample-pill{font-size:13px;font-weight:650;color:var(--green);background:var(--green-lt);padding:3px 9px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid .wide{grid-column:span 3}
.grid .f:nth-child(5),.grid .f:nth-child(6){grid-column:span 1}
.f{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:650;color:var(--ink2);min-width:0}
.f em{font-style:normal;font-weight:400;color:var(--muted)}
.f input,.f select,.ev select,.ev input{height:42px;border:1px solid #aab4bc;border-radius:0;background:#fff;padding:0 10px;font-size:15.5px;font-weight:400;color:var(--ink);width:100%;min-width:0;font-variant-numeric:tabular-nums}
.f input:focus,.f select:focus,.ev input:focus,.ev select:focus{border-color:var(--ink)}
.suffix{position:relative;display:block}
.suffix input{padding-right:28px}
.suffix i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);pointer-events:none}
[aria-invalid="true"]{border-color:var(--red)!important;background:var(--red-lt)!important}
.err{margin:12px 0 0;color:var(--red);font-weight:650;font-size:14.5px}
.grid{grid-template-columns:1fr 1fr}
.grid .wide{grid-column:1/-1}

.events{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ev-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ev-quick{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:40px;padding:0 10px;border:1px solid #aab4bc;background:#fff;font-size:14px;font-weight:650}
.chip:hover{border-color:var(--ink)}
.ev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ev{border:1px solid var(--line);border-left:4px solid var(--red);padding:8px 8px 10px;background:var(--wash)}
.ev.in{border-left-color:var(--green)}
.ev-r1{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px}
.ev-r15{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.ev-label{font-weight:600!important}
.ev-r2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.ev-f{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:650;color:var(--muted)}
.ev select,.ev input{height:40px;font-size:15px;padding:0 8px}
.ev-del{width:40px;height:40px;border:1px solid transparent;background:none;font-size:20px;color:var(--muted)}
.ev-del:hover{color:var(--red);border-color:#f0b8b4;background:var(--red-lt)}
.ev-empty{margin:4px 0 0;font-size:14px;color:var(--muted)}
.stress{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.stress h3{margin-bottom:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.charts{padding:18px 20px 22px;min-width:0}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--ink2)}
.legend>span{display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:22px;height:0;border-top:3px solid var(--green)}
.legend .l-rev{border-top:2.5px dashed var(--amber)}.legend .l-cost{border-top:2.5px dotted var(--slate)}.legend .l-buf{border-top:1.5px dashed var(--red)}
#chart{display:block;width:100%;height:300px}
@media (max-width:529px){#chart{height:250px}}
#chart .g{stroke:var(--line2)}#chart .zero{stroke:#7b8790;stroke-width:1.2}#chart .buf{stroke:var(--red);stroke-dasharray:6 5;stroke-width:1.2;opacity:.8}
#chart .tick{stroke:#9aa5ad}
#chart .ax{font:12px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
#chart .ln{fill:none;stroke-linejoin:round;stroke-linecap:round}
#chart .base{stroke:var(--green);stroke-width:3.2}#chart .rev{stroke:var(--amber);stroke-width:2.2;stroke-dasharray:7 5}#chart .cost{stroke:var(--slate);stroke-width:2.2;stroke-dasharray:2 4}
#chart .cross{stroke:var(--red);stroke-width:1.2;stroke-dasharray:3 3}#chart .dot{fill:var(--red)}#chart .lbl{font:600 12.5px var(--sans);fill:var(--red)}
.scen{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px;font-variant-numeric:tabular-nums}
.scen th,.scen td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line2)}
.scen thead th{font-size:12.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--ink)}
.scen td.neg,.months td.neg{color:var(--red)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.btn{min-height:44px;padding:0 18px;border:1px solid var(--green);background:var(--green);color:#fff;font-weight:700;font-size:15px}
.btn:hover:not(:disabled){background:#085a40}
.btn.ghost{background:#fff;color:var(--green)}
.btn.ghost:hover:not(:disabled){background:var(--green-lt)}
.btn-text{margin-left:auto;min-height:40px;border:0;background:none;color:var(--muted);text-decoration:underline;font-size:14px}
.status{margin:8px 0 0;font-size:14px;color:var(--ink2)}

/* monthly */
.monthly{background:var(--panel);border:1px solid var(--line);padding:18px 20px 20px;margin-bottom:8px}
.mo-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.mo-head p{margin:0;font-size:14px;color:var(--muted)}
.table-scroll{overflow-x:auto}
.months{border-collapse:collapse;width:100%;min-width:980px;font-size:14.5px;font-variant-numeric:tabular-nums}
.months th,.months td{padding:7px 10px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
.months thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--panel)}
.months th:first-child,.months td.note{text-align:left}
.months td.note{white-space:normal;color:var(--ink2);font-size:13.5px;min-width:180px}
.months td.strong{font-weight:700}
.months td.pos{color:var(--green)}
.months tr.neg-row{background:var(--red-lt)}.months tr.neg-row td.strong{color:var(--red)}
.months tr.warn-row{background:var(--amber-lt)}

/* lower */
.lower{padding:36px 0 56px}
.lower>h2{font-size:26px;margin:0 0 14px;letter-spacing:-.015em}
.method-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.method-grid>div{padding:14px 18px 14px 0;margin-right:18px;border-right:1px solid var(--line)}
.method-grid>div:last-child{border-right:0}
.method-grid h3{margin-bottom:6px}
.method-grid p{margin:0;color:var(--ink2);font-size:15px}
.method-grid code{display:block;font:13px/1.45 var(--mono);background:var(--wash);padding:6px 8px;margin-bottom:6px}
.caveat{margin:16px 0 36px;font-size:14.5px;color:var(--muted);max-width:820px}
.faq{max-width:880px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:15px 34px 15px 0;font-weight:700;font-size:17px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:11px;font-size:24px;line-height:1;color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink2)}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px max(24px,calc((100vw - 1360px)/2));background:var(--panel);border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
.foot b{color:var(--ink)}
.foot nav{margin-left:auto;display:flex;gap:4px}
.foot a{color:var(--ink);padding:10px 8px}

@media (max-width:1100px){.kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line)}.work{grid-template-columns:1fr}.inputs{border-right:0;border-bottom:1px solid var(--line)}.method-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .top{padding:8px 16px}.brand-sub{display:none}
  .top nav a:not([href="/about"]){display:none}
  main{padding:0 12px}
  h1{font-size:28px}
  .intro{padding:16px 4px 12px}
  .intro p{font-size:16px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:12px 14px;border-left:0;border-top:1px solid var(--line)}.kpi:first-child{border-top:0;grid-column:1/-1}
  .kpi:nth-child(3){border-left:1px solid var(--line)}.kpi:nth-child(4){grid-column:1/-1}
  .kpi strong{font-size:clamp(17px,5vw,20px)}.k-big{font-size:34px!important}
  .k-lab{font-size:12px}.k-sub{font-size:13.5px}
  .inputs,.charts,.monthly{padding:14px 12px}
  .ev-r2{grid-template-columns:1fr 1fr}
  .scen{font-size:13.5px}
  .scen th:nth-child(4),.scen td:nth-child(4){display:none}
  .btn-text{margin-left:0}
  .method-grid{grid-template-columns:1fr}
  .method-grid>div{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}
  .foot{padding:18px 16px}.foot nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  @page{size:A4 portrait;margin:12mm}
  html,body{background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top,.skip,.inputs .events .ev-quick,.actions,.status,.lower,.foot,.sample-pill,.ev-del{display:none!important}
  main{max-width:none;padding:0}
  .intro{padding:0 0 6mm}
  h1{font-size:20pt}
  .kpis,.work,.monthly{border-color:#999;break-inside:avoid}
  .work{grid-template-columns:1fr 1.4fr}
  .inputs{border-right:1px solid #999}
  .inputs input,.inputs select{border:0!important;padding:0!important;height:auto!important;background:none!important;font-weight:700;appearance:none;-webkit-appearance:none}
  .suffix i{position:static;transform:none}
  .monthly{break-before:page}
  .table-scroll{overflow:visible}
  .months{min-width:0;font-size:8.5pt}
  .months th,.months td{padding:3px 5px}
  .months thead th{position:static}
}

/* about / privacy */
.doc{max-width:740px;margin:0 auto;padding:40px 24px 60px}
.doc h1{font-size:34px;margin-bottom:14px}
.doc h2{margin:30px 0 8px}
.doc p{color:var(--ink2);font-size:16.5px}
.doc .lead{font-size:18.5px;color:var(--ink)}
.doc .small{font-size:14px;color:var(--muted)}
.doc code{font:15px var(--mono);background:#fff;border:1px solid var(--line);padding:1px 5px}
.doc .back{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--green);color:#fff;text-decoration:none;font-weight:700}
@media (max-width:640px){.doc{padding:28px 16px 44px}.doc h1{font-size:28px}.doc-page .top nav a{display:inline-block!important}}

/* inputs whose label wraps to two lines stay level with their neighbours */
.grid{align-items:end}
.wide-suffix input{padding-right:70px}

/* extending the runway */
.legend .l-cut{border-top:2.5px dashed var(--green-mid)}
#chart .cut{stroke:var(--green-mid);stroke-width:2.2;stroke-dasharray:10 4 2 4}
.scen .cut-row th,.scen .cut-row td{color:var(--green)}
.needs{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--amber);background:var(--wash)}
.needs.ok{border-left-color:var(--green)}
.needs:empty{min-height:72px}
.needs-h{margin:0 0 2px;font-size:13px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.needs-b,.needs-ok{margin:0;font-size:15.5px;color:var(--ink)}
.needs strong{font-variant-numeric:tabular-nums}

/* The page script fills the KPI notes after first paint. Their lines are reserved permanently (not only while
   empty) so the planner below never jumps; notes are at most this long at each width. */
.k-sub{min-height:1.5em}
#breakeven{min-height:4.5em}
@media (max-width:640px){#breakeven{min-height:3em}}
@media (max-width:500px){.kpi:nth-child(2) .k-sub,.kpi:nth-child(3) .k-sub{min-height:3em}}
.legend>span[hidden]{display:none}
@media (min-width:1101px){.charts:has(#scenBody:empty) .scen{height:192px}}
@media (min-width:641px) and (max-width:720px){#runwayNote{min-height:3em}}