/* Expense log (Page Lemon app template): Holbeck Yard Architects' expense claims, drawn as an architect's drawing sheet
   (art direction docs/templates/app-art-direction-2026-10-23.md, Family D). Cyanotype blue is the one loud colour, on
   drafting white with a trace-blue grid; graphite text; red pen for queries and the Checked stamp; approved green.
   Type: IBM Plex Sans Condensed for words, IBM Plex Mono for every figure and label. Every page ends on a title block;
   on Home the title block holds the month's totals. The kit (kit.css, kit.js) keeps behaviour, layout and the account
   parts; all of the look is here (prefix ex-). The public page (body.ex-pub) does not load the kit. */
:root {
  --ex-blue: #1b4fbf;        /* Cyanotype: white on it 7.2 */
  --ex-blue-deep: #143d96;
  --ex-on-blue: #ffffff;
  --ex-on-blue-2: #d6e2ff;   /* on blue 5.5 */
  --ex-paper: #ffffff;
  --ex-paper-2: #f3f6fb;
  --ex-trace: #e8eef7;       /* grid lines; blue on it 6.2 */
  --ex-ink: #3a3d42;         /* Graphite: 10.9 on white */
  --ex-ink-strong: #1f2125;
  --ex-muted: #5b616b;       /* 6.2 on white, 5.8 on paper-2 */
  --ex-rule: #c9d3e3;
  --ex-rule-strong: #3a3d42;
  --ex-red: #d52f25;         /* Red pen: 4.9 on white */
  --ex-red-soft: #fdecea;
  --ex-green: #17734a;       /* Approved: 5.9 on white */
  --ex-green-soft: #e3f3ea;
  --ex-amber: #8a5a00;       /* 5.9 on white */
  --ex-shadow: 0 1px 0 rgba(31, 33, 37, .08), 0 10px 24px -12px rgba(20, 40, 90, .28);
  /* the blueprint field (public hero, welcome art) and the paper receipt keep their colours in both themes */
  --ex-field: #1b4fbf;
  --ex-field-ink: #ffffff;   /* 7.2 on the field */
  --ex-field-ink-2: #d6e2ff; /* 5.5 on the field */
  --ex-field-deep: #143d96;
  --ex-field-shade: #0b1a33;
  --ex-field-g: rgba(255, 255, 255, .1);
  --ex-field-G: rgba(255, 255, 255, .2);
  --ex-field-line: rgba(255, 255, 255, .35);
  --ex-rcpt: #ffffff;
  --ex-rcpt-ink: #3a3d42;
  --ex-rcpt-muted: #5b616b;
  --ex-pin: #d52f25;
  --ex-band: #1f2125;
  --ex-band-ink: #ffffff;
  --ex-band-muted: #c8d0dc;  /* 11.6 on the band */
  --ex-band-red: #ff8a7e;    /* 7.0 on the band */
  --ex-band-line: rgba(255, 255, 255, .3);
  --ex-btn-shadow: #0f2e73;  /* the offset shadow under the kit buttons */
  --ex-sans: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --ex-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  /* the kit's tokens, mapped */
  --k-brand: var(--ex-blue);
  --k-brand-ink: #ffffff;
  --k-brand-soft: #e3ebfb;
  --k-hero: var(--ex-blue);
  --k-hero-ink: #ffffff;
  --k-gold: var(--ex-amber);
  --k-bg: var(--ex-paper);
  --k-surface: var(--ex-paper);
  --k-surface-2: var(--ex-paper-2);
  --k-line: var(--ex-rule);
  --k-line-strong: #8d98aa;
  --k-text: var(--ex-ink);
  --k-muted: var(--ex-muted);
  --k-faint: var(--ex-muted);
  --k-ok: var(--ex-green);
  --k-ok-soft: var(--ex-green-soft);
  --k-warn: var(--ex-red);
  --k-warn-soft: var(--ex-red-soft);
  --k-danger: var(--ex-red);
  --k-font: var(--ex-sans);
  --k-font-display: var(--ex-sans);
  --k-r-s: 2px; --k-r-m: 3px; --k-r-l: 4px; --k-r-xl: 4px; --k-r-pill: 3px;
  --k-shadow-1: none; --k-shadow-2: var(--ex-shadow); --k-shadow-3: var(--ex-shadow);
  --k-max: 1240px;
}
@media (prefers-color-scheme: dark) {
  /* Dark is the blueprint itself: deep cyanotype paper, pale blue lines, warm red pen. */
  :root {
    --ex-blue: #8fb0ff;        /* on night 8.1 */
    --ex-blue-deep: #b9cdff;
    --ex-on-blue: #0b1a33;     /* on light blue 8.1 */
    --ex-on-blue-2: #1d3566;
    --ex-paper: #0b1630;
    --ex-paper-2: #10234a;
    --ex-trace: #15294f;
    --ex-ink: #e8eef7;         /* 14.9 */
    --ex-ink-strong: #ffffff;
    --ex-muted: #9fb0cc;       /* 7.9 on night, 6.8 on paper-2 */
    --ex-rule: #25406f;
    --ex-rule-strong: #c8d6ee;
    --ex-red: #ff7b6e;         /* 6.9 */
    --ex-red-soft: #3a1d2a;
    --ex-green: #5cd69a;       /* 9.5 */
    --ex-green-soft: #12352f;
    --ex-amber: #ffc76a;
    --ex-shadow: 0 0 0 1px #25406f, 0 14px 30px -14px rgba(0, 0, 0, .7);
    --ex-field: #1b4fbf;
    --ex-band: #050d1c;
    --ex-btn-shadow: #000000;
    --k-brand-ink: #0b1a33;
    --k-brand-soft: #16305e;
    --k-hero: #143d96;
    --k-hero-ink: #ffffff;
    --k-line-strong: #4a6496;
  }
}

