/* hub v2 chrome — the harness grammar (ai/realm/harness/v2.html) on the
tokens from tokens.css. Grammar: slab headers with counts, dashed section
rules, chip vocabulary (solid = active/primary, line = alternative,
dotted = secondary/parked, blue-bordered = live feed), italic serif meta,
hairline columns, boxless tables, one centred dialog. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans)}
a{color:var(--link)}
#app{height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.mono,.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sp{flex:1}
.right{text-align:right}
/* vocabulary */
.slab{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.meta{font:11px var(--mono);color:rgba(33,29,24,.5)}
.meta.hint{font:italic 11.5px var(--sans);color:rgba(33,29,24,.5);margin-left:10px;flex:1}
.sub{font:italic 11.5px var(--sans);color:rgba(33,29,24,.55)}
.name{font:500 14px var(--sans)}
.pill{font:11px var(--mono);padding:1px 8px;border:1px solid var(--line-strong);color:var(--ink-2);border-radius:99px;white-space:nowrap;display:inline-block}
.pill.orange{border-color:var(--out);color:var(--out)}
.pill.green{border-color:var(--in);color:var(--in);border-style:dashed}
.pill.dashed{border-style:dashed}
.chip{font:11px var(--mono);padding:2px 8px;border-radius:99px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;cursor:pointer;line-height:1.5}
.chip.solid{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.chip.line{border-color:rgba(33,29,24,.4);color:var(--ink);background:var(--panel)}
.chip.line:hover{background:#fff;border-color:var(--ink)}
.chip.dot{border:1px dotted rgba(33,29,24,.4);color:var(--ink-2);background:transparent}
.chip.xs{font-size:10px;padding:1px 6px}
.chip.pick{border-color:rgba(33,29,24,.4);background:var(--panel);color:var(--ink)}
.chip.pick input{position:absolute;opacity:0;width:0;height:0}
.chip.pick:has(input:checked){background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.chip.pick.tick:has(input:checked){background:var(--ink)}
.chiprow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-top:3px}
.tab{font:12px var(--mono);padding:5px 11px;border-radius:99px;color:var(--ink-2);text-decoration:none}
.tab:hover{background:rgba(33,29,24,.08)}
.tab.on{font-weight:600;background:var(--ink);color:var(--on-dark)}
.tab.stub{border:1px dashed rgba(33,29,24,.3);color:rgba(33,29,24,.4);cursor:default}
.feedbtn{position:relative;display:inline-flex;align-items:center;gap:5px;font:12px var(--mono);padding:4px 10px;border:1px solid rgba(46,102,168,.5);color:var(--link);border-radius:99px;text-decoration:none}
.feedbtn:hover,.feedbtn.on{background:rgba(46,102,168,.1)}
.badge{position:absolute;top:-6px;right:-8px;font:600 9px var(--mono);color:#fff;border-radius:99px;padding:1px 5px;background:var(--link)}
.note{font:italic 11.5px var(--sans);color:rgba(33,29,24,.55);border:1px dashed rgba(33,29,24,.3);border-radius:8px;padding:8px 12px;background:var(--tint);line-height:1.5}
.err{font:italic 12px var(--sans);color:var(--out)}
.rowline{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dash{flex:1;border-bottom:1px dashed rgba(33,29,24,.25);margin:0 8px;transform:translateY(-3px)}
.card{border:1px solid rgba(33,29,24,.2);border-radius:var(--radius-md);padding:7px 11px;background:var(--panel);display:flex;flex-direction:column;gap:3px}
.card:hover{border-color:rgba(33,29,24,.45)}
.payload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.evt{font:12.5px var(--sans);line-height:1.6;border-bottom:1px solid var(--line-2);padding:2px 0}
.evt b{font-weight:500}
.evt .mono{font-size:11.5px}
.evt.wide .payload{white-space:normal;font-size:10.5px}
/* buttons & forms */
button{font:inherit}
.btn{font:600 12px var(--mono);padding:5px 12px;border-radius:99px;background:var(--ink);color:var(--on-dark);border:1px solid var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;line-height:1.5}
.btn.sec{background:var(--panel);color:var(--ink);border-color:var(--line-strong);font-weight:400}
.btn.sec:hover{background:#fff;border-color:var(--ink)}
.btn.sm{font-size:11px;padding:2px 9px}
.linkbtn{background:none;border:0;padding:0;font:11px var(--mono);color:var(--link);cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.field{display:flex;flex-direction:column;gap:3px;position:relative}
.field.span,.span{grid-column:1/-1}
.field > label{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{font:14px var(--sans);padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
.field input.mono{font:13px var(--mono)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.fhint{font:italic 11px var(--sans);color:rgba(33,29,24,.5)}
.name.pad{padding:6px 0}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0}
.formgrid.inline{padding:8px 0 4px}
.formhead{margin-top:8px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;grid-column:1/-1}
.actions.tight{gap:6px;padding-top:2px}
.actions form{display:contents}
.row{padding:4px 0;border-bottom:1px solid var(--line-2)}
/* tables — boxless on the paper */
table{border-collapse:collapse;width:100%}
th{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:6px 8px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:baseline}
td.m{font:12px var(--mono)}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:rgba(33,29,24,.03)}
tr.on td{background:rgba(33,29,24,.06)}
tr.dim td{opacity:.5}
/* top bar */
#topbar{display:flex;align-items:center;gap:12px;padding:0 16px;height:48px;background:var(--panel);border-bottom:1px solid rgba(33,29,24,.18);flex:none;z-index:30}
.wordmark{font:500 18px var(--sans);letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-right:4px}
.wordmark.big{font-size:30px;margin-bottom:12px;display:block}
.tabs{display:flex;gap:4px}
.scope{display:flex;gap:6px;align-items:center;padding-right:12px;border-right:1px solid var(--line-3)}
.scope form{display:contents}
#topbar form{margin:0}
/* workspace */
#view{flex:1;display:flex;overflow:hidden}
.col{overflow-y:auto;border-right:1px solid var(--line-3);padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.col.wide{flex:1.25}
.col.last{border-right:0}
.bottom{height:30px;border-top:1px solid var(--line-3);background:var(--panel);display:flex;align-items:center;gap:12px;padding:0 16px;flex:none}
.signin{max-width:22rem;margin:14vh auto;display:flex;flex-direction:column;gap:6px}
.stack{display:flex;flex-direction:column;gap:10px}
/* #app.flow — document-level scroll (cashflow pages, via {% block app_class
%}flow{% endblock %} in _shell.html): the default shell is a fixed 100vh
box with .col doing its own overflow-y:auto, which puts the scrollbar at
the edge of that (gutter-narrowed) box, not the window. Flow mode drops
the fixed height/inner-scroll entirely so / scroll normally
and the scrollbar sits at the true viewport edge regardless of any
max-width/margin gutter on the content inside — topbar stays put via
position:sticky rather than a separate scroll container. */
/* overflow-x:hidden lives here, not on html/body: this element has
height:auto (min-height:100vh is only a floor) so it always grows to
fit its content — there's never a real vertical overflow to clip. Doing
the same on html/body (both height:100%, a HARD cap) forces their
paired overflow-y from 'visible' to 'auto' too (CSS's overflow-x/-y
computed-value coupling), which turns each into its OWN capped-height
scroll box instead of letting the true document/viewport scroll —
confirmed live: content below the fold became unreachable, the
register silently cut off mid-table with no visible scrollbar hinting
why. This rule originally existed to contain the today-band edge-cell
bleed (a 100vw full-bleed trick, since retired 2026-09-03 — today's own
row is now a plain table.register row, tr.today, further down); kept
anyway as a general safety net against any other element that ends up
wider than the viewport. */
#app.flow{height:auto;min-height:100vh;overflow:visible;overflow-x:hidden}
#app.flow #topbar{position:sticky;top:0}
#app.flow #view{overflow:visible}
/* flow pages run one .col (the module), not a multi-column split — the
.last-column border-kill only ever reaches the LAST of several .col
siblings (home_columns.html), so this lone .col never got it and carried
a stray hairline down its own right edge, inside the gutter, top to
bottom of the viewport (2026-09-03 fix — the "solid vertical line in the
right gutter" bug: not a leftover rule exposed by the gutter pass, the
base .col{border-right} rule simply always applied here). */
#app.flow .col{overflow-y:visible;border-right:0}
/* the dialog */
.scrim{position:fixed;inset:0;background:rgba(33,29,24,.22);backdrop-filter:blur(3px);z-index:40}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1060px,94vw);height:min(760px,88vh);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);z-index:50;display:flex;overflow:hidden}
.dialog.sm{width:min(640px,94vw);height:min(593px,88vh)}
.dnav{width:212px;background:var(--tint);border-right:1px solid var(--line-3);padding:14px 12px;display:flex;flex-direction:column;gap:3px;flex:none}
.dnav .slab{padding:8px 8px 4px}
.navitem{display:flex;justify-content:space-between;align-items:center;font:12.5px var(--sans);padding:5px 8px;border-radius:var(--radius);color:rgba(33,29,24,.8);text-decoration:none}
.navitem:hover{background:rgba(33,29,24,.06)}
.navitem.on{background:var(--ink);color:var(--on-dark)}
.navitem.on .meta{color:var(--on-dark-2)}
.dnav .close{padding:8px;text-decoration:none}
.pane{flex:1;padding:14px 18px 22px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-width:0}
.has-dialog #view,.has-dialog #topbar,.has-dialog .bottom{pointer-events:none;user-select:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(33,29,24,.18);border-radius:4px}
/* cashflow module — gutter pass (2026-09-02 night): the register ground
(header, horizon, table) centred with ~12% empty margin either side; the
dialogs sit outside .col entirely so they're untouched. */
.module{gap:12px;max-width:76%;margin:0 auto;width:100%}
.modnav .tabs{margin-left:12px}
.inlineq input{font:12px var(--mono);padding:3px 8px;border:1px solid var(--line);border-radius:99px;background:var(--panel);width:220px}
.funds{display:flex;gap:18px;flex-wrap:wrap;padding:6px 0 2px}
.stat{display:flex;flex-direction:column;gap:1px;min-width:120px}
.stat .big{font:500 21px var(--mono);font-variant-numeric:tabular-nums}
.name.big{font-size:19px}
.band-bad{color:var(--out)} .band-cushion{color:var(--cushion)} .band-free{color:var(--ink)}
.neg{color:var(--out)}
.pos{color:var(--in)}
.note.sweep{border-color:var(--cushion);color:var(--ink)}
/* fixed column widths (2026-09-03, item 5/colgroup pass): every
table.register instance includes the same _register_colgroup.html
partial, and the Today band's own grid (.tb-grid, chrome.css further
down) mirrors the same px values — see that partial for the widths and
the rationale. table-layout:fixed makes the
widths authoritative
regardless of chip content. */
table.register{table-layout:fixed}
/* register cards, 2026-09-04 design pass (docs/claude_design/ui_general/
20260904_register_updates.txt) — exact row backgrounds per weekday/
weekend/today state (no other tints), a dashed divider between rows
(border-TOP, not -bottom, so the first row of each .wk block carries
none — see tr.wk-first below), and roomier 12px/14px padding. */
table.register td{vertical-align:top;font-size:12.5px;padding:12px 14px;border-bottom:none}
table.register tr td{background:#f6efe1}
table.register tr:not(.wk-first) td{border-top:1px dashed #d6cab5}
table.register tr.weekend td{background:#efe6d6}
/* register v1-parity pass (2026-09-02 evening): past-day rows above today,
a dark full-width TODAY band, week-separator slabs, k-format Δ, centless
Available with a hanging status emoji, 📞 outside the chip. */
table.register .d-date{font-family:var(--mono);font-size:11.5px}
table.register .d-tag{display:block;font:500 9.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
table.register .d-tag.wknd{color:var(--weekend)}
table.register .d-late{display:block;font:500 10px var(--mono);color:var(--out)}
table.register td.dim{color:var(--ink-faint-2)}
table.register td.delta{padding-right:0}
table.register td.avail{padding-left:2px}
table.register tr.olderrow td{padding:8px;cursor:pointer}
table.register tr.olderrow:hover td{background:rgba(33,29,24,.03)}
table.register tr.olderrow .chev{display:inline-block;width:11px;color:rgba(33,29,24,.5)}
table.register tr.past td{opacity:.75}
/* week blocks (2026-09-03 STRUCTURAL pass, item 1 — replaces the
corner-vs-row-line fight from stacking box-shadow borders on table
cells): every week, past or future, now renders as its own
inside its own
— see
_register_body.html. div.wk owns the ENTIRE box: hairline border,
rounded corners, and the heavy Y2K health-bar-style offset drop-shadow
(solid, no blur) that used to render as a broken grey slab when it was
stacked per-cell on table borders — on a plain block element it's just
one clean shadow. Rows keep only interior separators: tr.wk-first still
marks the top row of its own tiny table and tr.wk-last the bottom one
(used below to drop that row's own border-bottom, since the div's own
bottom border is now the box's true bottom edge) — but neither carries
any border-radius or box-shadow of its own any more, so a corner can
never clash with a row line again. */
/* section headers — 2026-09-04 design pass: label left (mono/700/2px
tracking/#2a2521) + a lighter event count right after it, sums
right-aligned on the same line (in green · out red · ends, computed
server-side per block — register.py `_week_blocks`/`_week_summary`).
2026-09-04 vertical rhythm audit: the register's whole vertical rhythm
now runs on ONE rule — margin-TOP only, on the element that OPENS each
block (.wklabel, .tb-wrap, .reglegend) or sits directly under a header
(div.wk) — inside the .regflow wrapper (_register_body.html), a plain
block box, so adjacent margins collapse (take the max, not the sum)
instead of stacking. Before this pass every one of these also sat
inside .module's flex row (chrome.css above, gap:12px), and flex-item
margins never collapse — they ADD — so a "half-sized" 18px/5px pair here
was actually rendering as 12+18=... no, worse: 12(gap)+5(wklabel's own
mb)=17px header→card (spec wants 10) and 12+7(div.wk's old mb)+18
(wklabel's old mt)=37px block gap (spec wants 36 — reads right by
coincidence, but for the wrong, stacked reason) — see
docs/claude_design/ui_general/20260904_register_updates.txt for the
original 36/10 spec values this restores, cleanly, no gap involved.
Base rhythm = 36px (wklabel/tb-wrap/reglegend margin-top); header→card
= 10px (div.wk margin-top, below). No element in this system carries a
margin-bottom — one direction only, so gaps can never stack invisibly. */
.wklabel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:36px 0 0;padding:0 2px}
.wl-left{display:flex;align-items:baseline;gap:8px;min-width:0}
.wl-label{font:700 11px var(--mono);letter-spacing:2px;color:#2a2521;white-space:nowrap}
.wl-count{font:11px var(--mono);color:#7d7368;white-space:nowrap}
.wl-sums{font:11px var(--mono);color:#7d7368;white-space:nowrap}
.wl-sums .wl-in{color:#3a8f2e}
.wl-sums .wl-out{color:#c0392b}
.wl-sums .wl-ends.neg{color:#c0392b}
/* overflow:hidden clips any row/cell background (e.g. tr.weekend's tint,
which can land on a wk-first/wk-last row) to the div's own corners.
Border/shadow/background per the 2026-09-04 spec: 2px ink border, tan
card ground, tan (not red — red stays reserved for the chart + Today
band) offset shadow, still no radius. margin-top:10px is the
header→card half of the rhythm audit above — div.wk always follows its
own .wklabel in the DOM, so this one rule is the whole header→card
contract, no descendant/sibling combinator needed. No margin-bottom:
the NEXT block's own margin-top (36px) is what opens the gap below. */
div.wk{border:2px solid #12100e;background:#f6efe1;box-shadow:5px 5px 0 #c9bfae;margin:10px 0 0;overflow:hidden}
div.wk table.register{margin:0}
/* the register's own Available-cell wrapper — shared by every
table.register row (past/future, today included since 2026-09-03: today
rejoined the week grid as a plain row — see div.today below and
_today_band.html for the separate informational band above the chart). */
.avwrap{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
/* today's row (2026-09-03, band/popover pass; recoloured 2026-09-04 to the
spec's exact today tint): a normal table.register row like any other —
no more standalone dark div — just a tint + bold date so it still reads
as "today" in the grid it shares with every other day. */
table.register tr.today td{background:#fbf3dc}
table.register tr.today .d-date{font-weight:600}
/* ============================================================
The Today band + "the working" popover (2026-09-03, Bhaj's Claude
Design handoff — high fidelity: colours, type, spacing, wording and
states below are final, ported 1:1 from the reference `Today Band.dc.
html`). Self-contained hardcoded palette, same convention as the
.ychart panel further down — a themed insert, not a chrome element, so
it keeps the spec's exact colours regardless of the hub's own theme.
Replaces the old .funds stat-row above the chart (retired outright —
see home_columns.html for the unrelated, still-live .funds/.stat used
on the home page); the old .todayband row div is retired too, but the
band itself stays in that div's old CHRONOLOGICAL slot in the register
flow (between the past-days block and the future-days block, per
Bhaj — not relocated above the chart), with today's own chips moved
into a plain table.register row (tr.today) in the future block instead.
Markup: web/templates/cashflow/_register_body.html (placement) +
_today_band.html (this component); all figures/geometry precomputed
server-side by modules/cashflow/todayband.py. ======================
2026-09-04 rhythm audit: the band opens its own block in the register
flow exactly like a .wklabel does (it has no header of its own — it IS
the header-equivalent), so it takes the same 36px margin-top as every
other section-open element and nothing else; previously margin:0 0 16px
gave it LESS top space than a real .wklabel and MORE bottom space than
any card, which is what made the gap above the band read smaller than
every other block gap and the gap below it read larger. */
.tb-wrap{position:relative;margin:36px 0 0;z-index:2}
.tb{position:relative;border:3px solid #12100e;background:#12100e;box-shadow:8px 8px 0 #c0392b;cursor:help;box-sizing:border-box}
.tb::before{content:'';position:absolute;inset:3px;border:1px solid #b5922a;pointer-events:none}
.tb::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;background-image:radial-gradient(circle,rgba(255,255,255,.10) 1.4px,transparent 1.5px);background-size:7px 7px;pointer-events:none}
.tb-strip{position:absolute;left:0;top:0;bottom:0;width:14px;background:repeating-conic-gradient(#ffd51e 0% 25%,#12100e 0% 50%);background-size:7px 7px;pointer-events:none}
/* six column tracks, day/delta/lightning matching _register_colgroup.
html's
widths so the band still lines up loosely with the table
columns above and below; the AVAILABLE track is widened past the
register's own 128px (which wraps a 22px JetBrains Mono figure onto two
lines — the spec's figure size is final, so the column gives way
instead) — the band is informational-only now, not a shared drop
target, so exact per-pixel column parity with the tables no longer
matters the way it did when today's chips lived here. */
.tb-grid{position:relative;display:grid;grid-template-columns:72px 1fr 40px 200px 1fr 56px;align-items:center;padding:14px 10px 14px 28px;min-height:72px;box-sizing:border-box}
.tb-day{display:flex;flex-direction:column;gap:2px}
.tb-todaylbl{font-family:'Bangers',cursive;font-size:26px;letter-spacing:2px;line-height:1;color:#ffd51e;display:inline-block;transform:rotate(-3deg);transform-origin:left center;
text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,1.5px 1.5px 0 #000,-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,4px 4px 0 #c0392b}
.tb-date{font-family:'Source Serif 4',serif;font-style:italic;font-size:14px;color:#c9bfae}
.tb-avail{text-align:center;display:flex;align-items:baseline;justify-content:center;gap:10px}
.tb-avail-fig{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500;letter-spacing:-.5px;white-space:nowrap}
.tb-avail-emoji{font-size:20px;line-height:1}
.tb-out{text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;color:#c9bfae;display:flex;justify-content:flex-end;align-items:baseline;gap:14px}
.tb-out-val{color:#f6efe1}
.tb-out-val.tb-neg{color:#ff6b5e}
.tb-lightning{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;color:#ffd51e}
/* "the working" — the popover sheet. Hover/focus the band to open; CSS-only
(no JS): opacity+transform transition, pointer-events gated so it's
inert while closed. */
.tw{position:absolute;left:50%;top:100%;margin-top:22px;margin-left:-400px;width:800px;
transform:rotate(-.7deg) translateY(-8px) scale(.98);opacity:0;pointer-events:none;
transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1.2);z-index:5}
.tb:hover + .tw,.tb:focus + .tw,.tb:focus-within + .tw{opacity:1;pointer-events:auto;transform:rotate(-.7deg) translateY(0) scale(1)}
.tw-tail{position:absolute;left:50%;top:-11px;width:20px;height:20px;margin-left:-10px;background:#fbf6ea;border-left:2.5px solid #12100e;border-top:2.5px solid #12100e;transform:rotate(45deg);z-index:1}
.tw-sheet{position:relative;border:2.5px solid #12100e;box-shadow:7px 7px 0 #c0392b;
background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(41,98,168,.16) 25px 26px),#fbf6ea;background-position:0 6px;
padding:22px 22px 18px 58px;box-sizing:border-box;font-family:'JetBrains Mono',monospace;font-size:13.5px;color:#2a2521}
.tw-margin{position:absolute;left:42px;top:0;bottom:0;width:1.5px;background:rgba(192,57,43,.55);pointer-events:none}
.tw-tape{position:absolute;left:50%;top:-12px;width:92px;height:24px;margin-left:-46px;background:rgba(255,213,30,.55);border:1px solid rgba(0,0,0,.12);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tw-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tw-headline{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:#2a2521;line-height:26px}
.tw-sub{font-family:'Caveat',cursive;font-size:17px;color:#7d7368;line-height:26px;white-space:nowrap}
.tw-body{display:flex;gap:18px;align-items:flex-start}
/* the sum: sign · label · figure · pencil note, one grid row = one ruled
26px line so every row sits on the sheet's own rule pattern above. */
.tw-sum{flex:1;min-width:0;display:grid;grid-template-columns:18px 118px 140px minmax(0,1fr);column-gap:8px;line-height:26px;align-items:start}
.tw-sign{color:#7d7368}
.tw-sign.eq{color:#12100e}
.tw-sign.minus{color:#c0392b}
.tw-label{letter-spacing:1px;font-size:12px;white-space:nowrap}
.tw-fig{text-align:right;font-variant-numeric:tabular-nums}
.tw-fig-b{font-weight:500}
.tw-fig-red{color:#c0392b}
.tw-note{font-family:'Caveat',cursive;font-size:17px;color:#7d7368;padding-left:10px;white-space:nowrap;overflow:hidden}
.tw-note-red{color:#c0392b}
.tw-rule{grid-column:1/4;border-top:2px solid #12100e;margin-top:-1px;height:0}
.tw-avail-lbl{font-family:'Bangers',cursive;font-size:19px;letter-spacing:1.5px;color:#ffd51e;
text-shadow:1.5px 0 0 #000,-1.5px 0 0 #000,0 1.5px 0 #000,0 -1.5px 0 #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,3px 3px 0 #c0392b}
.tw-above-lbl{letter-spacing:1px;font-size:12px;font-weight:500;white-space:nowrap}
.tw-double{border-bottom:3px double #12100e;padding-bottom:1px}
/* the ladder: a 190×180 value scale, geometry (top/y/note) precomputed
server-side in modules/cashflow/todayband.py — this is layout only. */
.tw-ladder{position:relative;width:190px;height:180px;flex:none;margin-top:4px;font-size:11px;letter-spacing:1px}
.tw-axis{position:absolute;left:24px;top:0;bottom:0;width:2px;background:#12100e}
.tw-line{position:absolute;left:14px;right:0;height:0;border-top-width:2px}
.tw-lname{position:absolute;left:34px;white-space:nowrap;line-height:12px}
.tw-lname span{color:#7d7368;letter-spacing:0}
.tw-lnote{position:absolute;left:34px;font-family:'Caveat',cursive;font-size:15px;letter-spacing:0;color:#c0392b;line-height:12px;white-space:nowrap}
.tw-marker{position:absolute;left:18px;width:10px;height:10px;margin-top:-8px;border-radius:50%;background:#ffd51e;border:3px solid #12100e;box-sizing:content-box}
.tw-marker-emoji{position:absolute;left:0;margin-top:-9px;font-size:16px;line-height:18px}
.tw-caption{font-family:'Caveat',cursive;font-size:17px;color:#7d7368;margin-top:8px;line-height:20px}
.avemoji{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:4px;white-space:nowrap}
.chipwrap{display:inline-flex;align-items:center}
.callout{margin-left:4px}
.bartop{min-width:0}
.billbar{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;min-width:0}
.billbar .billid{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;overflow:hidden}
.billbar .billid .name.big{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.billbar .billid .amtline{display:flex;align-items:baseline;gap:10px;min-width:0}
.billbar .big-amt{font-size:19px;flex:none}
.billbar .urgencywrap{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.texttabs{font:11px var(--mono);white-space:nowrap}
.texttab{color:rgba(33,29,24,.5);text-decoration:none}
.texttab:hover{color:var(--ink-2)}
.texttab.on{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.chipcol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start}
.chipcol.right{justify-content:flex-end}
/* inflow chip payee reads in ink, same as outflow (2026-09-03) — only the
amount () carries the in/out color, matching the out chip's grammar. */
.chip.in{border-color:var(--in-border);color:var(--ink)} .chip.in b{color:var(--in)}
.chip.out{border-color:var(--out-border);color:var(--ink)} .chip.out b{color:var(--out)}
.chip.dashed{border-style:dashed}
.sweepmk{color:var(--cushion);white-space:nowrap}
/* source mark, 2026-09-04 design pass: a leading emoji inside every bill/
income pill (chip_in/chip_out macros, _register_body.html) encoding
where the row came from — a fixed 14px slot so payee text still lines
up column to column regardless of which mark a given row carries. */
.srcmark{display:inline-block;width:14px;margin-right:2px;font-size:12px;line-height:1;text-align:center}
/* the register legend, 2026-09-04 design pass — two lines below the last
week block: line 1 the existing pill-state grammar (bill due / estimate
/ late / expected in / stress), line 2 the source marks. margin-top
only (rhythm audit) — same 36px base gap as every other section-open
element, no margin-bottom (it's the last thing in .regflow; .pane's own
bottom padding closes the page out). */
.reglegend{display:flex;flex-direction:column;gap:8px;margin:16px 2px 0;padding-bottom:56px}
.reglegend-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font:10px var(--mono);letter-spacing:1px;color:#7d7368}
.reglegend-row .lg-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.reglegend-row .lg-source{letter-spacing:2px}
input.small{width:110px;padding:2px 6px;font-size:12px}
.evt .chip.xs{margin-right:2px}
.evt .right{float:right}
/* urgency register + horizon svg */
/* Y2K cashflow chart panel (2026-09-0x) — Bhaj's Claude Design spec
(docs/claude_design/chart/README.txt), replacing the old dual-axis
overlaid horizon SVG above wholesale. Geometry + scrub live in
web/static/chart.js (client-rendered from the `chart` JSON payload,
web/cashflow.py `_chart_payload`); this is only the frame + header
chrome. Self-contained hardcoded palette, not the hub's --ink/--panel
tokens — same convention as health-bar.js: a themed insert, not a
chrome element, so it keeps the spec's exact colours regardless of the
hub's own theme. Width is NOT the spec's literal 1264px — it's the
register's own content column (matching div.wk) — the two