/* Tafel 3: the shared surface of Schwupps Feld, Schwupps Wahl and Schwupps Büro. Kit version 3, 7 October 2026.
   Direction A, Papier und Tafel, with the line discipline of direction B in ledgers and invoices.
   Tafel means board. By day (Tag) the board carries paper: warm paper pinned on a light board, ink on paper.
   By night (Nacht) the board is a chalkboard and the writing is chalk. Draussen keeps two values for sunlight.
   Nothing floats: everything is pinned, ruled, stamped, filed or lit. Radius 2 px; pills only for people.
   No inline styles or scripts anywhere (the pages run under a strict CSP). Tokens only in the :root blocks.
   This file is generated by _src/tafel3/build_kit.py from _src/tafel3/css/*.css; edit the parts, not this file. */

@import url("./fonts/fonts.css");
/* Hanken Grotesk, Instrument Serif and IBM Plex Mono are self-hosted in kit/fonts (fonts.css, with their OFL texts);
   nothing loads from a third party */

:root {
  color-scheme: light;
  /* paper and board */
  --page: #F3EFE6;            /* warm paper: the light board everything is pinned to */
  --board: #E6E2D9;           /* the recess inside a board's frame: page and 6 % ink */
  --sheet: #FFFDF8;           /* a sheet of paper */
  --frame: #FFFDF8;           /* the 4 px paper frame of a board */
  --ink: #141414;
  --ink-2: #3E3E3D;           /* ink at 82 %: reading text beside the main line */
  --muted: #646360;           /* ink at 64 %: secondary text; 4.65:1 in the board's recess, 5.2:1 on the page, 5.9:1 on a sheet */
  --rule: rgba(20, 20, 20, 0.16);
  --edge: rgba(20, 20, 20, 0.12);
  --edge-strong: rgba(20, 20, 20, 0.28);
  --control-line: rgba(20, 20, 20, 0.58);
  --wash: rgba(20, 20, 20, 0.04);
  --wash-strong: rgba(20, 20, 20, 0.07);
  --lift: rgba(20, 20, 20, 0.22);          /* the 1 px offset shadow of what is lifted */
  --lift-soft: rgba(20, 20, 20, 0.1);
  --scrim: rgba(20, 20, 20, 0.3);
  --pin: #2B2A27;
  --pin-shadow: rgba(20, 20, 20, 0.34);
  --pin-light: rgba(255, 253, 248, 0.38);
  --hole: rgba(20, 20, 20, 0.5);
  --knock: var(--page);       /* what shows through a cut in a mark: the ground behind it */
  --select: rgba(20, 20, 20, 0.14);
  --focus: #141414;

  /* states, from TAFEL.md 3.1; -ink tones are text-safe; -glass is the unlit glass of a lamp */
  --ok: #1E8A4C; --ok-ink: #146B39; --ok-tint: #E4F0E6; --ok-glass: #D2E8D9;
  --wait: #E8990B; --wait-ink: #7A4F00; --wait-tint: #FAEFD7; --wait-glass: #F8E4BE; --on-wait: #141414;
  --stop: #D13A21; --stop-ink: #A12B16; --stop-tint: #F7E3DC; --stop-glass: #F5D3C9;
  --sign: #1F4FC4; --sign-ink: #1A43A8; --sign-tint: #E4E9F8; --sign-glass: #D2DCF5; --on-sign: #FFFDF8;
  --off: #3A3936; --unknown-ink: #5E5D5A;
  --lamp-off: #F1EEE6;        /* an unlit, planned lamp */
  --lamp-off-ring: rgba(20, 20, 20, 0.5);
  --lamp-dark: #4A4844;       /* unknown: a dark lamp ... */
  --lamp-socket: #D8D4CB;     /* ... with an empty socket ring, never read as off or done */
  --hatch: rgba(232, 153, 11, 0.85);

  /* product inks (TAFEL.md 19): the mark, the stamp, the primary action, engraved labels; nothing else */
  --ink-feld: #B4234F; --ink-feld-deep: #96173F; --ink-feld-tint: #F6E3E8;
  --ink-wahl: #0A6A6C; --ink-wahl-deep: #075557; --ink-wahl-tint: #DCEDEC;
  --ink-buro: #5A3FC0; --ink-buro-deep: #4A31A6; --ink-buro-tint: #E7E3F7;
  --on-ink-brand: #FFFDF8;
  --on-brand-rule: rgba(255, 253, 248, 0.42);

  /* the paper of a document: paper in every theme (TAFEL.md 5) */
  --doc-paper: #FFFDF8;
  --doc-ink: #141414;
  --doc-ink-2: #3E3E3D;
  --doc-wash: #F5F2EA;
  --doc-muted: #5E5D5A;
  --doc-rule: rgba(20, 20, 20, 0.16);

  /* type: Hanken Grotesk for everything a person reads, IBM Plex Mono for codes only */
  --f-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-engrave: var(--f-ui);
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --f-display: "Instrument Serif", Georgia, serif;
  --t-xs: 0.75rem;    /* 12 */
  --t-s: 0.8125rem;   /* 13 */
  --t-m: 0.9375rem;   /* 15 */
  --t-l: 1.0625rem;   /* 17 */
  --t-xl: 1.25rem;    /* 20 */
  --t-2xl: 1.5rem;    /* 24 */
  --t-3xl: 2rem;      /* 32 */
  --t-4xl: 2.5rem;    /* 40 */
  --t-5xl: 4rem;      /* 64, the lock screen's clock */

  /* space, radii, touch, motion */
  --r: 2px;
  --r-control: 2px; --r-panel: 2px; --r-plate: 2px; --r-chip: 2px;
  --touch: 44px;
  --touch-field: 48px;
  --frame-w: 4px;
  --rail-w: 232px; --inspector-w: 380px; --top-h: 56px; --proto-h: 46px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: var(--ease);
  --ease-in: cubic-bezier(0.4, 0, 0.6, 1);
  --vh: 1vh;

  /* the paper's own drawings, as masks and patterns */
  --solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8'/%3E%3C/svg%3E");
  --tear-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 8L0 4 3 2.5 6 4.5 9 1.8 13 3.6 16 2.2 20 5 23 2.6 27 3.9 30 1.5 34 4.2 37 2.8 41 4.8 44 2 48 3.3 51 1.6 55 4.4 58 2.9 62 5.1 65 2.3 69 3.7 72 1.9 76 4.6 79 2.5 83 3.8 86 1.7 90 4.1 93 2.6 97 5 100 2.2 104 3.5 107 1.8 111 4.3 114 2.7 117 3.9 120 4 120 8Z'/%3E%3C/svg%3E");
  --tear-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4L3 2.5 6 4.5 9 1.8 13 3.6 16 2.2 20 5 23 2.6 27 3.9 30 1.5 34 4.2 37 2.8 41 4.8 44 2 48 3.3 51 1.6 55 4.4 58 2.9 62 5.1 65 2.3 69 3.7 72 1.9 76 4.6 79 2.5 83 3.8 86 1.7 90 4.1 93 2.6 97 5 100 2.2 104 3.5 107 1.8 111 4.3 114 2.7 117 3.9 120 4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0H1.6A2.4 2.4 0 0 0 6.4 0H8V7H0Z'/%3E%3C/svg%3E");
  --perf-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 7H1.6A2.4 2.4 0 0 1 6.4 7H8V0H0Z'/%3E%3C/svg%3E");
  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the hatch of a lamp: a lamp's glass holds no words (its hidden word stands beside it), so its gaps may stay open */
  --hatch-pattern: repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 4px);
  /* a hatch under words covers its ground: its line is a colour on paper and its gap the paper itself, never a
     transparent stop, which a contrast check reads as a dark ground under the words. The kit's rules lay it on the
     ground they cover (paper, the plate of a hovered or selected row, the tint of a called row: --hatch-on);
     --hatch-soft and --hatch-grey are the same hatches on a sheet, for product styles */
  --hatch-line: var(--wait-glass);
  --hatch-step: 6px;
  --hatch-grey-mix: 26%;
  --hatch-soft: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step));
  --hatch-grey: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--sheet)) 0 1px, var(--sheet) 1px 4px);
  --plate-2: #F5F2EA;
  --seam: rgba(20, 20, 20, 0.22);
  --ruled: repeating-linear-gradient(180deg, transparent 0 27px, rgba(20, 20, 20, 0.1) 27px 28px);
}

:root[data-theme="nacht"] {
  color-scheme: dark;
  --page: #202C28;            /* the green-black slate of the chalkboard */
  --board: #1B2622;
  --sheet: #2C3732;
  --frame: #34403A;
  --ink: #F2EFE6;             /* chalk */
  --ink-2: #D0D0C8;
  --muted: #9EA19A;           /* chalk at 60 %: 4.7:1 on a surface, 5.5:1 on the slate; on a tint it gives way to --ink-2 */
  --rule: rgba(242, 239, 230, 0.18);
  --edge: rgba(242, 239, 230, 0.15);
  --edge-strong: rgba(242, 239, 230, 0.3);
  --control-line: rgba(242, 239, 230, 0.52);
  --wash: rgba(242, 239, 230, 0.045);
  --wash-strong: rgba(242, 239, 230, 0.08);
  --lift: rgba(8, 12, 10, 0.75);
  --lift-soft: rgba(8, 12, 10, 0.4);
  --scrim: rgba(8, 12, 10, 0.55);
  --pin: #C9C7BE;
  --pin-shadow: rgba(8, 12, 10, 0.85);
  --pin-light: rgba(255, 255, 255, 0.4);
  --hole: rgba(242, 239, 230, 0.45);
  --select: rgba(242, 239, 230, 0.22);
  --focus: #F2EFE6;
  --ok: #38C878; --ok-ink: #79DCA4; --ok-tint: #1F3A2C; --ok-glass: #24443A;
  --wait: #FFB020; --wait-ink: #FFC95E; --wait-tint: #3C3420; --wait-glass: #4A3E22;
  --stop: #FF5E40; --stop-ink: #FF9580; --stop-tint: #42291F; --stop-glass: #4D2B22;
  --sign: #7FA3FF; --sign-ink: #A9C1FF; --sign-tint: #26334F; --sign-glass: #2D3B5C; --on-sign: #202C28;
  --off: #A6A9A2; --unknown-ink: #A6A9A2;
  --lamp-off: #2F3A35;
  --lamp-off-ring: rgba(242, 239, 230, 0.45);
  --lamp-dark: #141C19;
  --lamp-socket: #8E918A;
  --hatch: rgba(255, 176, 32, 0.85);
  /* the inks in chalk: the Tag ink mixed 45 % with chalk */
  --ink-feld: #D693A2; --ink-feld-deep: #C98393; --ink-feld-tint: #3F3036;
  --ink-wahl: #8AB3AF; --ink-wahl-deep: #7BA6A2; --ink-wahl-tint: #2C3F3D;
  --ink-buro: #AEA0D5; --ink-buro-deep: #A092CC; --ink-buro-tint: #36344A;
  --on-ink-brand: #202C28;
  --on-brand-rule: rgba(32, 44, 40, 0.38);
  --plate-2: #2E3934;
  --seam: rgba(242, 239, 230, 0.24);
  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23F2EFE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* chalk at 18 % keeps secondary words on a disabled segment at 4.5:1 over the line as over the gap */
  --hatch-line: var(--wait-glass);
  --hatch-step: 6px;
  --hatch-grey-mix: 18%;
  --hatch-soft: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step));
  --hatch-grey: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--sheet)) 0 1px, var(--sheet) 1px 4px);
  --ruled: repeating-linear-gradient(180deg, transparent 0 27px, rgba(242, 239, 230, 0.1) 27px 28px);
}

/* Draussen: two values for full sunlight. The lamps show their glyph, and the glyph and the word carry the state. */
:root[data-theme="draussen"], .phone.draussen {
  color-scheme: light;
  --page: #FFFFFF; --board: #FFFFFF; --sheet: #FFFFFF; --frame: #FFFFFF; --plate-2: #FFFFFF;
  --ink: #000000; --ink-2: #000000; --muted: #000000;
  --rule: #000000; --edge: #000000; --edge-strong: #000000; --control-line: #000000; --seam: #000000;
  --wash: #FFFFFF; --wash-strong: #FFFFFF; --lift: #000000; --lift-soft: #000000; --scrim: rgba(0, 0, 0, 0.7);
  --pin: #000000; --pin-shadow: #000000; --pin-light: #FFFFFF; --hole: #000000;
  --ok: #000000; --ok-ink: #000000; --ok-tint: #FFFFFF; --ok-glass: #FFFFFF;
  --wait: #000000; --wait-ink: #000000; --wait-tint: #FFFFFF; --wait-glass: #FFFFFF; --on-wait: #FFFFFF;
  --stop: #000000; --stop-ink: #000000; --stop-tint: #FFFFFF; --stop-glass: #FFFFFF;
  --sign: #000000; --sign-ink: #000000; --sign-tint: #FFFFFF; --sign-glass: #FFFFFF; --on-sign: #FFFFFF;
  --off: #000000; --unknown-ink: #000000; --lamp-off: #FFFFFF; --lamp-off-ring: #000000; --lamp-dark: #FFFFFF; --lamp-socket: #000000;
  --hatch: #000000;
  --ink-feld: #000000; --ink-feld-deep: #000000; --ink-feld-tint: #FFFFFF;
  --ink-wahl: #000000; --ink-wahl-deep: #000000; --ink-wahl-tint: #FFFFFF;
  --ink-buro: #000000; --ink-buro-deep: #000000; --ink-buro-tint: #FFFFFF;
  --on-ink-brand: #FFFFFF; --on-brand-rule: #FFFFFF;
  --focus: #000000;
  --hatch-line: var(--hatch);
  --hatch-step: 5px;
  --hatch-grey-mix: 100%;
  --hatch-soft: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step));
  --hatch-grey: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--sheet)) 0 1px, var(--sheet) 1px 4px);
}

