/* client.css — the Libella Studio client portal. The studio's register (studio/_assets/brand.css, CONTRACT.md): bone
   ground in light, the token night in dark; one static light from the top left; cards are plates (a lit edge, a soft
   cast); engraved hairlines; ink only, no brand colour (status colours mean status). Bricolage Grotesque for the
   lockup and headings, Instrument Sans for text, JetBrains Mono for figures. Every colour is a --mc-* token so the
   catalog entries follow the theme; --mc-accent is the ink, so their buttons, bars and rings read as the studio's.
   Nothing moves on load. The values mirror brand.css; the portal does not load it (its resets and header grid are the
   studio site's), so a change to the studio's tokens is made here too. */
/* self-hosted type (fonts/, SIL OFL 1.1, fonts/OFL.txt; the same files as studio/_assets/fonts): no third-party request.
   swap + metric-matched local fallbacks (brand.css's measured overrides), so a late face never reflows a line */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Fallback"; font-weight: 400 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 100%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; font-weight: 400 900;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 104%; ascent-override: 93.3%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Fallback"; font-weight: 400 700;
  src: local("Courier New"), local("Liberation Mono"), local("Menlo"), local("Consolas");
  size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
:root, :root[data-theme="light"] {
  /* bone; ink 16.0:1, muted 5.7:1 on it (brand.css, measured). Status colours darkened to hold 4.5:1 on bone */
  --mc-bg: #f3efe6; --mc-fg: #141418; --mc-muted: #5c5c6b; --mc-surface: #fbf9f4; --mc-surface-2: #ece6d9; --mc-border: #14141824;
  --mc-accent: #141418; --mc-accent-fg: #f3efe6; --mc-brand: #141418; --mc-accent-l: 0.2;
  --mc-success: #17703e; --mc-warning: #9a4a05; --mc-danger: #b4232f;
  --mc-radius: 2px; --mc-radius-lg: 4px;
  --lb-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --lb-text: "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;
  --lb-mono: "JetBrains Mono", "JetBrains Fallback", ui-monospace, monospace;
  --mc-font: var(--lb-text);
  --lb-rule: color-mix(in srgb, var(--mc-fg) 20%, transparent); --lb-hair: color-mix(in srgb, var(--mc-fg) 10%, transparent);
  --lb-lip: rgb(255 255 255 / .72); --lb-light: rgb(255 253 247 / .9);
  --lb-plate-a: #fbf9f4; --lb-plate-b: #f4f0e7; --lb-plate-c: #ece6d9;
  --lb-plate-hi: #ffffff; --lb-plate-lo: rgb(70 56 30 / .10); --lb-plate-cast: rgb(70 56 30 / .16);
  --gap: 24px; --pad: 24px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --mc-bg: #0b0b0d; --mc-fg: #f1f0f4; --mc-muted: #a3a2b0; --mc-surface: #1a1a1e; --mc-surface-2: #222227; --mc-border: #f1f0f424;
  --mc-accent: #f1f0f4; --mc-accent-fg: #0b0b0d; --mc-brand: #f1f0f4; --mc-accent-l: 0.95;
  --mc-success: #4fd18b; --mc-warning: #f5b041; --mc-danger: #ff6b7a;
  --lb-lip: rgb(0 0 0 / .6); --lb-light: rgb(255 255 255 / .035);
  --lb-plate-a: #1a1a1e; --lb-plate-b: #141417; --lb-plate-c: #101013;
  --lb-plate-hi: rgb(255 255 255 / .08); --lb-plate-lo: rgb(0 0 0 / .5); --lb-plate-cast: rgb(0 0 0 / .55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mc-bg: #0b0b0d; --mc-fg: #f1f0f4; --mc-muted: #a3a2b0; --mc-surface: #1a1a1e; --mc-surface-2: #222227; --mc-border: #f1f0f424;
    --mc-accent: #f1f0f4; --mc-accent-fg: #0b0b0d; --mc-brand: #f1f0f4; --mc-accent-l: 0.95;
    --mc-success: #4fd18b; --mc-warning: #f5b041; --mc-danger: #ff6b7a;
    --lb-lip: rgb(0 0 0 / .6); --lb-light: rgb(255 255 255 / .035);
    --lb-plate-a: #1a1a1e; --lb-plate-b: #141417; --lb-plate-c: #101013;
    --lb-plate-hi: rgb(255 255 255 / .08); --lb-plate-lo: rgb(0 0 0 / .5); --lb-plate-cast: rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the page behind the sheet: one element to make inert while the sheet is open; it adds no box of its own */
.behind { display: contents; }
/* until the drawer module mounts it, the sheet is not part of the page; --scale-enter 1: the page does not shrink back */
#sheet-host { --scale-enter: 1; } #sheet-host:not([data-ready]) { display: none; }
/* disclosures stay folded until their module upgrades them, so nothing opens and then snaps shut */
[data-disclosure]:not(.mc-disclosure) > [data-disclosure-panel] { display: none; }
/* while the skeleton shows, the footer sits below the fold: the portal replacing it moves nothing on screen (CLS) */
body[data-view="loading"] #main { min-height: 100vh; }
/* after an action, focus lands on the card it changed: a quiet ring so a keyboard user sees where they are */
.card[tabindex="-1"]:focus { outline: none; } .card[tabindex="-1"]:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 3px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--mc-bg); }
/* the one light: a broad, static wash from the top left (never fixed, so it never moves on scroll) */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--mc-fg); font: 400 16px/1.5 var(--lb-text); font-kerning: normal;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; background: radial-gradient(120vmax 90vmax at 0 0, var(--lb-light), transparent 62%) no-repeat; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { margin: 0; font-family: var(--lb-display); font-weight: 600; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.03em; } h2 { font-size: 22px; } h3 { font-size: 19px; } h4 { font-size: 16px; }
h1:focus, h2:focus { outline: none; }
p { margin: 0; }
code, .num, .big { font-family: var(--lb-mono); font-variant-numeric: tabular-nums; }
code { font-size: .82em; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--mc-fg); color: var(--mc-bg); padding: 8px 16px; font: 500 13px/24px var(--lb-mono); }
.skip:focus { top: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--mc-muted); } .small { font-size: 14px; line-height: 1.5; }
.eyebrow { margin: 0 0 8px; font: 500 12px/1.4 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted); overflow-wrap: anywhere; }
.eyebrow.warn { color: var(--mc-warning); }
.lede { margin-top: 8px; color: var(--mc-muted); max-width: 60ch; font-size: 18px; line-height: 1.55; }
.hint { margin-top: 8px; font-size: 14px; color: var(--mc-muted); }
.hint code { background: var(--mc-surface-2); padding: 1px 5px; border-radius: 2px; }

