:root{
  --paper:#e7eaee;
  --surface:#f8f9fa;
  --surface-2:#eef1f4;
  --ink:#15202b;
  --ink-2:#4a5763;
  --ink-3:#75828e;
  --rule:#c4ccd4;
  --rule-hard:#9aa6b1;
  --ledger:#1f6f5c;
  --cost:#9c3a2c;
  --warn:#b0721a;
  --focus:#2b5f9e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:19px}
h2{font-size:17px;margin-bottom:2px}
h3{font-size:14px;color:var(--ink-2);margin-bottom:6px}
p{margin:0 0 10px}
.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums}

/* shell */
.shell{display:flex;min-height:100vh}
.shell[hidden]{display:none}
.rail{
  width:212px;flex:0 0 212px;background:var(--ink);color:#c9d2da;
  padding:18px 0 24px;position:sticky;top:0;height:100vh;overflow:auto;
}
.rail .brand{padding:0 18px 16px;border-bottom:1px solid #2c3945;margin-bottom:12px}
.rail .brand h1{color:#f2f5f7;font-size:16px;line-height:1.3}
.rail .brand small{display:block;color:#7d8b98;font-size:11.5px;margin-top:5px;line-height:1.45}
.rail button.nav{
  display:block;width:100%;text-align:left;background:none;border:0;color:#aab6c1;
  padding:8px 18px;font:inherit;font-size:14px;cursor:pointer;border-left:3px solid transparent;
}
.rail button.nav:hover{color:#fff;background:#1d2833}
.rail button.nav[aria-current="true"]{color:#fff;border-left-color:var(--ledger);background:#1d2833}
.rail .railfoot{padding:14px 18px 0;margin-top:14px;border-top:1px solid #2c3945}
.railfoot-toggle{display:none} /* shown only below the 640px breakpoint */
.tab-select{display:none} /* shown only below the 640px breakpoint, replacing .navstrip */
.rail .railfoot button{
  display:block;width:100%;margin-bottom:7px;background:#28343f;border:1px solid #3b4854;
  color:#dbe3ea;padding:7px 9px;border-radius:3px;font:inherit;font-size:12.5px;cursor:pointer
}
.rail .railfoot button:hover{background:#33414e}
.rail .railfoot .note{color:#6f7d8a;font-size:11px;line-height:1.5;margin-top:8px}

main{flex:1;min-width:0;padding:26px 30px 90px;max-width:1180px}
section[hidden]{display:none}
.sechead{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--rule-hard)}
.sechead p{color:var(--ink-2);font-size:13.5px;max-width:70ch;margin:6px 0 0}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:16px 18px;margin-bottom:16px}
.panel > h2{margin-bottom:10px}
.panel .hint{color:var(--ink-3);font-size:12.5px;max-width:74ch;margin:-4px 0 12px}

.grid{display:grid;gap:12px 20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}.shell{display:block}.rail{position:static;width:auto;height:auto}main{padding:18px}}

label.f{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
label.f .q{color:var(--ink-3);cursor:help;border-bottom:1px dotted var(--ink-3)}
input[type=text],input[type=number],input[type=month],select{
  width:100%;padding:6px 8px;border:1px solid var(--rule-hard);border-radius:3px;
  background:#fff;color:var(--ink);font:inherit;font-size:14px
}
input[type=number]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.chk{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);margin-top:20px}
.chk input{width:auto}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--ink-2);padding:5px 8px;border-bottom:1px solid var(--rule-hard);white-space:nowrap}
td{padding:4px 8px;border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr.total td{border-top:1px solid var(--rule-hard);border-bottom:0;font-weight:600;padding-top:7px}
tbody tr.sub td{color:var(--ink-2)}
table.tight td{padding:3px 8px}
td input,td select{padding:4px 6px;font-size:13px}
.rowbtn{background:none;border:1px solid var(--rule-hard);color:var(--ink-2);border-radius:3px;width:24px;height:24px;line-height:1;cursor:pointer;font-size:15px}
.rowbtn:hover{background:var(--surface-2);color:var(--cost)}

button.act{
  background:var(--ink);color:#fff;border:0;border-radius:3px;padding:8px 14px;
  font:inherit;font-size:13.5px;cursor:pointer
}
button.act:hover{background:#243342}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--rule-hard)}
button.ghost:hover{background:var(--surface-2)}

.pos{color:var(--ledger)}
.neg{color:var(--cost)}
.muted{color:var(--ink-3)}

.kpi{display:flex;gap:0;border:1px solid var(--rule-hard);border-radius:4px;overflow:hidden;background:#fff;margin-bottom:16px;flex-wrap:wrap}
.kpi > div{flex:1 1 150px;padding:12px 14px;border-right:1px solid var(--rule)}
.kpi > div:last-child{border-right:0}
.kpi .k{font-size:12px;color:var(--ink-2);margin-bottom:4px}
.kpi .v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:21px;letter-spacing:-.02em}
.kpi .s{font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* marginal rate ladder */
.ladder{margin:10px 0 4px}
.ladder .bar{display:flex;height:26px;border:1px solid var(--rule-hard);border-radius:3px;overflow:hidden;background:#fff}
.ladder .seg{display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;overflow:hidden;white-space:nowrap}
.ladder .marker{position:relative;height:16px;margin-top:2px}
.ladder .marker i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--ink);white-space:nowrap}
.ladder .marker i::before{content:"▲";display:block;text-align:center;font-size:9px;color:var(--ink);line-height:1}
.ladder .cap{font-size:11.5px;color:var(--ink-3);margin-top:16px}

.flag{border-left:3px solid var(--warn);background:#fbf5ea;padding:9px 12px;border-radius:0 3px 3px 0;font-size:13px;margin-bottom:10px;color:#5c4514}
.flag.bad{border-left-color:var(--cost);background:#faeeec;color:#5f251c}
.flag.ok{border-left-color:var(--ledger);background:#ecf4f1;color:#17493c}
.flag b{font-weight:600}

details.work{margin-top:8px;font-size:13px}
details.work summary{cursor:pointer;color:var(--focus);font-size:12.5px;padding:3px 0}
details.work[open] summary{margin-bottom:6px}
details.work .body{background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:10px 12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.cf-neg{background:#faeeec}
.cf-tight{background:#fbf5ea}
.scrollx{overflow-x:auto}
/* table{width:100%} above always sizes a table to exactly its (scrollable)
   container's width — on a narrow screen that container IS the viewport, so
   a wide table's columns get crushed to fit instead of the intended
   behaviour: lay out at a readable width and let .scrollx's overflow-x
   provide the scrollbar. width:max-content restores that — the table sizes
   to its own content, wider than the viewport if it needs to be — while
   min-width:100% keeps it from looking sparse on a desktop-width container
   that has room for it at 100% already. */
.scrollx table{width:max-content;min-width:100%}
.scrollx table td input,.scrollx table td select{width:auto;min-width:6em}
.scrollx table td input[type=text]{min-width:9em}
.legend{font-size:12px;color:var(--ink-3);margin-top:8px}
.legend span{display:inline-block;margin-right:14px}
.legend i{display:inline-block;width:10px;height:10px;border:1px solid var(--rule-hard);vertical-align:-1px;margin-right:4px;font-style:normal}

/* ==========================================================================
   Additions for the encrypted / persistent / installable build.
   Everything above this line is the original tool's stylesheet, unchanged.
   ========================================================================== */

/* ---------- lock screen ---------- */
.lockscreen{
  position:fixed;inset:0;background:var(--paper);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.lockscreen[hidden]{display:none} /* author display:flex above would otherwise beat the UA [hidden] rule */
.lockcard{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--rule);
  border-radius:6px;padding:26px 24px;
}
.lockcard h1{font-size:20px;margin-bottom:4px}
.lockcard .muted{color:var(--ink-3);font-size:13px;margin-bottom:16px}
.lockcard label.f{margin-top:10px}
.lockcard input[type=text],.lockcard input[type=password],.lockcard input[type=tel]{
  font-size:20px;letter-spacing:.08em;text-align:center;padding:12px 10px;
}
.lockcard .pinerror{color:var(--cost);font-size:13px;margin-top:8px;min-height:18px}
.lockcard .row{display:flex;gap:8px;margin-top:14px}
.lockcard .row button{flex:1}
.lockcard .linkbtn{
  background:none;border:0;color:var(--focus);font:inherit;font-size:13px;
  cursor:pointer;padding:6px 0;text-decoration:underline;
}
.lockcard .recovery-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;
  letter-spacing:.06em;background:#fff;border:1px solid var(--rule-hard);border-radius:4px;
  padding:14px;text-align:center;margin:12px 0;word-break:break-all;user-select:all;
}
.lockcard .warn-box{
  border-left:3px solid var(--warn);background:#fbf5ea;color:#5c4514;
  padding:10px 12px;border-radius:0 3px 3px 0;font-size:12.5px;margin:10px 0;
}

/* ---------- storage status box ---------- */
.storagebox{
  background:#1d2833;border:1px solid #2c3945;border-radius:4px;padding:9px 10px;
  margin-bottom:10px;font-size:11.5px;color:#aab6c1;
}
.storagebox-mode{display:flex;align-items:center;gap:6px;font-size:12px;color:#dbe3ea;margin-bottom:4px}
.storagebox .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.storagebox .dot.ok{background:#4caf7d}
.storagebox .dot.warn{background:var(--warn)}
.storagebox .dot.bad{background:var(--cost)}
.storagebox-line{line-height:1.5}
.buildinfo{color:#5b6875;font-size:10.5px;margin-top:10px;line-height:1.5}
.railfoot-sep{border-top:1px solid #2c3945;margin:10px 0}

/* ---------- mobile ---------- */
@media(max-width:390px){
  main{padding:14px}
  h1{font-size:17px}
  .kpi > div{flex:1 1 45%}
}
@media(max-width:640px){
  /* every tap target at least 44px */
  button,.rowbtn,input[type=checkbox],select,
  input[type=text],input[type=number],input[type=month]{min-height:44px}
  .rowbtn{width:36px;height:36px} /* small inline delete buttons: 36px box, but padded tap area via table cell */
  td .rowbtn{min-height:36px}
  button.act,button.ghost,.rail button.nav{min-height:44px}
  .chk{min-height:44px}
  .chk input{width:20px;height:20px}

  .rail{padding:10px 0 0}
  /* The subtitle ("Runs entirely in this file...") is the single biggest
     chunk of dead vertical space above the content on a phone — drop it and
     keep just the title. */
  .rail .brand{padding:0 14px 10px}
  .rail .brand small{display:none}

  /* Eleven full-width, stacked nav buttons pushed the entire app below a
     screen and a half of navigation before any content appeared. A first
     attempt replaced the stack with a horizontally-scrolling strip of
     compact tabs — but with nothing hinting there was more content off the
     right edge, it just looked like "Household" was the only tab, which is
     worse than the original problem. The select below needs no gesture and
     no discovery: tap it, see every tab in the native picker, done. */
  .navstrip{display:none}
  .tab-select{
    display:block;width:calc(100% - 28px);margin:0 14px 10px;
    background:#1d2833;color:#fff;border:1px solid #3b4854;border-radius:4px;
    padding:10px 12px;font:inherit;font-size:14px;min-height:44px;
  }

  /* The storage box + save/lock/etc. buttons are useful but not what a user
     opening the app wants between them and their numbers — collapsed by
     default behind a one-line toggle, rather than the full stack of nine
     buttons and their explanatory notes. main.mjs toggles .rail-open on
     .shell and swaps this button's own text; nothing here needs a sibling
     selector to react to it. */
  .rail .railfoot{display:none;padding:10px 14px 14px;margin-top:0}
  .shell.rail-open .railfoot{display:block}
  .railfoot-toggle{
    display:block;width:100%;text-align:left;background:none;border:0;
    border-top:1px solid #2c3945;color:#aab6c1;font:inherit;font-size:12px;
    padding:10px 14px;cursor:pointer;min-height:44px;
  }

  table.tight td{padding:6px 8px}

  /* cash calendar: stacked card-per-month instead of a 9-column table */
  #cfTable, #cfTable thead, #cfTable tbody, #cfTable tr{display:block;width:100%}
  #cfTable thead{position:absolute;left:-9999px;top:-9999px}
  #cfTable tbody tr{
    border:1px solid var(--rule-hard);border-radius:4px;background:#fff;
    padding:8px 10px;margin-bottom:10px;
  }
  #cfTable tbody tr.cf-neg{background:#faeeec}
  #cfTable tbody tr.cf-tight{background:#fbf5ea}
  #cfTable td{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--rule);padding:5px 0;white-space:normal;
  }
  #cfTable tr td:first-child{border-bottom:1px solid var(--rule-hard);padding-bottom:7px;margin-bottom:2px;font-size:14.5px}
  #cfTable td:last-child{border-bottom:0}
  #cfTable td::before{content:attr(data-label);color:var(--ink-2);font-size:12px;font-weight:400}
  #cfTable td:first-child::before{content:none}
}

/* ---------- print: the recommendation document ---------- */
@media print{
  body *{visibility:hidden}
  #printArea, #printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%;padding:0}
  .rail,.lockscreen,.storagebox{display:none!important}
}
#printArea{display:none}
#printArea.active{display:block;max-width:760px;margin:0 auto;padding:30px;font-size:13px;line-height:1.55}
#printArea h1{font-size:20px;margin-bottom:2px}
#printArea h2{font-size:15px;margin:20px 0 8px;border-bottom:1px solid var(--rule-hard);padding-bottom:4px}
#printArea table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
#printArea th,#printArea td{padding:4px 6px;border-bottom:1px solid var(--rule);text-align:left}
#printArea td.n,#printArea th.n{text-align:right;font-variant-numeric:tabular-nums}
#printArea .meta{color:var(--ink-2);font-size:12px;margin-bottom:16px}
#printArea .close-print{margin-bottom:16px}
@media print{#printArea .close-print{display:none}}