/* Layout: ledger book. Top tab strip (4 pages) → page lead sentence → sections ruled like ledger pages. Spending page: ribbon → rail → [12 month grids | sticky receipt]. */
:root{
  --bg:#eff1ef; --paper:#fafbfa; --sunk:#e6e9e6; --line:#d6dad6; --rule:#c4c9c4;
  --ink:#15191b; --ink-2:#4c5458; --ink-3:#848b8f; --empty:#e3e6e3;
  --sel:#15191b; --bar:#4c5458;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --pos:#2a78d6; --neg:#e34948; --mid:#c9cdc9;
  --f-display:"Noto Serif Thai",Georgia,serif;
  --f-body:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111315; --paper:#181b1e; --sunk:#202428; --line:#2a2f33; --rule:#3a4045;
  --ink:#eceeec; --ink-2:#a7aeb2; --ink-3:#71787d; --empty:#1f2327;
  --sel:#eceeec; --bar:#a7aeb2; color-scheme:dark;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --pos:#3987e5; --neg:#e66767; --mid:#3a4045;
}}
:root[data-theme="dark"]{
  --bg:#111315; --paper:#181b1e; --sunk:#202428; --line:#2a2f33; --rule:#3a4045;
  --ink:#eceeec; --ink-2:#a7aeb2; --ink-3:#71787d; --empty:#1f2327;
  --sel:#eceeec; --bar:#a7aeb2; color-scheme:dark;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --pos:#3987e5; --neg:#e66767; --mid:#3a4045;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;padding-inline:16px;padding-block:24px 56px}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;line-height:1.2;text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* summary */
.summary{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:900px){.summary{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
.lead{display:flex;flex-direction:column;gap:6px}
.lead h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:700;letter-spacing:-.01em}
.lead h1 small{font-family:var(--f-body);font-size:.4em;font-weight:500;color:var(--ink-2);margin-left:6px}
.lead p{margin:0;color:var(--ink-2);max-width:46ch}
.lead p b{color:var(--ink);font-weight:600}
.months-line{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.84rem;color:var(--ink-2)}
.months-line span b{font-family:var(--f-num);font-weight:500;color:var(--ink)}
.net{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;border-top:1px dashed var(--rule);padding-top:8px;margin-top:4px;font-size:.86rem;color:var(--ink-2)}
.net b{font-family:var(--f-num);font-weight:600;font-size:1.15rem;color:var(--ink)}
.net em{font-style:normal;font-family:var(--f-num);color:var(--ink-3);font-size:.78rem}
.row.rf .m::before{content:"+"}
.ribbon-box{display:flex;flex-direction:column;gap:6px;min-width:0}
.ribbon{display:flex;align-items:flex-end;gap:1px;height:72px;border-bottom:1px solid var(--rule)}
.ribbon button{flex:1 1 0;min-width:0;border:0;padding:0;border-radius:1px 1px 0 0;cursor:pointer}
.ribbon button.on{outline:2px solid var(--sel);outline-offset:1px}
.ribbon-axis{display:flex;font-size:.7rem;color:var(--ink-3)}
.ribbon-axis span{flex-grow:1}
.scale{display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--ink-3)}
.scale .grad{position:relative;flex:1;height:8px;border-radius:2px;max-width:320px}
.scale .ticks{position:relative;flex:1;max-width:320px;height:14px}
.scale .ticks span{position:absolute;transform:translateX(-50%);font-family:var(--f-num);font-size:.66rem;white-space:nowrap}
.scale-row{display:flex;flex-direction:column;gap:2px}

/* category rail */
.rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;margin-inline:-16px;padding-inline:16px}
.rail button{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:.82rem;color:var(--ink-2);display:flex;gap:8px;align-items:baseline}
.rail button span{font-family:var(--f-num);font-size:.74rem;color:var(--ink-3)}
.rail button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rail button[aria-pressed="true"] span{color:var(--paper);opacity:.75}

