:root{
    --ink:#14231D; --ink-2:#46574F; --paper:#F1F4EE; --card:#FFF; --line:#DDE4D9;
    --fern:#2E6B4F; --sage:#9FB8A6; --amber:#D98E32; --clay:#A8452F;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--paper);color:var(--ink);font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 16px;}
  .hidden{display:none !important;}
  h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;margin:0;}

  .top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0 14px;}
  .brand{display:flex;align-items:center;gap:10px;}
  .mark{width:34px;height:34px;flex:none;}
  .name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1;}
  .name span{color:var(--fern);}
  .topR{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .ghost{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--card);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:9px 13px;cursor:pointer;}
  .ghost:hover{border-color:var(--fern);color:var(--fern);}
  .solid{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);border:1px solid var(--ink);color:#fff;border-radius:999px;padding:9px 15px;cursor:pointer;}
  .solid:hover{background:#0B1712;}
  .who{font-size:13px;color:var(--ink-2);}
  /* header identity, doubling as the way into profile settings */
  .whoBtn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:999px;padding:3px 10px 3px 3px;cursor:pointer;font-family:inherit;}
  .whoBtn:hover{border-color:var(--line);}
  .whoAvatar,.acctAvatar{background:var(--sage);color:#14231D;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;flex:none;font-family:'IBM Plex Mono',monospace;}
  .whoAvatar{width:26px;height:26px;border-radius:50%;font-size:10px;letter-spacing:.04em;}
  .acctAvatar{width:72px;height:72px;border-radius:50%;font-size:22px;letter-spacing:.04em;}
  /* Once a picture is set the initials must not show through it. */
  .whoAvatar.hasPic,.acctAvatar.hasPic{background-color:transparent;color:transparent;}
  .acctPic{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
  .acctPicActions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
  .acctPicActions .ghost{padding:6px 12px;}
  .acctPickLabel{display:inline-block;text-align:center;}

  /* account switcher */
  .acctSwitchWrap{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
  .acctSwitchHead{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px;}
  .acctRow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F0F3EE;}
  .acctRowAvatar{width:30px;height:30px;border-radius:50%;background:var(--sage);color:#14231D;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:11px;flex:none;}
  .acctRowMain{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
  .acctRowName{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .acctRowMeta{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .acctUse{padding:5px 12px;flex:none;}
  .acctForget{border:0;background:transparent;color:#8A9891;font-size:17px;line-height:1;cursor:pointer;padding:2px 5px;flex:none;}
  .acctForget:hover{color:var(--clay);}
  .acctAdd{width:100%;margin-top:11px;}
  /* Rendered, so the picker opens and the control is focusable — just not visible. Not
     display:none, which is what stopped the picker appearing at all. */
  .vhidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .vhidden:focus-visible + .acctPickLabel,.acctPickLabel:focus-within{outline:2px solid var(--fern);outline-offset:2px;}

  /* landing */
  .lead{padding:34px 0 10px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
  @media (max-width:900px){.lead{grid-template-columns:1fr;gap:26px;padding-top:20px;}}
  .kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fern);margin:0 0 16px;}
  .display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(38px,5.6vw,60px);line-height:.98;letter-spacing:-.045em;margin:0 0 18px;}
  .display em{font-style:normal;color:var(--fern);}
  .deck{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 24px;max-width:52ch;}
  .ctaRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
  .btnBig{font-family:'Instrument Sans',sans-serif;font-size:16px;font-weight:600;border:0;border-radius:12px;padding:14px 24px;cursor:pointer;min-height:50px;}
  .btnBig.primary{background:var(--fern);color:#fff;}
  .btnBig.primary:hover{background:#245641;}
  .btnBig.quiet{background:transparent;color:var(--ink);border:1px solid var(--line);}
  .btnBig.quiet:hover{border-color:var(--fern);color:var(--fern);}
  .microNote{font-size:12.5px;color:var(--ink-2);margin:14px 0 0;}
  .preview{background:var(--ink);border-radius:20px;padding:22px;color:#fff;}
  .pvEyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:0 0 8px;}
  .pvBig{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(34px,7vw,46px);line-height:.9;letter-spacing:-.045em;margin:0 0 4px;color:var(--amber);font-variant-numeric:tabular-nums;}
  .pvSub{font-size:12.5px;color:#B9C9BE;margin:0 0 20px;}
  .pvStack{display:flex;height:26px;border-radius:7px;overflow:hidden;margin-bottom:12px;}
  .pvSeg{height:100%;}
  .pvLeg{display:flex;flex-wrap:wrap;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#B9C9BE;}
  .pvLeg span{display:flex;align-items:center;gap:5px;}
  .pvDot{width:8px;height:8px;border-radius:2px;}
  .pvRows{margin-top:18px;border-top:1px solid rgba(255,255,255,.14);}
  .pvRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  .pvName{flex:1;font-size:13px;}
  .pvAmt{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-variant-numeric:tabular-nums;}
  .pvDelta{font-family:'IBM Plex Mono',monospace;font-size:10px;width:66px;text-align:right;}
  .band{padding:52px 0 10px;}
  .bandTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.035em;margin:0 0 8px;}
  .bandDeck{font-size:15.5px;color:var(--ink-2);margin:0 0 26px;max-width:60ch;}
  .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media (max-width:980px){.feats{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.feats{grid-template-columns:1fr;}}
  .feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;}
  .featIcon{width:34px;height:34px;margin-bottom:14px;}
  .featTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.02em;margin:0 0 7px;}
  .featBody{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  @media (max-width:760px){.steps{grid-template-columns:1fr;}}
  .step{border-top:2px solid var(--fern);padding-top:14px;}
  .stepNum{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--fern);margin:0 0 8px;}
  .stepTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;margin:0 0 6px;}
  .stepBody{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;}
  .plain{background:var(--ink);color:#fff;border-radius:20px;padding:30px 26px;}
  .plainTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-.03em;margin:0 0 18px;}
  .plainList{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 26px;margin:0;padding:0;list-style:none;}
  @media (max-width:760px){.plainList{grid-template-columns:1fr;}}
  .plainList li{font-size:14.5px;line-height:1.55;color:#C6D4C9;padding-left:20px;position:relative;}
  .plainList li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:var(--amber);}
  .plainList strong{color:#fff;font-weight:600;}
  .price{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 22px;max-width:460px;}
  .priceTag{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;letter-spacing:-.04em;margin:0 0 4px;}
  .priceSub{font-size:14px;color:var(--ink-2);margin:0 0 18px;}
  .priceList{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px;}
  .priceList li{font-size:14.5px;padding-left:20px;position:relative;color:var(--ink-2);}
  .priceList li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--fern);}
  footer{padding:56px 0 40px;color:var(--ink-2);font-size:12.5px;line-height:1.6;}
  footer .fbrand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;color:var(--ink);margin-bottom:8px;}

  /* auth */
  .overlay{position:fixed;inset:0;background:rgba(20,35,29,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;overflow-y:auto;}
  .modal{background:var(--card);border-radius:20px;padding:26px 24px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(20,35,29,.28);margin:auto;}
  .modalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
  .modalTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.03em;margin:0 0 5px;}
  .modalSub{font-size:13.5px;color:var(--ink-2);margin:0;}
  .xbtn{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer;padding:0 2px;}
  .xbtn:hover{color:var(--clay);}
  .tabs{display:flex;background:var(--paper);border-radius:999px;padding:3px;margin-bottom:20px;}
  .tabs button{flex:1;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:0;background:transparent;color:var(--ink-2);padding:9px;border-radius:999px;cursor:pointer;}
  .tabs button.on{background:var(--ink);color:#fff;}
  .field{margin-bottom:13px;}
  .fieldNote{font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:6px 0 0;}
  .field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;}
  .field input{width:100%;font-family:'Instrument Sans',sans-serif;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;background:#FAFBF9;min-height:46px;}
  .field input:focus{outline:2px solid var(--fern);outline-offset:1px;}
  .field input.bad{border-color:var(--clay);background:#FDF4F2;}
  .err{font-size:12px;color:var(--clay);margin:5px 0 0;min-height:15px;}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .submit{width:100%;font-family:'Instrument Sans',sans-serif;font-size:16px;font-weight:600;background:var(--fern);color:#fff;border:0;border-radius:11px;padding:14px;cursor:pointer;min-height:50px;margin-top:6px;}
  .submit:hover{background:#245641;}
  .modalFoot{font-size:12px;color:var(--ink-2);margin:16px 0 0;line-height:1.5;text-align:center;}
  .modalFoot button{border:0;background:none;color:var(--fern);font:inherit;cursor:pointer;padding:0;text-decoration:underline;}
  .demoNote{margin-top:16px;padding:11px 13px;border-radius:10px;background:#FBF0E5;border:1px solid #EBD3B4;color:#7A4A12;font-size:11.5px;line-height:1.5;}

  /* app shell */
  .viewTabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px;}
  .viewTabs button{border:0;background:none;cursor:pointer;padding:0 0 11px;font-family:'Instrument Sans',sans-serif;font-size:15.5px;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;}
  .viewTabs button.on{color:var(--ink);border-bottom-color:var(--fern);font-weight:600;}

  .zipbox{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 13px;}
  .zipbox label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .zipbox input{width:60px;border:0;background:transparent;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);padding:4px 0;}
  .zipbox input:focus{outline:2px solid var(--fern);outline-offset:2px;border-radius:4px;}
  .zipName{font-size:12px;color:var(--ink-2);padding-right:8px;white-space:nowrap;}
  .toggle{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;}
  .toggle button{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:0;background:transparent;color:var(--ink-2);padding:7px 13px;border-radius:999px;cursor:pointer;}
  .toggle button.on{background:var(--ink);color:#fff;}

  .hero{background:var(--ink);color:#fff;border-radius:18px;padding:22px;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;}
  .heroL{min-width:220px;}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:0 0 8px;}
  .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(38px,10vw,58px);line-height:.9;letter-spacing:-.045em;margin:0 0 8px;font-variant-numeric:tabular-nums;color:var(--amber);}
  .big.neg{color:#E8836D;}
  .heroNote{font-size:13px;color:#B9C9BE;margin:0;max-width:44ch;}
  .heroR{display:flex;gap:24px;flex-wrap:wrap;}
  .hstat p{margin:0;}
  .hstatLabel{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-bottom:5px !important;}
  .hstatVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#fff;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}

  .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:14px;}
  .cols.wide{grid-template-columns:1.25fr .75fr;}
  .cols.three{grid-template-columns:repeat(3,1fr);}
  @media (max-width:900px){.cols,.cols.wide,.cols.three{grid-template-columns:1fr;}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px;}
  .cardHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px;}
  .sub{font-size:12.5px;color:var(--ink-2);margin:0;}
  .note{font-size:11.5px;color:var(--ink-2);margin:13px 0 0;line-height:1.5;}

  /* nudge rail — one row of observations under the hero */
  .rail{margin-bottom:14px;}
  .railHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
  .railTitle{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
  .railTools{display:flex;align-items:center;gap:7px;}
  .railRestore{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--fern);border-radius:999px;padding:5px 11px;cursor:pointer;}
  .railRestore:hover{border-color:var(--fern);}
  .railNav{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;width:24px;height:24px;line-height:1;font-size:16px;cursor:pointer;padding:0;}
  .railNav:hover:not(:disabled){border-color:var(--fern);color:var(--fern);}
  .railNav:disabled{opacity:.35;cursor:default;}
  .railPager{display:flex;align-items:center;gap:6px;}
  .railCount{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-2);min-width:32px;text-align:center;}

  /* Mobile: one swipeable row carrying everything. */
  .railTrack{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:thin;}

  /* Desktop: the cards share whatever room is left beside the anchor.
     This used to be five fixed slots, sized for a set that paged. With at most three tips the
     spare tracks were dead space — a third of the row sat empty while each card was squeezed to
     160px. Growing from a zero basis means the row lands exactly on the container edge at any
     count, which is what the fixed grid was for in the first place. */
  @media (min-width:900px){
    .railTrack{display:flex;overflow:visible;padding-bottom:0;scroll-snap-type:none;}
    .railTrack.isEmpty{display:block;}
    .railTrack .anchor{flex:0 0 258px;width:auto;}
    .railTrack .nudge{flex:1 1 0;width:auto;min-width:0;}
  }

  /* Anchor: the projection's depletion age. Dark, to sit with the hero rather than the cards. */
  .anchor{flex:none;width:238px;height:94px;background:var(--ink);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;cursor:pointer;border:0;text-align:left;font-family:inherit;}
  .anchorTop{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
  .anchorLabel,.anchorSub,.anchorNote{font-size:11px;color:var(--sage);}
  .anchorBig{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:27px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fern);}
  .anchor.short .anchorBig{color:var(--amber);}
  .anchorRow{display:flex;align-items:baseline;gap:6px;}
  .anchorFoot{display:block;}
  .anchorTrack{display:block;position:relative;height:7px;background:#2A3A32;border-radius:4px;}
  .anchorFill{position:absolute;left:0;top:0;height:7px;background:var(--fern);border-radius:4px;}
  .anchorShort{position:absolute;right:0;top:0;height:7px;background:var(--clay);border-radius:0 4px 4px 0;}
  .anchorTick{position:absolute;top:-3px;width:2px;height:13px;background:var(--paper);}
  .anchorScale{display:flex;justify-content:space-between;margin-top:4px;}
  .anchorScale span{font-size:10px;color:#6E7F76;}
  .anchorScale .mid{color:var(--sage);}

  /* Nudges. Direction is carried by the accent dot only — the wording stays neutral, because
     spending above an area average is a fact about the number, not a verdict on the choice. */
  .nudge{flex:none;width:212px;height:94px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 11px;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;text-align:left;font-family:inherit;}
  .nudge.act{cursor:pointer;}
  .nudge.act:hover{border-color:var(--fern);}
  .nudge.warn{border-color:#E4D9C4;}
  .nudge.gapCard{background:transparent;border-style:dashed;justify-content:center;gap:5px;}
  .nudgeTop{display:flex;align-items:center;gap:6px;padding-right:16px;}
  .nudgeDot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--sage);}
  .nudge.over .nudgeDot{background:var(--amber);}
  .nudge.under .nudgeDot{background:var(--fern);}
  .nudge.warn .nudgeDot{background:var(--clay);}
  .nudgeLabel{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nudgeVal{display:block;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
  .nudgeVal span{font-size:11px;font-weight:400;color:var(--ink-2);}
  /* Two lines, then clip. At five-across the slot is ~173px and a single nowrap line ellipsised
     most of these away — the note is where the number is made checkable, so it gets the room. */
  .nudgeNote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--ink-2);line-height:1.35;}
  .nudgeFlag{display:block;font-size:11px;color:#8A6A33;}
  /* Stretched hit area. Sits under the dismiss control so the × still wins the click. */
  .nudgeGo{position:absolute;inset:0;z-index:1;background:transparent;border:0;border-radius:14px;cursor:pointer;padding:0;}
  .nudgeGo:focus-visible{outline:2px solid var(--fern);outline-offset:2px;}
  .nudgeX{z-index:2;}
  .nudgeX{position:absolute;top:4px;right:4px;border:0;background:transparent;color:#8A9891;cursor:pointer;font-size:15px;line-height:1;padding:3px 5px;border-radius:6px;}
  .nudgeX:hover{background:#F1F4EE;color:var(--ink);}
  .railEmpty{border:1px dashed var(--line);border-radius:14px;padding:14px;text-align:center;color:var(--ink-2);font-size:13px;}

  /* admin */
  .admRow{display:grid;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);}
  .admRow.bench{grid-template-columns:132px 1fr 80px 72px 58px 1.2fr 140px 104px;}
  .admRow.zip{grid-template-columns:58px 1.2fr 74px 74px 58px 1.4fr 104px 28px;}
  .admStat{display:flex;align-items:center;gap:5px;justify-content:flex-end;}
  .admStatText{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.03em;color:#8A9891;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .admStatText.pending{color:var(--amber);}
  .admStatText.ok{color:var(--fern);}
  .admStatText.bad{color:var(--clay);}
  .admReset{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;cursor:pointer;flex:none;}
  .admReset:hover{border-color:var(--clay);color:var(--clay);}
  @media (max-width:900px){
    .admRow.bench,.admRow.zip{grid-template-columns:1fr 1fr;}
    .admKey{grid-column:1 / -1;}
  }
  .admKey{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;}
  .admScope{display:inline-block;background:#EDF1EA;border-radius:4px;padding:1px 5px;margin-right:6px;font-size:10px;color:var(--ink-2);}
  .admIn{width:100%;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:#FAFBF9;min-height:34px;}
  .admIn:focus{outline:none;border-color:var(--fern);}
  .admChk{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:5px;}
  .admSave{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--fern);border-radius:999px;padding:7px 9px;cursor:pointer;}
  .admSave:hover{border-color:var(--fern);}
  .admDel{border:0;background:transparent;color:#8A9891;font-size:17px;line-height:1;cursor:pointer;padding:4px;}
  .admDel:hover{color:var(--clay);}
  .admImp{display:grid;grid-template-columns:210px 110px 74px 210px 1fr;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);}
  @media (max-width:1000px){.admImp{grid-template-columns:1fr 1fr;}.admImpMsg{grid-column:1 / -1;}}
  .admImpName{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:2px;}
  .admImpWhat{font-size:11px;font-weight:400;color:var(--ink-2);}
  .admImpWhen{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink);}
  .admImpBadge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 8px;text-align:center;background:#EDF1EA;color:var(--ink-2);}
  .admImpBadge.ok{background:#E4EFE7;color:#245641;}
  .admImpBadge.partial,.admImpBadge.skipped{background:#F7EBD8;color:#8A6A33;}
  .admImpBadge.failed{background:#F6E2DE;color:#8C3826;}
  .admImpCounts{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-2);}
  .admImpMsg{font-size:12px;color:var(--ink-2);line-height:1.5;}
  .admCfg{display:grid;grid-template-columns:230px 130px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline;}
  @media (max-width:760px){.admCfg{grid-template-columns:1fr;gap:2px;}}
  .admCfgKey{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink);}
  .admCfgVal{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--fern);}
  .admCfg.secret .admCfgVal{color:var(--ink-2);}
  .admCfgWhat{font-size:12px;color:var(--ink-2);}

  /* Where a nudge sends you. Fades rather than blinks — a flash reads as an error. */
  @keyframes glLand{0%{background:#FFF6E4;}100%{background:transparent;}}
  .landed{animation:glLand 1.6s ease-out;}
  .total{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
  .total.in{color:var(--fern);} .total.out{color:var(--clay);}

  .quick{display:grid;gap:8px;}
  .r2{display:grid;grid-template-columns:1fr 108px;gap:8px;}
  .r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .r4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;}
  @media (max-width:520px){.r4{grid-template-columns:1fr 1fr;}}
  .r2b{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;}
  .r1b{display:grid;grid-template-columns:1fr auto;gap:8px;}
  .quick input,.quick select{font-family:'Instrument Sans',sans-serif;font-size:14.5px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;background:#FAFBF9;width:100%;min-height:44px;}
  .quick input:focus,.quick select:focus{outline:2px solid var(--fern);outline-offset:1px;}
  .plus{border:0;border-radius:10px;background:var(--fern);color:#fff;cursor:pointer;min-height:44px;min-width:52px;font-size:22px;line-height:1;padding:0 16px;}
  .plus:hover{background:#245641;}
  .detailBox{border:1px dashed var(--line);border-radius:10px;padding:9px;display:grid;gap:8px;}
  .detailCap{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}

  .list{list-style:none;margin:12px 0 0;padding:0;max-height:420px;overflow-y:auto;}
  .list.short{max-height:260px;}
  .item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
  .dot{width:9px;height:9px;border-radius:3px;flex:none;}
  .itemMain{flex:1;min-width:0;}
  .itemName{font-size:14px;font-weight:500;display:block;}
  .itemMeta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;}
  .chip{border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:9.5px;letter-spacing:.04em;}
  .chipBtn{background:transparent;color:var(--ink-2);font-family:inherit;cursor:pointer;line-height:inherit;}
  .chipBtn:hover{border-color:var(--fern);color:var(--fern);}

  /* "not added yet" suggestions */
  .sugg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);}
  .suggLabel{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:2px;}
  .suggChip{font-family:'Instrument Sans',sans-serif;font-size:12px;background:transparent;border:1px dashed var(--line);color:var(--ink-2);border-radius:999px;padding:5px 10px;cursor:pointer;}
  .suggChip:hover{border-style:solid;border-color:var(--fern);color:var(--fern);}

  /* retirement income distribution */
  /* Twelve columns will not fit a phone at a readable size, so the table scrolls inside its own
     container rather than the page scrolling sideways. */
  /* Scrolls in both directions inside its own box: fifteen columns will not fit a phone, and
     twenty-eight years of rows would otherwise push the rest of the page off screen. */
  .tableWrap{overflow:auto;max-height:420px;margin:0 -4px;padding:0 4px;}
  /* Expanded: the vertical cap comes off and every year is on the page at once, for reading the
     whole run or printing it. Horizontal scrolling stays either way — sixteen columns never fit. */
  .tableWrap.open{max-height:none;}
  /* Sized to fit rather than to scroll: the min-width came down with the column count, and the
     headers wrap onto two lines instead of forcing every column as wide as its label. */
  .distTable{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-variant-numeric:tabular-nums;}
  .distTable th{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:400;padding:4px 5px;border-bottom:1px solid var(--line);white-space:normal;background:var(--card);line-height:1.25;vertical-align:bottom;}
  .distTable thead tr:last-child th{max-width:82px;}
  /* Both header rows stay put while the years scroll under them. */
  .distTable thead tr.distGroups th{position:sticky;top:0;z-index:3;height:24px;text-align:left;font-size:9px;color:#8A9891;}
  .distTable thead tr:last-child th{position:sticky;top:24px;z-index:3;}
  .distTable td{font-size:11.5px;padding:3px 5px;border-bottom:1px solid #F0F3EE;white-space:nowrap;}
  .distTable .grpAsset{border-left:1px solid var(--line);}
  .distTable .grpIncome{border-left:1px solid var(--line);}
  .distTable .distKey{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-2);}
  /* Age stacked under the year — the two used to be separate columns. */
  .distTable td.distKey span{display:block;font-size:9.5px;color:#8A9891;}
  .distTable .distNum{text-align:right;}
  .distTable td.distGoal{color:var(--ink);font-weight:600;}
  .distTable td.distNet{color:var(--fern);font-weight:600;}
  .distTable td.distNet span{display:block;font-size:10.5px;font-weight:400;color:var(--ink-2);}
  /* What the goal is a percentage of, so a change in it can be traced to the spending under it. */
  .distTable td.distGoal span{display:block;font-size:10px;font-weight:400;color:#8A9891;}
  /* The year a loan payment stops. Amber rather than red: nothing is wrong, something ended. */
  .distTable td.distKey span.distPaid{display:block;font-size:9.5px;color:#8A5A12;font-weight:600;}
  .distTable tr.distPaidRow td{border-top:1px dashed #E0C89A;}
  .distTable td.distTotal{color:var(--ink);font-weight:600;border-right:1px solid var(--line);}
  .distTable td.distTotal span{display:block;font-size:10px;font-weight:400;color:var(--ink-2);}

  /* One column per account. The header carries that account's colour as an underline and the
     withdrawal beneath each balance repeats it, so "this came out of that" is readable without
     consulting the header. Colours are set inline — the accounts are whatever the user created. */
  .distTable td.drawn{color:var(--ink);background:#FAFCFA;}
  .distTable td.drawn span{display:block;font-size:10px;font-weight:600;}
  /* The home: present, counted, never spent. Greyed rather than hidden — it is real money. */
  .distTable td.locked,.distTable th.locked{color:#93A29A;}
  .distTable td.locked{background:transparent;}
  .distTable td.distGoal{border-left:1px solid var(--line);}
  .distTable td.distHealth,.distTable th.distHealth{color:#8C6E9A;}
  .distTable td.muted{color:#B4BFB8;}
  /* Working years read as a different phase of the same table, not as a different table. */
  .distTable tr.distWork td{background:#FCFDFB;}
  .distTable tr.distWork td.drawn{background:#F7FAF8;}

  /* net-worth chart legend */
  .nwLegend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;}
  .nwKey{display:inline-flex;align-items:center;gap:5px;font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--ink-2);background:transparent;border:1px solid transparent;border-radius:999px;padding:3px 8px;cursor:pointer;}
  .nwKey:hover{border-color:var(--line);}
  .nwKey.fixed{cursor:default;}
  .nwKey.fixed:hover{border-color:transparent;}
  /* Off keeps the swatch legible — it is how you find the line again to switch it back on. */
  .nwKey.off{color:#B4BFB8;}
  .nwKey.off .nwSwatch{opacity:.35;}
  /* Dashed swatch for the per-account lines, solid for the two aggregates, matching the chart.
     Colour is set inline on border-top-color — the swatch is a rule, not a filled block. */
  .nwSwatch{width:14px;height:0;border-top:2px dashed;flex:none;}
  .nwSwatch.solid{border-top-style:solid;}

  /* range picker */
  .distRange{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 11px;}
  .distRangeLabel{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .rangeBtn,.unitBtn{font-family:'Instrument Sans',sans-serif;font-size:12px;background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:5px 11px;cursor:pointer;}
  .rangeBtn:hover,.unitBtn:hover{border-color:var(--fern);color:var(--fern);}
  .rangeBtn.on,.unitBtn.on{background:var(--ink);border-color:var(--ink);color:#fff;}
  /* Which dollars the table is in. Sits at the far end of the range row because it qualifies
     every figure below it rather than narrowing the range like the buttons beside it. */
  .distUnitPick{display:flex;align-items:center;gap:7px;margin-left:auto;}
  .distRangeAges{display:flex;align-items:center;gap:5px;margin-left:4px;font-size:12px;color:var(--ink-2);}
  .distRangeAges input{width:54px;font-family:'Instrument Sans',sans-serif;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:5px 7px;background:#FAFBF9;min-height:30px;text-align:center;}
  .distRangeUnit{font-size:11px;color:#8A9891;}

  /* range summary — the accumulation answer, as an equation that reconciles */
  .distSum{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;padding:11px 12px;margin-bottom:11px;background:#FAFBF9;border:1px solid var(--line);border-radius:12px;}
  .dsItem{display:flex;flex-direction:column;gap:2px;}
  .dsLabel{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
  .dsVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
  .dsVal.in{color:var(--fern);}
  .dsVal.out{color:var(--clay);}
  .dsVal.tot{color:var(--ink);}
  .dsOp{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#8A9891;padding-bottom:3px;}
  .listExpand{width:100%;margin-top:10px;}
  .distTable tbody tr:hover{background:#FAFBF9;}
  /* A year the accounts cannot cover is the one row that must not read like the others. */
  .distTable tr.distShort td{background:#FCF3F1;}
  .distTable tr.distShort td.distNet{color:var(--clay);}

  /* contribution schedule modal */
  .modal.wide{max-width:560px;}
  .planWindow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
  .planWindow .note{grid-column:1 / -1;margin:0;}
  .planTools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px;}
  .planToolsLabel{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .planTools input{width:96px;font-family:'Instrument Sans',sans-serif;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:#FAFBF9;min-height:34px;}
  .planGridHead,.planRow{display:grid;grid-template-columns:64px 46px 1fr 62px;gap:8px;align-items:center;}
  .planGridHead{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-bottom:6px;border-bottom:1px solid var(--line);}
  .planGrid{max-height:300px;overflow-y:auto;padding-right:4px;}
  .planRow{padding:4px 0;border-bottom:1px solid #F0F3EE;}
  .planYear{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);}
  .planAge{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-2);}
  .planAmt{width:100%;font-family:'Instrument Sans',sans-serif;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#FAFBF9;min-height:32px;}
  /* An overridden year is marked on the row, not just in the input, so a schedule can be read
     at a glance without comparing every number against what it would otherwise have been. */
  .planRow.over .planAmt{border-color:var(--amber);background:#FFFBF4;}
  .planRow.skip .planAmt{border-color:var(--line);background:#F4F6F2;color:var(--ink-2);text-decoration:line-through;}
  .planBtn{border:1px solid var(--line);background:transparent;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:4px 7px;cursor:pointer;}
  .planBtn:hover{border-color:var(--fern);color:var(--fern);}
  .planFoot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
  .chip.cls{border:0;color:#fff;}
  .right{text-align:right;flex:none;}
  .itemAmt{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;display:block;}
  .delta{font-family:'IBM Plex Mono',monospace;font-size:10px;display:block;margin-top:2px;}
  .delta.over{color:var(--clay);} .delta.under{color:var(--fern);}
  .del{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:19px;line-height:1;padding:6px 2px;min-width:26px;}
  .del:hover{color:var(--clay);}
  .empty{border:1px dashed var(--line);border-radius:12px;padding:18px 14px;margin-top:12px;text-align:center;color:var(--ink-2);font-size:13.5px;}

  .stack{display:flex;height:34px;border-radius:9px;overflow:hidden;background:#EDF1EA;}
  .stackSeg{height:100%;transition:width .42s cubic-bezier(.3,.8,.4,1);}
  .legend{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
  .legRow{display:flex;align-items:center;gap:8px;}
  .legDot{width:10px;height:10px;border-radius:3px;flex:none;}
  .legLabel{font-size:13px;font-weight:500;flex:1;}
  .legVal{font-family:'IBM Plex Mono',monospace;font-size:12px;font-variant-numeric:tabular-nums;}
  .rule{display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
  .ruleRow{display:flex;align-items:center;gap:9px;font-size:12.5px;}
  .ruleName{width:74px;flex:none;font-weight:500;}
  .ruleTrack{flex:1;height:7px;background:#EDF1EA;border-radius:999px;position:relative;}
  .ruleFill{height:100%;border-radius:999px;transition:width .42s cubic-bezier(.3,.8,.4,1);}
  .ruleTarget{position:absolute;top:-3px;width:2px;height:13px;background:var(--ink);opacity:.5;}
  .ruleVal{font-family:'IBM Plex Mono',monospace;font-size:11.5px;width:84px;text-align:right;flex:none;}

  .catRow{display:flex;align-items:center;gap:9px;padding:7px 0;}
  .catName{font-size:13px;font-weight:500;width:96px;flex:none;}
  .bars{flex:1;display:grid;gap:3px;}
  .barTrack{height:8px;background:#EDF1EA;border-radius:999px;overflow:hidden;}
  /* display:block is load-bearing. Both of these are spans; .barTrack gets away with a height
     because .bars is a grid and blockifies its children, but .barFill is a span inside a plain
     block, so it stayed inline — and width and height do not apply to an inline box. The bars
     rendered as empty grey tracks with the percentages beside them reading correctly, which is
     why it looked like missing data rather than missing CSS. */
  .barFill{display:block;height:100%;border-radius:999px;transition:width .42s cubic-bezier(.3,.8,.4,1);}
  .barFill.bench{background:#C3CFC4;}
  .catAmt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;width:100px;text-align:right;flex:none;font-variant-numeric:tabular-nums;line-height:1.35;}
  .catAmt em{font-style:normal;display:block;font-size:10px;}

  .flag{margin-top:13px;border-radius:12px;padding:12px 14px;font-size:12.5px;background:#FBF0E5;border:1px solid #EBD3B4;color:#7A4A12;}
  .flag.bad{background:#FBEBE8;border-color:#EBC3BA;color:#7E2E1E;}
  .flag.good{background:#EAF2EC;border-color:#C3D8C9;color:#255540;}

  svg.chart{width:100%;height:auto;display:block;}
  .stemLabel{font-family:'Instrument Sans',sans-serif;font-size:11px;fill:var(--ink);}
  .stemAmt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink-2);}
  .stemCap{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;fill:var(--ink-2);}
  /* The area average and the distance from it, on the third line of each branch. */
  .stemAvg{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:#8A9891;}
  .stemDelta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;}
  /* The card's own period toggle. Same state as the one in the header — see setView. */
  .stemHead{display:flex;align-items:center;gap:10px;}
  .toggle.small{padding:2px;}
  .toggle.small button{font-size:9.5px;padding:4px 9px;letter-spacing:.05em;}

  /* sliders + assumptions */
  .sliderWrap{margin-top:14px;}
  .sliderTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
  .sliderLab{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);}
  .sliderVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;color:#fff;}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.22);outline:none;margin:0;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink);}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber);cursor:pointer;border:3px solid var(--ink);}
  input[type=range].light{background:#E3E9E0;}
  input[type=range].light::-webkit-slider-thumb{border-color:#fff;background:var(--fern);}
  input[type=range].light::-moz-range-thumb{border-color:#fff;background:var(--fern);}
  .sliderEnds{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--sage);margin-top:6px;}

  .assume{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  @media (max-width:760px){.assume{grid-template-columns:1fr 1fr;}}
  .aItem label{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;}
  .aItem input{width:100%;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px;background:#FAFBF9;min-height:42px;}
  .aItem input:focus{outline:2px solid var(--fern);outline-offset:1px;}

  .snap{display:grid;gap:9px;}
  .snapRow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
  .snapRow:last-child{border-bottom:0;}
  .snapDot{width:9px;height:9px;border-radius:3px;flex:none;}
  .snapName{flex:1;font-size:13.5px;}
  .snapVal{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
  /* The same figure in the dollars of the year it actually arrives. Secondary on purpose: the
     plan is read in today's money, and the nominal figure is there to answer "but what will the
     number on the statement say" without competing with it. */
  .snapVal span,.snapTotalVal span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;color:var(--ink-2);letter-spacing:0;}
  .snapVal span{font-size:10.5px;}
  .snapTotalVal span{font-size:11.5px;margin-top:2px;}
  /* The part of the year's requirement the portfolio cannot supply. */
  .snapShort{color:var(--clay);}
  .snapTotal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;padding-top:13px;border-top:2px solid var(--ink);}
  .snapTotalLab{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .snapTotalVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right;}

  /* ledger table */
  .ledgerBar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;}
  .lgField{display:grid;gap:5px;}
  .lgField label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .lgField select,.lgField input{font-family:'Instrument Sans',sans-serif;font-size:14.5px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;background:#FAFBF9;min-height:44px;}
  .lgField.grow{flex:1;min-width:210px;}
  .lgField.grow select{width:100%;}
  .lgField.narrow input{width:92px;}

  .sums{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px;}
  @media (max-width:860px){.sums{grid-template-columns:repeat(2,1fr);}}
  .sum{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 12px;}
  .sumLab{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px;}
  .sumVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.025em;margin:0;font-variant-numeric:tabular-nums;}

  .tableScroll{overflow-x:auto;max-height:560px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;}
  table.lg{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-variant-numeric:tabular-nums;}
  table.lg th{
    position:sticky;top:0;z-index:2;background:var(--ink);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:500;text-align:right;padding:11px 10px;white-space:nowrap;
  }
  table.lg th:first-child,table.lg th:nth-child(2){text-align:left;}
  table.lg td{padding:0 10px;height:42px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:12.5px;text-align:right;white-space:nowrap;}
  table.lg td:first-child,table.lg td:nth-child(2){text-align:left;}
  table.lg tbody tr:nth-child(even){background:#F8FAF7;}
  table.lg tbody tr.past{color:var(--ink-2);}
  table.lg tbody tr.now td{background:#FBF0E5;font-weight:600;}
  table.lg tbody tr.ret td{box-shadow:inset 0 -2px 0 var(--fern);}
  table.lg tfoot td{padding:12px 10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;text-align:right;background:#EDF1EA;border-top:2px solid var(--ink);}
  table.lg tfoot td:first-child{text-align:left;}
  .yr{font-weight:600;color:var(--ink);}
  .cellIn{
    width:100%;max-width:112px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;text-align:right;
    border:1px solid transparent;border-radius:7px;padding:6px 7px;background:transparent;color:var(--ink);
  }
  .cellIn:hover{border-color:var(--line);background:#fff;}
  .cellIn:focus{outline:2px solid var(--fern);outline-offset:0;background:#fff;border-color:transparent;}
  .cellIn.set{background:#EAF2EC;border-color:#C3D8C9;font-weight:600;}
  .cellIn.pct{max-width:74px;}
  .gain.up{color:var(--fern);} .gain.down{color:var(--clay);}
  /* Pay before deductions, and the part of it that never arrives. Clay because it is money
     leaving, matching the sign convention everywhere else in these tables. */
  table.lg td.grossCell{color:var(--ink);}
  table.lg td.deducted{color:var(--clay);}
  table.lg tfoot td.deducted{color:var(--clay);}
  .vari.up{color:var(--fern);} .vari.down{color:var(--clay);}
  .muted{color:#A9B6AC;}
  .lgTag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:6px;color:var(--ink-2);}

  /* accordion of tracks */
  .grpHead{display:flex;align-items:center;gap:10px;margin:22px 0 9px;}
  .grpHead:first-of-type{margin-top:4px;}
  .grpName{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;}
  .grpRule{flex:1;height:1px;background:var(--line);}

  .acc{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:8px;overflow:hidden;}
  .acc.open{border-color:var(--sage);box-shadow:0 2px 14px rgba(20,35,29,.06);}
  .accHead{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    background:none;border:0;cursor:pointer;padding:14px 15px;font-family:inherit;color:inherit;
  }
  .accHead:hover{background:#F8FAF7;}
  .accHead:focus-visible{outline:2px solid var(--fern);outline-offset:-2px;}
  .chev{width:11px;height:11px;flex:none;color:var(--ink-2);transition:transform .18s ease;}
  .acc.open .chev{transform:rotate(90deg);color:var(--fern);}
  .accDot{width:10px;height:10px;border-radius:3px;flex:none;}
  .accName{flex:1;min-width:0;}
  .accTitle{font-size:15px;font-weight:600;letter-spacing:-.01em;display:block;}
  .accMeta{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
  .accStats{display:flex;gap:20px;flex:none;}
  @media (max-width:720px){
    .accHead{flex-wrap:wrap;}
    .accStats{width:100%;gap:16px;padding-left:32px;}
  }
  .accStat{text-align:right;}
  .accStatLab{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:0 0 3px;}
  .accStatVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums;}
  .accStatVal.up{color:var(--fern);} .accStatVal.down{color:var(--clay);}
  .accBody{padding:0 15px 15px;border-top:1px solid var(--line);}
  .acc:not(.open) .accBody{display:none;}
  .accTools{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 0;flex-wrap:wrap;}
  /* Set-one-rate-for-every-year, on income tracks. Pushed to the left of the buttons because it
     changes the table rather than exporting or resetting it. */
  .bulkRate{display:flex;align-items:center;gap:7px;margin-right:auto;}
  .bulkRate label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
  .bulkIn{width:64px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;text-align:right;
    border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--card);color:var(--ink);min-height:32px;}
  .bulkIn:focus-visible{outline:2px solid var(--fern);outline-offset:1px;}
  .bulkUnit{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-2);}
  .bulkMixed{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);}
  .tinyBtn{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:7px 11px;cursor:pointer;}
  .tinyBtn:hover{border-color:var(--fern);color:var(--fern);}
  .accSums{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;}
  @media (max-width:860px){.accSums{grid-template-columns:repeat(2,1fr);}}
  .accSum{background:var(--paper);border-radius:10px;padding:10px 11px;}
  .accSum .sumLab{margin-bottom:4px;}
  .accSum .sumVal{font-size:16px;}

  @media (prefers-reduced-motion:reduce){*{transition:none !important;}}

  /* ---- added for the hosted app: status toast, Google button ---- */
  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;max-width:min(560px,calc(100vw - 32px));
    background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;font-size:13.5px;line-height:1.45;
    box-shadow:0 12px 34px rgba(20,35,29,.3);}
  .toast.bad{background:var(--clay);}
  .orRule{display:flex;align-items:center;gap:10px;margin:18px 0 14px;color:var(--ink-2);
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
  .orRule::before,.orRule::after{content:"";flex:1;height:1px;background:var(--line);}
  .gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
    font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:500;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:11px;cursor:pointer;}
  .gbtn:hover{border-color:var(--fern);}
  .gbtn svg{flex:none;}

  /* ---- inline row editing ---- */
  .edt{border:0;background:none;color:var(--ink-2);cursor:pointer;padding:6px 4px;min-width:26px;
    display:inline-flex;align-items:center;justify-content:center;}
  .edt:hover{color:var(--fern);}
  .item.editing{display:block;padding:12px 0;}
  .rowEdit{background:#FAFBF9;border:1px solid var(--fern);border-radius:12px;padding:12px;display:grid;gap:8px;}
  .rowEdit input,.rowEdit select{font-family:'Instrument Sans',sans-serif;font-size:14.5px;color:var(--ink);
    border:1px solid var(--line);border-radius:9px;padding:9px;background:#fff;width:100%;min-height:42px;}
  .rowEdit input:focus,.rowEdit select:focus{outline:2px solid var(--fern);outline-offset:1px;}
  .rowEditBar{display:flex;justify-content:flex-end;gap:8px;margin-top:2px;}
  .rowEditBar button{min-height:38px;}

  /* ---- sample-data banner ---- */
  .demoBar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    background:#FBF0E5;border:1px solid #EBD3B4;border-left:4px solid var(--amber);
    border-radius:14px;padding:16px 18px;margin-bottom:16px;}
  .demoBarMain{min-width:260px;flex:1;}
  .demoBarTitle{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;
    letter-spacing:-.02em;color:#7A4A12;margin:0 0 4px;}
  .demoBarText{font-size:13.5px;line-height:1.5;color:#8A5A22;margin:0;max-width:62ch;}
  .demoBarActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .demoBarActions .btnBig{font-size:14.5px;padding:11px 18px;min-height:44px;border-radius:10px;}
  .demoBarActions .btnBig.quiet{background:#fff;border-color:#EBD3B4;color:#7A4A12;}
  .demoBarActions .btnBig.quiet:hover{border-color:var(--fern);color:var(--fern);}
  /* Same shape as the sample-data bar, cooler colour. The amber bar means "none of this is
     real"; this one means "this is real and saved, it just isn't yours yet", and reusing the
     warning palette for it would cry wolf. */
  .starterBar{background:#EEF4F6;border-color:#CFE0E6;border-left-color:var(--slate,#4B7C8C);}
  .starterBar .demoBarTitle{color:#2F5B69;}
  .starterBar .demoBarText{color:#3F6C7A;}
  .starterBar .demoExit{color:#3F6C7A;}
  .starterBar .demoExit:hover{color:var(--fern);}

  .demoExit{border:0;background:none;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;color:#8A5A22;cursor:pointer;
    text-decoration:underline;padding:6px 2px;}
  .demoExit:hover{color:var(--clay);}
  @media (max-width:700px){
    .demoBarActions{width:100%;}
    .demoBarActions .btnBig{flex:1;}
  }

  /* ---- clickable brand ---- */
  .brandBtn{border:0;background:none;padding:0;cursor:pointer;text-align:left;}
  .brandBtn:hover .name span{color:var(--amber);}
  .brandBtn:focus-visible{outline:2px solid var(--fern);outline-offset:4px;border-radius:6px;}

  /* ---- sample-data intro modal ---- */
  .demoPoints{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;}
  .demoPoints li{font-size:14px;line-height:1.5;color:var(--ink-2);padding-left:20px;position:relative;}
  .demoPoints li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
    border-radius:2px;background:var(--amber);}

  /* ---- condensed expense entry: three rows collapsed into two ---- */
  .quick.compact{gap:7px;}
  .quick.compact input,.quick.compact select{min-height:38px;padding:8px 9px;font-size:14px;border-radius:9px;}
  .eRow1{display:grid;grid-template-columns:1.6fr .9fr 1fr;gap:7px;}
  .eRow2{display:flex;flex-wrap:wrap;gap:7px;}
  .quick.compact .plus{min-height:38px;min-width:44px;padding:0 12px;font-size:19px;border-radius:9px;}
  .quick.compact .detailBox{padding:7px;gap:6px;}
  .quick.compact .r3{gap:6px;}
  @media (max-width:620px){
    .eRow1{grid-template-columns:1fr 1fr;}
    .eRow1 select{grid-column:1 / -1;}
    .eRow2>select,.eRow2>input{flex:1 1 calc(50% - 26px);}
  }

  /* ---- filter + sort toolbar ---- */
  .listTools{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:7px;margin-top:14px;
    padding-top:13px;border-top:1px solid var(--line);}
  .listTools input,.listTools select{font-family:'Instrument Sans',sans-serif;font-size:13px;
    color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 8px;
    background:#FAFBF9;width:100%;min-height:36px;}
  .listTools input:focus,.listTools select:focus{outline:2px solid var(--fern);outline-offset:1px;}
  @media (max-width:620px){ .listTools{grid-template-columns:1fr 1fr;} }
  .toolCount{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-2);margin:10px 0 0;}
  .toolCount button{border:0;background:none;color:var(--fern);font:inherit;cursor:pointer;
    text-decoration:underline;padding:0 0 0 8px;}


  /* ---- inline detail fields in the entry row ---- */
  .eRow2>select{flex:1 1 108px;min-width:0;}
  .eRow2>input.eInline{flex:1 1 132px;min-width:0;}
  .eRow2>.plus{flex:0 0 auto;}

  /* ---- grouped expense list ----
     One scroll container for the whole list. The base .list rule carries margin, max-height and
     overflow, which would otherwise turn every group into its own scrolling box; .flush undoes
     that so the groups read as sections of a single list. */
  .groupedList{max-height:520px;overflow-y:auto;margin-top:12px;padding-right:4px;}
  .list.flush{margin:0;max-height:none;overflow:visible;}
  .grp+.grp{margin-top:4px;}

  .grpHead{position:sticky;top:0;z-index:2;background:var(--card);
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:9px 0 7px;border-bottom:1px solid var(--line);}
  .grp:first-child .grpHead{padding-top:2px;}
  .grpName{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .grpDot{width:8px;height:8px;border-radius:2px;flex:none;}
  .grpCount{font-size:9.5px;letter-spacing:.04em;color:var(--ink-2);opacity:.75;
    border:1px solid var(--line);border-radius:20px;padding:1px 6px;}
  .grpTotal{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
    font-variant-numeric:tabular-nums;color:var(--ink);}

  /* The group header already separates sections, so the first row inside one needs no rule. */
  .list.flush .item:first-child{border-top:0;}
  .list.flush .item{padding:9px 0;}

  /* ---- expand / collapse the expense list ---- */
  .groupedList.expanded{max-height:none;overflow:visible;}
  .listExpand{width:100%;margin-top:10px;border:1px dashed var(--line);background:transparent;
    border-radius:10px;padding:9px;cursor:pointer;color:var(--ink-2);
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
  .listExpand:hover{border-color:var(--fern);color:var(--fern);}

  /* Brief highlight so the row you just saved is findable after the list rebuilds. */
  .item.justSaved{background:#FBF0E5;border-radius:8px;
    box-shadow:0 0 0 6px #FBF0E5;transition:background .35s ease,box-shadow .35s ease;}

  /* ---- where the money lands: donut + legend ---- */
  .pieWrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .pieWrap .chart{flex:1 1 210px;min-width:190px;max-width:290px;}
  .pieLegend{flex:1 1 190px;min-width:180px;display:grid;gap:7px;}
  .pieRow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;}
  .pieLabel{font-size:13px;font-weight:500;}
  .piePct{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-2);
    font-variant-numeric:tabular-nums;min-width:46px;text-align:right;}
  .pieAmt{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;
    font-variant-numeric:tabular-nums;min-width:72px;text-align:right;}
  .pieTotal{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;}
  .pieTotal .pieLabel{font-weight:600;}

  /* ---- drag to reorder ---- */
  .grip{flex:none;width:14px;color:var(--line);cursor:grab;font-size:13px;line-height:1;
    user-select:none;letter-spacing:-1px;}
  .item.draggable:hover .grip{color:var(--ink-2);}
  .grip:active{cursor:grabbing;}
  .item.dragging{opacity:.45;}
  .item.dropBefore{box-shadow:inset 0 2px 0 0 var(--fern);}
  .item.dropAfter{box-shadow:inset 0 -2px 0 0 var(--fern);}

  /* ---- last-updated stamps ---- */
  .headRight{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
  .stamp{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-2);opacity:.8;white-space:nowrap;}
  .stamp.stale{color:var(--clay);opacity:1;}
  .stamp.stale::before{content:"⚠ ";}

  /* ---- first-run setup wizard ---- */
  .wzModal{max-width:620px;}
  .wzHide{display:none !important;}

  .wzProgress{display:flex;align-items:center;gap:5px;margin:0 0 16px;}
  .wzDot{height:3px;flex:1;background:var(--line);border-radius:2px;}
  .wzDot.on{background:var(--fern);}
  .wzStepNo{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-2);white-space:nowrap;margin-left:6px;}

  .wzBody{max-height:min(56vh,460px);overflow-y:auto;padding-right:4px;}
  .wzLead{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 16px;}
  .wzNote{font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:10px 0 0;}
  .wzSec{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-2);margin:14px 0 6px;}

  .wzBox{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .wzItem{display:grid;grid-template-columns:1fr auto 92px 104px;align-items:center;gap:9px;
    padding:8px 10px;border-bottom:1px solid var(--line);}
  .wzItem:last-child{border-bottom:0;}
  .wzItem.on{background:#FBF0E5;}
  .wzCheck{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-width:0;}
  .wzCheck input{width:15px;height:15px;flex:none;}
  .wzCheck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wzItem:not(.on) .wzCheck span{color:var(--ink-2);}
  .wzHint{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-2);
    white-space:nowrap;opacity:.85;}

  .wzLoan{display:grid;grid-template-columns:92px 116px 1fr;gap:8px;align-items:center;
    padding:8px 10px 10px 34px;border-bottom:1px solid var(--line);background:#FDF7EF;}
  .wzLoan .wzNote{margin:0;}

  .wzBody input:not([type=checkbox]),.wzBody select{font-family:'Instrument Sans',sans-serif;font-size:13.5px;
    color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 8px;
    background:#fff;width:100%;min-height:34px;}
  .wzBody input:focus,.wzBody select:focus{outline:2px solid var(--fern);outline-offset:1px;}
  .wzCheck input[type=checkbox]{width:15px;height:15px;min-height:0;padding:0;flex:none;}
  .wzBody input:not([type=checkbox]):disabled,.wzBody select:disabled{background:#F4F6F2;color:#A9B3AC;}
  .wzNum{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13px;}

  .wzGrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .wzField{display:grid;gap:5px;}
  .wzField>span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-2);}

  .wzRows{display:grid;gap:8px;}
  .wzRow{display:grid;grid-template-columns:1fr 100px 132px auto;gap:8px;align-items:center;}
  .wzDel{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:18px;
    line-height:1;padding:4px 6px;}
  .wzDel:hover{color:var(--clay);}
  .wzDelPad{width:26px;}
  .wzWarn{background:#FBF0E5;border:1px solid #EBD3B4;border-left:3px solid var(--amber);
    border-radius:9px;padding:10px 12px;margin:0 0 14px;font-size:12.5px;line-height:1.5;
    color:#7A4A12;}

  .wzAdd{margin-top:10px;border:1px dashed var(--line);background:transparent;border-radius:9px;
    padding:8px 12px;cursor:pointer;color:var(--ink-2);font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;}
  .wzAdd:hover{border-color:var(--fern);color:var(--fern);}

  .wzSummary{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
    border-radius:10px;overflow:hidden;}
  .wzSumRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--card);padding:11px 13px;font-size:14px;}
  .wzSumRow strong{font-family:'IBM Plex Mono',monospace;font-size:15px;}

  .wzBar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
  .wzBarRight{display:flex;align-items:center;gap:10px;}
  .wzSkipAll{border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:12.5px;
    text-decoration:underline;padding:6px 2px;}
  .wzSkipAll:hover{color:var(--fern);}
  .wzSkipAll:disabled{opacity:.4;cursor:default;text-decoration:none;}
  .wzSkipAll:disabled:hover{color:var(--ink-2);}
  /* Sits left of "I'll enter my own" and offers the more useful of the two exits, so it reads as
     the positive option rather than another way to give up. */
  #wzUseSample{color:var(--fern);font-weight:600;}
  #wzUseSample:hover{color:var(--amber);}
  .wzBar .ghost:disabled{opacity:.4;cursor:default;}
  .wzBar .solid:disabled{opacity:.6;cursor:default;}

  @media (max-width:620px){
    .wzItem{grid-template-columns:1fr 86px;grid-template-areas:"check check" "hint hint" "amt freq";}
    .wzCheck{grid-area:check;}
    .wzHint{grid-area:hint;}
    .wzGrid3{grid-template-columns:1fr;}
    .wzRow{grid-template-columns:1fr 1fr;}
  }

  /* ---- assumption dock ----
     Fixed to the right on desktop and pushes the page rather than covering it, because the whole
     point is watching the charts move while you drag. Below .overlay (50) so the auth and profile
     modals still sit on top, and below .toast (80) so saves stay visible. */
  :root{--dockW:360px; --dockGap:20px;}
  .dock{position:fixed;right:var(--dockGap);top:50%;transform:translateY(-50%);z-index:40;
    width:var(--dockW);max-height:calc(100vh - 32px);display:flex;flex-direction:column;
    background:var(--ink);color:#fff;border-radius:16px;
    box-shadow:0 10px 40px rgba(20,35,29,.28);overflow:hidden;}
  .dockGrip{display:flex;align-items:center;gap:10px;width:100%;border:0;cursor:pointer;
    background:rgba(255,255,255,.06);color:#fff;padding:10px 16px;text-align:left;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;}
  .dockGrip:hover{background:rgba(255,255,255,.1);}
  .dockGrip:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}
  .dockGripLab{color:var(--sage);}
  /* Only earns its place when the panel is shut. */
  .dockSummary{margin-left:auto;font-size:10px;letter-spacing:.04em;color:#fff;display:none;}
  .dock.collapsed .dockSummary{display:inline;}
  .dockChev{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--sage);transition:transform .18s ease;margin-left:auto;}
  .dock.collapsed .dockSummary + .dockChev{margin-left:10px;}
  .dock.collapsed .dockChev{transform:rotate(180deg);}
  /* overflow-y stays as a safety net for very short windows, but the panel is now sized to fit
     without it — see the density below. */
  .dockBody{padding:2px 16px 12px;overflow-y:auto;}
  .dock.collapsed .dockBody{display:none;}

  .lv{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);}
  .lv:last-of-type{border-bottom:0;}
  .lvTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
  .lvLab{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--sage);}
  .lvVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;color:#fff;
    line-height:1;}
  .lvEnds{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
    font-size:9px;color:var(--sage);margin-top:3px;}
  /* The min and max labels were the least load-bearing row in the panel: the value is already
     shown large, and the margin line names the boundary that actually matters. Kept on the
     scrubber, where the age span is the whole point. */
  .lv:not(.scrubLv) .lvEnds{display:none;}
  /* Bigger than the hero sliders were: this is now the only control for these numbers.
     A range input is hit-tested inside its own box, so the box carries the target size, and the
     bar itself is drawn by .lvTrack behind it rather than by the track pseudo-element — that is
     what lets the safe zone be painted underneath the thumb. */
  .lvTrack{position:relative;}
  .lvTrack input[type=range]{position:relative;z-index:2;}
  .lvTrack > span{position:absolute;top:50%;transform:translateY(-50%);height:7px;z-index:1;pointer-events:none;}
  .zBase{left:0;right:0;border-radius:4px;background:rgba(255,255,255,.22);}
  /* Painted only once a boundary has been solved; widths are set from the input's live min/max. */
  .zHold{border-radius:4px;background:var(--fern);display:none;}
  .zBand{background:var(--amber);display:none;}
  .lv.zoned .zBase{background:rgba(168,69,47,.55);}
  .lv.zoned .zHold,.lv.zoned .zBand{display:block;}

  .dock input[type=range]{height:24px;background:transparent;}
  .dock input[type=range]::-webkit-slider-runnable-track{height:7px;background:transparent;}
  .dock input[type=range]::-moz-range-track{height:7px;background:transparent;}
  .dock input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-7.5px;}
  .dock input[type=range]::-moz-range-thumb{width:22px;height:22px;}

  .lvRight{display:flex;align-items:baseline;gap:8px;}
  /* Appears only once a lever has moved from where the session started. Autosave means there is
     no other way back to the number you had. */
  .lvRevert{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.06em;
    color:var(--sage);background:none;border:1px solid rgba(255,255,255,.18);border-radius:3px;
    padding:2px 6px;cursor:pointer;white-space:nowrap;}
  .lvRevert:hover{color:#fff;border-color:var(--sage);}
  .lvRevert:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}
  .lvMargin{font-family:'IBM Plex Mono',monospace;font-size:9.5px;line-height:1.4;
    color:var(--sage);margin:4px 0 0;}
  .lvMargin b{font-weight:400;color:var(--amber);}
  .lvMargin.thin b{color:#E08A72;}
  .lvMargin:empty{display:none;}
  .dockTest{font-family:'IBM Plex Mono',monospace;font-size:9px;line-height:1.45;
    color:var(--sage);margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);}
  .dockTest b{font-weight:400;color:#fff;}
  .dockTest .bad{color:#E08A72;}

  /* A lever the current tab cannot respond to. Dimmed rather than hidden: the control vanishing
     on tab change reads as a bug, and it still works — it just moves nothing you can see here. */
  .lv.inert{opacity:.4;}

  /* The scrubber is not a lever — it picks which computed year is on screen. Hollow sage thumb
     instead of solid amber so it does not read as one of the four that feed the model. */
  .scrubLv{border-top:1px solid rgba(255,255,255,.1);}
  .scrubTag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--sage);
    border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 5px;margin-bottom:5px;}
  .scrubLv input[type=range]::-webkit-slider-thumb{background:var(--ink);border-color:var(--sage);}
  .scrubLv input[type=range]::-moz-range-thumb{background:var(--ink);border-color:var(--sage);}
  .dockNote{font-family:'IBM Plex Mono',monospace;font-size:9px;line-height:1.45;
    color:var(--sage);margin:8px 0 0;}

  @media (min-width:1101px){
    /* Park it off the content column's right shoulder, not the window's edge. .wrap is 1180px
       centred inside the padded #app, so its right edge is 50vw + 590px once the padding is
       accounted for; min() then stops the dock leaving the screen on narrower displays. */
    /* Vertically centred rather than pinned 96px down: pinning spent 96px of the height budget
       before a single lever was drawn, which is most of why the panel had to scroll. Centred, the
       budget is the whole viewport less a margin. */
    .dock{right:auto;
      left:min(calc(50vw - (var(--dockW) / 2) + 590px), calc(100vw - var(--dockW) - var(--dockGap)));}
    /* Push, don't cover. */
    #app.dockOn{padding-right:calc(var(--dockW) + (var(--dockGap) * 2));}
    /* Collapsed, nothing is pushed, so sitting beside the column would mean sitting on top of it.
       Tuck back to the window edge until it is opened again. */
    .dock.collapsed{left:auto;right:var(--dockGap);}
  }

  /* Bottom sheet below the push breakpoint: a right rail has nowhere to go, and a squeezed
     column would sit on top of the charts it exists to let you watch. */
  @media (max-width:1100px){
    .dock{top:auto;bottom:0;left:0;right:0;width:auto;transform:none;
      border-radius:16px 16px 0 0;
      /* 52vh, not 70: the chart has to stay on screen while a lever is being dragged. */
      max-height:52vh;
      padding-bottom:env(safe-area-inset-bottom);}
    .dockBody{max-height:calc(52vh - 48px);}
    /* Two up, so four levers cost half the height. The scrubber stays full width below them —
       it is a different kind of control and an odd fifth cell would read as a gap. */
    .lvGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
    .lvGrid .lv:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1);}
    /* Comfortable to hit with a thumb.
       A range input is only hit-tested inside its own box, so leaving it 10px tall would give a
       10px target however big the thumb is painted. The box goes to 44px and the visible bar is
       moved onto the track pseudo-element; the negative thumb margin re-centres it. */
    .dock input[type=range]{height:44px;background:transparent;}
    .dock input[type=range]::-webkit-slider-runnable-track{height:10px;background:transparent;}
    .dock input[type=range]::-moz-range-track{height:10px;background:transparent;}
    .dock input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px;}
    .dock input[type=range]::-moz-range-thumb{width:28px;height:28px;}
    .lvTrack > span{height:10px;}
    .lvEnds{margin-top:0;}
    /* Two-up cells are about 165px: the coloured track fits there, a sentence does not. Show it
       only for the lever being touched. */
    .lvGrid .lvMargin{display:none;}
    .lvGrid .lv:focus-within .lvMargin{display:block;}
    .dockGrip{padding:15px 18px;min-height:44px;}
    /* Clear the collapsed grip so the last card is not stranded underneath it. */
    #app{padding-bottom:64px;}
  }
  @media (max-width:620px){
    .dockBody{padding:4px 14px 14px;}
    .lv{padding:13px 0;}
    .lvVal{font-size:19px;}
    .dockSummary{font-size:9px;}
  }

  /* ---- headroom rows, on the At retirement card ----
     The card already contrasts what you need against what arrives; these read as the same
     thought, so they live here rather than in the dock. */
  .hr{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:2px;}
  .hrRow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;}
  .hrRow + .hrRow{border-top:1px solid #F0F3EE;}
  .hrLab{font-size:13px;color:var(--ink);font-weight:600;display:flex;flex-direction:column;gap:1px;}
  .hrWhen{font-weight:400;font-size:11.5px;color:var(--ink-2);}
  .hrVal{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;
    text-align:right;white-space:nowrap;color:var(--ink);}
  .hrVal.good{color:var(--fern);}
  .hrVal.warn{color:var(--amber);}
  .hrVal.none{color:var(--ink-2);font-size:15px;}
  .hrSub{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:400;
    color:var(--ink-2);letter-spacing:.01em;margin-top:2px;}

  /* ---- retirement income shown on the Cash flow tab ----
     Read-only there: Retirement income owns these rows, and two editable copies of one figure is
     how the two drift apart. */
  .incGrp{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 12px;margin-top:8px;background:#F4F7F2;border:1px solid var(--line);
    border-radius:10px;font-family:'IBM Plex Mono',monospace;font-size:9px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
  .incGrpLink{border:0;background:none;cursor:pointer;color:var(--fern);font-family:inherit;
    font-size:10px;letter-spacing:0;text-transform:none;padding:2px 4px;white-space:nowrap;}
  .incGrpLink:hover{text-decoration:underline;}
  .incGrpLink:focus-visible{outline:2px solid var(--fern);outline-offset:1px;border-radius:4px;}

  /* A cost with a start or end age. Distinct from the detail chips so a schedule is not mistaken
     for a provider name. */
  .chip.sched{background:#EAF1F4;color:#3C5C69;border-color:#CFE0E6;}

  /* Awaiting-approval screen. Plain prose: there is nothing to do here but read it. */
  .pendBody{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 12px;}
  .pendBody:empty{display:none;}