/* ---------- shared pieces (public page and app) ---------- */
body.ex-pub, body.ex { font-family: var(--ex-sans); color: var(--ex-ink); background: var(--ex-paper); }
.ex-fig, .ex .k-num { font-family: var(--ex-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ex-tag { font: 500 .75rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.ex-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ex-i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-red { color: var(--ex-red); }

/* Status glyphs (Linear-style): a circle that fills as a claim moves. Shape carries the state, never colour alone. */
.ex-glyph { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--ex-muted); }
[data-k-state="new"] > .ex-glyph, .ex-glyph[data-k-state="new"] { border-style: dashed; border-color: var(--ex-blue); }
[data-k-state="active"] > .ex-glyph, .ex-glyph[data-k-state="active"] { border-color: var(--ex-red); background: radial-gradient(circle, var(--ex-red) 0 3px, transparent 3.5px); }
[data-k-state="ok"] > .ex-glyph, .ex-glyph[data-k-state="ok"] { border-color: var(--ex-green); background: linear-gradient(90deg, var(--ex-green) 50%, transparent 50%); }
[data-k-state="done"] > .ex-glyph, .ex-glyph[data-k-state="done"] { border-color: var(--ex-green); background: var(--ex-green); }
[data-k-state="done"] > .ex-glyph::after, .ex-glyph[data-k-state="done"]::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--ex-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
[data-k-state="off"] > .ex-glyph, .ex-glyph[data-k-state="off"] { border-color: var(--ex-muted); background: linear-gradient(135deg, transparent 45%, var(--ex-muted) 45% 58%, transparent 58%); }

/* The title block: the drawing sheet's signature, bottom right of every page. */
.ex-tblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-tblock > div { padding: 10px 14px 12px; border-right: 1px solid var(--ex-rule-strong); border-bottom: 1px solid var(--ex-rule-strong); margin: -1px -1px 0 0; min-width: 0; }
.ex-tblock dt, .ex-tb-k { display: block; font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.ex-tblock dd { margin: 4px 0 0; font-weight: 500; font-size: .9375rem; overflow-wrap: anywhere; }
.ex-tblock a { color: inherit; }

/* Buttons */
.ex-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 2px solid var(--ex-blue); border-radius: 3px; background: var(--ex-blue); color: var(--ex-on-blue); font: 600 1.0625rem/1 var(--ex-sans); letter-spacing: .01em; text-decoration: none; box-shadow: 3px 3px 0 var(--ex-ink-strong); transition: transform .12s ease, box-shadow .12s ease; }
.ex-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ex-ink-strong); }
.ex-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ex-ink-strong); }
.ex-btn-s { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.ex-btn-line { background: transparent; color: var(--ex-ink); border-color: var(--ex-ink); }
.ex-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
:is(.ex-pub, .ex) :focus-visible { outline: 3px solid var(--ex-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ex-btn, .ex-btn:hover, .ex-btn:active { transition: none; transform: none; } }

/* ---------- the public page ---------- */
body.ex-pub { margin: 0; font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ex-pub *, .ex-pub *::before, .ex-pub *::after { box-sizing: border-box; }
.ex-pub img { display: block; max-width: 100%; height: auto; }
.ex-pub h1, .ex-pub h2, .ex-pub h3, .ex-pub p { margin: 0; }
.ex-pub .skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ex-paper); color: var(--ex-ink); padding: 8px 14px; }
.ex-pub .skip:focus { left: 8px; }
.ex-pub-wrap, .ex-pub-top, .ex-hero, .ex-pub-sec, .ex-band-line, .ex-pub-end, .ex-pub-foot { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* Blueprint field: cyanotype with a fine and a major grid */
.ex-blue { overflow-x: clip; background-color: var(--ex-field); color: var(--ex-field-ink); background-image: linear-gradient(var(--ex-field-G) 1px, transparent 1px), linear-gradient(90deg, var(--ex-field-G) 1px, transparent 1px), linear-gradient(var(--ex-field-g) 1px, transparent 1px), linear-gradient(90deg, var(--ex-field-g) 1px, transparent 1px); background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; background-position: -1px -1px; }
.ex-blue .ex-btn { box-shadow: 3px 3px 0 var(--ex-field-shade); }
.ex-btn-paper { background: var(--ex-field-ink); border-color: var(--ex-field-ink); color: var(--ex-field-deep); }
.ex-btn-ghost { background: transparent; border-color: var(--ex-field-ink); color: var(--ex-field-ink); }
.ex-pub-top { display: flex; align-items: center; gap: 20px; min-height: 72px; border-bottom: 1px solid var(--ex-field-line); }
.ex-mark { display: flex; align-items: center; gap: 12px; color: var(--ex-field-ink); text-decoration: none; min-width: 0; }
.ex-mark img { width: 34px; height: 34px; border-radius: 4px; box-shadow: 0 0 0 2px var(--ex-field-ink); }
.ex-mark b { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.1; }
.ex-mark small { display: block; font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ex-field-ink-2); }
.ex-pub-links { display: none; gap: 28px; margin-left: auto; font: 500 .8125rem/1 var(--ex-mono); letter-spacing: .08em; text-transform: uppercase; }
.ex-pub-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ex-field-ink); text-decoration: none; padding: 14px 0; }
.ex-pub-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ex-pub-top > .ex-btn { margin-left: auto; white-space: nowrap; flex: none; }
.ex-hero { display: grid; gap: 36px; padding-top: 40px; padding-bottom: 0; }
.ex-hero .ex-tag { color: var(--ex-field-ink-2); }
.ex-hero h1 { margin-top: 18px; padding-bottom: .12em; font-weight: 600; font-size: clamp(3.4rem, 2.2rem + 6.4vw, 8.5rem); line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.ex-hero h1 em { display: block; padding-bottom: .06em; font-style: italic; font-weight: 500; color: var(--ex-field-ink-2); margin-top: .08em; }
.ex-pub .ex-hero-lead { margin-top: 28px; max-width: 34em; font-size: 1.1875rem; color: var(--ex-field-ink); }
.ex-hero .ex-btn-row { margin-top: 30px; }
.ex-pub .ex-hero-help { margin-top: 14px; font: 400 13px/1.4 var(--ex-mono); color: #E8EEF7; }
/* The plate: a receipt pinned to the sheet, dimensioned, circled and stamped */
.ex-plate { margin: 0; position: relative; }
.ex-plate-sheet { position: relative; margin: 0 auto; max-width: 440px; padding: 34px 30px 66px 64px; }
.ex-rcpt { position: relative; margin-top: 30px; background: var(--ex-rcpt); color: var(--ex-rcpt-ink); padding: 30px 28px 46px; transform: rotate(-3deg); font-family: var(--ex-mono); box-shadow: 10px 14px 0 color-mix(in srgb, var(--ex-field-shade) 35%, transparent); clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 97%, 90% 100%, 85% 97%, 80% 100%, 75% 97%, 70% 100%, 65% 97%, 60% 100%, 55% 97%, 50% 100%, 45% 97%, 40% 100%, 35% 97%, 30% 100%, 25% 97%, 20% 100%, 15% 97%, 10% 100%, 5% 97%, 0 100%); }
.ex-pin { position: absolute; top: 10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ex-pin); box-shadow: inset -3px -3px 0 color-mix(in srgb, var(--ex-field-shade) 30%, transparent); }
.ex-rcpt-h { font-weight: 600; font-size: clamp(1.125rem, .9rem + 1vw, 1.5rem); letter-spacing: .1em; text-transform: uppercase; text-align: center; margin-top: 8px !important; }
.ex-rcpt-s { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ex-rcpt-muted); text-align: center; margin: 4px 0 20px !important; }
.ex-rcpt-l, .ex-rcpt-t { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; padding: 3px 0; }
.ex-rcpt-t { margin-top: 18px !important; padding-top: 14px; border-top: 2px dashed var(--ex-rcpt-ink); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; }
.ex-ring { position: absolute; right: 2px; bottom: 22px; width: 62%; pointer-events: none; }
.ex-stamp { position: absolute; right: -14px; top: -10px; width: 40%; max-width: 180px; transform: rotate(9deg); }
.ex-stamp { background: color-mix(in srgb, var(--ex-rcpt) 92%, transparent); border-radius: 6px; }
.ex-dim { position: absolute; font: 500 .6875rem/1 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-field-ink); }
.ex-dim-v { left: 18px; top: 40px; bottom: 74px; width: 20px; border-left: 2px solid var(--ex-field-ink); }
.ex-dim-v::before, .ex-dim-v::after, .ex-dim-h::before, .ex-dim-h::after { content: ""; position: absolute; background: var(--ex-field-ink); }
.ex-dim-v::before, .ex-dim-v::after { left: -9px; width: 16px; height: 2px; }
.ex-dim-v::before { top: 0; } .ex-dim-v::after { bottom: 0; }
.ex-dim-v span { position: absolute; left: 10px; top: 50%; white-space: nowrap; transform: rotate(-90deg) translate(-50%, 0); transform-origin: 0 0; }
.ex-dim-h { left: 64px; right: 30px; bottom: 26px; height: 20px; border-top: 2px solid var(--ex-field-ink); text-align: center; }
.ex-dim-h::before, .ex-dim-h::after { top: -9px; width: 2px; height: 16px; }
.ex-dim-h::before { left: 0; } .ex-dim-h::after { right: 0; }
.ex-dim-h span { display: inline-block; padding-top: 8px; }
.ex-call { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ex-field-ink); border-radius: 50%; font: 600 .8125rem/1 var(--ex-mono); color: var(--ex-field-ink); background: var(--ex-field); }
.ex-call-1 { left: 44px; top: 20px; }
.ex-call-2 { right: 14px; bottom: 54px; }
.ex-tblock-blue { grid-column: 1 / -1; margin: 8px 0 0; border-color: var(--ex-field-ink); border-bottom: 0; background: transparent; color: var(--ex-field-ink); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-tblock-blue > div { border-color: var(--ex-field-ink); }
.ex-tblock-blue dt { color: var(--ex-field-ink-2); }
@media (min-width: 720px) { .ex-tblock-blue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ex-pub-wrap, .ex-pub-top, .ex-hero, .ex-pub-sec, .ex-band-line, .ex-pub-end, .ex-pub-foot { padding-left: 48px; padding-right: 48px; }
  .ex-pub-links { display: flex; }
  .ex-pub-top > .ex-btn { margin-left: 12px; }
  .ex-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px 56px; padding-top: 56px; }
  .ex-plate-sheet { max-width: 540px; padding-right: 10px; }
  .ex-rcpt { padding: 40px 36px 56px; }
  .ex-rcpt-h { font-size: 1.875rem; }
  .ex-rcpt-l { font-size: 1.0625rem; padding: 5px 0; }
  .ex-rcpt-t { font-size: 1.5rem; }
  .ex-tblock-blue { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 28px; }
}

/* Sheet sections under the hero */
.ex-sheet-pub { background-color: var(--ex-paper); background-image: linear-gradient(var(--ex-trace) 1px, transparent 1px), linear-gradient(90deg, var(--ex-trace) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; padding: 24px 0 8px; }
.ex-pub-sec { padding-top: 56px; padding-bottom: 32px; }
.ex-sec-head { display: grid; gap: 8px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px solid var(--ex-rule-strong); }
.ex-sec-head .ex-tag { color: var(--ex-blue); }
.ex-sec-head h2 { font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4rem); line-height: .95; letter-spacing: -.03em; color: var(--ex-ink-strong); }
.ex-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.ex-flow li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 22px 0; border-bottom: 1px solid var(--ex-rule); }
.ex-flow-n { grid-row: span 3; font: 500 4.5rem/.8 var(--ex-mono); letter-spacing: -.06em; color: var(--ex-blue); }
.ex-flow .ex-glyph { margin-top: 4px; }
.ex-flow h3 { font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--ex-ink-strong); }
.ex-flow p { color: var(--ex-muted); max-width: 32em; }
@media (min-width: 900px) {
  .ex-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-flow li { grid-template-columns: 1fr; padding: 0 28px 0 0; border-bottom: 0; }
  .ex-flow li + li { padding-left: 28px; border-left: 1px solid var(--ex-rule); }
  .ex-flow-n { grid-row: auto; font-size: 6.5rem; }
  .ex-flow li:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: -9px; width: 16px; height: 16px; border-top: 2px solid var(--ex-blue); border-right: 2px solid var(--ex-blue); transform: rotate(45deg); background: var(--ex-paper); z-index: 1; }
}

