/* BREATHOPS web client. Tokens: the locked M10 / Round 9 system (design/round-12-plan-focus). */

/* geologica-cyrillic-ext-full-normal */
@font-face {
  font-family: 'Geologica';
  font-style: oblique 0deg 12deg;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geologica-cyrillic-ext-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geologica-cyrillic-full-normal */
@font-face {
  font-family: 'Geologica';
  font-style: oblique 0deg 12deg;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geologica-cyrillic-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geologica-latin-ext-full-normal */
@font-face {
  font-family: 'Geologica';
  font-style: oblique 0deg 12deg;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geologica-latin-ext-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geologica-latin-full-normal */
@font-face {
  font-family: 'Geologica';
  font-style: oblique 0deg 12deg;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/geologica-latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- the locked M10 tokens
   Taken as they are from design/round-12-plan-focus/index.html (the M12.3.2 specimen), which
   restates M10 and Round 9: Geologica with all four axes on every style, strict grayscale, dark
   first, 16 / 24 / 44 / 54 / 10, radii 12 and 8, N2 as brand material only. */
:root {
  /* --font-locale: a language's own fonts for a script Geologica lacks, set from the locale
     registry (ADR 0082); unset, the stack is Geologica, system-ui, sans-serif as before. */
  --font: 'Geologica', var(--font-locale, system-ui), sans-serif;
  --w-display: 600; --w-heading: 550; --w-body: 450; --w-ui: 450; --w-meta: 450; --w-number: 600;
  --tr-display: -0.04em; --tr-heading: -0.025em; --tr-body: 0; --tr-ui: 0; --tr-meta: 0.015em;
  --shrp: 5; --shrp-small: 12;
  --pad: 16px; --sec: 24px; --row-y: 10px;
  --r-box: 12px; --r-ctl: 8px; --h-ctl: 44px; --h-nav: 54px;
  --brand: #858585;
}

/* Dark is primary. "device" follows the system and needs no script, so nothing flashes. */
:root[data-theme="dark"],
:root[data-theme="device"] {
  --page: #363636; --subtle: #3E3E3E; --elev: #464646; --press: #545454;
  --border: #474747; --divider: #525252;
  --t1: #FAFAFA; --t2: #CCCCCC; --t3: #B2B2B2; --t4: #868686;
  --scrim: rgba(0, 0, 0, .42);
  /* the Assistant's thread (ADR 0064): its answers sit below the page, the person's words above it */
  --bub-ai: #2D2D2D; --bub-me: #545454;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --page: #F0F0F0; --subtle: #F7F7F7; --elev: #FFFFFF; --press: #E0E0E0;
  --border: #E2E2E2; --divider: #DCDCDC;
  --t1: #121212; --t2: #4A4A4A; --t3: #646464; --t4: #949494;
  --scrim: rgba(0, 0, 0, .22);
  --bub-ai: #E4E4E4; --bub-me: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="device"] {
    --page: #F0F0F0; --subtle: #F7F7F7; --elev: #FFFFFF; --press: #E0E0E0;
    --border: #E2E2E2; --divider: #DCDCDC;
    --t1: #121212; --t2: #4A4A4A; --t3: #646464; --t4: #949494;
    --scrim: rgba(0, 0, 0, .22);
    --bub-ai: #E4E4E4; --bub-me: #FFFFFF;
    color-scheme: light;
  }
}

/* type roles — the locked Round 9 values; every role sets all four axes */
.t-display { font-family: var(--font); font-size: 28px; line-height: 1.2; letter-spacing: var(--tr-display);
  font-variation-settings: 'wght' var(--w-display), 'SHRP' var(--shrp), 'CRSV' 0, 'slnt' 0; }
.t-heading { font-family: var(--font); font-size: 17px; letter-spacing: var(--tr-heading);
  font-variation-settings: 'wght' var(--w-heading), 'SHRP' var(--shrp), 'CRSV' 0, 'slnt' 0; }
.t-body { font-family: var(--font); font-size: 15px; line-height: 1.55; letter-spacing: var(--tr-body);
  font-variation-settings: 'wght' var(--w-body), 'SHRP' var(--shrp), 'CRSV' 0, 'slnt' 0; }
.t-ui { font-family: var(--font); font-size: 14px; letter-spacing: var(--tr-ui);
  font-variation-settings: 'wght' var(--w-ui), 'SHRP' var(--shrp-small), 'CRSV' 0, 'slnt' 0; }
.t-meta { font-family: var(--font); font-size: 12px; letter-spacing: var(--tr-meta);
  font-variation-settings: 'wght' var(--w-meta), 'SHRP' var(--shrp-small), 'CRSV' 0, 'slnt' 0; }
.t-numui { font-family: var(--font); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-ui);
  font-variation-settings: 'wght' var(--w-heading), 'SHRP' var(--shrp-small), 'CRSV' 0, 'slnt' 0; }
.t-num { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-display);
  font-variation-settings: 'wght' var(--w-number), 'SHRP' var(--shrp), 'CRSV' 0, 'slnt' 0; }
.t-label { font-family: var(--font); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  font-variation-settings: 'wght' var(--w-meta), 'SHRP' var(--shrp-small), 'CRSV' 0, 'slnt' 0; }
.wrap { line-height: 1.45; }


/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--page); color: var(--t1);
  font-family: var(--font); font-size: 14px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input { font: inherit; color: inherit; }
svg { display: block; }
/* `hidden` always wins over a component's own display. */
[hidden] { display: none !important; }

/* Round 9: a focus state exists — 2px outline at the primary text colour, 2px offset,
   keyboard focus only. */
:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Visually hidden, still announced. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; }

.noscript { padding: var(--pad); color: var(--t2); }

/* Reduced motion: screens appear in place; nothing slides or scales (SETTINGS.md §8). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="off"]) *, :root:not([data-motion="off"]) *::before, :root:not([data-motion="off"]) *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------------- components
   Ported from design/round-12-plan-focus/index.html: the header, rows, lines, sections, buttons,
   fields, the segmented control and the quiet states. Values are the specimen's, unchanged. */

/* headers */
.hdr { height: 60px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); }
.hdr .ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .tb { height: var(--h-ctl); display: flex; align-items: center; padding: 0 4px; color: var(--t2); }
.bk { width: var(--h-ctl); height: var(--h-ctl); display: grid; place-items: center; margin-left: -12px; color: var(--t2); flex: none; }
.ib { width: var(--h-ctl); height: var(--h-ctl); border-radius: var(--r-ctl); border: 1px solid var(--border);
  background: var(--subtle); color: var(--t2); display: grid; place-items: center; flex: none; }

/* scrolling content of a screen */
.lst { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }

