.f18 { padding-bottom:60px; }
.f18 .snav { display:flex; gap:10px; flex-wrap:wrap; }
.f18 .snav .btn { width:auto; flex:0 0 auto; }
.f18 [hidden] { display:none !important; }
.f18 .stat i { display:block; margin-top:8px; color:var(--body); font-size:10px; font-weight:400; line-height:1.5; }
.f18 .stat b { line-height:1.2; }
.f18 .f18-positive { color:var(--seal); }
.f18-section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.f18-section-head label { display:flex; align-items:center; gap:10px; font-size:12px; }
.f18-section-head select { width:auto; }
.f18-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.f18-summary b,.f18-summary span { display:block; }
.f18-summary b { font-size:13px; font-weight:600; }
.f18-summary span { font-size:11px; color:var(--body); margin-top:5px; line-height:1.65; }
.f18-controls,.f18-assumptions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:20px 0 4px; }
.f18-controls .f18-note { grid-column:1 / -1; margin:0; }
.f18-field { display:grid; align-content:start; gap:7px; font-size:12px; color:var(--body); }
.f18 input,.f18 select { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--rs); padding:9px 10px; min-width:0; width:100%; }
.f18 select option { color:var(--ink); background:var(--card); }
.f18 button:focus-visible,.f18 input:focus-visible,.f18 select:focus-visible,.f18 summary:focus-visible,.f18 [role="button"]:focus-visible { outline:3px solid var(--b2); outline-offset:3px; }
.f18-scroll { overflow-x:auto; }
.f18-table { border-collapse:collapse; width:100%; font-size:12px; margin:14px 0; }
.f18-table th,.f18-table td { text-align:right; padding:10px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.f18-table th:first-child { text-align:left; font-weight:400; white-space:normal; min-width:160px; }
.f18-table thead th { font-size:10px; font-weight:500; color:var(--mute); background:var(--sunk); }
.f18-table tbody th { color:var(--ink); }
.f18-note { font-size:11.5px; line-height:1.75; color:var(--body); max-width:100ch; margin:12px 0; }
.f18 summary { cursor:pointer; font-size:14px; font-weight:500; }
.f18 details[open]>summary { margin-bottom:14px; }
.f18-month { cursor:pointer; border:0; background:transparent; color:var(--seal); font:inherit; padding:7px; border-radius:4px; }
.f18-month.selected { background:var(--tint); }
.f18-spending { display:grid; grid-template-columns:280px minmax(0,1fr); align-items:center; gap:30px; margin-top:16px; }
.f18-donut { display:block; width:280px; max-width:100%; height:auto; }
.f18-donut text { fill:var(--body); font-family:inherit; font-size:10px; }
.f18-donut .f18-donut-total { fill:var(--ink); font-size:20px; font-weight:600; }
.f18-slice { cursor:pointer; stroke:var(--card); stroke-width:1.5; }
.f18-slice:hover,.f18-slice:focus-visible { opacity:.75; }
.f18 .legend button[aria-pressed="true"] { background:var(--tint); border-color:var(--seal); }
.f18-category-card { background:var(--sunk); }
.f18-category-card h3 { font-size:14px; }
.f18 .f18-plot { min-width:690px; }
.f18-plot text { fill:var(--body); font-family:"IBM Plex Mono",monospace; font-size:10px; }
.f18-hit { fill:transparent; cursor:pointer; }
.f18-hit:hover,.f18-hit:focus-visible { fill:var(--seal); fill-opacity:.07; stroke:var(--seal); stroke-width:1; outline:none; }
.f18-tooltip { position:fixed; z-index:130; width:270px; max-width:calc(100vw - 16px); padding:14px 16px; border:1px solid var(--line); border-radius:var(--rs); box-shadow:0 8px 28px #0003; background:var(--card); color:var(--ink); pointer-events:none; font-size:11px; line-height:1.7; }
.f18-tooltip b,.f18-tooltip span,.f18-tooltip strong,.f18-tooltip small { display:block; }
.f18-tooltip b { margin-bottom:7px; font-size:13px; }
.f18-tooltip hr { border:0; border-top:1px solid var(--line); margin:8px 0; }
.f18-tooltip small { margin-top:8px; color:var(--body); }
.f18-dialog { position:fixed; inset:0; margin:auto; width:min(940px,94vw); max-height:88vh; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); box-shadow:0 30px 80px #0004; overflow:auto; }
.f18-dialog::backdrop { background:#0a100e70; backdrop-filter:blur(4px); }
.f18-dialog-head { display:flex; justify-content:space-between; gap:24px; align-items:start; }
.f18-dialog-head h2 { font-size:23px; }
.f18-dialog-head .btn { flex:0 0 auto; }
.f18-lead { max-width:65ch; font-size:20px; line-height:1.6; margin:25px 0; }
.f18 ol { line-height:1.9; padding-left:25px; }
@media (max-width:800px) {
  .f18-controls,.f18-assumptions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .f18-summary { gap:18px; }
  .f18-spending { grid-template-columns:220px minmax(0,1fr); gap:20px; }
  .f18 .legend .nm { white-space:normal; }
  .f18 .legend .ct { font-size:9px; }
}
@media (max-width:600px) {
  .f18-spending { grid-template-columns:1fr; }
  .f18-donut { margin:auto; }
  .f18-summary { grid-template-columns:1fr; gap:14px; }
  .f18 .legend .ct { font-size:10px; }
  .f18-dialog { padding:18px; }
}
@media (max-width:460px) {
  .f18-controls,.f18-assumptions { grid-template-columns:1fr; }
  .f18 .card { padding:16px; }
  .f18 .stat b { font-size:22px; }
  .f18-section-head { gap:12px; }
}