/* aliases of Tafel 2, re-declared wherever a theme is set, so that product styles keep working */
/* the product inks in chalk, for words on the dark prototype bar in every theme */
:root { --ink-feld-chalk: #D693A2; --ink-wahl-chalk: #8AB3AF; --ink-buro-chalk: #AEA0D5; }
:root, :root[data-theme], .phone.draussen {
  --ground: var(--page);
  --ground-2: var(--board);
  --plate: var(--sheet);
  --plate-edge: var(--edge-strong);
  --line: var(--rule);
  --engrave-hi: transparent;
  --shadow-plate: 0 0 0 1px var(--edge);
  --shadow-raise: 0 0 0 1px var(--edge), 0 1px 0 var(--lift-soft);
  --shadow-sheet: 0 0 0 1px var(--edge), 1px 1px 0 var(--lift);
  --shadow-float: 1px 1px 0 var(--lift);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--seam) transparent; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 var(--t-m)/1.5 var(--f-ui);
  font-kerning: normal; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: break-word;
  --ink-brand: var(--ink-feld); --ink-brand-deep: var(--ink-feld-deep); --ink-brand-tint: var(--ink-feld-tint);
  --primary: var(--ink-brand); --primary-hover: var(--ink-brand-deep); --on-primary: var(--on-ink-brand);
  --ic-block: transparent; --ic-point: currentColor;
}
body[data-product="buro"] { --ink-brand: var(--ink-buro); --ink-brand-deep: var(--ink-buro-deep); --ink-brand-tint: var(--ink-buro-tint); }
body[data-product="wahl"] { --ink-brand: var(--ink-wahl); --ink-brand-deep: var(--ink-wahl-deep); --ink-brand-tint: var(--ink-wahl-tint); }
/* chalk carries a 0.2 px softness; nothing else glows */
:root[data-theme="nacht"] body { text-shadow: 0 0 0.2px rgba(242, 239, 230, 0.5); }
[data-ink="buro"] { --mk: var(--ink-buro); }
[data-ink="wahl"] { --mk: var(--ink-wahl); }
[data-ink="feld"] { --mk: var(--ink-feld); }
::selection { background: var(--select); color: var(--ink); }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--ink); letter-spacing: inherit; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--edge-strong); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
ol.num { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; text-align: left; white-space: normal; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; }
b, strong { font-weight: 600; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.code, .mono, .stamp .code, .sheet .code { overflow-wrap: anywhere; }

/* ---------- icons: one drawn set, 20 grid, 1.5 px line, round ends, no fills ---------- */
svg.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.icon.s { width: 16px; height: 16px; }
svg.icon.l { width: 28px; height: 28px; stroke-width: 1.35; }
/* the selectors start at the symbol, so that they also reach the copy a use element draws */
symbol .f, symbol .s, symbol .p { fill: currentColor; stroke: none; }
symbol .k { fill: var(--knock); stroke: none; }
symbol .ks { fill: none; stroke: var(--knock); stroke-linecap: butt; }
symbol .b { fill: none; stroke: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- type helpers ---------- */
/* figures are set in the text face with tabular figures, money and document totals too (body); the face of codes is
   only for codes: a Belegcode, a checksum, a document number, an IBAN, a file name or an address */
.mono { font-family: var(--f-mono); font-size: 0.93em; letter-spacing: 0; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* a figure never breaks; the words under it ("im Monat", "ohne Indexanpassung") may */
.num .meta { white-space: normal; }
.muted { color: var(--muted); }
.small { font-size: var(--t-s); }
.xs { font-size: var(--t-xs); }
.lead { max-width: 64ch; color: var(--ink-2); }
.measure { max-width: 68ch; }
.stack { display: grid; gap: 12px; }
.stack.tight { gap: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.row.between { justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spacer { flex: 1; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px 0; border: 0; box-shadow: inset 0 0 0 1px var(--edge-strong), inset 0 -1px 0 var(--edge-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink-2); font: 600 var(--t-xs)/1.45 var(--f-ui); text-align: center; white-space: nowrap; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }

/* engraved: in Tafel 3 a heading in the text face, sentence case, never condensed capitals */
.engrave { font-family: var(--f-ui); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.25; text-shadow: none; }
.engrave.sm { font-size: var(--t-m); }
.engrave.md { font-size: var(--t-xl); }
.engrave.lg { font-size: var(--t-3xl); line-height: 1.12; letter-spacing: -0.01em; }
.engrave.xl { font-size: var(--t-4xl); line-height: 1.08; letter-spacing: -0.015em; }
.has-sub > .t { text-transform: none; }
.tafel-head .title.has-sub, .thread-head .title.has-sub, .hero-no .street.has-sub, .appbar h1.has-sub, .pub-head h1.has-sub { text-transform: none; }
/* an engraved label: letter-spaced capitals at 12 px, the label of a plate, a group or a drawer */
.cmd-group, .hint-group, .proto-group > span, .demo-tabs .grp, .site-footer h2, .daymark {
  font: 600 var(--t-xs)/1.35 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- wordmark and marks: one grid, one stroke, one colour; the product ink on the mark and the second word ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.wordmark .mark, .family .mark, .made .mark, .brandmark, .fam .mark {
  --mark-c: var(--mk, var(--ink-brand)); flex: none; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mark-c);
  --ic-block: transparent; --ic-point: currentColor;
}
.wordmark .mark svg, .family .mark svg, .made .mark svg, .brandmark svg, .fam .mark svg {
  display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.wordmark .mark { width: 26px; height: 26px; }
.wordmark .name { font: 700 var(--t-l)/1.15 var(--f-ui); letter-spacing: -0.012em; white-space: nowrap; }
.wordmark .name .wm-p, .family b .wm-p, .fam b .wm-p, .proto-name .wm-p { color: var(--mk, var(--ink-brand)); }
/* in the family each product's second word carries its own ink, beside its own mark */
.mark[data-ink="buro"] + span .wm-p { color: var(--ink-buro); }
.mark[data-ink="wahl"] + span .wm-p { color: var(--ink-wahl); }
.mark[data-ink="feld"] + span .wm-p { color: var(--ink-feld); }
.wordmark .name small { display: block; margin-top: 3px; font: 500 var(--t-xs)/1.2 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.wordmark.lg .mark { width: 40px; height: 40px; }
.wordmark.lg .name { font-size: var(--t-3xl); }
.brandmark { width: 48px; height: 48px; }
.brandmark { display: grid; place-items: center; }
.brandmark svg { width: 40px; height: 40px; }
.brandmark.xl { width: 96px; height: 96px; }
.brandmark.xl svg { width: 84px; height: 84px; }

/* ---------- Wupp, the character: the symbol i-wupp reads its state from the element that draws it ---------- */
symbol .w-body, symbol .w-pupil, symbol .w-lid { fill: currentColor; stroke: none; }
symbol .w-white { fill: var(--knock); stroke: none; }
symbol .w-lines { display: var(--w-lines, inline); animation: var(--w-al, none); transform-box: fill-box; transform-origin: 100% 50%; }
symbol .w-l { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: var(--w-lo, 1); transform-box: fill-box; transform-origin: 100% 50%; }
symbol .w-l1 { animation: var(--w-a1, none); }
symbol .w-l2 { animation: var(--w-a2, none); }
symbol .w-l3 { animation: var(--w-a3, none); }
symbol .w-dots { display: var(--w-dots, none); }
symbol .w-d { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; opacity: 0.3; }
symbol .w-d1 { animation: var(--w-d1, none); }
symbol .w-d2 { animation: var(--w-d2, none); }
symbol .w-d3 { animation: var(--w-d3, none); }
symbol .w-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--w-lid, 0.1)); animation: var(--w-blink, none); }
symbol .w-look { transform: translate(var(--w-lx, -0.2px), var(--w-ly, 0.5px)); transition: transform 160ms var(--ease); }
/* the five states; any ancestor may set one, and a few places set their own */
[data-wupp="ruht"], .notif .who-chip.wupp, .clip-tab { --w-lid: 0.52; --w-lx: -0.3px; --w-ly: 0.6px; --w-lo: 0.4; --w-blink: w-blink 5200ms ease-in-out infinite; }
[data-wupp="hoert"] { --w-lid: 0; --w-lx: -0.7px; --w-ly: 0px; --w-lo: 1; --w-blink: none;
  --w-a1: w-listen 1500ms ease-out infinite; --w-a2: w-listen 1500ms ease-out 120ms infinite; --w-a3: w-listen 1500ms ease-out 240ms infinite; }
[data-wupp="denkt"] { --w-lid: 0.28; --w-lx: 0.5px; --w-ly: -0.9px; --w-lines: none; --w-dots: inline; --w-blink: none;
  --w-d1: w-think 1200ms ease-in-out infinite; --w-d2: w-think 1200ms ease-in-out 160ms infinite; --w-d3: w-think 1200ms ease-in-out 320ms infinite; }
[data-wupp="meldet"], .msg.rings .who-chip.wupp, .clip-tab.has-news { --w-lid: 0; --w-lx: 0.7px; --w-ly: 0.2px; --w-lo: 1; --w-blink: none; --w-al: w-dash 2600ms var(--ease) infinite; }
[data-wupp="wartet"], .drawer.wupp .wupp-id .who-chip.wupp { --w-lid: 0.1; --w-lx: -0.2px; --w-ly: 0.5px; --w-lo: 1; --w-blink: w-blink-twice 4200ms ease-in-out infinite; }
.wupp-look { --w-lx: 0.6px; --w-ly: 0.9px; }
/* Wupp is a figure, not a person: no plate around it */
.who-chip.wupp { width: 26px; height: 26px; border-radius: 0; background: none; box-shadow: none; color: var(--ink); }
.who-chip.wupp svg { width: 26px; height: 26px; fill: none; stroke: none; overflow: visible; }
.who-chip.wupp.s { width: 20px; height: 20px; }
.who-chip.wupp.s svg { width: 20px; height: 20px; }
.who-chip.wupp.l { width: 40px; height: 40px; }
.who-chip.wupp.l svg { width: 40px; height: 40px; }
svg.icon use[href="#i-wupp"] { stroke: none; }

/* ---------- lamps: a real indicator lamp, 10 px glass, 6 px core, 1 px ring; one per row, at its left edge ----------
   The lamp is drawn by its own box: the ring and the glass and the core are inset shadows, so that the core can fade.
   The glyph inside the element stays in the markup for Draussen, where the glyph carries the state. */
.light {
  --l-ring: var(--lamp-off-ring); --l-glass: var(--lamp-off); --l-core: var(--lamp-off); --l-socket: var(--l-core);
  position: relative; display: inline-block; flex: none; width: 12px; height: 12px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background-color: var(--l-glass); color: var(--l-ring); vertical-align: -1px;
  box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-socket), inset 0 0 0 6px var(--l-core);
  transition: box-shadow 120ms ease-out;
}
.light > svg { display: none; }
.light.s { width: 12px; height: 12px; }
.light.l { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px var(--l-ring), inset 0 0 0 5.5px var(--l-glass), inset 0 0 0 7px var(--l-socket), inset 0 0 0 11px var(--l-core); }
[data-s="ok"] { --l-ring: var(--ok-ink); --l-glass: var(--ok-glass); --l-core: var(--ok); --l-socket: var(--ok); }
[data-s="wait"] { --l-ring: var(--wait-ink); --l-glass: var(--wait-glass); --l-core: var(--wait); --l-socket: var(--wait); }
[data-s="stop"] { --l-ring: var(--stop-ink); --l-glass: var(--stop-glass); --l-core: var(--stop); --l-socket: var(--stop); }
[data-s="sign"] { --l-ring: var(--sign-ink); --l-glass: var(--sign-glass); --l-core: var(--sign); --l-socket: var(--sign); }
[data-s="none"], [data-s="later"] { --l-ring: var(--lamp-off-ring); --l-glass: var(--lamp-off); --l-core: var(--lamp-off); --l-socket: var(--lamp-off); }
[data-s="unk"] { --l-ring: var(--ink); --l-glass: var(--lamp-dark); --l-core: var(--lamp-dark); --l-socket: var(--lamp-socket); }
[data-s="sug"] { --l-ring: var(--wait-ink); --l-glass: var(--sheet); --l-core: var(--sheet); --l-socket: var(--sheet); }
.light[data-s="sug"] { background: var(--hatch-pattern), var(--sheet); box-shadow: inset 0 0 0 1px var(--l-ring); }
.light.l[data-s="sug"] { box-shadow: inset 0 0 0 1.5px var(--l-ring); }
/* a running step: a lit grey core */
.slip-step[data-s="run"] .light { --l-core: var(--muted); --l-socket: var(--muted); }
/* a lamp that explains itself is a button with a 40 px target around its 12 px glass */
button.light { cursor: help; font: inherit; }
button.light::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
button.light:hover { box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-socket), inset 0 0 0 6px var(--l-core), 0 0 0 3px var(--wash-strong); }
[data-why] { cursor: help; }
:root[data-theme="draussen"] .light, .phone.draussen .light { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #000000; }
:root[data-theme="draussen"] .light > svg, .phone.draussen .light > svg { display: block; width: 13px; height: 13px; fill: none; stroke: #000000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- chips: a state is a lamp and a word, never a coloured pill ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; max-width: 100%; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--ink-2); font: 500 var(--t-s)/1.35 var(--f-ui); white-space: normal; text-align: left; vertical-align: middle; }
.chip > svg { display: none; }
.chip[data-s]::before {
  content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background-color: var(--l-glass);
  box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-socket), inset 0 0 0 6px var(--l-core);
}
.chip[data-s="sug"]::before { background: var(--hatch-pattern), var(--sheet); box-shadow: inset 0 0 0 1px var(--l-ring); }
.chip:not([data-s]) { padding: 2px 8px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong); color: var(--ink-2); }
.chip.btn-chip { min-height: 32px; padding: 4px 10px; border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--control-line); color: var(--ink); cursor: pointer; }
.chip.btn-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.btn-chip[aria-pressed="true"] { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--sheet); }
:root[data-theme="draussen"] .chip > svg, .phone.draussen .chip > svg { display: block; width: 14px; height: 14px; fill: none; stroke: #000000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="draussen"] .chip[data-s]::before, .phone.draussen .chip[data-s]::before { display: none; }

/* confidence band beside a suggestion: three bars, the filled count says how sure */
.band { display: inline-flex; align-items: end; gap: 2px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.band i { display: block; width: 3px; background: var(--seam); border-radius: 0; }
.band i:nth-child(1) { height: 5px; } .band i:nth-child(2) { height: 8px; } .band i:nth-child(3) { height: 12px; }
.band[data-b="3"] i { background: currentColor; }
.band[data-b="2"] i:nth-child(-n+2) { background: currentColor; }
.band[data-b="1"] i:nth-child(1) { background: currentColor; }

/* legend under a board */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-s); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- buttons: paper keys with a hairline edge; the one primary action in the product's ink, with its count ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch); padding: 8px 15px;
  border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--ink);
  font: 500 var(--t-m)/1.2 var(--f-ui); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}
.btn svg.icon { width: 18px; height: 18px; }
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; --knock: var(--primary); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.sign { background: var(--sign); border-color: var(--sign); color: var(--on-sign); font-weight: 600; }
.btn.sign:hover:not(:disabled) { background: var(--sign-ink); border-color: var(--sign-ink); }
.btn.stop { color: var(--stop-ink); border-color: var(--stop-ink); }
.btn.stop:hover:not(:disabled) { background: var(--stop-tint); }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.quiet:hover { background: var(--wash-strong); border-color: transparent; }
.btn.block { display: flex; width: 100%; }
.btn.sm { min-height: 36px; padding: 5px 11px; font-size: var(--t-s); gap: 6px; }
.btn.sm svg.icon { width: 16px; height: 16px; }
/* a count that carries its word ("3 Anbieter") keeps the space between them: a flex box drops the leading space of a
   run of text, so the parts are set apart by a gap */
.btn .n { display: inline-flex; align-items: center; align-self: stretch; gap: 0.3em; margin: -8px -15px -8px 4px; padding: 0 12px; border-left: 1px solid var(--rule); font-weight: 600; font-variant-numeric: tabular-nums; }
.btn.sm .n { margin: -5px -11px -5px 2px; padding: 0 9px; }
.btn.primary .n, .btn.sign .n { border-left-color: var(--on-brand-rule); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; border-color: var(--control-line); background: transparent; color: var(--muted); }
.btn.primary:disabled, .btn.sign:disabled { background: transparent; color: var(--muted); }
.btn kbd { box-shadow: inset 0 0 0 1px currentColor; background: transparent; color: inherit; }
.iconbtn { flex: none; position: relative; display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.iconbtn:hover { background: var(--wash-strong); }
.iconbtn .count { position: absolute; top: 5px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r); background: var(--ink); color: var(--sheet); font: 600 var(--t-xs)/17px var(--f-ui); text-align: center; text-shadow: none; }
.linkbtn { padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--edge-strong); cursor: pointer; text-align: inherit; }
.linkbtn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------- fields: ruled fields on paper ---------- */
.field { display: grid; gap: 5px; }
.field label, .field .lab { font: 600 var(--t-s)/1.35 var(--f-ui); }
.field .help { font-size: var(--t-xs); color: var(--muted); }
.in { width: 100%; min-height: var(--touch); padding: 8px 12px; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--ink); }
.in:hover { border-color: var(--ink); }
.in::placeholder { color: var(--muted); opacity: 1; }
select.in { appearance: none; padding-right: 36px; background-image: var(--chev-img); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; }
textarea.in { min-height: 96px; resize: vertical; line-height: 1.5; }
.in.money { text-align: right; font-variant-numeric: tabular-nums; }
.in.is-bad { border-color: var(--stop-ink); box-shadow: inset 0 0 0 1px var(--stop-ink); }
.err { display: flex; gap: 6px; align-items: start; color: var(--stop-ink); font-size: var(--t-s); }
.opt { display: flex; align-items: center; gap: 10px; min-height: var(--touch); cursor: pointer; }
.opt input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; flex: none; }
.opt.boxed { padding: 6px 12px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--sheet); }
.opt.boxed:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg { display: inline-flex; flex-wrap: wrap; border: 0; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--control-line); overflow: hidden; max-width: 100%; }
.seg button { min-height: 38px; padding: 4px 13px; border: 0; background: transparent; color: var(--ink-2); font: 500 var(--t-s)/1.2 var(--f-ui); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button:hover { color: var(--ink); background: var(--wash); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); font-weight: 600; text-shadow: none; }
.seg button:disabled { color: var(--ink-2); background-color: var(--sheet); background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--sheet)) 0 1px, var(--sheet) 1px 4px); cursor: not-allowed; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--touch); }
.switch input { appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--board); cursor: pointer; transition: background-color 120ms ease-out; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 1px; background: var(--sheet); box-shadow: 0 0 0 1px var(--control-line); transition: transform 120ms var(--ease); }
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::after { transform: translateX(18px); box-shadow: none; }
/* tabs: register tabs on the edge of a sheet */
.tabs { display: flex; gap: 2px; align-items: flex-end; padding-left: 4px; border-bottom: 1px solid var(--edge-strong); overflow-x: auto; scrollbar-width: thin; }
.tabs [role="tab"] { position: relative; flex: none; min-height: 40px; padding: 8px 13px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: transparent; color: var(--muted); font: 500 var(--t-s)/1.2 var(--f-ui); white-space: nowrap; cursor: pointer; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { margin-bottom: -1px; padding-bottom: 9px; background: var(--sheet); border-color: var(--edge-strong); color: var(--ink); font-weight: 600; }
.tabs .n { margin-left: 5px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.search { display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 12px; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); }
.search input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.search svg.icon { color: var(--muted); }
/* the stepper: numbered stations on a ruled line */
.stepper { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--t-s); color: var(--muted); }
.stepper li { display: flex; align-items: center; gap: 8px; }
.stepper .no { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--control-line); border-radius: 50%; font: 600 var(--t-xs)/1 var(--f-ui); color: var(--ink-2); }
.stepper li.is-on { color: var(--ink); font-weight: 600; }
.stepper li.is-on .no { background: var(--ink); border-color: var(--ink); color: var(--sheet); text-shadow: none; }
.stepper li.is-done .no { border-color: var(--ok-ink); color: var(--ok-ink); background: var(--ok-glass); }
/* in the phone frame the stations stand on one ruled line, each word under its number: four stations keep one line at
   the width of a phone in the three languages, where the row of words above breaks after the third */
.phone .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.phone .stepper li { position: relative; flex-direction: column; gap: 4px; text-align: center; }
.phone .stepper li + li::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 17px); right: calc(50% + 17px); border-top: 1px solid var(--rule); }
/* key and value lines */
.kv { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: 6px 16px; font-size: var(--t-s); }
.kv dt { color: var(--muted); }
.kv dd { color: var(--ink); }
.kv dd.num { text-align: left; white-space: normal; }
.kv.lines { gap: 0 16px; }
.kv.lines dt, .kv.lines dd { padding: 8px 0 7px; border-top: 1px solid var(--rule); }
.kv > div { display: contents; }