/* header: the lockup stands on a full-measure 1 px ink rule (brand.css .lb-head, MARK.md: caps = tick = 12 px, word
   17.86 px Bricolage 600 caps, baseline = tick foot = the rule's top edge) */
.top .wrap { display: flex; align-items: flex-end; gap: 12px 28px; padding-top: 24px; border-bottom: 1px solid var(--mc-fg); box-shadow: 0 1px 0 var(--lb-lip); }
.lockup { display: flex; align-items: flex-end; color: var(--mc-fg); text-decoration: none; white-space: nowrap; padding-top: 12px; min-height: 44px; }
.lockup .mark { width: 28px; height: 12px; flex: none; fill: currentColor; overflow: visible; display: block; }
.lockup .word { margin-left: 7.4px; margin-bottom: -.17em; font: 600 17.86px/1 var(--lb-display); letter-spacing: -.012em; text-transform: uppercase; }
.lockup:hover .word { text-decoration: none; }
.line { margin-bottom: -.16em; font: 400 14px/1 var(--lb-text); color: var(--mc-muted); white-space: nowrap; }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 8px; }
.mode { font: 500 11px/1 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--mc-warning) 55%, transparent); color: var(--mc-warning); }
/* the header's instruments: brand.css .lb-tool (mono caps, a hairline box, 2 px corners) */
.chip, .tools .mc-pause-ctl, .tools .mc-amc__trigger { display: inline-flex; align-items: center; gap: 8px; height: 32px; min-height: 32px; padding: 0 10px;
  font: 500 12px/1 var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mc-fg); background: none;
  border: 1px solid var(--lb-rule); border-radius: 2px; box-shadow: none; cursor: pointer; white-space: nowrap; }