/* Management and Settings rows */
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: var(--row-y) var(--pad); min-height: 44px; position: relative; width: 100%; }
.mrow + .mrow::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--divider); }
.mrow .rt { color: var(--t4); white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.mrow.muted .tt { color: var(--t4); }
a.mrow:hover, button.mrow:hover { background: var(--subtle); }
.mn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tt { color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt { color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt b { font-weight: inherit; color: var(--t2); }
/* Settings: descriptions wrap; they are never cut (SETTINGS.md §4) */
.setl .tt, .setl .mt { white-space: normal; }
.row.full .mt { white-space: normal; }
.setl .rt { color: var(--t3); }
.setp { max-width: 640px; }
.pane .mrow.on { background: var(--subtle); }
.pane .mrow.on::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--t1); }

/* sections and lines */
.sect { margin-top: 24px; }
.sect > .t-label { color: var(--t4); padding: 0 var(--pad) 4px; display: block; }
.line { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--h-ctl); padding: 0 var(--pad); position: relative; }
.line + .line::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--divider); }
.line .k { color: var(--t3); min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
/* A value too long for its line wraps inside it rather than running past the edge; amounts never
   break, because their groups are joined by no-break spaces (core/format.ts). */
.line .v { color: var(--t1); text-align: right; min-width: 0; overflow-wrap: break-word; }
.dhead { padding: 4px var(--pad) 0; }
.dhead .t-label { color: var(--t4); display: block; margin-bottom: 4px; }
.fine { color: var(--t4); margin: 16px var(--pad) 0; }
.sfoot { display: block; padding: 16px var(--pad) 0; color: var(--t4); }

/* buttons
   A button is as wide as the place it is given and never wider: its label wraps inside it, and a
   row of two becomes a column when its container cannot hold both at a readable width. Both are
   decided by the container's width alone, so they follow a pane being resized as it moves. */
.btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; min-width: 0; }
.btns.row2 { flex-direction: row; flex-wrap: wrap; }
.btns.row2 > * { flex: 1 1 10.5rem; min-width: 0; }
.sbtn { padding: 0 var(--pad); }
/* operational or not, on a transaction: a switch under its facts, saved at once */
.opsw { padding: 12px var(--pad) 0; }
/* a task in a list (FOCUS.md §7): a swipe right or a long press opens its action state; the checkbox completes */
a[data-task] { touch-action: pan-y; transition: transform .18s ease-out; -webkit-touch-callout: none; }
a[data-task] .ck[role="button"] { cursor: pointer; position: relative; }
a[data-task] .ck[role="button"]::after { content: ""; position: absolute; inset: -12px; } /* a 44 x 44 hit area */
.rowact { min-height: 83px; background: var(--subtle); padding: 8px var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.rowact-meta { color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowact-btns { display: flex; gap: 8px; }
.rowact-btns .btn { flex: 1; min-height: 44px; min-width: 0; padding: 0 6px; }
.btn { min-height: var(--h-ctl); min-width: 0; max-width: 100%; border-radius: var(--r-ctl); display: flex; align-items: center;
  justify-content: center; text-align: center; line-height: 1.25; overflow-wrap: break-word;
  border: 1px solid transparent; font-size: 14.5px; font-family: var(--font); padding: 6px var(--pad);
  font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.btn.p { background: var(--t1); color: var(--page); }
.btn.s { background: var(--subtle); border-color: var(--border); color: var(--t2); }
.btn.t { color: var(--t2); }
.btn:disabled, .btn.off { background: var(--press); color: var(--t4); border-color: transparent; }

/* fields */
.field { height: var(--h-ctl); width: 100%; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--page);
  padding: 0 var(--pad); color: var(--t1); }
.field::placeholder { color: var(--t4); }

/* a segmented choice of at most three (SETTINGS.md §4) */
.sseg { padding: 0 var(--pad) 8px; }
.vseg { display: flex; min-height: var(--h-ctl); max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; }
.vseg.full { width: 100%; }
.vseg button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4px 8px; line-height: 1.2; overflow-wrap: anywhere; color: var(--t3); }
.vseg button + button { border-left: 1px solid var(--border); }
.vseg button[aria-pressed="true"] { background: var(--press); color: var(--t1);
  font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }

/* quiet and empty states — they say how a thing comes to exist, never offer a builder */
.upto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 32px; color: var(--t3); text-align: center; }
.upto .t-heading { color: var(--t1); }

/* an error, with the reference a person can quote (the API's trace id) */
.err { margin: 16px var(--pad) 0; display: flex; flex-direction: column; gap: 8px; }
.err .t-body { color: var(--t1); }
.err .t-meta { color: var(--t4); }

/* details and sublines (the specimen writes these inline; the CSP needs them as classes) */
.dhead .dmeta { color: var(--t4); margin-top: 4px; }
.dhead .t-display { font-weight: normal; }
.subline { color: var(--t4); padding: 0 var(--pad); }
.big .t-num .u { color: var(--t3); }
.big.m .t-num { color: var(--t3); }
h1, h2, h3 { font-weight: normal; font-size: inherit; }
h1:focus, h2:focus { outline: none; }
.sheet-body { color: var(--t2); margin: 0 2px; }
.sheet .field + .field, .fieldset + .fieldset { margin-top: 8px; }
.formp { padding: 8px var(--pad) 0; display: flex; flex-direction: column; gap: 4px; }
.formp .t-label { color: var(--t4); margin: 12px 2px 4px; display: block; }
.formp .t-label:first-child { margin-top: 0; }
select.field { appearance: none; -webkit-appearance: none; }
.field:disabled { color: var(--t4); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.brand .t-heading { color: var(--t1); }
.hdr .tb:disabled { color: var(--t4); }

/* [ amount ][ currency ]: one control, the currency one tap from the number (ADR 0039) */
.amt { display: flex; }
.amt > .field { flex: 1; min-width: 0; border-radius: var(--r-ctl) 0 0 var(--r-ctl); font-variant-numeric: tabular-nums; }
.amt .cur { position: relative; flex: none; display: flex; }
.amt .cur .field { width: auto; min-width: 88px; border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding-right: 28px; color: var(--t2); }
.amt .cur::after { content: "\25BE"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--t4); pointer-events: none; }
.amt .cur:has(.field:disabled)::after { content: none; }
.amt .cur .field:disabled { padding-right: var(--pad); color: var(--t3); }
.conv { color: var(--t3); margin: 6px 2px 0; min-height: 1.4em; }
/* a long list as the platform's picker: accounts, categories */
.selw { position: relative; display: block; }
.selw .field { padding-right: 36px; text-overflow: ellipsis; }
.selw::after { content: "\25BE"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--t4); pointer-events: none; }
/* the front door: an "or" between ways in, a hint under a field, the quieter ways below */
.formp .hint { margin: 6px 2px 0; color: var(--t4); }
.or { text-align: center; color: var(--t4); margin: 16px 0 0; }
.btns.alt { gap: 0; margin-top: 8px; }
/* the conversion under an amount: what it comes to and at whose rate; "Adjust" opens the person's own (ADR 0041) */
.fx-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-sum .conv { flex: 1; min-width: 0; }
.fx-sum .tb { flex: none; min-height: var(--h-ctl); padding: 0 2px 0 8px; color: var(--t2); }
.fx.own .fx-sum .conv { color: var(--t1); }
.fx-edit .vseg { margin-top: 4px; }
.fx-reset { width: 100%; margin-top: 4px; }
/* a new password's requirements, met or not as the person types (ADR 0053) */
.pwreq { list-style: none; margin: 8px 2px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; color: var(--t4); }
.pwreq li { display: flex; align-items: center; gap: 8px; }
.pwreq li.met { color: var(--t2); }
.pwreq .mk-c { width: 1em; text-align: center; }


/* ---------------------------------------------------------------- surfaces
   Focus, Plan, the Assistant, Management and Finance — ported from the M12.3.2 specimen
   (design/round-12-plan-focus/index.html). Values are the specimen's. */

/* rows: a time column, the item, a right-hand value */
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: var(--row-y) var(--pad); min-height: 44px; position: relative; width: 100%; }
.row + .row::before, .row + .crow::before, .crow + .crow::before, .crow + .row::before {
  content: ''; position: absolute; top: 0; left: 72px; right: var(--pad); height: 1px; background: var(--divider); }
a.row:hover, button.row:hover { background: var(--subtle); }
.row .tm { color: var(--t3); align-self: start; padding-top: 3px; }
.row .am { color: var(--t2); text-align: right; white-space: nowrap; }
.row .am.in { color: var(--t1); }
.row.done .tt { color: var(--t3); } .row.done .am { color: var(--t4); }
.row.pend .am { color: var(--t3); }
.ck { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--t4); display: inline-grid; place-items: center; font-size: 12px; color: var(--page); }
.crow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 44px;
  padding: 0 var(--pad); position: relative; }
.crow .tm { color: var(--t4); }
.crow .ct { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .cx { color: var(--t4); }
.crow .am { color: var(--t3); white-space: nowrap; }

/* band and day labels */
.bl { display: flex; justify-content: space-between; align-items: baseline; padding: 16px var(--pad) 0; }
.bl .t-label, .bl .t-meta { color: var(--t4); }
.dm { color: var(--t4); padding: 8px var(--pad) 0 72px; display: block; }
.grp { margin-top: 16px; }
.dh { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--pad) 4px; }
.dh .l { color: var(--t3); } .dh .l.now { color: var(--t1); }
.dh .r { color: var(--t4); }
.wk { margin: 24px var(--pad) 0; padding-top: 12px; border-top: 1px solid var(--divider); }
.wk .l { color: var(--t2); } .wk .s { color: var(--t4); margin-top: 4px; }
.collapsed { padding: 0 var(--pad); color: var(--t4); display: flex; justify-content: space-between; min-height: var(--h-ctl); align-items: center; width: 100%; }
.boundary { margin: 24px var(--pad) 0; color: var(--t4); }
.nodate { margin: 16px var(--pad) 0; display: flex; justify-content: space-between; color: var(--t3); padding-top: 12px; border-top: 1px solid var(--divider); }
.quiet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 32px 8px; text-align: center; }
.quiet .t-ui, .quiet .t-meta { color: var(--t3); }
.air rect { fill: var(--brand); }

/* ---------------------------------------------------------------- Focus */
.ftop { flex: none; border-bottom: 1px solid var(--divider); background: var(--page); }
.fs { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
/* the Focus scale — one component for Day, Week and Month (SPENDING_PLAN.md §9–10) */
.fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 16px;
  padding: 4px var(--pad) 12px; width: 100%; }