/* The app at full size, with drawing notes */
.ex-demo-grid { display: grid; gap: 28px; }
.ex-mock { border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); box-shadow: 12px 12px 0 var(--ex-trace); overflow: hidden; }
.ex-mock-bar { display: flex; gap: 18px; overflow: hidden; white-space: nowrap; padding: 0 16px; background: var(--ex-blue); color: var(--ex-on-blue); font: 500 .75rem/44px var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 520px) { .ex-mock-bar span:nth-child(n+4) { display: none; } }
.ex-mock-bar span:first-child { color: var(--ex-blue); background: var(--ex-paper); padding: 0 12px; margin-left: -4px; }
.ex-mock-body { padding: 20px 18px 22px; }
.ex-tag-ink { color: var(--ex-muted); }
.ex-mock-h { margin: 6px 0 16px !important; font-weight: 600; font-size: 2.25rem; letter-spacing: -.03em; line-height: 1; color: var(--ex-ink-strong); }
.ex-tblock-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-tblock-home .ex-tb-main { grid-column: 1 / -1; }
.ex-tblock-home b { display: block; margin-top: 4px; font-size: 1.25rem; font-weight: 500; color: var(--ex-ink-strong); }
.ex-tblock-home .ex-fig-xl { font-size: 3.25rem; line-height: 1; letter-spacing: -.05em; }
.ex-tb-s { font: 400 .8125rem/1.3 var(--ex-mono); color: var(--ex-muted); }
.ex-mock-rows { margin-top: 16px; }
.ex-mock-rows p { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--ex-rule); font-weight: 500; }
.ex-mock-rows small { display: block; font-weight: 400; font-size: .8125rem; color: var(--ex-muted); }
.ex-mock-rows small.ex-red { color: var(--ex-red); }
.ex-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: center; }
.ex-notes li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.ex-notes b { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ex-blue); border-radius: 50%; font: 600 1rem/1 var(--ex-mono); color: var(--ex-blue); }
.ex-notes strong { display: block; font-weight: 600; font-size: 1.25rem; color: var(--ex-ink-strong); line-height: 1.2; margin-bottom: 4px; }
.ex-notes span { color: var(--ex-muted); }
@media (min-width: 900px) { .ex-demo-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; } .ex-mock-body { padding: 28px 32px 30px; } .ex-tblock-home { grid-template-columns: 2fr 1fr 1fr; } .ex-tblock-home .ex-tb-main { grid-column: auto; } }

/* Schedule of allowances */
.ex-sched { border-top: 2px solid var(--ex-rule-strong); }
.ex-sched-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 2px; border-bottom: 1px solid var(--ex-rule); background: color-mix(in srgb, var(--ex-paper) 88%, transparent); }
.ex-sched-r > :first-child { font-weight: 600; font-size: 1.1875rem; color: var(--ex-ink-strong); }
.ex-sched-r > .ex-fig { text-align: right; font-weight: 500; color: var(--ex-blue); }
.ex-sched-r > :last-child { grid-column: 1 / -1; color: var(--ex-muted); }
.ex-sched-head { display: none; }
.ex-sched-no > :first-child, .ex-sched-no > .ex-fig { color: var(--ex-red); }
.ex-sched-no > :last-child { text-decoration: line-through; text-decoration-color: var(--ex-red); text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .ex-sched-r { grid-template-columns: 220px 220px minmax(0, 1fr); padding: 16px 4px; align-items: baseline; }
  .ex-sched-r > .ex-fig { text-align: left; font-size: 1.125rem; }
  .ex-sched-r > :last-child { grid-column: auto; }
  .ex-sched-head { display: grid; padding: 10px 4px; }
  .ex-sched-head > span, .ex-sched-head > span:first-child { font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
}

/* Deadline band */
.ex-band { background: var(--ex-band); color: var(--ex-band-ink); }
.ex-band-line { list-style: none; margin: 0 auto; display: grid; padding-top: 8px; padding-bottom: 8px; }
.ex-band-line li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px dashed var(--ex-band-line); }
.ex-band-line li:last-child { border-bottom: 0; }
.ex-band-line b { font-size: 2.25rem; font-weight: 500; line-height: 1; color: var(--ex-field-ink); }
.ex-band-line li:nth-child(2) b { color: var(--ex-band-red); }
.ex-band-line span { font: 400 .8125rem/1.4 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-band-muted); }
@media (min-width: 900px) { .ex-band-line { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-band-line li { padding: 30px 28px 30px 0; border-bottom: 0; } .ex-band-line li + li { padding-left: 28px; border-left: 1px dashed var(--ex-band-line); } .ex-band-line b { font-size: clamp(2.25rem, 1.2rem + 1.6vw, 3rem); } }

.ex-pub-end { display: grid; gap: 24px; padding-top: 64px; padding-bottom: 48px; }
.ex-pub-end h2 { margin-top: 10px; font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4rem); letter-spacing: -.03em; line-height: .95; color: var(--ex-ink-strong); }
.ex-pub-end p:not(.ex-tag) { margin-top: 14px; max-width: 36em; color: var(--ex-muted); }
@media (min-width: 900px) { .ex-pub-end { grid-template-columns: 1fr auto; align-items: end; } }
.ex-pub-foot { padding-bottom: 40px; }