.chip:hover, .tools .mc-pause-ctl:hover, .tools .mc-amc__trigger:hover { border-color: var(--mc-fg); background: none; }
.chip svg { width: 14px; height: 14px; flex: none; }
.tools .mc-amc__badge { font: 500 11px/1 var(--lb-mono); letter-spacing: .04em; background: none; border: 0; padding: 0; color: var(--mc-muted); }
.btn { font: 600 15px/1 var(--lb-text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 2px; border: 1px solid var(--mc-fg); background: transparent; color: var(--mc-fg); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-150, 150ms) var(--ease-out, ease-out), color var(--dur-150, 150ms) var(--ease-out, ease-out); }
.btn:hover { background: color-mix(in oklab, var(--mc-fg) 7%, transparent); }
.btn.primary { background: var(--mc-fg); color: var(--mc-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 6px 14px -10px var(--lb-plate-cast); }
.btn.primary:hover { background: transparent; color: var(--mc-fg); }
.btn.ghost { border-color: var(--lb-rule); }
.btn.ghost:hover { border-color: var(--mc-fg); background: transparent; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--mc-fg); outline-offset: 2px; }
.btn.mc-form-loading, .mc-feedback .btn[data-mc-loading] { display: inline-grid; place-items: center; }
.linkish { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; }

main.wrap { flex: 1; padding-block: 40px 72px; }
/* plates: a surface lit from the top left, its edge catching the light, a soft cast down and right (brand.css .lb-plate) */
.card { position: relative; border-radius: var(--mc-radius-lg); padding: var(--pad); display: flex; flex-direction: column; gap: 16px; min-width: 0;
  background: linear-gradient(152deg, var(--lb-plate-a) 0%, var(--lb-plate-b) 58%, var(--lb-plate-c) 100%);
  box-shadow: inset 1px 1px 0 var(--lb-plate-hi), inset -1px -1px 0 var(--lb-plate-lo), 0 0 0 1px var(--lb-hair),
              6px 9px 22px -14px var(--lb-plate-cast), 2px 2px 3px -2px var(--lb-plate-lo); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h3 a { color: inherit; text-decoration-color: var(--lb-rule); text-underline-offset: 4px; overflow-wrap: anywhere; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.notice { border: 1px solid color-mix(in oklab, var(--mc-warning) 50%, transparent); background: color-mix(in oklab, var(--mc-warning) 8%, var(--mc-surface)); border-radius: 2px; padding: 12px 14px; font-size: 15px; }
.notice[data-tone="bad"] { border-color: color-mix(in oklab, var(--mc-danger) 50%, transparent); background: color-mix(in oklab, var(--mc-danger) 7%, var(--mc-surface)); }
.notice[data-tone="info"] { border-color: var(--lb-rule); background: var(--mc-surface-2); }

/* sign-in, link sent, trouble */
.solo { max-width: 620px; margin: 8vh auto 0; gap: 12px; padding: 32px; }
.solo h1 { font-size: clamp(30px, 4vw, 40px); }
.row-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.row-form .grow { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
label, legend { font-size: 14px; font-weight: 600; }
input[type=email], input[type=text], select, textarea { font: 400 16px/1.4 var(--lb-text); width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 2px;
  border: 1px solid color-mix(in oklab, var(--mc-fg) 32%, transparent); background: color-mix(in oklab, var(--mc-bg) 70%, var(--mc-surface)); color: var(--mc-fg); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--mc-fg) 55%, transparent); }
textarea { resize: vertical; min-height: 110px; }
[data-mc-field] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > .btn { align-self: flex-start; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--mc-fg); margin: 0; }
.kinds { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--lb-rule); border-radius: 2px; align-self: flex-start; }
.seg label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 2px; font-weight: 600; cursor: pointer; }
.seg label:has(input:checked) { background: var(--mc-fg); color: var(--mc-bg); }
.seg input { accent-color: var(--mc-fg); }