/* ---------- prototype chrome (not part of the product): one dark ruler line above the board ---------- */
:root { --proto-bg: #1B1B1A; --proto-ink: #ECE8DF; --proto-muted: #A9A69E; --proto-line: rgba(236, 232, 223, 0.22); }
.proto { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 6px 16px; min-height: var(--proto-h); padding: 5px 14px; background: var(--proto-bg); color: var(--proto-ink); font-size: var(--t-s); text-shadow: none; }
.proto-name { flex: none; display: flex; align-items: baseline; gap: 8px; font: 700 var(--t-m)/1 var(--f-ui); letter-spacing: -0.01em; color: var(--proto-ink); white-space: nowrap; }
.proto-name small { font: 500 var(--t-xs)/1 var(--f-ui); letter-spacing: 0; color: var(--proto-muted); }
.proto-name .wm-p { color: var(--ink-feld-chalk); }
body[data-product="wahl"] .proto-name .wm-p { color: var(--ink-wahl-chalk); }
body[data-product="buro"] .proto-name .wm-p { color: var(--ink-buro-chalk); }
.proto-nav { display: flex; flex: 1; flex-wrap: nowrap; gap: 2px 16px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.proto-nav::-webkit-scrollbar { display: none; }
.proto-group { display: flex; flex: none; align-items: center; gap: 1px; }
.proto-group > span { margin-right: 4px; color: var(--proto-muted); }
.proto a.scr { padding: 5px 7px; border-radius: var(--r); color: var(--proto-ink); text-decoration: none; white-space: nowrap; }
.proto a.scr:hover { background: rgba(236, 232, 223, 0.12); }
.proto a.scr[aria-current="page"] { background: var(--proto-ink); color: var(--proto-bg); font-weight: 600; }
.proto .seg { flex: none; border-color: var(--proto-line); background: transparent; }
.proto .seg button { min-height: 30px; padding: 2px 9px; color: var(--proto-ink); font-size: var(--t-xs); }
.proto .seg button + button { border-left-color: var(--proto-line); }
.proto .seg button:hover { background: rgba(236, 232, 223, 0.12); }
.proto .seg button[aria-pressed="true"] { background: var(--proto-ink); color: var(--proto-bg); }
.proto:focus-visible, .proto a:focus-visible, .proto button:focus-visible { outline-color: var(--proto-ink); }
.screen-note { max-width: calc(64ch + 48px); margin: 0 auto 28px; padding: 0 24px; font-size: var(--t-s); color: var(--ink-2); }
.screen-note b { color: var(--ink); }
.stage { min-height: calc(var(--vh) * 100 - var(--proto-h)); }
.screen.desk > .screen-note { grid-column: 1 / -1; margin: 24px auto 28px; }

/* ---------- screens ---------- */
.screen { display: block; }
.screen.field, .screen.public { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 0; padding: 32px 16px 40px; }
.screen.desk { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(var(--vh) * 100 - var(--proto-h)); }
.screen.desk.with-inspector { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--inspector-w); }

/* the rail: the product's own navigation, the same shape in the three products */
.rail { position: sticky; top: var(--proto-h); height: calc(var(--vh) * 100 - var(--proto-h)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--page); border-right: 1px solid var(--rule); --knock: var(--page); }
.rail-brand { display: grid; gap: 12px; padding: 16px 14px 10px 16px; }
.rail-brand .wordmark .name { font-size: var(--t-l); }
.ws { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px 6px 11px; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--ink); font: 500 var(--t-s)/1.2 var(--f-ui); text-align: left; white-space: nowrap; cursor: pointer; }
.ws > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws svg.icon { flex: none; width: 16px; height: 16px; color: var(--muted); }
.ws:hover { border-color: var(--ink); }
.rail nav { display: grid; align-content: start; gap: 1px; padding: 4px 10px 8px; overflow-y: auto; scrollbar-width: thin; }
.rail nav a, .rail nav button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 6px 8px 6px 9px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink-2); font: 500 var(--t-m)/1.2 var(--f-ui); text-align: left; text-decoration: none; cursor: pointer; }
.rail nav a > span:not(.n), .rail nav button > span:not(.n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail nav svg.icon { color: var(--muted); }
.rail nav a:hover, .rail nav button:hover { background: var(--wash-strong); color: var(--ink); }
.rail nav a[aria-current="page"] { background: var(--sheet); border-color: var(--edge-strong); color: var(--ink); font-weight: 600; }
.rail nav a[aria-current="page"] svg.icon { color: var(--ink); }
/* a count that waits for the person carries a small amber lamp; a calm count is only a figure */
.rail nav a .n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--ink); font: 600 var(--t-s)/1 var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: none; }
.rail nav a .n::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wait); box-shadow: 0 0 0 1px var(--wait-ink); }
.rail nav a .n.calm { color: var(--muted); font-weight: 500; }
.rail nav a .n.calm::before { content: none; }
.rail nav .sep { height: 1px; margin: 7px 8px; background: var(--rule); }
.rail nav a.sub { margin-left: 18px; min-height: 34px; font-size: var(--t-s); }
.rail-foot { display: grid; gap: 1px; padding: 8px 10px 12px; border-top: 1px solid var(--rule); }
.rail-foot a, .rail-foot button { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 34px; padding: 5px 9px; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); font: 500 var(--t-s)/1.2 var(--f-ui); text-align: left; text-decoration: none; cursor: pointer; }
.rail-foot a:hover, .rail-foot button:hover { background: var(--wash-strong); color: var(--ink); }
/* the Stand at the foot of the rail: status, not an action (brief Tafel 3, sections 8 and 10). A plate with its lamp,
   its word and its value that opens the sheet of the Stand; on the rail of icons (900 to 1100 px) the lamp alone, which
   keeps its words for a screen reader; below 900 px one line under the row of areas, on a phone too, never hidden */
.rail-foot .stand-plate { grid-template-columns: 20px minmax(0, 1fr); margin-bottom: 6px; border: 1px solid var(--edge-strong); background: var(--sheet); color: var(--ink-2); --knock: var(--sheet); }
.rail-foot .stand-plate > .light { justify-self: center; }
.rail-foot .stand-plate > span:not(.light) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-foot .stand-plate b { color: var(--ink); font-weight: 600; }
.rail-foot .stand-plate:hover { border-color: var(--ink); background: var(--sheet); color: var(--ink); }

/* the top bar: the path, who else is here, the command field, Wupp, Hinweise, the person (the Stand stands at the foot
   of the rail) */
.topbar { position: sticky; top: var(--proto-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: var(--top-h); padding: 8px 20px; background: var(--page); border-bottom: 1px solid var(--rule); --knock: var(--page); }
.topbar .crumbs { flex: 1 1 0; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-s); color: var(--muted); }
.crumbs a { color: var(--ink-2); }
.crumbs b { color: var(--ink); font-weight: 600; }
/* one single-line field with the key hint at its right */
.trigger { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-width: 0; min-height: 38px; padding: 4px 5px 4px 11px; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--muted); font: 400 var(--t-s)/1.2 var(--f-ui); text-align: left; white-space: nowrap; cursor: pointer; }
.trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the one word of the field ("Suchen") for a narrow bar; hidden from a screen reader, which reads the whole words */
.trigger > .short { display: none; }
.trigger svg.icon { flex: none; color: var(--muted); }
.trigger kbd { flex: none; }
.trigger:hover { border-color: var(--ink); color: var(--ink-2); }
/* a plate in the top bar: a lamp, a word, a figure (pills are only for people) */
.pill { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 11px 4px 10px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink-2); font: 500 var(--t-s)/1.2 var(--f-ui); white-space: nowrap; text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.pill b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.who { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--page); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.02em; text-shadow: none; cursor: pointer; }

/* main area: the work between the rail and the inspector */
.work { min-width: 0; display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); }
.main { display: grid; gap: 20px; align-content: start; min-width: 0; padding: 24px 28px 48px; }
.main-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.main-head > div:first-child { min-width: 0; flex: 1 1 380px; }
.main-head h1 { font: 600 var(--t-3xl)/1.12 var(--f-ui); letter-spacing: -0.015em; text-transform: none; text-shadow: none; }
.main-head .sub { margin-top: 6px; max-width: 68ch; font-size: var(--t-m); color: var(--muted); }
.main-head .sub.quiet { color: var(--muted); }
/* running text keeps the reading measure (.measure, about 68 characters) where its sheet is wider: the notes of a panel,
   a tab and a field, the lines under a decision, the values of a list of lines, the paragraphs and points of a document */
.panel > p, [role="tabpanel"] > p, .field > p, .decide > p, .kv.lines dd, article.sheet > p, article.sheet ol.num > li { max-width: 68ch; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* the inspector: the evidence beside the work, never over it; a sheet at the right edge of the board */
.inspector { position: sticky; top: var(--proto-h); height: calc(var(--vh) * 100 - var(--proto-h)); overflow-y: auto; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; padding: 22px 22px 32px; background: var(--sheet); border-left: 1px solid var(--rule); --knock: var(--sheet); scrollbar-width: thin; }
.inspector h2 { font: 600 var(--t-l)/1.35 var(--f-ui); }
.inspector .sub { font-size: var(--t-s); color: var(--muted); }
.pane { display: grid; gap: 12px; align-content: start; }

/* ---------- panels: a sheet lying on the page, with its edge ---------- */
.panel { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px 18px 18px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; --knock: var(--sheet); }
.panel > h2, .panel > .panel-head h2 { font: 600 var(--t-l)/1.35 var(--f-ui); }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.panel-head h2.engrave, .panel-head h2 { font-size: var(--t-l); letter-spacing: 0; }
.panel-head .muted { font-size: var(--t-s); }
.panel.well { background: var(--board); border-color: transparent; box-shadow: inset 0 0 0 1px var(--edge); --knock: var(--board); }
.plate-note { padding: 10px 12px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--plate-2); font-size: var(--t-s); color: var(--ink-2); }

/* ---------- the board (Tafel): a 4 px paper frame, the recess, and the sheet pinned in it ----------
   The head lies on the board; everything below the head lies on one sheet with a pin at its top.
   Up to three rows (and nothing else) are pinned as single cards instead: tafel.js marks such a board .pins-cards. */
.tafel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; padding: 0 0 10px;
  background: var(--board); border: var(--frame-w) solid var(--frame); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--edge-strong), inset 0 0 0 1px var(--edge); --knock: var(--sheet);
}
.tafel > :not(.tafel-head) { margin-inline: 10px; background-color: var(--sheet); box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge); }
.tafel > .tafel-head + * { border-radius: var(--r) var(--r) 0 0; box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge), inset 0 1px 0 var(--edge); }
.tafel::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: var(--edge-strong); box-shadow: 0 1px 0 var(--lift-soft); pointer-events: none; }
.tafel-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 11px 14px 11px; background: none; border: 0; --knock: var(--board); }
.tafel-head::after, .tcard b::before, .slip::after, .dialog::after, .cmdbar::after, .family::after, .five-pin {
  content: ""; position: absolute; z-index: 3; width: 9px; height: 9px; border-radius: 50%; background: var(--pin); pointer-events: none;
  box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light);
}
.tafel-head::after { left: 50%; bottom: -4px; margin-left: -4.5px; }
.tafel-head .title { min-width: 0; font: 600 var(--t-l)/1.35 var(--f-ui); letter-spacing: -0.005em; text-transform: none; text-shadow: none; }
.tafel-head .title small { display: block; margin-top: 1px; font: 400 var(--t-s)/1.35 var(--f-ui); color: var(--muted); }
.tafel-head .no { font: 600 var(--t-xl)/1 var(--f-ui); font-variant-numeric: tabular-nums; text-shadow: none; }
.tafel-head .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--t-s); color: var(--ink-2); }
.tafel-rows { display: grid; padding: 4px 8px 6px; }
.tafel-more { max-width: 62ch; padding: 6px 18px 12px; font-size: var(--t-s); color: var(--muted); }
.tafel > .decide { margin-top: 0; padding: 12px 16px 14px; border-top: 1px solid var(--rule); }
.tafel-pad { padding: 12px 16px; }
.tafel > .tafel-pad + .tafel-pad { padding-top: 0; }
/* a short board pins its rows as cards */
.tafel.pins-cards::after, .tafel.pins-cards > .tafel-head::after { content: none; }
.tafel.pins-cards > :not(.tafel-head) { margin-inline: 0; background: none; box-shadow: none; }
.tafel.pins-cards > .tafel-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; padding: 6px 10px 2px; }
.tafel.pins-cards > .tafel-rows > .np { position: relative; align-items: start; min-height: 0; padding: 16px 12px 11px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: 0 1px 0 var(--lift-soft); }
.tafel.pins-cards > .tafel-rows > .np + .np { border-top: 1px solid var(--edge); }
.tafel.pins-cards > .tafel-rows > .np::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); }
.tafel.pins-cards > .tafel-rows > .np:hover { border-color: var(--control-line); background: var(--sheet); }
.tafel.pins-cards > .tafel-rows > .np[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tafel.pins-cards > .tafel-rows > .np:has(> .light[data-s="sug"]) { background-color: var(--sheet); background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--hatch-on, var(--sheet)) 1px var(--hatch-step)); }
.tafel.pins-cards > .tafel-rows > .np .chev { align-self: center; }
/* a pinned card that carries its own buttons (a suggestion with Übernehmen and its receipt): the buttons stand under the
   words, so that the words keep the width of the card */
.tafel.pins-cards > .tafel-rows > .np > .actions, .tafel.pins-cards > .tafel-rows > .np > .btn { grid-column: 2 / -1; justify-self: start; }
.tafel.pins-cards > .tafel-more { padding: 10px 14px 6px; }

/* the nameplate row: the lamp at the left edge like a panel lamp, the title, the state in words, the value, the chevron */
.np { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 16px; align-items: center; gap: 4px 12px; width: 100%; min-height: var(--touch); padding: 9px 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
/* grey never sits on a tint: on a washed, tinted or selected ground secondary text takes the second ink */
.np:hover, .np[aria-current="true"], .np.is-called, .np.is-pointed, .plate.is-pointed, .msg:hover, .msg:focus-within, .msg[data-own], .msg.rings,
button.plate:hover, a.plate:hover, .cmd-opt[aria-selected="true"], .family a:hover, .family a[aria-current="true"], .rail nav a:hover, .rail nav button:hover,
.plate-note, .receipt .passage, .slip-ask, .words .word, .pack[aria-pressed="true"], .tgrid tr.is-on, .tgrid tr.is-called, .tgrid tr.is-pointed, .ledger tr.is-on, .steck > .today { --muted: var(--ink-2); }
/* a row without a chevron gives its figure the last column, flush with the right edge */
.np:not(:has(> .chev)) { grid-template-columns: 12px minmax(0, 1fr) auto; }
/* a row that leads with a person instead of a lamp gives the person's 24 px plate its own column, so that the initials
   never run into the name (the conversations with a person, the people of a call) */
.np:has(> .who-chip:first-child) { grid-template-columns: 24px minmax(0, 1fr) auto; }
.np:has(> .who-chip:first-child):has(> .chev) { grid-template-columns: 24px minmax(0, 1fr) auto 16px; }
.np > .who-chip:first-child { align-self: start; }
.np + .np { border-top: 1px solid var(--rule); border-radius: 0; }
.np:hover { background-color: var(--wash); }
.np[aria-current="true"] { background-color: var(--wash-strong); }
.np > .light { align-self: start; margin-top: 4px; }
.np b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); }
.np .meta { display: block; margin-top: 1px; font-size: var(--t-s); line-height: 1.4; color: var(--muted); }
.np .meta .state { color: var(--ink-2); font-weight: 600; }
.np .val { font: 500 var(--t-m)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.np .val small { display: block; font: 400 var(--t-xs)/1.35 var(--f-ui); color: var(--muted); }
.np .chev { width: 16px; height: 16px; color: var(--muted); }
.np.static { cursor: default; }
.np.static:hover { background-color: transparent; }
/* a suggestion is hatched until a person takes it. The hatch covers the ground it lies on (01-tokens.css): paper, the
   plate of a row under the pointer or selected, the tint of a row that was called or pointed at */
.np:has(> .light[data-s="sug"]) { background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--hatch-on, var(--sheet)) 1px var(--hatch-step)); --muted: var(--ink-2); }
.np:not(.static):has(> .light[data-s="sug"]):hover, .np[aria-current="true"]:has(> .light[data-s="sug"]) { --hatch-on: var(--plate-2); }
.np:is(.is-called, .is-pointed):has(> .light[data-s="sug"]) { --hatch-on: var(--wait-tint); }
/* a table on a board lies inset on its sheet */
.tafel > .gridwrap, .tafel > .tablewrap { padding: 8px 12px 10px; }
.np.is-accepted { background-image: none; }
.np .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r); background: var(--ink); color: var(--sheet); font: 600 var(--t-xs)/1 var(--f-ui); text-shadow: none; }
/* small boards on the street */
.mini { display: grid; gap: 0; color: var(--ink); text-decoration: none; }
.mini .tafel-head { padding: 9px 12px 9px; }
.mini .tafel-head .title { font-size: var(--t-m); }
.mini .tafel-head .no { font-size: var(--t-l); }
.mini .tafel-rows { padding: 2px 6px 4px; }
.mini .np { min-height: 38px; padding: 6px 8px; grid-template-columns: 12px minmax(0, 1fr) fit-content(45%); }
.mini .np > .light { margin-top: 3px; }
.mini .np b { font-size: var(--t-s); }
.mini .np .val { justify-self: end; white-space: normal; font-size: var(--t-s); }
a.mini:hover { box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--edge); }
.mini.rings { box-shadow: 0 0 0 2px var(--wait), inset 0 0 0 1px var(--edge); }
.mini.is-open { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px var(--edge); }
.street { display: grid; gap: 14px; align-content: start; }
.desk-split { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; }