/* ---------- the app (member pages: body.k-app.ex, on the kit) ---------- */
body.ex.k-app { background-color: var(--ex-paper); background-image: linear-gradient(var(--ex-trace) 1px, transparent 1px), linear-gradient(90deg, var(--ex-trace) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; font-size: 1rem; }
.ex.k-app :focus-visible { outline: 3px solid var(--ex-red); outline-offset: 2px; border-radius: 2px; }
.ex.k-app h1, .ex.k-app h2, .ex.k-app h3 { letter-spacing: -.02em; }
/* Top bar: the sheet's header strip */
.ex.k-app .k-top { background: var(--ex-paper); border-bottom: 2px solid var(--ex-rule-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ex.k-app .k-brand { font-weight: 600; font-size: 1.0625rem; color: var(--ex-ink-strong); }
.ex.k-app .k-brand img { border-radius: 3px; }
.ex.k-app .k-brand > span::after { content: "Expenses"; display: block; font: 500 .625rem/1.3 var(--ex-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ex-muted); }
.ex.k-app .k-avatar { border-radius: 3px; background: var(--ex-blue); color: var(--ex-on-blue); font-family: var(--ex-mono); font-weight: 600; }
.ex.k-app .k-top a.k-signin { border-radius: 3px; background: var(--ex-blue); color: var(--ex-on-blue); }
/* Navigation: numbered sheets of a drawing set */
.ex.k-app .k-tabs { counter-reset: sheet; background: var(--ex-paper); border-top: 2px solid var(--ex-rule-strong); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 0; }
.ex.k-app .k-tabs > a:not(.k-tabs-brand) { counter-increment: sheet; border-radius: 0; min-height: 60px; gap: 3px; padding: 8px 2px 6px; font: 500 .6875rem/1.1 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-muted); max-width: none; }
.ex.k-app .k-tabs > a:not(.k-tabs-brand) + a { border-left: 1px solid var(--ex-rule); }
.ex.k-app .k-tabs > a:not(.k-tabs-brand)::before { content: counter(sheet, decimal-leading-zero) / ""; font: 600 .625rem/1 var(--ex-mono); letter-spacing: .1em; opacity: 1; }
.ex.k-app .k-tabs > a .k-i { width: 20px; height: 20px; stroke-width: 1.6; }
.ex.k-app .k-tabs > a[aria-current="page"] { background: var(--ex-blue); color: var(--ex-on-blue); }
.ex.k-app .k-tabs > a[aria-current="page"] .k-i { stroke-width: 2; }
@media (min-width: 1024px) {
  .ex.k-app .k-top { border-bottom: 0; }
  .ex.k-app .k-tabs { background: var(--ex-blue); border-top: 0; border-bottom: 0; padding: 0 var(--k-gutter); }
  .ex.k-app .k-tabs > a:not(.k-tabs-brand) { flex-direction: row; gap: 10px; min-height: 52px; padding: 0 22px; font-size: .8125rem; letter-spacing: .1em; color: var(--ex-on-blue); }
  .ex.k-app .k-tabs > a:not(.k-tabs-brand) + a { border-left: 1px solid color-mix(in srgb, var(--ex-on-blue) 30%, transparent); }
  .ex.k-app .k-tabs > a:not(.k-tabs-brand):hover { background: color-mix(in srgb, var(--ex-on-blue) 12%, transparent); color: var(--ex-on-blue); }
  .ex.k-app .k-tabs > a[aria-current="page"], .ex.k-app .k-tabs > a[aria-current="page"]:hover { background: var(--ex-paper); color: var(--ex-blue); box-shadow: none; }
  .ex.k-app .k-tabs > a:not(.k-tabs-brand)::before { font-size: .75rem; }
  .ex.k-app .k-main { padding-top: 12px; }
}
/* Page head: sheet number and name, then the title */
.ex.k-app .k-pagehead { padding: 8px 0 18px; margin-bottom: 22px; border-bottom: 2px solid var(--ex-rule-strong); }
.ex.k-app .k-pagehead .k-kicker { font: 500 .75rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-blue); margin-bottom: 6px; }
.ex.k-app .k-pagehead h1 { font-weight: 600; font-size: 2.75rem; line-height: .95; letter-spacing: -.035em; color: var(--ex-ink-strong); }
@media (min-width: 1024px) { .ex.k-app .k-pagehead h1 { font-size: 4.25rem; } }
.ex.k-app .k-back { font: 500 .75rem/1 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-blue); }
/* Section heads inside a page */
.ex-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ex-rule-strong); }
.ex-h h2 { font: 600 .8125rem/1.2 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-ink-strong); }
.ex-h a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .8125rem/1.2 var(--ex-mono); letter-spacing: .06em; color: var(--ex-blue); text-transform: uppercase; }
.ex-h-sub { margin-top: 32px; }
/* Kit surfaces become drawn: hairline borders, no soft cards */
.ex.k-app :is(.k-card, .k-panel, .k-sheet) { border: 1px solid var(--ex-rule-strong); border-radius: 2px; box-shadow: none; background: var(--ex-paper); }
.ex.k-app .k-panel-head { background: var(--ex-paper-2); border-bottom: 1px solid var(--ex-rule-strong); min-height: 46px; }
.ex.k-app .k-panel-head h2 { font: 600 .8125rem/1.2 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-ink-strong); }
.ex.k-app .k-panel-head a { font: 500 .75rem/1.2 var(--ex-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ex-blue); }
.ex.k-app .k-tile { border-radius: 2px; background: transparent; color: var(--ex-blue); box-shadow: inset 0 0 0 1.5px var(--ex-blue); width: 36px; height: 36px; }
.ex.k-app .k-tile .k-i { width: 20px; height: 20px; }
.ex.k-app .k-row + .k-row::before { left: 0; }
.ex.k-app .k-row-title { font-weight: 600; }
.ex.k-app .k-help { font-size: .875rem; color: var(--ex-muted); }
/* Buttons and badges */
.ex.k-app .k-btn { border-radius: 3px; background: var(--ex-blue); color: var(--ex-on-blue); font-weight: 600; letter-spacing: .01em; box-shadow: 3px 3px 0 var(--ex-btn-shadow); filter: none; }
.ex.k-app .k-btn:hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ex-btn-shadow); }
.ex.k-app .k-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ex-btn-shadow); }
.ex.k-app .k-btn-line { background: var(--ex-paper); color: var(--ex-ink); box-shadow: inset 0 0 0 2px var(--ex-ink), 3px 3px 0 var(--ex-ink-strong); }
.ex.k-app .k-btn-2 { background: var(--ex-paper-2); color: var(--ex-ink); }
.ex.k-app .k-btn-ok { background: var(--ex-green); color: var(--ex-paper); }
@media (prefers-reduced-motion: reduce) { .ex.k-app .k-btn:hover, .ex.k-app .k-btn:active { transform: none; } }
.ex.k-app .k-badge { border-radius: 2px; font: 600 .6875rem/1.1 var(--ex-mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ex.k-app .k-badge-state::before { display: none; }
.ex.k-app [data-k-state="new"] .k-badge-state { color: var(--ex-blue); background: transparent; }
.ex.k-app [data-k-state="active"] .k-badge-state { color: var(--ex-red); background: var(--ex-paper); }
.ex.k-app [data-k-state="ok"] .k-badge-state { color: var(--ex-green); background: var(--ex-green-soft); }
.ex.k-app [data-k-state="done"] .k-badge-state { color: var(--ex-green); background: var(--ex-green-soft); }
.ex.k-app [data-k-state="off"] .k-badge-state { color: var(--ex-muted); background: transparent; text-decoration: line-through; }
/* Fields */
.ex.k-app .k-field > label, .ex.k-app .k-label { font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.ex.k-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { border-radius: 2px; border: 1.5px solid var(--ex-rule-strong); background-color: var(--ex-paper); color: var(--ex-ink); font-family: var(--ex-sans); }
.ex.k-app input[type="number"], .ex.k-app input[type="date"] { font-family: var(--ex-mono); }
.ex.k-app :is(input, select, textarea):focus { border-color: var(--ex-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 25%, transparent); outline: none; }
/* Footer: the title block */
.ex.k-app .k-foot.ex-foot { display: block; border-top: 0; padding-top: 0; margin-top: 56px; color: var(--ex-ink); font-size: .875rem; }
.ex-foot .ex-tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-foot .ex-tblock dd { font-size: .875rem; }
@media (min-width: 1024px) { .ex-foot .ex-tblock { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: auto; max-width: 860px; } }
.ex-foot .ex-tb-links { grid-column: 1 / -1; }
.ex-foot .ex-tb-links dd { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 0; }
.ex-foot .ex-tb-links a { min-height: 44px; color: var(--ex-blue); }
.ex-pub-foot .ex-tblock { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ex-pub-foot .ex-tblock dd { font-size: .875rem; overflow-wrap: normal; }
.ex-foot .ex-tblock .ex-tb-sheet dd { font-family: var(--ex-mono); font-weight: 600; font-size: 1.125rem; color: var(--ex-blue); }

/* Home: the title block at screen scale holds the month */
.ex-month { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-month > * { padding: 14px 16px 16px; border-right: 1px solid var(--ex-rule-strong); border-bottom: 1px solid var(--ex-rule-strong); margin: 0 -1px -1px 0; min-width: 0; }
.ex-month .ex-tb-k { margin-bottom: 6px; }
.ex-cell-owed { grid-column: 1 / -1; position: relative; padding: 18px 18px 22px; }
.ex-cell-owed .ex-tb-k { color: var(--ex-blue); }
.ex-big { display: block; font: 500 clamp(3.4rem, 2.6rem + 3.6vw, 6rem)/.95 var(--ex-mono); letter-spacing: -.06em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; margin: 0; }
.ex-big small { display: block; margin-top: 10px; font: 400 .875rem/1.2 var(--ex-mono); letter-spacing: .02em; color: var(--ex-muted); }
.ex-mid { font: 500 1.375rem/1.1 var(--ex-mono); letter-spacing: -.03em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; margin: 0; }
.ex-mid small { display: block; margin-top: 4px; font: 400 .75rem/1.2 var(--ex-mono); letter-spacing: .02em; color: var(--ex-muted); }
/* The month as a drawing scale: one tick a day (app.js), days gone in blue, the 20th cut-off in red, payday in green */
.ex-cut { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin: 18px 0 26px; border-bottom: 2px solid var(--ex-ink); }
.ex-day { position: relative; flex: 1; height: 8px; background: var(--ex-rule); }
.ex-day.ex-gone { background: var(--ex-blue); }
.ex-day.ex-d20 { height: 18px; background: var(--ex-red); }
.ex-day.ex-dpay { height: 18px; background: var(--ex-green); }
.ex-day.ex-today { height: 22px; box-shadow: 0 0 0 2px var(--ex-paper), 0 0 0 4px var(--ex-blue); }
.ex-day b { position: absolute; top: 26px; left: 0; white-space: nowrap; font: 500 .625rem/1 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-muted); }
.ex-day.ex-d20 b { left: 50%; transform: translateX(-50%); color: var(--ex-red); }
.ex-day.ex-dpay b { left: auto; right: 0; color: var(--ex-green); }
@media (min-width: 720px) { .ex-cell-owed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: end; } .ex-cell-owed .ex-tb-k { grid-column: 1 / -1; } .ex-cut { margin: 0 0 30px; } }
.ex-cell-act { grid-column: 1 / -1; display: grid; gap: 12px; background: var(--ex-paper-2); }
.ex-cell-act p { font-size: .875rem; color: var(--ex-muted); }
@media (min-width: 720px) {
  .ex-month { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-cell-owed { grid-column: span 4; }
  .ex-cell-act { grid-template-columns: 1fr auto; align-items: center; }
  }
/* The query: a pinned note in red pen */
.ex-query { position: relative; border: 1px solid var(--ex-rule-strong); background: var(--ex-paper); padding: 26px 18px 18px; box-shadow: 6px 6px 0 var(--ex-trace); }
.ex-query::before { content: ""; position: absolute; top: -8px; left: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--ex-red); box-shadow: inset -3px -3px 0 color-mix(in srgb, var(--ex-field-shade) 30%, transparent); }
.ex-query-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-query-top b { font: 600 1.25rem/1 var(--ex-mono); color: var(--ex-ink-strong); }
.ex-query h2, .ex-query h3 { margin-top: 12px; font-weight: 600; font-size: 1.375rem; line-height: 1.15; color: var(--ex-ink-strong); }
.ex-ask { color: var(--ex-red); font-weight: 500; }
.ex-pen { margin-top: 12px; padding: 10px 0 10px 14px; border-left: 3px solid var(--ex-red); color: var(--ex-red); font-style: italic; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.ex-pen:empty { display: none; }
.ex-query .k-btn { margin-top: 16px; }
.ex-answered { margin-top: 14px; display: flex; gap: 8px; align-items: center; font: 500 .8125rem/1.3 var(--ex-mono); color: var(--ex-green); text-transform: uppercase; letter-spacing: .06em; }
.ex-clear { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 18px; border: 1px dashed var(--ex-rule-strong); background: var(--ex-paper); }
.ex-clear img { width: 170px; }
.ex-clear b { font-weight: 600; font-size: 1.25rem; color: var(--ex-ink-strong); }
.ex-clear span { color: var(--ex-muted); font-size: .9375rem; max-width: 30ch; }
.ex-note { margin-top: 14px; font-size: .9375rem; color: var(--ex-muted); }
.ex-note a { color: var(--ex-blue); display: inline-block; padding: 10px 0; }

/* The ledger: dense, calm rows (Linear / Actual Budget) */
.ex-ledger { border-top: 2px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-lhead { display: none; }
.ex-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; grid-template-areas: "g main main amt" "g date paid st"; gap: 3px 8px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--ex-rule); color: inherit; text-decoration: none; }
a.ex-row:hover { background: var(--ex-paper-2); }
.ex-row > .ex-glyph { grid-area: g; align-self: start; margin-top: 3px; }
.ex-row-main { grid-area: main; min-width: 0; }
.ex-row-main b { display: block; font-weight: 600; font-size: 1.0625rem; color: var(--ex-ink-strong); overflow-wrap: anywhere; }
.ex-row-main small { display: block; color: var(--ex-muted); font-size: .875rem; }
.ex-row-main small:empty { display: none; }
.ex-row-date { grid-area: date; font: 400 .8125rem/1.3 var(--ex-mono); color: var(--ex-muted); white-space: nowrap; }
.ex-row-paid { grid-area: paid; font-size: .875rem; color: var(--ex-muted); }
.ex-row-paid::before { content: "· "; }
.ex-row-st { grid-area: st; justify-self: end; }
.ex-row-amt { grid-area: amt; justify-self: end; font: 500 1.125rem/1.2 var(--ex-mono); letter-spacing: -.02em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-row-amt .ex-cur { font-size: .6875rem; color: var(--ex-muted); letter-spacing: .06em; margin-left: 2px; }
.ex-ledger-r .ex-row-rcpt { grid-column: 2 / -1; }
.ex-row-rcpt a { font: 500 .75rem/1 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-blue); }
.ex-row-memo { grid-column: 2 / -1; font-size: .875rem; color: var(--ex-muted); }
.ex-row-memo:empty, .ex-row .ex-pen:empty { display: none; }
.ex-row .ex-pen { grid-column: 2 / -1; margin-top: 4px; padding: 2px 0 2px 10px; font-size: .9375rem; }
.ex-row [data-k-state="done"] .ex-pen, .ex-row[data-k-state="done"] .ex-pen { color: var(--ex-green); border-color: var(--ex-green); font-style: normal; }
@media (min-width: 1024px) {
  .ex-lhead, .ex-row { grid-template-columns: 16px minmax(0, 1fr) 120px 130px 120px 120px; grid-template-areas: "g main date paid st amt"; gap: 0 18px; }
  .ex-lhead { display: grid; padding: 9px 6px; border-bottom: 1px solid var(--ex-rule-strong); font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
  .ex-lhead span:last-child { text-align: right; }
  .ex-lhead span:first-child { grid-column: 2; }
  .ex-row { padding: 11px 6px; min-height: 56px; }
  .ex-row > .ex-glyph { align-self: center; margin-top: 0; }
  .ex-row-main { display: flex; align-items: baseline; gap: 12px; }
  .ex-row-main b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ex-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ex-row-paid::before { content: none; }
  .ex-row-st { justify-self: start; }
  .ex-row-memo, .ex-row .ex-pen { grid-column: 2 / 6; }
  .ex-ledger-r .ex-lhead, .ex-ledger-r .ex-row { grid-template-columns: 16px minmax(0, 1fr) 120px 120px 120px 110px; grid-template-areas: "g main date st amt rc"; }
  .ex-ledger-r .ex-row-rcpt { grid-area: rc; display: block; justify-self: end; font: 500 .75rem/1 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-blue); }
}
.ex-ledger-r .ex-row-paid { display: none; }
.ex-ledger .k-empty, .ex-ledger .ex-empty { border-bottom: 1px solid var(--ex-rule); }

/* Empty states with a drawing */
.ex.k-app .k-empty { padding: 28px 18px 30px; }
.ex.k-app .k-empty .k-empty-art { width: auto; height: auto; background: none; border-radius: 0; margin-bottom: 14px; }
.ex.k-app .k-empty .k-empty-art img { width: 220px; margin: 0 auto; }
.ex.k-app .k-empty h3 { font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ex-ink-strong); }
.ex.k-app .k-empty .ex-tag { color: var(--ex-red); margin-bottom: 6px; }
.ex-empty-line.ex-pad { padding: 16px; }
.ex-empty-line { padding: 16px 6px; color: var(--ex-muted); font-size: .9375rem; }

/* Claims: open claims as receipts pinned to the sheet */
.ex-claims { display: grid; gap: 18px; }
.ex-claim { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-claim[data-k-state="active"] { border-color: var(--ex-red); box-shadow: 6px 6px 0 var(--ex-red-soft); }
.ex-thumb { width: 76px; height: auto; background: var(--ex-paper-2); transform: rotate(-3deg); border: 1px solid var(--ex-rule); }
.ex-claim-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ex-claim h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: var(--ex-ink-strong); }
.ex-claim .ex-meta { margin-top: 2px; font-size: .875rem; color: var(--ex-muted); }
.ex-claim-amt { text-align: right; font: 500 1.375rem/1 var(--ex-mono); letter-spacing: -.03em; color: var(--ex-ink-strong); white-space: nowrap; }
.ex-claim-amt small { display: block; margin-top: 4px; font-size: .6875rem; color: var(--ex-muted); letter-spacing: .08em; }
.ex-claim .ex-memo { margin-top: 8px; font-size: .9375rem; }
.ex-claim .ex-memo:empty { display: none; }
.ex-seq { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ex.k-app .ex-seq .k-steps { flex: 1 1 100%; min-width: 0; margin: 0; gap: 0; }
.ex.k-app .ex-seq .k-steps li { padding: 20px 0 0; font: 500 .6875rem/1.2 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-muted); }
.ex.k-app .ex-seq .k-steps li::before { top: 6px; height: 2px; border-radius: 0; background: var(--ex-rule); }
.ex.k-app .ex-seq .k-steps li::after { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex.k-app .ex-seq .k-steps li.k-done::before, .ex.k-app .ex-seq .k-steps li.k-now::before { background: var(--ex-blue); animation: none; }
.ex.k-app .ex-seq .k-steps li.k-done::after { background: var(--ex-blue); border-color: var(--ex-blue); }
.ex.k-app .ex-seq .k-steps li.k-now::after { border-color: var(--ex-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-blue) 25%, transparent); }
.ex.k-app .ex-seq .k-steps li.k-now { color: var(--ex-ink-strong); }
.ex-claim-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.ex-claim:not([data-k-state="active"]) .ex-answer-row { display: none; }
.ex-claim-foot a:not(.k-btn), .ex-row-rcpt a { display: inline-flex; align-items: center; min-height: 44px; }
.ex-claim-foot a:not(.k-btn) { font: 500 .75rem/1.2 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-blue); }
@media (min-width: 720px) { .ex-claim { grid-template-columns: 110px minmax(0, 1fr); gap: 22px; padding: 20px 22px; } .ex-thumb { width: 110px; } }
/* Status legend */
.ex-legend { list-style: none; margin: 0; padding: 4px 16px; }
.ex-legend li { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ex-rule); font-size: .875rem; color: var(--ex-muted); }
.ex-legend li:last-child { border-bottom: 0; }
.ex-legend li b { font: 600 .75rem/1.2 var(--ex-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ex-ink-strong); }
.ex-sent { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--ex-rule); }
.ex-sent:last-child { border-bottom: 0; }
.ex-sent b { font-weight: 600; color: var(--ex-ink-strong); }
.ex-sent span { font-size: .875rem; color: var(--ex-muted); }
.ex-sent .ex-fig { font-size: .75rem; }