.fin .c { min-width: 0; position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; text-align: left; }
.fin .c + .c::before { content: ''; position: absolute; left: -8px; top: 0; bottom: 0; width: 1px; background: var(--divider); }
.fin .l { color: var(--t4); padding-top: 8px; }
.fin .v { color: var(--t1); margin-top: 4px; font-family: var(--font); font-size: 12px; }
.fin .v .u { color: var(--t3); }
.fin .p { color: var(--t3); margin-top: 4px; text-wrap: balance; }
.fin.na .v { color: var(--t4); }
/* sleep in the day: the morning question as a quiet card, else one line */
.scard { margin: 8px var(--pad) 4px; padding: 12px var(--pad); border-radius: var(--r-box); background: var(--subtle); }
.scard .btns { margin-top: 12px; }
.btns.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr)); gap: 8px; }
.btns.row3 > :only-child, .btns.row3 > :nth-child(2):last-child { grid-column: auto; }
.sline { display: flex; align-items: center; min-height: 36px; padding: 0 var(--pad); color: var(--t3); }
.sline:hover { color: var(--t1); }
.sline .go { margin-left: 4px; }
/* Focus Mode (ADR 0043): alone on the screen -- a large clock, what it is for, two actions.
   Grayscale like everything else; the only motion is the countdown's line filling, which the
   reduced-motion rules already stop animating. */
.app.immersive > .screen.fm { max-width: none; overflow-y: auto; }
.fm { display: flex; flex-direction: column; min-height: 100%; }
.fm-wrap { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; max-width: 560px; margin: 0 auto; }
.fm-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; height: var(--h-ctl); padding: 8px var(--pad) 0; }
.fm-top .fm-l { justify-self: start; }
.fm-top .fm-r { justify-self: end; }
.fm-top .fm-phase { text-align: center; color: var(--t3); white-space: nowrap; }
.fm-top .ib { color: var(--t3); }
.fm-top .ib:hover { color: var(--t1); }
.fm-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px var(--pad); text-align: center; }
.fm-what { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.fm-task { color: var(--t1); overflow-wrap: anywhere; }
.fm-time { font-family: var(--font); font-weight: 300; font-size: clamp(64px, 22vw, 128px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--t1); }
.fm-time.idle { color: var(--t4); font-size: clamp(56px, 16vw, 96px); }
@media (max-height: 720px) { .fm-mid { padding-block: 12px; } }
.fm-time.done { font-size: clamp(44px, 14vw, 72px); }
.fm-wrap.paused .fm-time { color: var(--t3); }
.fm-sub { margin: 0; color: var(--t3); }
.fm-bar { width: min(320px, 70%); height: 2px; border-radius: 1px; background: var(--divider); overflow: hidden; }
.fm-bar > i { display: block; height: 100%; width: 0; background: var(--t2); transition: width 1s linear; }
.fm-bar[hidden] { display: none; }
.fm-link { background: none; border: 0; padding: 6px 8px; color: var(--t3); cursor: pointer; font: inherit; }
.fm-link:hover { color: var(--t1); }
.fm-act { padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
.fm-note { margin: 4px var(--pad) 0; text-align: center; color: var(--t4); }
/* keys are for keyboards: on a touch screen the hint is only noise */
@media (hover: none) { .fm-note.keys { display: none; } }
.fm-setup { display: flex; flex-direction: column; gap: 8px; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
.fm-setup > .t-label { margin: 8px var(--pad) 0; }
.fm-for { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: var(--h-ctl); margin: 0 var(--pad); padding: 0 12px;
  border-radius: var(--r-ctl); background: var(--subtle); border: 0; color: var(--t1); text-align: left; cursor: pointer; font: inherit; }
.fm-for .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pad); }
/* a sheet over Focus Mode stays the width of its content, on desktop too */
.app.immersive .sheet { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
.fm-tasks { display: flex; flex-direction: column; }
.fm-tasks .opt { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.fm-tasks .opt + .opt { border-top: 1px solid var(--divider); }
/* the timer modes (ADR 0065): one list, the chosen one marked; what it does, and its own settings, under it */
.fm-modes { display: flex; flex-direction: column; margin: 0 var(--pad); border: 1px solid var(--border); border-radius: var(--r-box); overflow: hidden; }
.fm-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--h-ctl); padding: 0 12px;
  background: none; border: 0; color: var(--t2); font: inherit; cursor: pointer; text-align: left; }
.fm-mode + .fm-mode { border-top: 1px solid var(--divider); }
.fm-mode:hover { color: var(--t1); }
.fm-mode[aria-checked='true'] { color: var(--t1); background: var(--subtle); font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.fm-mode .l { color: var(--t3); white-space: nowrap; }
.fm-desc { margin: 0 var(--pad); color: var(--t3); }
.fm-settings { display: flex; flex-direction: column; gap: 8px; }
.fm-settings:empty { display: none; }
.fm-settings > .t-label { margin: 8px var(--pad) 0; }
.fm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; padding: 0 var(--pad); }
.fm-num { display: flex; flex-direction: column; gap: 4px; color: var(--t3); }
.fm-num .field { width: 100%; }
/* a length reached, said in words under the clock; the time beyond it a step quieter */
.fm-banner { margin: 4px 0 0; max-width: 36ch; color: var(--t1); }
.fm-banner[hidden] { display: none; }
.fm-time.over { color: var(--t2); }
.fm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 220px; }
.fm-dots[hidden] { display: none; }
.fm-dots > i { width: 6px; height: 6px; border-radius: 3px; background: var(--divider); }
.fm-dots > i.on { background: var(--t2); }
.fm-acts { display: flex; flex-direction: column; }
/* a session running, seen from anywhere else in BREATHOPS: a line above the phone's bar, a row in the column */
.fmlive { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 var(--pad); color: var(--t2); border-top: 1px solid var(--border); background: var(--page); }
.fmlive:hover { color: var(--t1); }
.fmlive .tx { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.fmlive .k { flex: none; color: var(--t3); }
.fmlive .p { min-width: 0; display: flex; gap: 8px; }
.fmlive .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmlive .c { flex: none; color: var(--t1); font-variant-numeric: tabular-nums; }
.fmlive .r { color: var(--t3); }
.fmlive .dot { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--t1); }
.fmlive.quiet .dot { background: var(--t4); }
.fmlive-slot { flex: none; }
.fmlive-slot.side .fmlive { border-top: 0; min-height: 44px; padding: 6px 12px; border-radius: var(--r-ctl); background: none; }
.fmlive-slot.side .tx { flex-direction: column; gap: 0; }
/* the player (ADR 0065): kinds of sound, the tracks of one, what plays and from where, the controls */
.pl { display: flex; flex-direction: column; gap: 12px; }
.pl-tabs { padding: 0; }
.pl-list { display: flex; flex-direction: column; max-height: min(40vh, 320px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-box); }
.pl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pl-item + .pl-item { border-top: 1px solid var(--divider); }
.pl-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--h-ctl); padding: 8px 12px; background: none; border: 0; color: var(--t2); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.pl-row .tt { color: var(--t1); overflow-wrap: anywhere; }
.pl-row[aria-current="true"] { background: var(--subtle); }
.pl-row[aria-current="true"] .tt { font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.pl-fav { color: var(--t4); margin-right: 4px; background: none; }
.pl-fav[aria-pressed="true"] { color: var(--t1); }
.pl-fav[aria-pressed="true"] svg { fill: currentColor; }
.pl-np { display: flex; flex-direction: column; gap: 2px; }
.pl-title { display: flex; justify-content: space-between; gap: 12px; }
.pl-title .tt { color: var(--t1); }
.pl-src { margin: 0; color: var(--t3); }
.pl-src a { color: var(--t2); }
.pl-err { margin: 0; color: var(--t1); }
.pl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-ctl { display: flex; align-items: center; gap: 4px; }
.pl-main { border: 1px solid var(--border); border-radius: 99px; }
.pl-vlab { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; }
.pl-vol { flex: 1; accent-color: var(--t2); min-height: 32px; }
.pl-now { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; margin: 4px var(--pad) 0; padding: 4px 4px 4px 12px; border: 1px solid var(--border); border-radius: var(--r-box); }
.pl-now[hidden] { display: none; }
.pl-what { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; background: none; border: 0; padding: 4px 0; color: var(--t2); font: inherit; cursor: pointer; text-align: left; }
.pl-what .tt { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pl-what .t-meta { color: var(--t3); }
.fmlive-slot.side .fmlive:hover { background: var(--subtle); }
.fmline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 var(--pad); color: var(--t2); }
.fmline:hover { color: var(--t1); }
.fmline.on { color: var(--t1); }
.fmline .t-meta { color: var(--t3); }
/* Focus pins (FOCUS.md §6, ADR 0066): a compact reference layer under the figures -- one rounded group
   on --subtle, a 44px row per pin, the name in t2 and its value in t1; no label, no count */
.fpins { margin: 8px var(--pad) 4px; background: var(--subtle); border-radius: var(--r-box); overflow: hidden; }
.fpin { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px;
  color: var(--t2); background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; }
.fpin + .fpin { border-top: 1px solid var(--divider); }
.fpin:hover { color: var(--t1); }
.fpin .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpin .v { flex: none; color: var(--t1); }

/* Focus history: the person's days as quiet bars, every figure with its count */
.fh-head { padding: 8px var(--pad) 0; }
.fh-sum { margin: 12px var(--pad) 0; color: var(--t2); }
.fh-day { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 36px; padding: 0 var(--pad); }
.fh-day .b { height: 6px; border-radius: 3px; background: var(--divider); overflow: hidden; }
.fh-day .b > i { display: block; height: 100%; background: var(--t2); }
.fh-day.none .d { color: var(--t4); }
.fh-day .v { white-space: nowrap; }

/* planned sleep in Plan: read-only, quieter than what is to be done */
.row.slp .tt, .row.slp .tm { color: var(--t3); }
.tpair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.tpair > input { min-width: 0; width: 100%; }

/* the shortfall, said once under the three horizons */
.fshort { display: block; width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad) 12px; padding: 8px 12px; border: 0;
  border-radius: var(--r-box); background: var(--subtle); color: var(--t1); text-align: left; cursor: pointer; }