/* main split */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media (min-width:980px){.split{grid-template-columns:minmax(0,1fr) 360px}}
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px 18px}
.month{display:flex;flex-direction:column;gap:8px;min-width:0}
.month-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:6px}
.month-head h2{font-size:1.15rem}
.month-head span{font-family:var(--f-num);font-size:.86rem;color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.wd{font-size:.68rem;color:var(--ink-3);text-align:center}
.wd.we{color:var(--ink-2);font-weight:600}
.cell{aspect-ratio:1/1;max-width:100%;border:0;border-radius:3px;padding:3px 4px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;min-width:0;transition:transform .12s}
.cell:hover{transform:scale(1.06)}
.cell .d{font-size:.66rem;line-height:1;opacity:.8;align-self:flex-start}
.cell .a{font-family:var(--f-num);font-size:.68rem;font-weight:600;line-height:1;align-self:flex-end;white-space:nowrap}
.cell.pad{visibility:hidden}
.cell.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sel);transform:none}
@media (prefers-reduced-motion:reduce){.cell{transition:none}.cell:hover{transform:none}}

/* receipt */
.receipt{background:var(--paper);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column}
@media (min-width:980px){.receipt{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);max-height:calc(100vh - 32px)}}
.r-head{padding:16px 18px 12px;border-bottom:1px dashed var(--rule);display:flex;flex-direction:column;gap:2px}
.r-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.r-head h3{font-size:1.2rem}
.r-total{font-family:var(--f-num);font-size:1.7rem;font-weight:600;line-height:1.15}
.r-sub{font-size:.78rem;color:var(--ink-3)}
.r-nav{display:flex;gap:4px}
.r-nav button{width:32px;height:32px;border:1px solid var(--line);background:var(--sunk);border-radius:4px;cursor:pointer;font-size:1rem;line-height:1}
.r-nav button:disabled{opacity:.35;cursor:default}
.r-body{padding:6px 18px 14px;overflow-y:auto}
.row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px dotted var(--line);align-items:baseline}
.row:last-child{border-bottom:0}
.row .t{font-family:var(--f-num);font-size:.74rem;color:var(--ink-3)}
.row .n{min-width:0}
.row .n b{display:block;font-weight:500;font-size:.9rem;overflow-wrap:anywhere}
.row .n span{font-size:.72rem;color:var(--ink-3)}
.row .m{font-family:var(--f-num);font-size:.9rem;white-space:nowrap}
.r-group{margin-top:10px;font-size:.72rem;color:var(--ink-3);letter-spacing:.04em}
.row.x{opacity:.55}
.none{color:var(--ink-3);padding:18px 0;font-size:.88rem}
.grab{display:none}

@media (max-width:979px){
  body{padding-bottom:120px}
  .receipt{position:fixed;left:0;right:0;bottom:0;z-index:20;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:0 -10px 30px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0px);max-height:72%}
  .grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--rule);margin:8px auto 0;border:0;padding:0;cursor:pointer}
  .r-head{padding-top:8px;cursor:pointer}
  .receipt:not(.open) .r-body{display:none}
  .receipt:not(.open) .r-head{border-bottom:0}
}

/* patterns */
.patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 28px;border-top:1px solid var(--rule);padding-top:18px}
.pat h2{font-size:1rem;margin-bottom:10px}
.pat p{margin:0 0 10px;font-size:.8rem;color:var(--ink-3)}
.hb{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) 70px;gap:10px;align-items:center;font-size:.84rem;padding:3px 0}
.hb .l{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .tr{height:8px;background:var(--sunk);border-radius:1px}
.hb .tr div{height:100%;border-radius:1px}
.hb .v{font-family:var(--f-num);text-align:right;font-size:.8rem}
button.hb{border:0;background:none;width:100%;text-align:left;cursor:pointer;border-radius:3px}
button.hb:hover{background:var(--sunk)}
button.hb[aria-pressed="true"] .l{color:var(--ink);font-weight:600}
footer{font-size:.74rem;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:12px}
footer p{margin:0 0 4px;max-width:90ch}

/* ---------- site shell ---------- */
a{color:inherit}
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-decoration:none}
.brand small{font-family:var(--f-body);font-weight:400;font-size:.76rem;color:var(--ink-3);margin-left:8px}
.tabs{display:flex;gap:2px;overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.tabs a{flex:none;text-decoration:none;font-size:.88rem;color:var(--ink-2);padding:6px 12px;border-radius:4px 4px 0 0;border:1px solid transparent;border-bottom:0}
.tabs a:hover{color:var(--ink);background:var(--sunk)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--paper);border-color:var(--line);font-weight:600}
.page-lead{display:flex;flex-direction:column;gap:8px;max-width:72ch}
.page-lead h1{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:700;letter-spacing:-.01em}
.page-lead h1 small{font-family:var(--f-body);font-size:.42em;font-weight:500;color:var(--ink-2);margin-left:6px}
.page-lead p{margin:0;color:var(--ink-2);font-size:1rem}
.page-lead p b{color:var(--ink);font-weight:600}
.sec{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule);padding-top:16px;min-width:0}
.sec>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.sec h2{font-size:1.2rem}
.sec .sub{font-size:.8rem;color:var(--ink-3);margin:0}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:960px){.cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.cols.even{grid-template-columns:1fr 1fr}}