/* Add and Reply: the receipt viewfinder */
.ex.k-app .ex-form { padding: 22px 18px 24px; }
.ex.k-app .ex-form > * + * { margin-top: 16px; }
.ex-snap label { position: relative; display: grid; place-items: center; min-height: 190px; padding: 26px; border: 1.5px dashed var(--ex-blue); background: var(--ex-paper-2); cursor: pointer; text-align: center; color: var(--ex-blue); }
.ex-snap label::before, .ex-snap label::after { content: ""; position: absolute; width: 28px; height: 28px; border: 3px solid var(--ex-blue); }
.ex-snap label::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.ex-snap label::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.ex-snap-empty, .ex-snap-done { display: grid; justify-items: center; gap: 6px; }
.ex-snap-empty .k-i { width: 40px; height: 40px; stroke-width: 1.5; }
.ex-snap b { font-weight: 600; font-size: 1.25rem; color: var(--ex-ink-strong); text-transform: none; letter-spacing: -.01em; font-family: var(--ex-sans); }
.ex-snap span span { font: 400 .8125rem/1.3 var(--ex-mono); color: var(--ex-muted); text-transform: none; letter-spacing: 0; }
.ex-snap img { max-height: 220px; width: auto; border: 1px solid var(--ex-rule); }
.ex-snap { position: relative; }
.ex.k-app .ex-snap .ex-file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.ex-snap:focus-within label { outline: 3px solid var(--ex-red); outline-offset: 2px; }
.ex.k-app .ex-snap > label { font: inherit; letter-spacing: 0; text-transform: none; }
.ex-pair { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 420px) { .ex-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ex-sum-note { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; color: var(--ex-muted); }
/* Schedules (limits, policy) */
.ex-schedule { border-top: 2px solid var(--ex-rule-strong); }
.ex-schedule > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 2px; border-bottom: 1px solid var(--ex-rule); }
.ex-schedule b { font-weight: 600; color: var(--ex-ink-strong); }
.ex-schedule .ex-fig { text-align: right; color: var(--ex-blue); font-weight: 500; white-space: nowrap; }
.ex-schedule span:last-child { grid-column: 1 / -1; font-size: .875rem; color: var(--ex-muted); }
.ex-schedule .ex-no b, .ex-schedule .ex-no .ex-fig { color: var(--ex-red); }
.ex-schedule .ex-no span:last-child { text-decoration: line-through; text-decoration-color: var(--ex-red); }
@media (min-width: 1024px) { .ex-schedule-wide > div { grid-template-columns: 200px 170px minmax(0, 1fr); align-items: baseline; } .ex-schedule-wide .ex-fig { text-align: left; } .ex-schedule-wide span:last-child { grid-column: auto; } }
.ex-dates { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ex-blue); }
.ex-dates li { position: relative; padding: 0 0 22px 22px; }
.ex-dates li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ex-paper); border: 2px solid var(--ex-blue); }
.ex-dates li:last-child { padding-bottom: 4px; }
.ex-dates li:last-child::before { background: var(--ex-green); border-color: var(--ex-green); }
.ex-dates b { display: block; font: 500 1.375rem/1.1 var(--ex-mono); color: var(--ex-ink-strong); letter-spacing: -.02em; }
.ex-dates span { font-size: .9375rem; color: var(--ex-muted); }
.ex-aside-card { padding: 18px; border: 1px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-aside-card h2 { font: 600 .8125rem/1.2 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-ink-strong); margin-bottom: 14px; }
.ex-aside-card p { font-size: .9375rem; color: var(--ex-muted); }
.ex-aside-card p + p { margin-top: 10px; }
.ex-aside-card a { color: var(--ex-blue); }