.dbar { display: block; position: relative; height: 12px; margin-top: 8px; }
.dbar .trk { position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--press); }
.dbar .lim { position: absolute; left: 50%; top: 1px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--t4); }
.dl { display: flex; justify-content: space-between; align-items: center; min-height: var(--h-ctl); margin-top: 12px; padding: 0 var(--pad);
  border-top: 1px solid var(--divider); color: var(--t3); }
.pins { margin: 12px var(--pad) 4px; border-radius: var(--r-box); background: var(--subtle); }

/* ---------------------------------------------------------------- Plan */
.vseg.hseg { flex: none; }
.vseg.hseg button { padding: 0 14px; flex: none; }
.cmp { margin: 4px var(--pad) 0; height: var(--h-ctl); border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--subtle);
  display: flex; align-items: center; flex: none; }
.cmp .cph { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; padding: 0 var(--pad); color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp .as { height: 100%; display: flex; align-items: center; padding: 0 var(--pad); border-left: 1px solid var(--border); color: var(--t4); }
/* Plan finances stands apart from the composer: a link to another area, not one of its actions (ADR 0093). */
.fin-row { flex: none; display: flex; padding: 0 var(--pad); margin-bottom: 4px; }
.fin-link { min-height: 36px; display: inline-flex; align-items: center; color: var(--t2); text-decoration: none; white-space: nowrap; }
.fin-link:hover { color: var(--t1); }
.fin-link .go { color: var(--t4); }
.lrow { height: var(--h-ctl); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--pad); margin-top: 4px; }
.lbtn { display: flex; align-items: center; gap: 6px; height: var(--h-ctl); color: var(--t2); white-space: nowrap; min-width: 0; }
.lbtn .lt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lbtn i { font-style: normal; color: var(--t4); font-size: 11px; }
.lbtn.on, .lbtn.per { color: var(--t1); }
/* The scale and the period: on one line where they fit, the period under the scale where they do not
   (a narrow context pane), never past the edge. */
.pbar { min-height: var(--h-ctl); flex: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; padding: 0 var(--pad); }
.gseg { display: flex; height: var(--h-ctl); border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; flex: none; margin-right: auto; }
.gseg button { display: flex; align-items: center; padding: 0 12px; color: var(--t3); }
.gseg button + button { border-left: 1px solid var(--border); }
.gseg button[aria-pressed="true"] { background: var(--press); color: var(--t1); }
.pbar .pnav { display: flex; align-items: center; flex: none; margin-left: auto; }
.pbar .tdy { height: var(--h-ctl); display: flex; align-items: center; padding: 0 4px; color: var(--t2); }
.arw { width: var(--h-ctl); height: var(--h-ctl); display: grid; place-items: center; color: var(--t2); }
.arw:disabled, .tdy:disabled { color: var(--t4); }
/* Planning's month: ‹ the month › and, for another month, back to this one (ADR 0093). */
.pl-nav { display: flex; align-items: center; padding: 0 calc(var(--pad) - 12px); }
.pl-nav .pl-month { flex: 1; min-width: 0; text-align: center; color: var(--t1); }
.pl-nav .tdy { height: var(--h-ctl); display: flex; align-items: center; padding: 0 8px; color: var(--t2); }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 4px 8px 0; }
.mgrid .wd { text-align: center; color: var(--t4); padding: 4px 0; }
.mc { height: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; position: relative; }
.mc .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--t2); }
.mc.out .n { color: var(--t4); opacity: .55; }
.mc.today .n { background: var(--t1); color: var(--page); }
.mc.past .n { color: var(--t4); }
.mc .dots { display: flex; gap: 3px; height: 4px; }
.mc .dots i { width: 4px; height: 4px; border-radius: 2px; background: var(--t3); }
.mc .dots i.m { width: 8px; border-radius: 1px; background: var(--t2); }
.yv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px var(--pad) 0; }
.ym { height: 64px; border-radius: var(--r-ctl); background: var(--subtle); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--t2); }
.ym.now { box-shadow: inset 0 0 0 1.5px var(--t2); color: var(--t1); }
.ym .d { display: flex; gap: 2px; height: 4px; }
.ym .d i { width: 4px; height: 4px; border-radius: 2px; background: var(--t4); }

/* the sheet's parts */
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--h-ctl); padding: 0 2px; color: var(--t1); width: 100%; }
.opt + .opt { border-top: 1px solid var(--divider); }
.opt .c { color: var(--t4); white-space: nowrap; }
.opt:disabled { color: var(--t4); }
/* A question about a typed amount (ui/amount.ts, L10N-9): each reading a full-width answer, its
   amount over what its separators mean, so long explanations wrap instead of overflowing. */
.amq { margin-top: 12px; }
.amq-q { color: var(--t1); }
.amq-typed { color: var(--t4); margin-top: 4px; }
.amq-opt { display: block; width: 100%; min-height: var(--h-ctl); padding: 10px 2px; background: none; border: 0; border-top: 1px solid var(--divider); color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.amq-opt:first-of-type { margin-top: 8px; }
.amq-opt .m { display: block; color: var(--t4); }
.amq-done { color: var(--t4); margin-top: 8px; }
/* The question's place keeps the space between two fields it stands between. */
.sheet .amq-slot + .field { margin-top: 8px; }
.opt[aria-pressed="true"] { font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.opt[aria-pressed="true"] .c::after { content: '  ✓'; color: var(--t1); }
.sl { color: var(--t4); margin: 16px 2px 4px; display: block; }
.slrow { display: flex; justify-content: space-between; align-items: center; min-height: var(--h-ctl); margin: 4px 2px 0; }
.slrow .t-label { color: var(--t4); }
.util { display: flex; align-items: center; height: var(--h-ctl); color: var(--t2); gap: 4px; }
.util button { padding: 0 4px; height: var(--h-ctl); }
.util i { font-style: normal; color: var(--t4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: var(--h-ctl); border-radius: 99px; border: 1px solid var(--border); display: inline-flex; align-items: center; padding: 0 var(--pad);
  color: var(--t2); background: var(--subtle); white-space: nowrap; flex: none; }
.chip[aria-pressed="true"] { background: var(--t1); color: var(--page); border-color: var(--t1); font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.chip:disabled { color: var(--t4); background: transparent; }
.fieldset { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.fieldset .t-label { color: var(--t4); margin: 0 2px; }

/* ---------------------------------------------------------------- the Assistant */
.acmp { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px var(--pad); }
.acf { flex: 1; min-width: 0; height: var(--h-ctl); border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--subtle);
  display: flex; align-items: center; padding-left: var(--pad); }
.acf .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t4); }
.acf .ic { width: var(--h-ctl); height: var(--h-ctl); margin: -1px 0; display: grid; place-items: center; color: var(--t4); flex: none; }
.acmp[aria-disabled="true"] .acf { background: transparent; }
.cline { flex: none; margin: 0 var(--pad); color: var(--t4); }
.cline b { font-weight: inherit; color: var(--t2); }
.notice { margin: 12px var(--pad) 0; color: var(--t2); }

/* ---------------------------------------------------------------- Management */
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px var(--pad) 0; }
.ptile { border-radius: var(--r-box); background: var(--subtle); padding: 12px; min-height: 92px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ptile .t-label { color: var(--t4); }
.hb { padding: 8px var(--pad); }
.na-line { padding: 4px var(--pad) 0; color: var(--t4); }
.mrow.sub { padding-left: 32px; }
.mrow.sub .tt { color: var(--t2); }
.mrow.sub::before { left: 32px !important; }
.sgap { height: 16px; }
.hdr .tb.off { color: var(--t4); }

/* ---------------------------------------------------------------- Finance */
.amt { font-variant-numeric: tabular-nums; }
.big { padding: 8px var(--pad) 0; }
.big .t-num { font-size: 34px; line-height: 1.15; color: var(--t1); }
.big .t-num .u { color: var(--t3); }
.state { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: var(--row-y) var(--pad); min-height: 44px; align-items: center; position: relative; }
.state + .state::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--divider); }
.state .k { color: var(--t3); }
.state .v { color: var(--t1); text-align: right; white-space: nowrap; }
.state .v.m { color: var(--t3); }
button.state { width: 100%; }
button.state:hover { background: var(--subtle); }
.state .v .go { color: var(--t2); margin-left: 6px; }
.more { margin: 8px var(--pad) 0; }
.mask { letter-spacing: .04em; }
.warn { color: var(--t1); }