/* ---------- the board as a grid: rows down, periods across, one lamp per cell; faint ruled columns ---------- */
/* the grid scrolls inside its board and holds what it places there, the hidden words of a cell too, so that nothing
   widens the page */
.gridwrap { position: relative; overflow-x: auto; scrollbar-width: thin; }
.tgrid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--t-s); }
.tgrid th, .tgrid td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tgrid thead th { position: sticky; top: 0; z-index: 1; background: var(--sheet); border-bottom: 1px solid var(--ink); color: var(--muted); font: 600 var(--t-xs)/1.35 var(--f-ui); white-space: nowrap; }
.tgrid thead th.col { text-align: center; }
.tgrid tbody th { position: sticky; left: 0; z-index: 1; min-width: 14rem; background: var(--sheet); font: 600 var(--t-s)/1.35 var(--f-ui); }
.tgrid tbody th .meta { display: block; font: 400 var(--t-xs)/1.35 var(--f-ui); color: var(--muted); }
.tgrid td.c, .tgrid th.col { box-shadow: inset 1px 0 0 var(--edge); }
.tgrid td.c { text-align: center; }
.tgrid td.c .lightbtn { display: grid; place-items: center; width: 100%; min-height: 40px; padding: 0; border: 0; border-radius: var(--r); background: transparent; cursor: pointer; }
.tgrid td.c .lightbtn:hover { background: var(--wash-strong); }
.tgrid td.c .lightbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tgrid tr.is-on th, .tgrid tr.is-on td { background-color: var(--plate-2); }
.tgrid td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgrid tfoot td, .tgrid tfoot th { border-top: 3px double var(--ink); border-bottom: 0; background: var(--sheet); font-weight: 600; }
.cellw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--ink-2); }
/* a cell that opens its day or its pane is a button that reads as the cell: the figure with its lamp, a wash under the
   pointer and the ink ring of the open one, never the browser's grey button */
button.cellw { min-height: 32px; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: var(--r); background: transparent; text-align: inherit; cursor: pointer; }
button.cellw:hover { background: var(--wash-strong); }
button.cellw[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* the proof ring: one segment per planned period; full proven, half partial, broken missing */
.ring { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: var(--rule); stroke-width: 2; }
.ring .m-ok { stroke: var(--ok); }
.ring .m-part { stroke: var(--wait); }
.ring .m-miss { stroke: var(--stop); }
.ring-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.ring-row b { display: block; font: 600 var(--t-2xl)/1.1 var(--f-ui); font-variant-numeric: tabular-nums; }
.ring-row .muted { font-size: var(--t-s); }

/* ---------- the sign and its plates: a decision (Entscheidung) ----------
   A sign is a plate that hangs: a 1.5 px ink edge, two drilled corners (a 3 px hole with a 1 px ring), the word in the
   text face. Plates beneath it name one condition each, with its source. Blue only after a person's decision. */
:root { --plate-line: rgba(20, 20, 20, 0.72); }
:root[data-theme="nacht"] { --plate-line: rgba(242, 239, 230, 0.72); }
:root[data-theme="draussen"] { --plate-line: #000000; }
.sign:not(.btn) {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 120px; padding: 20px 18px 16px;
  text-align: center; background: var(--sheet); color: var(--ink); border: 1.5px solid var(--plate-line); border-radius: var(--r); box-shadow: none;
}
.sign:not(.btn)::before, .sign:not(.btn)::after { content: ""; position: absolute; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--page); box-shadow: 0 0 0 1px var(--hole); }
.sign:not(.btn)::before { left: 6px; }
.sign:not(.btn)::after { right: 6px; }
.sign .light { margin-bottom: 2px; }
.sign .word { font: 600 var(--t-2xl)/1.15 var(--f-ui); letter-spacing: -0.01em; text-transform: none; }
.sign .by { font: 500 var(--t-s)/1.35 var(--f-ui); color: var(--muted); }
.sign[data-s="sign"]:not(.btn) { border-color: var(--sign); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px var(--sign); }
.sign[data-s="wait"]:not(.btn) { border-color: var(--wait-ink); }
.sign[data-s="stop"]:not(.btn) { border-color: var(--stop-ink); }
.sign[data-s="unk"]:not(.btn) { border-style: dashed; }
.sign[data-s="later"]:not(.btn) { border-color: var(--control-line); }
.sign.sm:not(.btn) { min-height: 92px; padding: 15px 12px 12px; gap: 3px; }
.sign.sm .word { font-size: var(--t-xl); }
.btn.sign.sm { min-height: 36px; padding: 5px 11px; gap: 6px; }
.sign.amount .word { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* plates: one condition each, in the order that decides */
.plates { display: grid; gap: 6px; }
.plate { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: var(--touch); padding: 9px 12px; background: var(--sheet); border: 1.5px solid var(--plate-line); border-radius: var(--r); box-shadow: none; color: var(--ink); font-size: var(--t-s); }
.plate > .light { align-self: start; margin-top: 3px; }
.plate b { font-weight: 600; font-size: var(--t-m); color: var(--ink); }
.plate .src { display: block; margin-top: 1px; color: var(--muted); font-size: var(--t-s); }
.plate .src a { color: var(--ink-2); }
.plate .state { font-weight: 600; white-space: nowrap; text-align: right; }
.plate[data-s="ok"] .state { color: var(--ok-ink); }
.plate[data-s="wait"] { border-color: var(--wait-ink); }
.plate[data-s="wait"] .state { color: var(--wait-ink); }
.plate[data-s="stop"] { border-color: var(--stop-ink); }
.plate[data-s="stop"] .state { color: var(--stop-ink); }
.plate[data-s="unk"] { border-style: dashed; }
.plate[data-s="unk"] .state { color: var(--unknown-ink); }
.plate[data-s="sign"] .state { color: var(--sign-ink); }
.plate[data-s="sug"] { border-color: var(--wait-ink); background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--hatch-on, var(--sheet)) 1px var(--hatch-step)); --muted: var(--ink-2); }
button.plate[data-s="sug"]:hover, a.plate[data-s="sug"]:hover { --hatch-on: var(--plate-2); }
.plate.is-pointed[data-s="sug"] { --hatch-on: var(--wait-tint); }
.plate[data-s="sug"] .state { color: var(--wait-ink); }
.plate.open { border-style: dashed; border-color: var(--control-line); }
.plate.is-accepted { border-color: var(--ok-ink); background-image: none; }
button.plate, a.plate { width: 100%; font: inherit; font-size: var(--t-s); text-align: left; text-decoration: none; cursor: pointer; }
button.plate:hover, a.plate:hover { border-color: var(--ink); background-color: var(--wash); }
/* plates on a slip, an answer or in a drawer are lighter: a 1 px edge */
.answer .plate, .msg .plate, .drawer .plate, .slip .plate, .notif .plate { border-width: 1px; border-color: var(--edge-strong); }
.answer .plate[data-s="stop"], .drawer .plate[data-s="stop"] { border-color: var(--stop-ink); }

/* the stamp: an ink impression in the product's ink at 85 %, a round-ended double frame turned 5 degrees, with a fixed
   ink bleed (filter #bleed of the sprite); beside it who decided, when, and the code that proves the version */
.stamp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 12px 14px 12px 12px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); color: var(--ink); box-shadow: none; }
.stamp .seal {
  --st: var(--ink-brand);
  display: grid; place-items: center; min-width: 118px; min-height: 50px; padding: 6px 16px 5px;
  border: 2.5px solid var(--st); border-radius: 26px; box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3.2px var(--st);
  color: var(--st); font: 700 var(--t-s)/1.1 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere;
  opacity: 0.85; transform: rotate(-5deg); filter: url(#bleed); text-shadow: none;
}
.stamp[data-s="stop"] .seal { --st: var(--stop-ink); }
.stamp[data-s="later"] .seal { --st: var(--muted); }
.stamp b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); color: var(--ink); }
.stamp .small { display: block; color: var(--muted); }
.stamp .code { display: block; margin-top: 2px; font: 500 var(--t-xs)/1.4 var(--f-mono); color: var(--ink-2); }
.decide { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.decide .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.decide .acts .btn.sign { flex: 1 1 200px; }
/* the keyboard's way to the stamp (Tafel 3 brief, sections 8 and 9): a small plate asks, the blue button stamps,
   nothing is timed */
.ask-plate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--r); }
.ask-plate .ask-q { margin-right: auto; font: 600 var(--t-m)/1.3 var(--f-ui); }
.effect { display: grid; gap: 6px; font-size: var(--t-s); }
.effect li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.effect li svg { margin-top: 2px; color: var(--ink-2); }

/* ---------- money: the ledger, with the line discipline of a ledger book ----------
   hairlines between rows, a 2 px rule under the head, a column rule beside money, tabular figures right-aligned,
   the sum under a double rule; never a tinted alternate row */
.ledger { font-size: var(--t-s); }
.ledger th, .ledger td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.ledger thead th { padding-top: 4px; border-bottom: 2px solid var(--ink); color: var(--muted); font: 600 var(--t-xs)/1.35 var(--f-ui); white-space: nowrap; }
.ledger td.num, .ledger th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: inset 1px 0 0 var(--rule); }
.ledger thead th.num { box-shadow: none; }
.ledger tfoot td, .ledger tfoot th { border-top: 3px double var(--ink); border-bottom: 0; font-weight: 600; }
.ledger tr.sum td, .ledger tr.sum th { border-top: 3px double var(--ink); font-weight: 600; }
.ledger .src a { color: var(--ink-2); font-size: var(--t-xs); }
.ledger tr.is-on td, .ledger tr.is-on th { background: var(--plate-2); }
.eur { font: 500 var(--t-m)/1.2 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eur.big { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.02em; }
.sum { display: grid; gap: 4px; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); }
.sum .lab { font-size: var(--t-s); color: var(--muted); }
.sum .eur { display: block; }
/* true-cost bars drawn to scale with width classes, never with inline styles */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--t-s); }
.bar .track { display: block; height: 12px; border-radius: 0; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 0; background: var(--ink-2); }
.bar .fill.open { background: var(--hatch-grey), var(--sheet); box-shadow: inset 0 0 0 1px var(--control-line); }
.bar .num { font-weight: 500; }
.w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.split-bar { display: flex; height: 16px; border-radius: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.split-bar .a { background: var(--ok); }
.split-bar .n { background: var(--plate-2); }
.split-bar .u { background: var(--hatch-grey), var(--sheet); }

/* ---------- lists: timeline, facts, outbox, photos, checks ---------- */
.tl { display: grid; }
.tl-row { display: grid; grid-template-columns: 52px 12px minmax(0, 1fr); gap: 0 12px; }
.tl-when { padding-top: 11px; color: var(--muted); font: 500 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; }
.tl-rail { position: relative; display: grid; justify-items: center; align-content: start; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background: var(--rule); }
.tl-rail .light { position: relative; margin-top: 12px; }
.tl-body { display: grid; gap: 3px; min-width: 0; padding: 9px 0 12px; border-bottom: 1px solid var(--rule); }
.tl-body b { font-weight: 600; }
.tl-body p { max-width: 60ch; font-size: var(--t-s); color: var(--muted); }
.tl-row:last-child .tl-body { border-bottom: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fact { display: grid; gap: 3px; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; }
.fact .lab { color: var(--muted); font: 500 var(--t-xs)/1.25 var(--f-ui); }
.fact .val { font: 600 var(--t-l)/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.fact.wide { grid-column: 1 / -1; }
.list { display: grid; }
.list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.list > li:first-child { border-top: 0; }
.list > li > .light { align-self: start; margin-top: 4px; }
.list b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); color: var(--ink); }
.list .meta { display: block; color: var(--muted); }
.list .num { color: var(--ink); }
.list.plain > li { grid-template-columns: minmax(0, 1fr) auto; }
.outbox li { grid-template-columns: 20px minmax(0, 1fr) auto; }
.outbox svg.icon { align-self: start; margin-top: 2px; color: var(--ink-2); }
/* a photo is a print with its white margin; no picture is made up for the prototype */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; border-radius: 1px; background: var(--plate-2); box-shadow: inset 0 0 0 4px var(--sheet), 0 0 0 1px var(--edge-strong); color: var(--ink-2); font-size: var(--t-xs); line-height: 1.35; text-align: center; }
.photo.add { background: transparent; box-shadow: none; border: 1px dashed var(--control-line); color: var(--ink); font-weight: 600; cursor: pointer; }
.photo .tag { position: absolute; left: 8px; bottom: 8px; padding: 1px 5px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font: 600 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric: tabular-nums; }
/* a checklist item of a visit: the text and two answers; the tick is a pencil stroke */
.check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.check b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); }
.check .meta { display: block; font-size: var(--t-s); color: var(--muted); }
.marks { display: inline-flex; gap: 6px; }
.mark { display: grid; place-items: center; width: var(--touch-field); height: var(--touch-field); padding: 0; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--ink-2); cursor: pointer; }
.mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mark:hover { border-color: var(--ink); }
.mark[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); --pencil: pencil 180ms ease-out both; }
.mark.ok[aria-pressed="true"] { background: var(--ok-glass); border-color: var(--ok-ink); color: var(--ok-ink); box-shadow: inset 0 0 0 1px var(--ok-ink); }
.mark.no[aria-pressed="true"] { background: var(--stop-glass); border-color: var(--stop-ink); color: var(--stop-ink); box-shadow: inset 0 0 0 1px var(--stop-ink); }
symbol#i-check path, symbol#i-x path { stroke-dasharray: var(--pencil-da, none); animation: var(--pencil, none); }
.mark { --pencil-da: 21; }

/* ---------- the paper sheet: a document as it is sent or printed; paper in every theme ----------
   On the sheet the document's own ink applies, so that Nacht never darkens it; ledgers follow direction B's lines. */
.sheet {
  --ink: var(--doc-ink); --ink-2: var(--doc-ink-2); --muted: var(--doc-muted); --rule: var(--doc-rule); --line: var(--doc-rule); --edge: var(--doc-rule);
  --sheet: var(--doc-paper); --plate: var(--doc-paper); --plate-2: var(--doc-wash); --knock: var(--doc-paper);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 720px; padding: 28px 28px 24px;
  background: var(--doc-paper); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift);
  font-size: var(--t-s); text-shadow: none;
}
.sheet h2 { font: 600 var(--t-xl)/1.2 var(--f-ui); letter-spacing: -0.005em; text-transform: none; }
.sheet .from { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--muted); font-size: var(--t-xs); }
.tablewrap { overflow-x: auto; scrollbar-width: thin; }
.sheet table { font-size: var(--t-s); }
.sheet th, .sheet td { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.sheet thead th { border-bottom: 2px solid var(--ink); }
.sheet th { color: var(--muted); font-weight: 600; }
.sheet td.num, .sheet th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet tfoot td { border-top: 3px double var(--ink); border-bottom: 0; font-weight: 600; }
.sheet .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-xs); }
.sheet .code { color: var(--ink); font: 500 var(--t-xs)/1.4 var(--f-mono); }
.sheet .quote { color: var(--ink-2); }
.sheet .signline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 28px; }
.sheet .signline div { padding-top: 6px; border-top: 1px solid var(--ink); color: var(--muted); font-size: var(--t-xs); }
.sheet .vh { position: absolute; }