/* portal: hero + the first screen */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 32px; }
.hero > .btn { flex: none; }
.hero .small { margin-top: 8px; }
.today { display: grid; grid-template-columns: 1.15fr 1.3fr .9fr; gap: var(--gap); align-items: stretch; margin-bottom: 48px; }
.today h2, .month-note h2 { font: 500 12px/1.3 var(--lb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-muted); display: flex; align-items: center; gap: 8px; }
.count:not(:empty) { font: 600 12px/1 var(--lb-mono); color: var(--mc-bg); background: var(--mc-fg); border-radius: 2px; padding: 4px 7px; letter-spacing: 0; }
.lines, .todo, .reqs, .handover, .timeline, .thread, .recs, .note-rows { list-style: none; margin: 0; padding: 0; }
.lines { display: flex; flex-direction: column; gap: 12px; }
.lines li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.4; }
.lines a { color: inherit; text-decoration: none; }
.lines a:hover { text-decoration: underline; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mc-muted); transform: translateY(-1px); display: inline-block; }
.dot[data-tone="ok"] { background: var(--mc-success); } .dot[data-tone="warn"] { background: var(--mc-warning); } .dot[data-tone="bad"] { background: var(--mc-danger); } .dot[data-tone="info"], .dot[data-tone="act"] { background: var(--mc-fg); }
.todo { display: flex; flex-direction: column; }
.todo li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.todo li:first-child { border-top: 0; box-shadow: none; padding-top: 0; }
.todo li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.todo b { font-size: 16px; line-height: 1.3; }
.todo span { color: var(--mc-muted); font-size: 14px; line-height: 1.45; }
.todo span.bad, .todo li[data-tone="bad"] span { color: var(--mc-danger); }
.todo li[data-tone="bad"] b::before { content: "Urgent · "; color: var(--mc-danger); }
.todo .btn { flex: none; }
.quiet { color: var(--mc-muted); justify-content: flex-start !important; }
.needs { box-shadow: inset 1px 1px 0 var(--lb-plate-hi), inset -1px -1px 0 var(--lb-plate-lo), 0 0 0 1px var(--lb-rule), 6px 9px 22px -14px var(--lb-plate-cast), 2px 2px 3px -2px var(--lb-plate-lo); }
.owe .big { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.owe[data-tone="bad"] { box-shadow: inset 1px 1px 0 var(--lb-plate-hi), 0 0 0 1px color-mix(in oklab, var(--mc-danger) 55%, transparent), 6px 9px 22px -14px var(--lb-plate-cast); }
.owe[data-tone="bad"] .big { color: var(--mc-danger); }
.owe[data-tone="ok"] .big { color: var(--mc-success); }

/* the monthly note: one wide plate over the first screen; a sentence, then four figures on an engraved ledger */
.month-note { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "head nums" "line nums" "foot nums"; gap: 12px 48px; align-items: start; }
.note-head { grid-area: head; display: flex; flex-direction: column; gap: 6px; }
.note-meta { font: 500 12px/1.4 var(--lb-mono); letter-spacing: .04em; color: var(--mc-muted); }
.note-line { grid-area: line; font: 500 21px/1.35 var(--lb-display); letter-spacing: -.01em; text-wrap: pretty; max-width: 38ch; }
.note-foot { grid-area: foot; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 4px; }
.note-foot .note-old { align-self: stretch; }
.note-nums { grid-area: nums; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lb-rule); box-shadow: inset 0 1px 0 var(--lb-lip); }
.note-nums > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--lb-hair); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-nums > div:nth-child(odd) { border-right: 1px solid var(--lb-hair); }
.note-nums > div:nth-child(even) { padding-left: 16px; }
.note-nums dt { font: 400 13px/1.3 var(--lb-text); color: var(--mc-muted); }
.note-nums dd { margin: 0; font: 500 26px/1.15 var(--lb-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.note-nums dd.aside { font: 400 13px/1.35 var(--lb-text); letter-spacing: 0; color: var(--mc-muted); }
.note-nums.in-sheet dd:not(.aside) { font-size: 22px; }
.note-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.note-sec h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.note-sec p { max-width: 62ch; }
.note-rows { display: flex; flex-direction: column; }
.note-rows li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lb-hair); font-size: 15px; }
.note-rows .when { font: 500 13px/1.6 var(--lb-mono); color: var(--mc-muted); font-variant-numeric: tabular-nums; }
.ledger-head { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; font: 500 11px/1.3 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted); }
.sheet .note-line { font-size: 19px; }