/* ---------------------------------------------------------------- ported later from the specimen */
.back { height: var(--h-ctl); display: flex; align-items: center; padding: 0 var(--pad); flex: none; }
.dl .t-meta { color: var(--t2); }
.pin { min-height: var(--h-ctl); display: flex; align-items: center; gap: 12px; padding: 0 12px; min-width: 0; position: relative; width: 100%; }
.pin + .pin::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--divider); }
.pin .x { flex: 1; min-width: 0; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin .v { color: var(--t1); white-space: nowrap; }
.fin.solo { grid-template-columns: minmax(0, 1fr); padding: 0; }
.fin .v > span { white-space: nowrap; }
.dbar .fill { position: absolute; top: 4px; height: 4px; border-radius: 2px; background: var(--t3); }
/* Beyond the plan limit the fill is strong; beyond twice it the right end thickens; on plan the
   centre tick grows (SPENDING_PLAN §9, the specimen's rules). */
.dbar .over { position: absolute; top: 4px; height: 4px; border-radius: 0 2px 2px 0; background: var(--t1); }
.dbar .cap { position: absolute; right: 0; top: 0; width: 3px; height: 12px; border-radius: 1px; background: var(--t1); }
.dbar.on .lim { top: 0; width: 3px; height: 12px; margin-left: -1.5px; background: var(--t1); }
.line .v.m { color: var(--t3); }
.line .go { color: var(--t2); }
.line.sub .k { padding-left: 12px; color: var(--t4); } .line.sub .v { color: var(--t3); }
.line.tot .k, .line.tot .v { color: var(--t1); font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
a.line:hover, button.line:hover { background: var(--subtle); }
button.line { width: 100%; }
.mrow.act .tt { color: var(--t2); }
.prv { margin-top: 12px; }
.prv .row { padding-left: 0; padding-right: 0; }
.prv .row + .row::before { left: 56px; right: 0; }
.kinds { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* a switch: shown as the state the design draws; `disabled` when the setting has no home yet */
.swt { width: 46px; height: 27px; border-radius: 99px; background: var(--press); border: 1px solid var(--border); position: relative; display: inline-block; flex: none; }
.swt i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 99px; background: var(--t3); }
.swt[aria-checked="true"] { background: var(--t1); border-color: var(--t1); }
.swt[aria-checked="true"] i { left: auto; right: 3px; background: var(--page); }
.swt:disabled { opacity: .4; }
.setl .mrow.muted .swt { opacity: .4; }
.hdl { color: var(--t4); font-size: 16px; width: 24px; text-align: center; }
.hbt { display: flex; justify-content: space-between; gap: 12px; color: var(--t2); }
.hbt span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbb { position: relative; height: 4px; border-radius: 2px; background: var(--press); margin-top: 8px; }

/* the Assistant's thread */
.thr { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px var(--pad) 12px; }
.thr > * { flex-shrink: 0; }
/* The thread (ADR 0064): the person's words on the right, above the page; the Assistant's answers
   on the left, below it -- both from tokens, so light and dark keep the same relation. */
.bub { align-self: flex-end; max-width: 80%; background: var(--bub-me); color: var(--t1); border-radius: var(--r-box); padding: var(--row-y) 12px; }
.bub.unsent { opacity: .7; }
.ans { align-self: flex-start; max-width: 88%; background: var(--bub-ai); color: var(--t1); border-radius: var(--r-box); padding: var(--row-y) 12px; }
.ans.thinking { color: var(--t3); }
.ans.failed { color: var(--t2); }
.ans.failed .btns { padding: 8px 0 0; }
.res { background: var(--subtle); border-radius: var(--r-box); padding: 12px var(--pad); }
.res .btns { margin-top: 12px; }
/* what a proposal would do, inside its card: the card's own padding is the inset */
.res .pargs { margin: 4px calc(-1 * var(--pad)) 0; }
.res .pargs .line { min-height: 36px; }
.res .pargs .line .v { white-space: normal; overflow-wrap: anywhere; }
.snd { width: var(--h-ctl); height: var(--h-ctl); border-radius: var(--r-ctl); background: var(--t1); color: var(--page); display: grid; place-items: center; flex: none; }
.snd:disabled { background: var(--press); color: var(--t4); }
.acf .tx.v { color: var(--t1); }
.acf input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: var(--t1); }
.acf input::placeholder { color: var(--t3); }
.acf input:disabled::placeholder { color: var(--t4); }
/* dictation: recording shows as a dot before the field's text, and the square to stop it */
.acf.rec { border-color: var(--t3); }
.acf.rec::before { content: ''; flex: none; width: 8px; height: 8px; margin-left: 14px; border-radius: 50%; background: var(--t1); animation: rec-pulse 1.6s ease-in-out infinite; }
.acf .ic.on { color: var(--t1); }
.acf .ic:disabled { opacity: .45; cursor: default; }
@keyframes rec-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .acf.rec::before { animation: none; } }
.ctxc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the calendar's header in a sheet, and the week grid */
.calh { display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); height: var(--h-ctl); margin-top: 4px; flex: none; }
.calh .mth { flex: 1; color: var(--t1); }
.mc .dots i.m { width: 8px; }
.mc button.n { cursor: pointer; }
.pane .mgrid { padding: 0 6px; }
.wlist .grp:first-child { margin-top: 12px; }

/* the desktop's resize boundary: the 1px divider at rest; a 9px hit area; 2px on hover and drag */
.rz { position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; z-index: 5; cursor: col-resize; }
.rz:hover::after, .rz:focus-visible::after, .rz.drag::after { content: ''; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 2px; background: var(--t3); }
.rz.drag::after { background: var(--t1); }
.rz:focus-visible { outline: none; }
.rz .wd { position: absolute; top: 12px; left: 12px; padding: 2px 6px; border-radius: 4px; background: var(--elev); color: var(--t1); white-space: nowrap; }

/* Management Overview on a wide screen: the landing in two columns (the specimen's desktop frame) */
.ovw { display: grid; grid-template-columns: minmax(0, 1fr); }
.app.desk .pane.grow .ovw.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }

/* reduced motion, when chosen in Settings › System (the device's choice is the media query in base.css) */
:root[data-motion="on"] *, :root[data-motion="on"] *::before, :root[data-motion="on"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* ---------------------------------------------------------------- Plan · calendar (ported) */
.mc { width: 100%; }
.mc.sel .n { box-shadow: inset 0 0 0 1.5px var(--t2); }
.mc.today.sel .n { box-shadow: none; }
.mc.rg::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 28px; background: var(--press); }
.mc .n { position: relative; z-index: 1; }
.wgrid { position: relative; margin: 4px 0 0; }
.wdays { display: grid; grid-template-columns: 34px repeat(7, 1fr); padding: 0 6px 0 4px; }
.wdays > * { text-align: center; padding: 4px 0; }
.wdays .d { color: var(--t4); display: block; }
.wdays .dn { color: var(--t2); display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 8px; }
.wdays .today .dn { background: var(--t1); color: var(--page); }
.allday { display: grid; grid-template-columns: 34px repeat(7, 1fr); padding: 4px 6px 4px 4px; border-bottom: 1px solid var(--divider); }
.allday .lab { color: var(--t4); align-self: center; }
.ad { margin: 1px; border-radius: 4px; background: var(--subtle); color: var(--t2); padding: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px !important; }
.ad.m { background: transparent; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tgrid { position: relative; display: grid; grid-template-columns: 34px repeat(7, 1fr); padding: 0 6px 0 4px; }
.hr { height: 34px; border-top: 1px solid var(--divider); color: var(--t4); font-size: 10.5px !important; padding-top: 1px; }
.col { position: relative; border-left: 1px solid var(--divider); }
.col .hl { height: 34px; border-top: 1px solid var(--divider); }
.blk { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: var(--elev); padding: 3px 4px; overflow: hidden; color: var(--t1); font-size: 10.5px !important; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.blk.r { background: var(--subtle); color: var(--t2); }
.nowline { position: absolute; left: 38px; right: 6px; height: 1.5px; background: var(--t1); }
/* Planned sleep in the week: a translucent band behind what is planned, never a slot (ADR 0049). */
.slb { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--t1) 7%, transparent); pointer-events: none; }
.slm { position: absolute; left: 1px; right: 1px; color: var(--t4); font-size: 9.5px !important; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.slm.top { top: 1px; }
.slm.bottom { bottom: 1px; }
.blk.cf { box-shadow: inset 0 0 0 1px var(--t3); }
.years { display: flex; gap: 8px; padding: 8px var(--pad) 0; overflow-x: auto; scrollbar-width: none; }
.years .chip { padding: 0 12px; }
.ym.in { background: var(--press); color: var(--t1); }
.pane .mc { height: 38px; } .pane .mc .n { width: 24px; height: 24px; }
.calday { border-top: 1px solid var(--divider); margin-top: 4px; }
.calday .grp:first-child { margin-top: 12px; }
.dh button.r { color: var(--t4); }
.dh button.r:hover { color: var(--t2); }
.na-line.center { text-align: center; padding: 8px 32px 0; }
.sheet-note { color: var(--t4); margin-top: 12px; }
.subline.flush { padding: 0; margin: 12px 0 4px; }
.lbtn .x { color: var(--t4); padding: 0 4px; }
.cmp .cph { text-align: left; }
.cmp button.as { cursor: pointer; }
.datepair { display: flex; gap: 8px; margin-top: 12px; }
.datepair label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.datepair .t-label { color: var(--t4); margin: 0 2px; }
.lrow-what { display: flex; align-items: center; min-width: 0; }
.nodate-wrap { margin: 16px var(--pad) 0; border-top: 1px solid var(--divider); padding-top: 4px; }
.nodate-wrap .collapsed { padding: 0; color: var(--t3); }
.grp > div > .collapsed { color: var(--t4); }
/* rows without a time column (the ledger): the item starts at the gutter */
.row.nt { grid-template-columns: minmax(0, 1fr) auto; }
.row.nt + .row::before, .row + .row.nt::before { left: var(--pad); }
.pane .row.on { background: var(--subtle); }
.pane .row.on::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--t1); }
.mt4 { margin-top: 4px; color: var(--t4); }
.lrow-top { margin-top: 0; }
.res .t-ui { color: var(--t1); }
/* a row with its own action beside it (mapping, decisions) */
.mapr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; position: relative; }
.mapr + .mapr::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--divider); }
.mapr .mrow { padding-right: 8px; }
.mapa { padding-right: var(--pad); }
.mapa .btn { padding: 0 12px; }
.flush-top { margin-top: 0; }
a.btn { display: flex; }

/* the Assistant's conversations (ADR 0054): a row opens one, the × beside it deletes it */
.convrow { display: flex; align-items: center; min-width: 0; }
.convrow > .mrow { flex: 1 1 auto; min-width: 0; }
.convrow .cdel { flex: none; margin-right: var(--pad); border-color: transparent; background: transparent; color: var(--t4); }
.convrow .cdel:hover { color: var(--t1); border-color: var(--border); }
/* a proposal decided: nothing left to press, its outcome said in the card */
.res.decided { background: transparent; border: 1px solid var(--divider); }
.res .pstate { color: var(--t3); }
.res .pstate.done { color: var(--t2); }
.res.perm .btns { margin-top: 12px; }
/* editing a proposal before deciding: only the proposal changes */
.pedit { background: var(--subtle); border-radius: var(--r-box); padding: 12px var(--pad); min-width: 0; }
.pedit .sl { margin-top: 12px; }
textarea.field { height: auto; min-height: calc(var(--h-ctl) * 2); padding-top: 10px; padding-bottom: 10px; resize: vertical; }

/* picking one of one's own payments for a shared budget (ADR 0055): a long list scrolls in place */
.picklist { max-height: min(40vh, 22rem); overflow-y: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }

/*
 * Focus Mode's air, tied to the phase (design round 10's brand layer): one bounded piece above the
 * time, never behind it. At rest before and after; breathing while focusing (scaleX, 10%, 8.5 s);
 * held and quieter while paused; settling on a break (translateY, 10 px, 7.5 s). Each phase rises
 * in once: 10 px, 900 ms, decelerating. Reduced motion (base.css) leaves the same composition still.
 */
/* Made visible (ADR 0063), inside the same rules: the lines are brighter here than as a mark -- the
   outer pair at .3, the next at .48, the middle at .7 -- and while focusing each line breathes in its
   turn, the middle last, so the eye sees a slow wave. The master sprint (1.8) made the breath
   perceptible: a tenth wider and brighter at its height, still over 8.5 s. */
.fm-air { display: block; flex: none; margin-bottom: 8px; transition: opacity 240ms ease; }
.fm-air rect { transform-box: fill-box; transform-origin: center; }
.fm-air rect:nth-child(1), .fm-air rect:nth-child(5) { opacity: .3; }
.fm-air rect:nth-child(2), .fm-air rect:nth-child(4) { opacity: .48; }
.fm-air rect:nth-child(3) { opacity: .7; }
.fm-air-focusing rect { animation: fm-air-expand 8.5s ease-in-out infinite alternate; }
.fm-air-focusing rect:nth-child(2), .fm-air-focusing rect:nth-child(4) { animation-delay: -1.4s; }
.fm-air-focusing rect:nth-child(3) { animation-delay: -2.8s; }
.fm-air-break { animation: fm-air-settle 7.5s ease-in-out infinite alternate; }
.fm-air-idle, .fm-air-done { opacity: .8; }
.fm-wrap.paused .fm-air { animation-play-state: paused; opacity: .5; }
.fm-wrap.paused .fm-air rect { animation-play-state: paused; }
@keyframes fm-air-expand { from { transform: scaleX(.9); opacity: .55; } to { transform: scaleX(1.1); opacity: 1; } }
@keyframes fm-air-settle { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
@keyframes fm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fm-rise { animation: fm-rise 900ms cubic-bezier(.22, .61, .36, 1) both; }
/* A short screen (a phone on its side) keeps the air, smaller, rather than losing it. */
@media (max-height: 560px) { .fm-air { width: 120px; height: 32px; margin-bottom: 4px; } }

/*
 * The tutorial (ADR 0058, 0074): everything but the element in question lightly dimmed by four
 * shades -- the element itself stays usable -- a ring that takes the element's own corners, and a
 * card beside it. Above sheets and the drawer, and out of a sheet's way while one is open. Made
 * small, it is a control in the corner; nothing closes it but the person. The card rises in
 * (10 px, 900 ms); reduced motion shows it in place.
 */
:root { --tour-dim: rgba(0, 0, 0, .34); }
:root[data-theme="light"] { --tour-dim: rgba(0, 0, 0, .18); }
@media (prefers-color-scheme: light) { :root[data-theme="device"] { --tour-dim: rgba(0, 0, 0, .18); } }
.tour { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.tour-shade { position: fixed; background: var(--tour-dim); pointer-events: auto; }
.tour-ring { position: fixed; display: none; border-radius: var(--r-box); box-shadow: 0 0 0 2px var(--t1); pointer-events: none; }
.tour-card { position: fixed; pointer-events: auto; background: var(--page); color: var(--t1); border: 1px solid var(--border);
  border-radius: var(--r-box); padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); max-height: calc(100vh - 32px); overflow-y: auto; }
.tour-card:focus { outline: none; }
.tour-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tour-count { color: var(--t4); min-width: 0; }
.tour-min { flex: none; background: none; border: 0; padding: 4px 0; color: var(--t3); cursor: pointer; font: inherit; }
.tour-min:hover { color: var(--t1); }
.tour-body { margin: 8px 0 0; color: var(--t2); }
.tour-ask { margin: 10px 0 0; color: var(--t1); }
.tour-note { margin: 8px 0 0; min-height: 0; }
.tour-note:empty { display: none; }
.tour-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 16px; }
.tour-btns { display: flex; gap: 8px; margin-left: auto; }
.tour-btns .btn { flex: none; min-width: 0; padding: 0 16px; }
.tour-link { background: none; border: 0; padding: 4px 0; color: var(--t3); cursor: pointer; font: inherit; text-align: left; }
.tour-link:hover { color: var(--t1); }
.tour-card > .tour-link { margin-top: 6px; }
.tour-in { animation: fm-rise 900ms cubic-bezier(.22, .61, .36, 1) both; }
/* made small: where it is, and Continue -- in the corner, above the phone's bar */
.tour-pill { position: fixed; right: 16px; bottom: 16px; z-index: 1500; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 14px; border-radius: var(--r-box); background: var(--elev); border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }
.tour-pill.on-phone { left: 12px; right: 12px; bottom: calc(var(--h-nav) + env(safe-area-inset-bottom) + 10px); }
.tour-pill-where { min-width: 0; flex: 1; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-pill-where b { color: var(--t1); font-weight: var(--w-ui); }
.tour-pill .btn { flex: none; min-height: 36px; padding: 0 14px; }
/* a part offered on its own screen: one quiet line under the title */
.tour-hint { margin: 4px var(--pad) 8px; padding: 12px var(--pad); border-radius: var(--r-box); background: var(--subtle); display: flex; flex-direction: column; gap: 8px; }
.tour-hint b { color: var(--t1); font-weight: var(--w-ui); }
.tour-hint-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tour-hint-acts .btn { flex: none; min-width: 0; min-height: 36px; padding: 0 14px; }
.tour-offer { margin: 12px var(--pad) 4px; padding: 14px var(--pad); border-radius: var(--r-box); background: var(--subtle); display: flex; flex-direction: column; gap: 6px; }
.tour-offer .btns { margin-top: 6px; }

/* Insights (the master sprint, 2.4): the figure a sheet explains, large, then its meaning and payments */
.ins .ins-fig { margin: 0 0 4px; font-size: 26px; line-height: 1.2; color: var(--t1); }
.ins .section, .ins .sect { margin-top: 8px; }

/* the threshold sheet: an amount and its currency, side by side */
.thr-fields { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 12px; margin: 12px 0 4px; }

/* an expense in about three seconds, under Focus's figures (the master sprint, 3.5): the amount, the
   account it is paid from (its currency), Add; a quiet line under it for what went wrong, and Details */
.qe { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px var(--pad) 0; }
.qe .qe-amount { min-height: var(--h-ctl); min-width: 0; }
.qe-acc { max-width: 10rem; min-height: var(--h-ctl); padding: 0 4px; background: none; border: 0; color: var(--t3); font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-acc:hover { color: var(--t1); }
.qe .qe-save { min-width: 4.5rem; }
.qe-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 var(--pad); }
.qe-note { margin: 2px 0 0; color: var(--t2); }
.qe-note:empty { margin: 0; }
.qe-more { margin-left: auto; min-height: 32px; background: none; border: 0; color: var(--t3); font: inherit; cursor: pointer; }
.qe-none { display: block; padding: 10px var(--pad) 0; color: var(--t3); }

/* planning a month (ADR 0071): where the steps are, and the limits sheet's fields */
.pm-step { margin: 0 0 8px; color: var(--t3); }
.pm .line { padding-inline: 0; }
.lim-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; margin: 12px 0 4px; }
/* With a currency beside each amount (ADR 0087): room for both. */
.lim-fields.wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }


/* ---------------------------------------------------------------- the shell
   One product, two presentations (MANAGEMENT.md §2, WORKSPACE.md): below 768px the phone —
   one screen at a time, the bottom navigation; from 768px the workspace — the navigation column,
   then screens side by side, the newest filling to the right edge. */

.app { min-height: 100%; background: var(--page); color: var(--t1); }

/* ---------------------------------------------------------------- phone */
.app.phone { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.app.phone > .screen { flex: 1; min-height: 0; }
.screen { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--page); }
.screen > * { flex-shrink: 0; }
.screen > .lst, .screen > .fs, .screen > .thr, .screen > .grow { flex: 1 1 auto; flex-shrink: 1; }
.app.phone .screen { padding-top: env(safe-area-inset-top); }

/* the Operations navigation — Focus · Plan · Assistant · the menu. The fourth is always the menu
   control: one glyph, one meaning; it is marked, like the others, when the screen shown is one of
   the menu's places. */
.nav { height: calc(var(--h-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); flex: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); background: var(--page); }
.nav > a, .nav > .mg { position: relative; display: flex; align-items: center; justify-content: center; color: var(--t3);
  min-height: var(--h-nav); min-width: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.nav > a[aria-current], .nav > .mg[aria-expanded='true'] { color: var(--t1); }
/* the logo, the menu's control: dim while the menu is closed, white while it is open */
.nav > .mg { color: var(--t4); transition: color .15s ease; }
.nav > .mg[aria-expanded='true'] { color: var(--t1); }
/* the current tab is underlined, and so is the logo when the screen shown is one of the menu's places:
   the same 16 x 2 line, on the same line as the tabs' (ADR 0060; restored by the owner on 2026-10-13
   after ADR 0073 had brightened the glyph instead). The glyph itself never changes for it: dim at
   rest, white only while the menu is open -- never a filled, selected-looking mark. */
.nav > a[aria-current]::after, .nav > .mg.on::after { content: ''; position: absolute; bottom: 9px; left: 50%; width: 16px; height: 2px;
  border-radius: 2px; background: var(--t1); transform: translateX(-50%); }
.nav .w { position: relative; }
.mk path { fill: currentColor; }

/* the brand: the mark and the name, BREATHOPS -- identity, not a control (the name is set as a word,
   not in capitals: the quality sprint, phase 9) */
.brandmark { display: flex; align-items: center; gap: 10px; color: var(--brand); min-height: 44px; padding: 0 12px;
  font-family: var(--font); font-size: 14px; letter-spacing: .01em; user-select: none; }
.brandmark .bn { color: var(--t2); font-variation-settings: 'wght' 600, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }

/* the phone's menu: a drawer from the left over a dimmed screen, above the bar -- which stays usable,
   so the logo closes what it opened. The screen behind does not scroll while it is open. */
.drawerw { position: fixed; inset: 0 0 calc(var(--h-nav) + env(safe-area-inset-bottom)) 0; z-index: 20; }
.menu-open, .menu-open body { overflow: hidden; overscroll-behavior: none; }
.menu-open .app.phone > .screen .lst { overflow: hidden; }
/* while the menu is open, where you are stays in sight, quieter: the open menu is what is active now */
.menu-open .nav > a[aria-current] { color: var(--t3); }
.menu-open .nav > a[aria-current]::after { background: var(--t4); }
.drawerw[hidden] { display: none; }
.dscrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .2s ease-out; touch-action: none; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); display: flex; flex-direction: column;
  background: var(--page); border-right: 1px solid var(--border); padding: env(safe-area-inset-top) 8px 0;
  transform: translateX(-100%); transition: transform .22s cubic-bezier(.22,.61,.36,1); touch-action: pan-y; }