/* ledger table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
table.led{border-collapse:collapse;width:100%;font-size:.86rem;min-width:560px}
.led th,.led td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.led thead th{font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em;background:var(--sunk);white-space:nowrap}
.led td.n,.led th.n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.led tbody tr:last-child td{border-bottom:0}
.led tr.grp td{background:var(--sunk);font-weight:600}
.led tfoot td{border-top:2px solid var(--ink);border-bottom:0;font-weight:600}
.led .muted{color:var(--ink-3);font-size:.78rem}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* findings */
ol.finds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
ol.finds li{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
ol.finds li b.k{font-family:var(--f-num);font-size:1.25rem;font-weight:600}
ol.finds li span{font-size:.86rem;color:var(--ink-2)}
ol.finds li h3{font-size:.95rem}

/* balances */
.bal{display:flex;flex-direction:column}
.bal .b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-bottom:1px dotted var(--line)}
.bal .b:last-child{border-bottom:0}
.bal .b span{font-size:.74rem;color:var(--ink-3);grid-column:1}
.bal .b b{font-weight:500}
.bal .b .v{font-family:var(--f-num);grid-row:1/3;grid-column:2;align-self:center;text-align:right}
.bal .meter{grid-column:1/-1;height:4px;background:var(--sunk);border-radius:1px}
.bal .meter div{height:100%;background:var(--bar);border-radius:1px}

/* charts */
.chart{position:relative;min-width:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{fill:var(--ink-3);font-family:var(--f-num);font-size:11px}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--ink-2);stroke-width:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:hover+.hl,.chart .hl.on{opacity:1}
.chart .hl{fill:var(--sunk);opacity:0;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.8rem;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:8px 10px;font-size:.78rem;box-shadow:0 6px 18px rgba(0,0,0,.12);min-width:160px;z-index:5;display:none}
.tip b{display:block;font-family:var(--f-display);font-size:.88rem;margin-bottom:4px}
.tip div{display:flex;justify-content:space-between;gap:14px}
.tip div span:last-child{font-family:var(--f-num)}
.tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.tip hr{border:0;border-top:1px dashed var(--rule);margin:4px 0}

/* money map */
.map{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:12px}
.map svg{display:block;min-width:760px;width:100%;height:auto}
.map .node rect{fill:var(--bg);stroke:var(--rule);stroke-width:1}
.map .node.me rect{fill:var(--sunk);stroke:var(--ink-2)}
.map .node text{fill:var(--ink);font-family:var(--f-body);font-size:13px}
.map .node text.s{fill:var(--ink-3);font-size:11px;font-family:var(--f-num)}
.map .e{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.map .e.big{stroke:var(--ink-2)}
.map .el{fill:var(--ink-2);font-family:var(--f-num);font-size:11px}
.map .el.bg{stroke:var(--paper);stroke-width:4;paint-order:stroke}
.chart text.cap{fill:var(--ink-2);font-weight:600}
.rail.src button{font-size:.78rem}
.ribbon{gap:0}
.ribbon button{border-radius:0}