/* sections */
.sec { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.sec > h2, .sec-head h2 { font-size: 28px; letter-spacing: -.02em; padding-bottom: 12px; border-bottom: 1px solid var(--lb-rule); box-shadow: 0 1px 0 var(--lb-lip); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--lb-rule); box-shadow: 0 1px 0 var(--lb-lip); padding-bottom: 12px; }
.sec-head h2 { border: 0; box-shadow: none; padding: 0; }
.stack-cards { display: flex; flex-direction: column; gap: var(--gap); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.pair > :only-child { grid-column: 1 / -1; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: 2px; border: 1px solid var(--lb-rule); white-space: nowrap; color: var(--mc-muted); }
.pill[data-tone="ok"] { color: var(--mc-success); border-color: color-mix(in oklab, var(--mc-success) 45%, transparent); }
.pill[data-tone="act"], .pill[data-tone="info"] { color: var(--mc-fg); border-color: var(--mc-fg); }
.pill[data-tone="warn"] { color: var(--mc-warning); border-color: color-mix(in oklab, var(--mc-warning) 55%, transparent); }
.pill[data-tone="bad"] { color: var(--mc-danger); border-color: color-mix(in oklab, var(--mc-danger) 55%, transparent); }
.pill .dot { width: 6px; height: 6px; transform: none; }
.stage { display: flex; flex-direction: column; gap: 4px; }
.stage b { font: 600 19px/1.3 var(--lb-display); letter-spacing: -.01em; }
.stage span { color: var(--mc-muted); max-width: 70ch; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; padding-top: 14px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.facts .wide { grid-column: 1 / -1; }
.facts dt { font: 500 11px/1.3 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted); }
.facts dd { margin: 4px 0 0; font-weight: 500; }
.tl-bar, .hours-bar { height: 6px; }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.timeline li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: start; }
.timeline .mark { grid-row: span 3; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--lb-rule); }
.timeline li[data-state="done"] .mark { background: var(--mc-fg); border-color: var(--mc-fg); }
.timeline li[data-state="next"] .mark { border-color: var(--mc-fg); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mc-fg) 14%, transparent); }
.timeline b { font-size: 15px; line-height: 1.3; } .timeline small { color: var(--mc-muted); font-size: 13px; }
.timeline .note { font-size: 13px; color: var(--mc-fg); background: var(--mc-surface-2); border-radius: 2px; padding: 4px 6px; margin-top: 4px; }
.timeline li[data-state="later"] b { color: var(--mc-muted); }
.hours { display: flex; flex-direction: column; gap: 6px; }
.hours-head { display: flex; justify-content: space-between; font-weight: 600; } .hours-head b { font-family: var(--lb-mono); font-weight: 500; }
.strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 24px; }
.strip span { border-radius: 1px; background: var(--mc-success); opacity: .8; }
.strip span[data-tone="warn"] { background: var(--mc-warning); opacity: 1; } .strip span[data-tone="bad"] { background: var(--mc-danger); opacity: 1; }
.strip-legend { display: flex; justify-content: space-between; font: 400 12px/1 var(--lb-mono); color: var(--mc-muted); margin-top: -8px; }
/* the site's daily checks and email records: engraved ledger rows */
.checks { display: flex; flex-direction: column; gap: 10px; }
.subhead { font: 500 11px/1.3 var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted); margin-top: 4px; }
.ledger { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lb-hair); font-size: 15px; flex-wrap: wrap; }
.ledger dt { color: var(--mc-muted); } .ledger dd { margin: 0; font-weight: 500; display: inline-flex; gap: 8px; align-items: baseline; text-align: right; }
.ledger > div[data-tone="warn"] dd { color: var(--mc-warning); } .ledger > div[data-tone="bad"] dd { color: var(--mc-danger); }
.recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.recs li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lb-hair); }
.recs li + li { padding-left: 12px; border-left: 1px solid var(--lb-hair); }
.recs b { font: 600 14px/1.3 var(--lb-mono); letter-spacing: .02em; }
.recs span:not(.rec-mark) { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--mc-muted); }
.rec-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 600 11px/1 var(--lb-text); color: var(--mc-bg); background: var(--mc-success); }
.recs li[data-tone="warn"] .rec-mark { background: var(--mc-warning); } .recs li[data-tone="bad"] .rec-mark { background: var(--mc-danger); }
.recs li[data-tone="warn"] span:not(.rec-mark) { color: var(--mc-warning); } .recs li[data-tone="bad"] span:not(.rec-mark) { color: var(--mc-danger); }
.handover { display: flex; flex-direction: column; gap: 6px; }
.handover li { display: flex; gap: 10px; align-items: baseline; }
.handover .tick { width: 18px; height: 18px; flex: none; border-radius: 2px; border: 1.5px solid var(--lb-rule); display: inline-grid; place-items: center; font-size: 12px; color: var(--mc-bg); transform: translateY(3px); }
.handover li[data-done="true"] .tick { background: var(--mc-success); border-color: var(--mc-success); }
.handover small { color: var(--mc-muted); font-family: var(--lb-mono); font-size: 12px; }
.stop { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.acc h4 button, .acc h3 button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 15px/1.2 var(--lb-text); text-align: left; min-height: 44px; }
.sum { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; border-radius: 2px; background: var(--mc-surface-2); }
.sum ul { margin: 0; padding-left: 18px; color: var(--mc-muted); }
.sum .total { display: flex; flex-direction: column; align-items: flex-end; } .sum .total span { font-size: 13px; color: var(--mc-muted); } .sum .total b { font: 500 26px/1 var(--lb-mono); letter-spacing: -.03em; }
.reqs { display: flex; flex-direction: column; }
.reqs li { border-top: 1px solid var(--lb-hair); } .reqs li:first-child { border-top: 0; }
.req { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 2px; }
.req:hover { background: color-mix(in oklab, var(--mc-fg) 5%, transparent); }
.req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .req-main b { font-size: 16px; } .req-main small { color: var(--mc-muted); font-size: 14px; }
.reqs .quiet { padding: 12px 4px; }
[data-requests-closed] { margin-top: 6px; }
.table-card { overflow-x: auto; }
.inv { width: 100%; border-collapse: collapse; }
.inv th, .inv td { padding: 12px 8px; border-top: 1px solid var(--lb-hair); text-align: left; vertical-align: middle; }
.inv thead th { border-top: 0; font: 500 11px/1.2 var(--lb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-muted); }
.inv tbody th { font-weight: 400; } .inv tbody th b { display: block; font-weight: 600; } .inv tbody th small { color: var(--mc-muted); font: 400 12px/1.3 var(--lb-mono); }
.inv .num { text-align: right; font-family: var(--lb-mono); } .inv .act { text-align: right; width: 1%; white-space: nowrap; }
.empty { max-width: 720px; }