.drawer.dragging { transition: none; }
.drawerw .dscrim:has(+ .drawer.dragging) { transition: none; }
.drawerw.open .dscrim { opacity: 1; }
.drawerw.open .drawer { transform: none; }
.drawer .dhd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 0 4px 0 0; }
.drawer .dx { border: 0; background: none; color: var(--t3); }
.drawer .dbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .dscrim, .drawer { transition: none; } }
.bdg { position: absolute; top: -8px; right: -17px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  background: var(--t1); color: var(--page); font-family: var(--font); font-size: 10.5px; display: grid; place-items: center;
  font-variation-settings: 'wght' 600, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- desktop — the workspace */
/* a screen dragged narrower than it may stay: it follows the pointer and fades; past the point of
   collapsing it is nearly gone, and letting go folds it to its strip (the master sprint, 2.2) */
.pane.shrinking > * { opacity: .6; }
.pane.collapse-preview > * { opacity: .2; }
.pane.shrinking, .pane.collapse-preview { overflow: hidden; }
.app.desk { display: flex; height: 100vh; overflow: hidden; }

/* the navigation column: compact by default, as wide as its longest label (WORKSPACE.md §2.1) */
.side { flex: none; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px;
  border-right: 1px solid var(--border); width: max-content; min-width: 152px; max-width: 320px; background: var(--page); }
.side .it { position: relative; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-radius: var(--r-ctl); color: var(--t3); white-space: nowrap; }
.side .it:hover { color: var(--t1); }
.side .it.on { color: var(--t1); background: var(--subtle); font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.side .it.on::before, .side .ci.on::before { content: ''; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px; background: var(--t1); }
.side .brandmark { margin-bottom: 6px; }
/* the menu's groups: Finance, Life, Management, System -- each title opens and closes its group,
   in the desktop column and in the phone's drawer alike */
:is(.side, .drawer) .cg, .mgh { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer; color: var(--t4); border-radius: var(--r-ctl); }
:is(.side, .drawer) .cg { padding: 12px 12px 4px; min-height: 36px; }
:is(.side, .drawer) .cgr:first-child .cg { padding-top: 6px; }
:is(.side, .drawer) .cg:hover, .mgh:hover { color: var(--t2); }
:is(.side, .drawer) .cg svg, .mgh svg { flex: none; transition: transform .12s ease; }
:is(.side, .drawer) .cg[aria-expanded='true'] svg, .mgh[aria-expanded='true'] svg { transform: rotate(90deg); }
/* a group's heading (the master sprint, 5.1): its title opens the group's screen, the chevron beside
   it shows or hides what it holds -- two controls, each its own target */
:is(.side, .drawer) .cg .cgt, .mgh .cgt { flex: 1; min-width: 0; color: inherit; text-decoration: none; padding: 4px 0; }
:is(.side, .drawer) .cg .cgt:hover, .mgh .cgt:hover, :is(.side, .drawer) .cg .cgt.on { color: var(--t1); }
.cgt .cgo { color: var(--t4); }
.cgx { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -8px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--r-ctl); }
.cgx:hover { color: var(--t1); background: var(--subtle); }
.cgx svg { transition: transform .12s ease; }
.cg.open .cgx svg, .mgh.open .cgx svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cgx svg { transition: none; } }
.mgh { min-height: var(--h-ctl); padding: 16px var(--pad) 4px; }
.drawer .ci { min-height: 44px; }
.drawer .ci.on::before { content: ''; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--t1); }
@media (prefers-reduced-motion: reduce) { :is(.side, .drawer) .cg svg, .mgh svg { transition: none; } }
.side .bdg.sb { position: static; margin-left: auto; }
.side .cats { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column;
  margin: 2px -8px 0; padding: 0 8px; }
.side .sfix { flex: none; padding-top: 6px; }
.side .sdiv { height: 1px; background: var(--divider); margin: 0 12px 6px; }
.side .spacer { flex: 1 1 auto; }
.ci { position: relative; min-height: 40px; display: flex; align-items: center; padding: 8px 12px; border-radius: var(--r-ctl);
  color: var(--t2); text-wrap: balance; line-height: 1.35; }
.ci:hover { color: var(--t1); }
.ci.sub { padding-left: 28px; color: var(--t3); }
.ci.on { background: var(--subtle); color: var(--t1); font-variation-settings: 'wght' 550, 'SHRP' 12, 'CRSV' 0, 'slnt' 0; }
.ci.edit { color: var(--t4); margin-top: 6px; cursor: default; }

/* screens, side by side: older ones keep their width as context; the newest fills */
.panes { flex: 1; min-width: 0; display: flex; }
.pane { flex: none; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-right: 1px solid var(--border); }
.pane.grow { flex: 1; border-right: 0; }
.pane > .screen { flex: 1; min-height: 0; }
/* the boundary between two screens: a gutter of no width, so its handle is whole and can be
   grabbed from either side (inside a pane, overflow cut it in half and hid the width shown) */
.rzg { flex: none; width: 0; position: relative; z-index: 5; }
.rzg[hidden] { display: none; }
.rzg > .rz { right: auto; left: -4px; }
.rz.collapsing::after { background: var(--t4); }
/* a context screen collapses to a 56px strip, its title written down it -- by its control, by being
   dragged past its narrowest, or (the oldest) when the newest would fall below 360 */
.fold { flex: none; width: 56px; position: relative; border: 0; border-right: 1px solid var(--border); display: flex; justify-content: center;
  padding-top: 20px; color: var(--t3); background: none; font: inherit; cursor: pointer; }
.fold:hover { color: var(--t1); background: var(--subtle); }
.fold:focus-visible { outline: 2px solid var(--t2); outline-offset: -2px; }
.fold span { writing-mode: vertical-rl; }
.pane .hdr .pcol { color: var(--t3); }
.pane .hdr .pcol:hover { color: var(--t1); }

/* The newest screen fills to the right edge, and so does what it holds (WORKSPACE.md §1): lists,
   Focus, the calendars and their controls use the whole width. A measure is kept only where text is
   read as text, left-aligned:
   - a Settings section keeps its 640px reading measure (SETTINGS.md §6, WORKSPACE.md §4) — the
     scroll area keeps its full width, so its scrollbar stays at the edge, and padding holds the
     content to the measure;
   - the Assistant's thread and its composer keep a conversation's measure;
   - a paragraph — a note, an explanation, an empty state — never runs past ~70 characters. */
.app.desk .pane.grow .lst.setp { max-width: none; padding-right: max(0px, calc(100% - 640px)); }
/* The Assistant uses the whole pane, edge to edge: the thread, proposals, the list of what needs
   you, the status line and the composer all stretch with it, and follow it as it is resized. Only
   a person's own message keeps a bubble's width, on the right. */
.app.desk :is(.fine, .notice, .na-line:not(.center), .sheet-note, .upto > .t-meta, .upto > .t-body) { max-width: 68ch; }

/* ---------------------------------------------------------------- sheets, inside their own screen */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 6; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; max-height: calc(100% - 48px); overflow-y: auto;
  background: var(--elev); border-radius: var(--r-box) var(--r-box) 0 0; padding: 8px var(--pad) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; }
.sheet > * { flex-shrink: 0; }
.app.desk .sheet { left: 50%; right: auto; width: min(520px, calc(100% - 32px)); transform: translateX(-50%); bottom: 16px;
  border-radius: var(--r-box); padding-bottom: 20px; }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--t4); margin: 0 auto 12px; opacity: .7; flex: none; }
.app.desk .grab { display: none; }
.shd { margin: 0 2px 12px; }
.sheet .line { padding: 0 2px; min-height: 40px; }
.sheet .line + .line::before { left: 2px; right: 2px; }

/* a toast: one line with its action, above the navigation */
.toasts { position: absolute; left: var(--pad); right: var(--pad); bottom: 12px; z-index: 9; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 0 var(--pad);
  background: var(--elev); border-radius: var(--r-box); color: var(--t2); box-shadow: 0 0 0 1px var(--border); }
.toast .x { flex: 1; min-width: 0; }
.toast .x b { font-weight: inherit; color: var(--t1); }
.app.desk .toasts { left: auto; width: 420px; right: 24px; bottom: 24px; }

/* screens without the navigation: signing in, the bank's return — one column, centred on desktop */
.app { position: relative; }
.app.bare { align-items: center; }
.app.bare > .screen { width: 100%; max-width: 440px; }
.app.phone .toasts { bottom: calc(var(--h-nav) + env(safe-area-inset-bottom) + 12px); }
.app.phone.bare .toasts { bottom: 16px; }
.pane[hidden] { display: none; }

/* Actions are controls, not text, but a button across a whole wide screen reads as a banner: at
   the workspace's widths a screen's own buttons keep the width a sheet's do. */
.app.desk .pane.grow .btns.sbtn, .app.desk .pane.grow .opsw { max-width: 520px; }
/* Buttons by role, on a screen at the workspace's widths (the master sprint, 2.3; ADR 0067):
   - the screen's main action (primary) takes its words' width, at least 12rem -- never a banner;
   - a secondary action takes its words' width, at least 10rem; two in a row sit side by side;
   - a text action is never stretched: it is as wide as its words;
   - a sheet keeps its own rule -- its actions fill it, one under the other.
   The phone is unchanged: there, full-width actions are what a thumb reaches. */
.app.desk .pane .btns:not(.sheet > .btns) { align-items: flex-start; }
.app.desk .pane .btns:not(.sheet > .btns) > .btn.p { min-width: 12rem; }
.app.desk .pane .btns:not(.sheet > .btns) > .btn.s { min-width: 10rem; }
.app.desk .pane .btns.row2:not(.sheet > .btns) > * { flex: 0 1 auto; }
.app.desk .pane .btns:not(.sheet > .btns) > .btn.t { min-width: 0; padding-inline: 12px; }

/* the account row at the menu's end (ADR 0077): who is signed in, and the way to sign out -- quiet,
   a row like the others, not a button that competes with them */
.acct { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 12px;
  margin: 6px 0 0; border-top: 1px solid var(--divider); color: var(--t2); text-decoration: none; }
.acct:hover, .acct.on { color: var(--t1); }
.acct .acct-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .acct-act { color: var(--t3); }
.side .acct { flex: 0 0 auto; border-radius: 0; }
.drawer .acct { margin: 12px 16px 0; padding: 10px 4px; }