/* ---------- the phone: a screen pinned to the board ---------- */
.phone { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; width: 390px; max-width: 100%; min-width: 0; height: 844px; overflow: hidden; background: var(--page); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); --knock: var(--page); }
.phone.draussen { color: var(--ink); background: var(--page); }
.statusbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; color: var(--ink-2); font: 600 var(--t-xs)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.statusbar .sys { display: inline-flex; gap: 6px; }
.statusbar svg.icon { width: 14px; height: 14px; }
.appbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px 10px 18px; border-bottom: 1px solid var(--rule); }
.appbar.back { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 4px; }
.appbar h1 { min-width: 0; font: 600 var(--t-xl)/1.2 var(--f-ui); letter-spacing: -0.01em; text-transform: none; text-shadow: none; }
.appbar h1 .sub { display: block; margin-top: 2px; font: 400 var(--t-s)/1.35 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.appbar .tools { display: inline-flex; gap: 2px; }
.scroll { display: grid; gap: 14px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px; scrollbar-width: none; }
.scroll .np { min-height: 52px; }
.phone .btn { min-height: var(--touch-field); }
.phone .btn.sm { min-height: 40px; }
.phone .iconbtn { width: var(--touch-field); height: var(--touch-field); }
/* the bottom bar: the places, the open one in ink under a rule */
.navbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 6px 10px; background: var(--page); border-top: 1px solid var(--rule); }
.navbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 56px; padding: 8px 2px 4px; color: var(--muted); font: 500 var(--t-xs)/1.1 var(--f-ui); text-decoration: none; text-align: center; }
.navbar a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navbar a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--ink); }
.navbar a .n { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r); background: var(--ink); color: var(--page); font: 600 var(--t-xs)/16px var(--f-ui); text-align: center; text-shadow: none; }
/* the one primary action of a phone screen, above the bar, full width, with its count */
.primary-bar { padding: 8px 16px; background: var(--page); border-top: 1px solid var(--rule); }
.primary-bar .btn { min-height: 52px; font-size: var(--t-l); }
.stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-2); font: 500 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; }
.stand svg.icon { width: 14px; height: 14px; }
.hero-no { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 4px 2px 6px; border-bottom: 1px solid var(--rule); }
.hero-no .street { font: 600 var(--t-2xl)/1.15 var(--f-ui); letter-spacing: -0.01em; text-transform: none; text-shadow: none; }
.hero-no .street small { display: block; margin-top: 3px; font: 400 var(--t-s)/1.35 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.hero-no .no { font: 600 var(--t-4xl)/0.95 var(--f-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: none; }

/* ---------- a page without an account: one sheet for the person outside ---------- */
.pubpage { display: grid; align-content: start; width: 390px; max-width: 100%; min-height: 760px; overflow: hidden; background: var(--sheet); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); --knock: var(--sheet); }
.pubpage.wide { width: 720px; }
.pubpage.fit { min-height: 0; }
.pub-head { display: grid; gap: 6px; padding: 18px 18px 14px; background: var(--page); border-bottom: 2px solid var(--ink); --knock: var(--page); }
.pub-head .from { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 var(--t-s)/1.35 var(--f-ui); }
.pub-head h1 { font: 600 var(--t-2xl)/1.15 var(--f-ui); letter-spacing: -0.01em; text-transform: none; text-shadow: none; }
.pub-body { display: grid; gap: 16px; padding: 18px; }
.pub-body h2 { font: 600 var(--t-l)/1.35 var(--f-ui); }
.pub-foot { display: grid; gap: 4px; padding: 14px 18px 22px; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-xs); }
.made { display: inline-flex; align-items: center; gap: 6px; }
.made .mark { width: 16px; height: 16px; }

/* paper stays paper at night: a document sheet carries the day tokens (generated by _build/night_paper.py) */
:root[data-theme="nacht"] .sheet:not(.dialog .sheet) {
  --page: #F3EFE6; --board: #E6E2D9; --sheet: #FFFDF8; --frame: #FFFDF8; --ink: #141414; --ink-2: #3E3E3D; --muted: #646360; --rule: rgba(20, 20, 20, 0.16); --edge: rgba(20, 20, 20, 0.12); --edge-strong: rgba(20, 20, 20, 0.28); --control-line: rgba(20, 20, 20, 0.58); --wash: rgba(20, 20, 20, 0.04); --wash-strong: rgba(20, 20, 20, 0.07); --lift: rgba(20, 20, 20, 0.22); --lift-soft: rgba(20, 20, 20, 0.1); --scrim: rgba(20, 20, 20, 0.3); --pin: #2B2A27; --pin-shadow: rgba(20, 20, 20, 0.34); --pin-light: rgba(255, 253, 248, 0.38); --hole: rgba(20, 20, 20, 0.5); --select: rgba(20, 20, 20, 0.14); --focus: #141414; --ok: #1E8A4C; --ok-ink: #146B39; --ok-tint: #E4F0E6; --ok-glass: #D2E8D9; --wait: #E8990B; --wait-ink: #7A4F00; --wait-tint: #FAEFD7; --wait-glass: #F8E4BE; --stop: #D13A21; --stop-ink: #A12B16; --stop-tint: #F7E3DC; --stop-glass: #F5D3C9; --sign: #1F4FC4; --sign-ink: #1A43A8; --sign-tint: #E4E9F8; --sign-glass: #D2DCF5; --on-sign: #FFFDF8; --off: #3A3936; --unknown-ink: #5E5D5A; --lamp-off: #F1EEE6; --lamp-off-ring: rgba(20, 20, 20, 0.5); --lamp-dark: #4A4844; --lamp-socket: #D8D4CB; --hatch: rgba(232, 153, 11, 0.85); --ink-feld: #B4234F; --ink-feld-deep: #96173F; --ink-feld-tint: #F6E3E8; --ink-wahl: #0A6A6C; --ink-wahl-deep: #075557; --ink-wahl-tint: #DCEDEC; --ink-buro: #5A3FC0; --ink-buro-deep: #4A31A6; --ink-buro-tint: #E7E3F7; --on-ink-brand: #FFFDF8; --on-brand-rule: rgba(255, 253, 248, 0.42); --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hatch-line: var(--wait-glass); --hatch-step: 6px; --hatch-grey-mix: 26%; --hatch-soft: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step)); --hatch-grey: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--sheet)) 0 1px, var(--sheet) 1px 4px); --plate-2: #F5F2EA; --seam: rgba(20, 20, 20, 0.22); --ruled: repeating-linear-gradient(180deg, transparent 0 27px, rgba(20, 20, 20, 0.1) 27px 28px); --ground: var(--page); --ground-2: var(--board); --plate: var(--sheet); --plate-edge: var(--edge-strong); --line: var(--rule); --engrave-hi: transparent; --shadow-plate: 0 0 0 1px var(--edge); --shadow-raise: 0 0 0 1px var(--edge), 0 1px 0 var(--lift-soft); --shadow-sheet: 0 0 0 1px var(--edge), 1px 1px 0 var(--lift); --shadow-float: 1px 1px 0 var(--lift); --plate-line: rgba(20, 20, 20, 0.72);
  --ink-brand: var(--ink-feld); --ink-brand-deep: var(--ink-feld-deep); --ink-brand-tint: var(--ink-feld-tint);
  --primary: var(--ink-brand); --primary-hover: var(--ink-brand-deep); --on-primary: var(--on-ink-brand);
  --ink: var(--doc-ink); --ink-2: var(--doc-ink-2); --muted: var(--doc-muted); --rule: var(--doc-rule); --line: var(--doc-rule); --edge: var(--doc-rule); --sheet: var(--doc-paper); --plate: var(--doc-paper); --plate-2: var(--doc-wash); --knock: var(--doc-paper);
  color-scheme: light; text-shadow: none;
}
:root[data-theme="nacht"] body[data-product="buro"] .sheet:not(.dialog .sheet) { --ink-brand: var(--ink-buro); --ink-brand-deep: var(--ink-buro-deep); --ink-brand-tint: var(--ink-buro-tint); }
:root[data-theme="nacht"] body[data-product="wahl"] .sheet:not(.dialog .sheet) { --ink-brand: var(--ink-wahl); --ink-brand-deep: var(--ink-wahl-deep); --ink-brand-tint: var(--ink-wahl-tint); }

/* ---------- states: loading, empty, error, offline, partial, conflict ---------- */
.notice { display: grid; gap: 8px; padding: 14px 16px 15px; background: var(--sheet); border: 1.5px solid var(--plate-line); border-radius: var(--r); box-shadow: none; --knock: var(--sheet); }
.notice h2 { display: flex; gap: 10px; align-items: center; font: 600 var(--t-m)/1.35 var(--f-ui); }
.notice h2 svg.icon { width: 18px; height: 18px; }
.notice p { max-width: 64ch; font-size: var(--t-s); color: var(--ink-2); }
.notice.quiet { border: 1px solid var(--edge); }
/* loading is a ruled empty sheet with the words; no shimmer */
/* ruled paper under words: the rule is a colour on the paper and the paper fills the space between, never a transparent
   stop (the plan's slots keep the open ruling of --ruled on the board: no word lies on it, the T-cards bring their own) */
.slot { display: grid; gap: 6px; justify-items: center; padding: 30px 14px 34px; background-image: repeating-linear-gradient(180deg, var(--sheet) 0 27px, color-mix(in srgb, var(--ink) 10%, var(--sheet)) 27px 28px); background-position: 0 6px; color: var(--muted); font-size: var(--t-s); text-align: center; }
.slot b { color: var(--ink); font: 600 var(--t-m)/1.35 var(--f-ui); }
.slot-bar { display: none; }
.slot-row { min-height: 44px; border-bottom: 1px dashed var(--rule); }
.empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.empty .copy { display: grid; gap: 12px; }
.empty .copy p { max-width: 52ch; color: var(--ink-2); }
.sample { display: grid; gap: 10px; }
.sample figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--muted); }
.conflict { display: grid; gap: 14px; }
/* a conflict: two versions side by side, the person picks one */
.versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.version { display: grid; gap: 8px; align-content: start; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--control-line); border-radius: var(--r); box-shadow: none; }
.version .lab { color: var(--muted); font: 600 var(--t-xs)/1.35 var(--f-ui); }
.version .text { font-size: var(--t-m); }
.version .btn { justify-self: start; }
.version.is-picked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tech { padding-top: 4px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.tech summary { display: flex; align-items: center; gap: 8px; min-height: var(--touch); color: var(--ink-2); font-weight: 600; list-style: none; cursor: pointer; }
.tech summary::-webkit-details-marker { display: none; }
.tech[open] summary svg.icon { transform: rotate(90deg); }

/* ---------- overlays: what is lifted gets a 1 px offset shadow and a pin; nothing floats ---------- */
.overlay { position: fixed; inset: var(--proto-h) 0 0 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--scrim); overflow-y: auto; }
.overlay.top { place-items: start center; padding-top: 9vh; }
.overlay.right { place-items: stretch end; padding: 0; }
[tabindex="-1"]:focus { outline: none; }
.dialog { position: relative; display: grid; gap: 14px; width: min(560px, 100%); padding: 20px 22px 22px; background: var(--sheet); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); --knock: var(--sheet); }
.dialog::after { top: -4px; left: 50%; margin-left: -4.5px; }
.dialog.wide { width: min(760px, 100%); }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.dialog-head h2 { padding-top: 8px; font: 600 var(--t-xl)/1.25 var(--f-ui); letter-spacing: -0.01em; }
.dialog-head .sub { margin-top: 2px; font-size: var(--t-s); color: var(--muted); }
.dialog .sheet { --ink: inherit; --ink-2: inherit; --muted: inherit; --rule: inherit; --line: inherit; --edge: inherit; --sheet: inherit; --plate: inherit; --plate-2: inherit; --knock: inherit;
  max-width: none; padding: 14px 0; background: transparent; color: var(--ink); box-shadow: none; border-radius: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* the drawer: slides as a panel from the right edge with a 1 px edge shadow */
.drawer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(452px, 100%); height: 100%; background: var(--sheet); color: var(--ink); box-shadow: -1px 0 0 var(--edge-strong), -2px 0 0 var(--lift-soft); --knock: var(--sheet); }
/* the drawer is as tall as the window and scrolls inside its body: as a grid item it would otherwise take the height of
   all it holds, and its head with the clip would scroll away with the page */
.overlay.right > .drawer { min-height: 0; max-height: 100dvh; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 12px 10px 20px; border-bottom: 1px solid var(--rule); }
.drawer-head h2 { font: 600 var(--t-xl)/1.2 var(--f-ui); letter-spacing: -0.01em; text-transform: none; }
.drawer-body { display: grid; gap: 14px; align-content: start; padding: 14px 20px 20px; overflow-y: auto; scrollbar-width: thin; }
.drawer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px 16px; border-top: 1px solid var(--rule); font-size: var(--t-s); }
/* the bottom sheet of a phone: a sheet pushed up from the bottom edge */
.bsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; gap: 12px; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 20px; background: var(--sheet); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -1px 0 var(--edge-strong), 0 -2px 0 var(--lift-soft); --knock: var(--sheet); }
.bsheet::before { content: ""; justify-self: center; width: 36px; height: 3px; margin-bottom: 2px; border-radius: 0; background: var(--rule); }
.bsheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bsheet-head h2 { min-width: 0; font: 600 var(--t-xl)/1.2 var(--f-ui); }
.phone .scrim { position: absolute; inset: 0; z-index: 9; background: var(--scrim); }
/* Hinweise: one row per item, the lamp says why it is here, the action is the next step */
.hint { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: var(--t-s); }
.hint > .light { margin-top: 4px; }
.hint:first-child { border-top: 0; }
.hint b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); }
.hint .meta { color: var(--muted); }
.hint .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hint.is-read b { font-weight: 500; }
.hint-group { padding: 12px 0 4px; color: var(--muted); }
/* Stand: what the device holds, what waits for the network */
.stand-head { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; }
.stand-head b { display: block; font: 600 var(--t-l)/1.35 var(--f-ui); }
.stand-head .meta { font-size: var(--t-s); color: var(--muted); }
/* the receipt of a check: a tear-off slip with its perforated top edge */
.receipt { position: relative; display: grid; gap: 10px; padding: 14px 14px 12px; background: var(--sheet); border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: 6px; }
.receipt::before { content: ""; position: absolute; left: -1px; right: -1px; top: -6px; height: 7px; background: var(--sheet); box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge); -webkit-mask: var(--perf) 0 0 / 8px 7px repeat-x; mask: var(--perf) 0 0 / 8px 7px repeat-x; }
.receipt .passage { padding: 10px 12px; border-left: 0; background: var(--plate-2); border-radius: var(--r); font-size: var(--t-s); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge); }
.receipt .passage mark { padding: 0 2px; background: var(--wait-tint); color: var(--ink); }
/* the command palette (Strg K): navigates and previews; anything that sends opens its preview first */
.cmdbar { position: relative; display: grid; width: min(760px, 100%); overflow: visible; background: var(--sheet); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); --knock: var(--sheet); }
.cmdbar::after { top: -4px; left: 50%; margin-left: -4.5px; }
.cmd-input { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-bottom: 2px solid var(--ink); }
.cmd-input:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.cmd-field { flex: 1; width: 0; min-width: 0; min-height: var(--touch-field); border: 0; background: transparent; color: var(--ink); font: 400 var(--t-l)/1.35 var(--f-ui); }
.cmd-field::placeholder { color: var(--muted); opacity: 1; }
.cmd-field:focus { outline: none; }
.cmd-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.cmd-list { max-height: min(420px, 52vh); overflow-y: auto; padding: 4px 8px 10px; }
.cmd-group { padding: 12px 10px 6px; color: var(--muted); }
.cmd-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; min-height: var(--touch); padding: 6px 10px; border-radius: var(--r); cursor: pointer; }
.cmd-opt[aria-selected="true"] { background: var(--wash-strong); box-shadow: inset 2px 0 0 transparent; }
.cmd-opt[aria-selected="true"] > span:nth-child(2) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cmd-opt .sub { display: inline-block; width: 100%; font-size: var(--t-s); color: var(--muted); }
.cmd-tag { padding: 2px 6px; border: 1px solid var(--edge-strong); border-radius: var(--r); color: var(--ink-2); font: 600 var(--t-xs)/1.2 var(--f-ui); white-space: nowrap; }
.cmd-none { padding: 14px 10px; font-size: var(--t-s); color: var(--muted); }
.cmd-preview { display: grid; gap: 8px; align-content: start; padding: 16px; border-left: 1px solid var(--rule); font-size: var(--t-s); }
.cmd-preview b { font: 600 var(--t-m)/1.35 var(--f-ui); }
.cmd-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--muted); }
.cmd-foot span { display: inline-flex; align-items: center; gap: 4px; }
/* the family: the three products of one maker */
.family { position: relative; display: grid; gap: 2px; width: min(380px, 100%); padding: 12px 10px 10px; background: var(--sheet); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); --knock: var(--sheet); }
.family::after { top: -4px; left: 50%; margin-left: -4.5px; }
.family .fam-head { padding: 6px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-size: var(--t-s); color: var(--muted); }
.family a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.family a:hover { background: var(--wash-strong); }
.family a[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--edge-strong); background: var(--plate-2); }
.family .mark { width: 30px; height: 30px; }
.family b { display: block; font: 700 var(--t-l)/1.15 var(--f-ui); letter-spacing: -0.01em; }
.family .meta { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--muted); }
/* toast with undo: a slip pushed out from under the board's edge; the box stays mounted so that nothing said is lost */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(460px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; background: var(--sheet); color: var(--ink); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), 1px 1px 0 var(--lift); font-size: var(--t-s); transform: translateX(-50%); }
.toast:not(.is-shown) { opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 28px)); }
.toast button { min-height: 36px; padding: 4px 10px; border: 1px solid var(--control-line); border-radius: var(--r); background: var(--sheet); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; }
.toast button:hover { border-color: var(--ink); }
/* in the phone frame the toast keeps to the phone's glass */
.phone .toast { position: absolute; bottom: 150px; width: calc(100% - 24px); }

/* ---------- settings tables: events by channels ---------- */
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.matrix thead th { border-bottom: 2px solid var(--ink); color: var(--muted); font: 600 var(--t-xs)/1.25 var(--f-ui); text-align: center; }
.matrix thead th:first-child { text-align: left; }
.matrix td.c { text-align: center; box-shadow: inset 1px 0 0 var(--edge); }
.matrix td.c label { display: grid; place-items: center; min-height: 40px; cursor: pointer; }
.matrix td.c input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.matrix tbody th { font-weight: 500; }
.matrix tbody th .meta { display: block; font-size: var(--t-xs); color: var(--muted); }

/* ==========================================================================================
   Working together: people, conversation, call, Wupp's slips and sheets, the round, the plan.
   ========================================================================================== */