/* Months: totals as a drawing scale */
.ex-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); margin-bottom: 28px; }
.ex-year > div { padding: 14px 14px 16px; border-right: 1px solid var(--ex-rule-strong); min-width: 0; }
.ex-year > div:last-child { border-right: 0; }
.ex-year b { display: block; font: 500 clamp(1.25rem, .9rem + 2vw, 2.75rem)/1 var(--ex-mono); letter-spacing: -.05em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; }
.ex-year > div > span { display: block; margin-top: 8px; font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-muted); }
.ex-year > div:first-child b { color: var(--ex-blue); }
.ex-gbp:not(:empty)::before { content: "£"; }
.ex-gbp:empty::before { content: "—"; color: var(--ex-muted); }
.ex-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 16px 4px; border-bottom: 1px solid var(--ex-rule); }
.ex-mrow-name { font-weight: 600; font-size: 1.25rem; color: var(--ex-ink-strong); }
.ex-mrow-total { font: 500 1.5rem/1 var(--ex-mono); letter-spacing: -.04em; color: var(--ex-ink-strong); text-align: right; }
.ex-scale { grid-column: 1 / -1; display: block; width: 100%; height: 12px; -webkit-appearance: none; appearance: none; border: 1.5px solid var(--ex-ink); border-radius: 0; background: var(--ex-paper); color: var(--ex-blue); }
.ex-scale::-webkit-progress-bar { background: var(--ex-paper); }
.ex-scale::-webkit-progress-value { background: repeating-linear-gradient(90deg, var(--ex-blue) 0 24px, var(--ex-paper) 24px 26px); }
.ex-scale::-moz-progress-bar { background: repeating-linear-gradient(90deg, var(--ex-blue) 0 24px, var(--ex-paper) 24px 26px); }
.ex-scale-s { height: 8px; }
.ex-mrow-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 .8125rem/1.3 var(--ex-mono); color: var(--ex-muted); }
.ex-crow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ex-rule); }
.ex-crow:last-child { border-bottom: 0; }
.ex-crow b { font-weight: 600; color: var(--ex-ink-strong); }
.ex-crow small { display: block; font: 400 .75rem/1.3 var(--ex-mono); color: var(--ex-muted); }
.ex-crow .ex-fig { font-weight: 500; font-size: 1.0625rem; color: var(--ex-ink-strong); }
.ex-crow .ex-scale { grid-column: 2 / -1; }

/* Account */
.ex-profile { display: flex; align-items: center; gap: 16px; padding: 18px; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-profile .k-avatar { width: 64px; height: 64px; font-size: 1.375rem; }
.ex-profile .ex-tb-k { margin-bottom: 2px; }
.ex-profile b { display: block; font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--ex-ink-strong); }
.ex-profile span span:last-child { display: block; font-size: .875rem; color: var(--ex-muted); }
.ex.k-app .k-account > p:first-child, .ex.k-app .k-account ul, .ex.k-app .k-account form:last-of-type:has(input[type="checkbox"]), .ex.k-app .k-account form:has(input[type="text"], select, textarea) { border: 1px solid var(--ex-rule-strong); border-radius: 2px; box-shadow: none; }
.ex.k-app .k-account h3 { font: 600 .75rem/1.2 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-ink-strong); }
.ex.k-app .k-account > form:not(:has(input:not([type="hidden"]), select, textarea)) > button { border: 1px solid var(--ex-rule-strong); border-radius: 2px; }
.ex.k-app .k-account button { border-radius: 2px; font-family: var(--ex-sans); }
.ex-links { border-top: 2px solid var(--ex-rule-strong); }
.ex-links a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--ex-rule); color: inherit; text-decoration: none; }
.ex-links a:hover { background: var(--ex-paper-2); }
.ex-links b { display: block; font-weight: 600; color: var(--ex-ink-strong); }
.ex-links small { display: block; font-size: .875rem; color: var(--ex-muted); overflow-wrap: anywhere; }
.ex-links .k-chev { color: var(--ex-muted); }

/* Signed out: the welcome is a blueprint sheet */
.ex.k-app .k-welcome { gap: 0; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); overflow: hidden; }
.ex.k-app .k-welcome-art { border-radius: 0; box-shadow: none; aspect-ratio: auto; max-height: 360px; background: var(--ex-field); }
.ex.k-app .k-welcome-art img { object-fit: cover; object-position: 50% 32%; max-height: 360px; }
.ex.k-app .k-welcome-art::after { display: none; }
.ex.k-app .k-welcome-art figcaption { left: 0; right: 0; bottom: 0; padding: 12px 20px; background: var(--ex-field-shade); color: var(--ex-field-ink); }
.ex.k-app .k-welcome-art figcaption { font: 500 .75rem/1.3 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; }
.ex.k-app .k-welcome > div { padding: 24px 20px 28px; }
.ex.k-app .k-welcome .k-kicker { font: 500 .75rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-blue); }
.ex.k-app .k-welcome h1 { margin-top: 8px; font-weight: 600; font-size: clamp(2.6rem, 2rem + 3vw, 4.5rem); line-height: .92; letter-spacing: -.035em; color: var(--ex-ink-strong); }
.ex.k-app .k-welcome .k-lead { color: var(--ex-muted); font-size: 1.125rem; margin-top: 14px; }
.ex-welcome-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ex-rule-strong); counter-reset: w; }
.ex-welcome-list li { counter-increment: w; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ex-rule); }
.ex-welcome-list li::before { content: counter(w, decimal-leading-zero); font: 600 .875rem/1.5 var(--ex-mono); color: var(--ex-blue); }
.ex-welcome-cta { margin-top: 24px; }
@media (min-width: 1024px) {
  .ex.k-app .k-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .ex.k-app .k-welcome-art, .ex.k-app .k-welcome-art img { max-height: none; height: 100%; min-height: 560px; }
  .ex.k-app .k-welcome-art img { object-fit: contain; padding-bottom: 44px; }
  .ex.k-app .k-welcome > div { padding: 44px 44px 40px; align-self: center; }
}

/* Toast and live status line */
.ex.k-app .k-toast, .ex.k-app [data-pl-status] { border-radius: 2px; border: 1px solid var(--ex-green); background: var(--ex-green-soft); color: var(--ex-green); font-weight: 500; }

/* The staff side (Dashboard stand-in in the gallery preview): the same drawn look */
.ex.k-app .k-staff { background: var(--ex-paper); }
.ex.k-app .k-staff-bar { background: var(--ex-band); color: var(--ex-band-ink); font-family: var(--ex-mono); letter-spacing: .04em; }
.ex.k-app .k-staff-bar button { color: var(--ex-band-ink); }
.ex.k-app .k-staff img { object-fit: contain; background: var(--ex-paper-2); }
.ex.k-app .k-staff-h { font-weight: 600; letter-spacing: -.03em; }

/* art direction 2026-10-25 */
/* Home: the title block at the foot of the sheet holds the month. Totals are the top row (Plex Mono 28px), the day
   scale under them, the sheet's fields below; the revision table sits left of it on wide screens. */
.ex.k-app .k-foot.ex-foot.ex-foot-home { display: grid; gap: 24px; align-items: end; margin-top: 48px; }
.ex-foot-home .ex-rev { order: 2; }
.ex-foot-home .ex-titleblock { order: 1; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); min-width: 0; }
.ex-foot-home .ex-titleblock > .ex-tblock { border: 0; border-top: 2px solid var(--ex-rule-strong); max-width: none; margin: 0; }
.ex-tb-month { border-bottom: 0; }
.ex-mtop { display: grid; grid-template-columns: minmax(0, 1fr); }
.ex-mcell { padding: 14px 16px 16px; border-bottom: 1px solid var(--ex-rule-strong); min-width: 0; }
.ex-mcell .ex-tb-k { margin-bottom: 8px; }
.ex-mcell-owed .ex-tb-k { color: var(--ex-blue); }
.ex-mtop .ex-mid { font: 500 28px/1.1 var(--ex-mono); letter-spacing: -.03em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; }
.ex-mtop .ex-mid-txt { font-family: var(--ex-sans); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.ex-mnote { display: block; margin-top: 6px; font: 400 .75rem/1.3 var(--ex-mono); color: var(--ex-muted); }
.ex-foot-home .ex-cut { margin: 14px 16px 26px; }
.ex-mrow-t { padding: 14px 16px 16px; border-top: 1px solid var(--ex-rule-strong); }
.ex-mrow-t .ex-tb-k { margin-bottom: 8px; }
.ex-mrow-t .ex-mid { font: 500 22px/1.1 var(--ex-mono); letter-spacing: -.03em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; }
.ex-mrow-t .ex-mid small { display: inline; margin: 0 0 0 8px; font: 400 .75rem/1.2 var(--ex-mono); color: var(--ex-muted); }
.ex-rev { min-width: 0; }
.ex-rev > .ex-tag { color: var(--ex-muted); margin-bottom: 8px; }
.ex-revt { width: 100%; border-collapse: collapse; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); font-size: .875rem; }
.ex-revt th, .ex-revt td { padding: 10px 12px; border-bottom: 1px solid var(--ex-rule-strong); text-align: left; vertical-align: top; }
.ex-revt tr:last-child th, .ex-revt tr:last-child td { border-bottom: 0; }
.ex-revt th { width: 42%; font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.ex-revt td { font-weight: 500; color: var(--ex-ink-strong); }
@media (min-width: 520px) { .ex-mtop { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-mcell { border-bottom: 0; border-right: 1px solid var(--ex-rule-strong); } .ex-mcell:last-child { border-right: 0; } }
@media (min-width: 1024px) {
  .ex.k-app .k-foot.ex-foot.ex-foot-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .ex-foot-home .ex-rev { order: 0; grid-column: 1; grid-row: 1; align-self: end; }
  .ex-foot-home .ex-titleblock { order: 0; grid-column: 2; grid-row: 1; }
  .ex-mcell { padding: 18px 20px 20px; }
  .ex-mrow-t { padding: 16px 20px 18px; }
  .ex-foot-home .ex-cut { margin: 16px 20px 30px; }
}
@media (min-width: 1280px) { .ex.k-app .k-foot.ex-foot.ex-foot-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); } }

