@font-face { font-family: "Instrument Serif"; src: url(vendor/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(vendor/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(vendor/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(vendor/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(vendor/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(vendor/fonts/instrument-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(vendor/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #F1ECE1;
  --paper-2: #E7E0D0;
  --paper-3: #FBF8F1;
  --ink: #16130F;
  --ink-2: #4A443B;
  --muted: #8A8275;
  --rule: rgba(22, 19, 15, .18);
  --tomato: #FF5B2E;
  --cobalt: #2E4BFF;
  --marigold: #F5B700;
  --mint: #1FA37A;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pad: clamp(1rem, 3.2vw, 2.75rem);
}

* { box-sizing: border-box; }
/* everything is sized in rem, and the root grows with the window (height-aware, so a section still fits one screen);
   charts draw in the same design units and are scaled by their viewBox */
html { font-size: clamp(13px, calc(4px + min(.88vw, 1.57vh)), 26px); overflow-y: auto; scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: var(--nav-h, 2.375rem); overflow-x: clip; scroll-snap-type: y proximity; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--tomato); color: var(--paper); }
.mono { font-family: var(--mono); }
.stat .v, .xcell .v, .panel .big, .slip .v, .receipt .net, .facts, .ledger, .events .c, .field input { font-variant-numeric: tabular-nums; }
kbd { font: 0.6875rem var(--mono); border: 1px solid var(--ink); padding: 0 0.25rem; border-bottom-width: 2px; }
a { color: inherit; }

/* ---------- masthead ---------- */
.mast { padding: 0 var(--pad); scroll-snap-align: start; }
/* the flag: brand + page index strip, edition kicker, big animated title, rotating seal, drawn rule */
.mast-strip { display: flex; align-items: center; gap: 0.875rem; font-size: 0.6875rem; letter-spacing: .12em; padding: 0.5625rem 0; border-bottom: 1px solid var(--ink); view-transition-name: mast-strip; }
.mast-strip > span:last-child { margin-left: auto; }
.mast-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: .24em; text-decoration: none; }
.mast-brand i, .nav-home i { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; background: var(--ink); color: var(--tomato); font: 400 0.9375rem/1 var(--serif); font-style: normal; letter-spacing: 0; }






.mast-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 3.4vw, 3.5rem); align-items: end; padding: 0.375rem 0 1.375rem; box-sizing: border-box; }
.mast-lead { min-width: 0; }
.mast-kicker { display: flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; margin: 0.875rem 0 0; }
.mk-no { font-weight: 600; color: var(--tomato); }
.mk-bar { width: 2.75rem; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.mast-title { font: 400 clamp(5.25rem, 15.5vw, 14.375rem)/.8 var(--serif); letter-spacing: -.045em; margin: 0.25rem 0 0; white-space: nowrap; view-transition-name: mast-title; }
.mast-title .mt-word { display: inline-flex; overflow: hidden; padding: .04em .02em .3em 0; margin: -.04em -.02em -.3em 0; }
.mast-title .ch { display: inline-block; }
.mast-title em { color: var(--tomato); font-style: normal; display: inline-block; }
.mast-side { padding-bottom: 0.5rem; }
.mast-seal { align-self: start; margin-top: 0.875rem; width: clamp(5.75rem, 9vw, 8rem); aspect-ratio: 1; display: block; view-transition-name: mast-seal; }
.mast-seal svg { width: 100%; height: 100%; overflow: visible; }
.seal-bg { fill: var(--tomato); }
.seal-in { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 2 3; }
.seal-spin { transform-origin: 60px 60px; animation: seal-turn 38s linear infinite; }
.seal-spin text { font: 600 9.2px var(--mono); letter-spacing: .12em; fill: #fff; }
.seal-no { font: 400 34px var(--serif) !important; fill: #fff; text-anchor: middle; }
.seal-of { font: 600 7.5px var(--mono) !important; letter-spacing: .2em; fill: #fff; text-anchor: middle; opacity: .85; }
.mast-seal:hover .seal-spin { animation-duration: 6s; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.mast-rule { height: 0.375rem; background: linear-gradient(90deg, var(--ink) 0 calc(100% - 7.5rem), var(--tomato) calc(100% - 7.5rem)); transform-origin: 0 50%; }
/* entrance: letters rise, the full stop drops in, the rule draws — replayed whenever a page is shown */
body.enter .mast-title .ch { animation: ch-rise .75s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(var(--i) * 38ms); }
body.enter .mast-title em { animation: dot-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 38ms + 160ms); }
body.enter .mast-rule, body.enter .mk-bar { animation: rule-draw .9s cubic-bezier(.6, 0, .2, 1) both .1s; }
body.enter .mast-side, body.enter .mast-kicker { animation: fade-up .6s ease both .18s; }
body.enter .mast-seal svg { animation: seal-in .9s cubic-bezier(.2, .9, .2, 1) both .1s; }
@keyframes ch-rise { from { transform: translateY(105%); } }
@keyframes dot-pop { from { transform: scale(0) translateY(-40%); } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(0.625rem); } }
@keyframes seal-in { from { transform: rotate(-120deg) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.enter * { animation: none !important; } .seal-spin { animation: none; } }

/* page-to-page: a cross-document view transition — the strip, nav and seal hold still, the title morphs,
   the rest of the page slides over */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, .8, .2, 1); }
::view-transition-old(root) { animation: .28s ease both vt-out; }
::view-transition-new(root) { animation: .38s cubic-bezier(.2, .8, .2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.375rem); } }
.mast-nav { view-transition-name: mast-nav; }
.mast-deck { font: italic 400 clamp(1.25rem, 2.1vw, 1.875rem)/1.2 var(--serif); margin: 0 0 1.125rem; max-width: 30ch; }
.mast-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mast-nav { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--ink); background: var(--paper); padding: 0 var(--pad); box-shadow: 0 1px 0 var(--ink), 0 0.375rem 0.875rem -0.625rem rgba(22,19,15,.35); }
.nav-pages { display: flex; flex: none; margin-right: 0.625rem; border-right: 1px solid var(--ink); }
.nav-home { display: grid !important; place-items: center; padding: 0 0.5rem !important; }
.mast-nav .nav-home.on, .mast-nav .nav-home.on:hover { background: var(--tomato); }
.nav-home.on i { background: var(--paper); color: var(--tomato); }
.nav-page { font: 600 0.6562rem var(--mono) !important; letter-spacing: .08em !important; text-transform: uppercase; padding: 0.625rem 0.6875rem 0.5625rem !important; border-right: 1px solid var(--rule); text-decoration: none; }
.mast-nav .nav-page.on, .mast-nav .nav-page.on:hover { background: var(--tomato); color: #fff; }
.nav-main { display: flex; align-items: stretch; height: 2.375rem; }
.nav-mid { flex: 1; min-width: 0; }
.nav-sub { display: flex; height: 1.875rem; border-top: 1px solid var(--rule); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); background: var(--paper-3); }
.nav-links { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav-links.scrolls { -webkit-mask: linear-gradient(90deg, #000 94%, transparent); mask: linear-gradient(90deg, #000 94%, transparent); }
.nav-links::-webkit-scrollbar { display: none; }
.mast-nav a { text-decoration: none; padding: 0.625rem 0.5rem 0.5625rem; white-space: nowrap; border-right: 1px solid var(--rule); font-size: 0.6562rem; letter-spacing: .03em; }
.nav-links a b { font-weight: 600; color: var(--tomato); margin-right: 2px; }
.nav-links a.on b, .nav-links a:hover b { color: #FFB38A; }
.mast-nav .nav-main a:hover { background: var(--ink); color: var(--paper); }
/* section bar: a lighter row — the current section is underlined, not filled, so it never competes with the page tab */
.nav-sub .nav-links a { display: flex; align-items: center; white-space: nowrap; flex: none; padding: 0 min(0.75rem, 0.6vw); border-right: 0; font-size: 0.6562rem; letter-spacing: .06em; color: var(--ink-2); box-shadow: inset 0 -0.1875rem 0 transparent; transition: color .2s, box-shadow .25s, background .2s; }
.nav-sub .nav-links a:first-child { padding-left: 0; }
.nav-sub .nav-links a:hover { color: var(--ink); background: rgba(22, 19, 15, .05); }
.nav-sub .nav-links a.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -0.1875rem 0 var(--tomato); }
.nav-sub .nav-note { align-items: center; padding: 0; color: var(--ink-2); }
.nav-tools { display: flex; border-left: 1px solid var(--ink); }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 0.1875rem; background: var(--tomato); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.mast-nav a { transition: background .25s, color .25s; }
.nav-btn { font: 500 0.875rem var(--mono); width: 2.0625rem; display: grid; place-items: center; background: none; border: 0; border-right: 1px solid var(--rule); cursor: pointer; color: var(--ink); padding: 0 !important; }
.nav-btn:hover, .nav-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }


.btn { font: 500 0.75rem var(--mono); letter-spacing: .04em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 0.5rem 0.75rem; cursor: pointer; display: inline-flex; gap: 0.375rem; align-items: center; transition: background .12s, color .12s, transform .12s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); }
.btn[aria-pressed="true"], .btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--tomato); border-color: var(--tomato); }
.chips { display: inline-flex; border: 1px solid var(--ink); }
.chip { font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: .04em; border: 0; border-right: 1px solid var(--ink); background: transparent; padding: 0.5rem 0.6875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink); }
.chip:last-child { border-right: 0; }
.chip i { width: 0.5625rem; height: 0.5625rem; display: inline-block; border-radius: 50%; }
.chip.on { background: var(--ink); color: var(--paper); }
.no-server .server-only { display: none; }

/* ---------- sections ---------- */
main { padding: 0 var(--pad); }
/* each section is exactly one screen below the sticky nav */
.sec { height: calc(100vh - var(--nav-h, 2.375rem)); height: calc(100svh - var(--nav-h, 2.375rem)); min-height: 32.5rem; display: flex; flex-direction: column; padding: clamp(0.75rem, 2.2vh, 1.625rem) 0 clamp(0.75rem, 2.4vh, 1.75rem); border-top: 1px solid var(--ink); position: relative; overflow: hidden; scroll-snap-align: start; }
.sec:first-child { border-top: 0; }
.sec-head { flex: none; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: end; margin-bottom: clamp(0.625rem, 2vh, 1.375rem); }
.sec-no { font-size: 0.8125rem; color: var(--tomato); font-weight: 600; align-self: center; }
.sec h2 { font: 400 clamp(2.125rem, min(5.6vw, 7.4vh), 4.875rem)/.9 var(--serif); letter-spacing: -.025em; margin: 0; }
.sec-body { flex: 1; min-height: 0; position: relative; }
.col { display: flex; flex-direction: column; min-height: 0; }
.chart.fill { flex: 1; min-height: 0; overflow: hidden; }
.fit { position: relative; min-height: 0; height: 100%; overflow: hidden; }
.fit.fit-auto { height: auto; flex: none; overflow: visible; }
.fit-inner { transform-origin: 0 0; }
.deck { margin: 0; color: var(--ink-2); max-width: 56ch; font-size: clamp(0.8125rem, 1.8vh, 0.9375rem); }
.sub { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin: 1.375rem 0 0.625rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }

/* ---------- headline ---------- */
.lede { flex: none; font: 400 clamp(1.375rem, min(3.3vw, 5vh), 3.125rem)/1.1 var(--serif); letter-spacing: -.01em; margin: 0 0 clamp(0.75rem, 2.6vh, 2rem); max-width: 44ch; }
.lede b { font-weight: 400; background: linear-gradient(transparent 62%, rgba(255, 91, 46, .35) 62%); }
.lede i { color: var(--tomato); }
.lede b, .lede i, .lede .amt { font: 400 .82em var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stats { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); border-top: 2px solid var(--ink); }
.stat { padding: clamp(0.5rem, 1.6vh, 1rem) 1.125rem clamp(0.5rem, 1.6vh, 1.125rem) 0; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--rule); overflow: hidden; display: flex; flex-direction: column; }
.stat .spark { margin-top: auto; }
.stat:not(:nth-child(4n+1)) { padding-left: 1.125rem; }
.stat:nth-child(4n) { border-right: 0; }
.stat .k { font: 500 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); display: flex; justify-content: space-between; gap: 0.5rem; }
.stat .v { font: 400 clamp(1.625rem, min(3.2vw, 5.4vh), 3rem)/1.05 var(--sans); letter-spacing: -.01em; margin: clamp(0.25rem, 1.2vh, 0.75rem) 0 clamp(0.25rem, .8vh, 0.5rem); white-space: nowrap; }
.stat .v small { font-size: .45em; color: var(--ink-2); letter-spacing: 0; }
.stat .n { font-size: clamp(0.7188rem, 1.6vh, 0.8125rem); color: var(--ink-2); }
.stat.hero .v { color: var(--tomato); }
.spark { margin-top: 0.5rem; display: block; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.chart text, svg text { font-family: var(--mono); font-size: 10px; }
.axis path, .axis line { stroke: var(--ink); }
.axis .tick line.grid { stroke: var(--rule); stroke-dasharray: 2 3; }
.axis .domain { display: none; }
.axis text { fill: var(--ink-2); }
.anno text { font-size: 10px; }
.anno .big { font: 400 14px var(--sans); }
.legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font: 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0.75rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.legend svg { width: 0.875rem; height: 0.875rem; border: 1px solid var(--ink); }
.band-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.hit { fill: transparent; cursor: pointer; }
.hit:hover { fill: rgba(22, 19, 15, .06); }

.tip { position: fixed; z-index: 100; pointer-events: none; background: var(--ink); color: var(--paper); font: 0.75rem/1.45 var(--mono); padding: 0.625rem 0.75rem; min-width: 11.25rem; max-width: 20rem; box-shadow: 0.3125rem 0.3125rem 0 var(--tomato); opacity: 0; transform: translateY(0.25rem); transition: opacity .1s, transform .1s; }
.tip.on { opacity: 1; transform: none; }
.tip h4 { margin: 0 0 0.375rem; font: italic 400 1.125rem var(--serif); color: #fff; }
.tip .row { display: flex; justify-content: space-between; gap: 1rem; }
.tip .row span:first-child { color: #B9B0A2; }
.tip hr { border: 0; border-top: 1px dashed #5b554c; margin: 0.375rem 0; }
/* colour keys inside the (dark) tooltip get a thin light ring, so a black one — Kaushik's — still shows */
.tip i[style*="background"], .tip .dot, .tip .swatch, .tip .who i, .tip .who-dot, .tip .hm-dot, .tip .dy-dot { box-shadow: 0 0 0 1.5px rgba(241, 236, 225, .9); }

/* ---------- anatomy ---------- */
.scrubber { flex: none; height: 4.625rem; margin-bottom: clamp(0.5rem, 1.6vh, 1.125rem); user-select: none; }
.anatomy { flex: 1; min-height: 0; display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2.5rem; }
.flow-wrap { min-height: 0; }
#facts { width: 21.875rem; padding: 0 0.625rem 0.625rem 0; }
.facts { border: 2px solid var(--ink); background: var(--paper-3); padding: 0.625rem 0.75rem 0.75rem; font-family: var(--sans); box-shadow: 0.5rem 0.5rem 0 var(--ink); }
.facts h3 { font: 800 2.5rem/.95 var(--sans); letter-spacing: -.035em; margin: 0; font-weight: 700; }
.facts .serving { font-size: 0.8125rem; border-bottom: 0.625rem solid var(--ink); padding: 0.25rem 0 0.375rem; display: flex; justify-content: space-between; }
.facts .cal { display: flex; justify-content: space-between; align-items: end; border-bottom: 0.3125rem solid var(--ink); padding: 0.25rem 0; }
.facts .cal b { font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em; }
.facts .cal span { font-weight: 700; }
.facts .dv { text-align: right; font-size: 0.6875rem; font-weight: 700; border-bottom: 1px solid var(--ink); padding: 0.1875rem 0; }
.facts .r { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--ink); padding: 0.1875rem 0; font-size: 0.8438rem; cursor: help; }
.facts .r.ind { padding-left: 1rem; }
.facts .r b { font-weight: 400; }
.facts .r em { font-style: normal; font-weight: 400; min-width: 2.75rem; text-align: right; }
.facts .r .sw { display: inline-block; width: 0.5625rem; height: 0.5625rem; margin-right: 0.375rem; border: 1px solid var(--ink); vertical-align: 0; }
.facts .thick { border-bottom: 0.3125rem solid var(--ink); }
.facts .foot { font-size: 0.6562rem; line-height: 1.35; padding-top: 0.375rem; color: var(--ink-2); display: block; justify-content: initial; padding-left: 0; padding-right: 0; padding-bottom: 0; border-top: 0; }
.facts .r:hover { background: rgba(255, 91, 46, .12); }
.flow-title { flex: none; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .1em; display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 0.5rem; margin-bottom: 0.625rem; }
.flow-link { mix-blend-mode: multiply; transition: opacity .15s; }
.flow-node-label { font: 500 11px var(--mono); }
.flow-node-val { font: 400 10px var(--mono); fill: var(--ink-2); }

/* ---------- raises ---------- */
.split-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2.5rem; }
.events { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.events li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.1875rem; padding: 0.5625rem 0.25rem 0.5625rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; align-items: start; }
.events li:hover { background: rgba(22, 19, 15, .04); }
.events .d { display: flex; align-items: center; font: 0.6875rem/1.9 var(--mono); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.events .t { min-width: 0; font: 400 1.25rem/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events .x { grid-column: 2 / -1; font: 0.75rem var(--mono); color: var(--ink-2); padding-left: 3.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events .t small { display: block; font: 0.75rem var(--mono); color: var(--ink-2); margin-top: 0.1875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.events .c { font: 400 0.9375rem/1.4 var(--sans); text-align: right; white-space: nowrap; }
.events .c.up { color: var(--mint); }
/* a long career (or two) reads as two balanced columns instead of one shrunken list */
.events.two { columns: 2; column-gap: 2rem; column-rule: 1px solid var(--rule); }
.events.two li { break-inside: avoid; grid-template-columns: 4.125rem minmax(0, 1fr) auto; column-gap: 0.625rem; }
.split-2-1:has(.events.two) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.events .c.down { color: var(--tomato); }
.events .tag { display: inline-block; width: 3.25rem; text-align: center; font: 600 0.625rem/1.5 var(--mono); letter-spacing: .1em; padding: 1px 0; color: #fff; margin-right: 0.5rem; vertical-align: 0.1875rem; }

/* ---------- recipe ---------- */
.recipe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; margin-top: clamp(0.5rem, 1.6vh, 1.125rem); border-top: 2px solid var(--ink); }

/* ---------- extras ---------- */
.extras-table { flex: none; margin-top: clamp(0.5rem, 1.6vh, 1.125rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr)); border-top: 2px solid var(--ink); }
.xcell { padding: clamp(0.375rem, 1.2vh, 0.75rem) 1rem clamp(0.375rem, 1.2vh, 0.75rem) 0; border-bottom: 1px solid var(--rule); }
.xcell .k { font: 500 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); display: flex; align-items: center; gap: 0.375rem; }
.xcell .k i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; display: inline-block; }
.xcell .v { font: 400 1.625rem/1.15 var(--sans); margin-top: 0.375rem; }
.xcell .n { font: 0.6875rem var(--mono); color: var(--ink-2); }

/* ---------- tax / pf side panels ---------- */
.panel { border-top: 2px solid var(--ink); padding-top: 0.75rem; margin-bottom: 1.625rem; }
.panel h4 { margin: 0 0 0.5rem; font: 500 0.6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.panel .big { font: 400 2.625rem/1.05 var(--sans); letter-spacing: -.01em; }
.panel p { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.panel .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font: 0.75rem/2 var(--mono); border-bottom: 1px dotted var(--rule); }
.panel .kv > span:first-child { min-width: 0; }
.panel .kv > span:last-child { flex: none; white-space: nowrap; text-align: right; }  /* a figure never breaks from its sign or unit; the label wraps instead */
.regime { display: grid; grid-template-columns: 5.625rem 1fr auto; gap: 0.5rem; align-items: center; font: 0.75rem var(--mono); margin: 0.5rem 0; }
.regime .b { height: 1.375rem; border: 1px solid var(--ink); }
.clock { display: flex; gap: 0.1875rem; margin: 0.625rem 0 0.25rem; }
.clock span { flex: 1; height: 1.875rem; border: 1px solid var(--ink); }
.clock span.done { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%23FF5B2E' stroke-width='2'/%3E%3C/svg%3E"); }
.clock span.now { background: var(--ink); }
#tax-side .panel { margin-bottom: 1.125rem; }
.cal-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.1875rem; margin-top: 0.625rem; }
.cal-days span { aspect-ratio: 2; border: 1px solid var(--ink); font: 0.75rem var(--mono); display: grid; place-items: center; }
.cal-days span.tax { background: var(--tomato); color: #fff; border-color: var(--tomato); }

/* ---------- maps ---------- */
.maps-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "heat heat" "tree india"; gap: clamp(0.5rem, 1.6vh, 1.125rem) 2.25rem; }
.maps-grid > .map-heat { grid-area: heat; }
.maps-grid .sub { margin: 0 0 0.5rem; flex: none; }
#chart-india { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12.5rem, .9fr); gap: 0.875rem; align-items: center; }
.tree-cell rect { stroke: var(--paper); stroke-width: 2; }
.tree-cell text { pointer-events: none; }
.state { fill: #E2DACB; stroke: var(--paper); stroke-width: .7; }
.state.hot { fill: #F4C7B6; }
.state.warm { fill: #D8DCF7; }
.city-label { font: italic 400 20px var(--serif) !important; }
.arc { fill: none; stroke-width: 1.5; stroke-dasharray: 4 3; }
.map-notes { border-top: 1px solid var(--ink); align-self: center; max-height: 100%; overflow: hidden; }
.map-svg { min-height: 0; display: flex; justify-content: center; }
.map-notes > div:not(.map-legend) { display: grid; grid-template-columns: 1.375rem 1fr; gap: 0.5rem; padding: clamp(0.25rem, .8vh, 0.5rem) 0; border-bottom: 1px dotted var(--rule); font-size: clamp(0.6875rem, 1.45vh, 0.8125rem); line-height: 1.4; color: var(--ink-2); }
.map-notes b { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 0.625rem/1.25rem var(--mono); text-align: center; }
.map-notes em { font: italic 400 clamp(0.875rem, 2vh, 1.125rem) var(--serif); color: var(--ink); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font: 0.6562rem var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-top: 0.5rem; color: var(--ink-2); }
.map-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.375rem; vertical-align: -2px; border: 1px solid var(--ink); }

/* ---------- ledger ---------- */

.ledger { width: 100%; border-collapse: collapse; font: 400 0.875rem var(--sans); }
.ledger b { font-weight: 500; }
.ledger th { text-align: right; font-weight: 500; font-size: 0.6562rem; letter-spacing: .08em; text-transform: uppercase; padding: 0.625rem 0.625rem; border-bottom: 2px solid var(--ink); color: var(--ink-2); white-space: nowrap; }
.ledger td { text-align: right; padding: 0.6875rem 0.625rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ledger th:first-child, .ledger td:first-child { text-align: left; padding-left: 0; }
.ledger td.fy { font: 400 1.0625rem var(--sans); }
.ledger td.fy small { font: 0.625rem var(--mono); color: var(--ink-2); margin-left: 0.375rem; }
.ledger tr:hover td { background: rgba(22, 19, 15, .04); }
/* on tall screens the ledger rows open up to use the height (.fit shrinks it back if it ever overflows) */
#ledger td { padding-top: clamp(0.6875rem, 5vh - 1rem, 2.5rem); padding-bottom: clamp(0.6875rem, 5vh - 1rem, 2.5rem); }
.ledger tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 500; }
.ledger .emp { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 2px; }
.ledger .bar { display: inline-block; height: 0.375rem; background: var(--tomato); vertical-align: 1px; margin-left: 0.375rem; }

/* ---------- archive ---------- */

/* ---------- glossary ---------- */
.glossary { columns: 3 18.75rem; column-gap: 2.5rem; margin: 0; }
.glossary div { break-inside: avoid; padding: 0.625rem 0 0.75rem; border-top: 1px solid var(--rule); }
.glossary dt { font: 400 1.375rem var(--serif); display: flex; align-items: center; gap: 0.5rem; }
.glossary dt i { width: 0.625rem; height: 0.625rem; display: inline-block; border: 1px solid var(--ink); }
.glossary dd { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* ---------- drawer / receipt ---------- */
.scrim { position: fixed; inset: 0; background: rgba(22, 19, 15, .45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(28.75rem, 100vw); z-index: 70; transform: translateX(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; padding: 1.625rem 1.625rem 3.75rem; background: var(--paper-2); }
.drawer.open { transform: none; }
.drawer.open ~ .scrim, .scrim.on { opacity: 1; pointer-events: auto; }
.drawer-close { position: absolute; top: 0.875rem; right: 0.875rem; z-index: 2; }
.receipt { background: var(--paper-3); font: 0.8125rem/1.55 var(--mono); padding: 1.625rem 1.375rem 1.875rem; position: relative; margin-top: 1.875rem; box-shadow: 0 1px 0 var(--rule);
  -webkit-mask: radial-gradient(circle 0.375rem at 50% 0, transparent 98%, #000) 0 0/1rem 51% repeat-x, radial-gradient(circle 0.375rem at 50% 100%, transparent 98%, #000) 0 100%/1rem 51% repeat-x;
          mask: radial-gradient(circle 0.375rem at 50% 0, transparent 98%, #000) 0 0/1rem 51% repeat-x, radial-gradient(circle 0.375rem at 50% 100%, transparent 98%, #000) 0 100%/1rem 51% repeat-x; }
.receipt h3 { font: 400 2.5rem/1 var(--serif); margin: 0.25rem 0 2px; text-align: center; }
.receipt .c { text-align: center; color: var(--ink-2); font-size: 0.6875rem; }
.receipt hr { border: 0; border-top: 1px dashed var(--ink); margin: 0.75rem 0; }
.receipt .row { display: flex; justify-content: space-between; gap: 0.625rem; }
.receipt .row.dim { color: var(--ink-2); font-size: 0.7188rem; }
.receipt .row.tot { font-weight: 600; }
.receipt .net { font: 400 2.375rem/1.1 var(--sans); text-align: center; margin: 0.625rem 0 0.25rem; }
.receipt .ok { text-align: center; font-size: 0.6875rem; color: var(--mint); margin-top: 0.625rem; }
.receipt .bad { text-align: center; font-size: 0.6875rem; color: var(--tomato); }
.receipt .sec-t { font-size: 0.6562rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.25rem; }
.receipt .barcode { height: 2.375rem; margin-top: 1rem; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 0.25rem, var(--ink) 0.25rem 0.3125rem, transparent 0.3125rem 0.5rem, var(--ink) 0.5rem 0.6875rem, transparent 0.6875rem 0.75rem); }

/* ---------- misc ---------- */
.modal { position: fixed; inset: 0; z-index: 65; display: grid; place-items: start center; padding: 6vh 1rem; background: rgba(22, 19, 15, .5); opacity: 0; pointer-events: none; transition: opacity .18s; overflow-y: auto; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(47.5rem, 100%); background: var(--paper); border: 2px solid var(--ink); box-shadow: 0.625rem 0.625rem 0 var(--ink); padding: 1.625rem 1.75rem 1.375rem; transform: translateY(0.625rem); transition: transform .2s; }
.modal.open .modal-card { transform: none; }
.modal-close { position: absolute; top: 0.875rem; right: 0.875rem; }
.up-kicker { font-size: 0.6562rem; letter-spacing: .12em; color: var(--tomato); }
.modal-card h3 { font: 400 3.5rem/1 var(--serif); letter-spacing: -.02em; margin: 0.375rem 0 0.5rem; }
.up-deck { margin: 0 0 1.125rem; color: var(--ink-2); max-width: 58ch; font-size: 0.9062rem; }
.up-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin: 0 0 0.875rem; }
.up-who-k { font-size: 0.6562rem; letter-spacing: .12em; font-weight: 600; }
.up-who .seg { padding: 0.4375rem 0.75rem; font-size: 0.6875rem; }
.up-who-hint { flex-basis: 100%; font-size: 0.7812rem; color: var(--ink-2); }
.rv-hint .warn { color: #B8330F; font-weight: 500; }
.rv-hint.rv-who-name { color: #0E7A58; }
.up-drop { display: grid; gap: 0.375rem; place-items: center; text-align: center; padding: 2.125rem 1rem; border: 2px dashed var(--ink); cursor: pointer; background: repeating-linear-gradient(-45deg, transparent 0 0.625rem, rgba(22, 19, 15, .035) 0.625rem 0.6875rem); transition: background .15s, border-color .15s; }
.up-drop:hover, .up-drop.over { background: rgba(255, 91, 46, .1); border-color: var(--tomato); }
.up-drop-big { font: italic 400 2.125rem var(--serif); }
.up-drop .mono { font-size: 0.6875rem; color: var(--ink-2); }
.up-results { list-style: none; padding: 0; margin: 1rem 0 0; }
.up-results > li { border-top: 1px solid var(--ink); padding: 0.75rem 0; }


.up-status { font: 600 0.6875rem var(--mono); letter-spacing: .06em; white-space: nowrap; }
.up-status.ok { color: var(--mint); } .up-status.warn { color: #B07A00; } .up-status.err { color: var(--tomato); } .up-status.busy { color: var(--ink-2); }
.up-msg { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.25rem; }
.up-slips { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.375rem; }
.up-slips li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.75rem; align-items: center; font-size: 0.875rem; padding: 0.375rem 0.625rem; background: var(--paper-3); border: 1px solid var(--rule); }
.up-slips .tag { font: 600 0.625rem var(--mono); letter-spacing: .08em; padding: 2px 0.375rem; color: #fff; background: var(--mint); }
.up-slips .tag.upd { background: #8A8275; }
.up-slips .chk { font: 0.6875rem var(--mono); }
.up-slips .chk.ok { color: var(--mint); } .up-slips .chk.bad { color: var(--tomato); }
.up-slips button { font: 500 0.6875rem var(--mono); text-transform: uppercase; border: 1px solid var(--ink); background: none; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--ink); }
.up-slips button:hover { background: var(--ink); color: var(--paper); }
.up-pass { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.up-pass input { flex: 1; font: 0.875rem var(--mono); padding: 0.5rem 0.625rem; border: 1px solid var(--ink); background: var(--paper-3); color: var(--ink); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1.125rem var(--pad) 1.875rem; border-top: 0.1875rem double var(--ink); font-size: 0.6875rem; color: var(--ink-2); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1.25rem); background: var(--ink); color: var(--paper); padding: 0.75rem 1.125rem; font-size: 0.75rem; opacity: 0; transition: .2s; z-index: 120; box-shadow: 0.3125rem 0.3125rem 0 var(--tomato); max-width: 90vw; white-space: pre-line; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.dropzone { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; background: rgba(241, 236, 225, .92); border: 0.375rem dashed var(--ink); font: italic 400 3.5rem var(--serif); }
.dropzone.on { display: grid; }

body.privacy .amt, body.privacy .stat .v, body.privacy .slip .v, body.privacy .slip .g, body.privacy .ledger td:not(.fy), body.privacy .receipt .row span:last-child, body.privacy .receipt .net, body.privacy .facts .cal b, body.privacy .facts .r b, body.privacy .xcell .v, body.privacy .panel .big, body.privacy .tip .row span:last-child, body.privacy .flow-node-val, body.privacy .events .x, body.privacy .panel .kv span:last-child, body.privacy .axis text, body.privacy svg text.amt, body.privacy .map-notes span, body.privacy .xcell .n { filter: blur(7px); }
body.privacy .field input[type=number] { color: transparent; text-shadow: 0 0 0.875rem var(--ink); }

/* ---------- archive: one sheet, years × months ---------- */
.archive { height: 100%; display: grid; grid-template-columns: 4rem repeat(12, minmax(0, 1fr)) 4.75rem; grid-template-rows: 1.25rem; grid-auto-rows: minmax(0, 1fr); border-top: 2px solid var(--ink); }

.archive .yr { font: 400 clamp(1rem, 2.6vh, 1.5rem) var(--sans); display: flex; align-items: center; border-bottom: 1px solid var(--rule); padding: 0; }


.archive .cell { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.archive .cell.empty { background: repeating-linear-gradient(-45deg, transparent 0 0.375rem, rgba(22,19,15,.05) 0.375rem 0.4375rem); }
.slip { flex: 1; min-height: 0; padding: clamp(0.1875rem, .8vh, 0.5rem) 0.4375rem clamp(0.1875rem, .8vh, 0.5rem) 0.5625rem; border: 0; cursor: pointer; position: relative; background: transparent; text-align: left; font: inherit; color: inherit; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.slip + .slip { border-top: 1px dashed var(--rule); }
.slip:hover { background: var(--ink); color: var(--paper); }
.slip:hover .m, .slip:hover .g { color: #B9B0A2; }
.slip .m { font: 500 0.6562rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; gap: 0.25rem; white-space: nowrap; }
.slip .v { font: 400 clamp(0.75rem, min(1.25vw, 2.2vh), 1.0625rem)/1.15 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.slip .g { font: 400 0.625rem var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip .e { position: absolute; left: 0; top: 0; bottom: 0; width: 0.1875rem; }
.slip .flag { font: 600 0.625rem var(--mono); padding: 0 0.1875rem; background: var(--tomato); color: #fff; letter-spacing: .04em; }
.slip .up { position: static; font: 600 0.625rem var(--mono); color: var(--tomato); }

/* ---------- §13 ticker ---------- */
.sec.sec-ticker { height: auto; min-height: 0; padding: 0; border-top: 0.1875rem double var(--ink); border-bottom: 1px solid var(--ink); scroll-snap-align: end; }
.ticker { display: flex; align-items: stretch; height: 5.25rem; margin: 0 calc(-1 * var(--pad)); background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker-tag { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 1.375rem 0 var(--pad); background: var(--tomato); color: #fff; position: relative; z-index: 2; box-shadow: 0.875rem 0 1.125rem -0.375rem rgba(22,19,15,.9); }
.ticker-tag span { font-size: 0.625rem; letter-spacing: .14em; opacity: .9; }
.ticker-tag b { font: 400 1.3125rem/1 var(--serif); }
.ticker-track { display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: crawl var(--crawl, 240s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0 1.625rem; font-size: 1rem; }
.ticker-item i { width: 0.6875rem; height: 0.6875rem; flex: none; border: 1px solid var(--paper); }
.ticker-item b { font: italic 400 1.5rem var(--serif); color: #fff; }
.ticker-item span { color: #D9D1C3; }
.ticker-item::after { content: "◆"; margin-left: 1.625rem; color: var(--tomato); font-size: 0.6875rem; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation-duration: 900s; } }

/* ---------- review / edit modal ---------- */
.modal-card.wide { width: min(85rem, 100%); height: calc(100vh - 8vh); display: flex; flex-direction: column; padding: 1.25rem 1.5rem 1.125rem; }
.modal-card.wide .modal-close { top: 1.125rem; right: 1.125rem; }
[hidden] { display: none !important; }
#step-review { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rv-head { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem; padding-right: 3.125rem; }
.rv-head h3 { font-size: 2.5rem !important; margin: 2px 0 0 !important; }
.rv-actions { display: flex; gap: 0.5rem; align-items: center; }
.rv-queue { font-size: 0.6875rem; color: var(--ink-2); margin-right: 0.375rem; }
.rv-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.75rem 0 0.625rem; }
.rv-tabs button { font: 500 0.6875rem var(--mono); text-transform: uppercase; border: 1px solid var(--ink); background: none; padding: 0.3125rem 0.5625rem; cursor: pointer; color: var(--ink); display: inline-flex; gap: 0.375rem; align-items: center; }
.rv-tabs button.on { background: var(--ink); color: var(--paper); }
.rv-tabs button i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--mint); }
.rv-tabs button i.bad { background: var(--tomato); }
.rv-tabs button i.dirty { background: var(--marigold); }
.rv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(32.5rem, 1.2fr); gap: 1.25rem; }
.rv-pdf { border: 1px solid var(--ink); background: #fff; min-height: 0; display: flex; flex-direction: column; }
.rv-pdf-bar { flex: none; display: flex; justify-content: space-between; font-size: 0.6562rem; letter-spacing: .08em; padding: 0.375rem 0.625rem; border-bottom: 1px solid var(--ink); background: var(--paper-2); }
.rv-pdf-bar a { text-decoration: none; }
.rv-pdf-bar a:hover { color: var(--tomato); }
.rv-pdf-img { flex: 1; min-height: 0; overflow: auto; background: #E9E6E0; }
.rv-pdf-img img { display: block; width: 100%; height: auto; background: #fff; }
.rv-pdf-img img.loading { opacity: .35; }
.rv-form { min-height: 0; overflow-y: auto; padding-right: 0.375rem; font-size: 0.8125rem; }
.rv-note { background: rgba(245, 183, 0, .16); border-left: 0.1875rem solid var(--marigold); padding: 0.4375rem 0.625rem; font-size: 0.7812rem; margin-bottom: 0.625rem; }
.rv-row { display: grid; gap: 0.625rem; margin-bottom: 0.625rem; }
.rv-row.c4 { grid-template-columns: 1.4fr .8fr .7fr 1fr; }
.rv-row.c-who { grid-template-columns: minmax(12.5rem, 1fr) 1.4fr; align-items: end; }
.rv-hint { margin: 0 0 0.375rem; font-size: 0.75rem; color: var(--ink-2); }
.rv-row.c4b { grid-template-columns: 1.2fr 1fr .6fr .6fr; }
.rv-f { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.rv-f > span { font: 500 0.625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rv-form input, .rv-form select { font: 400 0.8438rem var(--sans); padding: 0.375rem 0.5rem; border: 1px solid var(--ink); background: var(--paper-3); color: var(--ink); min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.rv-form input:focus, .rv-form select:focus { outline: 2px solid var(--tomato); outline-offset: -1px; }
.rv-form input.num { text-align: right; }
.rv-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.25rem; }
.rv-lines h4 { font: 500 0.6562rem var(--mono); letter-spacing: .1em; margin: 0.375rem 0 0.375rem; padding-bottom: 0.3125rem; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; }
.rv-line { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(4.625rem, .8fr) 5.375rem 1.5rem; gap: 0.25rem; margin-bottom: 0.25rem; }
.rv-line select { padding-left: 0.25rem; padding-right: 2px; font-size: 0.75rem; }
.rv-line button, .rv-add { border: 1px solid var(--ink); background: none; cursor: pointer; color: var(--ink); font: 0.75rem var(--mono); }
.rv-line button:hover { background: var(--tomato); color: #fff; border-color: var(--tomato); }
.rv-add { padding: 0.3125rem 0.5rem; text-transform: uppercase; font-size: 0.6562rem; letter-spacing: .06em; margin-top: 2px; }
.rv-add:hover { background: var(--ink); color: var(--paper); }
.rv-totals { margin-top: 0.875rem; border-top: 2px solid var(--ink); padding-top: 0.625rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.rv-chk { font: 0.6875rem var(--mono); margin-top: 0.1875rem; display: flex; justify-content: space-between; gap: 0.375rem; }
.rv-chk.ok { color: var(--mint); } .rv-chk.bad { color: var(--tomato); }
.rv-chk button { font: 0.625rem var(--mono); border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; padding: 0 0.3125rem; }
.rv-status { margin-top: 0.75rem; padding: 0.5rem 0.625rem; font: 500 0.75rem var(--mono); }
.rv-status.ok { background: rgba(31, 163, 122, .12); color: #0E7A58; }
.rv-status.bad { background: rgba(255, 91, 46, .12); color: #B8330F; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.875rem; }
.receipt .edited { text-align: center; font: 600 0.625rem var(--mono); color: #B07A00; letter-spacing: .08em; margin-top: 0.375rem; }


/* ---------- people: selector + household elements ---------- */
.person-switch { display: inline-flex; border: 2px solid var(--ink); background: var(--paper-3); }
.seg { font: 600 0.75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0.5rem 0.875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4375rem; }
.seg:last-child { border-right: 0; }
.seg i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--c); display: inline-block; }
.seg:hover { background: rgba(22, 19, 15, .08); }
.seg.on { background: var(--ink); color: var(--paper); }
.seg.on i { box-shadow: 0 0 0 2px var(--paper); }
.nav-person { display: flex; border-right: 1px solid var(--ink); }
.nav-seg { font: 600 0.6562rem var(--mono); letter-spacing: .04em; text-transform: uppercase; border: 0; border-right: 1px solid var(--rule); background: none; color: var(--ink); padding: 0 0.5625rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3125rem; }
.nav-seg .ini { display: none; }

.nav-seg i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c); }
.nav-seg:hover { background: rgba(22, 19, 15, .08); }
.nav-seg.on { background: var(--tomato); color: #fff; }
.nav-seg.on i { box-shadow: 0 0 0 1.5px #fff; }
.who { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; }
.who i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c); display: inline-block; }
.multi { color: var(--c); margin-right: 0.625rem; }
.multi small { font-size: .42em; letter-spacing: .04em; }
.stat.hero .multi { color: var(--c); }
.share-bar { display: flex; height: 0.5rem; border: 1px solid var(--ink); margin-top: 0.5rem; }

.share-bar span { display: block; height: 100%; }
.who-dot { display: inline-grid; place-items: center; width: 0.9375rem; height: 0.9375rem; border-radius: 50%; background: var(--c); color: #fff; font: 600 0.5938rem var(--mono); margin-right: 0.3125rem; vertical-align: 1px; letter-spacing: 0; }

.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.375rem; vertical-align: 0; }
.facts .who-row { background: rgba(22, 19, 15, .05); border-left: 0.25rem solid var(--c); padding-left: 0.375rem; }
.facts .who-row strong { font-weight: 700; }
.facts .r.ind2 { padding-left: 1rem; font-size: 0.7812rem; }
/* household label: each person's ingredients side by side */
.facts .fsplit { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 0.875rem; border-bottom: 0.3125rem solid var(--ink); }
.facts .fcol { display: flex; flex-direction: column; min-width: 0; }
.facts .fcol .r.ind2 { padding-left: 0.375rem; }
.facts .fcol .r.fnet { margin-top: auto; border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 600; }
.facts .fcol .r.fnet b { font-weight: 600; }
#facts:has(.fsplit[style*="--n:2"]) { width: 31.5rem; }
.anatomy:has(.fsplit[style*="--n:2"]) { grid-template-columns: 32.125rem minmax(0, 1fr); gap: 1.75rem; }
#chart-recipe.chart.fill { display: flex; flex-direction: column; gap: 0.375rem; }
.recipe-row { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.375rem; }
.recipe-who { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 0.6875rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--c); text-align: center; padding: 0.375rem 0; }
.recipe-plot { min-height: 0; overflow: hidden; }
.archive.dense .slip { padding: 1px 0.3125rem 1px 0.5rem; }
.archive.dense .slip .m { font-size: 0.5938rem; }
.archive.dense .slip .v { font-size: clamp(0.6875rem, min(1.05vw, 1.7vh), 0.875rem); }
.archive.dense .slip .g { display: none; }
.archive.dense .who-dot { width: 0.8125rem; height: 0.8125rem; font-size: 0.5625rem; margin-right: 0.1875rem; }
.hh-head { font-size: 0.6875rem; letter-spacing: .1em; margin: 2.125rem 0 -1.125rem; color: var(--ink-2); }
.receipt + .receipt { margin-top: 1.125rem; }
.receipt .who-line { font: 600 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); display: flex; justify-content: center; align-items: center; gap: 0.375rem; }
.receipt .who-line i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
body[data-mode="both"] .ledger th, body[data-mode="both"] .ledger td { padding-left: 0.4375rem; padding-right: 0.4375rem; }
body.privacy .who .amt, body.privacy .multi { filter: blur(0.4375rem); }


/* ---------- tax page ---------- */
.ay-chips { flex: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: clamp(0.5rem, 1.6vh, 1rem); }
.ay-chip { font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0.4375rem 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4375rem; }
.ay-chip small { font-weight: 400; color: var(--ink-2); font-size: 0.625rem; }
.ay-chip i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; display: inline-block; }
.ay-chip:hover { background: rgba(22, 19, 15, .08); }
.ay-chip.on { background: var(--ink); color: var(--paper); }
.ay-chip.on small { color: #B9B0A2; }
.rfacts .r.rf { display: grid; grid-template-columns: 1fr auto; gap: 0.625rem; }
.rfacts.multi .r.rf, .rfacts.multi .rf-cols { grid-template-columns: 1.5fr repeat(2, 1fr); }
/* two people side by side need a wider label, or it wraps and gets shrunk to fit */
.anatomy:has(.rfacts.multi) { grid-template-columns: 27.5rem minmax(0, 1fr); }
.rfacts.multi { width: 27rem; }
.rfacts .r.rf b { font-weight: 400; text-align: right; }
.rfacts .r.rf.cal2 { font-weight: 700; border-bottom: 0.3125rem solid var(--ink); font-size: 0.9375rem; }
.rfacts .r.rf.cal2 b { font-weight: 400; font-size: 1.0625rem; }
.rfacts .r.rf.thick { border-bottom: 0.3125rem solid var(--ink); font-weight: 700; }
.rfacts .rf-cols { display: grid; font: 600 0.625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0.25rem 0; border-bottom: 1px solid var(--ink); text-align: right; }
.rfacts .cal b { font-size: 1.5rem; }
.rfacts b.dt { font-size: 0.75rem; white-space: nowrap; }
.rfacts .r.rf > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfacts .r.rf.rf-out b { font-size: 1.375rem; }
.rfacts .r.rf.rf-out { border-top: 0.3125rem solid var(--ink); }
table.checks { width: 100%; border-collapse: collapse; font: 0.8125rem var(--sans); }
table.checks th, table.checks td { border-bottom: 1px solid var(--rule); padding: 0.4375rem 0.5rem; text-align: center; }
table.checks thead th { font: 600 0.6875rem var(--mono); letter-spacing: .06em; border-bottom: 2px solid var(--ink); }
table.checks thead th small { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.6562rem; }
table.checks tbody th { text-align: left; font: 500 0.7188rem var(--mono); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
table.checks td span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; font-weight: 700; }
table.checks td.ok span { background: rgba(31, 163, 122, .16); color: #0E7A58; }
table.checks td.warn span { background: var(--tomato); color: #fff; }
table.checks td.info span { background: rgba(245, 183, 0, .3); color: #7A5A00; }
table.checks td.na { color: var(--muted); }
/* one person's matrix is half as tall: give its rows room so the table fills the section instead of hugging the top */
body[data-mode="single"] table.checks { font-size: 0.9375rem; }
body[data-mode="single"] #check-matrix { height: 100%; display: flex; flex-direction: column; }
body[data-mode="single"] #check-matrix table.checks { flex: 1 1 auto; max-height: 34rem; }
body[data-mode="single"] table.checks tbody th { font-size: 0.8125rem; }
body[data-mode="single"] table.checks td span { width: 1.875rem; height: 1.875rem; }
table.checks td { cursor: help; }


.check-key { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin-top: 0.625rem; font-size: 0.6875rem; color: var(--ink-2); }
.check-key .ok { color: #0E7A58; } .check-key .warn { color: #B8330F; } .check-key .info { color: #7A5A00; }
.note { border-left: 0.25rem solid var(--marigold); background: rgba(245, 183, 0, .1); padding: 0.5rem 0.75rem; margin-bottom: 0.625rem; }
.note.warn { border-left-color: var(--tomato); background: rgba(255, 91, 46, .08); }

.note p { margin: 0.25rem 0 0; font-size: 0.8438rem; color: var(--ink-2); }
.sec-tags { margin-left: 0.375rem; }
.sec-tags i { font: 600 0.625rem var(--mono); font-style: normal; border: 1px solid var(--ink-2); padding: 0 0.1875rem; margin-left: 0.1875rem; color: var(--ink-2); }
.sec-key { font-size: 0.6562rem; color: var(--ink-2); }
.deck-link { font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tomato); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.deck-link:hover { color: var(--ink); }

table.vault { width: 100%; border-collapse: collapse; }
table.vault th, table.vault td { border-bottom: 1px solid var(--rule); padding: 0.5rem 0.375rem; text-align: center; }
table.vault thead th { font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
table.vault tbody th { text-align: left; font: 400 1.125rem var(--sans); white-space: nowrap; border-right: 1px solid var(--rule); }
table.vault tbody th small { display: block; font: 0.625rem var(--mono); color: var(--ink-2); }
table.vault td a { display: inline-grid; place-items: center; min-width: 2.125rem; height: 1.75rem; text-decoration: none; font: 600 0.8125rem var(--mono); border: 1px solid transparent; }
table.vault td.have a { background: rgba(31, 163, 122, .12); color: #0E7A58; }
table.vault td.have a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
table.vault td.lock a { background: rgba(255, 91, 46, .12); }
table.vault td.miss { color: var(--muted); }
table.vault sup { font-size: 0.625rem; margin-left: 2px; }

body[data-page="tax"] .mast-title { letter-spacing: -.03em; }


/* ---------- tax vault sheet + document receipts ---------- */





.vault-key { flex: none; }
.receipt .row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.5rem; }
.receipt .row3 span:nth-child(n+2) { text-align: right; }
.receipt .row3.hdr { font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; }
.receipt .row3.tot, .receipt .row.tot { font-weight: 600; }
.receipt .diff { color: var(--tomato); font-style: normal; font-weight: 700; }
.receipt .sub-l { display: block; font-size: 0.6562rem; color: var(--ink-2); }
.receipt .row > span:first-child { min-width: 0; }
.receipt .row.src { display: block; }
.receipt .row.src span { display: block; }
.receipt .row.src span:last-child { word-break: break-all; margin-top: 2px; }
.receipt .rc-note { font-size: 0.7188rem; color: var(--ink-2); margin: 0.5rem 0; line-height: 1.45; }
body.privacy .receipt .row3 span:nth-child(n+2) { filter: blur(0.4375rem); }

/* ---------- accounts page ---------- */
body[data-page="accounts"] .mast-title { letter-spacing: -.035em; }




.payee-list .kv { cursor: pointer; }
.payee-list .kv:hover { background: rgba(22, 19, 15, .05); }
#a-cards .sec-body { gap: clamp(0.5rem, 1.6vh, 1rem); }
.card-faces { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14.375rem, 18.75rem)); gap: 1rem; }













.sec-body.col > .split-2-1 { flex: 1; min-height: 0; }
.flow-title > span + span { margin-left: 0.75rem; text-align: right; }

#chart-calendar { flex: none; }
















.receipt .row.tx { font-size: 0.75rem; border-bottom: 1px dotted var(--rule); padding: 2px 0; }
.receipt .row.tx span:last-child { white-space: nowrap; }
.receipt h3 .dot { vertical-align: 0.25rem; }
.rv-grid-acct { grid-template-columns: minmax(0, .9fr) minmax(32.5rem, 1.2fr); }
.rv-acct .panel { margin-bottom: 0.5rem; }
.rv-tx-h { font-size: 0.6562rem; letter-spacing: .1em; margin: 0.625rem 0 0.25rem; }
table.rv-tx { font-size: 0.7812rem; }
table.rv-tx td, table.rv-tx th { padding: 0.25rem 0.375rem; }
table.rv-tx td.desc { text-align: left; white-space: normal; font: 0.6875rem var(--mono); color: var(--ink-2); }
table.rv-tx th:nth-child(2) { text-align: left; }
table.rv-tx td.cr { color: #0E7A58; }
/* Microsoft review: every figure is editable in place; the ones the cross-checks couldn't confirm are marked */
.rv-checks { margin-bottom: 0.75rem; max-height: 11rem; overflow-y: auto; }
.rv-checks .rv-chk { margin: 0 0 0.1875rem; }
.rv-checks .rv-chk small { color: var(--ink-2); font-weight: 400; }
table.rv-edit td { padding: 0.1875rem 0.25rem; }
table.rv-edit { table-layout: fixed; }
table.rv-edit th { white-space: normal; font-size: 0.5938rem; }
table.rv-edit input { width: 100%; min-width: 0; font: 0.75rem var(--mono); padding: 0.1875rem 0.3125rem; border: 1px solid var(--rule); background: var(--paper-3); color: var(--ink); }
table.rv-edit input[type="date"] { font-size: 0.6875rem; padding-inline: 0.125rem; }
table.rv-edit th:nth-child(1) { width: 18%; } table.rv-edit th:nth-child(2) { width: 16%; }
table.rv-edit input.num { text-align: right; }
.rv-f.unsure input, table.rv-edit input.unsure { border-color: var(--tomato); background: rgba(255, 91, 46, .08); }
.rv-f.unsure > span::after { content: " · check"; color: #B8330F; }
body.privacy table.rv-tx td:not(.desc) { filter: blur(7px); }

/* ---------- front page: the household at a glance ---------- */
body.home { height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
body.home .mast-title { font-size: clamp(3.25rem, min(8vw, 11vh), 7.5rem); }
body.home .mast-seal { width: clamp(4.5rem, min(7vw, 11vh), 6.5rem); margin-top: 0.5rem; }
body.home .mast-row { padding-bottom: clamp(0.5rem, 1.6vh, 1.25rem); align-items: center; }
body.home .mast-deck { margin: 0 0 0.375rem; font-size: clamp(1.375rem, min(2.2vw, 3.6vh), 2.125rem); max-width: 30ch; }
.hm-brief { margin: 0; max-width: 46ch; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); }
.nav-note { align-items: center; padding: 0 0.75rem; font-size: 0.6562rem; letter-spacing: .06em; color: var(--ink-2); }
.dash { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 0.95fr); grid-template-rows: minmax(0, 1fr); gap: 0; padding: clamp(0.625rem, 2vh, 1.375rem) var(--pad) 0; }
.dcard { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 0 clamp(1rem, 2vw, 2rem) clamp(0.5rem, 1.6vh, 1rem); border-left: 1px solid var(--rule); }
.dcard:first-child { padding-left: 0; border-left: 0; }
.d-eds { padding-right: 0; }
.dk { display: flex; align-items: baseline; gap: 0.625rem; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); margin-bottom: clamp(0.5rem, 1.5vh, 1rem); }
.dk b { color: var(--tomato); font-weight: 600; }
.dk span { font-weight: 600; }
.dk em { margin-left: auto; font-style: normal; color: var(--ink-2); letter-spacing: .08em; }
.hm-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); margin-right: 0.375rem; vertical-align: 0.05em; flex: none; }
.hm-wait { color: var(--muted); font-style: italic; }
.dash .up { color: #0E7A58; } .dash .down { color: #B8330F; }

/* 01 · where you stand */
.dw-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: clamp(0.625rem, 1.8vh, 1.25rem); }
.dw-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; }
.dw-v > b { font: 400 clamp(2.75rem, min(4.4vw, 7.2vh), 4.75rem)/.95 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dw-delta { display: flex; flex-direction: column; gap: 0.125rem; }
.dw-delta i { font: 500 1.0625rem var(--sans); font-style: normal; }
.dw-delta i small { font-size: .8em; font-weight: 400; margin-left: 0.25rem; }
/* the change sits beside the big number (two short lines at most), so the three groups below keep their rows */
@media (min-width: 721px) { .dw-v { flex-wrap: nowrap; } .dw-delta { flex: 1; min-width: 0; } .dw-delta > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; } }
.dw-delta > small { font: 0.7188rem var(--mono); color: var(--ink-2); }
/* own − owe = net worth */
.dw-eq { display: flex; align-items: flex-end; gap: 0.625rem; width: 100%; font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.dw-eq .eq-read { margin-left: auto; align-self: flex-end; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dw-eq > span { display: flex; flex-direction: column; min-width: 0; }
.dw-eq small { font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dw-eq b { font: 400 clamp(1.125rem, min(1.7vw, 2.8vh), 1.5rem)/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.dw-eq em { font-style: normal; font-size: 0.625rem; color: var(--ink-2); white-space: nowrap; }
.dw-eq > i { font: 400 1.25rem/1.2 var(--sans); font-style: normal; color: var(--ink-2); padding-bottom: 0.125rem; }
.dw-eq .eq-owe b { color: #B8330F; }
.dw-eq .eq-net b { font-weight: 500; }
body.privacy .dw-eq b { filter: blur(0.4375rem); }
.dws-bar { display: flex; height: 0.375rem; gap: 2px; }
.dws-bar span { display: block; }
.dws-k { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.875rem; }
.dws-k .amt { font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.dw-groups { flex: 1; display: flex; flex-direction: column; gap: clamp(0.625rem, 1.8vh, 1.125rem); }
.dwg-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.625rem; }
.dwg-h b { font: 400 1.375rem/1.1 var(--serif); }
.dwg-h small { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwg-h > span { font: 400 1.1875rem var(--sans); font-variant-numeric: tabular-nums; }
.dwg-h em { font: 500 0.6875rem var(--mono); font-style: normal; color: var(--ink-2); margin-left: 0.5rem; }
.dwg-bar { height: 0.75rem; margin: 0.375rem 0; background: repeating-linear-gradient(-45deg, transparent 0 0.25rem, rgba(22,19,15,.07) 0.25rem 0.3125rem); }
.dwg-bar > div { display: flex; height: 100%; gap: 1px; }
.dwg-bar span { display: block; height: 100%; min-width: 2px; }
.dwg-parts { display: flex; flex-wrap: wrap; gap: 0.1875rem 1rem; font-size: 0.8125rem; color: var(--ink-2); }
.dwg-parts i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.3125rem; }
.dwg-parts .amt { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 0.125rem; }
.dw-foot { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.6562rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid var(--rule); }
.dw-foot .owed { color: #B8330F; }
.dw-foot .amt { font: 400 0.8125rem var(--sans); letter-spacing: 0; color: var(--ink); }

/* 02 · money in & out */
.dm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 0.75rem; }
.dmk { display: flex; flex-direction: column; min-width: 0; padding-left: 0.625rem; border-left: 1px solid var(--rule); }
.dmk:first-child { padding-left: 0; border-left: 0; }
.dmk-k { font-size: 0.6562rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dmk > b { white-space: nowrap; font: 400 clamp(1.375rem, min(1.85vw, 3.4vh), 2rem)/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dmk > small { font-size: 0.75rem; line-height: 1.3; color: var(--ink-2); }
.dmk-vs { font: 500 0.625rem var(--mono); letter-spacing: -.01em; margin: 0.125rem 0; color: var(--ink-2); white-space: nowrap; }
.dm-chart { flex: 1; min-height: 0; margin: clamp(0.375rem, 1.4vh, 0.875rem) 0 0.375rem; }
.dm-chart svg { display: block; }
.dm-x { font: 500 9.5px var(--mono); fill: var(--ink-2); letter-spacing: .04em; }
.dm-foot { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.dm-foot b { font: 600 0.6562rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-right: 0.375rem; }
.dm-foot .amt { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 03 · the pages: a card each, stacked */
.d-eds { gap: 0; }
.ded { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "k s" "v s" "n n"; align-content: center; gap: 0.125rem 1rem; padding: clamp(0.375rem, 1.2vh, 0.75rem) 0 clamp(0.375rem, 1.2vh, 0.75rem) 0.875rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background .2s; }
.ded:last-child { border-bottom: 0; }
.ded::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 0.25rem; background: var(--ed); transform: scaleY(.35); transition: transform .35s cubic-bezier(.2, .9, .2, 1); }
.ded:hover::before, .ded:focus-visible::before { transform: none; }
.ded:hover { background: rgba(22, 19, 15, .035); }
.ded-k { grid-area: k; font-size: 0.6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ded-k i { font-style: normal; display: inline-block; opacity: .5; transition: transform .25s, opacity .2s; }
.ded:hover .ded-k { color: var(--ed); }
.ded:hover .ded-k i { opacity: 1; transform: translateX(0.25rem); }
.ded-v { grid-area: v; font: 400 clamp(1.5rem, min(2.2vw, 3.9vh), 2.375rem)/1.05 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ded-n { grid-area: n; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ded-n .amt { color: var(--ink); }
.ded-spark { grid-area: s; width: clamp(4.5rem, 7vw, 8rem); height: 1.875rem; align-self: center; }
.ded-spark svg { display: block; }
.ded-mix { display: flex; height: 0.75rem; gap: 1px; }
.ded-mix i { display: block; }
/* when a column is short of room, drop the least important lines rather than scroll */
.d-worth.tight .dwg-h small, .d-worth.tight .dws-bar { display: none; }
.d-worth.tight .dw-groups { gap: 0.5rem; }
.d-worth.tighter .dw-delta > small { display: none; }
.d-worth.tighter .dw-head { margin-bottom: 0.5rem; gap: 0.25rem; }
.d-worth.tighter .dwg-parts { font-size: 0.75rem; gap: 0.125rem 0.75rem; }
.d-worth.tightest .dwg-parts { display: none; }
.d-month.tight .dmk > small:last-child { display: none; }
.d-month.tighter .dm-foot > span:last-child { display: none; }
body.enter .dcard { animation: fade-up .6s cubic-bezier(.2, .8, .2, 1) both; }
body.enter .dcard:nth-child(2) { animation-delay: .06s; }
body.enter .dcard:nth-child(3) { animation-delay: .12s; }
.home-foot { flex: none; padding: 0.625rem var(--pad) 0.75rem; }
/* the front page's phone button + its pop-up (QR code and PIN for opening the ledger on a phone) */
/* employer logos (js/logos.js): one text-height tall, just before the name */
.co-logo { display: inline-block; height: 0.82em; width: 0.82em; vertical-align: -0.06em; margin-right: 0.3em; object-fit: contain; }
.co-logo[src$="deloitte.png"], .co-logo[src$="regalia.png"] { border-radius: 2px; }
.co-logo.brand.on-dark { background: #fff; border-radius: 2px; padding: 1px; box-sizing: content-box; }
/* Wipro's logo is the word inside its ring of dots: wider than a square mark and drawn a little larger so the word reads */
.co-logo[src$="/wipro-ring.png"], .co-logo[src$="/wipro-ring-light.png"] { width: auto; height: 1.3em; vertical-align: -0.34em; margin-top: -0.24em; margin-bottom: -0.24em; margin-right: 0.25em; }
/* wordmarks stand in for the name: about as wide as the word they replace */
.co-word { display: inline-block; width: auto; height: 0.95em; vertical-align: -0.12em; margin: 0 0.04em; }
.co-word.co-microsoft { height: 1.06em; vertical-align: -0.17em; }
.co-word.co-capgemini { height: 1.08em; vertical-align: -0.3em; }
.co-word.co-deloitte { height: 0.78em; vertical-align: -0.04em; }
.co-word.co-accenture { height: 1.02em; vertical-align: -0.08em; }
.co-word.co-regalia { height: 0.66em; vertical-align: 0.02em; margin: 0 0.12em 0 0.02em; }
.nav-phone { position: relative; }
.nav-phone svg { display: block; }
.np-dot { position: absolute; top: 0.4375rem; right: 0.375rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #1FA37A; box-shadow: 0 0 0 2px var(--paper); }
.ph-card { width: min(46rem, 100%); }
.ph-card h3 em { color: var(--tomato); font-style: normal; }







.ph-url { display: block; margin: 0.125rem 0 0.25rem; padding: 0; border: 0; background: none; font-size: 1rem; font-weight: 600; cursor: copy; color: var(--ink); text-align: left; }
.ph-url:hover { text-decoration: underline; }

.ph-small { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.45; border-top: 1px solid var(--rule); padding-top: 0.625rem; margin: 1rem 0 0; }


.ph-err { color: #B8330F; font-size: 0.875rem; margin: 0.25rem 0 0.75rem; }
.ph-wait { color: var(--muted); font-style: italic; }

body.privacy .dash .amt, body.privacy .dw-v > b { filter: blur(0.4375rem); }
@media (max-width: 1100px), (max-height: 560px) {
  body.home { height: auto; overflow: visible; }
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .dcard { overflow: visible; }
  .d-month { grid-column: 1 / -1; order: 3; border-left: 0; padding: 1rem 0 0; }
  .d-eds { padding-right: 0; }
  .dm-chart { height: 12rem; flex: none; }
  .ded { flex: none; }
}
@media (max-width: 720px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dcard { padding: 0 0 1.25rem !important; border-left: 0; }
  .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
  .dmk:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ---------- investments page ---------- */
body[data-page="investments"] .mast-title { letter-spacing: -.04em; font-size: clamp(4.75rem, 12.5vw, 12.25rem); }
.mixbar { flex: none; display: flex; height: 2.125rem; border: 1px solid var(--ink); margin-bottom: clamp(0.5rem, 1.6vh, 1rem); }
.mixbar span { display: flex; flex-direction: column; justify-content: center; padding: 0 0.5rem; min-width: 0; overflow: hidden; color: #fff; border-right: 1px solid var(--paper); }
.mixbar b { font: 600 0.6562rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mixbar i { font: 400 0.75rem var(--sans); font-style: normal; }



.bar-label { font: 500 10.5px var(--mono) !important; fill: var(--ink); }
.bar-gain { font: 400 11px var(--sans) !important; }
.bar-right { font: 500 10.5px var(--mono) !important; fill: var(--ink-2); }
.inv-empty { height: 100%; display: grid; place-items: center; }
.kv b.up, .kv .up, .panel .up, b.up { color: #0E7A58; font-weight: 500; }
.kv b.down, .kv .down, .panel .down, b.down { color: #B8330F; font-weight: 500; }
.kv.tot { font-weight: 600; border-bottom: 2px solid var(--ink); }
.stat .v .up { color: #0E7A58; } .stat .v .down { color: #B8330F; }
.stat .v .arw { font-size: .45em; vertical-align: .45em; margin-right: .2em; color: inherit !important; }

#plot-panels { columns: 2 17.5rem; column-gap: 2rem; }
#plot-panels .panel { break-inside: avoid; margin-bottom: clamp(1.125rem, 5vh - 1.5rem, 3rem); }
#plot-panels .panel .kv { padding: clamp(0rem, 2vh - 0.9rem, 0.5rem) 0; }



.plot-progress { height: 0.75rem; border: 1px solid var(--ink); background: repeating-linear-gradient(-45deg, transparent 0 0.3125rem, rgba(22,19,15,.08) 0.3125rem 0.375rem); margin: 0.25rem 0 0.5rem; }
.plot-progress span { display: block; height: 100%; background: #0B6E75; }
.plot-progress.done span { background: var(--mint); }
#plot-panels .ay-chips { margin-bottom: 0.375rem; }
/* Microsoft stock in dollars and rupees */
.cur-chips { margin-bottom: 0.625rem; }
.cur-chips .ay-chip { padding: 0.25rem 0.5rem; font-size: 0.625rem; }
.panel .big .cur-sub { display: block; font: 400 0.9375rem var(--mono); color: var(--ink-2); margin-top: 0.25rem; letter-spacing: 0; }
.cur-alt { color: var(--ink-2); }









/* the vesting cycle: awards × vest windows */
table.cycle { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
table.cycle th, table.cycle td { text-align: center; padding: 0.3125rem 0.125rem; font-weight: 400; }
table.cycle thead th.yr { font: 500 0.75rem var(--mono); letter-spacing: .08em; text-align: left; padding-left: 0.375rem; border-bottom: 1px solid var(--ink); }
table.cycle thead th.mo { font: 0.6875rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); position: relative; padding-top: 0.5rem; }
table.cycle tbody th, table.cycle tfoot th { text-align: left; white-space: nowrap; font: 500 0.875rem var(--sans); padding-right: 1rem; }
table.cycle tbody th small, table.cycle tfoot th small { display: block; font: 400 0.6875rem var(--mono); color: var(--ink-2); }
table.cycle tbody tr { border-bottom: 1px dotted var(--rule); }
.cy b { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; font: 500 0.9375rem var(--sans); color: #0078D4; border: 1.5px dashed #0078D4; background: rgba(0, 120, 212, .06); }
.cy.past b { background: #0078D4; border-style: solid; color: #fff; }
.cy.next b { border: 2px solid var(--tomato); background: rgba(255, 91, 46, .1); color: var(--ink); }
.cy.est b { border-color: var(--muted); color: var(--ink-2); background: transparent; }
.cy small { display: block; font: 0.625rem/1.4 var(--mono); color: var(--ink-2); }
table.cycle .now { border-left: 1.5px dashed var(--tomato); }

table.cycle thead th.mo.now { padding-top: 0.875rem; }
table.cycle tfoot tr.t-sh { border-top: 1px solid var(--ink); }
table.cycle tfoot td { font: 0.75rem/1.35 var(--mono); color: var(--ink); }
table.cycle tfoot tr.t-sh td { font: 500 0.875rem var(--sans); padding-top: 0.5rem; }
table.cycle tfoot tr.t-usd td { font-size: 0.625rem; color: var(--ink-2); }
table.cycle tfoot tr.t-cum td { font-size: 0.6875rem; color: #0078D4; }






body.privacy table.cycle tfoot tr.t-usd td { filter: blur(7px); }
.fx-line { display: block; width: 100%; height: auto; margin: 0.375rem 0 0.25rem; overflow: visible; }
.fx-line text { font: 9px var(--mono); fill: var(--ink-2); }
#plot-panels .ay-chip { padding: 0.25rem 0.5rem; font-size: 0.625rem; }
.receipt .row4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 0.375rem; }
.receipt .row4 span:nth-child(n+2) { text-align: right; }
.receipt .row4.hdr { font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; }
.receipt .row4.tot { font-weight: 600; }
/* the full EPF ledger: both people side by side, every year and every credit */
.drawer.wide { width: min(64rem, 100vw); }
.drawer.wide #receipt-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.125rem; align-items: start; }
.drawer.wide #receipt-wrap .hh-head { grid-column: 1 / -1; margin-bottom: -0.5rem; }
.drawer.wide .receipt + .receipt { margin-top: 1.875rem; }
.receipt .sec-t span { float: right; letter-spacing: 0; color: var(--ink); }
.receipt .epf-mem { font: 500 0.6875rem var(--mono); margin: 0.625rem 0 0.125rem; }
.receipt.epf-ledger .row4 { grid-template-columns: 1.7fr 1fr 1fr 0.8fr; }
.receipt.epf-ledger .row4 .sub-l { white-space: nowrap; }
.receipt .epf-mem small { color: var(--ink-2); font-weight: 400; }
.receipt .row4.xfer span:first-child { color: #0078D4; }
.receipt .epf-fy.focus { background: rgba(255, 91, 46, .07); box-shadow: -0.625rem 0 0 rgba(255, 91, 46, .07), 0.625rem 0 0 rgba(255, 91, 46, .07); }
.receipt .epf-fy.focus .sec-t { color: var(--tomato); }
.epf-bar { cursor: pointer; }

.panel h4 .link-btn { float: right; background: none; border: 0; padding: 0; cursor: pointer; font: 500 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tomato); }
.panel h4 .link-btn:hover { text-decoration: underline; }
















body.privacy .receipt .row4 span:nth-child(n+2), body.privacy .mixbar i, body.privacy .bar-gain { filter: blur(7px); }

/* ---------- adding investments: type tiles + screenshot review ---------- */
.inv-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.875rem; }
.inv-type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1875rem; padding: 0.625rem 0.75rem; border: 1px solid var(--ink); background: var(--paper-3); cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: background .15s, transform .15s; }
.inv-type i { font: 400 1.375rem/1 var(--serif); font-style: normal; color: var(--tomato); }
.inv-type b { font: 600 0.75rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.inv-type small { font: 0.6562rem var(--mono); color: var(--ink-2); }
.inv-type:hover { transform: translateY(-1px); }
.inv-type.on { background: var(--ink); color: var(--paper); }
.inv-type.on small { color: #B9B0A2; }
.inv-type.on i { color: #FFB38A; }
.rv-shots { display: grid; gap: 0.625rem; padding: 0.625rem; align-content: start; }
.rv-shots figure { margin: 0; background: #fff; border: 1px solid var(--rule); }
.rv-shots img { display: block; width: 100%; height: auto; }
.rv-shots figcaption { font-size: 0.625rem; padding: 0.25rem 0.375rem; color: var(--ink-2); }
.rv-sheet { display: grid; place-items: center; padding: 1.25rem; }
.rv-receipt { margin-top: 0.625rem; box-shadow: none; border: 1px solid var(--rule); -webkit-mask: none; mask: none; }
.rv-receipt h3 { font-size: 1.875rem; }
@media (max-width: 900px) { .inv-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- net worth: the chip in every page's strip ---------- */
.nw-chip .up { color: #0E7A58; }
.nw-chip .down { color: #B8330F; }
.nw-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; padding: 2px 0.625rem; border: 1px solid var(--ink); border-radius: 1.25rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.nw-chip > span { font-weight: 600; }
.nw-chip b { font: 400 0.8125rem var(--sans); letter-spacing: 0; }
.nw-chip i { font-style: normal; font-weight: 600; }
.nw-chip i small { font-weight: 400; color: var(--ink-2); }
.nw-chip:hover { background: var(--ink); color: var(--paper); }
.nw-chip:hover i small, .nw-chip:hover .up, .nw-chip:hover .down { color: inherit; }
.mast-strip > #mast-date { margin-left: auto; }
.mast-strip > .nw-chip + #mast-date { margin-left: 1rem; }
body.privacy .nw-chip b { filter: blur(0.4375rem); }

/* ---------- smaller screens: sections flow naturally ---------- */
@media (max-width: 1100px), (max-height: 600px) {
  .mast-seal { display: none; }
  .sec { height: auto; min-height: 0; overflow: visible; }
  .chart.fill { flex: none; height: 23.75rem; }
  #chart-flow { height: 32.5rem; }
  .fit { height: auto; overflow: visible; }
  .fit-inner { transform: none !important; width: auto !important; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(4n) { border-right: 1px solid var(--rule); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-left: 1.125rem; }
  .anatomy, .split-2-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .maps-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "heat" "tree" "india"; }
  .archive { height: auto; grid-auto-rows: 4rem; }
  
  
  
  #chart-india { grid-template-columns: 1fr; height: auto; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-pdf { height: 50vh; }
  .modal-card.wide { height: auto; }
}
@media (max-width: 720px) {
  .mast-row { grid-template-columns: 1fr; }
  .mast-title { white-space: normal; }
  .sec-head { grid-template-columns: 1fr; gap: 0.5rem; }
  .hide-sm { display: none; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: 0 !important; border-right: 0 !important; }
  .archive { grid-template-columns: 2.75rem repeat(12, minmax(3.5rem, 1fr)) 3.75rem; overflow-x: auto; }
  .rv-lines, .rv-totals { grid-template-columns: 1fr; }
  /* phones (opened over Wi-Fi with server --lan): brand + net worth in the strip; pages on one row, person + tools under it */
  .mast-strip { flex-wrap: wrap; row-gap: 0.375rem; }
  .mast-strip > span:not(.mast-brand), .mast-strip > #mast-date { display: none; }
  .mast-strip > .nw-chip { margin-left: auto; }
  .nav-main { flex-wrap: wrap; height: auto; }
  .nav-main > * { height: 2.375rem; }
  .nav-pages { flex: 1 0 100%; margin-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .nav-pages .nav-page { flex: 1; display: grid; place-items: center; padding-inline: 0.25rem !important; }
  .nav-mid { display: none; }
  .nav-tools { flex: 1 0 100%; border-left: 0; }
  .nav-person { flex: 1; }
  .nav-seg { flex: 1; justify-content: center; }
}
@media print {
  .mast-nav, .mast-tools, .drawer, .scrim, .foot a { display: none !important; }
  .sec { break-inside: avoid-page; }
}

/* ---------- the diary: paydays, what's due, what's next (js/due.js) — the same on every page ---------- */
.nav-due { width: auto !important; min-width: 2.0625rem; display: flex !important; gap: 0.3125rem; align-items: center; justify-content: center; padding: 0 0.5rem !important; font: 600 0.6562rem var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; }
.nav-due .nd-ic { font-size: 0.875rem; font-weight: 400; }
.nav-due.has { color: #B8330F; }
.nav-due b { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 0.5625rem; background: var(--tomato); color: #fff; font-weight: 600; letter-spacing: 0; }
.nav-due:hover, .nav-due[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.nav-due .nd-k { font-weight: 600; }
.diary { position: fixed; z-index: 90; top: calc(var(--nav-h, 4.25rem) + 0.5rem); right: var(--pad); width: min(44rem, calc(100vw - 2 * var(--pad))); max-height: calc(100svh - var(--nav-h, 4.25rem) - 1.5rem); overflow-y: auto; background: var(--paper-3); border: 1px solid var(--ink); box-shadow: 0.375rem 0.375rem 0 var(--tomato); padding: 0 1.25rem 1rem; opacity: 0; transform: translateY(-0.5rem); pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.diary.open { opacity: 1; transform: none; pointer-events: auto; }



.dy-x { border: 0; background: none; font: 500 0.875rem var(--mono); cursor: pointer; padding: 0 0.25rem; color: var(--ink); }


.dy-pay { padding: 0.625rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule); }
.dy-pay + .dy-pay { padding-left: 0.875rem; border-left: 1px solid var(--rule); }
.dy-pay-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; font-size: 0.875rem; }
.dy-pay-who small { flex-basis: 100%; font: 400 0.625rem var(--mono); letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.dy-pay-cd, .pc-cd { font: 400 1.625rem/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 0.375rem 0 0.25rem; white-space: nowrap; }
.dy-pay-cd small, .pc-cd small { font: 500 0.6875rem var(--mono); color: var(--ink-2); margin-left: 1px; }
.dy-pay-cd b, .pc-cd b { font-weight: 400; }
.dy-pay-when { font: 400 0.6875rem/1.5 var(--mono); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 0.5rem; }









/* the next five weeks */
.dy-cal { margin-top: 0.5rem; }
.dc-wd, .dc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dc-wd span { font-size: 0.5938rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 0 0.25rem 0.1875rem; }
.dc { position: relative; min-height: 2.625rem; padding: 0.1875rem 0.3125rem; background: var(--paper); border: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; cursor: default; }
.dc[title] { cursor: help; }
.dc.past { opacity: .45; }
.dc.today { border: 2px solid var(--ink); background: var(--paper-3); }
.dc.first { border-left: 2px solid var(--ink-2); }
.dc-n { font: 500 0.6875rem var(--mono); color: var(--ink); }
.dc-n b { color: var(--tomato); font-weight: 600; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; }
.dc.today .dc-n { font-weight: 700; }
.dc-p { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.dc-p i, .dc-key i { display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 1.5px var(--c, transparent); }
.dc-p i.due, .dc-key i.due { border-radius: 1px; transform: rotate(45deg); }
.dc-p em { font: 600 0.5625rem var(--mono); font-style: normal; color: var(--ink-2); }
.dc-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin-top: 0.4375rem; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dc-key i { margin-right: 0.3125rem; vertical-align: -1px; box-shadow: none; }









.dy-late, .dy-when { font-size: 0.6562rem; letter-spacing: .04em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.dy-late { color: #B8330F; font-weight: 600; }
.dy-when { display: flex; flex-direction: column; font-weight: 600; }
.dy-when small { font-size: 0.6562rem !important; font-weight: 400; color: var(--ink-2); text-transform: none; }
.dy-dot { display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--c, var(--ink)); flex: none; }
.dy-go { font: 600 0.625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0.3125rem 0.5rem; cursor: pointer; white-space: nowrap; }
.dy-go:hover { background: var(--ink); color: var(--paper); }





.dy-ok { color: #0E7A58; }
.dy-flag { color: #B8330F; font-weight: 600; }

/* home: the section bar becomes a live payday ticker — label · a group per person (name, countdown, the day) · the diary */
.nav-note.tk { flex: 1; min-width: 0; }
.nav-note.tk #nav-note { flex: 1; display: flex; gap: 0; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
#nav-note .tk-k { flex: none; padding-right: 1rem; font-weight: 600; color: var(--ink); }
#nav-note .tk-p { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0 1rem; border-left: 1px solid var(--rule); color: var(--ink); }
#nav-note .tk-n { display: inline-flex; align-items: center; gap: 0.4375rem; font-weight: 600; }
#nav-note .tk-n .dy-dot { flex: none; }
#nav-note .tk-cd { display: inline-flex; align-items: center; font: 500 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
#nav-note .tk-cd small { margin: 0 0.3125rem 0 2px; font: 500 0.6875rem var(--mono); color: var(--ink-2); text-transform: none; }
#nav-note .tk-cd .tk-c { margin: 0 1px; color: var(--ink-2); }
#nav-note .tk-p > small { font-size: 0.625rem; letter-spacing: .04em; color: var(--ink-2); }
#nav-note .tk-due { margin-left: auto; flex: none; border: 0; background: none; font: 600 0.6562rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: #0E7A58; padding: 0 0 0 1rem; }
#nav-note .tk-due.has { color: #B8330F; }
#nav-note .tk-due:hover { text-decoration: underline; }
/* salary headline: a countdown card per person */
.payclock { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 2px solid var(--ink); margin-top: clamp(0.5rem, 1.6vh, 1rem); }
.payclock[hidden] { display: none; }
.pc { padding: 0.625rem 1rem 0.5rem 0; text-align: center; }
.pc + .pc { padding-left: 1rem; border-left: 1px solid var(--rule); }
.pc-k { display: flex; align-items: center; justify-content: center; gap: 0.4375rem; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pc-cd { font-size: clamp(1.75rem, min(2.6vw, 4.6vh), 2.75rem); margin: 0.25rem 0 0.125rem; }
.pc-when { font-size: 0.8125rem; }
.pc-when small { color: var(--ink-2); font-size: 0.75rem; }
.pc-ok { margin-top: 0.25rem; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: #0E7A58; }
.pc-due { display: flex; justify-content: center; gap: 0.625rem; align-items: center; margin-top: 0.3125rem; font-size: 0.75rem; color: #B8330F; font-weight: 600; }
body.privacy .pc-cd, body.privacy .dy-pay-cd { filter: none; }
@media (max-width: 720px) {
  .diary { left: 0.5rem; right: 0.5rem; width: auto; }
  
  
  #nav-note .tk-p > small { display: none; }
}/* NPS chart (investments §09) */
#chart-nps .axis-note { font: 500 9.5px var(--mono); letter-spacing: .08em; fill: var(--ink-2); }
#chart-nps text.delta { font-size: 12px; font-weight: 600; }
#chart-nps text.delta.up { fill: #0E7A58; } #chart-nps text.delta.down { fill: #B8330F; }
/* upload review: the verdict against what's in the app now (investments) */
.rv-cmp { border: 1px solid var(--ink); border-left-width: 0.375rem; padding: 0.75rem 0.875rem 0.625rem; margin: 0 0 1rem; background: var(--paper-3); }
.rv-cmp.up { border-left-color: #1FA37A; } .rv-cmp.down { border-left-color: #B8330F; } .rv-cmp.new { border-left-color: var(--cobalt); } .rv-cmp.same, .rv-cmp.older, .rv-cmp.none { border-left-color: var(--muted); }
.rv-cmp-k { font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rv-cmp-big { font: 400 1.875rem/1.1 var(--sans); letter-spacing: -.01em; margin: 0.25rem 0 0.125rem; font-variant-numeric: tabular-nums; }
.rv-cmp-big small { font-size: 0.9375rem; margin-left: 0.25rem; }
.rv-cmp.up .rv-cmp-big { color: #0E7A58; } .rv-cmp.down .rv-cmp-big { color: #B8330F; } .rv-cmp.new .rv-cmp-big { color: var(--cobalt); }
.rv-cmp.same .rv-cmp-big, .rv-cmp.older .rv-cmp-big { font-size: 1.25rem; }
.rv-cmp-sub { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--ink-2); }
.rv-cmp .rc-note { margin: 0.25rem 0; }
.rv-cmp-t { width: 100%; border-collapse: collapse; font-size: 0.6875rem; margin-top: 0.5rem; }
.rv-cmp-t th { text-align: right; font-weight: 600; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0.25rem 0 0.25rem 0.625rem; border-bottom: 1px solid var(--ink); }
.rv-cmp-t td { text-align: right; padding: 0.3125rem 0 0.3125rem 0.625rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rv-cmp-t td:first-child, .rv-cmp-t th:first-child { text-align: left; padding-left: 0; white-space: normal; }
.rv-cmp-t td.up { color: #0E7A58; font-weight: 600; } .rv-cmp-t td.down { color: #B8330F; font-weight: 600; }
/* raises in two columns (both of you): a little more room for the list, a slightly smaller tag and detail line */
.split-2-1:has(.events.two) { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr); }
.events.two .tag { width: 2.875rem; margin-right: 0.4375rem; }
.events.two .x { padding-left: 3.3125rem; font-size: 0.6875rem; }
.events.two .t { font-size: 1.1875rem; }
/* salary §08 PF: passbook check, the monthly flow, where it heads, the tax rules */
#pf-side .pf-note { font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); margin: 0.375rem 0 0; }
#pf-side .panel { margin-bottom: 1.125rem; }






/* salary §10 the ledger: a strip per financial year + the ITR-time numbers for the one picked */
.lg-key { flex: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; font-size: 0.6562rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.lg-key i { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; vertical-align: -1px; }
.lg-key .lg-hint { margin-left: auto; text-transform: none; letter-spacing: .02em; }
#lg-side .emp, .lgc-emp .emp { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-left: 2px; vertical-align: 0; }
#lg-side .emp { margin: 0 0.375rem 0 0; }
.lg-total { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.5rem; padding-top: 0.625rem; border-top: 2px solid var(--ink); font-size: 0.875rem; color: var(--ink-2); }
.lg-total .mono { font-size: 0.6562rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.lg-total b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-total em { font-style: normal; color: #B8330F; font-size: 0.8125rem; }
#lg-side .panel { margin-bottom: 1.125rem; }
#lg-side .kv small { color: var(--ink-2); margin-left: 0.25rem; }
/* tax §04: the open year in depth (numbers from every document, each check spelled out); earlier years closed */
.ck-head { display: flex; align-items: baseline; gap: 0.875rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.375rem; margin-bottom: 0.75rem; }
.ck-head b { font: 400 2rem/1 var(--serif); }
.ck-head span { font: 0.6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ck-people.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.ck-card { min-width: 0; }

.ck-closed { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
.ck-chip { font: 600 0.625rem var(--mono); letter-spacing: .06em; color: #0E7A58; border: 1px solid rgba(31, 163, 122, .45); background: rgba(31, 163, 122, .08); padding: 1px 0.4375rem; border-radius: 1rem; cursor: help; }

.ck-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ck-na { font-size: 0.625rem; letter-spacing: .04em; color: var(--muted); margin: 0.375rem 0 0; }






body.privacy .cq-b { filter: blur(6px); }
@media (max-width: 720px) { .ck-people.two { grid-template-columns: minmax(0, 1fr); } }
/* salary §08 this year's tax, worked out: one computation card per person */
/* one screen on desktop (the cards scale to fit); on narrow or short screens the section grows with its cards */
@media (max-width: 1100px), (max-height: 600px) {
  #s-taxyear { height: auto; min-height: calc(100svh - var(--nav-h, 2.375rem)); overflow: visible; }
  #s-taxyear .sec-body { flex: none; }
  #s-taxyear .fit { height: auto; overflow: visible; }
}
.ty-people.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; }

@media (max-width: 1100px) { .ty-people.two { grid-template-columns: minmax(0, 1fr); } }
/* investments: market logos in the headings, the NSE mark in the sub-nav */
.h-logo { display: flex; align-items: center; gap: 0.25em; flex-wrap: wrap; }
.sec-logo { height: 0.74em; width: auto; margin-left: 0.2em; }
.sec-logo.mf { height: 0.86em; }
.sec-logo.epfo { height: 1em; }
.sec-logo.itdw { height: 1.05em; margin-left: 0; }
.mast-logo { display: block; height: clamp(3.25rem, 6vw, 5rem); width: auto; margin: 0 0 0.625rem; }
/* the logo sits beside the deck, so the Tax masthead is no taller than the others */
@media (min-width: 721px) { .mast-side:has(> .mast-logo) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: end; } .mast-side:has(> .mast-logo) .mast-logo { grid-row: span 2; align-self: end; margin: 0 0 0.25rem; height: clamp(3rem, 5vw, 4.5rem); } .mast-side:has(> .mast-logo) .mast-tools { grid-column: 2; } }
@media (max-width: 720px) { .mast-logo { height: 3rem; } }
.sec-logo.npsw { height: 0.78em; margin-left: 0.3em; }
.co-logo[src$="nps.png"] { border-radius: 1px; }
.sec-logos { display: inline-flex; align-items: center; gap: 0.3em; margin-left: 0.15em; }
.sec-logos .sec-logo { height: 0.56em; margin: 0; }
.sec-logos .sec-logo:last-child { height: 0.62em; }
.nav-mk { height: 1.05em; width: 1.05em; margin-right: 0.3125rem; object-fit: contain; }
/* full logos in the nav bars and the diary */
.nav-mk.full, .mast-nav .co-logo.full { height: 1.25rem; width: auto; margin-right: 0.375rem; vertical-align: middle; }
.nav-mk.full + .nav-mk.full { margin-left: -0.125rem; }
.diary .co-logo.full { height: 1.25rem; width: auto; margin-right: 0.3125rem; vertical-align: -0.35rem; }
.co-logo.full + .co-logo.full { margin-left: -0.125rem; }
/* the three Microsoft sections: one group in the sub-nav, one trail in their headers */
/* a group of related sections: one tinted block in the sub-nav, one trail in their headers (Microsoft blue; income tax red) */
.nav-grp, .ms-trail { --grp: #0078D4; }
.nav-grp.grp-tax, .ms-trail.grp-tax { --grp: #B3121B; }
.nav-grp.grp-plot, .ms-trail.grp-plot { --grp: #0B6E75; }
.nav-grp { display: flex; position: relative; margin: 0 0.25rem; background: color-mix(in srgb, var(--grp) 7%, transparent); box-shadow: inset 0 2px 0 var(--grp); }
.nav-sub .nav-links .nav-grp a:first-child { padding-left: 0.625rem; }
.nav-sub .nav-links .nav-grp a { padding: 0 min(0.625rem, 0.5vw); }
.nav-grp a + a::before { content: "›"; margin-right: 0.5rem; color: var(--grp); font-weight: 600; }
.ms-trail { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 0.375rem; margin-bottom: 0.4375rem; font: 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ms-trail .mt-k { color: var(--grp); font-weight: 600; margin-right: 0.25rem; }
.ms-trail a { display: inline-flex; align-items: center; gap: 0.3125rem; text-decoration: none; color: var(--ink-2); padding: 1px 0.5rem 1px 1px; border: 1px solid var(--rule); border-radius: 1rem; }
.ms-trail a b { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--paper-2); color: var(--ink); font-weight: 600; letter-spacing: 0; }
.ms-trail a:hover { border-color: var(--grp); color: var(--ink); }
.ms-trail a.on { border-color: var(--grp); background: var(--grp); color: #fff; }
.ms-trail a.on b { background: #fff; color: var(--grp); }
.ms-trail .mt-arw { font-style: normal; color: var(--grp); }
/* tidy: one-line labels stay on one line */
.facts .who-row > span { white-space: nowrap; }

.mixbar b, .mixbar i { white-space: nowrap; }
/* side panels: a little less air between blocks, so they fit without being scaled down */
.split-2-1 > .fit .panel { margin-bottom: clamp(0.875rem, 2.4vh - 0.25rem, 1.625rem); }
.split-2-1 > .fit .panel .kv { line-height: clamp(1.25rem, 0.5rem + 1.6vh, 1.5rem); }
/* short lists in a side panel sit two to a row: half the height, nothing scaled down */
.panel.kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.panel.kv2 > h4, .panel.kv2 > p, .panel.kv2 > .big { grid-column: 1 / -1; }
.panel.kv2 > .kv > span:last-child { font-size: 0.6875rem; }
@media (max-width: 720px) { .panel.kv2 { grid-template-columns: minmax(0, 1fr); } }
/* shorter screens (laptops at 768 px): the Facts labels keep their size and lose a little air between rows */
@media (max-height: 860px) and (min-width: 1101px) {
  .facts .r { padding: 1px 0; }
  .facts .r.cal2, .rfacts .r.rf.cal2 { padding: 2px 0; }
  .facts h3 { margin-bottom: 0.125rem; }
  .facts .serving { padding: 0.125rem 0 0.25rem; }
}
/* the next payday, worked out: under each countdown on the Salary headline */
.pc-x { margin: 0.375rem auto 0; max-width: 44rem; text-align: left; border-top: 1px solid var(--rule); padding-top: 0.4375rem; }
.pcx-main { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.125rem 0.625rem; }
.pcx-k { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pcx-main > b { font: 400 1.375rem/1.1 var(--sans); font-variant-numeric: tabular-nums; color: #0E7A58; }
.pcx-main > small { font: 500 0.6875rem var(--mono); }
.pcx-main > small.up, .pcx-grid b.up, .pcx-grid em.up { color: #0E7A58; }
.pcx-main > small.down, .pcx-grid b.down { color: #B8330F; }
.pcx-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 0.75rem; margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.7; }
.pcx-grid > span:nth-child(4n + 3) { padding-left: 0.75rem; border-left: 1px solid var(--rule); }
.pcx-grid > span { color: var(--ink-2); white-space: nowrap; }
.pcx-grid > b { font-weight: 400; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); border-bottom: 1px dotted var(--rule); }
.pcx-grid > span { border-bottom: 1px dotted var(--rule); }
.pcx-grid b small { color: var(--ink-2); font-size: 0.625rem; }
.pcx-grid b i { font-style: normal; color: var(--ink-2); margin: 0 0.125rem; }
.pcx-grid b b { font-weight: 600; }
.pcx-grid em { font-style: normal; margin-left: 0.25rem; font-weight: 600; }
.pcx-src { margin: 0.25rem 0 0; font-size: 0.6562rem; color: var(--ink-2); text-align: center; }
body.privacy .pcx-main > b, body.privacy .pcx-grid > b { filter: blur(6px); }
/* logos on a dark ground (tooltips, toasts, card faces, tickers) use their light twin — see js/logos.js */


/* §12 funding the plot: the what-if controls, the result, the cash walk, the grid and the side tables */






/* §13 the loan, checked */













 










 

#chart-fund { min-height: 8.75rem; }





















 




 
 




/* §12 the loan: the repayment schedule */
.sched { width: 100%; border-collapse: collapse; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.sched th, .sched td { padding: 0.1875rem 0.5rem; text-align: right; white-space: nowrap; border-bottom: 1px dotted var(--rule); }
.sched th { font-weight: 500; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; font-size: 0.625rem; border-bottom: 1px solid var(--ink); }
.sched td:first-child, .sched th:first-child { text-align: left; color: var(--ink-2); }
.sched td:nth-child(2), .sched th:nth-child(2) { text-align: left; }
.sched td:last-child { text-align: left; }

.sched td.bar { width: 22%; text-align: left; padding-top: 0; padding-bottom: 0; }
.sched td.bar i { display: inline-block; height: 0.5rem; vertical-align: middle; }
.sched i.p { background: #0B6E75; }
.sched i.i { background: #FF5B2E; }
.sched tr.past td { color: var(--ink-2); }
.sched tr.past td.bar i { opacity: .35; }
.sched tr.next td { background: rgba(11, 110, 117, .10); font-weight: 600; }
.sched tr.cut td { border-bottom: 2px solid var(--ink); }
.sched tr.tot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 600; padding-top: 0.375rem; }
.sched .tag { font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; padding: 1px 0.375rem; }
.sched .tag.next { background: #0B6E75; color: #fff; }
.sched .tag.paid { color: #0E7A58; }
.sched .tag.cut { color: var(--ink); border: 1px solid var(--ink); }
@media (min-width: 1101px) { #i-loan .sec-body.split-2-1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }


/* §11 where the money is: advance, then the loan, on one bar */
.plot-progress.two { display: flex; }
.plot-progress.two span { position: static; }
.plot-progress.two span.loan { background: #0B6E75; opacity: .55; }
/* §13 the FD */


.fd-st { font: 600 0.625rem var(--mono); letter-spacing: .08em; padding: 2px 0.5rem; border: 1px dashed var(--ink-2); color: var(--ink-2); }
.fd-st.on { border-style: solid; border-color: #0E7A58; background: #0E7A58; color: #fff; }





.fd-reg td .up { color: #0E7A58; } .fd-reg td .down { color: #B8330F; }





.kv small { color: var(--ink-2); font-size: 0.6875rem; }

body.privacy .sched .amt { filter: blur(6px); }
@media (max-width: 720px) {
  .sched { display: block; overflow-x: auto; }
  
}
/* §11 play with the numbers */
.sec-logo.honey { height: 0.9em; margin-left: 0.35em; }
.sec-logo.hdfc { height: 0.42em; margin-left: 0.3em; }


.panel.play input[type=range] { width: 100%; accent-color: #E08A00; height: 1rem; cursor: pointer; }







 

 
#chart-play { height: 6rem; margin: 0.125rem 0 0.25rem; }

/* ============ §11–§13 redesigned: site plan, burn-down + tiles + jar, FD ring + road ============ */
.plot3 { height: 100%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 2.25rem); }
.sp-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.site-plan { width: 100%; height: auto; max-height: 64vh; display: block; background: #F6F1E6; border: 1px solid var(--rule); }
.site-plan text { font-family: var(--mono); }
.sp-bk { font-size: 8.5px; letter-spacing: .1em; font-weight: 600; }
.sp-bv { font-size: 11px; font-weight: 500; }
.sp-dim { font-size: 8px; letter-spacing: .12em; fill: #6F685C; }
.sp-road { font-size: 7.5px; letter-spacing: .3em; fill: #8A8275; }
.sp-stamp { font-size: 9px; letter-spacing: .08em; font-weight: 700; }
.sp-name { font-size: 10px; letter-spacing: .1em; font-weight: 700; fill: #16130F; }
.sp-key { display: flex; flex-direction: column; gap: 0.1875rem; font-size: 0.6875rem; }
.sp-key span { display: flex; align-items: baseline; gap: 0.375rem; }
.sp-key i { width: 0.625rem; height: 0.625rem; display: inline-block; align-self: center; }
.sp-key b { font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.sp-key small { color: var(--ink-2); font-size: 0.625rem; }
.ptag { border: 1.5px solid var(--ink); padding: 0.75rem 0.875rem; position: relative; background: #FBF8F1; margin-bottom: 0.875rem; }
.ptag::before { content: ""; position: absolute; left: -0.5rem; top: 50%; width: 0.875rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.ptag-h { display: flex; justify-content: space-between; align-items: baseline; }
.ptag-h span { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ptag-h b { font: 400 clamp(1.5rem, min(2.2vw, 3.6vh), 2.125rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ptag-bar { display: flex; height: 0.625rem; margin: 0.5rem 0 0.375rem; gap: 2px; }
.ptag-bar span { display: block; }
.ptag-key { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; font-size: 0.625rem; color: var(--ink-2); }
.ptag-key i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem; }
.ptag-key b { color: var(--ink); font-weight: 600; }
.ptag-ft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px dashed var(--rule); }
.ptag-ft small { display: block; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ptag-ft b { display: block; font: 400 1.25rem/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.ptag-ft b.up, .ptag-ft em.up { color: #0E7A58; } .ptag-ft b.down, .ptag-ft em.down { color: #B8330F; }
.ptag-ft em { font-style: normal; font-size: 0.6875rem; color: var(--ink-2); }
.rl-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-top: 2px solid var(--ink); padding-top: 0.375rem; }
.rl-h b { font-size: 0.75rem; letter-spacing: .04em; }
.rl-h b.up { color: #0E7A58; } .rl-h b.down { color: #B8330F; }
.rl-svg { width: 100%; height: auto; display: block; margin: 0.25rem 0; }
.rl-v { font: 600 9px var(--mono); fill: #16130F; }
.rl-k { font: 500 7.5px var(--mono); letter-spacing: .06em; fill: #6F685C; }
.rl-ctl { display: flex; flex-direction: column; gap: 0.25rem; }
.rl-ctl .ay-chips { margin: 0; gap: 0.25rem; }
.rl-ctl .ay-chip { padding: 0.25rem 0.5rem; font-size: 0.625rem; }
#plot-play.panel { border-top: 2px solid var(--ink); }
/* §12 */
.sec-body.loan2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.25rem, 2vw, 2.25rem); }
.loan-l { gap: 0.625rem; min-width: 0; }
.lh-top { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr 1.35fr; gap: 1rem; align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; }
.lh-top small { display: block; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lh-top b { display: block; font: 400 clamp(1.5rem, min(2.4vw, 4vh), 2.5rem)/1.05 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lh-top em { font-style: normal; font-size: 0.75rem; color: var(--ink-2); }
.lh-next b { font-size: clamp(1.25rem, min(1.8vw, 3vh), 1.75rem); }
.lh-close { padding: 0.375rem 0.625rem; border: 1.5px dashed #B8330F; }
.lh-close.nil { border-color: #0E7A58; background: rgba(14, 122, 88, .06); }
.lh-close b { font-size: clamp(1.25rem, min(1.8vw, 3vh), 1.75rem); }
.lh-close.nil em { color: #0E7A58; font-weight: 600; }
.lh-facts { display: flex; flex-direction: column; gap: 0.0625rem; font-size: 0.625rem; color: var(--ink-2); text-align: right; }
.burn { width: 100%; height: auto; display: block; max-height: 30vh; }
.burn-lab { font: 700 9px var(--mono); letter-spacing: .08em; }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.3125rem; }
.tile { position: relative; border: 1px solid var(--rule); background: #FBF8F1; padding: 0.25rem 0.3125rem 0.3125rem; display: grid; grid-template-rows: auto auto 2.25rem auto; gap: 0.125rem; min-width: 0; }
.tile.after { opacity: .5; border-style: dashed; }
.tile.paid { background: rgba(14, 122, 88, .08); }
.tile.next { border: 2px solid #0B6E75; }
.tile.cut { border: 2px solid #0E7A58; box-shadow: 4px 0 0 -1px var(--paper), 6px 0 0 -1px #0E7A58; }
.tl-n { font-size: 0.5625rem; color: var(--ink-2); }
.tl-d { font-size: 0.625rem; font-weight: 600; white-space: nowrap; }
.tl-bar { display: flex; flex-direction: column-reverse; width: 0.625rem; height: 100%; }
.tl-bar i { display: block; width: 100%; }
.tl-bar i.p, .tl-key i.p { background: #0B6E75; } .tl-bar i.i, .tl-key i.i { background: #FF5B2E; }
.tl-v { font-size: 0.625rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tl-st { position: absolute; right: 0.25rem; top: 0.25rem; font: 700 0.5625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #0B6E75; }
.tile.cut .tl-st { color: #0E7A58; } .tile.paid .tl-st { color: #0E7A58; }
.tl-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.625rem; color: var(--ink-2); margin-top: 0.375rem; }
.tl-key i { display: inline-block; width: 0.625rem; height: 0.5rem; margin-right: 0.25rem; }
.jar h4 { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin: 0 0 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--ink); }
.jar-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.jar-svg { width: 100%; height: auto; display: block; }
.jar-lab { font: 700 12px var(--mono); letter-spacing: .04em; }
.jar-sum { border-bottom: 1px solid var(--rule); padding-bottom: 0.375rem; margin-bottom: 0.25rem; }
.jar-sum b { display: block; font: 400 1.75rem/1.05 var(--sans); letter-spacing: -.02em; }
.jar-sum span { font-size: 0.6875rem; color: var(--ink-2); }
.jar-sum em { display: block; font-style: normal; font-size: 0.75rem; font-weight: 600; }
.jar-sum em.down { color: #B8330F; } .jar-sum em.up { color: #0E7A58; }
.jar-it { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto; gap: 0.375rem; align-items: baseline; font-size: 0.75rem; padding: 0.1875rem 0; border-bottom: 1px dotted var(--rule); }
.jar-it i { width: 0.625rem; height: 0.625rem; display: block; align-self: center; }
.jar-it small { display: block; font-size: 0.625rem; color: var(--ink-2); }
.jar-it b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* §13 */
.sec-body.fd2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 2.5rem); }
.fdx { display: grid; grid-template-columns: clamp(9rem, 14vw, 12rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; border: 1.5px solid var(--ink); padding: 1rem 1.25rem; background: linear-gradient(135deg, #FBF8F1, #F1ECE1); position: relative; }
.fdx::after { content: ""; position: absolute; inset: 0.3125rem; border: 1px solid rgba(91, 140, 42, .35); pointer-events: none; }
.fd-ring { width: 100%; height: auto; display: block; }
.fd-r1 { font: 600 9px var(--mono); letter-spacing: .14em; fill: #6F685C; }
.fd-r2 { font: 400 30px var(--sans); fill: #16130F; }
.fdx-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.fdx-amt { font: 400 clamp(2rem, min(3.4vw, 5vh), 3.25rem)/1.05 var(--sans); letter-spacing: -.02em; margin: 0.25rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.fdx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.fdx-grid small { display: block; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fdx-grid b { font-weight: 400; }
.fdx-note { margin: 0.625rem 0 0; font-size: 0.75rem; color: var(--ink-2); }
.fd-road { width: 100%; height: auto; display: block; margin-top: 0.75rem; }
.fd-pin { font: 700 9px var(--mono); letter-spacing: .08em; fill: #5B8C2A; }
.fd-reg { font: 600 8.5px var(--mono); letter-spacing: .06em; }
.fd-reg.up { fill: #0E7A58; } .fd-reg.down { fill: #B8330F; }
.whose h4 { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin: 0 0 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--ink); }
.wh-bar { display: flex; height: 0.875rem; gap: 2px; }
.wh-bar span { display: block; }
.wh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0.5rem 0 0.75rem; }
.wh-cols div { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; }
.wh-cols b { font-size: 0.875rem; }
.wh-cols small { font-size: 0.6875rem; color: var(--ink-2); }
.wh-cols .up { color: #0E7A58; font-weight: 600; } .wh-cols .down { color: #B8330F; font-weight: 600; }
.wh-meter small { display: block; font-size: 0.625rem; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 0.25rem; }
.whm-bar { position: relative; height: 0.625rem; background: repeating-linear-gradient(-45deg, transparent 0 0.3125rem, rgba(22, 19, 15, .08) 0.3125rem 0.375rem); border: 1px solid var(--ink); }
.whm-bar i { display: block; height: 100%; }
.wh-meter > span { font-size: 0.6875rem; color: #0E7A58; }
.beads { margin-top: 0.875rem; }
.beads-h { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.375rem; }
.beads-g { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.beads-g i { position: relative; aspect-ratio: 1; border: 1px solid rgba(91, 140, 42, .45); background: #FBF8F1; }
.beads-g i.on { background: #5B8C2A; border-color: #5B8C2A; }
.beads-g i.now { outline: 2px solid #16130F; outline-offset: 1px; }
.beads-g i.reg { background: #E08A00; border-color: #E08A00; }
.beads-g i.m1 { border-left: 2px solid #16130F; }
.beads-f { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.5938rem; letter-spacing: .08em; color: var(--ink-2); margin-top: 0.375rem; }
.beads-f i { display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.25rem 0 0.625rem; vertical-align: -1px; }
.beads-f .k-on { background: #5B8C2A; } .beads-f .k-reg { background: #E08A00; } .beads-f .k-m1 { border-left: 2px solid #16130F; width: 0.375rem; background: #FBF8F1; }
.fd-good { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.875rem; border-top: 2px solid var(--ink); padding-top: 0.5rem; }
.fd-good div { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.375rem; font-size: 0.75rem; }
.fd-good i { font-style: normal; font-weight: 600; color: var(--ink-2); }
.fd-good .yes i { color: #0E7A58; }
body.privacy .fdx-amt, body.privacy .lh-top b, body.privacy .ptag-h b, body.privacy .jar-sum b { filter: blur(6px); }
@media (max-width: 1100px) {
  .plot3, .sec-body.loan2, .sec-body.fd2 { grid-template-columns: minmax(0, 1fr); }
  .lh-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-facts { text-align: left; }
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-plan { max-height: 26rem; }
}
@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fdx { grid-template-columns: minmax(0, 1fr); }
  .fd-ring { max-width: 9rem; margin: 0 auto; }
  .fdx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptag-ft { grid-template-columns: minmax(0, 1fr); }
}
/* §11 "What if" — steppers, presets and a year ruler; a scoreboard; the gap between the plot and an FD */
#plot-play.panel.play { background: #FBF8F1; border: 1.5px solid var(--ink); border-top: 5px solid #E08A00; padding: 0.875rem 1rem 0.75rem; }
#plot-play .pq-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.625rem; }
#plot-play .pq-k { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: #B86E00; font-weight: 700; }
#plot-play .pq-t { font: italic 400 1.25rem/1.1 var(--serif); }
#plot-play .pq-t b { font: 600 1.125rem var(--sans); font-style: normal; color: #B86E00; }
#plot-play .pq-blk { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); align-items: center; gap: 0.25rem 0.625rem; padding: 0.375rem 0; border-top: 1px dotted var(--rule); }
#plot-play .pq-step { justify-self: start; }
#plot-play .pq-blk .pq-step + .pq-pills { grid-column: 2; }
#plot-play .pq-l { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
#plot-play .pq-step { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 2rem; overflow: hidden; }
#plot-play .pq-step button { width: 1.75rem; height: 1.75rem; border: 0; background: transparent; font: 600 1rem var(--sans); cursor: pointer; }
#plot-play .pq-step button:hover { background: rgba(224, 138, 0, .15); }
#plot-play .pq-step b { font: 500 1.0625rem var(--sans); font-variant-numeric: tabular-nums; padding: 0 0.375rem; min-width: 4.25rem; text-align: center; }
#plot-play .pq-pills { display: flex; flex-wrap: wrap; gap: 0.25rem; }
#plot-play .pq-pills.wide { justify-content: space-between; }
#plot-play .pq { font: 600 0.6875rem var(--mono); border: 1px solid var(--rule); background: #fff; color: var(--ink); padding: 0.25rem 0.5rem; border-radius: 2rem; cursor: pointer; white-space: nowrap; }
#plot-play .pq small { font-weight: 400; color: var(--ink-2); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: .06em; }
#plot-play .pq:hover { border-color: #E08A00; }
#plot-play .pq.on { background: #E08A00; border-color: #E08A00; color: #fff; }
#plot-play .pq.on small { color: #FFF1D6; }
#plot-play .pq-ruler { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); align-items: end; height: 2rem; }
#plot-play .pq-ruler button { position: relative; height: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
#plot-play .pq-ruler i { display: block; width: 2px; height: 0.5rem; background: #B9B0A2; }
#plot-play .pq-ruler button.lab i { height: 0.875rem; background: #6F685C; }
#plot-play .pq-ruler button.in i { background: #E08A00; }
#plot-play .pq-ruler button.on i { width: 0.625rem; height: 1.25rem; border-radius: 2px; background: #E08A00; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E08A00; }
#plot-play .pq-ruler button:hover i { background: #B86E00; }
#plot-play .pq-ruler small { position: absolute; bottom: -0.875rem; font: 0.5625rem var(--mono); color: var(--ink-2); }
#plot-play .pq-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 1rem 0 0.625rem; }
#plot-play .pq-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 2rem; padding: 2px; background: #fff; }
#plot-play .pq-seg button { white-space: nowrap; font: 600 0.625rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 0; padding: 0.3125rem 0.625rem; border-radius: 2rem; cursor: pointer; }
#plot-play .pq-seg button.on { background: var(--ink); color: var(--paper); }
#plot-play .pq-save { font: 700 0.625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; background: #E08A00; color: #fff; border: 0; padding: 0.4375rem 0.75rem; border-radius: 2rem; cursor: pointer; }
#plot-play .pq-file { font-size: 0.625rem; color: var(--ink-2); }
#plot-play .pq-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; align-items: center; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 0.5rem 0; }
#plot-play .pq-score > div:not(.pq-lead) small { display: block; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
#plot-play .pq-score > div:not(.pq-lead) b { display: block; font: 400 clamp(1.375rem, min(2vw, 3.4vh), 1.875rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#plot-play .pq-score > div.win b { color: var(--ink); }
#plot-play .pq-score > div.win small { color: #B86E00; font-weight: 700; }
#plot-play .pq-score > div:last-child { text-align: right; }
#plot-play .pq-score em { font-style: normal; font-size: 0.625rem; color: var(--ink-2); }
#plot-play .pq-lead { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0.625rem; border-radius: 0.5rem; }
#plot-play .pq-lead.up { background: rgba(31, 163, 122, .12); color: #0E7A58; }
#plot-play .pq-lead.down { background: rgba(255, 91, 46, .12); color: #B8330F; }
#plot-play .pq-lead span { font-size: 0.625rem; line-height: 1; }
#plot-play .pq-lead b { font: 600 1rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
#plot-play .pq-lead small { font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; }
#plot-play #chart-play { height: 7.5rem; margin: 0.375rem 0 0.25rem; }
#plot-play .pq-foot { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.625rem; color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: 0.375rem; }
#plot-play .pq-foot b { color: var(--ink); font-weight: 600; font-size: 0.75rem; }
#plot-play .pq-foot b.up { color: #0E7A58; } #plot-play .pq-foot b.down { color: #B8330F; }
body.privacy #plot-play .pq-score b, body.privacy #plot-play .pq-lead b { filter: blur(6px); }
/* narrower desktops: the full logos in the sub-nav a touch smaller, so every link still fits on one line */
@media (max-width: 1440px) and (min-width: 721px) { .nav-mk.full, .mast-nav .co-logo.full { height: 1rem; } }

/* faces: each person's photo in a ring of their colour (selectors, paydays, splits, the FD) */
.face { display: inline-block; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c, #888); background: #E4DCCB; vertical-align: middle; }
i.face.ini { font: 700 0.625rem/1.375rem var(--mono); font-style: normal; text-align: center; color: #fff; background: var(--c); }
.faces { display: inline-flex; align-items: center; }
.faces .face + .face { margin-left: -0.4375rem; }
.nav-seg .face { width: 1.375rem; height: 1.375rem; }
.nav-seg .faces .face { width: 1.125rem; height: 1.125rem; box-shadow: 0 0 0 1.5px var(--c); }
.nav-seg.on .face { box-shadow: 0 0 0 2px #fff; }
.nav-seg.on .faces .face { box-shadow: 0 0 0 1.5px #fff; }
.nav-seg { gap: 0.4375rem; }
.seg .face { width: 1.625rem; height: 1.625rem; margin-right: 0.375rem; }
.seg .faces { margin-right: 0.375rem; }
.seg .faces .face { width: 1.375rem; height: 1.375rem; margin-right: 0; }
.face.lg { width: 2.75rem; height: 2.75rem; box-shadow: 0 0 0 2.5px var(--c); }
.face.md { width: 1.875rem; height: 1.875rem; }
.face.sm { width: 1.125rem; height: 1.125rem; box-shadow: 0 0 0 1.5px var(--c); margin-right: 0.3125rem; }
.dy-pay-who .face { width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 2px var(--c); }
.pc-k .face.sm { margin-right: 0; }

/* ============ the shelf: every document on a page — the same look on Salary, Accounts, Investments and Tax ============ */
/* ---------- the shelf: every page's documents as a filing cabinet ---------- */
.shelf { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(11.5rem, 1.4fr) repeat(var(--cols), minmax(var(--shcol, 0px), 1fr)); grid-template-rows: auto repeat(var(--rows), minmax(2.75rem, 1fr)); gap: 0.625rem 0.375rem; padding-top: 0.25rem; }
/* the years: index tabs along the top of the cabinet */
.sh-corner { align-self: end; font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 0 0 0.375rem 0.125rem; border-bottom: 2px solid var(--ink); }
.sh-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.3125rem 0.5rem 0.3125rem; margin-top: 0.25rem; border: 1.5px solid rgba(22, 19, 15, .55); border-bottom: 2px solid var(--ink); border-radius: 0.625rem 0.625rem 0 0; background: linear-gradient(#FBF8F1, #F3ECDD); }
.sh-col b { font-size: 0.75rem; letter-spacing: .06em; font-weight: 600; }
.sh-col small { font-size: 0.5625rem; letter-spacing: .06em; color: var(--ink-2); }
.sh-col i { position: absolute; top: -0.5rem; right: 0.375rem; font: 700 0.5313rem var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--tomato); padding: 1px 0.3125rem; border-radius: 1rem; }
.sh-col.now { border-color: var(--tomato); border-bottom-color: var(--tomato); background: linear-gradient(#FFF3EC, #FBE6DA); }
.sh-mhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; margin-top: 0.1875rem; font-size: 0.5rem; color: var(--ink-2); text-align: center; }
/* the drawers: a label in a metal holder, a pull underneath it */
.sh-spine { position: relative; display: flex; align-items: center; min-width: 0; padding: 0.25rem 1.375rem 0.25rem 0.5rem; border-radius: 0.5rem; background: linear-gradient(180deg, #EDE5D6, #E2D8C6); border: 1.5px solid rgba(22, 19, 15, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(22, 19, 15, .08); }
.sh-spine::before { content: ""; position: absolute; left: 0.25rem; top: 0.375rem; bottom: 0.375rem; width: 0.25rem; border-radius: 1rem; background: var(--c); }
.sh-label { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.0625rem; margin-left: 0.375rem; padding: 0.25rem 0.4375rem; background: #FFFDF8; border: 1px solid #A39A8B; border-radius: 0.1875rem; box-shadow: inset 0 0 0 2px #FFFDF8, inset 0 0 0 3px rgba(163, 154, 139, .45), 0 1px 0 rgba(22, 19, 15, .1); }
.sh-pull { position: absolute; right: 0.4375rem; top: 50%; width: 0.4375rem; height: 1.375rem; margin-top: -0.6875rem; border-radius: 0.25rem; background: linear-gradient(90deg, #5B544A, #8A8275 60%, #5B544A); box-shadow: 0 1px 1px rgba(22, 19, 15, .3); }
.sh-name { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sh-s { font-size: 0.6563rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-meta { font-size: 0.5938rem; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-meta em { font-style: normal; color: #B8330F; font-weight: 700; }
.sh-spine.late { border-color: rgba(184, 51, 15, .55); }
.sh-spine.late .sh-label { box-shadow: inset 0 0 0 2px #FFFDF8, inset 0 0 0 3px rgba(184, 51, 15, .45); }
.sh-who { flex: none; display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c); color: #fff; font: 700 0.5625rem var(--mono); }
/* a year with documents: a folder, its papers standing up out of the top */
.sh-cell { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .2s; }
.sh-front { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; padding: 0.375rem 0.5rem 0.3125rem; border-radius: 0.25rem 0.25rem 0.5rem 0.5rem; background: linear-gradient(170deg, #F6EAD0, #EEDDBA); border: 1px solid rgba(122, 82, 48, .35); box-shadow: 0 2px 0 rgba(22, 19, 15, .06); z-index: 1; }
.sh-front::after { content: ""; position: absolute; left: 0; top: 0.375rem; bottom: 0.375rem; width: 0.1875rem; border-radius: 0 1rem 1rem 0; background: var(--c); }
.sh-cell:hover { transform: translateY(-2px); }
.sh-cell:hover .sh-strip { transform: translateY(-2px); }
.sh-cell.now .sh-front { border-color: rgba(255, 91, 46, .55); }
.sh-cell.quiet .sh-fig { color: var(--ink-2); font-size: 0.8125rem; }
.sh-cell.empty { justify-content: center; }
.sh-cell.empty::after { content: ""; display: block; margin: 0 18%; border-top: 1.5px dashed rgba(22, 19, 15, .14); }
.sh-cell.empty:hover { transform: none; }
.sh-open, .sh-part { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; min-width: 0; font: inherit; }
.sh-fig { display: flex; align-items: center; gap: 0.3125rem; font: 400 clamp(0.875rem, min(1.25vw, 2vh), 1.125rem)/1.15 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-fig.up { color: #0E7A58; } .sh-fig.down { color: #B8330F; }
.sh-sub { font: 0.5938rem var(--mono); letter-spacing: .02em; color: #6B5A43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-parts { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.sh-part { flex-direction: row; align-items: center; gap: 0.3125rem; }
.sh-part .sh-fig { font-size: clamp(0.8125rem, min(1.1vw, 1.8vh), 1rem); }
.sh-part .sh-sub { flex: 1; min-width: 0; }
.sh-flag { font: 700 0.5rem var(--mono); font-style: normal; letter-spacing: .06em; color: #fff; background: var(--f); padding: 1px 0.25rem; border-radius: 2px; }
.sh-lock { font-style: normal; font-size: 0.625rem; }
/* the papers: one sheet per month (or per file), white with a coloured edge; a gap where one is missing */
.sh-strip { position: relative; z-index: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; padding: 0 0.375rem; margin-bottom: -2px; align-items: end; transition: transform .2s; }
.sh-strip.files { display: flex; flex-wrap: nowrap; gap: 2px; padding-left: 0.375rem; }
.sh-strip.files .sh-m { width: 0.75rem; flex: none; }
.sh-m { display: block; height: 0.5rem; border: 0; padding: 0; border-radius: 2px 2px 0 0; background: transparent; }
.sh-m.pdf, .sh-m.imp, .sh-m.warn, .sh-m.ff, .sh-m.part { background: #FFFDF8; box-shadow: inset 0 2px 0 var(--m), 0 0 0 1px rgba(22, 19, 15, .16); }
.sh-m.imp { background: repeating-linear-gradient(-45deg, #FFFDF8 0 2px, color-mix(in srgb, var(--m) 35%, #FFFDF8) 2px 4px); }
.sh-m.warn { box-shadow: inset 0 2px 0 #B8330F, 0 0 0 1px rgba(184, 51, 15, .5); background: #FDE7DF; }
.sh-m.x { height: 0.6875rem; }
.sh-m.x::after { content: ""; display: block; height: 3px; margin: 3px 1px 0; border-radius: 1px; background: #F5B700; }
.sh-m.part { height: 0.3125rem; opacity: .7; }
.sh-m.ff { box-shadow: inset 0 2px 0 #16130F, 0 0 0 1px rgba(22, 19, 15, .4); }
button.sh-m { cursor: pointer; }
button.sh-m:hover { transform: translateY(-3px); }
.shelf-key { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.125rem; margin-top: 0.625rem; font-size: 0.625rem; letter-spacing: .04em; color: var(--ink-2); }
.shelf-key span { display: inline-flex; align-items: center; gap: 0.375rem; }
.shelf-key .sh-m { display: inline-block; width: 0.875rem; height: 0.625rem; }
.shelf-key .sh-m.none { box-shadow: 0 0 0 1px dashed rgba(22, 19, 15, .3); border: 1px dashed rgba(22, 19, 15, .3); }
.shelf-key .sk-note { margin-left: auto; color: var(--ink); }
.shelf-key .sk-warn { color: #B8330F; font-weight: 600; }
.shelf-key .sk-ok { color: #0E7A58; }
body.privacy .sh-fig .amt { filter: blur(6px); }
.shelf.dense { grid-template-rows: auto repeat(var(--rows), minmax(2.125rem, 1fr)); gap: 0.5rem 0.3125rem; }
.shelf.dense .sh-s { display: none; }
.shelf.dense .sh-spine { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.shelf.dense .sh-label { padding: 0.125rem 0.375rem; gap: 0; }
.shelf.dense .sh-pull { width: 0.3125rem; right: 0.3125rem; }
.shelf.dense .sh-spine { padding-right: 1rem; }
.sh-spine { overflow: hidden; }
.shelf.dense .sh-front { padding: 0.1875rem 0.4375rem 0.1875rem; }
.shelf.dense .sh-open { flex-direction: row; align-items: baseline; gap: 0.375rem; width: 100%; }
.shelf.dense .sh-fig { font-size: clamp(0.8125rem, min(1.05vw, 1.8vh), 1rem); }
.shelf.dense .sh-m { height: 0.375rem; }
.sh-part .sh-flag, .sh-part .sh-lock { margin-left: auto; }
@media (max-width: 1100px) { .shelf { --shcol: 7.5rem; overflow-x: auto; grid-template-rows: auto; grid-auto-rows: minmax(3.25rem, auto); } .sh-cell:hover { transform: none; } }
@media (max-width: 720px) { .shelf { grid-template-columns: 8.5rem repeat(var(--cols), 7rem); } .shelf-key .sk-note { margin-left: 0; } .sh-pull { display: none; } .sh-spine { padding-right: 0.5rem; } }
/* investments §02: what you hold (treemap) · what it made (gains by year) · the mix — one screen */
.hold-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(16.5rem, 0.78fr); grid-template-rows: minmax(0, 1fr); gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.hold-grid.no-gains { grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 1fr); }
.hold-grid > .hg-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hg-head { flex: none; border-top: 2px solid var(--ink); padding-top: 0.625rem; margin-bottom: 0.625rem; }
.hg-head h4 { margin: 0 0 0.25rem; font: 500 0.6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-fig { display: flex; align-items: baseline; gap: 0.25rem 0.75rem; flex-wrap: wrap; }
.hg-fig b { font: 400 1.875rem/1.1 var(--sans); letter-spacing: -.01em; }
.hg-fig b.up { color: #0E7A58; font-weight: 400; } .hg-fig b.down { color: #B8330F; font-weight: 400; }
.hg-fig span { font-size: 0.8125rem; color: var(--ink-2); }
.hg-gains .legend { flex: none; margin-bottom: 0.125rem; gap: 0.25rem 0.75rem; font-size: 0.625rem; }
.hg-gains .legend svg { width: 0.75rem; height: 0.75rem; }
#chart-gains .g-net { font-size: 10.5px; }
#chart-gains .g-tax { font: 10px var(--mono); fill: var(--ink-2); }
.hg-elss { flex: none; margin-top: 0.375rem; }
.hg-elss-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; font-size: 0.8125rem; }
.hg-elss-row b { font: 500 0.625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hg-elss-row i { font: normal 0.625rem var(--mono); color: var(--ink-2); margin-right: 0.3125rem; }
.hg-elss-row .tot { margin-left: auto; }
.hg-elss .rc-note { margin: 0.375rem 0 0; font-size: 0.6875rem; line-height: 1.4; }
.hold-grid > .fit .panel { margin-bottom: clamp(0.875rem, 2.4vh - 0.25rem, 1.625rem); }
.hold-grid > .fit .panel .kv { line-height: clamp(1.25rem, 0.5rem + 1.6vh, 1.5rem); }
@media (max-width: 1100px), (max-height: 600px) {
  .hold-grid, .hold-grid.no-gains { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .hold-grid #chart-gains { height: 20rem; }
}

/* ---------- motion (js/motion.js plays these once; the rest is here) ---------- */
/* split-flap countdown digits: an airport board in the paper's colours — light cards split by a hinge, ink digits */
.fl { display: inline-block; font-style: normal; font-variant-numeric: tabular-nums; transform-origin: 50% 50%; backface-visibility: hidden; }
.pc-cd .fl, .tk-cd .fl { --fl-top: #FFFDF8; --fl-bot: #F1EADC; position: relative; min-width: 0.66em; padding: 0.06em 0.07em; margin: 0 0.025em; text-align: center; color: var(--ink); border-radius: 0.14em; background: linear-gradient(to bottom, var(--fl-top) 0 50%, var(--fl-bot) 50% 100%); box-shadow: 0 0 0 1px rgba(22, 19, 15, .14), 0 0.07em 0 rgba(22, 19, 15, .12); line-height: 1.12; }
.tk-cd .fl { min-width: 0.72em; padding: 0.1em 0.1em 0.06em; margin: 0 1px; border-radius: 3px; }
.pc-cd .fl::after, .tk-cd .fl::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(22, 19, 15, .16); pointer-events: none; z-index: 3; }
.diary.v2 .dy-pay-cd .fl::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0, 0, 0, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); pointer-events: none; z-index: 3; }
/* the flip: three halves laid over the tile while it turns (js/due.js flip()) */
.fl .fl-h { position: absolute; inset: 0; padding: inherit; text-align: center; color: inherit; border-radius: inherit; backface-visibility: hidden; pointer-events: none; }
.fl .fl-ot { background: var(--fl-top, #FFFDF8); clip-path: inset(0 0 50% 0); transform-origin: 50% 50%; z-index: 2; animation: flTop 0.24s cubic-bezier(.55, 0, .9, .5) both; }
.fl .fl-ob { background: var(--fl-bot, #F1EADC); clip-path: inset(50% 0 0 0); z-index: 1; animation: flHold 0.5s step-end both; }
.fl .fl-nb { background: var(--fl-bot, #F1EADC); clip-path: inset(50% 0 0 0); transform-origin: 50% 50%; z-index: 2; animation: flBot 0.26s 0.22s cubic-bezier(.2, .9, .35, 1.25) both; }
@keyframes flTop { from { transform: perspective(14em) rotateX(0); filter: brightness(1); } to { transform: perspective(14em) rotateX(-90deg); filter: brightness(.78); } }
@keyframes flBot { from { transform: perspective(14em) rotateX(90deg); filter: brightness(.9); } to { transform: perspective(14em) rotateX(0); filter: brightness(1); } }
@keyframes flHold { from { opacity: 1; } to { opacity: 0; } }
.pc-cd small, .tk-cd small { color: var(--ink-2); }
/* credit cards turn over on hover: the back says what's owed and by when */














/* the next Microsoft vest breathes */
.cy.next b { animation: vestPulse 2.4s ease-in-out infinite; }
@keyframes vestPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 46, .0); } 50% { box-shadow: 0 0 0 0.3125rem rgba(255, 91, 46, .22); } }
/* the tax check card's rubber stamp */
.ck-card { position: relative; }
.ck-stamp { display: inline-block; margin-left: 0.25rem; padding: 0.1875rem 0.5rem 0.125rem; border: 2px double currentColor; border-radius: 0.25rem; font: 700 0.6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-8deg); mix-blend-mode: multiply; opacity: .88;
  -webkit-mask: repeating-linear-gradient(35deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px); mask: repeating-linear-gradient(35deg, #000 0 3px, rgba(0, 0, 0, .78) 3px 4px); }
.ck-stamp.ok { color: #0E7A58; }
.ck-stamp.wait { color: #B8330F; }
/* bits drawn only while they move */
.jar-svg { overflow: visible; }
.jar-coin-t { font: 700 6.5px var(--mono); fill: #7A4A00; }
.fd-coin { font: 600 9px var(--mono); letter-spacing: .06em; fill: #0E7A58; }
@media (prefers-reduced-motion: reduce) {
  .cy.next b { animation: none; }
  
}

/* ---------- the tax page, redrawn: cards, rings, roads (same language as the plot / loan / FD) ---------- */
/* §01 the tax file */

























 










 



.tx-run { grid-column: 1 / -1; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.txr-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; }
.txr-head span:first-child { color: var(--ink); font-weight: 600; }
/* §02 the slab ladder */
.tx-lad { border: 1.5px solid var(--ink); background: linear-gradient(160deg, #FBF8F1, #F1ECE1); padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.lad-h { display: flex; justify-content: space-between; align-items: center; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 0.3125rem; }
.lad-h b { font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 1rem; background: var(--ink); color: var(--paper); }
.lad-svg { width: 100%; height: auto; display: block; max-height: 52vh; }
.lad-r { font: 600 11px var(--mono); fill: #16130F; }
.lad-b { font: 500 9.5px var(--mono); fill: #4A443B; }
.lad-rb { font: 700 8.5px var(--mono); letter-spacing: .08em; fill: #0E7A58; }
.lad-n { font: 700 9.5px var(--mono); letter-spacing: .1em; }
.lad-v { font: 500 10.5px var(--mono); fill: #16130F; }
.lad-notes { display: flex; flex-direction: column; gap: 0.3125rem; }
.lad-note { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr); gap: 0.4375rem; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.lad-note i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); margin-top: 0.375rem; }
.lad-note b { color: var(--ink); font-weight: 600; }
/* §03 anatomy: a segmented year switch and a crisper label */
#ay-chips { gap: 0; border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.1875rem; width: max-content; max-width: 100%; background: #FBF8F1; }
#ay-chips .ay-chip { border: 0; border-radius: 2rem; padding: 0.375rem 0.875rem; transition: background .2s, color .2s; }
#ay-chips .ay-chip.on { box-shadow: 0 2px 6px -2px rgba(22, 19, 15, .5); }
body[data-page="tax"] .facts { border-radius: 0.375rem; box-shadow: 0.5rem 0.5rem 0 var(--tomato); }
/* §04 the check cards */
/* the open year, per person: a meter of checks, a thread per figure through every document, and a tile per check */
body[data-page="tax"] .ck-card { position: relative; border: 1.5px solid var(--ink); border-radius: 0.875rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); padding: 0.75rem 1rem 0.875rem; overflow: hidden; }
.cq-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.cq-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.75rem; }
.cq-top .ck-stamp { grid-column: 2; grid-row: 1 / span 2; }
.cq-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; min-width: 0; font-size: 0.8125rem; color: var(--ink-2); }
.cq-who i { align-self: center; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.cq-who b { font: 400 1.375rem/1.1 var(--serif); color: var(--ink); }
.cq-res { grid-column: 1; font-size: 0.6875rem; letter-spacing: .04em; color: #0E7A58; font-weight: 600; }
.cq-meter { display: flex; align-items: center; gap: 0.75rem; margin: clamp(0.375rem, 1vh, 0.625rem) 0; }
.cq-segs { flex: 1; display: flex; gap: 3px; }
.cq-segs i { flex: 1; height: 1.25rem; display: grid; place-items: center; font: normal 700 0.625rem var(--sans); border-radius: 0.25rem; cursor: help; }
.cq-segs i:first-child { border-radius: 0.625rem 0.25rem 0.25rem 0.625rem; } .cq-segs i:last-child { border-radius: 0.25rem 0.625rem 0.625rem 0.25rem; }
.cq-segs i.ok { background: #1FA37A; color: #fff; } .cq-segs i.info { background: #F5B700; color: var(--ink); } .cq-segs i.warn { background: var(--tomato); color: #fff; }
.cq-meter > span { flex: none; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cq-meter b { font: 400 1.125rem var(--sans); color: #0E7A58; }
.cq-meter em { font-style: normal; font-weight: 700; } .cq-meter em.info { color: #8A5A00; } .cq-meter em.warn { color: #B8330F; }
.cq-thread { display: grid; grid-template-columns: 6.75rem repeat(6, minmax(3.75rem, 1fr)); align-items: center; row-gap: clamp(0.125rem, 0.6vh, 0.375rem); padding: 0.375rem 0 0.5rem; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 0.6875rem; }
.cq-doc { grid-row: 1; justify-self: center; display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.5625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; padding: 0.125rem 0.4375rem; border-radius: 1rem; }
.cq-doc i { width: 0.5rem; height: 0.625rem; border-radius: 1px; background: var(--d); box-shadow: 1.5px -1.5px 0 #FBF8F1, 1.5px -1.5px 0 1px color-mix(in srgb, var(--d) 45%, transparent); }
.cq-doc.ref { background: var(--ink); color: #fff; }
.cq-k { grid-column: 1; font: 600 0.6875rem var(--sans); color: var(--ink); display: flex; align-items: center; gap: 0.375rem; }
.cq-k em { font-style: normal; font: 700 0.625rem var(--mono); color: #B8330F; } .cq-k em.ok { color: #0E7A58; }
.cq-ln { position: relative; align-self: stretch; pointer-events: none; }
.cq-ln::before { content: ""; position: absolute; top: 50%; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); border-top: 2.5px solid #1FA37A; transform: translateY(-50%); }
.cq-ln.off::before { border-top: 2.5px dashed #E08A00; }
.cq-gap { justify-self: center; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #FBF8F1; border: 1.5px solid #B9B0A2; z-index: 1; }
.cq-b { position: relative; z-index: 1; justify-self: center; white-space: nowrap; padding: 0.125rem 0.4375rem; border-radius: 1rem; background: #FBF8F1; border: 1.5px solid #1FA37A; color: var(--ink); cursor: help; font-variant-numeric: tabular-nums; }
.cq-b.ref { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.cq-b.off { background: #FFE9A8; border-color: #E08A00; color: #6A4200; font-weight: 600; }
.cq-b.off em, .cq-koff { font-style: normal; margin-left: 0.1875rem; color: #B8330F; }
.cq-b.pend { border: 1.5px dashed #B9B0A2; background: transparent; color: #8A5A00; font-style: italic; }
.cq-kref { display: inline-block; width: 1.25rem; height: 0.625rem; border-radius: 1rem; background: var(--ink); margin-right: 0.375rem; vertical-align: -1px; }
.cq-note { margin: clamp(0.375rem, 1vh, 0.5rem) 0 0; display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.75rem; line-height: 1.4; color: var(--ink-2); cursor: help; }
.cq-note b { flex: none; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: #8A5A00; background: rgba(245, 183, 0, .2); padding: 0.0625rem 0.4375rem; border-radius: 1rem; }
.cq-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cq-checks { list-style: none; margin: clamp(0.5rem, 1.2vh, 0.75rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.cq-t { min-width: 0; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.5rem; align-items: center; padding: 0.3125rem 0.5rem; border-radius: 0.5rem; background: rgba(31, 163, 122, .07); border: 1px solid rgba(31, 163, 122, .25); cursor: help; }
.cq-t > div { min-width: 0; display: flex; flex-direction: column; }
.cq-t strong { font-size: 0.5938rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.cq-t span { font-size: 0.75rem; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-i { width: 1.375rem; height: 1.375rem; display: grid; place-items: center; border-radius: 50%; font: 700 0.75rem var(--sans); background: #1FA37A; color: #fff; }
.cq-t.info, .cq-t.warn { grid-column: 1 / -1; align-items: start; }
.cq-t.info { background: rgba(245, 183, 0, .12); border-color: rgba(224, 138, 0, .45); } .cq-t.info .cq-i { background: #F5B700; color: var(--ink); }
.cq-t.warn { background: rgba(255, 91, 46, .08); border-color: rgba(255, 91, 46, .5); } .cq-t.warn .cq-i { background: var(--tomato); }
.cq-t.info span, .cq-t.warn span { white-space: normal; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cq-t .cq-deep { color: var(--ink-2); font-style: italic; }
/* §05 / §06 cards beside the charts */















body[data-page="tax"] .sec-tags i { border-radius: 1rem; }







  





/* §07 the filing clock */
.tx-clock-stats { flex: none; margin-bottom: clamp(0.5rem, 1.4vh, 0.875rem); }
.tcs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.tcs { border: 1.5px solid var(--ink); border-radius: 0.5rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.tcs small { font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tcs b { font: 400 clamp(1.375rem, 3vh, 1.875rem)/1.1 var(--sans); letter-spacing: -.01em; }
.tcs b small { font-size: 0.55em; letter-spacing: 0; text-transform: none; }
.tcs em { font-style: normal; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcs.good { border-color: #0E7A58; } .tcs.good b { color: #0E7A58; }
.tcs.bad { border-color: #B8330F; } .tcs.bad b { color: #B8330F; }
@media (max-width: 1100px), (max-height: 600px) {
  
  .tx-run { grid-column: auto; }
  
}
@media (max-width: 720px) {
  
  
  .tcs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  #ay-chips { width: auto; flex-wrap: nowrap; overflow-x: auto; }
  
  .txr-head span:last-child { display: none; }
}

/* ---------- the tax page: this year, live (meter · up next · lab · rupee · scorecard) ---------- */
/* §01 the meter */
.sec-body.mt-body { display: flex; flex-direction: column; gap: clamp(0.625rem, 1.6vh, 1rem); }
















.mt-ax { font: 700 8.5px var(--mono); letter-spacing: .08em; fill: #4A443B; }


 






/* the meter card: the live counter and its chart, and beside it (one person) or under it (both) the year in payslips */


































   







.mt-tog { display: block; margin-top: 0.5rem; font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.mt-tog b { display: inline-block; font-weight: 700; color: #fff; background: var(--ink); padding: 0.0625rem 0.4375rem; border-radius: 1rem; margin-right: 0.375rem; letter-spacing: .12em; }
/* §02 up next: a runway of the months ahead, and a ticket per thing on it */
.sec-body.nx-body { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.4vh, 0.875rem); }
#next { --todo: #FF5B2E; --wait: #F5B700; --clear: #1FA37A; }
.nx-lede { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; font-size: 0.9375rem; color: var(--ink-2); }
.nx-lede b { font: 700 0.625rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 0.1875rem 0.5625rem; border-radius: 1rem; border: 1.5px solid var(--ink); }
.nx-lede b.todo { background: var(--todo); border-color: var(--todo); color: #fff; }
.nx-lede b.wait { background: var(--wait); border-color: var(--wait); color: var(--ink); }
.nx-lede b.clear { background: var(--clear); border-color: var(--clear); color: #fff; }
.nx-lede span { margin-left: 0.5rem; }
.nx-lede strong { font: 400 1.0625rem var(--serif); color: var(--ink); }
.nx-run { flex: none; position: relative; height: clamp(8.75rem, 23vh, 11.5rem); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(180deg, #FBF8F1, #F5F0E6); overflow: hidden; }
.nx-rail { position: absolute; inset: 0 2.25rem; }
.nx-track { position: absolute; left: -2.25rem; right: -2.25rem; top: 50%; height: 0.375rem; margin-top: -0.1875rem; background: repeating-linear-gradient(90deg, rgba(22, 19, 15, .28) 0 0.625rem, transparent 0.625rem 1rem); }
.nx-done { position: absolute; left: 0; top: 0; bottom: 0; margin-left: 2.25rem; background: var(--ink); border-radius: 0 0.1875rem 0.1875rem 0; }
.nx-done::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 2.25rem; background: var(--ink); }
.nx-mo { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; padding: 0 0 0.3125rem 0.25rem; border-left: 1px dashed rgba(22, 19, 15, .12); font: 600 0.5625rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A8275; }
.nx-mo.yr { border-left: 1.5px solid rgba(22, 19, 15, .35); color: var(--ink); }
.nx-band { position: absolute; top: 50%; height: 0.875rem; margin-top: -0.4375rem; border-radius: 0.4375rem; }
.nx-band.wait { background: repeating-linear-gradient(-45deg, var(--wait) 0 6px, #FFE08A 6px 12px); background-size: 17px 17px; animation: nxMarch 1s linear infinite; box-shadow: 0 0 0 1.5px #C98A00; }
.nx-band.todo { background: color-mix(in srgb, var(--todo) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--todo); }
.nx-band.file { background: repeating-linear-gradient(-45deg, rgba(31, 163, 122, .16) 0 5px, rgba(31, 163, 122, .32) 5px 7px); box-shadow: inset 0 0 0 1.5px #1FA37A; }
@keyframes nxMarch { to { background-position: 17px 0; } }
.nx-pay { position: absolute; top: 50%; width: 0.5625rem; height: 0.5625rem; margin: -0.28125rem 0 0 -0.28125rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #FBF8F1; cursor: help; }
.nx-today { position: absolute; top: 0.625rem; bottom: 0.625rem; width: 0; border-left: 2px solid var(--tomato); }
.nx-today b { position: absolute; top: -0.25rem; left: 0; transform: translateX(-50%); font-size: 0.5625rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--tomato); padding: 0.0625rem 0.375rem; border-radius: 1rem; white-space: nowrap; }
.nx-today::after { content: ""; position: absolute; left: -0.4375rem; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; border-radius: 50%; background: var(--tomato); border: 2px solid #FBF8F1; animation: nxNow 1.8s ease-out infinite; }
@keyframes nxNow { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 46, .55); } 100% { box-shadow: 0 0 0 0.875rem rgba(255, 91, 46, 0); } }
.nx-pins { position: absolute; inset: 0; }
.nx-pin { position: absolute; top: 50%; width: 0; height: 0; --st: var(--ink); --stt: var(--ink); }
.nx-pin.todo { --st: var(--todo); --stt: #B8330F; } .nx-pin.wait { --st: var(--wait); --stt: #8A5A00; } .nx-pin.clear { --st: var(--clear); --stt: #0E7A58; }
.nx-pin::before { content: ""; position: absolute; left: -1px; width: 2px; height: clamp(1.25rem, 3.4vh, 2rem); background: var(--st); }
.nx-pin.up::before { bottom: 0; } .nx-pin.down::before { top: 0; }
.nx-pin > i { position: absolute; z-index: 2; left: -0.4375rem; top: -0.4375rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 2px #FBF8F1, 0 0 0 3.5px var(--st); transition: transform .18s; }
.nx-pin span { position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 0.4375rem; align-items: center; white-space: nowrap; line-height: 1.25; color: var(--ink); background: #FBF8F1; border: 1.5px solid var(--st); border-radius: 0.5rem; padding: 0.25rem 0.625rem 0.25rem 0.3125rem; transition: transform .18s, box-shadow .18s; cursor: default; }
.nx-pin em { grid-row: span 2; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; font: normal 700 0.6875rem var(--mono); background: var(--st); color: #fff; }
.nx-pin.wait em { color: var(--ink); }
.nx-pin span b { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stt); }
.nx-pin small { font-size: 0.8125rem; }
.nx-pin.up span { bottom: clamp(1.25rem, 3.4vh, 2rem); } .nx-pin.down span { top: clamp(1.25rem, 3.4vh, 2rem); }
.nx-pin.al-c span { left: 0; transform: translateX(-50%); } .nx-pin.al-l span { left: -0.75rem; } .nx-pin.al-r span { right: -0.75rem; }
.nx-pin.hl > i { transform: scale(1.35); }
.nx-pin.hl span { box-shadow: 0.25rem 0.25rem 0 var(--st); }
.nx-tix { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(0.5rem, 1.4vh, 0.875rem) clamp(0.75rem, 1.4vw, 1.125rem); }
.nxt { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns: clamp(5.25rem, 8.5vw, 7.25rem) minmax(0, 1fr); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: #FBF8F1; transition: transform .18s, box-shadow .18s, opacity .18s; --st: var(--paper-2); --on: var(--ink); --stt: var(--ink-2); }
.nxt.todo { --st: var(--todo); --on: #fff; --stt: #B8330F; } .nxt.wait { --st: var(--wait); --on: var(--ink); --stt: #8A5A00; } .nxt.clear { --st: var(--clear); --on: #fff; --stt: #0E7A58; }
/* the perforation: two bites out of the edge where the stub tears off */
.nxt::before, .nxt::after { content: ""; position: absolute; z-index: 1; left: calc(clamp(5.25rem, 8.5vw, 7.25rem) - 0.5625rem); width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.nxt::before { top: -0.625rem; clip-path: inset(50% 0 0 0); } .nxt::after { bottom: -0.625rem; clip-path: inset(0 0 50% 0); }
.nxt-stub { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; padding: 0.5rem 0.375rem; text-align: center; background: var(--st); color: var(--on); border-radius: 0.625rem 0 0 0.625rem; border-right: 2px dashed rgba(22, 19, 15, .55); }
.nxt-stub em { font-style: normal; font-size: 0.625rem; letter-spacing: .12em; opacity: .8; }
.nxt-stub b { font: 400 clamp(1.75rem, 5vh, 2.75rem)/1 var(--sans); letter-spacing: -.03em; }
.nxt-stub b .amt { font-size: .72em; }
.nxt-stub > span { font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.nxt-main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(0.125rem, 0.6vh, 0.3125rem); padding: clamp(0.4375rem, 1.1vh, 0.6875rem) 0.875rem; }
.nxt-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.nxt-st { font-weight: 700; color: var(--stt); }
.nxt-who i { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--c); margin-right: 0.3125rem; }
.nxt h4 { margin: 0; font: 400 clamp(1rem, 2.5vh, 1.3125rem)/1.2 var(--serif); }
.nxt p { margin: 0; font-size: clamp(0.75rem, 1.65vh, 0.875rem); line-height: 1.42; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nxt-when { margin-top: auto; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-top: 1px dashed var(--rule); padding-top: 0.25rem; }
.nxt.hl { transform: translate(-2px, -2px); box-shadow: 0.3125rem 0.3125rem 0 var(--st); }
#next.hl-on .nxt:not(.hl) { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .nx-band.wait, .nx-today::after { animation: none; } }
/* §03 the lab */
.sec-body.lab-body { display: flex; flex-direction: column; }
.lab-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2.25rem); }
.lab-ctl { position: relative; border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(165deg, #FBF8F1, #F3EEE3); color: var(--ink); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .1); padding: 0.875rem 1.125rem; display: flex; flex-direction: column; gap: clamp(0.375rem, 1.1vh, 0.625rem); min-height: 0; overflow: auto; }
.lab-ctl h4 { margin: 0.25rem 0 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: #B8330F; }
.lab-ctl h4::after { content: ""; flex: 1; border-top: 1.5px dashed rgba(184, 51, 15, .35); }
.lab-base { font-size: 0.625rem; letter-spacing: .06em; color: var(--ink-2); }
.lab-who, .rp-modes { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.lab-pill { font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.3125rem 0.75rem; background: #FBF8F1; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; }
.lab-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c, currentColor); }
.lab-pill.on { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.lab-pill:disabled { opacity: .35; cursor: default; }
.lab-sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.5rem; align-items: baseline; cursor: pointer; }
.lab-sl span { font-size: 0.625rem; letter-spacing: .06em; color: var(--ink-2); }
.lab-sl b { font: 500 1rem var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-sl input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 0.375rem; border-radius: 0.25rem; background: linear-gradient(90deg, var(--tomato) 0 var(--p, 0%), rgba(22, 19, 15, .12) var(--p, 0%) 100%); outline: none; margin: 0.25rem 0 0.125rem; }
.lab-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; border: 3px solid var(--tomato); box-shadow: 0 0 0 4px rgba(255, 91, 46, .18); transition: transform .12s; }
.lab-sl input:active::-webkit-slider-thumb { transform: scale(1.2); }
.lab-sl input::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 3px solid var(--tomato); }
.lab-reset { margin-top: auto; align-self: flex-start; border: 1.5px dashed var(--ink); background: none; color: var(--ink); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; padding: 0.3125rem 0.625rem; border-radius: 1rem; cursor: pointer; }
.lab-reset:hover { color: #fff; background: var(--ink); border-style: solid; }
.lab-out { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.625rem, 1.6vh, 1rem); }
.lab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lab-res { border: 1.5px solid var(--ink); background: linear-gradient(160deg, #FBF8F1, #F1ECE1); padding: 0.75rem 1rem; transition: box-shadow .25s, border-color .25s, transform .25s; }
.lab-res.win { border-color: var(--tomato); box-shadow: 0.375rem 0.375rem 0 var(--tomato); transform: translate(-2px, -2px); }
.lr-h { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lr-h b { color: #fff; background: var(--tomato); padding: 0.0625rem 0.5rem; border-radius: 1rem; }
.lr-v { font: 400 clamp(2.25rem, min(4.4vw, 7vh), 3.75rem)/1.05 var(--sans); letter-spacing: -.03em; margin: 0.25rem 0 0.125rem; }
.lr-s { font-size: 0.8125rem; color: var(--ink-2); }
.lr-d { margin-top: 0.375rem; font: 600 0.75rem var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.lr-d.up { color: #0E7A58; } .lr-d.down { color: #B8330F; }
.lab-slab { border: 1.5px solid var(--ink); background: #FBF8F1; padding: 0.625rem 0.875rem 0.5rem; }
.ls-h { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; }
.ls-h span:last-child { color: var(--ink); font-weight: 700; }
.ls-bar { position: relative; height: 2.25rem; border-radius: 0.375rem; overflow: visible; }
.ls-bar > i { position: absolute; top: 0; bottom: 0; border-right: 2px solid #FBF8F1; }
.ls-bar > i:first-child { border-radius: 0.375rem 0 0 0.375rem; }
.ls-bar > i span { position: absolute; left: 0.375rem; top: 50%; transform: translateY(-50%); font: 700 0.625rem var(--mono); color: rgba(22, 19, 15, .7); }
.ls-bar em { position: absolute; top: -0.375rem; bottom: -0.375rem; width: 0; transition: left .35s cubic-bezier(.2, .8, .2, 1); }
.ls-bar em::before { content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; border-left: 3px solid; }
.ls-bar em::after { content: ""; position: absolute; left: -0.4375rem; top: -0.4375rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; }
.ls-now::before { border-color: #16130F !important; border-left-style: dashed !important; } .ls-now::after { background: #FBF8F1; border: 2.5px solid #16130F; }
.ls-you::before { border-color: var(--tomato) !important; } .ls-you::after { background: var(--tomato); box-shadow: 0 0 0 4px rgba(255, 91, 46, .25); }
.ls-87::before { border-color: #0E7A58 !important; border-left-width: 2px !important; } .ls-87::after { content: none; }
.ls-k { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.625rem; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ls-k i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; margin-right: 0.3125rem; vertical-align: -1px; }
.ls-k .k-now { border: 2px solid #16130F; } .ls-k .k-you { background: var(--tomato); } .ls-k .k-87 { background: #0E7A58; width: 3px; border-radius: 0; }
.lab-says { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lab-says > div { border-top: 2px solid var(--ink); padding-top: 0.375rem; display: flex; flex-direction: column; }
.lab-says small { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lab-says b { font: 400 clamp(1.25rem, 3vh, 1.75rem)/1.15 var(--sans); }
.lab-curve { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1.5px solid var(--ink); background: #FBF8F1; padding: 0.5rem 0.875rem; }
.lab-svg { width: 100%; flex: 1; min-height: 0; height: 100%; display: block; }
.lab-out > .lab-curve { min-height: 8rem; }
.lc-n, .lc-o { display: inline-block; width: 1rem; height: 0; border-top: 2.5px solid #FF5B2E; vertical-align: middle; margin: 0 0.25rem 0 0.625rem; }
.lc-o { border-top: 2px dashed #16130F; }
.lab-res, .lab-slab, .lab-curve { border-radius: 0.75rem; }
.lab-note { margin: 0; font-size: 0.6875rem; line-height: 1.45; color: var(--ink-2); }
/* §04 where your tax went */
.sec-body.rp-body { display: flex; flex-direction: column; }
.rp-grid { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 3vw, 3rem); }
.rp-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.375rem, 1vh, 0.625rem); }
.rp-modes .lab-pill { color: var(--ink); }
.rp-big { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.rp-big b { font: 400 clamp(2.25rem, min(4.4vw, 7vh), 3.75rem)/1 var(--sans); letter-spacing: -.03em; color: var(--tomato); }
.rp-big span { font-size: 0.875rem; color: var(--ink-2); }
.rp-waffle { flex: 1; min-height: 0; aspect-ratio: 1; max-width: 100%; align-self: flex-start; height: 100%; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 4px; }
.rp-waffle i { border-radius: 22%; background: var(--c); transition: opacity .2s, transform .2s; }
.rp-waffle[data-hl]:not([data-hl=""]) i { opacity: .16; }
.rp-waffle[data-hl="0"] i[data-k="0"], .rp-waffle[data-hl="1"] i[data-k="1"], .rp-waffle[data-hl="2"] i[data-k="2"], .rp-waffle[data-hl="3"] i[data-k="3"], .rp-waffle[data-hl="4"] i[data-k="4"], .rp-waffle[data-hl="5"] i[data-k="5"], .rp-waffle[data-hl="6"] i[data-k="6"], .rp-waffle[data-hl="7"] i[data-k="7"], .rp-waffle[data-hl="8"] i[data-k="8"] { opacity: 1; transform: scale(1.06); }
.rp-src { margin: 0; font-size: 0.5938rem; letter-spacing: .06em; color: var(--ink-2); }
.rp-right { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; }
.rp-lede { margin: 0; font: 400 clamp(1.25rem, 2.9vh, 1.75rem)/1.3 var(--serif); }
.rp-lede b { font-family: var(--sans); font-weight: 400; color: var(--tomato); }
.rp-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.rp-list li { display: grid; grid-template-columns: 0.875rem minmax(0, 1fr) 2.5rem 5rem; gap: 0.625rem; align-items: center; padding: clamp(0.25rem, 0.8vh, 0.4375rem) 0.375rem; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; cursor: default; transition: background .15s; }
.rp-list li i { width: 0.875rem; height: 0.875rem; border-radius: 3px; }
.rp-list li em { font-style: normal; font-size: 0.75rem; color: var(--ink-2); text-align: right; }
.rp-list li b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.rp-list li.on, .rp-list li:hover { background: rgba(255, 91, 46, .08); }
/* §05 the scorecard */
.sec-body.sc-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(0.75rem, 1.8vh, 1.25rem); }
.bd-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: clamp(0.5rem, 1.2vh, 0.75rem); }
.bd-count b { font: 400 2.5rem/1 var(--sans); color: var(--tomato); } .bd-count span { font: 400 1.25rem var(--sans); color: var(--ink-2); }
.bd-prog { height: 0.625rem; border-radius: 0.3125rem; background: rgba(22, 19, 15, .08); overflow: hidden; }
.bd-prog i { display: block; height: 100%; border-radius: 0.3125rem; background: linear-gradient(90deg, #F5B700, #FF5B2E); }
.bd-head > span { font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bd-head em { font-style: normal; color: #0E7A58; font-weight: 700; }
.bd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }
.bd { position: relative; display: grid; grid-template-columns: clamp(2.75rem, 6vh, 3.5rem) minmax(0, 1fr); gap: 0.625rem; align-items: center; border: 1.5px solid var(--ink); border-radius: 0.75rem; padding: 0.5rem 0.625rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); min-width: 0; }
.bd-m { width: 100%; height: auto; display: block; }
.bd-o { fill: #F5B700; stroke: #9A5A00; stroke-width: 2; }
.bd-i { fill: #FFF3D1; stroke: #E08A00; stroke-width: 1.5; stroke-dasharray: 2 2; }
.bd-g { font: 700 22px var(--sans); fill: #8A4A00; }
.bd.got .bd-m { filter: drop-shadow(0 2px 0 rgba(22, 19, 15, .35)); }
.bd.part { border-color: #E08A00; background: linear-gradient(160deg, #FBF8F1 55%, #FFF3D1); }
.bd.locked { border-style: dashed; border-color: rgba(22, 19, 15, .35); background: transparent; }
.bd.locked .bd-o { fill: #E6DDCC; stroke: #B9B0A2; } .bd.locked .bd-i { fill: #EFE8DA; stroke: #CFC5B2; } .bd.locked .bd-g { fill: #B9B0A2; }
.bd-t { min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.bd-t b { font: 400 1rem/1.15 var(--serif); }
.bd-t small { font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-t small i { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--c); margin-right: 0.25rem; vertical-align: 1px; }
.bd-t small.how { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bd-live { position: absolute; top: -0.5rem; right: 0.5rem; font-size: 0.5rem; letter-spacing: .14em; text-transform: uppercase; background: #0E7A58; color: #fff; padding: 0.0625rem 0.375rem; border-radius: 1rem; }
.bd.live.got .bd-live { animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 122, 88, .0); } 50% { box-shadow: 0 0 0 4px rgba(14, 122, 88, .25); } }
.sc-body .tx-run { min-height: 0; }
/* every return: a strip of rubber stamps per person */
.rs-rows { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0.25rem; }
.rs-row { min-height: 0; display: grid; grid-template-columns: clamp(10rem, 14vw, 12.5rem) minmax(0, 1fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); align-items: center; }
.rs-row + .rs-row { border-top: 1px dashed var(--rule); padding-top: 0.25rem; }
.rs-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1875rem 0.75rem; padding: 0.5rem 0.75rem; border-left: 4px solid var(--c); border-radius: 0 0.625rem 0.625rem 0; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); }
.rs-who b { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4375rem; font: 400 1.25rem/1.1 var(--serif); }
.rs-who b i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.rs-k { min-width: 0; display: flex; flex-direction: column; }
.rs-k span { font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rs-k strong { font: 400 1rem/1.15 var(--sans); } .rs-k strong.up { color: #0E7A58; }
.rs-who small { grid-column: 1 / -1; font-size: 0.5625rem; letter-spacing: .06em; text-transform: uppercase; color: #0E7A58; }
.rs-strip { --d: clamp(4.75rem, 13vh, 8rem); position: relative; min-width: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; }
.rs-strip::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(var(--d) / 2); border-top: 2px dashed rgba(22, 19, 15, .22); }
.rs-s { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.0625rem; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; --sc: #0E7A58; }
.rs-s.wait { --sc: #B87800; } .rs-s.none { --sc: #CFC5B2; opacity: .6; cursor: default; }
.rs-svg { width: var(--d); height: var(--d); display: block; transform: rotate(var(--r)); transition: transform .25s cubic-bezier(.3, 1.4, .6, 1), filter .25s; }
.rs-s:not(.none):hover .rs-svg { transform: rotate(0) scale(1.07); filter: drop-shadow(0 4px 6px rgba(22, 19, 15, .18)); }
.rs-o { fill: #FBF8F1; stroke: var(--sc); stroke-width: 2.5; }
.rs-o2 { fill: none; stroke: var(--sc); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: .7; }
.rs-s.wait .rs-o { stroke-dasharray: 8 4; }
.rs-s.wait .rs-o2 { transform-box: fill-box; transform-origin: center; animation: rsSpin 14s linear infinite; }
@keyframes rsSpin { to { transform: rotate(360deg); } }
.rs-ay { font: 700 10px var(--mono); letter-spacing: .1em; fill: var(--sc); }
.rs-tax { font: 400 21px var(--sans); fill: #16130F; letter-spacing: -.02em; }
.rs-f { font: 600 8.5px var(--mono); letter-spacing: .04em; fill: #4A443B; }
.rs-out { font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; } .rs-out.up { color: #0E7A58; font-weight: 600; } .rs-out.down { color: #B8330F; font-weight: 600; }
.rs-st { font-size: 0.5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rs-d { position: absolute; z-index: 2; left: 0; top: calc(var(--d) / 2); transform: translate(-50%, -50%); font-style: normal; font-size: 0.5938rem; font-weight: 700; white-space: nowrap; padding: 0.0625rem 0.375rem; border-radius: 1rem; background: #FBF8F1; border: 1px solid currentColor; }
.rs-d.up { color: #B8330F; } .rs-d.down { color: #0E7A58; }
@media (prefers-reduced-motion: reduce) { .rs-s.wait .rs-o2 { animation: none; } }
@media (max-width: 1100px), (max-height: 600px) { .rs-rows { grid-auto-rows: auto; } .rs-strip { --d: 6.5rem; } }
@media (max-width: 720px) {
  .rs-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; }
  .rs-strip { --d: 7.5rem; overflow-x: auto; grid-template-columns: repeat(var(--n), 9.5rem); padding: 0.25rem 0 0.25rem; }
  .rs-strip::before { right: auto; width: calc(9.5rem * (var(--n) - 1)); left: 4.75rem; }
  .rs-k span, .rs-st, .rs-who small { font-size: 0.625rem; }
  .rs-f { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .bd.live.got .bd-live { animation: none; } .ls-bar em { transition: none; } }
@media (max-width: 1100px), (max-height: 600px) {
  .lab-grid, .rp-grid { grid-template-columns: minmax(0, 1fr); }
  
  .nx-tix { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .nxt { min-height: 9.5rem; }
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-body.sc-body { grid-template-rows: auto auto; }
  .rp-waffle { height: auto; width: min(100%, 26rem); }
  .lab-ctl { overflow: visible; }
}
@media (max-width: 720px) {
  .nx-tix { grid-template-columns: minmax(0, 1fr); }
  .nx-run { height: 11rem; overflow-x: auto; overflow-y: hidden; }
  .nx-rail { right: auto; width: 72rem; }
  .nx-track { right: auto; width: 76.5rem; }
  .nx-lede span { margin-left: 0; flex-basis: 100%; }
  .nx-mo, .nxt-stub > span, .nxt-top, .nxt-when, .cq-doc, .cq-t strong, .cq-note b { font-size: 0.625rem; }
  .cq-thread { grid-template-columns: 6rem repeat(6, minmax(4.25rem, 1fr)); }
  .cq-checks { grid-template-columns: minmax(0, 1fr); }
  .ck-head { flex-wrap: wrap; } .ck-head b { white-space: nowrap; } .ck-closed { margin-left: 0; }
  .cq-t span { white-space: normal; }
  
  .lab-pair, .lab-says { grid-template-columns: minmax(0, 1fr); }
  .rp-list li { font-size: 0.8125rem; grid-template-columns: 0.75rem minmax(0, 1fr) 2rem 4rem; }
  .bd-head { grid-template-columns: auto minmax(0, 1fr); } .bd-head > span { grid-column: 1 / -1; }
  .bd-grid { grid-template-columns: minmax(0, 1fr); }
  .bd-t small { white-space: normal; }
  .mt-ax { font-size: 11px; }
  
     
  
  .lab-out > .lab-curve { min-height: 15rem; }
}

/* salary §03: the living flow — hover a band to follow it alone */
.flow-links .flow-link { transition: opacity .2s; }
.flow-links.hl .flow-link:not(.on) { opacity: .16; }
.flow-links.hl + .flow-coins { opacity: .35; transition: opacity .2s; }
.flow-gross { paint-order: stroke; stroke: #F1ECE1; stroke-width: 4px; stroke-linejoin: round; }
.flow-pulse { transform-box: fill-box; transform-origin: center; animation: flowPulse 2.6s ease-out infinite; }
@keyframes flowPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flow-pulse { animation: none; opacity: 0; } }
/* salary §01: each headline tile carries a small picture of its own number */
/* beside the big number, where the take-home sparkline sits — so the tile doesn't grow */
#s-headline .stat { position: relative; padding-top: clamp(0.375rem, 1.1vh, 1rem); padding-bottom: clamp(0.25rem, 0.9vh, 1.125rem); }
#s-headline .stat .v { margin: clamp(0.125rem, 0.6vh, 0.75rem) 0 clamp(0.125rem, 0.5vh, 0.5rem); }
#s-headline .stat .n { line-height: 1.4; }
#s-headline .pc { padding-top: clamp(0.375rem, 1vh, 0.625rem); padding-bottom: clamp(0.25rem, 0.8vh, 0.5rem); }
#s-headline .stat .sx { position: absolute; right: 1.125rem; top: calc(clamp(0.5rem, 1.6vh, 1rem) + 1.5rem); width: 40%; height: clamp(1.625rem, min(3.2vw, 5.4vh), 3rem); display: flex; flex-direction: column; justify-content: center; }
.sx-bar { display: flex; gap: 2px; height: 0.4375rem; border-radius: 0.25rem; overflow: hidden; transform-origin: 0 50%; }
.sx-bar i { min-width: 2px; }
.sx-key { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; margin-top: 0.3125rem; font-size: 0.5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sx-key i { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 1px; margin-right: 0.3125rem; vertical-align: 0; }
.sx-days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.sx-days i { height: 0.4375rem; border-radius: 1.5px; background: rgba(22, 19, 15, .1); }
.sx-days i.on { background: var(--tomato); }
.sx-days i[style] { background: linear-gradient(90deg, var(--tomato) 0 var(--part), rgba(22, 19, 15, .1) var(--part)); }
.sx-ticks { display: flex; gap: 1px; height: 0.5rem; }
.sx-ticks i { flex: 1; min-width: 1px; border-radius: 1px; background: #1FA37A; }
.sx-ticks i.bad { background: #B8330F; }

/* the payday cards: the pay cycle as beads, one a day */
.pc-cyc { margin: 0.3125rem auto 0; max-width: 17.5rem; }
.pc-beads { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.pc-beads i { height: 0.375rem; border-radius: 2px; background: rgba(22, 19, 15, .1); }
.pc-beads i.on { background: #1FA37A; }
.pc-beads i.now { background: #1FA37A; box-shadow: 0 0 0 1.5px #FBF8F1, 0 0 0 2.5px #0E7A58; animation: pcNow 1.6s ease-in-out infinite; }
@keyframes pcNow { 50% { background: #7FD1B3; } }
.pc-cyc-k { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.1875rem; font-size: 0.5625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pc-cyc-k b { font-weight: 600; color: #0E7A58; }
body.privacy .pc-cyc-k b { filter: blur(5px); }
@media (prefers-reduced-motion: reduce) { .pc-beads i.now { animation: none; } }
@media (max-width: 720px) {
  #s-headline .stat .sx { position: static; width: auto; height: auto; margin-top: 0.5rem; }
  .pc-cyc-k { font-size: 0.625rem; }
}

/* salary §02: the long line and the month card that follows the cursor */
.ln-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(16.5rem, 21vw, 21rem); grid-template-rows: minmax(0, 1fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.ln-wrap > .chart { min-width: 0; min-height: 0; height: 100%; }
.ln-card { align-self: stretch; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(0.3125rem, 1vh, 0.5625rem); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.75rem 0.875rem 0.625rem; }
.ln-pills { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ln-pills button { font: 600 0.5938rem var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.1875rem 0.5rem; background: #FBF8F1; color: var(--ink); cursor: pointer; }
.ln-pills button.on { background: var(--ink); color: #FBF8F1; }
#flow-card .ln-pills { flex-wrap: nowrap; gap: 0.1875rem; }  /* the month picks on one row */
#flow-card .ln-pills button { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding: 0.25rem 0.3125rem; font: 600 0.625rem/1.2 var(--sans); letter-spacing: .02em; }
.ln-pills button:hover:not(.on) { background: rgba(255, 91, 46, .12); }
.ln-k { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; border-top: 1px dashed var(--rule); padding-top: 0.4375rem; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ln-k b { font: 400 1.25rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ln-k span { text-align: right; }
.ln-big b { display: block; font: 400 clamp(1.875rem, min(2.8vw, 5.2vh), 2.625rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ln-big small { display: block; margin-top: 0.1875rem; font-size: 0.75rem; color: var(--ink-2); }
.ln-dl { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; font-size: 0.6875rem; font-weight: 600; }
.ln-dl i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.ln-dl .up { color: #0E7A58; } .ln-dl .down { color: #B8330F; }
.ln-bar { display: flex; gap: 2px; height: 0.625rem; border-radius: 0.3125rem; overflow: hidden; }
.ln-bar i { min-width: 2px; transition: flex-grow .3s ease; }
.ln-rows { list-style: none; margin: 0; padding: 0; }
.ln-rows li { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto 2.25rem; gap: 0.4375rem; align-items: center; padding: clamp(0.125rem, 0.45vh, 0.25rem) 0; border-bottom: 1px dotted var(--rule); font-size: 0.8125rem; }
.ln-rows li i { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.ln-rows li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-rows li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ln-rows li em { font: normal 0.6875rem var(--mono); color: var(--ink-2); text-align: right; }
.ln-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 0.5rem; border-top: 1.5px solid var(--ink); padding-top: 0.4375rem; font-size: 0.6875rem; color: var(--ink-2); }
.ln-made { min-height: 0; overflow: hidden; }
.ln-mk { display: flex; justify-content: space-between; gap: 0.5rem; margin: clamp(0.125rem, 0.6vh, 0.375rem) 0 0.25rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ln-made ul { list-style: none; margin: 0; padding: 0; }
.ln-made li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; padding: clamp(0.0625rem, 0.3vh, 0.1875rem) 0; font-size: 0.75rem; }
.ln-made li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.ln-made li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ln-made li i { grid-column: 1 / -1; height: 0.25rem; margin-top: 0.125rem; border-radius: 0.125rem; background: linear-gradient(90deg, var(--c) 0 var(--w), rgba(22, 19, 15, .07) var(--w)); }
.ln-made li.x span::after { content: " · extra"; color: #B87800; font: 600 0.5625rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ln-made li.more span { font-style: italic; }
.ln-foot b { font: 400 0.875rem var(--sans); color: var(--ink); }
.ln-hint { margin: 0; font-size: 0.5625rem; letter-spacing: .04em; color: var(--ink-2); }
body.privacy .ln-big b, body.privacy .ln-rows b, body.privacy .ln-foot b { filter: blur(6px); }
@media (max-width: 1100px) { .ln-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(18rem, 1fr) auto; } .ln-foot { margin-top: 0.25rem; } }
@media (max-width: 720px) { .ln-wrap { grid-template-rows: auto auto; } .ln-hint, .ln-pills button { font-size: 0.625rem; } }

/* ---------- Salary §04 · raises: the next revision, what if ---------- */
.rz-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.5rem, 1.4vh, 0.875rem); }
.rz-wrap > .chart { min-width: 0; }
.rz-card { flex: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.05fr); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.625rem 0; }
.rz-card > div { min-width: 0; padding: 0 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.rz-card > div + div { border-left: 1px dashed var(--rule); }
.rz-card.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0.5rem; }
.rz-card.two .rz-a { grid-column: 1 / -1; }
.rz-card.two .rz-b { border-left: 0; }
.rz-card.two .rz-a + .rz-b { border-top: 1px dashed var(--rule); padding-top: 0.5rem; }
.rz-card.two .rz-c { border-top: 1px dashed var(--rule); padding-top: 0.5rem; }
.rz-head { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.rz-k { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: #C8431A; font-weight: 700; }
.rz-t { font: italic 400 1.1875rem/1.1 var(--serif); }
.rz-t b { font: 500 1.125rem var(--sans); font-style: normal; color: #C8431A; }
.rz-pills { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.1875rem; margin-bottom: 0.25rem; }
.rz-pills button { position: relative; font: 600 0.625rem var(--mono); border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.25rem 0; background: #FBF8F1; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.rz-pills button:hover:not(.on) { background: rgba(255, 91, 46, .12); transform: translateY(-1px); }
.rz-pills button.on { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.rz-pills button.usual::after { content: ""; position: absolute; left: 50%; bottom: -0.375rem; width: 0.25rem; height: 0.25rem; margin-left: -0.125rem; border-radius: 50%; background: var(--ink); }
.rz-past { margin: 0; font-size: 0.5938rem; line-height: 1.45; color: var(--ink-2); }
.rz-past b { color: var(--ink); font-weight: 600; }
.rz-big small { display: block; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.25rem; white-space: nowrap; }
.rz-big b { font: 400 clamp(1.625rem, min(2.3vw, 4.2vh), 2.25rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rz-big em { font-style: normal; font-size: 0.8125rem; color: var(--ink-2); margin-left: 0.1875rem; }
.rz-dl { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; font-size: 0.6875rem; font-weight: 600; }
.rz-dl i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.rz-dl .up { color: #0E7A58; }
.rz-x { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.rz-x b { font: 400 1.5rem/1 var(--sans); color: var(--tomato); font-variant-numeric: tabular-nums; }
.rz-x span { font-size: 0.6875rem; line-height: 1.3; color: var(--ink-2); }
.rz-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1875rem; }
.rz-who li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }
.rz-who li span b { color: var(--ink); font-weight: 400; font-size: 0.875rem; }
.rz-who em { font-style: normal; font-size: 0.625rem; color: var(--c); font-weight: 600; }
.rz-foot { margin: auto 0 0; border-top: 2px solid var(--ink); padding-top: 0.375rem; font: 400 0.875rem/1.25 var(--serif); }
.rz-foot b { font: 500 0.8125rem var(--sans); color: #C8431A; }
.rz-ahead text { font-size: 10px; }
.rz-ahead .big { font: 400 14px var(--sans); }
.rz-ahead .rz-tag { font: 600 10px var(--mono); letter-spacing: .12em; fill: #C8431A; }
.rz-ahead .rz-when { font: 600 10px var(--mono); letter-spacing: .06em; }
.rz-pulse { transform-box: fill-box; transform-origin: center; animation: rzPulse 2.4s ease-out infinite; }
@keyframes rzPulse { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rz-pulse { animation: none; opacity: .35; } }
.events li { position: relative; }
.events .ev-lv { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w); background: var(--c); opacity: .55; pointer-events: none; }
body.privacy .rz-big b, body.privacy .rz-who b, body.privacy .rz-foot b.amt, body.privacy .rz-dl .up { filter: blur(6px); }
@media (min-width: 721px) and (max-width: 1100px) {
  .rz-card.two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.05fr); }
  .rz-card.two .rz-a { grid-column: auto; }
  .rz-card.two .rz-a + .rz-b, .rz-card.two .rz-c { border-top: 0; padding-top: 0; border-left: 1px dashed var(--rule); }
}
@media (max-width: 720px) {
  .rz-card, .rz-card.two { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .rz-card > div + div { border-left: 0; border-top: 1px dashed var(--rule); padding-top: 0.5rem; }
}

/* ---------- Salary §05 · the recipe: a measuring jar per employer ---------- */
.rx { min-width: 0; display: flex; flex-direction: column; gap: clamp(0.3125rem, 0.9vh, 0.5rem); padding: 0.625rem 1.125rem 0.5rem 0; border-right: 1px solid var(--rule); transition: background .2s; }
.rx + .rx { padding-left: 1.125rem; }
.rx:last-child { border-right: 0; }
/* the cards share their rows — header, jar, note, PF line — so each lines up across, whatever the logo's height */
.rx { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: clamp(0.3125rem, 0.9vh, 0.5rem); align-content: start; }
.rx > .rx-top { align-self: end; }
.rx.peek { background: linear-gradient(180deg, rgba(255, 91, 46, .07), transparent 70%); }
.rx-top h4 { margin: 0; font: 400 1.5rem/1.1 var(--serif); display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.rx-top h4::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; background: var(--emp); }
.rx-when { font-size: 0.6875rem; color: var(--ink-2); margin-top: 0.1875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-when b { color: var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.rx-when em { font-style: normal; color: #C8431A; }
.rx-body { display: grid; grid-template-columns: clamp(4rem, 5.6vw, 5rem) minmax(0, 1fr); gap: 0.875rem; align-items: start; }  /* jars line up across the cards */
.rx-jar { display: block; width: 100%; height: auto; overflow: visible; }
.rx-jar .rx-half { font: 600 12px var(--mono); fill: #16130F; }
.rx-liq rect { transition: opacity .2s; }
.rx-liq rect.dim { opacity: .16; }
.rx-wave { animation: rxWave 3.2s linear infinite; }
@keyframes rxWave { to { transform: translateX(32px); } }
.rx-rows { list-style: none; margin: 0; padding: 0; font: 0.75rem/1.3 var(--mono); min-height: var(--rx-rows, 0); }
.rx-rows li { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) auto 2.25rem; gap: 0.4375rem; align-items: center; padding: 0.1875rem 0.25rem; border-bottom: 1px dotted var(--rule); border-radius: 3px; transition: background .15s; }
.rx-rows li i { width: 0.5rem; height: 0.5rem; }
.rx-rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-rows li b { font-weight: 400; }
.rx-rows li em { font-style: normal; text-align: right; color: var(--ink-2); }
.rx-rows li.on { background: rgba(22, 19, 15, .07); }
.rx-code { min-height: var(--rx-code, 0); display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.4375rem; align-items: start; font-size: 0.6875rem; line-height: 1.35; padding: 0.375rem 0.5rem; border-radius: 0.5rem; }
.rx-code b { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; font: 700 0.6875rem var(--sans); color: #fff; }
.rx-code.ok { background: rgba(31, 163, 122, .1); } .rx-code.ok b { background: #1FA37A; }
.rx-code.low { background: rgba(245, 183, 0, .15); } .rx-code.low b { background: #E08A00; }
.rx-code.old { background: rgba(22, 19, 15, .045); color: var(--ink-2); } .rx-code.old b { background: #8A8275; }
.rx-foot { margin: 0; font-size: 0.6875rem; color: var(--ink-2); }
.rx-foot b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rx-wave { animation: none; } }

/* ---------- Salary §06 · the extras: coins on their lines, the season beside them ---------- */
.xt-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 20vw, 20rem); grid-template-rows: minmax(0, 1fr); gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.xt-wrap > .chart { min-width: 0; min-height: 0; height: 100%; }
.xt-side { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(0.25rem, 0.8vh, 0.5rem); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.75rem 0.875rem 0.625rem; }
.xs-k { font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: #C8431A; font-weight: 700; }
.xs-k + .xs-next { margin-top: -0.125rem; }
.xs-svg { flex: none; display: block; width: 100%; height: auto; }
.xs-svg .xs-m { font: 600 9px var(--mono); fill: #8A8275; }
.xs-svg .xs-pk { font: 400 11px var(--sans); fill: #16130F; }
.xs-svg .pk .xs-m { fill: #16130F; }
.xs-col { cursor: default; }
.xs-col rect:not(.xs-hit) { transition: opacity .2s; }
.xs-svg:has(.xs-col.on) .xs-col:not(.on) rect:not(.xs-hit) { opacity: .25; }
.xs-say { margin: 0; font: 400 1rem/1.25 var(--serif); }
.xs-say b { font-weight: 400; color: #C8431A; }
.xs-next { list-style: none; margin: 0; padding: 0; }
.xs-next li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: baseline; padding: 0.3125rem 0.25rem; border-bottom: 1px dotted var(--rule); border-radius: 3px; transition: background .15s; }
.xs-next li.on { background: rgba(22, 19, 15, .06); }
.xs-next li > b { font-size: 0.6875rem; font-weight: 600; color: var(--ink); }
.xs-next li span { font-size: 0.8125rem; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-next li span i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.3125rem; vertical-align: 0.0625rem; }
.xs-next li span .who-dot { vertical-align: 0.0625rem; }
.xs-next li small { font-size: 0.5938rem; color: var(--ink-2); margin-left: 0.3125rem; }
.xs-next li em { font: 400 0.8125rem var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.xs-foot { margin: auto 0 0; border-top: 2px solid var(--ink); padding-top: 0.4375rem; font: 400 0.875rem/1.3 var(--serif); }
.xs-foot b { font: 500 0.8125rem var(--sans); }
.xcell { position: relative; transition: background .15s; }
.xcell[data-xi] { cursor: default; }
.xcell.on { background: rgba(22, 19, 15, .045); }
.xcell .xbar { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w); background: var(--c); opacity: .7; }
body.privacy .xs-foot b.amt, body.privacy .xs-next em { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) {
  .xt-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .xt-wrap > .chart { height: auto; }
}

/* ---------- Salary §07 · the tax freedom card follows the year in focus ---------- */
.tf-pills { display: flex; flex-wrap: wrap; gap: 0.1875rem; margin-bottom: 0.375rem; }
.tf-pills button { font: 600 0.5938rem var(--mono); letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.1875rem 0.4375rem; background: #FBF8F1; color: var(--ink); cursor: pointer; }
.tf-pills button.on { background: var(--ink); color: #FBF8F1; }
.tf-pills button:hover:not(.on) { background: rgba(255, 91, 46, .12); }
.tf-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.tf-row .big { will-change: transform; }
.tf-rate { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.0625rem; padding-bottom: 0.25rem; }
.tf-rate b { font: 400 1.5rem/1 var(--sans); color: var(--tomato); font-variant-numeric: tabular-nums; }
.tf-rate small { font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tf-rate em { font-style: normal; font-size: 0.625rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tf-rate em.up { color: #B8330F; } .tf-rate em.down { color: #0E7A58; }
.tf-days span { transition: background-color .22s, color .22s, border-color .22s, box-shadow .22s; transition-delay: calc(var(--i) * 16ms); }
.tf-days { margin-top: 0.5rem; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.tf-days span { aspect-ratio: auto; min-width: 0; height: 1.375rem; }
.tf-days span.part { background: linear-gradient(90deg, var(--tomato) var(--p), transparent var(--p)); border-color: var(--tomato); }
.tf-days span.free { background: var(--ink); color: #FBF8F1; box-shadow: 0 0 0 2px #FBF8F1, 0 0 0 3.5px var(--ink); }
.tf-who:empty { display: none; }
.tf-who { margin-top: 0.5rem; }
.tf-foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.625rem; color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: 0.375rem; }
.tf-foot b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tf-days span { transition: none; } }

.ty-what { margin-top: 0.75rem; border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.3125rem 0.3125rem 0 rgba(22, 19, 15, .1); padding: 0.5rem 0.75rem 0.5625rem; }
.ty-wh { display: flex; align-items: baseline; gap: 0.5rem; }
.ty-wh span { font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: #C8431A; font-weight: 700; }
.ty-wh em { font: italic 400 1.0625rem/1.1 var(--serif); }
.ty-wh em b { font: 500 1rem var(--sans); font-style: normal; color: #C8431A; }
.ty-wp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.1875rem; margin: 0.4375rem 0 0.375rem; }
.ty-wp button { font: 600 0.625rem var(--mono); border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.25rem 0; background: #FBF8F1; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.ty-wp button:hover:not(.on) { background: rgba(255, 91, 46, .12); transform: translateY(-1px); }
.ty-wp button.on { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.ty-wr { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-2); }
.ty-wr b { color: var(--ink); font-weight: 600; }
.ty-wr b.down { color: #B8330F; } .ty-wr b.up { color: #0E7A58; }
body.privacy .ty-wr b { filter: blur(6px); }

/* ---------- Salary §09 · PF: the road (log scale, history and the fan ahead), coin stacks beside ---------- */
.pr-pills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.1875rem; }
.pr-pills button { font: 600 0.625rem var(--mono); border: 1.5px solid var(--ink); border-radius: 2rem; padding: 0.1875rem 0; background: #FBF8F1; color: var(--ink); cursor: pointer; transition: background .15s, transform .15s; }
.pr-pills button:hover:not(.on) { background: rgba(31, 163, 122, .14); transform: translateY(-1px); }
.pr-pills button.on { background: #1FA37A; border-color: #1FA37A; color: #fff; }
.pr-pills { display: inline-flex; gap: 0.1875rem; }
.pr-pills button { padding: 0.1875rem 0.5rem; }
.sec-body.pf2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2.25rem; }
.pf2-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pf2-main > .chart { min-height: 0; }
.pf2-ctl { flex: none; display: flex; flex-direction: column; gap: 0.5rem; }
.pf2-q { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.pf2-q .rz-t { font-size: 1.125rem; }
.pf2-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.5rem 0; }
.pf2-a > div { min-width: 0; padding: 0 0.875rem; display: flex; flex-direction: column; justify-content: center; gap: 0.1875rem; }
.pf2-a > div + div { border-left: 1px dashed var(--rule); }
.pf2-a small { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pf2-a b { font: 400 clamp(1.625rem, min(2.4vw, 4.4vh), 2.25rem)/1 var(--sans); letter-spacing: -.02em; color: #C8431A; font-variant-numeric: tabular-nums; }
.pf2-a .pf2-b2 { font-size: clamp(1.25rem, min(1.8vw, 3.4vh), 1.625rem); color: var(--ink); }
.pf2-a .pf2-b2 em { font: italic 400 1rem var(--serif); color: var(--ink-2); }
.pf2-split { display: flex; height: 0.5rem; gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.pf2-a em.mono { font-style: normal; font-size: 0.625rem; color: var(--ink-2); }
#chart-pf .pf2-now { font: 600 10px var(--mono); letter-spacing: .12em; fill: #4A443B; }
#chart-pf .pf2-fv { font: 400 12px var(--sans); fill: #16130F; }
#chart-pf .pf2-flag:not(.past) .pf2-fv { fill: #C8431A; }
#chart-pf .pf2-fy { font: 600 9.5px var(--mono); fill: #8A8275; }
#chart-pf .pf2-cl { font: 600 9.5px var(--mono); fill: #B87800; }
#chart-pf .pf2-end { font: 400 15px var(--sans); fill: #C8431A; }
.pf2-side { min-width: 0; }
.pf-hero small { display: block; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pf-hero > b { display: block; font: 400 clamp(2.5rem, min(3.6vw, 6.6vh), 3.5rem)/1.05 var(--sans); letter-spacing: -.02em; color: #0E7A58; font-variant-numeric: tabular-nums; }
.pf-sub { display: block; font-size: 0.75rem; line-height: 1.4; color: var(--ink-2); margin-top: 0.25rem; }
.pf-coins { display: block; width: 100%; max-width: 20rem; height: auto; margin: 0.5rem 0 0.125rem; overflow: visible; }
.pf-coins .pf-cl { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: #4A443B; }
.pf-coins .pf-cv { font: 400 12.5px var(--sans); fill: #16130F; }
.pf-eps { margin: 0 0 0.625rem; font-size: 0.75rem; color: var(--ink-2); }
.pf-eps b { color: var(--ink); font-weight: 500; }
.pf-mo { margin-bottom: 0.625rem; }
.pf-mbar { display: flex; height: 0.625rem; gap: 2px; border-radius: 0.3125rem; overflow: hidden; margin: 0.375rem 0 0.3125rem; }
.pf-mkey { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; font-size: 0.6875rem; color: var(--ink-2); }
.pf-mkey i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.3125rem; border-radius: 1px; }
.pf-chks { margin-bottom: 0.5rem; }
.pf-who { font: 400 1rem var(--serif); color: var(--c); margin-top: 0.25rem; }
.pf-chk { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.3125rem 0; }
.pf-chk span { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.4375rem; align-items: center; font-size: 0.75rem; line-height: 1.3; }
.pf-chk em { font-style: normal; }
.pf-chk b { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #8A8275; color: #fff; font: 700 0.6875rem var(--sans); }
.pf-chk .ok b { background: #1FA37A; } .pf-chk .warn b { background: #E08A00; }
body.privacy .pf-hero > b, body.privacy .pf2-a b, body.privacy .pf-coins .pf-cv, body.privacy .pf-mkey, body.privacy #chart-pf text.amt { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) {
  .sec-body.pf2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .pf2-main > .chart { flex: none; height: 22rem; }
}
@media (max-width: 720px) { .pf2-a { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; } .pf2-a > div + div { border-left: 0; border-top: 1px dashed var(--rule); padding-top: 0.5rem; } .pf2-main > .chart { height: 17rem; } }

/* ---------- Salary §10 · maps: one employer lights up across them ---------- */
#s-maps [data-emp] { transition: opacity .2s; }
#s-maps.spot [data-emp]:not(.lit) { opacity: .16; }
#s-maps .hm-leg { cursor: default; }
#s-maps .hm-best { animation: hmBest 2.6s ease-in-out infinite; }
@keyframes hmBest { 0%, 100% { stroke-opacity: 1; stroke-width: 2.5; } 50% { stroke-opacity: .35; stroke-width: 4; } }
@media (prefers-reduced-motion: reduce) { #s-maps .hm-best { animation: none; } }

/* the career map's key sits over the map's empty top-left corner, so the notes beside it never lose their last line */
@media (min-width: 1101px) and (min-height: 601px) {
  #chart-india { position: relative; }
  #chart-india .map-legend { position: absolute; left: 0; top: 0; margin: 0; flex-direction: column; gap: 0.25rem; max-width: 45%; }
}


/* ---------- Accounts §01 · pictures along the bottom of the headline tiles ---------- */
#a-headline .stat .sx, #i-headline .stat .sx { margin-top: auto; padding-top: 0.5rem; }
#a-headline .sx-key, #a-headline .sx-gap span em, #i-headline .sx-key, #i-headline .sx-gap span em { font-size: 0.625rem; }
.sx-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: clamp(1.75rem, 5.5vh, 3.25rem); }
.sx-cols > i { flex: 1; min-width: 2px; display: flex; flex-direction: column-reverse; border-radius: 1.5px 1.5px 0 0; overflow: hidden; transform-origin: 50% 100%; }
.sx-cols > i b { display: block; min-height: 0; }
.sx-cols > em { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink); pointer-events: none; }
.sx-gap { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.sx-gap span { display: flex; align-items: center; height: 0.5rem; }
.sx-gap span i { display: block; height: 100%; border-radius: 0.25rem; transform-origin: 0 50%; }
.sx-gap span em { flex: none; width: 2rem; font-style: normal; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sx-gap > b { position: absolute; top: -0.1875rem; bottom: -0.1875rem; border: 1.5px dashed #B8330F; border-radius: 0.25rem; background: repeating-linear-gradient(45deg, rgba(255, 91, 46, .18) 0 3px, transparent 3px 6px); pointer-events: none; }

/* ---------- Accounts §02 · the month card beside the flow (shares the Salary line's card) ---------- */
.fw-side { display: flex; justify-content: space-between; align-items: baseline; margin-top: clamp(0.125rem, 0.5vh, 0.375rem); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fw-side b { font: 400 0.9375rem var(--sans); letter-spacing: 0; color: var(--ink); }
.fw-card .ln-big b.neg { color: #B8330F; }
.fw-card .ln-rows li { font-size: 0.75rem; }

/* ---------- Salary §08 · this year's tax: a ring, a staircase, a receipt ---------- */
.tq-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "top top" "hero side" "stairs side"; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.625rem 2.25rem; border-top: 2px solid var(--ink); padding-top: 0.625rem; }
.ty-people:not(.two) { height: 100%; }
.ty-people:not(.two) .tq-card { height: 100%; }
.ty-people.two .tq-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "hero" "stairs" "side"; grid-template-rows: auto; gap: 0.5rem; }
/* side by side, the two cards share their rows: staircases, receipts and what-ifs start on the same lines */
.ty-people.two { grid-template-rows: repeat(4, auto); row-gap: 0; }
.ty-people.two .tq-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.5rem; }
.ty-people.two .tq-hero { align-self: start; }
.tq-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.tq-top > span { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tq-top > small { font-size: 0.625rem; color: var(--ink-2); }
.tq-who { font: 400 1.625rem/1 var(--serif); display: inline-flex; align-items: center; gap: 0.5rem; }
.tq-who::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--c); }
.tq-hero { grid-area: hero; display: flex; align-items: center; gap: 1.125rem; }
.tq-ring { flex: none; width: clamp(5rem, 9vh, 6.5rem); height: auto; }
.tq-ring .tq-rp { font: 400 19px var(--sans); fill: #16130F; }
.tq-ring .tq-rk { font: 600 11px var(--mono); letter-spacing: .12em; fill: #8A8275; }
.tq-fig { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.tq-fig small { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tq-fig > b { font: 400 clamp(2.125rem, min(3.4vw, 6vh), 3.25rem)/1 var(--sans); letter-spacing: -.02em; color: var(--tomato); font-variant-numeric: tabular-nums; }
.tq-sub, .tq-paid { font-size: 0.8125rem; color: var(--ink-2); }
.tq-sub b { color: var(--ink); font-weight: 600; }
.tq-paid em { font-style: normal; font-weight: 600; }
.tq-paid .up { color: #0E7A58; } .tq-paid .down { color: #B8330F; }
.tq-months { display: grid; grid-template-columns: repeat(12, 1.125rem); gap: 2px; margin-top: 0.125rem; }
.tq-months i { height: 0.3125rem; border-radius: 1px; background: rgba(22, 19, 15, .1); }
.tq-months i.on { background: #1FA37A; }
.tq-stairs { grid-area: stairs; min-height: 0; overflow: hidden; }
.ty-people.two .tq-stairs { height: clamp(9rem, 22vh, 12rem); }
.tq-stairs svg text { font: 10px var(--mono); fill: #4A443B; }
.tq-stairs .tq-rate { font: 600 11px var(--mono); fill: #B8330F; }
.tq-stairs .tq-tax { font: 11px var(--mono); fill: #16130F; }
.tq-stairs .tq-x { fill: #8A8275; }
.tq-stairs .tq-rebate { font: 600 9.5px var(--mono); letter-spacing: .08em; fill: #0E7A58; }
.tq-stairs .tq-pinlab { font: 400 13px var(--sans); fill: #16130F; }
.tq-stairs .tq-pinnx { font: 600 10px var(--mono); fill: #C8431A; }
.tq-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ty-people.two .tq-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tq-h { font-size: 0.625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 0.25rem; border-bottom: 1px solid var(--ink); margin-bottom: 0.125rem; }
.tq-r { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.1875rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.8125rem; }
.tq-r > span { color: var(--ink-2); }
.tq-r > b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tq-r.ind > span { padding-left: 0.75rem; }
.tq-r.tot { border-bottom: 1.5px solid var(--ink); }
.tq-r.tot > span { color: var(--ink); font-weight: 600; }
.tq-r.big > b { color: var(--tomato); font-weight: 500; }
.tq-note { margin: 0.375rem 0 0; font-size: 0.6875rem; line-height: 1.4; color: var(--ink-2); }
.tq-more { display: flex; flex-direction: column; gap: 0.3125rem; }
.tq-reg { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.tq-reg > span { font: 600 0.625rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tq-reg > i { display: block; height: 0.5rem; border-radius: 0.25rem; background: var(--ink); transform-origin: 0 50%; }
.tq-reg.old > i { background: repeating-linear-gradient(45deg, #FF5B2E 0 2px, #F1ECE1 2px 0.3125rem); border: 1px solid #FF5B2E; }
.tq-reg > b { font-weight: 400; font-variant-numeric: tabular-nums; grid-column: 3; }
.tq-reg { grid-template-columns: 2.25rem minmax(0, 1fr) 3.5rem; }
.tq-reg > i { justify-self: start; }
.tq-say { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--ink-2); }
.tq-say b { color: var(--ink); font-weight: 600; }
.tq-more .ty-what { margin-top: 0.25rem; }
body.privacy .tq-fig > b, body.privacy .tq-r > b, body.privacy .tq-reg > b, body.privacy .tq-paid, body.privacy .tq-stairs text { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) {
  .tq-card, .ty-people.two .tq-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "hero" "stairs" "side"; grid-template-rows: auto; }
  .tq-stairs { height: 13rem; }
  .ty-people:not(.two), .ty-people:not(.two) .tq-card { height: auto; }
}
@media (max-width: 720px) { .tq-ring { width: 6rem; } .ty-people.two .tq-side, .tq-side { display: flex; flex-direction: column; } .tq-stairs, .ty-people.two .tq-stairs { height: 11rem; } }

/* ---------- Salary §11 · the ledger: a card per year, the year in focus opened below ---------- */
.sec-body.lg3 { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.4vh, 0.875rem); min-height: 0; }
.lg-deck { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.625rem; }
.lg-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.5rem 0.375rem 0.5rem; border: 1.5px solid var(--ink); border-radius: 0.75rem; background: #FBF8F1; color: var(--ink); cursor: pointer; font: inherit; transition: transform .2s, box-shadow .2s, background .2s; }
.lg-card:hover, .lg-card.peek { transform: translateY(-3px); box-shadow: 0.25rem 0.25rem 0 rgba(22, 19, 15, .12); }
.lg-card.on { background: linear-gradient(160deg, #FFF3EC, #F8E3D6); box-shadow: 0.375rem 0.375rem 0 rgba(255, 91, 46, .28); transform: translateY(-4px); }
.lg-card.on::after { content: ""; position: absolute; left: 50%; bottom: -0.6875rem; width: 0.875rem; height: 0.875rem; margin-left: -0.4375rem; background: #F8E3D6; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.lg-card.open { border-style: dashed; }
.lgc-fy { display: flex; align-items: baseline; justify-content: space-between; align-self: stretch; gap: 0.25rem; }
.lgc-fy b { font: 400 1.25rem/1 var(--serif); }
.lgc-fy small { font-size: 0.625rem; color: var(--ink-2); letter-spacing: .04em; }
.lgc-ring { width: clamp(4.5rem, 12vh, 6.75rem); height: auto; overflow: visible; }
.lgc-ring .lgc-rate { font: 400 13px var(--sans); fill: #B8330F; }
.lgc-ring .lgc-rk { font: 600 11px var(--mono); letter-spacing: .14em; fill: #8A8275; }
.lgc-g { font: 400 clamp(1.125rem, min(1.6vw, 3vh), 1.5rem)/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.lgc-ch { font-size: 0.625rem; color: var(--ink-2); }
.lgc-ch .up { color: #0E7A58; } .lgc-ch .down { color: #B8330F; }
.lgc-emp { display: flex; align-items: center; gap: 0.1875rem; }
.lgc-emp em { font-style: normal; font-size: 0.625rem; color: var(--ink-2); margin-left: 0.25rem; }
.lg-open { flex: 1; min-height: 0; }
.lgd { border: 1.5px solid var(--ink); border-radius: 0.875rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.75rem 1rem 0.75rem; }
.lgd.peek { background: linear-gradient(160deg, #FFF6F0, #F6ECE2); }
.lgd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.625rem; }
.lgd-head > b:first-child { font: 400 1.75rem/1 var(--serif); }
.lgd-head > span { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lgd-g { margin-left: auto; font: 400 clamp(1.75rem, min(2.6vw, 5vh), 2.5rem)/1 var(--sans); color: var(--tomato); font-variant-numeric: tabular-nums; }
.lgd-head > small { flex-basis: 100%; text-align: right; font-size: 0.625rem; color: var(--ink-2); }
.lgd-head > small em { font-style: normal; color: #C8431A; }
.lgd-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 1.75rem; }
.lgw-r { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.75rem 2.25rem; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.8125rem; border-bottom: 1px dotted var(--rule); }
.lgw-r > span:first-child { color: var(--ink-2); white-space: nowrap; }
.lgw-r.tot > span:first-child { color: var(--ink); font-weight: 600; }
.lgw-t { position: relative; height: 0.75rem; background: rgba(22, 19, 15, .05); border-radius: 2px; }
.lgw-t i { position: absolute; top: 0; bottom: 0; border-radius: 2px; transform-origin: 0 50%; }
.lgw-r b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.lgw-r em { font: normal 0.625rem var(--mono); color: var(--ink-2); text-align: right; }
.tq-h span { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.lgm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; height: clamp(6rem, 17vh, 9.5rem); align-items: end; margin-top: 0.375rem; }
.lgm-c { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0.1875rem; }
.lgm-c i { display: flex; flex-direction: column-reverse; min-height: 2px; border-radius: 2px 2px 0 0; overflow: hidden; transform-origin: 50% 100%; }
.lgm-c i b { display: block; }
.lgm-c.ex i { border-top: 3px solid #F5B700; }
.lgm-c em { font-style: normal; font-size: 0.625rem; text-align: center; color: var(--ink-2); }
.lgd-note { margin: 0.5rem 0 0; font-size: 0.6875rem; line-height: 1.4; color: var(--ink-2); }
.lgd-note i { display: inline-block; width: 0.75rem; height: 0.1875rem; background: #F5B700; margin-right: 0.375rem; vertical-align: 0.2em; }
.lgf-r { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.8125rem; }
.lgf-r > span { color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.3125rem; }
.lgf-r b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lgf-r small { font-size: 0.6875rem; color: var(--ink-2); margin-left: 0.25rem; }
.lgf-who { display: flex; flex-wrap: wrap; gap: 0.1875rem 0.875rem; padding: 0.375rem 0 0.3125rem; border-bottom: 1px dotted var(--rule); font-size: 0.75rem; color: var(--ink-2); }
.lgf-bar { flex-basis: 100%; display: flex; height: 0.4375rem; gap: 1px; border-radius: 0.25rem; overflow: hidden; }
.lgf-who b, .lgf-emps b { font-weight: 400; color: var(--ink); }
.lgf-who small, .lgf-emps small { font-size: 0.625rem; }
.lgf-emps { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; padding: 0.375rem 0 0; font-size: 0.75rem; color: var(--ink-2); }
.lgf-emps span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.lgc-ring { width: clamp(4.25rem, 10.5vh, 6.25rem); }
body.privacy .lgc-g, body.privacy .lgd-g, body.privacy .lgw-r b, body.privacy .lgf-r b, body.privacy .lg-total b { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) {
  .lgd-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lgd-itr { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .lg-deck { grid-auto-flow: column; grid-auto-columns: 9.5rem; overflow-x: auto; padding: 0.375rem 0.25rem 0.875rem; scroll-snap-type: x mandatory; }
  .lg-card { scroll-snap-align: start; }
  .lg-card.on::after { display: none; }
  .lgd-cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .lgw-r { grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem 2rem; }
  .lgd-g { margin-left: 0; }
}

/* ---------- Accounts §03 · where it goes: a category's own card beside the grid ---------- */
.wh2-map { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.wh-tile { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.625rem; background: var(--c); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: opacity .2s, transform .2s, box-shadow .2s; box-shadow: inset 0 0 0 1.5px rgba(22, 19, 15, .55); }
.wh-tile.dk { color: #FBF8F1; }
.wh-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 55%); pointer-events: none; }
.wh-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ink), 0.3125rem 0.3125rem 0 rgba(22, 19, 15, .18); z-index: 2; }
.wh-tile.dim { opacity: .3; }
.wt-k { font: 600 0.6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wh-tile .wt-v { color: inherit; background: none; padding: 0; font: 400 clamp(1.125rem, min(2.2vw, 4vh), 2.125rem)/1.05 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wh-tile.sm .wt-v { font-size: 1rem; }
.wh-tile.sm .wt-k { font-size: 0.5938rem; }
.wh-tile.xs { padding: 0; border-radius: 0.4375rem; }  /* tiny kinds: a small square, no label (hover for its card) */
.wt-p { font-size: 0.625rem; opacity: .85; }
.wt-strip { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.5rem; height: 26%; max-height: 3rem; display: flex; align-items: flex-end; gap: 2px; }
.wt-strip i { flex: 1; background: currentColor; opacity: .5; border-radius: 1px 1px 0 0; transform-origin: 50% 100%; }
body.privacy .wh-tile .wt-v { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) { .wh2-map { height: 26rem; } }
.wc-hint { margin: 0 0 0.375rem; font-size: 0.625rem; color: #C8431A; letter-spacing: .04em; }
.wc .big { color: var(--c); }
.wc-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: clamp(3.5rem, 11vh, 6rem); margin-top: 0.5rem; }
.wc-col { flex: 1; min-width: 2px; background: var(--c); border-radius: 2px 2px 0 0; transform-origin: 50% 100%; opacity: .75; transition: opacity .15s; }
.wc-col.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); }
.wc-cols em { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink); }
.wc-m { margin-top: 0.3125rem; font-size: 0.6875rem; color: var(--ink-2); }
.wc-m b { color: var(--ink); font-weight: 600; }
.wc-p { position: relative; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0 0.4375rem; font-size: 0.8125rem; border-bottom: 1px dotted var(--rule); }
.wc-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-p b { font-weight: 400; }
.wc-p i { position: absolute; left: 0; bottom: 0.125rem; height: 3px; border-radius: 1.5px; background: var(--c, #FF5B2E); transform-origin: 0 50%; }
.wc-big { font-size: 0.75rem; color: var(--ink-2); margin: 0.5rem 0 0; }

/* ---------- Accounts §04 · the card stage and the statement tape ---------- */
.sec-body.cs2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: 2.5rem; }
.cs2-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.cs-rail { position: relative; height: clamp(12rem, 38vh, 19rem); perspective: 70rem; }
.cs-card { --w: min(100%, clamp(18rem, 30vw, 26rem)); position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 1.586; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left;
  transform: translate(-50%, -50%) translateX(calc(var(--off) * 58%)) scale(calc(1 - min(1, abs(var(--off))) * .26)) rotateY(calc(var(--off) * -28deg)); opacity: calc(1 - min(1, abs(var(--off))) * .45); z-index: calc(10 - abs(var(--off)));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.cs-card[style*="--off:2"], .cs-card[style*="--off:-2"], .cs-card[style*="--off:3"], .cs-card[style*="--off:-3"] { opacity: 0; pointer-events: none; }
.cs-card.on { cursor: default; transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, opacity .6s; }
.cs-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.125rem 1.375rem; border-radius: 1rem; background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .18), transparent 55%), var(--bg); color: var(--fg); box-shadow: 0 1.25rem 2.25rem -1rem rgba(22, 19, 15, .55), 0 0 0 1px rgba(22, 19, 15, .4); overflow: hidden; }
.cs-card.on .cs-face { box-shadow: 0 1.75rem 3rem -1rem rgba(22, 19, 15, .6), -0.5rem 0.5rem 0 var(--tomato); }
.cs-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) calc(var(--mx, 30%) - 6%), transparent calc(var(--mx, 30%) + 14%)); pointer-events: none; transition: background .1s; }
.cs-row { display: flex; justify-content: space-between; align-items: center; }
.cs-iss { font: 600 0.75rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cs-name { font: 400 clamp(1.375rem, 2.2vw, 1.875rem)/1.1 var(--serif); margin-top: 0.25rem; }
.cs-chip { position: relative; display: grid; grid-template-rows: repeat(3, 1fr); width: 2.75rem; height: 2rem; margin-top: auto; border-radius: 0.375rem; background: linear-gradient(135deg, #F3D48A, #C9A24A); border: 1px solid rgba(22, 19, 15, .35); overflow: hidden; }
.cs-chip i { border-bottom: 1px solid rgba(22, 19, 15, .3); }
.cs-wave { position: absolute; right: 1.375rem; top: 62%; font: 700 1rem var(--mono); letter-spacing: -.1em; opacity: .7; transform: rotate(0deg); }
.cs-no { font-size: clamp(0.8125rem, 1.5vw, 1.1875rem); letter-spacing: .08em; margin: 0.625rem 0 0.375rem; white-space: nowrap; }
.cs-foot { font: 600 0.6875rem var(--mono); letter-spacing: .1em; opacity: .9; }
.cs-stamp { position: absolute; right: 1rem; top: 3.25rem; z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 0.375rem 0.75rem; border: 3px solid currentColor; border-radius: 0.5rem; font: 700 1rem/1.1 var(--mono); letter-spacing: .08em; transform: rotate(-12deg); background: rgba(251, 248, 241, .94); pointer-events: none; box-shadow: 0 0.25rem 0.75rem rgba(22, 19, 15, .25); }
.cs-stamp small { font-size: 0.625rem; letter-spacing: .12em; }
.cs-stamp.ok { color: #0E7A58; } .cs-stamp.due { color: #B8330F; } .cs-stamp.nil { color: #6F685C; }
.cs-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.cs-arrow { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--ink); background: #FBF8F1; font: 400 1.375rem/1 var(--sans); cursor: pointer; transition: background .15s, transform .15s; }
.cs-arrow:hover { background: var(--ink); color: #FBF8F1; transform: scale(1.06); }
.cs-dots { display: flex; gap: 0.375rem; }
.cs-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bg); opacity: .35; transition: opacity .2s, transform .2s; }
.cs-dots i.on { opacity: 1; transform: scale(1.4); }
.cs-meter { width: min(100%, 30rem); align-self: center; }
.cs-mk { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cs-mk b { font-weight: 600; color: var(--ink); }
.cs-bar { position: relative; height: 0.625rem; margin: 0.3125rem 0; border-radius: 0.3125rem; background: rgba(22, 19, 15, .08); }
.cs-bar i { display: block; height: 100%; border-radius: 0.3125rem; transform-origin: 0 50%; min-width: 0.375rem; }
.cs-bar em { position: absolute; top: -0.25rem; bottom: -0.25rem; border-left: 1.5px dashed var(--ink); }
.tp { position: relative; background: #FFFDF8; color: #16130F; font-family: var(--mono); padding: 1rem 1.125rem 1.25rem; box-shadow: 0 0.625rem 1.5rem -0.75rem rgba(22, 19, 15, .45); border-left: 1px solid rgba(22, 19, 15, .08); border-right: 1px solid rgba(22, 19, 15, .08);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.875rem 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.875rem 100%; }
.tp-head { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; text-align: center; font-size: 0.6875rem; letter-spacing: .08em; padding-bottom: 0.5rem; border-bottom: 1.5px dashed #16130F; margin-bottom: 0.375rem; }
.tp-head b { font-size: 0.875rem; letter-spacing: .16em; }
.tp-rows { display: flex; flex-direction: column; }
.tp-r { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto 1.25rem; gap: 0.5rem; align-items: center; padding: 0.1875rem 0; border: 0; background: none; font: 0.75rem var(--mono); color: inherit; cursor: pointer; text-align: left; }
.tp-r:hover { background: rgba(255, 91, 46, .08); }
.tp-r i { height: 0.3125rem; background: linear-gradient(90deg, #16130F 0 var(--w), rgba(22, 19, 15, .08) var(--w)); border-radius: 2px; }
.tp-r b { font-weight: 400; text-align: right; }
.tp-r em { font-style: normal; text-align: center; }
.tp-r.full em { color: #0E7A58; } .tp-r.part em { color: #B8330F; font-weight: 700; }
.tp-cut { border-top: 1.5px dashed #16130F; margin: 0.5rem 0; }
.tp-l { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; gap: 0.375rem; align-items: baseline; font-size: 0.6875rem; letter-spacing: .04em; padding: 0.125rem 0; }
.tp-l i { border-bottom: 1px dotted rgba(22, 19, 15, .45); transform: translateY(-0.2rem); }
.tp-l b { font-weight: 400; white-space: nowrap; }
.tp-l.big { font-size: 0.8125rem; font-weight: 600; } .tp-l.big b { font: 400 1.125rem var(--sans); }
.tp-l.up b { color: #0E7A58; }
.tp-sub { font-size: 0.625rem; letter-spacing: .14em; margin-bottom: 0.125rem; }
.tp-open { display: block; width: 100%; margin-top: 0.75rem; border: 0; background: none; font-size: 0.6875rem; letter-spacing: .08em; color: #C8431A; cursor: pointer; }
body.privacy .tp-r b, body.privacy .tp-l .amt, body.privacy .cs-mk b { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) { .sec-body.cs2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } .cs-rail { height: 15rem; } }
@media (max-width: 720px) { .cs-card { --w: 16.5rem; } .cs-rail { height: 12.5rem; overflow: hidden; } .cs-card:not(.on) { opacity: .25; } }
@media (max-width: 1100px) { .cs2-stage { overflow: hidden; } }

/* ---------- Accounts §05 · payees: one payee's card at the top, its bubble in the light ---------- */
#chart-payees .pbub { transition: opacity .2s, stroke-width .2s; }
#chart-payees .pbub.dim { opacity: .12; }
#chart-payees .pbub:not(.dim):hover { stroke-width: 2.5; }
#payees-side [data-payee] { cursor: default; transition: background .15s; border-radius: 3px; }
#payees-side [data-payee].on { background: rgba(255, 91, 46, .1); }
.pc-name { font: 400 1.375rem/1.15 var(--serif); margin: 0.125rem 0 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-m { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; height: 1.25rem; margin-top: 0.5rem; border-bottom: 1px solid var(--rule); }
.pc-m i { justify-self: center; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; transform: scale(var(--s)); }
.pc-ml { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--ink-2); margin-top: 0.1875rem; }

/* ---------- Accounts §06 · the rhythm as three clocks ---------- */
.sec-body.rh2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 2rem; }
.rh2-c { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.rh-wheel { flex: 1; min-height: 0; display: grid; place-items: center; }
.rh-dial { flex: 1.4; min-height: 0; display: grid; place-items: center; }
.rh-wheel svg, .rh-dial svg { max-width: 100%; max-height: 100%; }
.rh-k { margin: 0; font-size: 0.625rem; color: var(--ink-2); text-align: center; }
#a-rhythm .wh-l { font: 600 9.5px var(--mono); fill: #8A8275; }
#a-rhythm .wh-big { font: 400 22px var(--sans); fill: #16130F; }
#a-rhythm .wh-sm { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: #8A8275; }
.rh-dow { flex: 1; min-height: 4.5rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; }
.rw-d { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.125rem; border: 0; background: none; padding: 0; font: inherit; cursor: default; }
.rw-d i { display: block; width: 100%; background: #D2C8B6; border: 1px solid rgba(22, 19, 15, .5); border-radius: 3px 3px 0 0; transform-origin: 50% 100%; transition: background .15s, opacity .15s; }
.rw-d.top i, .rw-d.lit i { background: var(--tomato); }
.rw-d b { font: 600 0.625rem var(--mono); }
.rw-d em { font-style: normal; font-size: 0.625rem; color: var(--ink-2); }
.rh-cal { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: space-between; gap: 0.5rem 0.875rem; }
.rc-m { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.rc-h { display: flex; justify-content: space-between; align-items: baseline; }
.rc-h b { font: 400 0.9375rem var(--serif); }
.rc-h span { font-size: 0.625rem; color: var(--ink-2); }
.rc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rc-g i { aspect-ratio: 1.15; border-radius: 2px; transition: opacity .18s, box-shadow .18s; }
#a-rhythm.spot:not(.from-day) .cal-d:not(.lit) { opacity: .15; }
#a-rhythm.spot .cal-d.lit { box-shadow: inset 0 0 0 1.5px #16130F; }
#a-rhythm .dm-b { transition: opacity .18s; }
#a-rhythm.spot .dm-b:not(.lit) { opacity: .35; }
#a-rhythm.spot .rw-d:not(.lit) i { opacity: .45; }
body.privacy .rw-d em, body.privacy .rc-h span { filter: blur(5px); }
@media (max-width: 1100px), (max-height: 600px) {
  .sec-body.rh2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .rh2-c:last-child { grid-column: 1 / -1; }
  .rh-wheel, .rh-dial { height: 17rem; flex: none; }
  .rh-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .sec-body.rh2 { grid-template-columns: minmax(0, 1fr); } .rh2-c:last-child { grid-column: auto; } .rh-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Accounts §07 · between us: a seesaw ---------- */
.ss-svg { display: block; width: 100%; max-width: 20rem; height: auto; margin: 0.25rem auto 0.375rem; overflow: visible; }
.ss-beam { transform-box: view-box; transform-origin: 130px 72px; }
.ss-svg .ss-i { font: 600 12px var(--mono); fill: #fff; }
.ss-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ss-legs > div:last-child { text-align: right; }
.ss-legs small { display: block; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ss-legs b { display: block; font: 400 clamp(1.625rem, min(2.4vw, 4.4vh), 2.25rem)/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.ss-legs em { font-style: normal; font-size: 0.75rem; color: var(--ink-2); }
.ss-net { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: 0.375rem; }
.ss-net b { color: var(--ink); font-weight: 600; }

/* ---------- Accounts §08 · the balance: a card per account ---------- */
.bl-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; height: 100%; }
.bl-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-card { min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; border: 1.5px solid var(--ink); border-top: 0.375rem solid var(--c); border-radius: 0.875rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); box-shadow: 0.375rem 0.375rem 0 rgba(22, 19, 15, .12); padding: 0.875rem 1.125rem; }
.bl-card header { display: flex; align-items: center; gap: 0.5rem; }
.bl-name { font: 600 0.75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bl-card header small { margin-left: auto; font-size: 0.625rem; color: var(--ink-2); }
.bl-now { display: flex; align-items: baseline; gap: 0.75rem; }
.bl-now b { font: 400 clamp(2.25rem, min(3.6vw, 6.4vh), 3.5rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bl-now span { font-size: 0.75rem; color: var(--ink-2); }
.bl-h { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--ink); padding-top: 0.3125rem; margin-top: 0.25rem; }
.bl-year { display: block; width: 100%; height: clamp(3rem, 9vh, 5rem); }
.bl-mwrap { position: relative; flex: 1; min-height: 5rem; }
.bl-month { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-sal { position: absolute; top: 0; bottom: 14.6%; border-left: 1.5px dashed #1FA37A; }
.bl-sal em { position: absolute; right: 0.25rem; top: 0; font-style: normal; font-size: 0.625rem; color: #0E7A58; white-space: nowrap; }
.bl-dot { position: absolute; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: var(--c); }
.bl-dot.lo { background: #FBF8F1; box-shadow: inset 0 0 0 1.5px var(--c); }
.bl-x { position: absolute; bottom: 0; transform: translateX(-50%); font-style: normal; font-size: 0.625rem; color: var(--ink-2); }
.bl-lh { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.625rem; color: var(--ink-2); }
.bl-say { margin: 0; font: 400 0.9375rem/1.3 var(--serif); }
.bl-say b { font: 500 0.875rem var(--sans); }
.bl-chips { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; }
.bl-chips span { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; }
.bl-chips b { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; color: #fff; font: 700 0.625rem var(--sans); background: #8A8275; }
.bl-chips .ok b { background: #1FA37A; } .bl-chips .warn b { background: #E08A00; }
body.privacy .bl-now b, body.privacy .bl-say b, body.privacy .bl-lh { filter: blur(6px); }
@media (max-width: 1100px), (max-height: 600px) { .bl-cards.two { grid-template-columns: minmax(0, 1fr); } .bl-cards { height: auto; } .bl-mwrap { height: 8rem; flex: none; } }

/* ---------- Accounts §05 · payees: bubbles inside their category, a leaderboard beside ---------- */
#chart-payees .pk-cl { font: 600 9.5px var(--mono); letter-spacing: .1em; fill: #16130F; paint-order: stroke; stroke: #F1ECE1; stroke-width: 4px; pointer-events: none; }
#payees-side .wc-hint { font-size: 0.625rem; letter-spacing: .04em; white-space: normal; }
.payee-list { min-width: 0; }
#chart-payees .pk-n { font: 500 10.5px var(--sans); fill: #16130F; pointer-events: none; }
#chart-payees .pk-v { font: 400 10px var(--mono); fill: #16130F; pointer-events: none; }
.lb-r { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto 2.25rem; gap: 0.5rem; align-items: baseline; padding: 0.3125rem 0.25rem 0.5rem; border-bottom: 1px dotted var(--rule); font-size: 0.8125rem; cursor: pointer; border-radius: 3px; transition: background .15s; }
.lb-r.on { background: rgba(255, 91, 46, .1); }
.lb-r em { font-style: normal; font-size: 0.6875rem; color: var(--ink-2); }
.lb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-r > b { font-weight: 400; font-variant-numeric: tabular-nums; }
.lb-r small { font-size: 0.625rem; color: var(--ink-2); text-align: right; }
.lb-r > i { position: absolute; left: 1.75rem; bottom: 0.1875rem; height: 3px; border-radius: 1.5px; background: var(--c); transform-origin: 0 50%; }
body.privacy .lb-r > b, body.privacy #chart-payees .pk-v { filter: blur(6px); }

/* ---------- Accounts §07 · between us as a river ---------- */












/* ---------- Investments §02 · everything you hold as two rings ---------- */
#chart-tree .sb-s { cursor: default; transition: opacity .18s; }
#chart-tree .sb-s.dim { opacity: .18; }
#chart-tree .sb-l { font: 600 10.5px var(--mono); fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(22, 19, 15, .35); stroke-width: 2px; }
#chart-tree .sb-ck { font: 600 9.5px var(--mono); letter-spacing: .1em; fill: #6F685C; }
#chart-tree .sb-cv { font: 400 30px var(--sans); fill: #16130F; }
#chart-tree .sb-cn { font: 400 11px var(--sans); fill: #6F685C; }
#where-side [data-kind] { cursor: default; border-radius: 3px; transition: background .15s; }
#where-side [data-kind].on { background: rgba(255, 91, 46, .1); }
body.privacy #chart-tree .sb-cv { filter: blur(6px); }

/* ---------- Investments §03 · funds as bubbles on the return line ---------- */








.fc-n { font: 400 1.25rem/1.15 var(--serif); margin: 0.125rem 0 0.25rem; }
.fc-bar { display: flex; height: 0.5rem; gap: 1px; border-radius: 0.25rem; overflow: hidden; margin: 0.375rem 0; }
.fc-hint { font-size: 0.625rem; color: #C8431A; margin: 0.25rem 0 0; }

/* ---------- Investments §04 · the market board ---------- */
.sb-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.375rem, 1.1vh, 0.75rem); }
.sb-tick { flex: none; overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); background: #16130F0a; padding: 0.3125rem 0; white-space: nowrap; }
.sb-tick > div { display: inline-flex; gap: 1.75rem; animation: sbTick 120s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-font-smoothing: antialiased; font: 600 0.6875rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.sb-tick em { font-style: normal; margin-left: 0.25rem; }
@keyframes sbTick { to { transform: translate3d(-50%, 0, 0); } }
.sb-tick:hover > div { animation-play-state: paused; }
#chart-funds [data-fund], #chart-stocks [data-stock] { cursor: pointer; }
#chart-funds [data-fund]:focus-visible, #chart-stocks [data-stock]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sb-board em.up, .sb-board .amt.up { color: #0E7A58; } .sb-board em.down, .sb-board .amt.down { color: #B8330F; }
.sb-etf { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.sb-big { position: relative; display: flex; flex-direction: column; gap: 0.125rem; padding: clamp(0.375rem, 1.1vh, 0.75rem) 0.875rem clamp(0.375rem, 1vh, 0.625rem); border: 1.5px solid var(--ink); border-radius: 0.75rem; background: linear-gradient(150deg, color-mix(in srgb, var(--k) 22%, #FBF8F1), #FBF8F1 70%); box-shadow: 0.3125rem 0.3125rem 0 rgba(22, 19, 15, .12); }
.sb-kind { display: flex; align-items: center; gap: 0.375rem; font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sb-big .sb-name { font: 400 1.0625rem/1.2 var(--serif); }
.sb-big > b { font: 400 clamp(1.5rem, min(2.4vw, 4.2vh), 2.375rem)/1 var(--sans); font-variant-numeric: tabular-nums; }
.sb-meta { font-size: 0.625rem; color: var(--ink-2); }
.sb-g { font-size: 0.8125rem; display: flex; gap: 0.5rem; align-items: baseline; }
.sb-g em { font-style: normal; font-weight: 600; }
.sb-grid { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); grid-auto-rows: min-content; gap: 0.5rem; align-content: start; }
.sb-q.on, .sb-big.on { border-color: var(--ink); box-shadow: 0.3125rem 0.3125rem 0 var(--k, var(--tomato)); transform: translateY(-2px); }
.fq-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--k); }
.fx { font: 600 0.625rem var(--mono); color: var(--ink-2); }
.fx.up { color: #0E7A58; } .fx.down { color: #B8330F; }
.sb-g .fx { margin-left: auto; }
.sb-tick i { font-style: normal; color: var(--ink-2); font-weight: 400; }
.sb-line { min-height: 5.75rem; display: flex; flex-direction: column; gap: 0.25rem; border: 1.5px solid var(--ink); border-radius: 0.5rem; background: linear-gradient(160deg, #FBF8F1, #F3EEE3); padding: 0.4375rem 0.625rem 0.375rem; }
.sb-grid { flex: 1; min-height: 0; grid-auto-rows: minmax(min-content, 1fr); align-content: stretch; }
.sb-q { justify-content: space-between; }
.sb-line .sb-cols { min-height: 2.75rem; }
#chart-funds .sb-grid { grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); }
.sb-lh { flex-wrap: wrap; row-gap: 0.125rem; }
.sb-lh { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sb-score b { font-weight: 600; } .sb-score b.up, .sb-bw b.up { color: #0E7A58; } .sb-score b.down, .sb-bw b.down { color: #B8330F; }
.sb-cols { flex: 1; min-height: 2.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.25rem; }
.sb-c { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 0.6fr) auto; min-width: 0; cursor: default; }
.sb-u { display: flex; align-items: flex-end; border-bottom: 1.5px solid var(--ink); }
.sb-d { display: flex; align-items: flex-start; }
.sb-c i { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.sb-c i.up { background: #1FA37A; transform-origin: 50% 100%; } .sb-c i.down { background: #FF5B2E; border-radius: 0 0 2px 2px; transform-origin: 50% 0; }
.sb-c em { font-style: normal; font: 0.5625rem var(--mono); color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1875rem; }
.sb-c:hover i { filter: brightness(.85); }
.sb-bw { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.625rem; color: var(--ink-2); }
body.privacy .sb-bw .amt, body.privacy .sb-score .amt { filter: blur(5px); }
.sb-q { display: flex; flex-direction: column; gap: 0.0625rem; padding: clamp(0.3125rem, 0.9vh, 0.5rem) 0.625rem; border: 1px solid rgba(22, 19, 15, .35); border-radius: 0.5rem; background: #FBF8F1; transition: transform .15s, box-shadow .15s; }
.sb-q:hover { transform: translateY(-2px); box-shadow: 0.25rem 0.25rem 0 rgba(22, 19, 15, .12); border-color: var(--ink); }
.sb-q .sb-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1.25; min-height: 1.875rem; }
.sb-q .sb-name .fq-dot { vertical-align: 0.0625rem; margin-right: 0.25rem; }
.sb-q .sb-name .who-dot { vertical-align: 0.0625rem; margin-left: 0.3125rem; }
.sb-q .sb-name img { vertical-align: -0.1875rem; }
#chart-stocks .sb-q { cursor: default; }
.sb-row { display: flex; justify-content: space-between; align-items: baseline; }
.sb-row b { font: 400 clamp(1rem, 2.2vh, 1.125rem) var(--sans); font-variant-numeric: tabular-nums; }
.sb-row em { font-style: normal; font: 600 0.6875rem var(--mono); }
.sb-rail { position: relative; display: block; height: 0.375rem; margin: clamp(0.1875rem, 0.6vh, 0.3125rem) 0 clamp(0.125rem, 0.5vh, 0.25rem); background: rgba(22, 19, 15, .08); border-radius: 0.1875rem; }
.sb-rail b { position: absolute; top: 0; bottom: 0; border-radius: 0.1875rem; }
.sb-rail b.up { background: rgba(31, 163, 122, .5); } .sb-rail b.down { background: rgba(255, 91, 46, .45); }
.sb-rail i { position: absolute; top: 50%; }
.sb-rail i.c { width: 2px; height: 0.875rem; margin: -0.4375rem 0 0 -1px; background: var(--ink); }
.sb-rail i.p { width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%; border: 2px solid #FBF8F1; }
.sb-rail i.p.up { background: #1FA37A; } .sb-rail i.p.down { background: #FF5B2E; }
body.privacy .sb-big > b, body.privacy .sb-row b, body.privacy .sb-g .amt { filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .sb-tick > div { animation: none; } }
@media (max-width: 1100px), (max-height: 600px) { .sb-line { min-height: 8rem; } }
@media (max-width: 720px) { .sb-c em { display: none; } .sb-c { grid-template-rows: minmax(0, 1fr) minmax(0, 0.6fr); } }

/* ---------- Investments §05 · Microsoft: the grant as an hourglass ---------- */
.ms-board { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; }
.mt-logo { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 8%; width: 1.25rem; height: 1.25rem; flex: none; }
.mt-logo b:nth-child(1) { background: #F25022; } .mt-logo b:nth-child(2) { background: #7FBA00; } .mt-logo b:nth-child(3) { background: #00A4EF; } .mt-logo b:nth-child(4) { background: #FFB900; }
.hg-glass { min-height: 0; min-width: 0; position: relative; }
.hg-glass svg { position: absolute; inset: 0; display: block; overflow: visible; }
.hg-glassf { fill: rgba(0, 120, 212, .05); }
.hg-edge { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.hg-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.hg-cap { fill: #16130F; }
.hg-sh { fill: rgba(22, 19, 15, .18); }
.hg-fu { fill: #FBF8F1; stroke: #0078D4; stroke-width: 1.4; stroke-dasharray: 3 2.2; }
.hg-c.fut text { fill: #0078D4; font-family: var(--mono); letter-spacing: .02em; }
.hg-in { fill: #0078D4; stroke: #0A4F8C; stroke-width: 1.2; }
.hg-w rect { fill: #fff; }
.hg-pt { fill: none; stroke: #0A4F8C; stroke-width: 1.2; }
.hg-acc { fill: #8CC0EC; transition: y 1s linear, height 1s linear; }  /* the next vest, filling in live */
.hg-c.live .hg-pt { stroke-dasharray: 3 2; animation: hgLive 6s linear infinite; }
@keyframes hgLive { to { stroke-dashoffset: -50; } }
.hg-fl { font-variant-numeric: tabular-nums; }
.hg-fl .hg-fk { fill: #0A4F8C; }
.hg-tx { stroke: #6B645A; stroke-width: 1.1; }
.hg-nx { fill: #FFF6DC; stroke: #0078D4; stroke-width: 1.8; }
.hg-c.next text { fill: #0A4F8C; font-family: var(--mono); font-weight: 600; }
.hg-c.next { animation: hgBob 2.4s ease-in-out infinite; }
@keyframes hgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.hg-sand { fill: #0078D4; opacity: 0; animation: hgFall 2.2s linear infinite; }
@keyframes hgFall { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 85% { opacity: .8; } 100% { transform: translateY(var(--fall)); opacity: 0; } }
.hg-c { cursor: default; transition: filter .15s; }
.hg-c:hover { filter: drop-shadow(0 0 4px rgba(0, 120, 212, .6)); }
.hg-skim { fill: none; stroke: #6B645A; stroke-width: 1.3; stroke-dasharray: 4 3; }
.hg-lk { font: 600 0.625rem var(--mono); letter-spacing: .1em; fill: var(--ink-2); }
.hg-lv { font: 400 1.375rem var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.hg-ls { font: 400 0.6875rem var(--mono); fill: var(--ink-2); }
.hg-nl .hg-lk { fill: #0078D4; }
.hg-panel { min-height: 0; display: flex; flex-direction: column; gap: 0.875rem; justify-content: center; }
.hg-quote { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem; border: 1.5px solid var(--ink); border-radius: 0.875rem; background: #FBF8F1; box-shadow: 0.375rem 0.375rem 0 rgba(0, 120, 212, .2); }
.hg-quote > .mt-logo { width: 2rem; height: 2rem; }
.hg-q1 b { display: block; font-size: 1.125rem; letter-spacing: .06em; }
.hg-q1 span, .hg-px span { font-size: 0.6875rem; color: var(--ink-2); }
.hg-px { text-align: right; }
.hg-px > b { display: block; font: 400 clamp(1.5rem, min(2.3vw, 4.2vh), 2.25rem)/1.05 var(--sans); font-variant-numeric: tabular-nums; }
.hg-next { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: 0.625rem 0.25rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hg-ring { width: clamp(4.5rem, 7vw, 6rem); height: auto; }
.hg-rt { fill: none; stroke: #E4DDD0; stroke-width: 7; }
.hg-rf { fill: none; stroke: #0078D4; stroke-width: 7; stroke-linecap: round; }
.hg-ring text { font: 400 20px var(--sans); fill: var(--ink); }
.hg-ring .hg-rs { font: 10.5px var(--mono); fill: var(--ink-2); letter-spacing: .08em; }
.hg-next small { display: block; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hg-next b { display: block; font: 400 1.5rem/1.2 var(--sans); color: #0078D4; }
.hg-next span { font-size: 0.75rem; color: var(--ink-2); }
.hg-what { padding: 0.875rem 1rem; border: 1.5px dashed #0078D4; border-radius: 0.875rem; background: rgba(0, 120, 212, .04); }
.hg-wh { display: flex; align-items: baseline; gap: 0.625rem; }
.hg-wh > span { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hg-wh > b { font: 400 1.75rem var(--sans); font-variant-numeric: tabular-nums; }
.hg-wh > em { font-style: normal; font-size: 0.6875rem; color: var(--ink-2); margin-left: auto; }
.hg-wh > em.up { color: #1FA37A; } .hg-wh > em.dn { color: #FF5B2E; }
.hg-track { position: relative; margin: 0.5rem 0 0.25rem; }
#hg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 0.5rem; border-radius: 1rem; background: linear-gradient(90deg, #0078D4 var(--v, 50%), #E4DDD0 var(--v, 50%)); outline: none; margin: 0.5rem 0; cursor: ew-resize; }
#hg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #FBF8F1; border: 2px solid var(--ink); box-shadow: 0.125rem 0.125rem 0 rgba(22, 19, 15, .25); }
#hg-range::-moz-range-thumb { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #FBF8F1; border: 2px solid var(--ink); }
.hg-marks { position: relative; height: 0.625rem; margin: 0 0.6875rem; }
.hg-marks i { position: absolute; top: 0; width: 0; height: 0; border-left: 0.3125rem solid transparent; border-right: 0.3125rem solid transparent; border-bottom: 0.5rem solid #0A4F8C; transform: translateX(-50%); }
.hg-marks i.now { width: 0.5rem; height: 0.5rem; border: 0; border-radius: 50%; background: #FF5B2E; }
.hg-ends { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--ink-2); margin-top: 0.25rem; }
.hg-out { display: grid; gap: 0.25rem; margin-top: 0.625rem; }
.hg-out > div { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; padding: 0.25rem 0; border-bottom: 1px dotted var(--rule); }
.hg-out > div > i { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.hg-out .hg-o { border: 1.4px dashed #0078D4; }
.hg-out b { font: 400 1.125rem var(--sans); font-variant-numeric: tabular-nums; }
.hg-out .tot { grid-template-columns: 1fr auto; border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 0.375rem; }
.hg-out .tot b { font-size: 1.5rem; color: #0078D4; }
body.privacy .hg-lv, body.privacy .hg-out b, body.privacy .hg-px .amt, body.privacy .hg-next .amt { filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .hg-c.next, .hg-sand, .hg-c.live .hg-pt { animation: none; } }
@media (max-width: 900px) { .ms-board { grid-template-columns: minmax(0, 1fr); } .hg-glass { height: 26rem; } }

/* ---------- Investments §06 · Awards: share certificates and vest receipts ---------- */
.aw2 { display: flex; flex-direction: column; gap: 0.75rem; }
.aw-hd { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; }
.aw-certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem; }
.aw-cert { position: relative; padding: 0.875rem 1rem 0.75rem; background: #FBF8F1; border: 1.5px solid var(--ink); border-radius: 0.375rem; box-shadow: inset 0 0 0 0.3125rem #FBF8F1, inset 0 0 0 0.375rem rgba(0, 120, 212, .55), 0.375rem 0.375rem 0 rgba(0, 120, 212, .16); overflow: hidden; transition: transform .2s, box-shadow .2s, opacity .2s; }
.aw-cert::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 110% -10%, transparent 0 0.5rem, rgba(0, 120, 212, .05) 0.5rem 0.5625rem); pointer-events: none; }
.aw-cert header { position: relative; display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.aw-cert header .mt-logo { width: 0.875rem; height: 0.875rem; }
.aw-cert header em { margin-left: auto; font-style: normal; color: #0078D4; }
.aw-cert h4 { position: relative; margin: 0.25rem 0 0.125rem; font: 400 clamp(1.375rem, 1.9vw, 1.875rem)/1.1 var(--serif); letter-spacing: -.01em; }
.aw-line { position: relative; margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--ink-2); }
.aw-sh { position: relative; display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
.aw-sh i { width: 0.875rem; height: 1.125rem; border-radius: 0.1875rem; border: 1.3px dashed #0078D4; background: #fff; }
.aw-sh i.on { border: 1.3px solid #0A4F8C; background: #0078D4 linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 55%); }
.aw-num { position: relative; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; color: var(--ink-2); }
.aw-num b { font-weight: 600; color: var(--ink); }
.aw-num em { display: block; font-style: normal; white-space: nowrap; }
.aw-num .cur-alt { color: inherit; }
.aw-cert footer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; margin-top: 0.5rem; padding-top: 0.375rem; border-top: 1px dashed var(--rule); font-size: 0.6875rem; color: var(--ink-2); }
.aw-cert footer b { color: #0078D4; font-weight: 600; }
.aw-mid { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.aw-stamp { flex: none; text-align: center; max-width: 6rem; line-height: 1.2; padding: 0.25rem 0.375rem; border: 2px solid #FF5B2E; border-radius: 0.25rem; color: #FF5B2E; font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; transform: rotate(var(--rot)); opacity: .85; mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(255, 91, 46, .4); }
.aw-stamp.done { color: #1FA37A; border-color: #1FA37A; }
.aw-stamp.none { color: #8A8274; border-color: #8A8274; }
.aw-rows { display: flex; flex-direction: column; }
.aw-r { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); transition: opacity .2s; }
.aw-d b { display: block; font-weight: 400; font-size: 0.9375rem; }
.aw-d small { font-size: 0.6875rem; color: var(--ink-2); }
.aw-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; position: relative; }
.aw-flow::before { content: "→"; position: absolute; left: 50%; top: -0.125rem; transform: translateX(-50%); color: var(--ink-2); font-size: 0.875rem; }
.aw-bar { display: flex; height: 0.875rem; min-width: 0.5rem; border-radius: 0.25rem; overflow: hidden; gap: 1px; transform-origin: left; }
.aw-bar .ld, .aw-key .ld { background: #0078D4; }
.aw-bar .tx, .aw-key .tx { background: repeating-linear-gradient(45deg, #FF5B2E 0 2px, #FFD9CC 2px 5px); }
.aw-bar.now i, .aw-key .nw { background: #1FA37A; }
.aw-bar.now.dn i { background: #FF5B2E; }
.aw-flow small { display: block; margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.45; color: var(--ink-2); }
.aw-flow small b { font-weight: 600; }
.tx-t { color: #C2410C; } .ld-t { color: #0078D4; }
.aw-key { display: inline-flex; align-items: center; gap: 0.375rem; text-transform: none; letter-spacing: 0; }
.aw-key i { width: 0.625rem; height: 0.625rem; border-radius: 2px; margin-left: 0.5rem; }
.aw-tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.75rem; color: var(--ink-2); padding-top: 0.125rem; }
.aw-tot b { color: var(--ink); font-weight: 600; }
.aw-note { margin: 0; font-size: 0.6875rem; color: var(--ink-2); }
.aw2.pick .aw-cert:not(.hit), .aw2.pick .aw-r:not(.hit) { opacity: .35; }
.aw2.pick .aw-cert.hit { transform: translateY(-3px); box-shadow: inset 0 0 0 0.3125rem #FBF8F1, inset 0 0 0 0.375rem #0078D4, 0.5rem 0.5rem 0 rgba(0, 120, 212, .3); }
body.privacy .aw-num .amt, body.privacy .aw-flow .amt, body.privacy .aw-tot .amt, body.privacy .aw-line .amt, body.privacy .aw-cert footer .amt { filter: blur(6px); }
@media (max-width: 720px) { .aw-certs { grid-template-columns: minmax(0, 1fr); } .aw-r { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .aw-flow { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } .aw-flow::before { display: none; } }

/* ---------- Investments §07 · the vesting cycle as a metro map ---------- */
.cy-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cy-hd { flex: none; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; }
.cy-svg { flex: 1; min-height: 0; position: relative; }
.cy-svg svg { position: absolute; inset: 0; display: block; overflow: visible; }
.cy-band { fill: rgba(22, 19, 15, .025); } .cy-band.odd { fill: rgba(0, 120, 212, .04); }
.cy-yr { font: 600 0.6875rem var(--mono); letter-spacing: .1em; fill: var(--ink-2); }
.cy-mo { font: 0.625rem var(--mono); letter-spacing: .06em; fill: var(--ink-2); }
.cy-hit { fill: transparent; }
.cy-hit.on { fill: rgba(0, 120, 212, .07); }
.cy-track { stroke-width: 7; stroke-linecap: round; opacity: .28; }
.cy-run { stroke-width: 7; stroke-linecap: round; }
.cy-term { fill: #FBF8F1; stroke-width: 2.5; }
.cy-ln { font: 400 0.9375rem var(--serif); fill: var(--ink); }
.cy-ls { font: 0.625rem var(--mono); fill: var(--ink-2); }
.cy-int { fill: #FBF8F1; stroke: var(--ink); stroke-width: 1.6; }
.cy-st { cursor: default; }
.cy-dot { stroke: var(--c); stroke-width: 2.5; fill: #FBF8F1; transition: stroke-width .15s; }
.cy-st.past .cy-dot { fill: var(--c); }
.cy-st.est .cy-dot { stroke-dasharray: 3 2; }
.cy-st text { font-family: var(--sans); fill: var(--ink); pointer-events: none; font-variant-numeric: tabular-nums; }
.cy-st.past text { fill: #fff; }
.cy-st.next .cy-dot { stroke: #FF5B2E; stroke-width: 3; }
.cy-ping { fill: none; stroke: #FF5B2E; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: cyPing 1.8s ease-out infinite; }
@keyframes cyPing { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.cy-st:hover .cy-dot { stroke-width: 4; }
.cy-here line { stroke: #FF5B2E; stroke-width: 1.4; stroke-dasharray: 4 3; }
.cy-here path { fill: #FF5B2E; }
.cy-a1 { fill: rgba(0, 120, 212, .8); }
.cy-a2 { fill: rgba(0, 120, 212, .14); }
.cy-sl { fill: none; stroke: #0A4F8C; stroke-width: 1.5; }
.cy-gl { stroke: var(--rule); stroke-dasharray: 2 3; }
.cy-gt { font: 0.5938rem var(--mono); fill: var(--ink-2); }
.cy-sk { font: 600 0.625rem var(--mono); letter-spacing: .08em; fill: var(--ink-2); }
.cy-sk2 { font: 0.625rem var(--mono); fill: var(--ink-2); }
.cy-pv { font: 0.625rem var(--mono); fill: #0A4F8C; }
.cy-wv { font: 600 0.625rem var(--mono); fill: var(--ink); } .cy-wv.q { fill: var(--rule); }
.cy-wu { font: 0.625rem var(--mono); fill: var(--ink-2); }
.cy-svg svg.pick .cy-line:not(.hit), .cy-svg svg.pick .cy-st:not(.hit) { opacity: .25; }
.cy-line, .cy-st { transition: opacity .2s; }
.cy-line { cursor: pointer; }
.cy-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 0.375rem; }
.cy-read { font-size: 0.75rem; color: var(--ink-2); min-height: 1.1rem; }
.cy-read b { color: var(--ink); font-weight: 600; }
.cy-key { display: flex; gap: 0.875rem; font-size: 0.6875rem; color: var(--ink-2); }
.cy-key span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.cy-key i { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid #00A4EF; }
.cy-key .k1 { background: #00A4EF; } .cy-key .k2 { border-color: #FF5B2E; } .cy-key .k3 { background: #FBF8F1; }
.cy-key .k4 { width: 0.75rem; height: 1.125rem; border-radius: 0.5rem; border: 1.5px solid var(--ink); background: #FBF8F1; }
body.privacy .cy-wu, body.privacy .cy-read .amt { filter: blur(5px); }
@media (prefers-reduced-motion: reduce) { .cy-ping { animation: none; } }
@media (max-width: 900px) { .cy-svg { flex: none; height: 28rem; overflow-x: auto; overflow-y: hidden; } .cy-svg svg { position: static; } }

/* ---------- Investments §08 · EPF: passbook card, the balance month by month, every month's slip ---------- */
.pb-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ep-hero { flex: none; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 0.5rem 2rem; align-items: end; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); }
.ep-h1 em { display: block; font-style: normal; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ep-big { display: block; font: 400 clamp(2.25rem, min(3.8vw, 6.5vh), 3.375rem)/1.02 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 0.125rem 0 0.25rem; }
.ep-hs { font-size: 0.6875rem; color: var(--ink-2); }
.ep-anat { min-width: 0; padding-bottom: 0.25rem; }
.ep-abar { display: flex; gap: 3px; height: 1.625rem; }
.ep-abar i { display: block; min-width: 0.375rem; border-radius: 0.3125rem; transform-origin: left; transition: opacity .2s, transform .2s; cursor: default; }
.ep-abar i.ps { margin-left: 0.625rem; }
.ep-abar .ee, .ep-alab i.ee { background: #7A5230; }
.ep-abar .er, .ep-alab i.er { background: #D4A017; }
.ep-abar .in, .ep-alab i.in { background: #1FA37A; }
.ep-abar .ps, .ep-alab i.ps { background: repeating-linear-gradient(45deg, #16130F 0 1.5px, #F1ECE1 1.5px 5px); box-shadow: inset 0 0 0 1px #16130F; }
.ep-alab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.ep-alab span { display: grid; grid-template-columns: auto 1fr; column-gap: 0.375rem; align-items: baseline; cursor: default; transition: opacity .2s; }
.ep-alab span i { width: 0.625rem; height: 0.625rem; border-radius: 2px; grid-row: 1; }
.ep-alab em { font-style: normal; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ep-alab b { grid-column: 1 / -1; font-weight: 400; font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.ep-alab small { grid-column: 1 / -1; font-size: 0.625rem; color: var(--ink-2); }
.ep-anat.pick [data-seg]:not(.hit) { opacity: .3; }
.ep-anat.pick .ep-abar i.hit { transform: scaleY(1.15); }
.ep-chart svg.pick [data-seg]:not(.hit) { opacity: .25; }
.ep-areas path { transition: opacity .2s; }
.ep-career { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ep-crow { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.ep-cw { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.ep-cw.mono { font-size: 0.625rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ep-cw i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.ep-cjobs { display: flex; gap: 3px; min-width: 0; }
.ep-job { min-width: 5.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.375rem; padding: 0.1875rem 0.5rem; border-radius: 1rem; background: color-mix(in srgb, var(--e) 12%, #FBF8F1); box-shadow: inset 0 0 0 1.5px var(--e); overflow: hidden; }
.ep-jgap { min-width: 0; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: var(--ink-2); border-top: 1.5px dashed var(--rule); align-self: center; height: 0; overflow: visible; }
.ep-job b { flex: none; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.ep-job small { min-width: 0; font-size: 0.625rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-est { fill: rgba(212, 160, 23, .08); stroke: rgba(122, 82, 48, .35); stroke-dasharray: 3 4; }
.chart .ep-estt, .ep-estt { font: 600 9.5px var(--mono); letter-spacing: .06em; fill: #7A5230; text-transform: uppercase; }
.ep-slip.est { background: repeating-linear-gradient(135deg, #FBF8F1 0 7px, rgba(212, 160, 23, .12) 7px 9px); border-style: dashed; }
.ep-trustn { color: #7A5230; }
.ep-job.trust { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--e) 10%, #FBF8F1) 0 6px, #FBF8F1 6px 12px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--e) 70%, transparent); }  /* PF held in the employer's own trust: passbook to come */
.ep-ticks { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; margin-top: 0.375rem; }
.ep-tt i { min-width: 1px; }
.ep-tt { display: flex; gap: 1px; height: 0.875rem; align-items: stretch; }
.ep-tt i { flex: 1; max-width: 0.4375rem; border-radius: 1px; }
.ep-tt i.ok { background: #1FA37A; } .ep-tt i.bad { background: #FF5B2E; }
.ep-ticks > span { font-size: 0.625rem; letter-spacing: .04em; color: var(--ink-2); }
.ep-ticks b { font-weight: 600; }
.ep-pd { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; margin-right: 0.25rem; vertical-align: 0.0625rem; }
.ep-chart { flex: 1; min-height: 6rem; position: relative; }
.ep-chart svg { position: absolute; inset: 0; display: block; overflow: visible; }
.ep-era { opacity: .045; }

.ep-gl { stroke: var(--rule); stroke-dasharray: 2 3; }
.ep-none { fill: url(#p-hatch-fine); opacity: .18; }
.ep-nt { font: 0.6875rem var(--mono); fill: var(--ink-2); letter-spacing: .04em; }
.ep-ax { font: 0.625rem var(--mono); fill: var(--ink-2); }
.ep-ae { fill: #7A5230; } .ep-ar { fill: #D4A017; } .ep-ai { fill: #1FA37A; }
.ep-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ep-coin circle { fill: #FFD35A; stroke: #A57C0C; stroke-width: 1.2; }
.ep-coin text { font: 700 0.5625rem var(--sans); fill: #6B4E00; }
.ep-coin .ep-cl { font: 0.625rem var(--mono); fill: #A57C0C; }
.ep-xf circle { fill: #FBF8F1; stroke: #1FA37A; stroke-width: 1.5; }
.ep-xf text { font: 700 0.5625rem var(--sans); fill: #1FA37A; }
.ep-now circle { fill: #FF5B2E; stroke: #FBF8F1; stroke-width: 2; }
.ep-hov line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.ep-hov circle { fill: #FBF8F1; stroke: var(--ink); stroke-width: 1.5; }
.ep-hit { fill: transparent; cursor: crosshair; }
.ep-read { flex: none; font-size: 0.6875rem; line-height: 1.5; color: var(--ink-2); height: 2.35rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border-top: 1px solid var(--rule); padding-top: 0.25rem; }
.ep-read b { color: var(--ink); font-weight: 600; } .ep-read .ep-sub { text-transform: none; } .ep-read .gold { color: #A57C0C; }
.ep-nav { flex: none; display: flex; align-items: center; gap: 0.75rem; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ep-fys { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ep-fys button { font-size: 0.625rem; padding: 0.125rem 0.4375rem; border: 1px solid var(--rule); border-radius: 1rem; background: #FBF8F1; cursor: pointer; color: var(--ink); }
.ep-fys button:hover { border-color: var(--ink); }
.ep-step { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.ep-step button { width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--ink); border-radius: 50%; background: #FBF8F1; cursor: pointer; font-size: 0.875rem; line-height: 1; }
.ep-slips { flex: none; display: flex; gap: 0.375rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.25rem 0.125rem 0.375rem; scrollbar-width: thin; }
.ep-slip { position: relative; flex: none; width: 5.25rem; scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1.75rem auto auto; gap: 0.125rem; padding: 0.375rem 0.4375rem 0.3125rem; text-align: left; background: #FBF8F1; border: 1px solid rgba(22, 19, 15, .18); border-top: 3px solid var(--e); border-radius: 0.3125rem; cursor: pointer; transition: transform .12s, box-shadow .12s; font: inherit; color: inherit; }
.ep-slip:hover, .ep-slip.on { transform: translateY(-3px); box-shadow: 0.1875rem 0.1875rem 0 rgba(22, 19, 15, .18); border-color: var(--ink); border-top-color: var(--e); }
.ep-sm { font-size: 0.625rem; font-weight: 600; letter-spacing: .04em; }
.ep-se { font-size: 0.625rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-sb { display: flex; align-items: flex-end; height: 1.75rem; }
.ep-sb > i { display: flex; flex-direction: column; width: 0.75rem; min-height: 2px; border-radius: 2px 2px 0 0; overflow: hidden; transform-origin: bottom; }
.ep-sb b { display: block; min-height: 1px; }
.ep-sb .ee { background: #7A5230; } .ep-sb .er { background: #D4A017; } .ep-sb .ps { background: repeating-linear-gradient(45deg, #16130F 0 1px, #F1ECE1 1px 3.5px); }
.ep-sa { font-weight: 400; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ep-slip small { font-size: 0.625rem; color: var(--ink-2); white-space: nowrap; }
.ep-slip u { position: absolute; top: 0.4375rem; right: 0.4375rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; }
.ep-slip u.ok { background: #1FA37A; } .ep-slip u.bad { background: #FF5B2E; }
.ep-slip.xf { --e: #1FA37A; background: rgba(31, 163, 122, .08); }
.ep-x { display: grid; place-items: center; height: 1.75rem; font-style: normal; font-size: 1.25rem; color: #1FA37A; }
body.privacy .ep-big, body.privacy .ep-alab b, body.privacy .ep-hs .amt, body.privacy .ep-sa, body.privacy .ep-read .amt, body.privacy .ep-slip small .amt { filter: blur(6px); }
@media (max-width: 900px) { .ep-hero { grid-template-columns: minmax(0, 1fr); } .ep-alab { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ep-chart { flex: none; height: 15rem; } .ep-nav { flex-wrap: wrap; } .ep-crow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Investments §09 · NPS: glass tubes, every screenshot, and what it could be at 60 ---------- */
.np-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.np-hero { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); }
.np-h1 { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.np-h1 em { font-style: normal; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.np-big { font: 400 clamp(2.25rem, min(3.8vw, 6.5vh), 3.375rem)/1.02 var(--sans); font-variant-numeric: tabular-nums; }
.np-h1 > span { font-size: 0.75rem; }
.np-sub { color: var(--ink-2); }
.np-lock { padding: 0.0625rem 0.5rem; border: 1.5px dashed var(--ink); border-radius: 1rem; font-size: 0.6875rem; letter-spacing: .04em; white-space: nowrap; }
.np-tubes { display: flex; gap: 1.25rem; align-items: flex-end; }
.np-tube { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.0625rem; width: 7.5rem; }
.np-glass { position: relative; width: 2.75rem; height: 4.75rem; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 1.5rem 1.5rem; background: linear-gradient(90deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .5)); overflow: hidden; margin-bottom: 0.375rem; box-shadow: 0 -2px 0 -0px var(--ink); }
.np-glass::before { content: ""; position: absolute; top: 0; left: -0.25rem; right: -0.25rem; height: 2px; background: var(--ink); }
.np-liq { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c); transform-origin: bottom; }
.np-wave { position: absolute; left: -50%; top: -0.375rem; width: 200%; height: 0.75rem; background: radial-gradient(circle at 0.375rem 0.75rem, var(--c) 0.4375rem, transparent 0.46875rem) 0 0 / 0.75rem 0.75rem repeat-x; animation: npWave 2.6s linear infinite; }
@keyframes npWave { to { transform: translateX(0.75rem); } }
.np-pct { position: absolute; left: 0; right: 0; top: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--ink); }
.np-tube > b { font-size: 0.8125rem; font-weight: 600; }
.np-tube small { font-size: 0.625rem; color: var(--ink-2); }
.np-tube small.up { color: #1FA37A; } .np-tube small.down { color: #FF5B2E; }
.np-tube .np-tv { font-weight: 400; font-size: 1rem; font-variant-numeric: tabular-nums; }
.np-snap { flex: 1; min-height: 5.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.np-hd { flex: none; display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.np-line { flex: 1; min-height: 0; position: relative; }
.np-line svg { position: absolute; inset: 0; display: block; overflow: visible; }
.np-gl { stroke: var(--rule); stroke-dasharray: 2 3; }
.np-ax { font: 0.625rem var(--mono); fill: var(--ink-2); }
.np-area { opacity: .12; }
.np-pl { fill: none; stroke-width: 2.2; }
.np-pt circle { fill: #FBF8F1; stroke: var(--c); stroke-width: 2.2; cursor: default; }
.np-pt circle.last { fill: var(--c); }
.np-pv { font: 600 0.6875rem var(--mono); fill: var(--ink); }
.np-cv { font: 600 0.6875rem var(--mono); }
.np-chip.up .np-cv { fill: #1FA37A; } .np-chip.dn .np-cv { fill: #FF5B2E; }
.np-cm { font: 0.625rem var(--mono); fill: var(--ink-2); }
.np-what { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem; padding: 0.625rem 1rem; background: #FBF8F1; border: 1.5px solid var(--ink); border-top: 4px solid #1FA37A; }
.np-wh { font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #1FA37A; margin-bottom: 0.5rem; }
.np-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.np-row > span:first-child { font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.np-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.np-chips button { font-size: 0.6875rem; padding: 0.1875rem 0.5625rem; border: 1.5px solid var(--rule); border-radius: 1rem; background: #fff; cursor: pointer; color: var(--ink); }
.np-chips button:hover { border-color: var(--ink); }
.np-chips button.on { background: #1FA37A; border-color: #1FA37A; color: #fff; }
.np-yr { display: flex; align-items: center; gap: 0.625rem; }
.np-yr input { flex: 1; accent-color: #1FA37A; }
.np-yr b { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.np-wo { min-width: 0; display: flex; flex-direction: column; gap: 0.3125rem; }
.np-at em { display: block; font-style: normal; font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.np-at b { display: block; font: 400 1.75rem/1.05 var(--sans); color: #1FA37A; font-variant-numeric: tabular-nums; }
.np-at small { font-size: 0.625rem; color: var(--ink-2); }
.np-spark { width: 100%; height: 1.5rem; display: block; }
.np-spark .g { fill: rgba(31, 163, 122, .3); } .np-spark .p { fill: rgba(22, 19, 15, .18); }
.np-split { display: flex; gap: 3px; height: 0.625rem; }
.np-split i { display: block; border-radius: 0.25rem; transform-origin: left; }
.np-split .l, .np-sk i.l { background: #1FA37A; } .np-split .a, .np-sk i.a { background: #0B6E75; }
.np-sk { display: grid; grid-template-columns: 60fr 40fr; gap: 0.5rem; }
.np-sk span { display: grid; grid-template-columns: auto 1fr; column-gap: 0.3125rem; align-items: baseline; }
.np-sk i { width: 0.5rem; height: 0.5rem; border-radius: 2px; }
.np-sk em { font-style: normal; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.np-sk b { grid-column: 1 / -1; font-weight: 400; font-size: 1.0625rem; }
.np-sk b small { font-size: 0.6875rem; color: var(--ink-2); }
.np-note { margin: 0; font-size: 0.625rem; line-height: 1.45; color: var(--ink-2); }
body.privacy .np-big, body.privacy .np-tv, body.privacy .np-pv, body.privacy .np-at b, body.privacy .np-sk b, body.privacy .np-h1 .amt { filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .np-wave { animation: none; } }
@media (max-width: 900px) { .np-hero { grid-template-columns: minmax(0, 1fr); } .np-tubes { justify-content: space-between; gap: 0.5rem; } .np-tube { width: auto; flex: 1; } .np-snap { flex: none; height: 12rem; } .np-what { grid-template-columns: minmax(0, 1fr); } .np-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

.cs-kbd { margin-left: 0.5rem; padding: 0.0625rem 0.375rem; border: 1px solid var(--rule); border-radius: 0.25rem; font-size: 0.625rem; color: var(--ink-2); background: #FBF8F1; }
@media (hover: none) { .cs-kbd { display: none; } }

/* ---------- Accounts §07 · Between us: a tug of war, month by month ---------- */
.btw-tug { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.tw-hd { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.tw-p { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; }
.tw-p.r { justify-content: flex-end; text-align: right; }
.tw-p > i { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c); color: #fff; font: 600 0.9375rem var(--sans); font-style: normal; box-shadow: 0.1875rem 0.1875rem 0 rgba(22, 19, 15, .2); }
.tw-p b { display: block; font-size: 0.9375rem; }
.tw-p small { font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; }
.tw-mid { font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.tw-svg { flex: 1; min-height: 0; position: relative; }
.tw-svg svg { position: absolute; inset: 0; display: block; overflow: visible; }
.tw-even { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: .4; }
.tw-hit { fill: transparent; }
.tw-row.on .tw-hit { fill: rgba(22, 19, 15, .05); }
.tw-a, .tw-b { opacity: .85; transition: opacity .15s; }
.tw-row.on .tw-a, .tw-row.on .tw-b { opacity: 1; stroke: var(--ink); stroke-width: 1.2; }
.tw-v { font: 0.6875rem var(--mono); fill: var(--ink-2); }
.tw-m { font: 600 0.625rem var(--mono); letter-spacing: .04em; fill: var(--ink); }
.tw-tick { stroke: var(--rule); stroke-width: 0.6; stroke-dasharray: 1 4; }
.tw-rope-s { fill: none; stroke: rgba(22, 19, 15, .18); stroke-width: 9; stroke-linecap: round; transform: translate(1.5px, 2px); }
.tw-rope { fill: none; stroke: #C9A36B; stroke-width: 6; stroke-linecap: round; }
.tw-braid { fill: none; stroke: #7A5230; stroke-width: 6; stroke-dasharray: 2 5; stroke-linecap: butt; opacity: .7; }
.tw-knot circle { fill: #FF5B2E; stroke: #16130F; stroke-width: 1.5; }
.tw-knot text { font: 700 0.6875rem var(--sans); fill: #fff; }
.tw-foot { font: 600 0.6875rem var(--mono); letter-spacing: .04em; fill: #C8431A; }
.tw-read { flex: none; font-size: 0.6875rem; color: var(--ink-2); line-height: 1.5; min-height: 2.1rem; border-top: 1px solid var(--rule); padding-top: 0.25rem; }
.tw-read b { color: var(--ink); font-weight: 600; }
body.privacy .tw-v, body.privacy .tw-read .amt, body.privacy .tw-p .amt { filter: blur(5px); }
@media (max-width: 900px) { .tw-svg { flex: none; height: 26rem; } .tw-mid { display: none; } .tw-hd { grid-template-columns: 1fr 1fr; } }

/* ---------- the upload windows: an inbox that takes the file in, reads it on a track and writes it into the ledger ---------- */
.modal { backdrop-filter: blur(5px) saturate(.9); -webkit-backdrop-filter: blur(5px) saturate(.9); background: rgba(22, 19, 15, .42); place-items: start center; padding: 7vh 1rem 4vh; }
.modal .modal-card { transform: translateY(1.5rem) scale(.97); opacity: 0; transition: transform .38s cubic-bezier(.2, 1.2, .3, 1), opacity .2s; }
.modal.open .modal-card { transform: none; opacity: 1; }
.modal:has(.modal-card.wide) { padding: 4vh 1rem; }
.modal-card:not(.wide) { width: min(64rem, 100%); padding: 0; overflow: hidden; border-radius: 1rem; box-shadow: 0.75rem 0.75rem 0 var(--ink); }
.modal-card:not(.wide) .modal-close { top: 1rem; right: 1rem; z-index: 3; border-radius: 50%; width: 2.25rem; height: 2.25rem; padding: 0; display: grid; place-items: center; background: #FBF8F1; }
.up-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: 30rem; }
.up-hero { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.25rem; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 91, 46, .16), transparent 60%), linear-gradient(160deg, #F6EFE2, #EDE4D3); border-right: 1.5px solid var(--ink); overflow: hidden; }
.up-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 1.6rem, rgba(22, 19, 15, .045) 1.6rem calc(1.6rem + 1px)); pointer-events: none; }
.up-hero h3 { font: 400 clamp(2.5rem, 4.6vw, 3.5rem)/0.95 var(--serif); letter-spacing: -.025em; margin: 0.5rem 0 0.625rem; }
.up-hero .up-deck { font-size: 0.875rem; line-height: 1.5; margin: 0; max-width: 34ch; }











 
.up-steps { padding: 1.75rem 1.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; counter-reset: upk; max-height: 86vh; overflow-y: auto; }
.up-who-k { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6562rem; letter-spacing: .12em; font-weight: 600; margin: 0.625rem 0 0.375rem; }
.up-who-k b { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--ink); color: #FBF8F1; font: 700 0.6875rem var(--sans); }
.up-who-k b::before { counter-increment: upk; content: counter(upk); }
.up-steps .up-who { display: block; margin: 0; }
.up-steps .up-who[hidden] { display: none; }
.up-steps .inv-types { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); margin: 0 0 0.25rem; }
.up-steps .inv-type { border-radius: 0.625rem; transition: transform .15s, box-shadow .15s, background .15s; }
.up-steps .inv-type:hover { transform: translateY(-2px); box-shadow: 0.1875rem 0.1875rem 0 var(--ink); }
.up-steps .inv-type.on { background: var(--ink); color: var(--paper); box-shadow: 0.1875rem 0.1875rem 0 var(--tomato); }
.up-who-hint { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--ink-2); }
/* whose: faces */
.person-switch.up-faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr)); gap: 0.625rem; border: 0; background: none; }
.up-steps .person-switch:not(.up-faces) { display: flex; flex-wrap: wrap; gap: 0.375rem; border: 0; background: none; }
.up-steps .person-switch:not(.up-faces) .seg { border: 1.5px solid rgba(22, 19, 15, .3); border-radius: 2rem; padding: 0.4375rem 0.875rem; background: #FBF8F1; transition: transform .15s, border-color .15s; }
.up-steps .person-switch:not(.up-faces) .seg:hover { transform: translateY(-1px); border-color: var(--ink); }
.up-steps .person-switch:not(.up-faces) .seg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.up-face { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.625rem; align-items: center; text-align: left; min-width: 0; padding: 0.5rem 0.875rem 0.5rem 0.5rem !important; border: 1.5px solid rgba(22, 19, 15, .3) !important; border-radius: 3rem; background: #FBF8F1 !important; color: var(--ink) !important; font: inherit !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s, border-color .18s; }
.up-face:hover { transform: translateY(-2px); border-color: var(--ink) !important; }
.up-face.on { border-color: var(--c, var(--ink)) !important; box-shadow: 0 0 0 2px var(--c, var(--ink)), 0.25rem 0.25rem 0 rgba(22, 19, 15, .18); transform: translateY(-2px); }
.up-face.auto.on { --c: var(--tomato); }
.uf-pic { grid-row: span 2; position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.uf-pic > img, .uf-pic > b { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--c); display: grid; place-items: center; background: var(--c); color: #fff; font: 600 1rem var(--sans); }




@keyframes ufSpark { 0%, 100% { transform: scale(.8) rotate(0); } 50% { transform: scale(1.2) rotate(90deg); } }
.uf-tick { position: absolute; right: -0.25rem; bottom: -0.25rem; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--c, var(--tomato)); color: #fff; font: 700 0.625rem var(--sans); font-style: normal; transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 2px #FBF8F1; }
.up-face.on .uf-tick { transform: scale(1); }
.up-face.auto .uf-tick { right: auto; left: -0.25rem; }
.uf-name { font-size: 0.9375rem; font-weight: 600; }
.up-face small { font-size: 0.625rem; line-height: 1.25; color: var(--ink-2); letter-spacing: .02em; }
/* the drop zone */
.up-steps .up-drop { position: relative; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.125rem; justify-items: start; text-align: left; padding: 1.25rem 1.5rem; border: 2px dashed var(--ink); border-radius: 1rem; background: #FBF8F1; transition: transform .2s cubic-bezier(.2, 1.2, .4, 1), border-color .2s, background .2s, box-shadow .2s; }
.up-steps .up-drop:hover { border-color: var(--tomato); background: #FFF6EE; }
.up-steps .up-drop.over { transform: scale(1.02); border-style: solid; border-color: var(--tomato); background: #FFEDE3; box-shadow: 0 0 0 0.375rem rgba(255, 91, 46, .15); }
.up-drop-ico { grid-row: span 2; width: 3.5rem; height: 3.5rem; }
.up-drop-ico svg { width: 100%; height: 100%; overflow: visible; }
.ud-doc { fill: #fff; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ud-fold { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ud-arrow path { fill: none; stroke: var(--tomato); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ud-arrow { animation: udBob 1.6s ease-in-out infinite; }
.up-drop.over .ud-arrow { animation-duration: .6s; }
@keyframes udBob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(3px); } }
.up-steps .up-drop-big { font: italic 400 1.875rem/1.1 var(--serif); }
.up-steps .up-drop .mono { font-size: 0.6562rem; line-height: 1.5; }
/* files on their way in */
.up-results { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; }
.up-results > li.up-card, .up-results > li { border: 1.5px solid rgba(22, 19, 15, .25); border-radius: 0.75rem; padding: 0.625rem 0.75rem; background: #FBF8F1; animation: ucIn .35s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ucIn { from { transform: translateY(0.5rem); opacity: 0; } }
.up-card.ok { border-color: #1FA37A; } .up-card.warn { border-color: #E0A100; } .up-card.err { border-color: var(--tomato); }
.uc-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; }
.uc-ico { position: relative; width: 2rem; height: 2.5rem; border: 2px solid var(--ink); border-radius: 0.25rem 0.625rem 0.25rem 0.25rem; background: #fff; display: grid; place-items: end center; padding-bottom: 0.1875rem; }
.uc-ico i { font: 700 0.5rem var(--mono); font-style: normal; color: #fff; background: var(--tomato); padding: 0 0.1875rem; border-radius: 0.125rem; }
.uc-ico.k-xls i { background: #1FA37A; } .uc-ico.k-img i { background: #2E4BFF; }
.up-card.busy .uc-ico { animation: ucBob 1s ease-in-out infinite; }
@keyframes ucBob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.uc-name { min-width: 0; display: flex; flex-direction: column; }
.uc-name b { font: 500 0.8125rem var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-name small { font-size: 0.625rem; color: var(--ink-2); }
.uc-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.5rem; }
.uc-track span { display: flex; flex-direction: column; gap: 0.1875rem; }
.uc-track i { position: relative; display: block; height: 0.3125rem; border-radius: 1rem; background: #E4DDD0; overflow: hidden; }
.uc-track span.done i { background: #1FA37A; }
.uc-track span.now i::after { content: ""; position: absolute; inset: 0; width: 45%; border-radius: 1rem; background: var(--tomato); animation: ucRun 1s ease-in-out infinite; }
@keyframes ucRun { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
.uc-track span.stop i { background: var(--tomato); }
.up-card.warn .uc-track span.stop i { background: #E0A100; }
.uc-track em { font-style: normal; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.uc-track span.done em { color: #0E7A58; } .uc-track span.now em { color: var(--ink); font-weight: 600; }
.up-card .up-pass { margin-top: 0.5rem; }
.up-card .up-pass input { border-radius: 0.5rem; }
/* saving: the ledger writes itself, then a tick and coins */
.modal-card { position: relative; }
.up-saving { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(241, 236, 225, .88); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; border-radius: inherit; }
.up-saving.on { opacity: 1; }
.us-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.us-book { width: 11rem; height: auto; overflow: visible; }


.us-ok { position: absolute; top: 0.75rem; width: 5rem; height: 5rem; opacity: 0; }
.us-ok circle { fill: #1FA37A; stroke: #0E7A58; stroke-width: 2; transform-origin: center; transform-box: fill-box; }
.us-ok path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.up-saving.ok .us-book { opacity: 0; transition: opacity .2s; }
.up-saving.ok .us-ok { opacity: 1; }
.up-saving.ok .us-ok circle { animation: usPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.up-saving.ok .us-ok path { animation: usTick .45s .2s ease-out forwards; }
@keyframes usPop { from { transform: scale(0); } }
@keyframes usTick { to { stroke-dashoffset: 0; } }
.us-t { font: 400 1.625rem var(--serif); margin-top: 0.25rem; }
.us-s { font-size: 0.6875rem; color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; }
.us-coin { position: absolute; top: 2.5rem; left: 50%; width: 1.375rem; height: 1.375rem; margin-left: -0.6875rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFE08A, #D4A017 60%, #A57C0C); color: #6B4E00; font: 700 0.6875rem var(--sans); font-style: normal; animation: usCoin .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes usCoin { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1) rotate(200deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ud-arrow { animation: none; } }
@media (max-width: 760px) { .up-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; } .up-hero { border-right: 0; border-bottom: 1.5px solid var(--ink); padding: 1.25rem 1.25rem 0.75rem; }  .up-steps { padding: 1rem 1.25rem; max-height: none; } .up-face { min-width: 0; flex: 1 1 8rem; } .modal-card:not(.wide) { border-radius: 0.75rem; } }

/* ---------- the diary, revamped: a planner page — the date torn off a calendar, each payday a face in a ring, the next five
   weeks as a wall calendar with a strip that reads the day you point at, and what's coming as tickets ---------- */
.diary.v2 { width: min(46rem, calc(100vw - 2 * var(--pad))); padding: 0 1.25rem 1.125rem; border: 1.5px solid var(--ink); border-radius: 1rem; box-shadow: 0.625rem 0.625rem 0 var(--ink); background: radial-gradient(90% 60% at 100% 0%, rgba(255, 91, 46, .1), transparent 60%), #FBF8F1; transform: translate(1.5rem, -0.5rem) scale(.98); transform-origin: top right; transition: opacity .2s, transform .35s cubic-bezier(.2, 1.2, .3, 1); }
.diary.v2.open { transform: none; }
.diary.v2::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 0.3125rem; background: repeating-linear-gradient(90deg, var(--ink) 0 0.375rem, transparent 0.375rem 1.25rem); border-radius: 0 0 0.25rem 0.25rem; opacity: .85; }








.diary.v2 .dy-x { width: 2rem; height: 2rem; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: #fff; transition: transform .2s; }
.diary.v2 .dy-x:hover { transform: rotate(90deg); background: var(--ink); color: var(--paper); }


/* paydays */

.diary.v2 .dy-pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 0.75rem 0.875rem; border: 1.5px solid rgba(22, 19, 15, .2); border-radius: 0.875rem; background: #fff; }
.diary.v2 .dy-pay + .dy-pay { padding-left: 0.875rem; border-left: 1.5px solid rgba(22, 19, 15, .2); }
.dy-ring { position: relative; width: 4.5rem; height: 4.5rem; }
.dy-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-t { fill: none; stroke: #EDE5D6; stroke-width: 5; }
.dr-f { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1); }
.dr-face { position: absolute; inset: 0.5625rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); }
.dr-face img { width: 100%; height: 100%; object-fit: cover; }
.dr-face b { color: #fff; font: 600 1.25rem var(--sans); }
.dy-ring em { position: absolute; right: -0.375rem; bottom: -0.125rem; font-style: normal; font-size: 0.5938rem; font-weight: 600; padding: 0.0625rem 0.3125rem; border-radius: 1rem; background: var(--ink); color: #FBF8F1; }
.dy-pay-r { min-width: 0; }
.diary.v2 .dy-pay-who b { font-size: 1rem; }
.diary.v2 .dy-pay-cd { font-size: 1.5rem; margin: 0.25rem 0; }
.diary.v2 .dy-pay-cd .fl { --fl-top: #2A2520; --fl-bot: #1E1A16; position: relative; display: inline-block; min-width: 0.62em; text-align: center; padding: 0 0.05em; margin: 0 1px; border-radius: 0.15em; background: linear-gradient(to bottom, #2A2520 0 49%, #0E0C0A 49% 51%, #1E1A16 51% 100%); color: #F6EFE2; }
.diary.v2 .dy-pay-cd small { margin-right: 0.25rem; }
/* the calendar */


.dc-read { position: sticky; top: 5rem; z-index: 2; box-shadow: 0 0.375rem 0.75rem -0.5rem rgba(22, 19, 15, .25); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.25rem; padding: 0.375rem 0.75rem; margin-bottom: 0.5rem; border-radius: 0.625rem; background: #F1ECE1; font-size: 0.75rem; color: var(--ink-2); }
.dc-read b { font-size: 0.6875rem; letter-spacing: .06em; color: var(--ink); text-transform: uppercase; }
.dc-read span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.dc-read span i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--k); }
.diary.v2 .dc-grid { gap: 0.3125rem; }
.diary.v2 .dc { min-height: 2.875rem; border-radius: 0.5rem; border: 1px solid rgba(22, 19, 15, .12); background: #fff; transition: transform .15s, box-shadow .15s; animation: dcIn .35s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 12ms); }
@keyframes dcIn { from { transform: scale(.7); opacity: 0; } }
.diary.v2 .dc.past { background: transparent; opacity: .5; }
.diary.v2 .dc.has { cursor: pointer; }
.diary.v2 .dc:hover, .diary.v2 .dc.on { transform: translateY(-2px); box-shadow: 0.1875rem 0.1875rem 0 var(--ink); border-color: var(--ink); z-index: 1; }
.diary.v2 .dc.today { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.diary.v2 .dc.today .dc-n { color: #fff; font-weight: 700; }
.diary.v2 .dc.today .dc-p i { box-shadow: 0 0 0 1.5px #fff; }
.diary.v2 .dc.first { border-left: 3px solid var(--ink); }
.diary.v2 .dc-p i { width: 0.625rem; height: 0.625rem; }
/* tickets */



.dy-glyph { position: relative; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--k) 14%, #fff); color: var(--k); font: 600 1rem var(--sans); }
.dy-who { position: absolute; right: -0.3125rem; bottom: -0.3125rem; width: 1.0625rem; height: 1.0625rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--c); display: grid; place-items: center; background: var(--c); font-style: normal; }
.dy-who img { width: 100%; height: 100%; object-fit: cover; }
.dy-who b { color: #fff; font: 600 0.5rem var(--sans); }
.diary.v2 .dy-go { border-radius: 1rem; padding: 0.3125rem 0.625rem; }

@media (prefers-reduced-motion: reduce) { .diary.v2 .dc { animation: none; } }
@media (max-width: 720px) { .diary.v2 { border-radius: 0.75rem; padding: 0 0.75rem 0.875rem; }      }

/* ---------- notes: the bottom-centre toast, stacking ---------- */
.toast { display: none !important; }
.notes { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 130; width: min(34rem, calc(100vw - 1.5rem)); pointer-events: none; }
.notes-stack { position: relative; display: grid; align-items: end; }
/* the bottom-centre toast as it always was — ink, paper type, a tomato shadow — now stacking: the newest in front, the
   older ones peeking out above it; point at the stack and it fans out upward so every one can be read or closed */
.notes .note { grid-area: 1 / 1; justify-self: center; align-self: end; pointer-events: auto; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; width: max-content; max-width: 100%;
  margin: 0; border: 0; padding: 0.75rem 0.75rem 0.8125rem 1rem; background: var(--ink); color: var(--paper); font-size: 0.75rem; box-shadow: 0.3125rem 0.3125rem 0 var(--tomato); cursor: grab; touch-action: pan-y;
  transform-origin: bottom center; transition: transform .35s cubic-bezier(.2, 1.1, .3, 1), opacity .3s, filter .3s;
  transform: translateY(var(--peek, 0px)) scale(calc(1 - var(--k, 0) * 0.04)); z-index: calc(10 - var(--k, 0));
  animation: ntIn .3s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes ntIn { from { opacity: 0; translate: 0 1.25rem; } }
.note.tucked { background: #3A332B; box-shadow: 0 -1px 0 rgba(241, 236, 225, .12) inset; }
.note.tucked::before { opacity: 0; }
.note.tucked .nt-body, .note.tucked .nt-stamp, .note.tucked .nt-x { opacity: 0; }
.notes.open .notes-stack { pointer-events: auto; }
.notes.open .note { transform: translateY(var(--fan, 0px)); filter: none; }
.note::before { content: ""; position: absolute; left: 0; bottom: 0; height: 0.1875rem; width: 100%; background: var(--nt, var(--paper)); transform-origin: left; opacity: .9; }
.note.run::before { animation: ntLife var(--life, 6000ms) linear forwards; }
.note.hold::before { animation-play-state: paused; }
@keyframes ntLife { to { transform: scaleX(0); } }
.note.t-ok { --nt: #3DD39B; } .note.t-err { --nt: #FF7A52; } .note.t-warn { --nt: #F5B700; } .note.t-money { --nt: #5AB0FF; } .note.t-info { --nt: #F1ECE1; }
.nt-stamp { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--nt); color: var(--nt); font: 700 0.75rem var(--sans); transition: opacity .3s; }
.nt-spin { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--nt); border-right-color: transparent; animation: ntSpin .8s linear infinite; }
@keyframes ntSpin { to { transform: rotate(360deg); } }
.nt-body { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; transition: opacity .3s; }
.nt-body b { font-weight: 500; font-size: 0.8125rem; line-height: 1.35; }
.nt-body span { font-size: 0.6875rem; line-height: 1.5; color: rgba(241, 236, 225, .72); }
.nt-body small { font-size: 0.5625rem; letter-spacing: .08em; color: rgba(241, 236, 225, .5); text-transform: uppercase; }
.nt-x { flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid rgba(241, 236, 225, .3); border-radius: 50%; background: transparent; cursor: pointer; font-size: 0.625rem; color: var(--paper); transition: transform .2s, background .2s, opacity .3s; }
.nt-x:hover { background: var(--tomato); border-color: var(--tomato); transform: rotate(90deg); }
.note.swap .nt-body { animation: ntSwap .35s ease both; }
@keyframes ntSwap { from { opacity: 0; transform: translateY(0.375rem); } }
.note.out { opacity: 0; translate: 0 1rem; }
.note.tear { animation: ntTear .42s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes ntTear { to { transform: translate(120%, 0) rotate(8deg); opacity: 0; } }
/* the diary keeps them */



   


@media (prefers-reduced-motion: reduce) { .note, .note.tear { animation: none; } .nt-spin { animation-duration: 2s; } }
@media (max-width: 720px) { .notes { bottom: 1rem; width: calc(100vw - 1.5rem); } .notes .note { width: 100%; } }

/* ---------- the upload windows: what's on file for the kind being added ---------- */
.up-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.4375rem; margin-top: 1rem; }
.up-info:empty { display: none; }


.up-info.many .ui-card { padding: 0.375rem 0.5rem; gap: 0.5rem; }
.up-info.many .ui-main > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-info.many .ui-when b { font-size: 1.0625rem; }
.up-info.many .ui-face { width: 1.75rem; height: 1.75rem; }
.ui-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding-bottom: 0.25rem; border-bottom: 1.5px solid var(--ink); }
.ui-h small { font-weight: 400; color: var(--ink-2); letter-spacing: .04em; }
.ui-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.75rem; background: rgba(255, 253, 248, .92); border: 1.5px solid rgba(22, 19, 15, .14); box-shadow: 0.1875rem 0.1875rem 0 rgba(22, 19, 15, .08); animation: uiIn .45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes uiIn { from { transform: translateX(-0.75rem); opacity: 0; } }
.ui-card.due { border-color: rgba(184, 51, 15, .5); background: #FFF1EA; }
.ui-face { width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 2px #FFFDF8, 0 0 0 3.5px var(--c); }
.ui-face img { width: 100%; height: 100%; object-fit: cover; }
.ui-face b { color: #fff; font: 600 0.8125rem var(--sans); }
.ui-main { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.ui-main > b { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-main > small { font-size: 0.6875rem; line-height: 1.35; color: var(--ink-2); }
.ui-main > small b { color: var(--ink); font-weight: 600; }
.ui-chip { align-self: flex-start; margin-top: 0.125rem; font-style: normal; font-size: 0.5938rem; letter-spacing: .04em; text-transform: uppercase; padding: 0.0625rem 0.4375rem; border-radius: 1rem; background: rgba(31, 163, 122, .14); color: #0E7A58; font-family: var(--mono); }
.ui-chip.due { background: rgba(184, 51, 15, .12); color: #B8330F; font-weight: 600; }
.ui-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.1; }
.ui-when em { font-style: normal; font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ui-when b { font: 400 1.25rem/1.1 var(--serif); color: var(--c); }
.ui-when small { font-size: 0.5625rem; color: var(--ink-2); white-space: nowrap; }
.ui-fact { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.25rem 0 0; padding: 0.5rem 0.625rem; border-radius: 0.625rem; border: 1.5px dashed rgba(22, 19, 15, .25); font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); background: rgba(255, 253, 248, .6); }
.ui-fact i { font-style: normal; color: var(--tomato); animation: ufSpark 2.4s ease-in-out infinite; }
.ui-fact b { color: var(--ink); font-weight: 600; }
body.privacy .ui-main .amt, body.privacy .ui-fact .amt { filter: blur(5px); }
@media (max-width: 760px) { .up-info { margin-top: 0.75rem; } }

/* ---------- the diary, v3: a runway under the nav — the next five weeks on one line, every expected thing a pin, paydays
   as coins on the line, what's behind in a column of its own, each pay cycle as a bar filling towards payday ---------- */



























/* the runway */



/* further out, notes, footer */












/* ---------- the diary, v4: five weeks on a clock face — today at twelve, a ring for each kind of thing, paydays as gold
   coins with a face, the centre reading out whatever you point at; beside it the list, soonest first ---------- */
.diary.v4 { inset: 0 !important; top: 0 !important; left: 0; right: 0; width: auto !important; max-height: none !important; height: 100svh; padding: 1rem; border: 0; border-radius: 0; box-shadow: none; background: rgba(22, 19, 15, .45); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); display: grid; place-items: center; overflow-y: auto; transform: none; clip-path: none; opacity: 0; transition: opacity .25s; z-index: 95; }
.diary.v4.open { opacity: 1; }


/* the dial */





/* the list */







.diary.v4 .dy-x { width: 2.125rem; height: 2.125rem; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: #fff; transition: transform .2s, background .2s; }
.diary.v4 .dy-x:hover { transform: rotate(90deg); background: var(--ink); color: #FBF8F1; }








@media (max-width: 900px) { .diary.v4 { place-items: start center; padding: 0.5rem; }    }

/* ---------- open on your phone: a phone drawn with the code on its screen, Wi-Fi waves from this PC, a switch ---------- */
.modal-card.ph2 { width: min(58rem, 100%); padding: 0; overflow: hidden; border-radius: 1.25rem; }
.ph2-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: 30rem; }
.ph2-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1.25rem; background: radial-gradient(90% 70% at 50% 40%, #FFF6E6, #EDE4D3); border-right: 1.5px solid var(--ink); overflow: hidden; }
.ph2-stage::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 55%, transparent 0 2.25rem, rgba(22, 19, 15, .045) 2.25rem calc(2.25rem + 1px)); pointer-events: none; }
.ph2-net { position: relative; display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ph2-net svg { width: 1rem; height: 1rem; vertical-align: -0.1875rem; }
.ph2-pc, .ph2-ssid { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.25rem 0.625rem; border-radius: 1rem; background: #FFFDF8; border: 1.5px solid rgba(22, 19, 15, .2); }
.ph2-grid.is-on .ph2-ssid { border-color: #1FA37A; color: #0E7A58; }
.ph2-air { display: inline-flex; gap: 0.25rem; width: 2.5rem; justify-content: center; }
.ph2-air i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #1FA37A; animation: phAir 1.2s ease-in-out infinite; }
.ph2-air i:nth-child(2) { animation-delay: .2s; } .ph2-air i:nth-child(3) { animation-delay: .4s; }
@keyframes phAir { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.ph2-phone { position: relative; width: 13.5rem; aspect-ratio: 9 / 18.5; border-radius: 2.25rem; background: #16130F; padding: 0.625rem; box-shadow: 0 1.5rem 2.5rem -1rem rgba(22, 19, 15, .5), inset 0 0 0 2px #4A443B; transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.ph2-grid.is-on .ph2-phone { transform: rotate(0); animation: phFloat 5s ease-in-out infinite; }
@keyframes phFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.375rem); } }
.ph2-notch { position: absolute; top: 0.9375rem; left: 50%; transform: translateX(-50%); width: 4.5rem; height: 1.125rem; border-radius: 1rem; background: #16130F; z-index: 2; }
.ph2-home { position: absolute; bottom: 0.9375rem; left: 50%; transform: translateX(-50%); width: 4.5rem; height: 0.25rem; border-radius: 1rem; background: rgba(255, 255, 255, .5); z-index: 2; }
.ph2-screen { position: relative; height: 100%; border-radius: 1.75rem; overflow: hidden; background: linear-gradient(170deg, #FFFDF8, #F1ECE1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; padding: 2.25rem 1rem 1.75rem; }
.ph2-bar { position: absolute; top: 0.625rem; left: 1.25rem; right: 1.25rem; display: flex; justify-content: space-between; font-size: 0.625rem; font-weight: 600; }
.ph2-bar svg { width: 0.875rem; height: 0.875rem; }
.ph2-qr { position: relative; width: 100%; padding: 0.5rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); overflow: hidden; }
.ph2-qr svg { display: block; width: 100%; height: auto; }
.ph2-scan { position: absolute; left: 0; right: 0; top: 0; height: 2.5rem; background: linear-gradient(180deg, transparent, rgba(255, 91, 46, .35) 80%, #FF5B2E 100%); animation: phScan 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes phScan { 0% { transform: translateY(-2.5rem); } 100% { transform: translateY(12rem); } }
.ph2-cap { font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ph2-lock { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; color: var(--ink-2); }
.ph2-lock svg { width: 3rem; height: 3rem; color: var(--ink); animation: phLock 2.6s ease-in-out infinite; }
@keyframes phLock { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-8deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }
.ph2-lock b { font: 400 1.25rem var(--serif); color: var(--ink); }
.ph2-lock small { font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; }
.ph2-side { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.75rem 1.25rem; }
.ph2-side h3 { font: 400 clamp(2.25rem, 4vw, 3rem)/0.95 var(--serif); letter-spacing: -.02em; margin: 0.25rem 0 0; }
.ph2-side h3 em { color: var(--tomato); font-style: normal; }
.ph2-state { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: #FFFDF8; border: 1.5px solid rgba(22, 19, 15, .15); }
.ph2-grid.is-on .ph2-state { border-color: rgba(31, 163, 122, .5); background: rgba(31, 163, 122, .07); }
.ph2-state b { display: block; font-size: 0.9375rem; }
.ph2-state small { font-size: 0.625rem; letter-spacing: .04em; color: var(--ink-2); }
.ph2-switch { position: relative; flex: none; width: 3.25rem; height: 1.875rem; border-radius: 1rem; border: 1.5px solid var(--ink); background: #E4DDD0; cursor: pointer; transition: background .25s; padding: 0; }
.ph2-switch i { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(22, 19, 15, .35); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.ph2-switch.on { background: #1FA37A; }
.ph2-switch.on i { transform: translateX(1.375rem); }
.ph2-switch:disabled { opacity: .6; cursor: default; }
.ph2-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: ph; }
.ph2-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; font-size: 0.875rem; line-height: 1.4; animation: phIn .4s cubic-bezier(.2, 1.2, .4, 1) both; }
.ph2-steps li:nth-child(2) { animation-delay: .08s; } .ph2-steps li:nth-child(3) { animation-delay: .16s; }
@keyframes phIn { from { transform: translateX(0.75rem); opacity: 0; } }
.ph2-steps i { position: relative; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--ink); color: #FBF8F1; }
.ph2-steps i svg { width: 1.125rem; height: 1.125rem; }
.ph2-steps li::before { counter-increment: ph; content: counter(ph); position: absolute; }
.ph2-steps li::before { display: none; }
.ph2-manual { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 1rem; align-items: end; padding: 0.75rem 0.875rem; border-radius: 0.875rem; border: 1.5px dashed rgba(22, 19, 15, .25); }
.ph2-manual small { display: block; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.25rem; }
.ph2-manual .ph-url { margin: 0; font-size: 0.875rem; text-align: left; }
.ph2-manual .ph-url em { font-style: normal; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tomato); margin-left: 0.25rem; }
.ph2-pin { display: flex; gap: 0.1875rem; }
.ph2-pin i { display: grid; place-items: center; width: 1.625rem; height: 2.125rem; border-radius: 0.375rem; background: linear-gradient(to bottom, #2A2520 0 49%, #0E0C0A 49% 51%, #1E1A16 51% 100%); color: #FFE08A; font-style: normal; font-size: 1.125rem; }
.ph2-acts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: start; margin-top: auto; }
.ph2-acts .btn { border-radius: 1rem; white-space: nowrap; }
.ph2-acts .ph-small { margin: 0; border: 0; padding: 0; font-size: 0.6875rem; }
.ph2-deck { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.ph2-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ph2-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: center; font-size: 0.8125rem; color: var(--ink-2); }
.ph2-facts i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-style: normal; font-size: 0.75rem; font-weight: 700; }
.ph2-facts i svg { width: 0.875rem; height: 0.875rem; }
body.privacy .ph2-pin i { filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .ph2-air i, .ph2-phone, .ph2-scan, .ph2-lock svg, .ph2-steps li { animation: none; } }
@media (max-width: 760px) { .ph2-grid { grid-template-columns: minmax(0, 1fr); } .ph2-stage { border-right: 0; border-bottom: 1.5px solid var(--ink); } .ph2-phone { width: 11rem; } .ph2-manual { grid-template-columns: minmax(0, 1fr); } .ph2-acts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the upload windows keep one height: the two halves scroll inside it instead of the window growing ---------- */
.modal-card:not(.wide):not(.ph2) { height: min(40rem, calc(100svh - 11vh)); display: flex; flex-direction: column; }
.modal-card:not(.wide):not(.ph2) > .up-step:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal-card:not(.wide):not(.ph2) .up-grid { flex: 1; min-height: 0; }
.modal-card:not(.wide):not(.ph2) .up-hero, .modal-card:not(.wide):not(.ph2) .up-steps { min-height: 0; max-height: none; overflow-y: auto; scrollbar-width: thin; }

.uf-auto { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: #FFF1EA; color: var(--tomato); font: 400 1.25rem var(--sans); box-shadow: 0 0 0 2px var(--tomato); }
.ui-face b { color: #fff; font: 600 0.5rem var(--sans); }
.ui-face b { font-size: 0.8125rem; }
@media (max-width: 760px) { .modal-card:not(.wide):not(.ph2) { height: calc(100svh - 2rem); } .modal-card:not(.wide):not(.ph2) .up-grid { overflow-y: auto; display: block; } .modal-card:not(.wide):not(.ph2) .up-hero, .modal-card:not(.wide):not(.ph2) .up-steps { overflow: visible; } }

/* ---------- the diary, v5: a departures board — every payday and upload a departure, split-flap letters, status lamps ---------- */




.bd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; align-items: center; padding-bottom: 0.875rem; border-bottom: 3px double var(--ink); }


.bd-f { position: relative; display: inline-grid; place-items: center; width: 0.9375rem; height: 1.3125rem; margin-right: 1.5px; border-radius: 0.1875rem; background: linear-gradient(to bottom, #2A2520 0 49%, #0E0C0A 49% 51%, #1E1A16 51% 100%); color: #F6EFE2; font: 600 0.8125rem/1 var(--mono); font-style: normal; text-transform: uppercase; box-shadow: 0 1px 0 rgba(22, 19, 15, .3); }
.bd-f.b { background: rgba(22, 19, 15, .07); box-shadow: none; }
.bd-f.flip { animation: bdFlip .11s ease-in; }
@keyframes bdFlip { from { transform: perspective(80px) rotateX(-70deg); filter: brightness(.6); } }
































@media (prefers-reduced-motion: reduce) { .bd-f.flip { animation: none !important; } }
@media (max-width: 760px) {   .bd-head { grid-template-columns: minmax(0, 1fr) auto; }         .bd-f { width: 0.8125rem; height: 1.125rem; font-size: 0.6875rem; }   }

/* ---------- the diary, v6: the post — kraft pay packets with wax seals, envelopes with stamps and postmarks ---------- */
.diary.v6 { inset: 0 !important; top: 0 !important; width: auto !important; max-height: none !important; height: 100svh; padding: 1rem; border: 0; border-radius: 0; box-shadow: none; background: rgba(22, 19, 15, .45); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); display: grid; place-items: center; overflow: hidden; transform: none; clip-path: none; opacity: 0; transition: opacity .25s; z-index: 95; }
.diary.v6.open { opacity: 1; }
.ev-card { width: min(66rem, 100%); height: min(46rem, calc(100svh - 2rem)); display: flex; flex-direction: column; border-radius: 1.25rem; overflow: hidden; background: #F7F2E8; border: 1.5px solid var(--ink); box-shadow: 0.75rem 0.75rem 0 var(--ink); transform: translateY(1.5rem) scale(.97); transition: transform .45s cubic-bezier(.2, 1.2, .3, 1); background-image: repeating-linear-gradient(0deg, transparent 0 1.75rem, rgba(22, 19, 15, .035) 1.75rem calc(1.75rem + 1px)); }
.diary.v6.open .ev-card { transform: none; }
.ev-head { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.125rem 1.5rem 0.875rem; border-bottom: 2px solid var(--ink); background: #F7F2E8; }
.ev-date { display: flex; align-items: center; gap: 0.4375rem; }
.ev-date b { font: 400 2.75rem/0.85 var(--serif); color: var(--tomato); }
.ev-date span { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; color: var(--ink-2); }
.ev-ttl b { display: block; font: 400 2rem/1 var(--serif); }
.ev-ttl small { font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ev-good { color: #0E7A58; font-weight: 600; } .ev-bad { color: #B8330F; font-weight: 600; }
.diary.v6 .dy-x { width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: #fff; transition: transform .2s, background .2s; }
.diary.v6 .dy-x:hover { transform: rotate(90deg); background: var(--ink); color: #FBF8F1; }
.ev-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.5rem 1.25rem; scrollbar-width: thin; }
/* pay packets */

.pp { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.75rem 1.25rem 1rem 1.25rem; border-radius: 0.5rem; background: linear-gradient(160deg, #D9BC8C, #C9A46F); color: #3B2A12; box-shadow: 0 0.625rem 1.25rem -0.625rem rgba(22, 19, 15, .5), inset 0 0 0 1px rgba(59, 42, 18, .25); overflow: hidden; animation: evIn .5s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 80ms); }
.pp::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.5px) 0 0 / 6px 6px; pointer-events: none; }


.pp > small { margin-top: 1.75rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: #5C4320; font-weight: 600; }



.pp > span { font-size: 0.6875rem; color: #5C4320; }


.pp .dy-go { align-self: flex-start; border-radius: 1rem; background: #3B2A12; color: #FFE7B0; border-color: #3B2A12; }
/* envelopes */
.ev-h { display: flex; align-items: baseline; gap: 0.75rem; margin: 1rem 0 0.5rem; font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ev-h::after { content: ""; flex: 1; border-bottom: 1.5px dashed rgba(22, 19, 15, .25); }
.ev-h small { order: 2; font-weight: 400; color: var(--ink-2); letter-spacing: .04em; }
.ev-h.late { color: #B8330F; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1.25rem 1rem; padding-top: 0.5rem; }
.ev { position: relative; height: 9rem; animation: evIn .5s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(0.15s + var(--i) * 45ms); }
@keyframes evIn { from { transform: translateY(1rem) rotate(calc(var(--r, 0) * 1deg)); opacity: 0; } }
.ev-body { position: absolute; inset: 0; z-index: 2; padding: 0.875rem 0.875rem 0.625rem; border-radius: 0.375rem; background: #FFFDF8; border: 1px solid rgba(22, 19, 15, .18); box-shadow: 0 0.375rem 0.875rem -0.375rem rgba(22, 19, 15, .35); background-image: linear-gradient(135deg, transparent 49.6%, rgba(22, 19, 15, .06) 50%, transparent 50.4%), linear-gradient(45deg, transparent 49.6%, rgba(22, 19, 15, .06) 50%, transparent 50.4%); transform: rotate(calc(var(--r, 0) * 0.35deg)); transition: transform .3s cubic-bezier(.2, 1.2, .4, 1), box-shadow .3s; }
.ev:hover .ev-body { transform: translateY(2.25rem) rotate(0); box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(22, 19, 15, .45); }
.ev-flap { position: absolute; left: -1px; right: -1px; top: -1px; height: 3.5rem; background: #F4EEE2; border: 1px solid rgba(22, 19, 15, .18); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .4s cubic-bezier(.3, .8, .3, 1), background .3s; z-index: 1; }
.ev:hover .ev-flap { transform: perspective(400px) rotateX(180deg); background: linear-gradient(0deg, #D6C7AA, #EDE3D0); }
.ev-stamp { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 2.75rem; height: 3.125rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.0625rem; background: var(--k); color: #fff; border: 3px dotted #FFFDF8; outline: 1px solid rgba(22, 19, 15, .15); box-shadow: inset 0 0 0 2px var(--k), inset 0 0 0 3px rgba(255, 255, 255, .7); transform: rotate(3deg); }
.ev-stamp b { font: 700 1rem var(--sans); }
.ev-stamp em { font-style: normal; font-size: 0.4375rem; letter-spacing: .06em; text-transform: uppercase; }
.ev-post { position: absolute; top: 1.125rem; right: 2.25rem; z-index: 3; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid rgba(22, 19, 15, .55); display: grid; place-items: center; color: rgba(22, 19, 15, .7); transform: rotate(-14deg); }
.ev-post b { font-size: 0.5625rem; font-weight: 700; letter-spacing: .04em; }
.ev-post i { position: absolute; left: 90%; top: 30%; width: 3rem; height: 1.25rem; background: repeating-linear-gradient(0deg, transparent 0 0.25rem, rgba(22, 19, 15, .45) 0.25rem calc(0.25rem + 1.5px)); -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent); border-radius: 50%; }
.ev-to { position: absolute; left: 0.875rem; right: 4rem; top: 3.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.ev-to b { font: 400 1.0625rem/1.15 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-to small { font-size: 0.625rem; letter-spacing: .04em; color: var(--c); font-weight: 600; text-transform: uppercase; }
.ev-foot { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.5rem; display: flex; justify-content: space-between; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-top: 1px dotted rgba(22, 19, 15, .25); padding-top: 0.3125rem; }
.ev-foot b { color: var(--ink); }
.ev.soon .ev-foot b { color: #8A6400; }
.ev.late .ev-body { background-color: #FFF4EE; }
.ev.late .ev-foot b { color: #B8330F; }
.ev-frank { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-12deg); padding: 0.1875rem 0.75rem; border: 2.5px solid #D0341A; border-radius: 0.375rem; color: #D0341A; font-size: 0.9375rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .82; mix-blend-mode: multiply; z-index: 3; }
.ev.far { opacity: .7; }
.ev-letter { position: absolute; left: 0.5rem; right: 0.5rem; top: 0.5rem; height: 7rem; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.4375rem; padding: 0.625rem 0.75rem; border-radius: 0.375rem; background: #2A2520; border: 1px solid #16130F; box-shadow: 0 -0.25rem 0.75rem -0.25rem rgba(22, 19, 15, .45); background-image: repeating-linear-gradient(0deg, transparent 0 1.125rem, rgba(255, 255, 255, .06) 1.125rem calc(1.125rem + 1px)); transition: transform .35s cubic-bezier(.2, 1.2, .4, 1); }
.ev:hover { z-index: 5; }
/* the first row needs headroom for its letter to rise into, below the diary's header */
.ev-scroll > .ev-grid:first-of-type { padding-top: 3.25rem; }
.ev-scroll > .ev-h:first-child { margin-top: 0; }
.ev:hover .ev-letter { transform: translateY(-3rem); z-index: 3; }
/* the open flap stands up behind the letter: the letter is a little narrower and a touch see-through, so the flap's
   corners show either side and its shape shows faintly through the paper */
.ev .ev-letter { left: 1.75rem; right: 1.75rem; background-color: rgba(42, 37, 32, .8); backdrop-filter: blur(1px); }
.ev-letter small { font-size: 0.75rem; line-height: 1.4; color: #F1ECE1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-letter .dy-go { align-self: flex-start; border-radius: 1rem; background: #FFD35A; color: #16130F; border-color: #FFD35A; }
.ev-letter .dy-go:hover { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.ev-foot2 { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.625rem 1.5rem; border-top: 1.5px solid var(--ink); font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: #F7F2E8; }
.ev-foot2 .dy-go { border-radius: 1rem; }
@media (prefers-reduced-motion: reduce) { .ev, .pp { animation: none; } .ev-body, .ev-flap, .ev-letter { transition: none; } }
@media (max-width: 760px) { .diary.v6 { padding: 0.5rem; } .ev-card { height: calc(100svh - 1rem); } .ev-head { padding: 0.875rem 1rem 0.625rem; } .ev-ttl b { font-size: 1.5rem; } .ev-scroll { padding: 0.75rem 1rem 1rem; } .ev-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the upload windows, v3: calm and modern — on the left what's on file with a twelve-month coverage strip
   for each, on the right three steps and a round portal to drop the file into, its rings turning ---------- */
.modal-card:not(.wide):not(.ph2) { border-radius: 1.5rem; border: 1.5px solid var(--ink); background: #FBF8F1; box-shadow: 0 2.5rem 5rem -2rem rgba(22, 19, 15, .55), 0.5rem 0.5rem 0 var(--ink); }
.up-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
.up-hero { background: #F3EDE1 !important; border-right: 1.5px solid rgba(22, 19, 15, .15) !important; padding: 1.75rem 1.5rem 1.25rem !important; }
.up-hero::after { display: none; }
.up-hero .up-kicker { color: var(--tomato); }
.up-hero h3 { font-size: clamp(2.125rem, 3.6vw, 2.75rem) !important; margin: 0.375rem 0 0.375rem !important; }
.up-hero .up-deck { font-size: 0.8125rem !important; }
/* on file: coverage */
.up-info:not(:empty) { margin-top: 1.125rem; gap: 0.5rem !important; }
.up-info .ui-h { border-bottom: 0; padding-bottom: 0; color: var(--ink-2); }
.up-info .ui-card { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.625rem 0.75rem; border-radius: 0.875rem; border: 1px solid rgba(22, 19, 15, .1); background: #FFFDF8; box-shadow: 0 0.25rem 0.75rem -0.5rem rgba(22, 19, 15, .25); }
.up-info .ui-card.due { border-color: rgba(255, 91, 46, .45); background: #FFF4EE; }
.up-info .ui-face { width: 1.75rem; height: 1.75rem; box-shadow: none; }
.up-info .ui-main > b { font-size: 0.8125rem; }
.up-info .ui-main > small { font-size: 0.6562rem; }
.up-info .ui-chip { margin-top: 0.25rem; }
.up-info .ui-when b { font-size: 1.125rem; color: var(--ink); }
.ui-file { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.375rem; align-items: baseline; min-width: 0; margin-top: 0.375rem; padding: 0.3125rem 0.5rem; border-radius: 0.5rem; background: #F4EEE2; font-size: 0.625rem; color: var(--ink-2); }
.ui-file i { grid-row: span 2; font-style: normal; color: var(--tomato); }
.ui-file b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-file em { grid-column: 2; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-file + .ui-chip { margin-top: 0.375rem; }
.up-info .ui-fact { border-radius: 0.875rem; border: 1px dashed rgba(22, 19, 15, .25); background: transparent; }
.up-info .ui-fact i { color: var(--tomato); }
/* steps */
.up-steps { padding: 1.75rem 1.75rem 1.25rem !important; gap: 0.375rem !important; }
.up-who-k { margin: 0.875rem 0 0.5rem !important; letter-spacing: .14em !important; color: var(--ink-2); }
.up-who-k b { background: var(--ink) !important; }
/* what: tiles */
.up-steps .inv-types { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0.5rem !important; }
.up-steps .inv-type, .up-steps .person-switch:not(.up-faces) .seg { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.25rem; padding: 0.75rem 0.375rem 0.625rem !important; border-radius: 1rem !important; border: 1.5px solid rgba(22, 19, 15, .14) !important; background: #FFFDF8 !important; color: var(--ink) !important; box-shadow: none !important; transform: none; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), background .2s, border-color .2s, box-shadow .2s !important; }
.up-steps .inv-type i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #F1ECE1; color: var(--tomato) !important; font-size: 1.125rem !important; transition: background .2s, color .2s; }
.up-steps .inv-type b { font-size: 0.625rem !important; line-height: 1.25; }
.up-steps .inv-type small { font-size: 0.5625rem !important; }
.up-steps .inv-type:hover, .up-steps .person-switch:not(.up-faces) .seg:hover { transform: translateY(-2px); border-color: var(--ink) !important; }
.up-steps .inv-type.on, .up-steps .person-switch:not(.up-faces) .seg.on { background: var(--ink) !important; color: #FBF8F1 !important; border-color: var(--ink) !important; box-shadow: 0 0.625rem 1.25rem -0.5rem rgba(22, 19, 15, .5) !important; transform: translateY(-2px); }
.up-steps .inv-type.on i { background: var(--tomato); color: #fff !important; }
.up-steps .inv-type.on small { color: #B9B0A2 !important; }
.up-steps .person-switch:not(.up-faces) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem !important; }
.up-steps .person-switch:not(.up-faces) .seg { flex-direction: row; font: 600 0.6875rem var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; padding: 0.75rem 0.5rem !important; }
/* whose: a segmented pill */
.person-switch.up-faces { display: flex !important; gap: 0 !important; padding: 0.25rem; border-radius: 2rem; background: #EFE8DA; border: 1px solid rgba(22, 19, 15, .1) !important; width: fit-content; }
.up-face { display: inline-flex !important; align-items: center; gap: 0.5rem !important; min-width: 0; padding: 0.375rem 1rem 0.375rem 0.375rem !important; border: 0 !important; border-radius: 2rem !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
.up-face:hover { background: rgba(255, 255, 255, .6) !important; }
.up-face.on { background: #FFFDF8 !important; box-shadow: 0 0.25rem 0.625rem -0.25rem rgba(22, 19, 15, .35) !important; }
.up-face .uf-pic, .up-face .uf-pic > b, .up-face .uf-auto { width: 1.75rem !important; height: 1.75rem !important; }
.up-face .uf-pic > b { font: 600 0.8125rem var(--sans) !important; background: var(--c) !important; box-shadow: none !important; }
.up-face .uf-auto { background: #FFF1EA !important; color: var(--tomato) !important; box-shadow: none !important; font-size: 0.875rem !important; }
.up-face .uf-tick { display: none !important; }
.up-face .uf-name { font: 600 0.8125rem var(--sans) !important; }
.up-face .uf-name em { display: none; }
.up-face small { display: none; }
.up-steps .up-who-hint { font-size: 0.6875rem !important; margin-top: 0.4375rem !important; }
/* the portal */
.up-steps .up-drop { position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto; column-gap: 1.5rem !important; align-items: center; justify-items: start; text-align: left; padding: 1.5rem 1.5rem !important; min-height: 0; border: 1.5px dashed rgba(22, 19, 15, .3) !important; border-radius: 1.5rem !important; background: radial-gradient(120% 140% at 0% 50%, rgba(255, 91, 46, .1), transparent 55%), #FFFDF8 !important; background-image: none; overflow: visible; transition: border-color .25s, background .25s, transform .25s !important; }
.up-steps .up-drop:hover { border-color: var(--ink) !important; }
/* nothing in the steps column gives way when files arrive — the column scrolls instead, so the drop area never squashes and its text never spills */
.up-steps > * { flex-shrink: 0; }
.up-steps .up-drop.over { border-style: solid !important; border-color: var(--tomato) !important; background: radial-gradient(120% 140% at 0% 50%, rgba(255, 91, 46, .22), transparent 60%), #FFF6EE !important; transform: scale(1.01) !important; box-shadow: 0 0 0 0.5rem rgba(255, 91, 46, .12) !important; }
.up-steps .up-drop .up-drop-ico { grid-row: span 2; position: relative; width: 6.5rem !important; height: 6.5rem !important; border-radius: 50%; display: grid; place-items: center; background: #F1ECE1; box-shadow: inset 0 0 0 1.5px rgba(22, 19, 15, .15); padding: 0; }
/* two sheets of paper behind the document, fanning out when a file comes near */
.up-steps .up-drop .up-drop-ico::before, .up-steps .up-drop .up-drop-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.125rem; height: 2.75rem; margin: -1.375rem 0 0 -1.0625rem; border-radius: 0.25rem; background: #FFFDF8; border: 1.5px solid rgba(22, 19, 15, .45); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.up-steps .up-drop .up-drop-ico::before { transform: rotate(-10deg) translate(-0.375rem, 0.125rem); }
.up-steps .up-drop .up-drop-ico::after { transform: rotate(9deg) translate(0.375rem, 0.125rem); }
.up-steps .up-drop:hover .up-drop-ico::before, .up-steps .up-drop.over .up-drop-ico::before { transform: rotate(-22deg) translate(-0.875rem, 0.25rem); }
.up-steps .up-drop:hover .up-drop-ico::after, .up-steps .up-drop.over .up-drop-ico::after { transform: rotate(20deg) translate(0.875rem, 0.25rem); }
.up-steps .up-drop .up-drop-ico svg { position: relative; z-index: 1; width: 2.375rem !important; height: 2.375rem !important; filter: drop-shadow(0 2px 2px rgba(22, 19, 15, .15)); }
.up-steps .up-drop .ud-doc { fill: #FFFDF8; }
/* a soft ring going out from the circle, like a ripple */
.up-steps .up-drop .up-drop-ico { animation: udRipple 2.8s ease-out infinite; }
@keyframes udRipple { 0% { box-shadow: inset 0 0 0 1.5px rgba(22, 19, 15, .15), 0 0 0 0 rgba(255, 91, 46, .28); } 70%, 100% { box-shadow: inset 0 0 0 1.5px rgba(22, 19, 15, .15), 0 0 0 1.25rem rgba(255, 91, 46, 0); } }
.up-steps .up-drop.over .up-drop-ico { background: #FFE3D6; animation-duration: 1s; }
.up-steps .up-drop-big { font: 400 1.875rem/1.05 var(--serif) !important; font-style: normal !important; align-self: end; }
.up-steps .up-drop > .mono { align-self: start; font-size: 0.6562rem !important; line-height: 1.55; color: var(--ink-2); margin-top: 0.375rem; }
/* files on their way in */
.up-results > li.up-card { border-radius: 1rem !important; border: 1px solid rgba(22, 19, 15, .12) !important; background: #FFFDF8 !important; box-shadow: 0 0.25rem 0.75rem -0.5rem rgba(22, 19, 15, .25); }
.up-results > li.up-card.ok { border-color: rgba(31, 163, 122, .45) !important; } .up-results > li.up-card.err { border-color: rgba(255, 91, 46, .5) !important; } .up-results > li.up-card.warn { border-color: rgba(224, 161, 0, .5) !important; }
.uc-ico { border-radius: 0.625rem !important; border-width: 1.5px !important; }
/* saving: rings turning */
.us-rings { width: 7rem !important; }
.us-rings circle { fill: none; stroke-width: 3; stroke-linecap: round; transform-origin: 60px 60px; }
.us-rings .r1 { stroke: var(--tomato); stroke-dasharray: 80 250; animation: udSpin 1.1s linear infinite; }
.us-rings .r2 { stroke: #FFD35A; stroke-dasharray: 60 200; animation: udSpin 1.6s linear infinite reverse; }
.us-rings .r3 { stroke: #1FA37A; stroke-dasharray: 40 140; animation: udSpin .9s linear infinite; }
.us-rings text { font: 400 26px var(--serif); fill: var(--ink); }
.up-saving.ok .us-rings { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .up-drop-ico, .us-rings circle { animation: none !important; } }
@media (max-width: 760px) { .up-steps .inv-types { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .up-steps .up-drop { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; } .up-steps .up-drop .up-drop-ico { grid-row: auto; } .person-switch.up-faces { width: auto; } }

/* a window over the page (upload, phone, diary, drawer) holds the page still; its own panes scroll without passing the scroll on */
html:has(.modal.open), html:has(.diary.open), html:has(.drawer.open) { overflow: hidden; }
.modal, .diary, .drawer, .up-steps, .up-hero, .ev-scroll, .rv-form, .rv-pdf { overscroll-behavior: contain; }

/* ---------- tax §05 TDS: a river of tax ---------- */
#chart-tds { position: relative; }
.rv-svg { display: block; overflow: visible; }
.rv-col { fill: transparent; transition: fill .25s; }
.rv-col.on { fill: rgba(255, 91, 46, .07); stroke: rgba(255, 91, 46, .35); stroke-dasharray: 3 4; }
.rv-bank { stroke: #16130F; stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .55; }
.rv-st { stroke: #FBF8F1; stroke-width: 1.5; cursor: pointer; transition: opacity .2s, filter .2s; animation: rvIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.rv-svg:has(.rv-st:hover) .rv-st:not(:hover) { opacity: .45; }
@keyframes rvIn { from { opacity: 0; transform: scaleX(.6); } }
.rv-st { transform-box: view-box; transform-origin: 0 50%; }
.chart .rv-nm { font: 600 13px var(--sans); fill: #16130F; stroke: #FBF8F1; stroke-width: 10px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
.chart .rv-tot { font: 400 15px var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.chart .rv-rate { font: 9.5px var(--mono); fill: #6B645A; pointer-events: none; }
.chart .rv-nil { font: 600 9.5px var(--mono); letter-spacing: .06em; pointer-events: none; opacity: .8; }
.chart .rv-who { font: 600 10px var(--mono); letter-spacing: .1em; pointer-events: none; }
.chart .rv-ay { font: 600 11px var(--mono); fill: #16130F; letter-spacing: .04em; }
.chart .rv-ay.on { fill: #C8431A; }
.chart .rv-fy { font: 10px var(--mono); fill: #8A8275; }
.rv-hit { fill: transparent; cursor: pointer; }
.rv-svg .rv-hit { pointer-events: all; }















/* ---------- tax §05 side: a 26AS sheet per person ---------- */
.td3-list { display: flex; flex-direction: column; gap: clamp(0.75rem, 2vh, 1.25rem); }
.td3 { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; border-top: 3px solid var(--c, var(--ink)); }
.td3-h { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.td3-h i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.375rem; }
.td3-h em { font-style: normal; color: #8A8275; margin-left: 0.25rem; }
.td3-hero { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.td3-ring { width: 100%; height: auto; display: block; }
.td3-ring .td3-rv { font: 600 12.5px var(--mono); fill: #16130F; }
.td3-hero > div { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.td3-hero > div > b { font: 400 clamp(1.75rem, 4.2vh, 2.5rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td3-hero > div > span { font-size: 0.8125rem; color: var(--ink-2); }
.td3-hero > div > span b { color: var(--ink); font-weight: 400; }
.td3-d { font: 600 0.6875rem var(--mono); } .td3-d.up { color: #B8330F; } .td3-d.dn { color: #0E7A58; } .td3-d i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.td3-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem; }
.td3-t { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.625rem 0.5rem 0.875rem; border: 1.5px solid var(--ink); border-radius: 0.625rem; background: #FBF8F1; box-shadow: 0.1875rem 0.1875rem 0 rgba(22, 19, 15, .12); overflow: hidden; }
.td3-t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.3125rem; background: var(--e); }
.td3-tn { display: flex; align-items: center; gap: 0.3125rem; min-width: 0; }
.td3-tn b { font: 600 0.8125rem/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.td3-sec { flex: none; font: 600 0.625rem var(--mono); font-style: normal; padding: 0.0625rem 0.3125rem; border: 1.2px solid var(--ink); border-radius: 1rem; }
.td3-sec:first-of-type { margin-left: auto; }
.td3-tv { font: 400 1.25rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.td3-tb { height: 0.375rem; border-radius: 0.25rem; background: rgba(22, 19, 15, .08); overflow: hidden; }
.td3-tb i { display: block; height: 100%; background: var(--e); border-radius: 0.25rem; }
.td3-tp { font-size: 0.625rem; color: var(--ink-2); }
.td3-z { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.6875rem; color: var(--ink-2); padding-top: 0.375rem; border-top: 1px dotted var(--rule); }
.td3-z > b { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); width: 100%; }
.td3-z em { font-style: normal; font-size: 0.625rem; color: #8A8275; }
.td3-none { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }

/* ---------- tax §06 AIS: a planet a year ---------- */
.pl-svg { display: block; overflow: visible; }
.pl-col { fill: transparent; transition: fill .25s; }
.pl-col.on { fill: rgba(255, 91, 46, .07); stroke: rgba(255, 91, 46, .35); stroke-dasharray: 3 4; }
.pl-orbit { stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .55; }
.pl-body { animation: plIn .7s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes plIn { from { transform: scale(0); } }
.pl-edge { fill: none; stroke: rgba(22, 19, 15, .55); stroke-width: 1.2; }
.pl-track { fill: none; stroke: #E6DCCB; stroke-width: 3.5; }
.pl-rep { fill: none; stroke: #1FA37A; stroke-width: 3.5; stroke-linecap: round; }
.pl-miss { fill: none; stroke: #B8330F; stroke-width: 3.5; stroke-dasharray: 4 3; }
.pl-wait { fill: none; stroke: #8A8275; stroke-width: 2; stroke-dasharray: 1.5 3; }
.pl-nil { fill: #FBF8F1; stroke: #8A8275; stroke-width: 1.4; stroke-dasharray: 2 2; }
.chart .pl-amt { font: 400 15px var(--sans); fill: #16130F; font-variant-numeric: tabular-nums; }
.chart .pl-st { font: 10px var(--mono); fill: #6B645A; }
.chart .pl-st.ok { fill: #0E7A58; } .chart .pl-st.bad { fill: #B8330F; font-weight: 600; } .chart .pl-st.wait { fill: #8A8275; }
.chart .pl-who { font: 600 10px var(--mono); letter-spacing: .12em; }
.chart .pl-fy { font: 600 11px var(--mono); fill: #16130F; } .chart .pl-fy.on { fill: #C8431A; }
.chart .pl-ay { font: 10px var(--mono); fill: #8A8275; }
.pl-hit { fill: transparent; cursor: pointer; }
.ai3-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ai3-top small { display: block; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ai3-top > div:first-child b { font: 400 clamp(1.75rem, 4.2vh, 2.5rem)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ai3-stamp { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.375rem 0.75rem; border: 2.5px double currentColor; border-radius: 0.5rem; transform: rotate(-4deg); text-align: center; max-width: 60%; }
.ai3-stamp b { font: 700 0.6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ai3-stamp span { font-size: 0.5938rem; opacity: .85; }
.ai3-stamp.ok { color: #0E7A58; } .ai3-stamp.bad { color: #B8330F; } .ai3-stamp.wait, .ai3-stamp.nil { color: #6B645A; }
.ai3-rows { display: flex; flex-direction: column; }
.ai3-r { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 4.75rem; gap: 0.625rem; align-items: center; padding: 0.25rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.75rem; }
.ai3-r span:first-child { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai3-r span:first-child i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.ai3-bar { height: 0.5rem; border-radius: 0.25rem; background: rgba(22, 19, 15, .07); overflow: hidden; }
.ai3-bar i { display: block; height: 100%; border-radius: 0.25rem; background: var(--k); }
.ai3-bar i.lost { background: repeating-linear-gradient(-45deg, var(--k) 0 4px, rgba(255, 255, 255, .55) 4px 6px); box-shadow: inset 0 0 0 1.5px #B8330F; }
.ai3-r b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.ai3-note { margin: 0; font-size: 0.75rem; line-height: 1.4; color: #B8330F; }
.ai3-also span b { font-weight: 400; color: var(--ink); }

/* ---------- tax §06 AIS: the abacus ---------- */









/* ---------- tax §07 filing clock: stopwatches ---------- */
.sw-grid { height: 100%; display: grid; grid-template-columns: var(--lw) repeat(var(--cols), minmax(0, 1fr)); align-items: center; justify-items: center; row-gap: 0.25rem; }
.sw-grid[style*="--lw:0px"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.sw-who { justify-self: start; display: flex; align-items: center; gap: 0.4375rem; font: 400 1.125rem/1.1 var(--serif); color: var(--c); }
.sw-who i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.sw { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; min-width: 0; cursor: default; }
.sw svg { display: block; overflow: visible; }
.sw:hover .sw-bez { stroke: #FF5B2E; }
.sw-bez { transition: stroke .2s; }
.sw-bez { fill: #FBF8F1; stroke: #16130F; stroke-width: 2.6; }
.sw-face { fill: #F6F1E6; stroke: rgba(22, 19, 15, .18); stroke-width: .8; }
.sw-crown { fill: #16130F; }
.sw-tk { stroke: rgba(22, 19, 15, .45); stroke-width: 1; }
.sw-tk.q { stroke: #16130F; stroke-width: 1.6; }
.chart .sw-m { font: 600 5.6px var(--mono); fill: #8A8275; }
.sw-track { fill: none; stroke: #E6DCCB; stroke-width: 7; }
.sw-arc { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: swDraw 1.1s cubic-bezier(.3, .7, .2, 1) .1s forwards; }
.sw-arc.lap { stroke: #1FA37A; stroke-width: 4.5; animation-delay: 1s; animation-duration: .6s; }
.sw-rev { fill: none; stroke-width: 1.4; stroke-dasharray: 2 2.6; }
.sw-rd { fill: #FBF8F1; stroke-width: 2; }
.sw-due { stroke: #B8330F; stroke-width: 1.7; }
.sw-flag { fill: #B8330F; }
.sw-ok { fill: #1FA37A; stroke: #FBF8F1; stroke-width: 1.4; }
.chart .sw-okt { font: 700 6.5px var(--mono); fill: #fff; }
.sw-hand { transform: rotate(var(--a)); animation: swHand 1.1s cubic-bezier(.3, .7, .2, 1) .1s both; }
.sw-hand line { stroke: #16130F; stroke-width: 2; stroke-linecap: round; }
.sw-hand circle { fill: #FF5B2E; }
.sw.late .sw-hand circle { fill: #B8330F; }
.sw-cap { fill: #16130F; }
.chart .sw-n { font: 400 17px var(--sans); fill: #16130F; font-variant-numeric: tabular-nums; }
.chart .sw-u { font: 600 5.5px var(--mono); letter-spacing: .14em; fill: #8A8275; }
@keyframes swDraw { to { stroke-dashoffset: 0; } }
@keyframes swHand { from { transform: rotate(0deg); } }
.sw-cap-l { display: flex; flex-direction: column; align-items: center; gap: 0.0625rem; text-align: center; max-width: 100%; }
.sw-cap-l b { font: 600 0.75rem var(--mono); letter-spacing: .04em; }
.sw-cap-l span { font-size: 0.625rem; line-height: 1.35; color: var(--ink-2); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-cap-l em { font-style: normal; font-weight: 600; } .sw-cap-l em.ok { color: #0E7A58; } .sw-cap-l em.bad { color: #B8330F; }
.sw.none { opacity: .45; }
#chart-clock.sw-phone { height: auto; overflow: visible; }
.sw-phone .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.625rem; }
.sw-phone .sw-who { grid-column: 1 / -1; margin-top: 0.25rem; }
.sw-phone .sw-cap-l span { font-size: 0.5938rem; }
@media (prefers-reduced-motion: reduce) { .sw-arc, .sw-hand, .rv-st { animation: none; } .sw-arc { stroke-dashoffset: 0; } }

/* ---------- tax §01 the meter: a fare meter, the year's road and the fare slip ---------- */
.fm-wrap { flex: 1; min-height: 0; display: grid; gap: 1.5rem; }
.fm-wrap.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-card { --lw: 3.75rem; --vw: 3.75rem; --g: 0.5rem; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; border-top: 3px solid var(--c); padding-top: 0.5rem; }
.fm-top { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fm-top i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.375rem; }
.fm-top span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.7fr); gap: 1rem; }
.fm-wrap:not(.two) .fm-grid { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 2rem; }
.fm-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.5rem, 1.3vh, 0.75rem); }
/* the meter box */
.fm-box { display: flex; flex-direction: column; gap: 0.4375rem; padding: 0.5rem 0.75rem 0.625rem; border: 2px solid var(--ink); border-radius: 1rem; background: linear-gradient(170deg, #FBF8F1, #EFE7D8); box-shadow: 0.3125rem 0.3125rem 0 rgba(22, 19, 15, .14); }
.fm-bt { display: flex; justify-content: space-between; align-items: center; font-size: 0.5938rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.fm-flag { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 1rem; border: 1.5px solid var(--ink); font-size: 0.5938rem; letter-spacing: .12em; }
.fm-flag.on { background: #FF5B2E; color: #FBF8F1; border-color: #B8330F; }
.fm-flag.on::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #FBF8F1; animation: fmBlink 1s steps(2, start) infinite; }
.fm-flag.hire { background: #F5B700; color: #16130F; }
@keyframes fmBlink { to { visibility: hidden; } }
.fm-win { align-self: flex-start; max-width: 100%; padding: 0.375rem 0.5rem; border-radius: 0.625rem; background: #16130F; box-shadow: inset 0 0 0 2px #3A332B, inset 0 6px 14px rgba(0, 0, 0, .5); overflow: hidden; }
.fm-odo { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.06em; font-size: clamp(1.75rem, min(3.6vw, 6.4vh), 3.5rem); line-height: 1; color: #8A6A3A; }
.fm-odo .fl { padding: 0.05em 0.07em; border-radius: 0.1em; background: linear-gradient(to bottom, #241F1A 0 49%, #0B0A08 49% 51%, #1B1713 51% 100%); color: #FFB547; text-shadow: 0 0 0.25em rgba(255, 150, 40, .65); }
.fm-card.zero .fm-odo .fl { color: #6B645A; text-shadow: none; }
.fm-wrap.two .fm-odo { font-size: clamp(1.5rem, min(2.2vw, 5vh), 2.75rem); }
.fm-wrap.two .fm-say { font-size: 0.75rem; padding: 0.375rem 0.625rem; }
.fm-wrap.two .fm-box { gap: 0.375rem; }
.fm-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.fm-sw { display: flex; flex-direction: column; gap: 0.0625rem; padding: 0.25rem 0.5rem; border: 1.5px solid rgba(22, 19, 15, .5); border-radius: 0.5rem; background: #FBF8F1; min-width: 0; }
.fm-sw small { font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.fm-sw b { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fm-k { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fm-say { padding: 0.4375rem 0.75rem; border-radius: 0.75rem; font-size: 0.8125rem; line-height: 1.4; }
.fm-say.up { background: rgba(31, 163, 122, .12); } .fm-say.down { background: rgba(255, 91, 46, .12); }
.fm-say b { font-weight: 600; }
/* the year's road: a lane for the meter, one for payroll, a booth per payslip — all on one axis, 1 April to 31 March */
.fm-road { position: relative; display: flex; flex-direction: column; gap: 0.4375rem; flex: 1; min-height: 0; }
.fm-rh, .fm-lane, .fm-brow { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); gap: var(--g); align-items: center; }
.fm-rt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; min-width: 0; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fm-ll { font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fm-lt { position: relative; height: 0.875rem; border-radius: 1rem; background: #E2D8C6; }
.fm-lt::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: 50%; border-top: 1.5px dashed rgba(251, 248, 241, .9); }
.fm-lt > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1rem; background: linear-gradient(90deg, rgba(255, 91, 46, .35), #FF5B2E); z-index: 1; animation: fmGrow 1.1s cubic-bezier(.3, .7, .2, 1) both; transform-origin: left; }
.fm-lane.pay .fm-lt > i { background: linear-gradient(90deg, rgba(31, 163, 122, .35), #1FA37A); }
@keyframes fmGrow { from { transform: scaleX(0); } }
.fm-lt > u { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 0; border-left: 2px solid var(--ink); z-index: 2; }
.fm-cabw { position: absolute; top: 50%; z-index: 3; width: 2.375rem; transform: translate(-70%, -72%); animation: fmDrive 1.1s cubic-bezier(.3, .7, .2, 1) both; }
.fm-cab { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(22, 19, 15, .18)); }
@keyframes fmDrive { from { left: 0 !important; } }
.fm-lane > b { font: 400 0.9375rem/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.fm-road.z .fm-lane { grid-template-columns: var(--lw) minmax(0, 1fr) 3.25rem 3rem; }
.fm-road.z .fm-rh { grid-template-columns: var(--lw) minmax(0, 1fr) 6.75rem; }
.fm-road.z .fm-lt > i { background: linear-gradient(90deg, rgba(31, 163, 122, .35), #1FA37A); }
.fm-road.z .fm-lane.over .fm-lt > i { background: linear-gradient(90deg, #1FA37A 0 70%, #FF5B2E); }
.fm-road.z .fm-lane.now .fm-ll { color: var(--ink); font-weight: 600; }
.fm-road.z .fm-lane em { font-style: normal; font-size: 0.75rem; text-align: right; color: var(--ink-2); }
.fm-road.z .fm-lane > b { font-size: 0.8125rem; font-weight: 600; }
.fm-road.z { flex: none; padding-bottom: 1rem; }
.fm-tl { position: absolute; top: calc(100% + 0.3125rem); transform: translateX(-50%); font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.fm-booths { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; justify-content: flex-end; }
.fm-bh { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.25rem; }
.fm-brow { flex: 1; min-height: clamp(3.25rem, 9vh, 6rem); align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.fm-bars { grid-template-rows: minmax(0, 1fr); }
.fm-wrap:not(.two) .fm-brow { max-height: 14rem; }
.fm-card.zero .fm-brow { flex: none; height: clamp(4.5rem, 13vh, 7.5rem); }
.fm-card.zero .fm-bars .f i { background: transparent; }
.fm-card.zero .fm-booths { flex: none; }
.fm-wrap.two .fm-card.zero .fm-brow { height: clamp(3rem, 8vh, 5rem); }
.fm-wrap.two .fm-road.z { gap: 0.3125rem; }
.fm-bars > span { height: 100%; }
.fm-brow .fm-ll { align-self: end; padding-bottom: 1.125rem; }
.fm-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; min-height: 0; }
.fm-bars > span { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.1875rem; min-width: 0; }
.fm-bars i { display: block; border-radius: 0.25rem 0.25rem 0.125rem 0.125rem; background: #FF5B2E; animation: fmUp .8s cubic-bezier(.3, .7, .2, 1) both; transform-origin: bottom; }
.fm-card.zero .fm-bars i { background: var(--c); }
.fm-bars .f i { background: transparent; border: 1.5px dashed rgba(22, 19, 15, .35); }
.fm-bars .last i { box-shadow: 0 0 0 2px var(--ink); }
.fm-bars em { font-style: normal; font-size: 0.5938rem; text-align: center; color: var(--ink-2); }
.fm-bars .f em { opacity: .55; }
@keyframes fmUp { from { transform: scaleY(0); } }
.fm-today { position: absolute; top: 1.25rem; bottom: 1rem; left: calc(var(--lw) + var(--g) + (100% - var(--lw) - var(--vw) - 2 * var(--g)) * var(--t)); border-left: 1.5px dashed var(--ink); z-index: 4; pointer-events: none; }
/* the fare slip */
.fm-slip { min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 0.625rem 0.875rem 1rem; background: #FFFDF8; border: 1px solid rgba(22, 19, 15, .16); border-bottom: 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; scrollbar-width: thin; }
.fm-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding-bottom: 0.375rem; margin-bottom: 0.25rem; border-bottom: 1.5px dashed rgba(22, 19, 15, .4); font-size: 0.5938rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.fm-sh b { font-size: 0.75rem; color: var(--ink); letter-spacing: .2em; }
.fm-sr { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; align-items: baseline; column-gap: 0.375rem; padding: clamp(0.125rem, 0.5vh, 0.3125rem) 0 clamp(0.125rem, 0.4vh, 0.25rem); border-bottom: 1px dotted rgba(22, 19, 15, .14); }
.fm-sr > span { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.fm-sr > i { border-bottom: 1.5px dotted rgba(22, 19, 15, .3); transform: translateY(-0.2rem); }
.fm-sr > b { font: 400 0.875rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.fm-sr.tot > b { font-size: 1.125rem; color: #C8431A; }
.fm-sr > em { grid-column: 1 / -1; font-style: normal; font-size: 0.6563rem; color: var(--ink-2); line-height: 1.3; }
.fm-sf { margin-top: auto; padding-top: 0.5rem; font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.fm-sf::after { content: ""; display: block; height: 0.875rem; margin-top: 0.3125rem; background: repeating-linear-gradient(90deg, #16130F 0 2px, transparent 2px 4px, #16130F 4px 5px, transparent 5px 8px, #16130F 8px 11px, transparent 11px 13px); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .fm-flag.on::before, .fm-lt > i, .fm-cabw, .fm-bars i { animation: none; } }
@media (max-width: 760px) {
  .fm-wrap.two, .fm-grid, .fm-wrap:not(.two) .fm-grid { grid-template-columns: minmax(0, 1fr); }
  .fm-slip { overflow: visible; }
  .fm-odo { font-size: 1.75rem; }
}

.nw-ign { align-self: flex-start; justify-self: start; width: auto; margin-left: 0.5rem; padding: 0.0625rem 0.5rem; border: 1px solid rgba(22, 19, 15, .3); border-radius: 1rem; background: transparent; font-size: 0.5938rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; vertical-align: middle; }
.nw-ign:hover { background: var(--ink); color: var(--paper); }

/* phones: the plot, the loan and the FD draw their charts into a fixed frame that shrinks with the screen — their small
   labels are set larger there, so none reads under ~10px once scaled */
@media (max-width: 720px) {
  .burn text.axis-note, .burn .burn-lab { font-size: 11px; }
  .rl-svg .rl-k { font-size: 10px; letter-spacing: .04em; }
  .rl-svg .rl-v { font-size: 10px; }
  .site-plan .sp-road { font-size: 8.5px; }
  #i-fd svg .axis-note, #i-fd svg .fd-pin, #i-fd svg .fd-reg { font-size: 11px; }
  #i-fd svg .fd-coin, #i-fd svg .fd-r1 { font-size: 11px; letter-spacing: .06em; }
}

/* ---------- the diary: "to look at" — notes pinned above the post ---------- */
.ev-h.look { color: #9A5A00; }
.lk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.625rem; margin-bottom: 0.75rem; }
.lk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; padding: 0.75rem 0.75rem 0.75rem 0.875rem; background: #FFF6D8; border: 1px solid rgba(154, 90, 0, .25); border-radius: 0.375rem; box-shadow: 0.1875rem 0.25rem 0 rgba(22, 19, 15, .08); transform: rotate(calc((var(--i) % 3 - 1) * 0.4deg)); animation: lkIn .4s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 60ms); }
.lk-pin { position: absolute; top: -0.375rem; left: 50%; width: 0.75rem; height: 0.75rem; margin-left: -0.375rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A65, #C8431A); box-shadow: 0 1px 2px rgba(22, 19, 15, .35); }
.lk-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--k); color: var(--k); font-size: 0.875rem; background: #FFFDF8; }
.lk-t { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.lk-t b { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.lk-t small { font-size: 0.6875rem; line-height: 1.4; color: var(--ink-2); }
.lk-t em { font-style: normal; font-size: 0.5938rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.lk .dy-go { align-self: center; text-decoration: none; white-space: nowrap; }
@keyframes lkIn { from { opacity: 0; transform: translateY(-0.5rem) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .lk { animation: none; } }

/* ---------- the loan: twelve EMIs and the close ---------- */
.tiles.t13 { grid-template-columns: repeat(13, minmax(0, 1fr)); }
.tile.close13 { border: 2px solid #0E7A58; background: rgba(14, 122, 88, .08); }
.tile.close13 .tl-bar i.p { background: #0E7A58; }
.tile.close13 .tl-st, .tile.close13 .tl-d { color: #0E7A58; }
.tile.close13 .tl-v { color: #0E7A58; font-weight: 600; }
.lh-facts .lh-tot { color: var(--ink); font-size: 0.6875rem; }
.lh-facts .lh-tot b { display: inline; font: 600 0.8125rem var(--sans); letter-spacing: 0; }

/* ---------- §12 the plan: salary by salary, to the close ---------- */
.sec-body.po-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.25rem, 2vw, 2.25rem); }
.po-l { gap: clamp(0.5rem, 1.2vh, 0.75rem); min-width: 0; }
.po-figs { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; }
.po-f small { display: block; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.po-f b { display: block; font: 400 clamp(1.25rem, min(2vw, 3.6vh), 2rem)/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.po-f.tot b { color: #0B6E75; } .po-f.up b { color: #0E7A58; } .po-f.down b { color: #B8330F; }
.po-f em { display: block; font-style: normal; font-size: 0.6875rem; color: var(--ink-2); line-height: 1.35; }
.po-t { display: flex; flex-direction: column; min-height: 0; }
.po-r { display: grid; grid-template-columns: 4.25rem minmax(6rem, 1fr) 4.5rem 6.25rem 5rem 6rem 5.5rem 4rem; gap: 0.625rem; align-items: center; padding: clamp(0.0625rem, 0.3vh, 0.25rem) 0.375rem; border-bottom: 1px dotted var(--rule); font-size: 0.75rem; }
.po-r > .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-r > .amt small.po-d { display: inline; margin-right: 0.375rem; font-size: 0.5625rem; color: var(--ink-2); letter-spacing: .02em; }
.po-was { margin-right: 0.375rem; font-size: 0.625rem; color: #B8330F; font-weight: 400; }
.po-r .z { color: #B9B0A2; }
.po-r.now { background: rgba(255, 91, 46, .08); border-radius: 0.375rem; box-shadow: inset 3px 0 0 var(--tomato); }
.po-r.past { opacity: .55; }
.po-m { display: flex; align-items: center; gap: 0.3125rem; white-space: nowrap; font-size: 0.6875rem; }
.po-m b { font-weight: 600; }
.po-m i { font-style: normal; font: 700 0.5rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--tomato); padding: 1px 0.3125rem; border-radius: 1rem; }
.po-bar { display: flex; height: 0.625rem; border-radius: 0.25rem; overflow: hidden; gap: 1px; background: #E6DCCB; }
.po-bar i { display: block; height: 100%; }
.po-exp { color: #B8330F; } .po-sv { color: #0E7A58; font-weight: 600; } .po-fd { font-weight: 600; } .po-ow { color: var(--ink-2); }
.po-hd { font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; }
.po-hd > span:nth-child(2) { text-transform: none; letter-spacing: 0; font-size: 0.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-hd > span:nth-child(n+3) { text-align: right; }
.po-ph { margin-top: clamp(0.125rem, 0.5vh, 0.375rem); padding: 0.125rem 0.375rem; font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: #6B5A43; background: linear-gradient(90deg, rgba(224, 138, 0, .12), transparent 70%); border-radius: 0.25rem; }
.po-ev .po-say { font-size: 0.75rem; color: var(--ink); }
.po-close { background: rgba(14, 122, 88, .08); border-radius: 0.375rem; }
.po-close .po-m b, .po-close .po-ow { color: #0E7A58; font-weight: 700; }
.po-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: 0.625rem; color: var(--ink-2); }
.po-key i { display: inline-block; width: 0.625rem; height: 0.5rem; margin-right: 0.25rem; border-radius: 2px; }
.po-land .po-eq { display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; font-size: 0.6875rem; color: var(--ink-2); margin-bottom: 0.375rem; }
.po-land .po-eq b { color: var(--ink); font-weight: 600; }
.po-lbar { display: flex; height: 0.625rem; border-radius: 0.3125rem; overflow: hidden; gap: 1px; margin-bottom: 0.375rem; }
.po-lbar i { display: block; }
.po-land .kv small { font-size: 0.625rem; color: var(--ink-2); }
.po-land .kv.tot { border-top: 1.5px solid var(--ink); margin-top: 0.25rem; padding-top: 0.25rem; font-weight: 600; color: #0E7A58; }
.po-steps { list-style: none; counter-reset: pos; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.po-steps li { counter-increment: pos; display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: 0.75rem; padding: 0.125rem 0; border-bottom: 1px dotted var(--rule); }
.po-steps li::before { content: counter(pos); display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1.5px solid var(--ink); font: 700 0.5938rem var(--mono); }
.po-steps li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-steps li span { color: var(--ink-2); }
.po-steps li.ok b, .po-steps li.ok::before { color: #0E7A58; border-color: #0E7A58; }
.po-tot { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.45; }
.po-tot b { font-weight: 600; color: #0B6E75; }
.po-fix { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.75rem; padding: 0.5rem 0.625rem; border: 1.5px dashed #E08A00; border-radius: 0.5rem; background: rgba(245, 183, 0, .08); font-size: 0.6875rem; line-height: 1.45; color: var(--ink-2); }
.po-fix > b { font-size: 0.5938rem; letter-spacing: .1em; text-transform: uppercase; color: #9A5A00; }
.po-fix s { color: #B8330F; }
.po-fix span b { color: var(--ink); font-weight: 600; }
body.privacy .po-r .amt, body.privacy .po-f b, body.privacy .po-steps b, body.privacy .po-tot b, body.privacy .po-land .amt { filter: blur(6px); }
@media (max-width: 1100px) {
  .sec-body.po-body { grid-template-columns: minmax(0, 1fr); }
  .po-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-t { overflow-x: auto; }
  .po-r { min-width: 46rem; }
}
@media (max-width: 720px) { .tiles.t13 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- phones: every page, every section (last, so it wins) ---------- */
@media (max-width: 720px) {
  html { font-size: 16px; scroll-snap-type: none; }
  :root { --pad: 1rem; }
  body { -webkit-text-size-adjust: 100%; }
  .sec { padding: 1.25rem 0 1.5rem; }
  .lede { font-size: 1.5rem; margin-bottom: 1rem; }
  /* headline figures: two to a row, each only as tall as it needs */
  .stats { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .stat { padding: 0.75rem 0.75rem 0.875rem 0 !important; border-right: 1px solid var(--rule) !important; }
  .stat:nth-child(2n) { padding-left: 0.75rem !important; border-right: 0 !important; }
  .stat .v { font-size: 1.75rem; white-space: normal; overflow-wrap: anywhere; }
  .stat .spark { margin-top: 0.5rem; }
  /* anything laid out wider than a phone scrolls sideways inside its own box, never the page */
  .fit, #awards-main, #cycle-main { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #facts { width: auto !important; }
  .facts .fsplit { grid-template-columns: minmax(0, 1fr); }
  .events.two { columns: 1; }
  .panel .kv { flex-wrap: wrap; column-gap: 0.75rem; line-height: 1.6; padding: 0.1875rem 0; }
  .panel .kv > span:last-child { margin-left: auto; text-align: right; }
  /* receipts slide up from the bottom (a side drawer would widen the page on a phone) */
  .drawer, .drawer.wide { top: auto; left: 0; right: 0; width: 100%; height: 92svh; transform: translateY(105%); border-top: 2px solid var(--ink); padding: 1.25rem 1rem 3rem; }
  .drawer.open { transform: none; }
  .drawer.wide #receipt-wrap { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: 0.5rem; }
  .modal-card { padding: 1.25rem 1rem 1rem; box-shadow: 0.375rem 0.375rem 0 var(--ink); }
  .modal-card h3 { font-size: 2.5rem; }
  .tip { max-width: calc(100vw - 1rem); }
  .toast { max-width: calc(100vw - 2rem); }
}
@media (max-width: 720px) {
  .anatomy, .anatomy:has(.fsplit[style*="--n:2"]), .anatomy:has(.rfacts.multi) { grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem; }
  .chart { overflow: hidden; }
}
@media (max-width: 1100px) {
  .split-2-1, .split-2-1:has(.events.two) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .drawer:not(.open) { visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
  /* document sheets (payslip archive, tax / accounts / investments vaults): real columns, scrolled sideways */
  .archive { --vlab: 5.5rem; --vcol: 5.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .archive .yr { font-size: 0.9375rem; }
  
   
  /* tax: return facts for two people fit the phone; the checks matrix without sideways scrolling */
  .rfacts.multi { width: auto; }
  .rfacts.multi .r.rf, .rfacts.multi .rf-cols { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
  .rfacts .serving { flex-wrap: wrap; }
  table.checks th, table.checks td { padding: 0.375rem 0.125rem; }
  table.checks tbody th { white-space: normal; font-size: 0.625rem; }
  table.checks thead th { font-size: 0.625rem; }
  table.checks td span { width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 720px) {
  
  
  #plot-panels { columns: 1; }
}
@media (max-width: 1100px) {
  .fit { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 400px) {
  .nav-due .nd-k { display: none; }
  .nav-seg { padding-inline: 0.375rem !important; letter-spacing: .02em !important; }
  .nav-tools .nav-btn { width: 1.875rem; }
}
@media (max-width: 360px) {
  .nw-chip i small { display: none; }
  .nw-chip { gap: 0.3125rem; padding-inline: 0.5rem; }
}
@media (max-width: 720px) {
  .ms-trail { flex-wrap: wrap; white-space: normal; row-gap: 0.25rem; }
  .sec-logos .sec-logo { height: 0.5em; }
}
@media (max-width: 720px) {
  .dc { min-height: 2.25rem; padding: 2px 3px; }
  .dc-n { font-size: 0.625rem; }
  .dc-p i { width: 0.4375rem; height: 0.4375rem; }
  
  
  .nav-mk.full, .mast-nav .co-logo.full { height: 1rem; }
}
@media (max-width: 720px) { .dy-pay + .dy-pay { padding-left: 0; border-left: 0; } }
@media (max-width: 720px) {
  .pcx-grid { gap: 0 0.5rem; grid-template-columns: auto minmax(0, 1fr); }
  .pcx-grid > span:nth-child(4n + 3) { padding-left: 0; border-left: 0; }
  .pcx-grid > span { white-space: normal; line-height: 1.35; padding: 0.1875rem 0; }
  .pcx-grid > b { font-size: 0.625rem; align-self: center; }
  .pcx-main > small { flex-basis: 100%; text-align: center; }
}
@media (max-height: 860px) and (min-width: 721px) { .pcx-src { display: none; } }
/* payday card: the countdown on the left, the payday worked out on the right — half the height of stacking them */
.pc.has-x { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: 0 1rem; align-items: center; }
.pc.has-x .pc-when small { display: block; margin-top: 0.125rem; }
.pc.has-x .pc-k { flex-wrap: nowrap; white-space: nowrap; gap: 0.375rem; }
@media (max-width: 1680px) { .pc.has-x .pc-k { letter-spacing: .03em; gap: 0.25rem; font-size: 0.5938rem; } }
.pc.has-x .pc-x { position: relative; margin: 0; max-width: none; border-top: 0; padding: 0.125rem 0 0.125rem 2.375rem; border-left: 0; }
/* the countdown points at what it brings: a drawn chevron that nudges forward and back, with a fainter echo trailing it */
.pc.has-x .pc-x::before, .pc.has-x .pc-x::after { content: ""; position: absolute; left: 0; top: 2%; bottom: 2%; width: 1.625rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100' preserveAspectRatio='none'%3E%3Cpath d='M3 2 C 7 28, 19 44, 21 50 C 19 56, 7 72, 3 98' fill='none' stroke='%23E08A00' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.pc.has-x .pc-x::before { animation: pc-nudge 1.8s ease-in-out infinite; }
.pc.has-x .pc-x::after { opacity: .28; animation: pc-echo 1.8s ease-in-out infinite; }
@keyframes pc-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.5rem); } }
@keyframes pc-echo { 0%, 100% { transform: translateX(-0.375rem); opacity: 0; } 40% { opacity: .3; } 60% { transform: translateX(0.125rem); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pc.has-x .pc-x::before, .pc.has-x .pc-x::after { animation: none; } }
.pc.has-x .pcx-main { justify-content: flex-start; }
.pc.has-x .pcx-grid { grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; line-height: 1.6; }
.pc.has-x .pcx-grid > span:nth-child(4n + 3) { padding-left: 0; border-left: 0; }
.pc.has-x .pcx-src { text-align: left; }
@media (min-width: 1101px) {
  /* one person: one wide card, so the figures go two to a row */
  .pc.has-x:only-child .pcx-grid { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .pc.has-x:only-child .pcx-grid > span:nth-child(4n + 3) { padding-left: 1rem; border-left: 1px solid var(--rule); }
}
/* the Salary headline's hero sparkline sits beside the big number, not under the note (the payday cards need the height) */
@media (min-width: 1101px) {
  #s-headline .stat { padding-bottom: clamp(0.25rem, 1vh, 0.75rem); position: relative; }
  #s-headline .stat .spark { position: absolute; right: 1.125rem; top: calc(clamp(0.5rem, 1.6vh, 1rem) + 1.5rem); width: 42%; margin: 0; }
}
@media (max-width: 720px) {
  .pc.has-x { display: block; }
  .pc + .pc { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 0.5rem; padding-top: 0.75rem; }
  .stat .v .multi { white-space: nowrap; }
  .pc.has-x .pc-x { margin-top: 0.375rem; padding: 0.4375rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .pc.has-x .pc-x::before, .pc.has-x .pc-x::after { display: none; }
  .pc.has-x .pcx-main { justify-content: center; }
  .pc.has-x .pcx-src { text-align: center; }
}

/* ---------- the plan's spending simulator (js/plan-sim.js): a sandbox over the plan, never saved ---------- */
.ps-open { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0.625rem 0 0.25rem; padding: 0.625rem 0.875rem; border: 1px dashed var(--ink); border-radius: 0.5rem; background: var(--paper-3); color: var(--ink); font-size: 0.75rem; letter-spacing: .03em; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.ps-open b { flex: none; padding: 0.1875rem 0.5rem; border-radius: 1rem; background: #1FA37A; color: #fff; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 0.6875rem; }
.ps-open:hover { background: #fff; border-style: solid; }
html.ps-lock, html.ps-lock body { overflow: hidden; }
.ps-veil { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 3vh 1rem; background: rgba(22, 19, 15, .45); overflow-y: auto; overscroll-behavior: contain; }
.ps-veil.open { display: flex; animation: psIn .2s ease-out; }
@keyframes psIn { from { opacity: 0; } }
.ps { width: min(62rem, 100%); background: var(--paper); border: 1px solid var(--ink); border-radius: 0.75rem; box-shadow: 0.5rem 0.5rem 0 rgba(22, 19, 15, .25); padding: 1.125rem 1.25rem 1rem; }
.ps-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; }
.ps-top small { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: #0E7A58; }
.ps-top h3 { margin: 0.125rem 0 0; font: 400 clamp(1.5rem, 3vw, 2.125rem)/1.1 var(--serif); }
.ps-x { flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-3); font-size: 1rem; cursor: pointer; }
.ps-x:hover { background: var(--ink); color: var(--paper); }
.ps-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0.75rem 0 0.5rem; }
.ps-f small { display: block; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ps-f b { display: block; font: 400 clamp(1.375rem, 2.6vw, 2rem)/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ps-f.up b { color: #0E7A58; } .ps-f.down b { color: #B8330F; }
.ps-d { display: inline-block; margin-top: 0.125rem; font: 600 0.75rem var(--mono); font-variant-numeric: tabular-nums; }
.ps-d.up { color: #0E7A58; } .ps-d.dn { color: #B8330F; } .ps-d.z { color: var(--ink-2); font-weight: 400; }
.ps-chart { display: block; max-width: 100%; height: auto; }
.ps-close { stroke: #B8330F; stroke-width: 1.2; stroke-dasharray: 4 3; }
.ps-plan { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .7; }
.ps-sim { fill: none; stroke: #1FA37A; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .ps-sim.bad { stroke: #B8330F; }
.ps-end { fill: #1FA37A; stroke: #fff; stroke-width: 2; } .ps-end.bad { fill: #B8330F; }
.ps-ax { font: 500 11px var(--mono); fill: var(--ink-2); } .ps-ax.b { font-weight: 700; fill: var(--ink); }
.ps-lgd { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.6875rem; color: var(--ink-2); }
.ps-lgd i { display: inline-block; width: 1.25rem; height: 0; margin-right: 0.375rem; vertical-align: middle; border-top: 2.5px solid #1FA37A; }
.ps-lgd i.plan { border-top: 1.5px dashed var(--ink-2); } .ps-lgd i.cl { border-top: 1.5px dashed #B8330F; }
.ps-notes { list-style: none; margin: 0.625rem 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8125rem; line-height: 1.4; }
.ps-notes li { padding: 0.3125rem 0.625rem; border-radius: 0.375rem; }
.ps-notes .ok { background: rgba(31, 163, 122, .1); } .ps-notes .bad { background: rgba(184, 51, 15, .1); color: #8E2A0C; } .ps-notes .warn { background: rgba(245, 183, 0, .16); }
.ps-mode { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.625rem; padding: 0; border: 0; }
.ps-mode legend { width: 100%; margin-bottom: 0.375rem; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ps-mode label { position: relative; cursor: pointer; }
.ps-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ps-mode span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.875rem; border: 1px solid var(--ink); border-radius: 1.25rem; font-size: 0.8125rem; background: var(--paper-3); }
.ps-mode input:checked + span { background: var(--ink); color: var(--paper); }
.ps-mode input:focus-visible + span { outline: 2px solid var(--tomato); outline-offset: 2px; }
.ps-pre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; font-size: 0.6875rem; color: var(--ink-2); }
.ps-pre button { min-height: 2rem; padding: 0.25rem 0.625rem; border: 1px dashed var(--ink-2); border-radius: 1rem; background: none; font: inherit; letter-spacing: .03em; color: var(--ink); cursor: pointer; }
.ps-pre button:hover { border-style: solid; background: var(--paper-3); }
.ps-pre button.rs { border-style: solid; }
.ps-rows { border-top: 2px solid var(--ink); }
.ps-r { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.5rem 1rem; align-items: center; padding: 0.5rem 0.25rem; border-bottom: 1px dotted var(--rule); }
.ps-r.pin { background: rgba(255, 91, 46, .07); box-shadow: inset 3px 0 0 var(--tomato); }
.ps-r.moved { background: rgba(11, 110, 117, .07); box-shadow: inset 3px 0 0 #0B6E75; }
.ps-r.neg { background: rgba(184, 51, 15, .12); }
.ps-m b { font: 600 0.875rem var(--mono); }
.ps-m .now { margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 1rem; background: var(--tomato); color: #fff; font: 600 0.625rem var(--mono); font-style: normal; text-transform: uppercase; vertical-align: 1px; }
.ps-m small { display: block; font-size: 0.6875rem; color: var(--ink-2); }
.ps-ctl { display: flex; align-items: center; gap: 0.375rem; }
.ps-step { flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-3); font: 500 1.125rem var(--mono); line-height: 1; cursor: pointer; touch-action: manipulation; }
.ps-step:hover { background: var(--ink); color: var(--paper); }
.ps-range { flex: 1; min-width: 4rem; accent-color: var(--tomato); height: 2.25rem; cursor: pointer; }
.ps-in { flex: none; display: inline-flex; align-items: center; gap: 1px; padding: 0 0.375rem; border: 1px solid var(--ink); border-radius: 0.375rem; background: #fff; }
.ps-in span { font: 500 0.8125rem var(--mono); color: var(--ink-2); }
.ps-num { width: 5.25rem; min-height: 2.125rem; border: 0; background: none; font: 600 0.9375rem var(--mono); font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.ps-num::-webkit-outer-spin-button, .ps-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-out { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.75rem; align-items: center; }
.ps-k { font-size: 0.6875rem; color: var(--ink-2); line-height: 1.35; }
.ps-v { text-align: right; } .ps-v small { display: block; font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ps-v b { font: 400 0.9375rem var(--sans); font-variant-numeric: tabular-nums; }
.ps-r.neg .ps-v b { color: #B8330F; }
.ps-undo { width: 2rem; height: 2rem; border: 1px solid var(--rule); border-radius: 50%; background: none; cursor: pointer; font-size: 0.875rem; }
.ps-undo:hover { border-color: var(--ink); }
.ps-foot { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--ink-2); line-height: 1.5; }
body.privacy .ps .amt, body.privacy .ps-d, body.privacy .ps-num, body.privacy .ps-ax.b { filter: blur(6px); }
@media (max-width: 720px) {
  .ps-veil { padding: 0; }
  .ps-veil.open { display: block; }
  .ps { width: 100%; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 0 0.875rem calc(1rem + env(safe-area-inset-bottom)); }
  /* the title and the two running totals stay on screen while the months scroll under them */
  .ps-dock { position: sticky; top: 0; z-index: 2; margin: 0 -0.875rem; padding: 0.75rem 0.875rem 0; background: var(--paper); box-shadow: 0 0.375rem 0.625rem -0.5rem rgba(22, 19, 15, .3); }
  .ps-top small { display: block; max-width: 15rem; }
  .ps-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; padding: 0.5rem 0; }
  .ps-figs .ps-f:nth-child(3) { display: none; }
  .ps-r { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; padding: 0.75rem 0.25rem; }
  .ps-m { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem; }
  .ps-m small { display: inline; }
  .ps-out { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.5rem; }
  .ps-open { font-size: 0.6875rem; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ps-veil.open { animation: none; } }