/* ---------- people: the only round things on the board ---------- */
.who-chip { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sheet); color: var(--ink); font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px var(--control-line); text-shadow: none; }
.who-chip.s { width: 24px; height: 24px; font-size: 0.6875rem; }
.who-chip.l { width: 44px; height: 44px; font-size: var(--t-s); }
.who-chip.guest { border-radius: var(--r); }
.who-chip.me { background: var(--ink); color: var(--sheet); box-shadow: none; }
.who-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pres { display: inline-flex; align-items: center; }
.pres .who-chip { margin-left: 3px; box-shadow: 0 0 0 2px var(--knock), inset 0 0 0 1px var(--control-line); }
.pres .who-chip.me { box-shadow: 0 0 0 2px var(--knock); }
.pres .who-chip:first-child { margin-left: 0; }
.pres-word { margin-left: 8px; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.rail nav .sep { height: 1px; margin: 7px 8px; background: var(--rule); }

/* ---------- Gespräch: one conversation per record; a message is a row, never a bubble ---------- */
.talk { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.talk-list { display: grid; gap: 14px; align-content: start; }
.talk-list .np { grid-template-columns: 12px minmax(0, 1fr) auto; min-height: 52px; }
.talk-list .np .meta { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thread { display: grid; align-content: start; min-width: 0; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; --knock: var(--sheet); }
.thread-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); }
.thread-head .title { font: 600 var(--t-xl)/1.2 var(--f-ui); letter-spacing: -0.01em; text-transform: none; text-shadow: none; }
.thread-head .title small { display: block; margin-top: 2px; font: 400 var(--t-s)/1.35 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.thread-head .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--t-s); color: var(--ink-2); }
.msgs { display: grid; gap: 0; align-content: start; padding: 6px 10px 4px; }
.daymark { display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; color: var(--muted); }
.daymark::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.msg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 8px; border-radius: var(--r); }
.msg + .msg { box-shadow: 0 -1px 0 var(--rule); }
.msg:hover, .msg:focus-within { background-color: var(--wash); }
.msg[data-own] { background-color: var(--plate-2); }
.msg-body { display: grid; gap: 3px; min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--t-s); }
.msg-head b { font-weight: 600; }
.msg-head .role { color: var(--muted); }
.msg-head .role.is-board-name { display: none; }
.msg-head time { color: var(--muted); font: 500 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; }
.msg-text { max-width: 68ch; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 62ch; font-size: var(--t-xs); color: var(--muted); }
.msg-meta svg.icon { width: 14px; height: 14px; }
.msg-att { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.att { display: inline-grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; max-width: 100%; padding: 6px 12px 6px 10px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font: 500 var(--t-s)/1.35 var(--f-ui); text-align: left; text-decoration: none; box-shadow: none; cursor: pointer; }
.att:hover { border-color: var(--ink); }
.att small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--muted); }
/* a photo in a message is a small print, wide enough for the word that stands for it until there is a picture */
.att.pic { grid-template-columns: 84px minmax(0, 1fr); padding-left: 6px; }
.att .thumb { display: grid; place-items: center; width: 84px; height: 63px; padding: 0 4px; overflow: hidden; border-radius: 1px; background: var(--plate-2); box-shadow: inset 0 0 0 3px var(--sheet), 0 0 0 1px var(--edge-strong); color: var(--muted); font-size: var(--t-xs); line-height: 1.35; text-align: center; }
.att.voice { grid-template-columns: 20px minmax(0, 1fr) auto; }
.msg-acts { display: flex; gap: 2px; opacity: 0; }
.msg:hover .msg-acts, .msg:focus-within .msg-acts { opacity: 1; }
.msg-acts .iconbtn { width: 36px; height: 36px; }
@media (hover: none) { .msg-acts { opacity: 1; } }
/* an internal note inside a thread with guests: a dashed frame and the words "nur intern" */
.msg.note { outline: 1px dashed var(--control-line); outline-offset: -2px; }
/* what the record did, in the same stream: a lamp, a sentence, a time */
.msg.event { align-items: center; padding: 6px 8px; font-size: var(--t-s); color: var(--ink-2); }
.msg.event .light { justify-self: center; }
.msg.event b { color: var(--ink); font-weight: 600; }
.msg.event time { color: var(--muted); font: 500 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; }
.typing { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 18px 4px; font-size: var(--t-xs); color: var(--muted); }
.typing i { display: inline-flex; gap: 3px; }
.typing i b { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.typing i b:nth-child(2) { opacity: 0.7; }
.typing i b:nth-child(3) { opacity: 0.45; }
.composer { display: grid; gap: 4px; padding: 8px 10px 10px; border-top: 1px solid var(--rule); }
.composer:focus-within { border-top-color: var(--ink); }
.composer textarea { width: 100%; min-height: 48px; padding: 8px 6px 2px; border: 0; background: transparent; resize: none; line-height: 1.5; }
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--muted); opacity: 1; }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.composer-bar .iconbtn { width: 38px; height: 38px; }
.composer-bar .to { margin: 0 8px; font-size: var(--t-xs); color: var(--muted); }

/* Wupp's messages are slips: torn at the top, pinned, with Wupp sitting in the corner; a list of them lies on the board */
.thread .msgs:has(> .msg > .who-chip.wupp) { margin: 0 10px 10px; padding: 4px 12px 10px; background: var(--board); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--edge); --knock: var(--sheet); }
.thread .msgs:has(> .msg > .who-chip.wupp) > .daymark { padding-left: 2px; padding-right: 2px; }
.msg:has(> .who-chip.wupp) { isolation: isolate; margin: 10px 0 4px; padding: 18px 12px 12px 10px; background: none; border-radius: 0; box-shadow: none; }
.msg:has(> .who-chip.wupp):hover, .msg:has(> .who-chip.wupp):focus-within { background: none; }
.msg:has(> .who-chip.wupp)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sheet);
  box-shadow: inset 1px 0 0 var(--edge-strong), inset -1px 0 0 var(--edge-strong), inset 0 -1px 0 var(--edge-strong);
  -webkit-mask: var(--tear-fill) 0 0 / 120px 8px repeat-x, var(--solid) 0 7px / 100% calc(100% - 7px) no-repeat;
  mask: var(--tear-fill) 0 0 / 120px 8px repeat-x, var(--solid) 0 7px / 100% calc(100% - 7px) no-repeat;
}
.msg:has(> .who-chip.wupp)::after {
  content: ""; position: absolute; inset: 0; background: var(--edge-strong); pointer-events: none;
  -webkit-mask: var(--tear-line) 0 0 / 120px 8px repeat-x; mask: var(--tear-line) 0 0 / 120px 8px repeat-x;
}
.msg:has(> .who-chip.wupp) > .msg-body::before { content: ""; position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); }
.msg:has(> .who-chip.wupp) > .who-chip.wupp { margin-top: 2px; }
.msg.rings { background-color: var(--wait-tint); box-shadow: inset 0 0 0 1px var(--wait-ink); }
.msg.rings:has(> .who-chip.wupp) { background: none; box-shadow: none; }
.msg.rings:has(> .who-chip.wupp)::before { box-shadow: inset 1px 0 0 var(--wait-ink), inset -1px 0 0 var(--wait-ink), inset 0 -1px 0 var(--wait-ink); }
.msg.rings:has(> .who-chip.wupp)::after { background: var(--wait-ink); }
.msg .answered, .notif .answered { color: var(--ink-2); }
.msg[data-answered] .msg-text, .notif[data-answered] .notif-text { color: var(--ink-2); }

/* ---------- Ruf: a call is held at the board; people are plates at the side ---------- */
.call { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.call-stage, .call-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.call-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 14px; background: var(--sheet); border: 1px solid var(--edge-strong); border-radius: var(--r); color: var(--ink-2); font-size: var(--t-s); }
.call-banner .live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 600 var(--t-s)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.call-banner .live::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ok-glass); box-shadow: inset 0 0 0 1px var(--ok-ink), inset 0 0 0 3px var(--ok-glass), inset 0 0 0 6px var(--ok); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* a tile is as wide as its column: a long line under a person never widens the picture beyond the tile */
.tile { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; }
.tile-view { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--plate-2); color: var(--ink-2); font: 600 var(--t-2xl)/1 var(--f-ui); letter-spacing: 0.02em; }
/* the camera tile of a call (.tile-view.cam) keeps the size and the face of every other tile; the camera that finds a
   paper by its edges is .viewfinder (11-papiere.css) */
.tile-view.cam { padding: 10px; font: 500 var(--t-s)/1.35 var(--f-ui); letter-spacing: 0; color: var(--muted); text-align: center; }
/* the name and the line under it read at 12 px with the reading leading; the browser's own small would set 10 px */
.tile-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px 8px; font: 600 var(--t-xs)/1.35 var(--f-ui); }
.tile-name small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--muted); }
.tile-name svg.icon { width: 16px; height: 16px; color: var(--muted); }
.tile[data-speaking] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.callbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 6px 10px; background: var(--sheet); border: 1px solid var(--edge-strong); border-radius: var(--r); color: var(--ink); }
.callbtn { display: grid; justify-items: center; align-content: center; gap: 5px; min-width: 66px; min-height: 56px; padding: 8px 8px 6px; border: 0; border-radius: var(--r); background: transparent; color: inherit; font: 500 var(--t-xs)/1 var(--f-ui); cursor: pointer; }
.callbtn:hover { background: var(--wash-strong); }
.callbtn[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.callbtn.end { background: var(--stop-ink); color: var(--sheet); }
.callbar :focus-visible { outline-color: var(--focus); }
.ptr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: var(--r); background: var(--ink); color: var(--sheet); font: 600 var(--t-xs)/1.35 var(--f-ui); white-space: nowrap; text-shadow: none; }
.ptr svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.np.is-called { background-color: var(--wait-tint); box-shadow: inset 0 0 0 1.5px var(--wait-ink); border-radius: var(--r); }
.np:has(.ptr) { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
.tafel-pad { padding: 12px 16px; }
.round .keys { margin-top: 12px; }
.tgrid tr.is-called th, .tgrid tr.is-called td { background-color: var(--wait-tint); }
.consent { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ringing { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 28px 18px; text-align: center; }
.ringing .who-chip.l { width: 88px; height: 88px; font-size: var(--t-2xl); }
.ringing h1 { font: 600 var(--t-2xl)/1.15 var(--f-ui); letter-spacing: -0.01em; text-transform: none; }
.answers { display: flex; justify-content: center; gap: 44px; padding: 8px 16px 14px; background: var(--page); }
.roundbtn { display: grid; justify-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); font: 500 var(--t-xs)/1 var(--f-ui); cursor: pointer; text-decoration: none; }
.roundbtn span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: var(--sheet); }
.roundbtn svg.icon { width: 28px; height: 28px; }
.roundbtn.yes span { background: var(--ok-ink); }
.roundbtn.no span { background: var(--stop-ink); }
a.roundbtn { text-decoration: none; }