/* sheet */
#sheet-host .sheet { --mc-sheet-bg: var(--lb-plate-a); z-index: 40; }
#sheet-host .mc-sheet__scrim { z-index: 39; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 24px 14px; border-bottom: 1px solid var(--mc-fg); box-shadow: 0 1px 0 var(--lb-lip); }
.sheet-head h2 { font-size: 22px; letter-spacing: -.02em; }
.sheet-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 16px; user-select: text; -webkit-user-select: text; cursor: auto; touch-action: pan-y; }
@media (min-width: 761px) { #sheet-host .sheet { width: min(580px, 92vw); left: auto; right: 0; top: 0; height: 100%; } .sheet .handle { display: none; } .sheet-head { padding-top: 22px; } }
.doc { display: flex; flex-direction: column; gap: 6px; }
.doc h4 { margin-top: 12px; font: 500 12px/1.3 var(--lb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-muted); }
.sheet-foot { position: sticky; bottom: -28px; background: var(--lb-plate-a); padding: 14px 0 6px; border-top: 1px solid var(--lb-hair); display: flex; flex-direction: column; gap: 10px; }
.thread { display: flex; flex-direction: column; gap: 12px; }
.thread li { padding: 12px 14px; border-radius: 2px; background: var(--mc-surface-2); max-width: 92%; }
.thread li[data-dir="in"] { align-self: flex-end; background: color-mix(in oklab, var(--mc-fg) 6%, var(--lb-plate-a)); box-shadow: 0 0 0 1px var(--lb-hair); }
.thread .who { font: 500 12px/1.3 var(--lb-mono); color: var(--mc-muted); margin-bottom: 4px; }

/* footer */
.foot { padding-block: 0 32px; }
.foot .wrap { padding-top: 16px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.small-print { font-size: 13px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--mc-muted); }
.small-print li:not(:first-child)::before { content: "·"; margin-right: 10px; }
.small-print li:empty { display: none; }

/* loading skeleton (still) */
.skel-hero { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.sk { display: block; height: 14px; border-radius: 2px; background: color-mix(in oklab, var(--mc-fg) 7%, transparent); }
.sk.h1 { height: 40px; } .sk.bar { height: 6px; width: 100%; }
.sk.w30 { width: 30%; } .sk.w40 { width: 40%; } .sk.w55 { width: 55%; } .sk.w70 { width: 70%; } .sk.w80 { width: 80%; }
.skel .card { min-height: 170px; } .skel-wide { min-height: 220px; }

@media (max-width: 1000px) {
  .today { grid-template-columns: 1fr 1fr; } .today .owe { grid-column: 2; grid-row: 2; } .today .now { grid-row: 2; } .today .needs { grid-column: 1 / -1; }
  .month-note { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "line" "nums" "foot"; gap: 14px; }
  .line { display: none; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; --gap: 16px; }
  .wrap { padding: 0 20px; }
  main.wrap { padding-block: 28px 48px; }
  .today, .pair { grid-template-columns: minmax(0, 1fr); }
  .today .owe, .today .needs, .today .now { grid-column: auto; grid-row: auto; }
  .today .needs { order: -2; } .today .month-note { order: -1; }
  .row-form .btn { width: 100%; }
  .recs { grid-template-columns: minmax(0, 1fr); }
  .recs li + li { padding-left: 0; border-left: 0; }
  .recs li { grid-template-columns: auto auto 1fr; align-items: center; }
  .recs span:not(.rec-mark) { grid-column: auto; text-align: right; }
  .inv thead { display: none; }
  .inv tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--lb-hair); }
  .inv th, .inv td { border: 0; padding: 0; } .inv .act { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .inv td.num { text-align: left; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .top .wrap { padding-top: 16px; }
  .lockup .word { font-size: 15.6px; margin-left: 6.5px; }
  .lockup .mark { width: 24.5px; height: 10.5px; }
  .tools { gap: 6px; }
  .tools .lbl, .tools .mc-amc__trigger [data-label], .tools .mc-amc__badge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chip, .tools .mc-pause-ctl, .tools .mc-amc__trigger { padding: 0 9px; }
  .mc-pause-ctl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mode { display: none !important; }
  .todo li { flex-wrap: wrap; } .todo .btn { width: 100%; }
  .hero { flex-wrap: wrap; } .hero h1 { font-size: 32px; }
  .note-line { font-size: 19px; }
  .note-nums dd:not(.aside) { font-size: 22px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .solo { padding: 24px 20px; }
  .sheet-head, .sheet-body { padding-inline: 16px; }
  .actions .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) { .btn, .btn.small, .chip, .tools .mc-pause-ctl, .tools .mc-amc__trigger { min-height: 44px; } .chip, .tools .mc-pause-ctl, .tools .mc-amc__trigger { height: 44px; min-width: 44px; } }
@media (forced-colors: active) {
  .card { box-shadow: none; border: 1px solid CanvasText; background: Canvas; }
  .top .wrap, .sec > h2, .sec-head, .note-nums, .ledger, .recs, .facts { border-color: CanvasText; box-shadow: none; }
  .lockup .mark { fill: CanvasText; }
  .dot, .strip span, .timeline .mark, .rec-mark { forced-color-adjust: none; border: 1px solid CanvasText; }
  .btn.primary { forced-color-adjust: none; background: ButtonText; color: ButtonFace; border-color: ButtonText; box-shadow: none; }
}