/* Claims: a ref line, a status legend folded under the title, and the approved stamp */
.ex-ref { display: block; margin-top: 6px; font: 500 .75rem/1.3 var(--ex-mono); letter-spacing: .06em; color: var(--ex-muted); }
.ex-cur { font: 500 .75rem/1 var(--ex-mono); letter-spacing: .06em; color: var(--ex-muted); }
.ex-legend-d { margin-bottom: 22px; border: 1px solid var(--ex-rule-strong); background: var(--ex-paper); }
.ex-legend-d > summary { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 16px; background: var(--ex-paper-2); border-bottom: 1px solid var(--ex-rule-strong); font: 600 .8125rem/1.2 var(--ex-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ex-ink-strong); cursor: pointer; list-style: none; }
.ex-legend-d > summary::-webkit-details-marker { display: none; }
.ex-legend-d > summary::after { content: "+"; font: 500 1.25rem/1 var(--ex-mono); color: var(--ex-blue); }
.ex-legend-d[open] > summary::after { content: "\2212"; }
.ex-legend-d > summary:focus-visible { outline: 3px solid var(--ex-red); outline-offset: -3px; }
.ex-legend-d .ex-legend { padding: 4px 16px; }
@media (min-width: 1024px) {
  .ex-legend-d .ex-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; padding: 6px 16px; }
  .ex-legend-d .ex-legend li:nth-last-child(-n+3) { border-bottom: 0; }
}
.ex.k-app .ex-claim[data-k-row] { position: relative; }
.ex.k-app .ex-claim .ex-stamp-ok { display: none; flex: none; width: 96px; height: auto; margin-top: 4px; pointer-events: none; }
.ex.k-app .ex-claim[data-k-state="ok"] .ex-stamp-ok { display: block; }
.ex-claim[data-k-state="ok"] .ex-seq .k-steps { flex: 1 1 100%; }
@media (min-width: 720px) { .ex-claim[data-k-state="ok"] .ex-seq .k-steps { flex: 1 1 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ex.k-app .ex-claim[data-k-state="ok"] .ex-stamp-ok { animation: ex-thunk .2s ease-out both; }
}
@keyframes ex-thunk { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
.ex-claim .ex-memo + .ex-ref { margin-bottom: 0; }

/* Ledger rows with a receipt thumbnail (32 by 40) */
.ex.k-app .ex-row-main { display: block; min-width: 0; }
.ex.k-app .ex-row-main:has(> .ex-mini) { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 0 12px; }
.ex-mini { width: 32px; height: 40px; object-fit: contain; border: 1px solid var(--ex-rule); background: var(--ex-paper-2); }
.ex-row-text { display: block; min-width: 0; }
@media (min-width: 1024px) {
  .ex-row-text { display: flex; align-items: baseline; gap: 12px; }
}
/* 1024 to 1279: the merchant gets its own line, nothing cut off */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ex-ledger-r .ex-lhead, .ex-ledger-r .ex-row { grid-template-columns: 16px minmax(0, 1fr) 96px 92px 92px 72px; column-gap: 12px; }
  .ex-ledger-r .ex-row-text { display: block; }
  .ex-ledger-r .ex-row-text b { max-width: none; overflow: visible; white-space: normal; }
  .ex-ledger-r .ex-row-text small { overflow: visible; white-space: normal; }
}

/* Add and Reply: the side column stays in view; the query's receipt at 280px */
@media (min-width: 1024px) { .ex.k-app .k-sticky { position: sticky; top: 76px; } }
.ex-reply-rcpt { display: block; width: min(280px, 100%); height: auto; margin: 16px 0 0; border: 1px solid var(--ex-rule); transform: rotate(-1.5deg); background: var(--ex-paper); }
.ex-ring-u { display: block; width: 160px; height: auto; margin: 6px auto 0; }
.ex-cell-act .k-btn { justify-self: start; }

/* Months and account: small rules */
@media (max-width: 419px) {
  .ex-year { grid-template-columns: minmax(0, 1fr); }
  .ex-year > div { border-right: 0; border-bottom: 1px solid var(--ex-rule-strong); }
  .ex-year > div:last-child { border-bottom: 0; }
}
.ex-schedule .ex-ask b, .ex-schedule .ex-ask .ex-fig { color: var(--ex-red); }
.ex-schedule .ex-ask span:last-child { color: var(--ex-muted); }
.ex.k-app .k-account .k-field > label { font: 500 11px/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.ex.k-app .k-account button[type="submit"] { min-height: 48px; box-shadow: 4px 4px 0 var(--ex-btn-shadow); }

/* Receipt on the public page: the one-night line wraps evenly, never an orphan */
.ex-rcpt-s { text-wrap: balance; }

/* art direction 2026-10-25, round 2 */
/* Must-fix: the app's sticky columns clear the 52px tab bar; the sticky side columns and the pinned receipts */
@media (min-width: 1024px) { .ex.k-app .k-sticky { top: 76px; } }
/* Claims ledger, 1024 to 1279: the merchant and category sit on their own line, nothing cut off */
@media (min-width: 1024px) { .ex.k-app .ex-ledger-r .ex-row-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .ex-ledger-r .ex-row-main b, .ex-ledger-r .ex-row-main small { max-width: none; overflow: visible; white-space: normal; }
}
/* Second reply: the answered query keeps a small link to send another; the primary button is hidden */
.ex-again { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font: 500 .8125rem/1.2 var(--ex-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ex-blue); }
.ex-again[hidden] { display: none; }
/* A query that the claim_ref does not match: a full sentence, shown only when needed */
.ex-clear[hidden] { display: none; }
/* Buttons: one offset shadow colour, reduced motion wins */
.ex.k-app .k-account button[type="submit"] { min-height: 48px; }
/* Claims: receipts 140 by 190 on wide screens; the SUBMITTED node of a query in red pen; the month at a glance */
@media (min-width: 1024px) {
  .ex.k-app .ex-claim { grid-template-columns: 140px minmax(0, 1fr); gap: 22px; }
  .ex.k-app .ex-thumb { width: 140px; height: 190px; object-fit: contain; }
}
.ex.k-app .ex-claim[data-k-state="active"] .ex-seq .k-steps li[data-k-step="Submitted"]::after { background: var(--ex-red); border-color: var(--ex-red); }
.ex-sum-list { margin: 0; display: grid; gap: 14px; }
.ex-sum-list > div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ex-rule); }
.ex-sum-list dt { font: 500 .6875rem/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.ex-sum-list dd { margin: 0; font: 500 28px/1.1 var(--ex-mono); letter-spacing: -.03em; color: var(--ex-ink-strong); font-variant-numeric: tabular-nums; }
/* Home: receipts pinned to the title block, the add column as one box, one rule above Latest claims */
.ex-foot-home .ex-pinned { order: 2; min-width: 0; }
@media (min-width: 1024px) { .ex-foot-home .ex-pinned { order: 0; grid-column: 1; grid-row: 1; align-self: end; } }
.ex-pinned > .ex-tag { color: var(--ex-muted); margin-bottom: 12px; }
.ex-pins { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.ex-pins span { position: relative; display: block; }
.ex-pins span:nth-child(1) { transform: rotate(-2deg); }
.ex-pins span:nth-child(2) { transform: rotate(1.5deg); }
.ex-pins span:nth-child(3) { transform: rotate(-1deg); }
.ex-pins span:nth-child(4) { transform: rotate(2deg); }
.ex-pins span:nth-child(5) { transform: rotate(-1.5deg); }
.ex-pins span::before { content: ""; position: absolute; top: -6px; left: 50%; z-index: 1; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #D52F25; box-shadow: 0 0 0 2px var(--ex-paper); }
.ex-pins img { display: block; width: 72px; height: 96px; border: 1px solid var(--ex-rule); background: var(--ex-paper); }
@media (min-width: 1024px) { .ex-pins img { width: 96px; height: 128px; } }
.ex-add-col { border: 1.5px solid var(--ex-rule-strong); background: var(--ex-paper); padding: 24px; }
.ex-add-col .ex-cell-act { border: 0; padding: 0; background: transparent; }
.ex-cell-act { background: transparent; min-height: 100%; align-content: start; }
@media (min-width: 720px) { .ex-cell-act { grid-template-columns: minmax(0, 1fr); } }
.ex-drop { display: grid; place-items: center; min-height: 160px; margin-top: 12px; padding: 16px; border: 1.5px dashed #1B4FBF; }
.ex-drop .k-btn { justify-self: center; }
.ex-h-sub + .ex-ledger { border-top: 0; }
/* Reply: the receipt (280px) and Ellen's note side by side on wide screens */
@media (min-width: 1024px) {
  .ex.k-app .ex-query[data-ex-query] { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .ex.k-app .ex-query[data-ex-query] > * { grid-column: 2; min-width: 0; }
  .ex.k-app .ex-query[data-ex-query] > .ex-reply-rcpt { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
}
/* Months: the example note, a drawn box */
.ex-note-block { margin: 0 0 28px; padding: 24px; border: 1.5px solid var(--ex-rule-strong); background: #E8EEF7; color: var(--ex-ink-strong); }
.ex-note-block .ex-note-label { margin: 0; font: 500 11px/1.3 var(--ex-mono); letter-spacing: .12em; text-transform: uppercase; color: #1B4FBF; }
.ex-note-block p:not(.ex-note-label) { margin: 10px 0 0; font: 400 18px/1.5 var(--ex-sans); color: inherit; }
/* Home: the total at 20 to 28px so three cells fit a 375 wide phone */
.ex-mtop .ex-mid { font-size: clamp(20px, 3.4vw, 28px); }
/* Public page: the Payday figure on one line */
.ex-pub .ex-tblock-home b.ex-mock-pay { font-family: var(--ex-sans); font-weight: 600; font-size: clamp(18px, 1.1rem + .4vw, 22px); letter-spacing: 0; white-space: nowrap; }
/* Dark: the cyanotype bar for the app's nav and the public stats band, white labels and figures */
@media (prefers-color-scheme: dark) {
  .ex.k-app .k-tabs { background: #1b4fbf; }
  .ex.k-app .k-tabs > a:not(.k-tabs-brand) { color: #ffffff; }
  .ex.k-app .k-tabs > a[aria-current="page"], .ex.k-app .k-tabs > a[aria-current="page"]:hover { background: #0b1630; color: #ffffff; }
  .ex-band { background: #1b4fbf; }
  .ex-band-line li:nth-child(2) b { color: #ffd0cc; }
  .ex-drop { border-color: var(--ex-blue); }
  .ex-note-block { background: #0f2147; color: var(--ex-ink); }
  .ex-note-block .ex-note-label { color: var(--ex-blue); }
}

/* art direction 2026-10-25, round 3 */
/* Home: the title block sits under the h1, full width; the owed figure is the signature at 96px (56px on phones) */
.ex-tb-top { margin: 4px 0 28px; border: 2px solid var(--ex-rule-strong); background: var(--ex-paper); min-width: 0; }
.ex-tb-top .ex-tb-month { border-bottom: 0; }
.ex-tb-top .ex-mtop { grid-template-columns: minmax(0, 1fr); }
.ex-tb-top .ex-mcell-owed { grid-column: 1 / -1; padding: 20px 18px 22px; border-bottom: 1px solid var(--ex-rule-strong); }
.ex-tb-top .ex-mcell-owed .ex-tb-k { color: var(--ex-blue); }
.ex-tb-top .ex-mcell-owed .ex-mid { font: 500 clamp(36px, 14vw, 56px)/1 var(--ex-mono); letter-spacing: -.05em; color: var(--ex-blue); font-variant-numeric: tabular-nums; }
@media (min-width: 520px) and (max-width: 719px) {
  .ex-tb-top .ex-mtop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-tb-top .ex-mcell { border-right: 1px solid var(--ex-rule-strong); border-bottom: 0; }
  .ex-tb-top .ex-mcell:last-child { border-right: 0; }
}
@media (min-width: 720px) {
  .ex-tb-top .ex-mtop { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ex-tb-top .ex-mcell { border-right: 1px solid var(--ex-rule-strong); border-bottom: 0; padding: 22px 24px 24px; }
  .ex-tb-top .ex-mcell-owed { border-bottom: 0; }
  .ex-tb-top .ex-mcell:last-child { border-right: 0; }
  .ex-tb-top .ex-mcell-owed .ex-mid { font-size: 96px; letter-spacing: -.06em; }
  .ex-tb-top .ex-mcell-owed .ex-mnote { font-size: .875rem; }
}
.ex-tb-top .ex-mrow-t { border-top: 2px solid var(--ex-rule-strong); }
/* Home: the query and the add box side by side; the drop zone 120px */
.ex-drop { min-height: 120px; }
/* Home: receipts pinned as one row of five under the claims table */
.ex.k-app .ex-pinned { margin-top: 40px; align-self: start; }
.ex.k-app .ex-pins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ex.k-app .ex-pins span { min-width: 0; }
.ex.k-app .ex-pins img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
@media (min-width: 720px) { .ex.k-app .ex-pins { gap: 24px; } }
/* Home: the footer holds the sheet's strip only */
.ex.k-app .k-foot.ex-foot.ex-foot-home { display: block; grid-template-columns: none; margin-top: 48px; }

/* Months: the example note as a drawn box with a cyanotype rule; the paragraph in Plex Sans Condensed 22px */
.ex-note-block { border-left: 3px solid var(--ex-blue); }
.ex-note-block p:not(.ex-note-label) { font: 400 22px/1.4 var(--ex-sans); color: var(--ex-ink-strong); margin: 10px 0 0; }
/* Months: rows 72px, bars 16px */
.ex-mrow { min-height: 72px; align-content: center; }
.ex-mrow > .ex-scale { height: 16px; }

/* Reply: the sent answer appears in Your replies with its date; the empty state is quiet text; the heading in Plex Sans Condensed */
.ex.k-app .ex-form > h2.ex-tag { font: 600 20px/1.2 var(--ex-sans); letter-spacing: .04em; color: var(--ex-ink-strong); margin-bottom: 4px; }

/* Account: the six-year note sits in the Leaving box, 14px graphite */
.ex-leave { display: grid; gap: 12px; }
.ex-leave-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ex-ink); }

/* Public mini-app panel: "Last working day" on one line; the waiting label on one line */
.ex-pub .ex-tblock-home b.ex-mock-pay { font-size: 14px; }
.ex-pub .ex-tblock-home .ex-tb-k { white-space: nowrap; letter-spacing: .04em; }
/* Public: how a claim moves in three aligned columns */
.ex-flow { align-items: start; }
.ex-flow li { align-items: start; align-content: start; }
.ex-flow .ex-glyph { flex: none; }

/* Claims: the approved stamp is the same on every card; on wide screens it sits top right of the card, on phones over the receipt */
.ex.k-app .ex-claim[data-k-state="ok"] .ex-seq .k-steps { flex: 1 1 100%; }
.ex.k-app .ex-claim .ex-stamp-ok { position: absolute; top: 12px; right: 14px; left: auto; width: 96px; height: auto; margin: 0; transform: rotate(var(--ex-stamp-rot, -8deg)); }
.ex.k-app .ex-claim[data-k-state="ok"] .ex-claim-top { padding-right: 0; }
.ex.k-app .ex-claim[data-k-state="ok"] .ex-claim-top > div:first-child { max-width: calc(100% - 20px); }
@media (max-width: 719px) {
  .ex.k-app .ex-claim .ex-stamp-ok { top: 18px; left: 4px; right: auto; width: 84px; }
}
@media (min-width: 720px) {
  .ex.k-app .ex-claim[data-k-state="ok"] .ex-claim-top { padding-right: 96px; }
  .ex.k-app .ex-claim { --ex-stamp-rot: -4deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .ex.k-app .ex-claim[data-k-state="ok"] .ex-stamp-ok { animation: ex-thunk-r .2s ease-out both; }
}
@keyframes ex-thunk-r { from { opacity: 0; transform: rotate(var(--ex-stamp-rot, -8deg)) scale(1.3); } to { opacity: 1; transform: rotate(var(--ex-stamp-rot, -8deg)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ex.k-app .ex-claim[data-k-state="ok"] .ex-stamp-ok { animation: none; } }
/* Months: the biggest claims keep whole merchant and category names (no ellipsis) in the 7-column ledger */
.ex-ledger[aria-labelledby="big-h"] .ex-row { grid-template-columns: 16px minmax(0, 1fr) auto auto; grid-template-areas: "g main amt" "g date st"; }
.ex-ledger[aria-labelledby="big-h"] .ex-row-main b, .ex-ledger[aria-labelledby="big-h"] .ex-row-main small { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; }

/* art direction 2026-10-25, final source fixes */
.ex-row { position: relative; }
.ex-row-link:hover { background: var(--ex-paper-2); }
.ex-row-main b a { color: inherit; text-decoration: none; }
.ex-row-main b a::after { content: ""; position: absolute; inset: 0; }
.ex-row-main b a:hover, .ex-row-main b a:focus-visible { text-decoration: underline; }
.ex.k-app .ex-pins span[data-pl-empty] { grid-column: 1 / -1; font-size: .875rem; color: var(--ex-muted); }
.ex.k-app .ex-pins span[data-pl-empty]::before { content: none; }
.ex.k-app .ex-pins span[data-pl-empty][hidden] { display: none; }
.ex img[hidden] { display: none; }