/* ---------- Wupp: the ask line, the run slip, the answer sheet ---------- */
.ask-line { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px 4px 12px; background: var(--sheet); border: 1px solid var(--control-line); border-radius: var(--r); box-shadow: none; }
.ask-line > svg.icon { color: var(--muted); }
.ask-line input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font-size: var(--t-m); }
.ask-line input::placeholder { color: var(--muted); opacity: 1; }
.ask-line input:focus { outline: none; }
.ask-line:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
/* the run slip (Laufzettel): a pinned sheet with a perforated foot; the commission, then its steps with their lamps */
.slip { position: relative; display: grid; gap: 12px; min-width: 0; margin-bottom: 7px; padding: 18px 18px 14px; background: var(--sheet); border: 1px solid var(--edge); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; box-shadow: none; --knock: var(--sheet); }
.slip::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: -7px; height: 7px; background: var(--sheet); box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge); -webkit-mask: var(--perf-up) 0 0 / 8px 7px repeat-x; mask: var(--perf-up) 0 0 / 8px 7px repeat-x; }
.slip::after { top: -4px; left: 50%; margin-left: -4.5px; }
.slip-head { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.slip-head h2 { font: 600 var(--t-xl)/1.2 var(--f-ui); letter-spacing: -0.01em; text-transform: none; text-shadow: none; }
.slip-head .no { color: var(--muted); font: 500 var(--t-s)/1 var(--f-mono); }
.slip-ask { max-width: 60ch; margin: 0; padding: 10px 12px; background: var(--plate-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--edge); }
.slip-ask cite { display: block; margin-top: 4px; color: var(--muted); font: 400 var(--t-xs)/1.35 var(--f-ui); font-style: normal; }
.slip-steps { display: grid; }
.slip-step { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 0; }
.slip-step > .light { margin-top: 4px; }
.slip-step + .slip-step { border-top: 1px solid var(--rule); }
.slip-step b { display: block; font: 600 var(--t-m)/1.35 var(--f-ui); }
.slip-step .meta { display: block; font-size: var(--t-s); color: var(--muted); }
.slip-step .meta .state { color: var(--ink-2); font-weight: 600; }
.slip-step .run { grid-column: 2 / -1; padding-top: 6px; }
.slip-step .ask { grid-column: 2 / -1; display: grid; gap: 8px; margin-top: 6px; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--wait-ink); border-radius: var(--r); color: var(--ink); font-size: var(--t-s); box-shadow: none; }
.slip-step .ask .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.slip-not { display: grid; gap: 6px; font-size: var(--t-s); color: var(--ink-2); }
.slip-not b { color: var(--ink); font-weight: 600; }
.slip-not ul { display: grid; gap: 4px; }
.slip-not li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.slip-not li svg { margin-top: 2px; }
.slip-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--muted); font: 500 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric: tabular-nums; }
/* the answer sheet: one or two sentences, then a plate per claim with its source; the receipt under it */
.answer { position: relative; display: grid; gap: 10px; min-width: 0; padding: 18px 18px 14px; background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; --knock: var(--sheet); }
.answer-q { font-size: var(--t-s); color: var(--muted); }
.answer-text { max-width: 60ch; font-size: var(--t-l); line-height: 1.45; }
.answer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 8px; border-top: 1px dashed var(--rule); color: var(--muted); font: 500 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric: tabular-nums; }
.plate.is-pointed, .np.is-pointed { background-color: var(--wait-tint); box-shadow: inset 0 0 0 1.5px var(--wait-ink); }
.tgrid tr.is-pointed th, .tgrid tr.is-pointed td { background-color: var(--wait-tint); }
/* the number guard: a figure in a draft is a locked field that code filled from the record */
.fig { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 5px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--plate-2); font: 600 0.95em/1.55 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; --ic-block: transparent; --ic-point: currentColor; }
.fig svg { position: relative; top: 1px; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.draft { display: grid; gap: 10px; padding: 14px 16px; background: var(--sheet); border: 1px dashed var(--wait-ink); border-radius: var(--r); box-shadow: none; }
.draft-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.draft p { max-width: 64ch; }
.draft-foot { font-size: var(--t-xs); color: var(--muted); }

/* ---------- the signature interactions ---------- */
/* Stempeln: the blue key is held; a pencil line fills under its words in 0.7 s; the stamp lands */
.btn.sign[data-hold] { position: relative; isolation: isolate; touch-action: none; -webkit-user-select: none; user-select: none; }
.btn.sign[data-hold]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; background: var(--on-sign); transform: scaleX(0); transform-origin: left center; }
.btn.sign[data-hold]:hover:not(:disabled) { background: var(--sign); border-color: var(--sign); }
.btn.sign[data-hold].is-holding { transform: translateY(1px); outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.sign[data-hold].is-holding::before { transform: scaleX(1); transition: transform 700ms linear; }
.hold-hint { font-size: var(--t-xs); color: var(--muted); }
/* Warum: every lamp answers why it shows what it shows */
.why { display: grid; gap: 12px; }
.why-head { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; }
.why-head b { display: block; font: 600 var(--t-l)/1.35 var(--f-ui); }
.why-head span { font-size: var(--t-s); color: var(--muted); }
/* Zeitschieber: a board as it was on an earlier day; nothing can be decided in the past */
.dayrule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.dayrule .lab { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dayrule .seg button { min-height: 34px; font-variant-numeric: tabular-nums; }
.dayrule .past { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.is-past .tafel-head, .is-past .tgrid thead th { color: var(--muted); }

/* ---------- Die Runde: everything that rings for me, one at a time ---------- */
.screen.focus { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; min-height: calc(var(--vh) * 100 - var(--proto-h)); padding: 24px 16px 40px; }
.screen.focus > .screen-note { margin-top: 28px; }
.round { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); width: min(1040px, 100%); }
.round-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.round-count { font: 600 var(--t-3xl)/1 var(--f-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: none; }
.round-count small { font: 500 var(--t-s)/1 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.round-track { display: flex; align-items: center; gap: 4px; }
.round-track i { flex: 1; max-width: 56px; height: 3px; background: var(--rule); border-radius: 0; }
.round-track i[data-s="done"] { background: var(--ink); }
.round-track i[data-s="on"] { background: var(--wait); box-shadow: 0 0 0 1px var(--wait-ink); }
.round-item { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.round-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.round-answers .btn { flex: 1 1 200px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-xs); color: var(--muted); }
.keys span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Stecktafel: people by days, T-cards pinned in the slots, a lane for what nobody has yet ---------- */
:root { --board-light: rgba(255, 253, 248, 0.5); }
:root[data-theme="nacht"] { --board-light: rgba(242, 239, 230, 0.04); }
.steckwrap { overflow-x: auto; padding: 2px; scrollbar-width: thin; }
/* the day columns are at least 184 px, so that a long compound (Unterhaltsreinigung, Hausmeisterrunde) stays whole on
   the stem of a T-card where no dictionary of hyphens is at hand */
.steck { display: grid; grid-template-columns: 188px repeat(5, minmax(184px, 1fr)); min-width: 1108px; overflow: hidden; background: var(--board); border: var(--frame-w) solid var(--frame); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge-strong), inset 0 0 0 1px var(--edge); --knock: var(--board); }
.steck > * { min-width: 0; padding: 8px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.steck > .sh { padding: 10px 10px 8px; background: var(--sheet); border-bottom: 1px solid var(--edge-strong); font: 600 var(--t-s)/1.2 var(--f-ui); text-transform: none; text-shadow: none; }
.steck > .sh small { display: block; margin-top: 3px; color: var(--muted); font: 500 var(--t-xs)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.steck > .today { background-color: var(--board-light); }
.steck > .sh.today { background-color: var(--sheet); box-shadow: inset 0 -2px 0 var(--ink); }
.steck > .sp { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; align-content: start; align-items: center; background: var(--sheet); }
.steck > .sp b { font: 600 var(--t-s)/1.25 var(--f-ui); }
.steck > .sp .meta { grid-column: 2; font-size: var(--t-xs); color: var(--muted); }
.steck > .slot { display: grid; gap: 10px; align-content: start; min-height: 84px; padding: 12px 8px 10px; background-image: var(--ruled); }
.steck > .slot.off { display: grid; place-items: center; background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) var(--hatch-grey-mix), var(--board)) 0 1px, var(--board) 1px 4px); --muted: var(--ink-2); }
.steck > .slot.off span { padding: 2px 8px; border-radius: var(--r); background: var(--sheet); color: var(--unknown-ink); font: 500 var(--t-xs)/1.4 var(--f-ui); }
.steck > .lane-lab { display: grid; align-content: start; gap: 2px; background: var(--sheet); border-bottom: 2px solid var(--edge-strong); }
.steck > .lane-lab b { font: 600 var(--t-s)/1.25 var(--f-ui); }
.steck > .lane-lab .meta { font-size: var(--t-xs); color: var(--muted); }
.steck > .lane { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: start; padding: 12px 10px 10px; border-bottom: 2px solid var(--edge-strong); }
.steck > .lane .tcard { width: 200px; }
/* a T-card is cut as a T: the head carries the place, the stem the lamp and the time; a suggestion is hatched */
.tcard {
  --tc: var(--edge-strong); --tc-sh: 10px;
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 6px; align-items: start;
  width: 100%; margin-top: 5px; padding: 0 0 9px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.tcard::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--tc-sh); right: var(--tc-sh); background-color: var(--sheet); border: 1px solid var(--tc); border-top: 0; border-radius: 0 0 var(--r) var(--r); box-shadow: 1px 1px 0 var(--lift-soft); }
.tcard b { position: relative; grid-row: 1; grid-column: 1 / -1; padding: 10px 8px 6px; background-color: var(--sheet); border: 1px solid var(--tc); border-radius: var(--r) var(--r) 0 0; color: var(--ink); font: 600 var(--t-s)/1.25 var(--f-ui); text-align: center; overflow-wrap: break-word; hyphens: auto; }
.tcard b::before { top: -4px; left: 50%; margin-left: -4.5px; }
.tcard b::after { content: ""; position: absolute; left: calc(var(--tc-sh) + 0.5px); right: calc(var(--tc-sh) + 0.5px); bottom: -1px; height: 1px; background: inherit; background-color: var(--sheet); }
.tcard .light { grid-row: 2; grid-column: 1; margin: 2px 0 0 calc(var(--tc-sh) + 6px); }
.tcard .meta { grid-row: 2; grid-column: 2; padding-right: calc(var(--tc-sh) + 6px); color: var(--muted); font: 500 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric: tabular-nums; overflow-wrap: break-word; hyphens: auto; }
.tcard > :not(b):not(.light):not(.meta) { margin-inline: calc(var(--tc-sh) + 6px); }
.tcard:hover { --tc: var(--ink); }
.tcard[aria-pressed="true"] { --tc: var(--ink); }
.tcard[aria-pressed="true"] b, .tcard[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px var(--ink); }
.tcard[data-s="sug"] { --tc: var(--wait-ink); --muted: var(--ink-2); }
.tcard[data-s="sug"] b, .tcard[data-s="sug"]::before { background-image: repeating-linear-gradient(45deg, var(--hatch-line) 0 1px, var(--sheet) 1px var(--hatch-step)); }
.tcard[data-s="stop"] { --tc: var(--stop-ink); }
.tcard.is-accepted { --tc: var(--edge-strong); }
.tcard.is-accepted b, .tcard.is-accepted::before { background-image: none; }

/* ---------- Vorlagen, Verbindungen, Team, Konto ---------- */
.setup { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); width: min(1120px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 10px; }
.pack { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: start; min-height: 64px; padding: 12px; border: 1px solid var(--edge-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font: inherit; text-align: left; box-shadow: none; cursor: pointer; }
.pack:hover { border-color: var(--ink); }
.pack svg.icon { grid-row: span 2; width: 24px; height: 24px; color: var(--ink-2); }
.pack b { font: 600 var(--t-m)/1.35 var(--f-ui); }
.pack .meta { font-size: var(--t-s); color: var(--muted); }
.pack[aria-pressed="true"] { border-color: var(--ink); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--ink); }
.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.words .word { display: grid; gap: 3px; padding: 8px 10px; background: var(--plate-2); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: none; }
.words .word .lab { font-size: var(--t-xs); color: var(--muted); }
.words .word b { font: 600 var(--t-l)/1.2 var(--f-ui); letter-spacing: -0.005em; text-transform: none; }
.sicht { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ledger td .who-chip, .list .who-chip { display: inline-grid; }
.ledger td .person { min-width: 9.5rem; }
.person { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; align-items: center; }
.person b { font: 600 var(--t-s)/1.35 var(--f-ui); }
.person .meta { grid-column: 2; font-size: var(--t-xs); color: var(--muted); }
.meter { display: grid; gap: 6px; }
.meter .track { height: 10px; border-radius: 0; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 0; background: var(--ink-2); }
.meter .row { font-size: var(--t-s); }

/* ---------- Wupp reports on its own: answers by one tap, the trail of a follow-up, the lock screen ---------- */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.list .quick { margin-top: 8px; }
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--muted); }
.trail li { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.trail li:not([data-s]) { --l-ring: var(--lamp-off-ring); --l-glass: var(--lamp-off); --l-core: var(--lamp-off); --l-socket: var(--lamp-off); }
.trail li[aria-current] { --l-ring: var(--wait-ink); --l-glass: var(--wait-glass); --l-core: var(--wait); --l-socket: var(--wait); color: var(--ink); font-weight: 600; }
.trail li::before { content: ""; order: -1; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--l-glass); box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-socket), inset 0 0 0 6px var(--l-core); }
.trail li + li::after { content: ""; order: -2; flex: none; width: 16px; height: 1px; margin: 0 4px 0 6px; background: var(--control-line); }
.np > .trail { grid-column: 2 / -1; }
/* the lock screen: counts only, no names, no amounts; Wupp sits on the slip */
.lock { display: grid; align-content: start; gap: 10px; padding: 4px 2px 16px; }
.lock-time { display: grid; justify-items: center; gap: 6px; padding: 26px 0 14px; font: 500 var(--t-5xl)/1 var(--f-ui); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: none; }
.lock-time small { font: 400 var(--t-m)/1.35 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.notif { position: relative; display: grid; gap: 6px; padding: 12px 14px 12px; background: var(--sheet); border: 1px solid var(--edge-strong); border-radius: var(--r); box-shadow: 1px 1px 0 var(--lift-soft); --knock: var(--sheet); }
.notif-head { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--muted); }
.notif-head b { color: var(--ink); font: 600 var(--t-s)/1.2 var(--f-ui); }
.notif-head time { margin-left: auto; font: 500 var(--t-xs)/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.notif-text { font-size: var(--t-s); }
.notif.quiet { background: transparent; border-style: dashed; box-shadow: none; }
.btn[data-follow][aria-pressed="true"] { border-color: var(--wait-ink); color: var(--ink); background: var(--sheet); }
.btn[data-follow][aria-pressed="true"]::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--wait-ink), inset 0 0 0 3px var(--wait-glass), inset 0 0 0 6px var(--wait); }

/* ---------- the Wupp drawer: a clipboard hung on the board's right edge, its clip carries Wupp and the count ---------- */
:root { --clipboard: #E2DCCF; --clip-metal: #F4F1EA; }
:root[data-theme="nacht"] { --clipboard: #1A2420; --clip-metal: #3A4641; }
:root[data-theme="draussen"] { --clipboard: #FFFFFF; --clip-metal: #FFFFFF; }
.drawer.wupp { background: var(--clipboard); --knock: var(--sheet); }
.drawer.wupp .drawer-head { position: relative; z-index: 2; align-items: flex-start; padding: 14px 12px 34px 18px; background: var(--clipboard); border-bottom: 0; --knock: var(--clip-metal); }
.drawer.wupp .drawer-head::after {
  content: attr(data-n); position: absolute; left: 50%; bottom: -6px; display: grid; place-items: center; width: 178px; height: 30px; margin-left: -89px;
  border: 1.5px solid var(--plate-line); border-radius: 4px 4px 12px 12px; background: var(--clip-metal); color: var(--ink);
  box-shadow: 1px 2px 0 var(--lift), inset 0 -5px 0 var(--edge); font: 600 var(--t-s)/1 var(--f-ui); font-variant-numeric: tabular-nums; text-shadow: none;
}
.drawer.wupp .drawer-head::before { content: ""; position: absolute; left: 50%; bottom: 22px; width: 26px; height: 14px; margin-left: -13px; border: 1.5px solid var(--plate-line); border-bottom: 0; border-radius: 8px 8px 0 0; }
.wupp-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.wupp-id h2 { font: 600 var(--t-xl)/1.15 var(--f-ui); }
.wupp-id .sub { margin-top: 2px; font-size: var(--t-xs); color: var(--muted); }
.drawer.wupp .drawer-body { gap: 14px; padding-top: 22px; }
.drawer.wupp .drawer-body > .answer, .drawer.wupp .drawer-body > .slip { box-shadow: 1px 1px 0 var(--lift-soft); }
/* what lies on the clipboard without its own paper is clipped on as a sheet */
.drawer.wupp .drawer-body > .list, .drawer.wupp .drawer-body > .stand-head, .drawer.wupp .drawer-body > .kv { padding: 12px 14px; background: var(--sheet); border-radius: var(--r); box-shadow: 0 0 0 1px var(--edge), 1px 1px 0 var(--lift-soft); --knock: var(--sheet); }
.drawer.wupp .drawer-body > .stand-head + .list { margin-top: -14px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--r) var(--r); }
.drawer.wupp .drawer-body > .stand-head:has(+ .list) { border-radius: var(--r) var(--r) 0 0; }
.drawer.wupp .drawer-body > .answer::after { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); }
.drawer.wupp .drawer-foot { background: var(--clipboard); border-top-color: var(--edge-strong); }
.drawer.wupp .drawer-foot .ask-line { width: 100%; }
.drawer.wupp .msgs { padding: 0; }
.drawer.wupp .msgs .msg { grid-template-columns: 28px minmax(0, 1fr); }
.drawer.wupp .xs.muted { color: var(--ink-2); }
/* the clipboard is a tint: what is written straight on it takes the second ink */
.drawer.wupp .drawer-head, .drawer.wupp .drawer-foot, .drawer.wupp .drawer-body > p, .drawer.wupp .drawer-body > .quick, .drawer.wupp .drawer-body > .ask-ideas, .drawer.wupp .msgs > .msg { --muted: var(--ink-2); }
/* the clip at the board's right edge: the end of the clipboard, Wupp on it, the count engraved */
.clip-tab { position: fixed; right: 0; top: calc(var(--proto-h) + var(--top-h) + 18px); z-index: 30; display: grid; justify-items: center; align-content: center; gap: 5px; width: 34px; min-height: 78px; padding: 9px 0 9px 2px;
  background: var(--clip-metal); color: var(--ink); border: 1.5px solid var(--plate-line); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -1px 1px 0 var(--lift); cursor: pointer;
  transition: transform 160ms var(--ease); --knock: var(--clip-metal); }
/* the loop of the clip, as on the clipboard's head, turned towards the board */
.clip-tab::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 26px; margin-top: -13px; border: 1.5px solid var(--plate-line); border-right: 0; border-radius: 13px 0 0 13px; }
.clip-tab:hover { transform: translateX(-3px); }
.clip-tab svg { width: 20px; height: 20px; overflow: visible; }
.clip-tab .clip-n { min-width: 22px; font: 700 var(--t-l)/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: center; }
.has-clip-tab .screen.desk.with-inspector .inspector { padding-right: 56px; }
.has-clip-tab .screen.desk:not(.with-inspector) .main { padding-right: 60px; }

/* ==========================================================================================
   Papiere (TAFEL.md section 32): someone else's paper drawn as a page, the pages of a capture,
   the edges the camera found, one sheet in a chosen style.
   ========================================================================================== */
.sheet.page { padding: 20px 18px 16px; gap: 10px; font-size: var(--t-xs); }
.sheet.page .page-h { font: 600 var(--t-m)/1.35 var(--f-ui); }
.sheet.page table { font-size: var(--t-xs); }
/* what was read is underlined; an uncertain reading has a dashed line; what a row points at is framed */
.sheet.page mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sheet.page mark.unsure { text-decoration-style: dashed; }
.sheet.page p.is-pointed { outline: 2px solid currentColor; outline-offset: 3px; }
.sheet.page tr.is-pointed > td { box-shadow: inset 0 2px 0 currentColor, inset 0 -2px 0 currentColor; }
.pages { display: flex; flex-wrap: wrap; gap: 10px; }
.photo.page { width: 92px; aspect-ratio: 210 / 297; align-content: center; }
.photo.page.is-old { background: transparent; box-shadow: none; border: 1px dashed var(--control-line); color: var(--ink-2); }
/* the viewfinder of the phone's camera: the paper is found by its edges before anything is taken. Its own name, so that
   the camera tile of a call (.tile-view.cam) keeps the size of a tile */
.viewfinder { position: relative; display: grid; place-items: center; min-height: 300px; padding: 26px 30px; overflow: hidden; background: var(--board); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--edge); }
.viewfinder .sheet { width: 100%; max-width: 250px; transform: rotate(-2.5deg); }
.viewfinder .edges { position: absolute; inset: 16px 20px; border: 2px dashed var(--ink); border-radius: var(--r); pointer-events: none; }
.viewfinder > .chip { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 2px 8px; background: var(--sheet); border-radius: var(--r); }
/* Stile: one sheet in the style a person chooses (letterhead, type pair, ink, paper, density as attributes) */
.sheet.styled { --st-head: var(--f-ui); }
.sheet.styled .lh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: end; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.sheet.styled .lh-name { font: 700 var(--t-xl)/1.1 var(--st-head); }
.sheet.styled .lh-name small { display: block; margin-top: 4px; font: 400 var(--t-xs)/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; }
.sheet.styled .lh-contact { font-size: var(--t-xs); line-height: 1.5; text-align: right; }
.sheet.styled h2 { font-family: var(--st-head); }
.sheet[data-st-head="mitte"] .lh { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.sheet[data-st-head="mitte"] .lh-contact { text-align: center; }
.sheet[data-st-type="sans"] h2 { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sheet[data-st-type="werkstatt"] h2, .sheet[data-st-type="werkstatt"] .lh-name { font-variant-caps: all-small-caps; letter-spacing: 0.03em; font-weight: 700; }
.sheet[data-st-type="werkstatt"] .lh-name small { font-variant-caps: normal; }
.sheet[data-st-type="mono"] { --st-head: var(--f-mono); }
.sheet[data-st-type="mono"] h2, .sheet[data-st-type="mono"] .lh-name { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sheet[data-st-density="dicht"] { padding: 18px 20px 16px; gap: 8px; line-height: 1.35; }
.sheet[data-st-density="luftig"] { padding: 34px 38px 28px; gap: 18px; line-height: 1.65; }

/* ==========================================================================================
   Asked for by the screen session of 7 October 2026 (Mitbringen, Papiere, Wupp Pro):
   a row of figures, a field that fits a table cell, a table of raw file rows, a drop zone,
   a card with a price line; and the lamp as one SVG symbol for drawings outside a row.
   ========================================================================================== */
/* a row of figures: one fact per figure, as many in a row as fit */
.facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); }
.fact .val { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.01em; }
.main > .facts .fact .val, .panel > .facts .fact .val { font-size: var(--t-2xl); }
.fact .small { font-size: var(--t-xs); line-height: 1.35; }
/* a dropdown or a field that fits a table cell */
td > select.in, td > input.in, .ledger .in, .tgrid .in { min-width: 8.5rem; min-height: 34px; padding: 4px 8px; font-size: var(--t-s); }
td > select.in, .ledger select.in, .tgrid select.in { padding-right: 28px; background-position: right 9px center; }
/* a table of raw file rows wider than three columns keeps its columns and scrolls inside its sheet */
.gridwrap > .ledger.raw, .tablewrap > .ledger.raw { width: max-content; min-width: 100%; }
.ledger.raw th, .ledger.raw td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger.raw tbody th { position: sticky; left: 0; background: var(--sheet); color: var(--muted); font-weight: 500; }
/* an upload drop zone: ruled paper with a dashed edge the files are laid on */
.drop { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 148px; padding: 22px 18px; border: 1.5px dashed var(--control-line); border-radius: var(--r);
  background-color: var(--sheet); background-image: repeating-linear-gradient(180deg, var(--sheet) 0 27px, color-mix(in srgb, var(--ink) 10%, var(--sheet)) 27px 28px); color: var(--ink-2); font-size: var(--t-s); text-align: center; }
.drop svg.icon { width: 28px; height: 28px; color: var(--ink); }
.drop b { color: var(--ink); font: 600 var(--t-m)/1.35 var(--f-ui); }
.drop.is-over, .drop:focus-within { border-style: solid; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* a card that carries a price line */
.pack .price { grid-column: 2; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); color: var(--ink); font: 600 var(--t-l)/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.pack .price small { margin-left: 4px; color: var(--muted); font: 400 var(--t-xs)/1.2 var(--f-ui); }
/* the lamp as an SVG symbol (#lamp), for a drawing that is not a row */
symbol .l-ring { fill: none; stroke: var(--l-ring, var(--lamp-off-ring)); stroke-width: 1; }
symbol .l-disc { fill: var(--l-glass, var(--lamp-off)); stroke: none; }
symbol .l-hatch { fill: none; stroke: var(--lamp-hatch, transparent); stroke-width: 1.1; stroke-linecap: round; }
symbol .l-core { fill: var(--l-core, var(--lamp-off)); stroke: none; transition: fill 120ms ease-out; }
[data-s="sug"] { --lamp-hatch: var(--wait); }

/* ==========================================================================================
   Motion: physical, meaningful, fast; every move under 320 ms with one easing; all of it off under
   prefers-reduced-motion. Pinned things settle, slips slide in from the clipboard's edge, the stamp
   descends, lamps fade their core, the drawer slides as a panel, toasts rise from under the edge,
   counts tick, the ladder's pencil tick climbs, Wupp blinks and looks toward a new slip.
   ========================================================================================== */
.tick { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.tick > span { grid-area: 1 / 1; }
/* the ladder: a pencil tick climbing three rungs (rules, check model, language model) */
.ladder { display: inline-grid; grid-template-columns: 14px auto; gap: 8px; align-items: center; }
.ladder-art { width: 14px; height: 22px; overflow: visible; fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-linecap: round; }
.ladder-tick { stroke: var(--ink); stroke-width: 1.75; transition: transform 200ms var(--ease); }
.ladder[data-rung="1"] .ladder-tick { transform: translateY(-6px); }
.ladder[data-rung="2"] .ladder-tick { transform: translateY(-12px); }
.ladder-lab { font-size: var(--t-s); color: var(--muted); }
.ladder-lab b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  /* what is shown settles onto its pin */
  .screen.is-arriving .tafel, .screen.is-arriving .panel, .screen.is-arriving .thread, .screen.is-arriving .answer,
  .screen.is-arriving .slip, .screen.is-arriving .steck, .screen.is-arriving .notif { animation: settle 160ms var(--ease) backwards; }
  .screen.is-arriving .cols > :nth-child(2), .screen.is-arriving .tcard:nth-child(2) { animation-delay: 40ms; }
  .screen.is-arriving .cols > :nth-child(3) { animation-delay: 80ms; }
  .tafel.pins-cards > .tafel-rows > .np { animation: settle 160ms var(--ease) backwards; }
  .tafel.pins-cards > .tafel-rows > .np:nth-child(2) { animation-delay: 40ms; }
  .tafel.pins-cards > .tafel-rows > .np:nth-child(3) { animation-delay: 80ms; }
  /* overlays: the scrim darkens, a sheet rises, the drawer slides as a panel, a slip slides in from its edge */
  .overlay.is-entering { animation: scrim-in 160ms ease-out; }
  .bsheet.is-entering, .overlay.is-entering > .dialog, .overlay.is-entering > .cmdbar, .overlay.is-entering > .family { animation: rise 200ms var(--ease); }
  .overlay.is-entering > .drawer { animation: drawer-in 240ms var(--ease); }
  .overlay.is-entering > .drawer.wupp .msgs > .msg:first-child, .overlay.is-entering > .drawer.wupp .drawer-body > .answer { animation: slip-in 240ms var(--ease) 140ms backwards; }
  .msg.is-new, .slip.is-new { animation: slip-in 240ms var(--ease) backwards; }
  /* the stamp descends and lands, the ink spreads, the sheet gives 1 px */
  .stamp.is-landing .seal { animation: stamp-down 320ms var(--ease) both, stamp-spread 60ms ease-out 320ms both; }
  .is-nudged { animation: nudge 140ms ease-out 260ms; }
  /* a lamp that waits for a person rings three times, then holds */
  .light.rings { animation: lamp-ring 1080ms ease-out 400ms 1 both; }
  .light.l.rings { animation: none; }
  /* the toast: a slip pushed out from under the board's edge */
  .toast { transition: transform 240ms var(--ease), opacity 160ms ease-out; }
  /* counts tick */
  .tick .old { animation: tick-out 160ms ease-out both; }
  .tick .new { animation: tick-in 160ms ease-out both; }
  .btn:active, .callbtn:active, .mark:active { transition: transform 80ms ease-out; }
  .wupp-blink { --w-blink: w-blink-now 240ms ease-in-out 1 !important; }
}
@keyframes settle { from { transform: translateY(-2px); } to { transform: none; } }
@keyframes scrim-in { from { background-color: transparent; } }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slip-in { from { transform: translateX(calc(100% + 32px)); } to { transform: none; } }
@keyframes stamp-down { from { opacity: 0; transform: rotate(-5deg) scale(1.15); } to { opacity: 0.8; transform: rotate(-5deg) scale(1); } }
@keyframes stamp-spread { from { opacity: 0.8; } to { opacity: 0.85; } }
@keyframes nudge { 0% { transform: none; } 40% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes lamp-ring {
  0%, 22%, 44%, 66%, 100% { box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-socket), inset 0 0 0 6px var(--l-core); }
  11%, 33%, 55% { box-shadow: inset 0 0 0 1px var(--l-ring), inset 0 0 0 3px var(--l-glass), inset 0 0 0 4px var(--l-glass), inset 0 0 0 6px var(--l-glass); }
}
@keyframes tick-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes tick-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes pencil { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
@keyframes w-blink { 0%, 93%, 100% { transform: scaleY(var(--w-lid, 0.1)); } 96% { transform: scaleY(1); } }
@keyframes w-blink-twice { 0%, 84%, 90%, 100% { transform: scaleY(var(--w-lid, 0.1)); } 87%, 93% { transform: scaleY(1); } }
@keyframes w-blink-now { 0%, 100% { transform: scaleY(var(--w-lid, 0.1)); } 50% { transform: scaleY(1); } }
@keyframes w-listen { 0%, 22%, 100% { transform: scaleX(1); } 8% { transform: scaleX(0.55); } 15% { transform: scaleX(1.12); } }
@keyframes w-think { 0%, 55%, 100% { opacity: 0.25; } 18% { opacity: 1; } }
@keyframes w-dash { 0%, 10%, 100% { transform: translateX(0); } 4% { transform: translateX(-1.6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* the hold stays: its line is the only feedback that the stamp is coming */
  .btn.sign[data-hold].is-holding::before { transition: transform 700ms linear !important; }
}

/* ==========================================================================================
   Width and text size: columns never push the page sideways. Breakpoints in em follow the
   reader's text size: 1600, 1360, 1100, 900 and 520 px at 16 px.
   ========================================================================================== */
.main, .inspector, .pane, .stack, .pub-body, .pubpage, .notice, .dialog, .conflict, .panel { grid-template-columns: minmax(0, 1fr); }
.thread, .slip, .answer, .draft, .call-stage, .call-side, .round-item > *, .setup > * { grid-template-columns: minmax(0, 1fr); }
.inspector, .pane, .pub-body, .dialog, .sheet, .panel { container-type: inline-size; }
@container (max-width: 18em) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 14px; }
  .kv dd { margin-bottom: 6px; }
  .kv.lines dd { border-top: 0; padding-top: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
/* beside an inspector (1100 to 1600 px) the command field shows its glass, the one word of .short ("Suchen") and its
   key, and gives the rest of its words to the path, which then stays on one line; the whole words remain its name */
@media (min-width: 68.8em) and (max-width: 100em) {
  .screen.desk.with-inspector .topbar .trigger { padding-left: 10px; }
  .screen.desk.with-inspector .topbar .trigger > span:not(.short) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .screen.desk.with-inspector .topbar .trigger > .short { display: inline; }
}
@media (max-width: 85em) {
  .screen.desk.with-inspector { grid-template-columns: var(--rail-w) minmax(0, 1fr) 320px; }
  .desk-split { grid-template-columns: minmax(0, 1fr); }
  .desk-split .street { grid-auto-flow: column; grid-auto-columns: 256px; overflow-x: auto; padding: 6px 4px 12px; }
  .cols.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 68.75em) {
  :root { --rail-w: 64px; --proto-h: 84px; }
  .proto { flex-wrap: wrap; align-content: center; }
  .proto-nav { order: 3; flex: 1 1 100%; }
  .rail-brand { justify-items: center; padding: 14px 8px 10px; }
  .rail-brand .wordmark .name, .rail nav a > span:not(.n), .rail nav button > span:not(.n), .rail-foot span, .ws { display: none; }
  .rail nav { padding: 4px 8px; }
  .rail nav a, .rail nav button, .rail-foot a, .rail-foot button { position: relative; grid-template-columns: 20px; justify-content: center; gap: 0; padding: 8px; }
  /* the Stand on the rail of icons: the lamp alone, its words kept for a screen reader */
  .rail-foot .stand-plate { grid-template-columns: 20px; justify-content: center; margin-bottom: 4px; }
  .rail-foot .stand-plate > .light { display: inline-block; }
  .rail-foot .stand-plate > span:not(.light) { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail nav a .n { position: absolute; top: 5px; right: 6px; font-size: 0; gap: 0; }
  .rail nav a .n.calm { display: none; }
  .rail nav a.sub { margin-left: 0; }
  .screen.desk.with-inspector { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .inspector { position: static; grid-column: 2; height: auto; border-left: 0; border-top: 1px solid var(--rule); }
  .has-clip-tab .screen.desk .main, .has-clip-tab .screen.desk.with-inspector .inspector { padding-right: 60px; }
  .cols, .cols.wide-left, .cols.three { grid-template-columns: minmax(0, 1fr); }
  .trigger { min-width: 0; }
  .signs { grid-template-columns: minmax(0, 1fr); }
  .talk, .call, .round-item { grid-template-columns: minmax(0, 1fr); }
  .talk-list .tafel-rows { grid-auto-flow: row; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56.25em) {
  .screen.desk, .screen.desk.with-inspector { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-rows: none; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 8px; }
  .rail-brand .wordmark .name { display: block; }
  .rail-brand .wordmark { flex: none; }
  .rail-brand .ws { display: flex; width: auto; flex: 0 1 220px; min-width: 0; }
  .rail nav { grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; gap: 2px; padding: 2px 10px 8px; overflow-x: auto; scrollbar-width: none; }
  .rail nav a, .rail nav button { width: auto; grid-template-columns: 20px max-content auto; gap: 8px; padding: 6px 10px; white-space: nowrap; }
  .rail nav a > span:not(.n), .rail nav button > span:not(.n) { display: block; }
  .rail nav a .n { position: static; font-size: var(--t-s); gap: 5px; }
  .rail nav a .n.calm { display: inline-flex; }
  .rail nav .sep { width: 1px; height: auto; margin: 6px 4px; }
  .rail-foot { display: none; }
  /* the rail lets its foot go, but the Stand stays as one line under the row of areas, on a phone too (the installed
     app's Stand sheet carries "neue Version" and "installieren"; brief Tafel 3, section 10) */
  .rail-foot:has(> .stand-plate) { display: flex; padding: 0 14px 10px; border-top: 0; }
  .rail-foot:has(> .stand-plate) > :not(.stand-plate) { display: none; }
  .rail-foot .stand-plate { grid-template-columns: 20px auto; gap: 8px; min-height: 44px; margin: 0; padding: 6px 12px 6px 8px; }
  .rail-foot .stand-plate > span:not(.light) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .inspector { grid-column: 1; padding: 20px 16px 28px; }
  /* the clip is gone at this width, and with it the room that the work column kept for it */
  .has-clip-tab .screen.desk .main, .has-clip-tab .screen.desk:not(.with-inspector) .main, .has-clip-tab .screen.desk.with-inspector .inspector { padding-right: 16px; }
  .clip-tab { display: none; }
  .main { padding: 18px 16px 32px; }
  .topbar { position: static; padding: 8px 12px; }
  .topbar .crumbs { flex: 1 1 auto; }
  .topbar .trigger { flex: 1 1 100%; order: 9; }
  .empty, .versions, .cmd-body { grid-template-columns: minmax(0, 1fr); }
  .cmd-preview { border-left: 0; border-top: 1px solid var(--rule); }
  .overlay.top { padding-top: 16px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar .track { grid-column: 1 / -1; order: 3; }
  .pubpage.wide { width: 100%; }
}
@media (max-width: 32.5em) {
  :root { --proto-h: 80px; }
  .proto { gap: 4px 8px; padding: 5px 8px; }
  .proto-name small { display: none; }
  .proto-name { margin-right: auto; font-size: var(--t-s); }
  .proto .seg button { min-height: 28px; padding: 2px 6px; }
  .trigger kbd, .search kbd { display: none; }
  .topbar .pres, .topbar .pill:not(.wupp) { display: none; }
  .screen.field, .screen.public { padding: 0; }
  .phone { width: 100%; height: calc(var(--vh) * 100 - var(--proto-h)); border-radius: 0; box-shadow: none; }
  .pubpage { width: 100%; border-radius: 0; box-shadow: none; }
  .screen-note { margin: 16px 16px 24px; padding: 0; }
  .main-head h1 { font-size: var(--t-2xl); }
  .tafel-head .no { font-size: var(--t-l); }
  .tafel > :not(.tafel-head) { margin-inline: 6px; }
  .tafel::after { left: 6px; right: 6px; }
  .tafel { padding-bottom: 6px; }
  .tafel::after { bottom: 5px; }
  .tafel-head { padding: 10px 10px 10px; }
  .np { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 10px; padding: 9px 8px; }
  .np .chev { display: none; }
  /* a row's own buttons stand under its words, which keep the width of the row */
  .np > .actions { grid-column: 2 / -1; }
  .steck { grid-template-columns: 136px repeat(5, minmax(184px, 1fr)); min-width: 1056px; }
  button.cellw { min-height: 44px; }
  .sheet { padding: 18px 16px; }
  .sheet .signline { grid-template-columns: minmax(0, 1fr); }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg { grid-template-columns: 30px minmax(0, 1fr); }
  .msg.event time { grid-column: 2; }
  .msg-acts { grid-column: 2; opacity: 1; }
  .slip-step { grid-template-columns: 12px minmax(0, 1fr); }
  .slip-step > .btn { grid-column: 2; justify-self: start; }
  .callbtn { min-width: 56px; }
  .round-head { grid-template-columns: minmax(0, 1fr) auto; }
  .round-track { grid-column: 1 / -1; order: 3; }
  /* the round keeps the 16 px gutter of every other screen of the phone */
  .screen.focus { padding: 12px 16px 32px; }
  .viewfinder { min-height: 260px; padding: 20px 22px; }
  .sheet[data-st-density="luftig"] { padding: 22px 18px 20px; }
  .drawer { width: 100%; }
}
/* Print: the script switches to Tag before printing; this block only removes chrome and frames */
@media print {
  .proto, .navbar, .rail, .topbar, .screen-note, .statusbar, .overlay, .scrim, .bsheet, .toast, .trigger, .primary-bar, .clip-tab { display: none !important; }
  .callbar, .composer, .msg-acts, .typing, .answers, .dayrule, .quick { display: none !important; }
  .screen.desk, .screen.desk.with-inspector { display: block; }
  .inspector { position: static; height: auto; }
  .phone { height: auto; overflow: visible; }
  .gridwrap, .tablewrap { overflow: visible; }
  .np, .tl-row, .plate, .hint, tr, .msg, .slip-step, .tcard { break-inside: avoid; }
}
/* Embedded in a public page: the screen alone, without the prototype bar or notes */
.is-embed { --proto-h: 0px; }
.is-embed .proto, .is-embed .screen-note, .is-embed .clip-tab { display: none; }
.is-embed .screen.field, .is-embed .screen.public { padding: 16px 0; }
.is-embed, .is-embed * { scrollbar-width: none; }
.is-embed ::-webkit-scrollbar { display: none; }
/* review captures (?shot=1&full=1): the panes show all their content instead of scrolling on their own */
.is-full .rail, .is-full .inspector { position: static; height: auto; overflow: visible; }
.is-full .topbar { position: static; }
.is-full .phone { height: auto; min-height: calc(var(--vh) * 100 - var(--proto-h)); overflow: visible; }
.is-full .scroll { overflow: visible; }