/* /fonts/fonts.css */
/* Self-hosted fonts (latin, latin-ext), from Google Fonts (OFL). No request leaves the app origin. */
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f1.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f1.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f1.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/f2.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/f3.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/f4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/f5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f6.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f6.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f6.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/f7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* /css/tokens.css */
/* Shared design tokens. Every colour, shadow, radius, and easing in the app
comes from here; component files never use literal colours. */
:root {
/* surfaces */
--bg: #f5f6f2;
--surface: #ffffff;
--surface-2: #fafbf8;
--sunken: #eceee8;
--overlay: rgb(12 18 15 / .55);
/* text */
--fg: #141c18;
--muted: #5c6862;
--faint: #8a958f;
/* lines */
--line: #e1e5df;
--line-strong: #c9d0c8;
/* brand */
--accent: #1b6a57;
--accent-hover: #155646;
--accent-soft: #dcefe8;
--accent-fg: #ffffff;
/* urgency, set by the agent per card: fg colour and soft background */
--urg-low: #6b7771; --urg-low-soft: #eceee8;
--urg-normal: #1b6a57; --urg-normal-soft: #dcefe8;
--urg-high: #b4551b; --urg-high-soft: #fbe9dc;
--urg-critical: #b3261e; --urg-critical-soft: #fbe0de;
--deny: #a8322d;
/* Tones: our own session and card colours. A session has one hue (--hue, 0 to 359, set on its row, card or
drawing; 162 is the bell's green) and every hue comes in the same four weights, measured in oklch so that
no hue is louder or paler than its neighbour: wash (the pastel ground of a tile), edge (the pastel of a
card's edge and of a line), mid (a quiet sign, a dashed line), pen (the dark outline, words, the filled tile).
Each weight is a lightness and a chroma here; the rule below the themes turns them into --tone-wash,
--tone-edge, --tone-mid and --tone-pen. --tone-turn turns the hue so that 162 lands on the bell's green. */
--tone-wash-l: .95; --tone-wash-c: .022;
--tone-edge-l: .88; --tone-edge-c: .045;
--tone-mid-l: .64; --tone-mid-c: .075;
--tone-pen-l: .47; --tone-pen-c: .085;
--tone-turn: 10;
/* the crown of a desk's crowned session: gold, the pen it is drawn with, the wash inside it, the three stones */
--gold: #c39a1f; --gold-pen: #a8820f;
/* the inks of the stamps on the stacks (css/stamps.css): stamp blue, violet, green */
--stamp-ink-later: #2b3f9e; --stamp-ink-works: #5c3aa0; --stamp-ink-done: #1b6a57;
--crown-wash: #f2c94c; --crown-jewel: #cf3a2b;
/* status strip traffic light: decision waits on the human, working is in progress, done is finished */
--st-decision: #c62f25; --st-decision-soft: #fbe0de;
--st-working: #b07a06; --st-working-soft: #fbf0cf;
--st-done: #1f8a4c; --st-done-soft: #dcf2e4;
/* elevation */
--shadow-sm: 0 1px 2px rgb(20 30 25 / .06);
--shadow-md: 0 1px 2px rgb(20 30 25 / .06), 0 8px 24px -10px rgb(20 30 25 / .16);
--shadow-lg: 0 2px 4px rgb(20 30 25 / .06), 0 24px 48px -16px rgb(20 30 25 / .28);
/* shape */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 24px;
--r-pill: 999px;
/* spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
/* type */
--display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
--font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--t-xs: .72rem; --t-sm: .84rem; --t-md: .95rem; --t-lg: 1.1rem; --t-xl: 1.35rem; --t-2xl: 1.7rem;
/* motion */
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--d-fast: 140ms; --d-med: 260ms; --d-slow: 480ms;
}
/* Light is the default for everyone. Dark applies only when the user picks it
(data-theme="dark" on ), never from the system setting. */
:root[data-theme="dark"] {
--bg: #0e1311; --surface: #171d1a; --surface-2: #1c2420; --sunken: #111715; --overlay: rgb(0 0 0 / .65);
--fg: #e9eeea; --muted: #9aa8a0; --faint: #6c7a73;
--line: #252f2a; --line-strong: #35423b;
--accent: #6fd0b5; --accent-hover: #8adcc5; --accent-soft: #17332b; --accent-fg: #08130f;
--urg-low: #8b9891; --urg-low-soft: #1c2420;
--urg-normal: #6fd0b5; --urg-normal-soft: #17332b;
--urg-high: #f2a56c; --urg-high-soft: #3a2415;
--urg-critical: #ff8a80; --urg-critical-soft: #41191a;
--deny: #f08a83;
--tone-wash-l: .28; --tone-wash-c: .03;
--tone-edge-l: .4; --tone-edge-c: .05;
--tone-mid-l: .62; --tone-mid-c: .075;
--tone-pen-l: .8; --tone-pen-c: .095;
--gold: #d2ab3c; --gold-pen: #dcb84e;
--stamp-ink-later: #9aacf2; --stamp-ink-works: #bda2f0; --stamp-ink-done: #6fd0b5;
--crown-jewel: #ff6f5c;
--st-decision: #ff8a80; --st-decision-soft: #41191a;
--st-working: #f2c14e; --st-working-soft: #3a2f10;
--st-done: #6cd598; --st-done-soft: #14301f;
--shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
--shadow-md: 0 1px 2px rgb(0 0 0 / .4), 0 10px 28px -12px rgb(0 0 0 / .7);
--shadow-lg: 0 2px 4px rgb(0 0 0 / .4), 0 28px 56px -18px rgb(0 0 0 / .85);
color-scheme: dark;
}
/* The four tones of a hue (see --tone-* above). Worked out wherever a hue is set: inline by the page
(style="--hue: 205"), or by a class that names its own hue; everything inside inherits them. Without a hue
the tones are the bell's green. A new place that sets --hue in a stylesheet joins this list. */
:root, [style*="--hue"], .agent-avatar, .crown-bracket {
--tone-h: calc(var(--hue, 162) + var(--tone-turn));
--tone-wash: oklch(var(--tone-wash-l) var(--tone-wash-c) var(--tone-h));
--tone-edge: oklch(var(--tone-edge-l) var(--tone-edge-c) var(--tone-h));
--tone-mid: oklch(var(--tone-mid-l) var(--tone-mid-c) var(--tone-h));
--tone-pen: oklch(var(--tone-pen-l) var(--tone-pen-c) var(--tone-h));
}
/* Shared primitive: inline video and audio attachments, used by chat and cards alike. */
.media { margin: 0; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.media video { display: block; width: 100%; max-height: min(60vh, 480px); border-radius: var(--r-md); background: #000; }
.media audio { display: block; width: 100%; }
.media figcaption { font-size: var(--t-xs); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The agent's advice: a swipe of a highlighter behind the words of the option it would pick (ui.js
adviceLoop, the one place that draws the mark; it is appended to the option or to its label and
finds the lines of the words by itself). One pass per line, behind the words, never on them.
Ink: --advice; how strong: --marker. It
has slanted, uneven ends and is taller than a selection, so it reads as marked by hand, not as
selected or ticked. */
.is-advised { position: relative; isolation: isolate; --advice: var(--urg-high); --marker: .26; }
:root[data-theme="dark"] .is-advised { --marker: .34; }
.advice-loop { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
/* (Rules written for the old loop stretched it beyond its host; the marker measures the words itself and stays inside, so it never makes its host scroll.) */
.advice-loop.advice-marker { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; rotate: none !important; }
.advice-loop path { stroke: var(--advice); stroke-linecap: butt; stroke-linejoin: round; opacity: var(--marker); }
/* On a tile filled with colour: no band (it would be a smudge behind white words) but a light line
under the words, like a pale marker on dark paper. A host says so with --advice-under: 1. */
.inbox-answer.is-lead.is-advised, .inbox-option[aria-pressed="true"].is-advised, .focus-opt[data-state="done"].is-advised { --advice-under: 1; --advice: color-mix(in srgb, var(--surface) 82%, var(--tone-pen)); --marker: .95; }
.advice-loop.is-under path { stroke-linecap: round; }
/* The Focus window's pair of squares appends no mark of its own: there the band is laid behind the
label as a background (the same marker, one line). The two strokes of the old circle are gone. */
.focus-opt.is-advised::before, .focus-opt.is-advised::after { content: none; }
.focus-opts[data-count="duo"] .focus-opt.is-advised .focus-opt-label { margin-inline: -6px; padding-inline: 6px; background: linear-gradient(176deg, transparent 20%, color-mix(in srgb, var(--advice) 30%, transparent) 20%, color-mix(in srgb, var(--advice) 30%, transparent) 86%, transparent 86%); }
/* Not in use: the pointing hand (ui.js pointingHand), which was the advice mark for an afternoon. */
.advice-hand { position: absolute; z-index: 1; left: -19px; top: 50%; width: 27px; height: auto; translate: 0 -50%; rotate: -3deg; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.advice-hand-ink { stroke: var(--advice, var(--urg-high)); stroke-width: 1.8; }
.advice-hand-paper { stroke: var(--advice-paper, transparent); stroke-width: 5; }
/* Words the agent underlined (`__so__` in its text; ui.js rich()): a line drawn under them by hand, in
the accent colour. The line is a drawn stroke repeated along the words, so it follows them over
line breaks. */
.rich-under { padding-bottom: 3px; background: var(--under-ink) repeat-x 0 100% / 72px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root { --under-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 7' preserveAspectRatio='none' fill='none' stroke='%231b6a57' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0.0 4.0 Q9.0 3.2 14.5 3.9 Q20.0 4.6 26.5 4.0 Q33.0 3.4 39.5 4.0 Q46.0 4.5 52.0 3.9 Q58.0 3.3 65.0 3.6 L72.0 4.0'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] { --under-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 7' preserveAspectRatio='none' fill='none' stroke='%236fd0b5' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0.0 4.0 Q9.0 3.2 14.5 3.9 Q20.0 4.6 26.5 4.0 Q33.0 3.4 39.5 4.0 Q46.0 4.5 52.0 3.9 Q58.0 3.3 65.0 3.6 L72.0 4.0'/%3E%3C/svg%3E"); }
/* Shared primitive: a table in a text (ui.js rich()): ruled like a sheet, a heavier rule under its head.
Wider than its column, it scrolls sideways on its own. */
.rich-table-wrap { max-width: 100%; overflow-x: auto; }
.rich-table { border-collapse: collapse; font-size: .95em; line-height: 1.4; }
.rich-table th, .rich-table td { padding: 6px 14px 6px 0; text-align: left; vertical-align: top; white-space: normal; border-bottom: 1px solid var(--line-strong); }
.rich-table th { font-weight: 600; border-bottom: 2px solid var(--fg); white-space: nowrap; }
.rich-table tr:last-child td { border-bottom: 0; }
.rich-table th:last-child, .rich-table td:last-child { padding-right: 0; }
/* Shared primitive: a link to something a session published, as a compact card (ui.js assetLink):
a small picture or a drawn sign of its kind, its type, its title. Used wherever rich() runs. */
.asset-link { display: flex; align-items: center; gap: var(--s-3); width: fit-content; max-width: min(100%, 26rem); margin-block: 2px; padding: 6px var(--s-4) 6px 6px; border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--fg); text-decoration: none; white-space: normal; transition: box-shadow 100ms ease-out; }
a.asset-link:hover { box-shadow: 0 0 0 1px var(--fg); }
.asset-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 5px; overflow: hidden; background: var(--sunken); color: var(--muted); }
.asset-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asset-thumb svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.asset-link-text { min-width: 0; display: grid; gap: 3px; }
.asset-link-text .caps { font: 600 .72rem/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.asset-link-text strong { font: 700 1rem/1.25 var(--display); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-link.is-gone { background: none; box-shadow: none; outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.asset-link.is-gone strong { color: var(--muted); font-weight: 600; }
/* The clipboard (css/clipboard.css: the Trommi menu, opened). The sheet's paper, the rule under each line, the wash
under the pointer; the board (kraft, a pen line around it, drawn once and stretched as a border image) and the
metal clip are drawings, so each theme has its own. */
:root {
--clip-paper: color-mix(in srgb, var(--surface) 88%, #efe2b4);
--clip-rule: color-mix(in srgb, #4a7fc0 20%, transparent);
--clip-wash: color-mix(in srgb, var(--fg) 7%, transparent);
--clip-shadow: 0 16px 30px -14px rgb(60 40 20 / .5);
--clip-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M9.5 1.4Q30 .8 50.6 1.5Q58.4 1.8 58.6 9.6Q59.1 30 58.5 50.4Q58.3 58.5 50.2 58.6Q30 59.2 9.8 58.5Q1.6 58.3 1.5 50.3Q.9 30 1.4 9.7Q1.6 1.7 9.5 1.4Z' fill='%23cdb597' stroke='%236b4f33' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 11.5H48.5V48.5H11.5Z' fill='none' stroke='%236b4f33' stroke-opacity='.5'/%3E%3C/svg%3E");
--clip-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 34' fill='none' stroke='%233f4843' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23c5cac6' d='M8 31Q7 20 12 17Q30 15.4 34 14Q36 4.6 48 4.4Q60 4.6 62 14Q66 15.4 84 17Q89 20 88 31Z'/%3E%3Cpath d='M41.6 12.6Q42 8.8 48 8.6Q54 8.8 54.4 12.6'/%3E%3Cpath stroke='%23fff' stroke-opacity='.75' stroke-width='1.2' d='M17 22.4Q48 20.8 79 22.2'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
--clip-rule: color-mix(in srgb, #7fa9dd 22%, transparent);
--clip-shadow: 0 16px 30px -14px rgb(0 0 0 / .7);
--clip-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M9.5 1.4Q30 .8 50.6 1.5Q58.4 1.8 58.6 9.6Q59.1 30 58.5 50.4Q58.3 58.5 50.2 58.6Q30 59.2 9.8 58.5Q1.6 58.3 1.5 50.3Q.9 30 1.4 9.7Q1.6 1.7 9.5 1.4Z' fill='%236f5a42' stroke='%23b89670' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M11.5 11.5H48.5V48.5H11.5Z' fill='none' stroke='%230e1311' stroke-opacity='.6'/%3E%3C/svg%3E");
--clip-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 34' fill='none' stroke='%23e3e8e4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23818984' d='M8 31Q7 20 12 17Q30 15.4 34 14Q36 4.6 48 4.4Q60 4.6 62 14Q66 15.4 84 17Q89 20 88 31Z'/%3E%3Cpath d='M41.6 12.6Q42 8.8 48 8.6Q54 8.8 54.4 12.6'/%3E%3Cpath stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' d='M17 22.4Q48 20.8 79 22.2'/%3E%3C/svg%3E");
}
/* /css/app.css */
/* Shell: page layout, a session's conversation with its filters, lists, sidebar, phone views.
Every colour, shadow, radius, and easing comes from tokens.css. */
/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
--bar-h: 52px;
--gutter: var(--s-6);
height: 100vh;
height: var(--app-h, 100dvh);
display: grid;
grid-template-columns: 256px minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
background: var(--surface);
color: var(--fg);
font: 15px/1.55 var(--font);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--fg); }
.theme-switch *, .theme-switch *::before, .theme-switch *::after { transition: none !important; }
.offscreen { position: fixed; left: -200vw; top: 0; opacity: 0; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.caps { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
/* Scrollbars: thin and quiet in the panes, in the house colours, no arrow buttons; none at all on the
sidebar (it still scrolls by wheel, touch and keys). Text fields keep the system's own. */
#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--line-strong) 80%, transparent) transparent; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar { width: 8px; height: 8px; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid transparent; background: var(--line-strong); background-clip: padding-box; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-track { background: transparent; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-button { display: none; }
#agents { scrollbar-width: none; }
#agents::-webkit-scrollbar { display: none; }
/* ---- top bar ------------------------------------------------------------- */
.topbar {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3);
min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
padding: env(safe-area-inset-top, 0px) max(var(--s-3), env(safe-area-inset-right, 0px)) 0 max(var(--s-5), env(safe-area-inset-left, 0px));
background: var(--surface);
border-bottom: 1px solid var(--line);
position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.brand h1 { font: 700 1.08rem/1 var(--display); letter-spacing: -.012em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark-bg { fill: var(--accent); }
.brand-mark-pen { fill: none; stroke: var(--accent-fg); stroke-linecap: round; stroke-linejoin: round; }
.conn {
display: inline-flex; align-items: center; gap: 7px;
height: 28px; padding: 0 11px 0 9px;
border-radius: var(--r-pill);
font-size: var(--t-xs); font-weight: 500; letter-spacing: .01em; color: var(--muted);
transition: background var(--d-med) var(--ease-out), color var(--d-med) var(--ease-out);
}
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); position: relative; }
.conn[data-state="online"] i { background: var(--accent); }
.conn[data-state="online"] i::after {
content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--accent); opacity: .22;
}
.conn[data-state="connecting"] i { animation: blink 1.2s var(--ease-in-out) infinite; }
.conn[data-state="offline"] { background: var(--urg-high-soft); color: var(--urg-high); }
.conn[data-state="offline"] i { background: var(--urg-high); animation: blink 1.2s var(--ease-in-out) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.icon-btn {
width: 40px; height: 40px; flex: none; display: grid; place-items: center;
border: 0; border-radius: var(--r-pill); background: none; color: var(--muted);
transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--sunken); color: var(--fg); }
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }
/* ---- conversation: layout ------------------------------------------------ */
/* A session fills the page: its title, then its conversation or its canvas. */
#session { display: none; grid-column: 2; min-width: 0; min-height: 0; flex-direction: column; background: var(--surface); }
body:not([data-scope="all"]):not([data-page]) #session { display: flex; }
/* The title lines up with the column of the conversation and of the questions below it. */
.pane-title {
flex: none; display: flex; align-items: center; gap: var(--s-3); min-height: 56px;
padding: var(--s-2) max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter)));
border-bottom: 1px solid var(--line);
}
.pane-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); }
/* The picture is a button to its drawings, the name a button to rename it. */
.pane-mark { flex: none; padding: 0; border: 0; border-radius: 11px; background: none; }
.pane-name button { max-width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; overflow: hidden; text-overflow: ellipsis; }
@media (any-hover: hover) { .pane-mark:hover .agent-avatar { box-shadow: 0 0 0 2px var(--line-strong); } .pane-name button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); } }
.pane-title h2 { min-width: 0; font: 800 1.2rem/1.2 var(--display); letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sessions laid together: each name is a button that picks that one, for the canvas and for a phone's one column. */
/* Sessions laid together use the whole width, as their columns do: no name is cut short. */
body[data-pair] .pane-title { padding-inline: var(--gutter); }
.pane-members { display: flex; align-items: baseline; gap: .35em; }
.pane-members span { color: var(--faint); font-weight: 600; }
.pane-members button { min-width: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; overflow: hidden; text-overflow: ellipsis; }
/* Two of the same name: what tells them apart stands small behind each. */
.pane-members small { margin-left: .5em; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
body[data-view="scribble"] .pane-members button[aria-pressed="false"] { color: var(--faint); }
body[data-view="scribble"] .pane-members button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Filters lay a list over the conversation: two quiet words at the head's right end, filled while one holds. */
.filters { flex: none; display: flex; align-items: center; gap: var(--s-1); }
.filters button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.filters button:hover { color: var(--fg); background: var(--sunken); }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.filters b { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--urg-high); color: var(--surface); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.filters b:empty { display: none; }
body[data-view="scribble"] .filters { display: none; }
/* The switch between the session's two modes is part of its title: words, the current one underlined. */
.modes { flex: none; display: flex; align-items: center; margin-right: calc(-1 * var(--s-3)); }
.modes button { position: relative; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-size: var(--t-md); font-weight: 500; white-space: nowrap; }
.modes button + button { margin-left: var(--s-2); }
.modes button + button::before { content: "·"; position: absolute; left: calc(-1 * var(--s-1) - .15em); color: var(--faint); font-weight: 700; }
.modes button:hover { color: var(--fg); background: var(--sunken); }
.modes button[aria-current] { color: var(--fg); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Something new was said while you were looking at a list or the canvas. */
.modes button[data-unread]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
#chat, #scribble { flex: 1; min-width: 0; min-height: 0; display: none; position: relative; }
body[data-view="chat"] #chat { display: flex; overflow-x: auto; }
body[data-view="scribble"] #scribble { display: block; }
/* One pane per session; sessions laid together stand side by side, each with its own composer. */
.chat-pane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#chat[data-cols]:not([data-cols="1"]) .chat-pane { min-width: 340px; --gutter: var(--s-5); }
.chat-pane + .chat-pane { border-left: 1px solid var(--line); }
.chat-pane-head { flex: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--gutter); border-bottom: 1px solid var(--line); font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.chat-pane-head strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pane-head small { flex: none; font-size: inherit; color: var(--faint); white-space: nowrap; }
.chat-pane-mark { flex: none; width: 20px; height: 20px; color: var(--fg); }
/* The log and the two lists share one place; a filter decides which is seen. The others keep their scroll position. */
.chat-body { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.chat-body > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.pane-list { overflow-y: auto; overscroll-behavior: contain; visibility: hidden; padding-block: var(--s-8) var(--s-10); }
body[data-filter] .log { visibility: hidden; }
body[data-filter="questions"] .pane-questions, body[data-filter="files"] .pane-files { visibility: visible; }
body[data-filter] .jump { display: none; }
.column { width: 100%; max-width: 47.5rem; margin-inline: auto; padding-inline: var(--gutter); }
.log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.log-inner { min-height: 100%; display: flex; flex-direction: column; padding-block: var(--s-8) var(--s-6); }
/* ---- conversation: messages ---------------------------------------------- */
.msg { margin-top: var(--s-8); min-width: 0; }
.msg.cont { margin-top: var(--s-3); }
.day + .msg, .day + .event { margin-top: var(--s-5); }
/* A message that asks back about a question says which one. */
.msg-about { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; margin-bottom: 4px; padding: 0; border: 0; background: none; font-size: var(--t-xs); color: var(--muted); }
.msg-about span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* (a finger needs 36px: the line is taller than it looks) */
.msg-about { padding-block: 9px; margin-block: -9px -5px; }
.msg-about:hover span:last-child { color: var(--fg); text-decoration: underline; }
.agent-mark {
width: 24px; height: 24px; flex: none; display: grid; place-items: center;
border-radius: var(--r-sm); background: var(--accent); color: var(--accent-fg);
}
.agent-mark .ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.msg-name { font-weight: 600; font-size: var(--t-sm); }
.msg-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.msg-user { align-self: flex-end; max-width: min(82%, 34rem); display: flex; flex-direction: column; align-items: flex-end; }
.msg-user.cont { margin-top: var(--s-1); }
.bubble {
padding: 10px 16px; background: var(--sunken); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere;
}
.bubble p { white-space: pre-wrap; }
.msg-user .msg-time { margin-top: 5px; padding-right: 4px; }
/* One timestamp per run of user messages, under the last one. */
.msg-user:has(+ .msg-user.cont) .msg-time { display: none; }
.msg-user:has(+ .msg-user.cont) .bubble { border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); }
/* Markdown as rich() builds it. Shared by the conversation and the history. */
:is(#chat, #inbox) .rich{ font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
:is(#chat, #inbox) .rich > * + *{ margin-top: .8em; }
:is(#chat, #inbox) .rich p{ white-space: pre-wrap; }
:is(#chat, #inbox) .rich ul{ padding-left: 1.35em; }
:is(#chat, #inbox) .rich li + li{ margin-top: .3em; }
:is(#chat, #inbox) .rich li::marker{ color: var(--faint); }
:is(#chat, #inbox) .rich strong{ font-weight: 600; }
:is(#chat, #inbox) .rich a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(#chat, #inbox) .rich a:hover{ color: var(--accent-hover); }
/* "☞" before a paragraph (ui.js rich()): the drawn hand points at it from the margin, the text a shade stronger */
.rich-point { position: relative; padding-left: 34px; font-weight: 600; }
.rich-point > .advice-hand { left: 0; top: .72em; width: 26px; rotate: -2deg; }
:is(#chat, #inbox) .rich :not(pre) > code{
font: .86em/1.4 var(--mono); padding: .12em .4em; border-radius: 6px;
background: var(--sunken); border: 1px solid var(--line);
}
:is(#chat, #inbox) .rich .code{ border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
:is(#chat, #inbox) .rich .code-head{
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: 4px 4px 4px 14px; background: var(--sunken); border-bottom: 1px solid var(--line);
}
:is(#chat, #inbox) .rich .code-lang{ font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:is(#chat, #inbox) .rich .code-copy{
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
border: 0; border-radius: var(--r-sm); background: none; color: var(--muted);
font-size: var(--t-xs); font-weight: 500;
transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
:is(#chat, #inbox) .rich .code-copy:hover{ background: var(--surface); color: var(--fg); }
:is(#chat, #inbox) .rich .code-copy.is-done{ color: var(--accent); }
:is(#chat, #inbox) .rich .code-copy .ico{ width: 15px; height: 15px; }
:is(#chat, #inbox) .rich pre{ margin: 0; padding: 14px 16px; overflow-x: auto; tab-size: 2; }
:is(#chat, #inbox) .rich pre code{ font: .84rem/1.65 var(--mono); }
/* attachments */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); max-width: 34rem; }
.shots-one { grid-template-columns: minmax(0, 26rem); }
.shot {
display: block; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken);
transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out), transform var(--d-med) var(--ease-out);
}
.shots-one .shot { aspect-ratio: 16 / 10; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.shot-broken img { visibility: hidden; }
.files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file-chip {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 12px 0 9px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
color: var(--fg); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
transition: border-color var(--d-fast) var(--ease-out);
}
.file-chip .ico { width: 17px; height: 17px; color: var(--muted); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#chat, #inbox) .rich .file-chip{ color: var(--fg); }
.file-chip:hover { border-color: var(--accent); }
/* something the session published under a link of its own */
.asset-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); max-width: 34rem; padding: var(--s-3) var(--s-4); border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 2px rgb(20 30 25 / .04), 0 5px 5px rgb(20 30 25 / .04); }
.asset-text { flex: 1 1 14rem; min-width: 0; display: grid; gap: 2px; }
.asset-text .caps { color: var(--faint); }
.asset-text strong { font: 800 1.15rem/1.25 var(--display); overflow-wrap: anywhere; }
.asset-text span:not(.caps) { color: var(--muted); font-size: var(--t-sm); }
.asset-actions { flex: none; display: flex; gap: var(--s-2); }
.asset-open, .asset-copy { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-4); border: 1px solid var(--fg); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.asset-open { background: var(--fg); color: var(--bg); }
.asset-copy { background: none; color: var(--fg); border-color: var(--line-strong); }
.asset-copy:hover { border-color: var(--fg); }
/* Share with someone outside (ui.js assetShare): a third button, and a panel on a line of its own under the card's
text and buttons. On the compact link card inside a text (.asset-linked) the button stands beside the card. */
.asset-share { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; }
.asset-share:hover, .asset-share[aria-expanded="true"] { border-color: var(--fg); }
.asset-share[data-shared] { border-color: var(--accent); color: var(--accent); }
.asset-share[data-shared]::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); }
.asset-actions { flex-wrap: wrap; }
.asset-linked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); max-width: 100%; vertical-align: middle; }
.asset-linked > .asset-link { min-width: 0; max-width: min(100%, 26rem); flex: 0 1 auto; }
.asset-linked > .asset-share { min-height: 36px; padding: 0 var(--s-3); }
.asset-share-panel { flex: 1 1 100%; min-width: 0; max-width: 34rem; display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 var(--t-sm)/1.4 var(--font); color: var(--fg); white-space: normal; text-align: left; }
.asset-share-panel[hidden], .asset-share-panel [hidden] { display: none; }
.asset-share-panel[data-busy] { opacity: .6; pointer-events: none; }
.asset-share-say { color: var(--muted); text-wrap: pretty; }
.asset-share-row { display: flex; gap: var(--s-2); min-width: 0; }
.asset-share-link { flex: 1; min-width: 0; height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--mono); text-overflow: ellipsis; }
.asset-share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.asset-share-ends { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.asset-share-ends select { height: 40px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
.asset-share-copy, .asset-share-go, .asset-share-stop { flex: none; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; }
.asset-share-copy:hover, .asset-share-stop:hover { border-color: var(--fg); }
.asset-share-go { justify-self: start; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.asset-share-stop { color: var(--urg-critical); }
.asset-share-error { color: var(--urg-critical); }
.asset-card.is-gone { background: none; box-shadow: none; border: 1px dashed var(--line-strong); }
.asset-card.is-gone strong { color: var(--muted); }
/* The server-rendered card (server/views/session.mjs assetCard): an artifact, sober, always with a picture of it on
the left (controller assetthumb: the decrypted picture, or a page's first screen; else the drawn kind), what it is,
Open, and one Copy link that copies the link anyone can open (controller share). Card Nr. 197. */
.asset-card.has-preview { display: grid; grid-template-columns: 176px minmax(0, 1fr); grid-template-areas: "preview text" "preview actions"; align-items: start; gap: var(--s-2) var(--s-4); max-width: 36rem; padding: var(--s-3); border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.asset-card.has-preview[data-busy] .asset-copy { opacity: .6; pointer-events: none; }
.asset-preview { grid-area: preview; position: relative; display: grid; place-items: center; width: 176px; height: 112px; overflow: hidden; border-radius: 6px; background: var(--sunken); color: var(--faint); text-decoration: none; }
.asset-preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
a.asset-preview:hover::after { box-shadow: inset 0 0 0 1px var(--line-strong); }
.asset-preview .asset-glyph { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.asset-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--sunken); opacity: 0; transition: opacity 160ms; }
.asset-preview > iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity 160ms; }
.asset-preview.is-shown > :is(img, iframe) { opacity: 1; }
.asset-page-label { position: absolute; z-index: 1; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 4px; background: var(--surface); color: var(--muted); box-shadow: 0 0 0 1px var(--line); font: 600 10px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.has-preview .asset-text { grid-area: text; padding-top: 2px; display: flex; flex-direction: column; gap: 3px; }
.has-preview .asset-text .caps { order: 3; font-size: var(--t-xs); }
.has-preview .asset-text strong { font: 800 1.05rem/1.25 var(--display); }
.has-preview .asset-note { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--t-sm); }
.has-preview .asset-actions { grid-area: actions; align-self: end; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -2px; }
.has-preview .asset-open { gap: 7px; min-height: 36px; padding: 0 14px; }
.has-preview .asset-open::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--asset-open-icon) center / contain no-repeat; mask: var(--asset-open-icon) center / contain no-repeat; }
.has-preview .asset-copy { gap: 6px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.has-preview .asset-copy::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--asset-link-icon) center / contain no-repeat; mask: var(--asset-link-icon) center / contain no-repeat; }
.has-preview .asset-copy:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.has-preview .asset-shared { display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; color: var(--accent); font: 500 var(--t-xs)/1 var(--font); white-space: nowrap; }
.has-preview .asset-stop { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.has-preview .asset-stop:hover { color: var(--fg); }
.asset-card.has-preview.is-gone { grid-template-areas: "preview text"; border: 0; background: none; box-shadow: 0 0 0 1px var(--line-strong); }
.asset-card.has-preview.is-gone .asset-preview { opacity: .6; }
.asset-card { --asset-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6 M20 4l-9 9 M18 14v5.5H4.5V6H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --asset-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2 M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 600px) {
.asset-card.has-preview { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "preview text" "actions actions"; gap: 10px 12px; }
.asset-preview { width: 104px; height: 72px; }
.has-preview .asset-text { align-self: center; }
}
/* board events: a quiet timeline between the messages */
.event {
--tone: var(--accent); --tone-soft: var(--accent-soft);
align-self: flex-start; max-width: 100%; margin: var(--s-6) 0 0 -6px;
display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 12px 4px 6px;
border: 0; border-radius: var(--r-pill); background: none; text-align: left; position: relative;
transition: background var(--d-fast) var(--ease-out);
}
.event.cont { margin-top: 0; }
.event:hover { background: var(--sunken); }
.event-asked { --tone: var(--urg-high); --tone-soft: var(--urg-high-soft); }
.event-done { --tone: var(--urg-low); --tone-soft: var(--urg-low-soft); }
.event-urgency { --tone: var(--urg-critical); --tone-soft: var(--urg-critical-soft); }
.event-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone-soft); color: var(--tone); position: relative; }
.event-ico .ico { width: 14px; height: 14px; stroke-width: 2.2; }
/* consecutive events are joined into one thread */
.event.cont .event-ico::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 12px; background: var(--line-strong); }
.event-body { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--t-sm); }
.event-kind { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tone); white-space: nowrap; }
.event-text, .event-about { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.event:hover .event-text, .event:hover .event-about { color: var(--fg); }
/* The question, named briefly, then what happened to it. The question gives way first when the line is short. */
.event-about { flex: 0 20 auto; min-width: 5ch; }
.event-about + .event-text { flex: 0 1 auto; color: var(--fg); font-weight: 600; }
.event-about + .event-text::before { content: "→"; margin-right: 8px; color: var(--faint); font-weight: 400; }
.event-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (Quiet: what happened to a question is a note between the messages, not a headline: one small line.) */
.event { min-height: 26px; margin-top: var(--s-3); padding-block: 2px; }
.event-ico { width: 16px; height: 16px; background: none; color: var(--faint); }
.event-ico .ico { width: 13px; height: 13px; stroke-width: 2; }
.event-body { font-size: var(--t-xs); gap: 6px; }
.event-kind { color: var(--faint); font-weight: 500; letter-spacing: .05em; font-size: .68rem; }
.event-text, .event-about { color: var(--faint); font-weight: 400; }
.event-about + .event-text { color: var(--muted); font-weight: 500; }
.event-about + .event-text::before { margin-right: 6px; }
.event-time { font-size: .68rem; opacity: 0; transition: opacity var(--d-fast); }
.event:hover .event-time, .event:focus-visible .event-time { opacity: 1; }
.event.cont .event-ico::before { content: none; }
/* A question that waits elsewhere (snoozed, with the agent) keeps a little of its colour. */
.event-snoozed .event-ico, .event-handed .event-ico { color: var(--urg-high); }
/* The answer stands where the question was asked (a session on its own): its second line is left out. */
.chat-pane:not(.is-several) .event-echo { display: none; }
/* day separators */
.day { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-10); color: var(--faint); }
.day:first-child { margin-top: 0; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* the agent is working */
.working { display: flex; align-items: center; gap: 10px; margin-top: var(--s-8); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.working .agent-mark { animation: breathe 2.4s var(--ease-in-out) infinite; }
.dots { display: inline-flex; gap: 4px; padding-top: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: hop 1.3s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes hop { 0%, 70%, 100% { opacity: .3; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes breathe { 50% { opacity: .55; } }
/* only messages that arrive live animate in */
.is-new { animation: arrive var(--d-slow) var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
/* empty conversation */
.empty-chat { margin: auto; padding-block: var(--s-8); display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30rem; }
.agent-mark-lg { width: 48px; height: 48px; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.agent-mark-lg .ico { width: 26px; height: 26px; }
.empty-chat h2 { font: 700 var(--t-2xl)/1.15 var(--display); letter-spacing: -.02em; margin-top: var(--s-6); text-wrap: balance; }
.empty-chat > p { color: var(--muted); font-size: 1rem; margin-top: var(--s-3); text-wrap: pretty; }
.empty-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.empty-pick {
min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--surface); font-size: var(--t-sm); font-weight: 500; color: var(--fg);
transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.empty-pick:hover { border-color: var(--accent); background: var(--accent-soft); }
/* before the first state arrives */
.skeleton { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; }
.sk { display: block; height: 14px; border-radius: var(--r-pill); background: var(--sunken); animation: shimmer 1.5s var(--ease-in-out) infinite; }
.sk-bubble { align-self: flex-end; width: min(60%, 22rem); height: 44px; border-radius: var(--r-lg); margin-bottom: var(--s-5); }
.sk-head { width: 96px; height: 22px; border-radius: var(--r-sm); margin-top: var(--s-3); }
.sk-w80 { width: 80%; } .sk-w55 { width: 55%; } .sk-w40 { width: 40%; }
.sk-event { width: 46%; height: 24px; margin-block: var(--s-4); }
@keyframes shimmer { 50% { opacity: .45; } }
/* ---- conversation: dock (jump button, error, composer) ------------------- */
.dock { flex: none; position: relative; padding-bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.dock::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none;
background: linear-gradient(to top, var(--surface), transparent);
}
.jump {
position: absolute; left: 50%; bottom: calc(100% + var(--s-3)); translate: -50% 0; z-index: 2;
display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 11px;
border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-md); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
animation: pop var(--d-med) var(--ease-spring) both;
transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.jump .ico { width: 17px; height: 17px; }
.jump:hover { border-color: var(--line-strong); }
.jump.has-unread { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
.jump.has-unread:hover { background: var(--accent-hover); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.send-error {
display: flex; align-items: flex-start; gap: 8px; margin: 0 var(--s-2) var(--s-2);
padding: 9px 12px; border-radius: var(--r-md);
background: var(--urg-critical-soft); color: var(--urg-critical); font-size: var(--t-sm); font-weight: 500;
animation: arrive var(--d-med) var(--ease-out) both;
}
.send-error .ico { width: 17px; height: 17px; margin-top: 2px; }
.composer {
display: flex; align-items: flex-end; gap: var(--s-1); padding: 7px; cursor: text;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out);
}
.composer { flex-wrap: wrap; }
.composer.is-drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
/* what is attached: a line of small chips above the words; a click takes one off */
.composer-files { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 4px; }
.composer-files:empty { display: none; }
.composer-file { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 32px; padding: 0 4px 0 7px; border: 0; border-radius: 9px; background: var(--sunken); color: var(--fg); font-size: var(--t-xs); font-weight: 500; }
.composer-file .sketch { flex: none; width: 17px; height: 17px; color: var(--muted); }
.composer-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a picture shows itself; the x says that a click takes the chip off */
.composer-file.has-thumb { padding-left: 4px; }
.composer-file img { flex: none; width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--surface); }
.composer-file em { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 400 15px/1 var(--font); font-style: normal; color: var(--muted); }
.composer-file:hover em { background: var(--fg); color: var(--bg); }
.composer-clip .sketch { width: 21px; height: 21px; stroke-width: 1.8; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.composer textarea {
flex: 1; min-width: 0; height: 40px; padding: 8px 4px; resize: none; border: 0; background: none;
font-size: 1rem; line-height: 24px; overflow-y: hidden; scrollbar-width: thin;
}
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--faint); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send {
width: 40px; height: 40px; flex: none; display: grid; place-items: center; position: relative;
border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-fg);
transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.send .ico { stroke-width: 2.2; }
.send:hover { background: var(--accent-hover); }
.send:active { transform: scale(.94); }
.send:disabled { background: var(--sunken); color: var(--faint); cursor: default; transform: none; }
.is-sending .send .ico { opacity: 0; }
.is-sending .send::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- lightbox ------------------------------------------------------------ */
/* A picture, large, is a page (chat.js): the board's ground, a way back at the top left, no veil and no blur. */
.lightbox {
width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
background: var(--bg); color: var(--fg); overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: var(--bg); }
.lightbox-back {
justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
margin: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--s-3) 0; padding: 0 var(--s-3) 0 var(--s-2);
border-radius: var(--r-pill); color: var(--muted); font: 600 var(--t-sm)/1 var(--font); text-decoration: none;
}
.lightbox-back:hover, .lightbox-back:focus-visible { background: var(--sunken); color: var(--fg); }
.lightbox-back .ico { width: 18px; height: 18px; }
.lightbox-stage {
min-height: 0; position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
padding: var(--s-2) var(--s-4) var(--s-4); cursor: zoom-out; touch-action: pan-y;
}
.lightbox-img {
max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; cursor: default;
border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg);
animation: zoom var(--d-med) var(--ease-out);
}
.lightbox-nav, .lightbox-close, .lightbox-open {
width: 44px; height: 44px; flex: none; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-md); transition: background var(--d-fast) var(--ease-out);
}
.lightbox-nav:hover, .lightbox-close:hover, .lightbox-open:hover { background: var(--sunken); }
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox-prev { left: var(--s-3); }
.lightbox-next { right: var(--s-3); }
.lightbox-bar {
justify-self: center; display: flex; align-items: center; gap: var(--s-2); max-width: calc(100vw - var(--s-6));
margin-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); padding: 6px 6px 6px 18px;
border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-lg);
}
.lightbox-bar .lightbox-open, .lightbox-bar .lightbox-close { width: 40px; height: 40px; border: 0; box-shadow: none; }
.lightbox-name { font: 500 var(--t-sm)/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lightbox-count { font-size: var(--t-xs); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: var(--s-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom { from { opacity: 0; transform: scale(.96); } }
/* ---- toast: an answer that can be taken back, or something that went wrong --- */
/* On a wide screen it stands in the empty foot of the sidebar, above the bar; on a phone just
above whatever is fixed to the bottom (app.js measures that): it covers no title and no tile,
and it takes no room in the list, so the rows stay where they are. */
.toast {
position: fixed; z-index: 20; left: var(--s-3); bottom: calc(var(--toast-bottom, var(--bar-h)) + var(--s-3));
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) 10px; width: 232px; padding: 10px 12px;
border-radius: var(--r-md); background: var(--fg); color: var(--bg); box-shadow: var(--shadow-lg);
font-size: var(--t-sm); font-weight: 500; line-height: 1.4; animation: drop var(--d-slow) var(--ease-out) both;
}
.toast i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--urg-critical-soft); }
.toast[data-kind="undo"] i { display: none; }
.toast span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.toast button { flex: 1 0 100%; min-height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-weight: 600; }
.toast button:disabled { opacity: .5; }
@keyframes drop { from { opacity: 0; transform: translateY(10px); } }
.tabbar { display: none; }
.scribble-fallback { padding: var(--s-8) var(--s-6); color: var(--muted); text-align: center; }
/* ---- a scribble in the conversation ---- */
.scribble-card { display: grid; gap: 0; padding: 0; width: min(280px, 100%); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; text-align: left; box-shadow: var(--shadow-sm); transition: box-shadow var(--d-fast), transform var(--d-fast) var(--ease-out); }
.scribble-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.scribble-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line); }
.scribble-card span { padding: 9px var(--s-3); font-size: var(--t-sm); font-weight: 600; }
.msg-user .scribble-card { margin-left: auto; }
.msg-user .bubble + .scribble-card, .msg-user .scribble-card + .bubble { margin-top: var(--s-2); }
/* ---- marks drawn by hand: each session's scribble, and the icons of the same family ---- */
.doodle { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sketch { display: block; width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* (the menu pill's mark and word too: a phone's opener is the caret alone) */
.brand-open > .pill-mark, .brand-open > .pill-word { display: none; }
/* (the rail's button and note exist on wide screens only: see the min-width block below) */
.rail-fold, .rail-tip { display: none; }
/* ---- sidebar: the inbox, then the sessions ---- */
#agents { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-2); background: var(--bg); border-right: 1px solid var(--line); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.agent-heading { margin-top: var(--s-4); padding: 0 var(--s-3) var(--s-2); color: var(--faint); }
/* Dashed: these are not here right now. */
.agent-heading-away { display: flex; align-items: center; gap: var(--s-2); }
.agent-heading-away::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
/* Invite an agent: a small drawn "+" in a dashed ring, in the avatars' column under the connected sessions (views/sidebar.mjs). */
.agent-invite { display: flex; margin: 2px 0 0; padding: 0 var(--s-3); }
.agent-invite-go { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1.5px dashed var(--line-strong); border-radius: 11px; background: none; color: var(--faint); cursor: pointer; transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast); }
.agent-invite-go:hover, .agent-invite-go:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.agent-invite-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-invite-go .sketch { width: 18px; height: 18px; stroke-width: 2; }
.agent-row { display: flex; align-items: center; min-width: 0; border-radius: var(--r-md); }
.agent-entry { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 46px; padding: 6px var(--s-3); border: 0; border-radius: var(--r-md); background: none; text-align: left; transition: background var(--d-fast); }
.agent-entry:hover { background: var(--sunken); }
.agent-entry[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
/* The inbox is the place, not one row of the list: a block of its own at the top of the sidebar, on
paper, a little taller, its name in the display face; the sessions follow below it after some air. */
.agent-text { flex: 1; min-width: 0; display: grid; }
.agent-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sessions laid together: one name per line. The ones that were laid on lie a little crooked and
a little to the side, as if put there by hand: that is the plus. */
.agent-text strong + strong { rotate: -1.8deg; translate: 7px 0; transform-origin: 0 60%; }
.agent-text strong + strong + strong { rotate: 1.3deg; translate: 3px 1px; }
.agent-text:has(strong + strong) { line-height: 1.3; }
.agent-text small { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-row.is-offline .agent-text strong { font-weight: 500; color: var(--muted); }
/* A session's mark stands without a ground: the drawing alone, in the session's colour. */
.agent-avatar { --hue: 162; flex: none; position: relative; width: 34px; height: 34px; padding: 1px; display: grid; place-items: center; border-radius: 11px; color: var(--tone-pen); }
.agent-avatar .doodle { stroke-width: 2; }
.agent-avatar.is-offline, .agent-pair.is-offline { filter: grayscale(1); opacity: .6; }
.agent-all { background: var(--sunken); padding: 0; }
.agent-all i { grid-area: 1 / 1; width: 18px; height: 13px; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1.500px var(--muted); }
.agent-all i:nth-child(1) { transform: translateY(-5px) scale(.78); opacity: .5; }
.agent-all i:nth-child(2) { transform: translateY(-2px) scale(.9); opacity: .75; }
.agent-all i:nth-child(3) { transform: translateY(2px); }
/* The inbox's badge: the knocks first (knuckles and their number, in the colour of urgency), then all that is open, quietly. */
.agent-counts { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.agent-count { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--fg); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.agent-entry[aria-current="true"] .agent-count:not(.is-knock) { background: var(--bg); }
.agent-count.is-knock { padding-left: 5px; background: var(--urg-high); color: var(--surface); }
.agent-count.is-total { padding-inline: 4px; background: none; color: var(--muted); }
.agent-count { padding: 3px 7px; }
.agent-count .sketch { width: 17px; height: 17px; stroke-width: 2; }
/* Sessions laid together: no tile of its own, the scribbles overlap inside one loop drawn round them. */
.agent-pair { flex: none; display: block; width: 60px; height: 44px; margin-inline: -9px -5px; }
.pair-mark { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pair-mark g { stroke: var(--tone-pen); stroke-width: 2.1; }
.pair-mark rect { stroke: none; pointer-events: all; }
.pair-loop { stroke: var(--muted); stroke-width: 1.1; }
/* The crowned session of a desk (card Nr. 172): a sketched crown, crooked on the corner of its mark: a gold wash,
one wobbly pen line, a red stone on each point (ui.js crown()). In the joint mark of a group it sits on that
session's scribble. */
.crown-mark { position: absolute; left: -24%; top: -34%; width: 68%; height: auto; rotate: -15deg; overflow: visible; fill: none; stroke: none; pointer-events: none; }
.crown-wash, .pair-mark g .pair-crown .crown-wash { fill: var(--crown-wash); stroke: none; }
.crown-pen, .pair-mark g .pair-crown .crown-pen { fill: none; stroke: var(--gold-pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crown-jewel, .pair-mark g .pair-crown .crown-jewel { fill: var(--crown-jewel); stroke: var(--gold-pen); stroke-width: 1; }
/* the crown not given: its outline only */
.crown-toggle[aria-pressed="false"] .crown-wash { display: none; }
.crown-toggle[aria-pressed="false"] .crown-pen { stroke: var(--muted); stroke-width: 1.6; }
.crown-toggle[aria-pressed="false"] .crown-jewel { fill: var(--bg); stroke: var(--muted); }
.crown-toggle[aria-pressed="false"]:hover :is(.crown-pen, .crown-jewel) { stroke: var(--gold-pen); }
/* Give the crown (agents.js crownToggle): a button of its own on the corner of the mark, 28 px
to hit, beside the mark and not in it. The gold crown on the crowned session. Otherwise a faint outline
that shows when the pointer or the keyboard is on the row or the mark (always, faintly, where
nothing hovers), and one click gives the crown. */
.crown-toggle { position: absolute; z-index: 2; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; transition: opacity var(--d-fast), scale var(--d-fast); }
.crown-toggle .crown-mark { position: static; width: 24px; rotate: -15deg; pointer-events: none; }
.crown-toggle[aria-pressed="false"] { opacity: .45; }
.crown-toggle:hover, .crown-toggle:focus-visible { opacity: 1; scale: 1.12; }
@media (hover: hover) {
.agent-row .crown-toggle[aria-pressed="false"], .pane-who .crown-toggle[aria-pressed="false"] { opacity: 0; }
.agent-row:hover .crown-toggle[aria-pressed="false"], .pane-who:hover .crown-toggle[aria-pressed="false"] { opacity: .5; }
.agent-row .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible), .pane-who .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible) { opacity: 1; }
body.is-pairing .crown-toggle { visibility: hidden; }
}
.agent-row { position: relative; }
.agent-row .crown-toggle { left: 11px; top: -13px; }
.pane-who { position: relative; }
.pane-who .crown-toggle { left: 4px; top: calc(50% - 32px); }
/* The crown sits ON the drawing, like on a head: over its middle (a touch to the left, as it leans), its base
resting on the drawing's top edge. Not beside the corner. */
.agent-avatar .crown-mark { left: 12%; top: -38%; width: 66%; }
/* In the sidebar the crown is 23px wide; its base rests on the top of the drawing's strokes (a few px over them: the
drawings start 6-8px into their box), its stones at the card's top edge (the same on a main's fold switch, crowns.css). */
#agents .agent-avatar .crown-mark { left: 5px; top: -8px; width: 23px; }
/* Carrying a session: its mark follows the pointer, the row it would join shows a dashed edge. */
.agent-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; rotate: -7deg; padding: 5px; background: var(--surface); box-shadow: var(--shadow-lg); }
.agent-row.is-dragging { opacity: .4; }
/* One of a group is being carried: it fades where it stood. Carried clear of the row, the loop
round the group opens up: let go now and it leaves. */
.agent-row.is-dragging:has(.is-carried) { opacity: 1; }
.agent-row .is-carried { opacity: .25; }
.agent-row.is-leaving .pair-loop { stroke-dasharray: 9 7; stroke: var(--fg); animation: loop-open 700ms linear infinite; }
.agent-row.is-leaving strong.is-carried { text-decoration: line-through; }
@keyframes loop-open { to { stroke-dashoffset: -16; } }
/* A name in a group is a handle. */
.agent-text strong[data-member] { cursor: grab; }
/* Let go here and the two are laid together: the loop drawn round the row is open and runs. */
.agent-row.is-drop { background: var(--surface); }
.group-loop.drop-loop { z-index: 1; }
.drop-loop .pair-loop { stroke: var(--fg); stroke-dasharray: 9 7; animation: loop-open 700ms linear infinite; }
/* Let go here and it is moved to this place: a thin line between the rows. */
.agent-row.is-insert-before::after, .agent-row.is-insert-after::after { content: ""; position: absolute; z-index: 2; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: var(--fg); pointer-events: none; }
.agent-row.is-insert-before::after { top: -2px; }
.agent-row.is-insert-after::after { bottom: -2px; }
body.is-pairing, body.is-pairing * { cursor: grabbing !important; }
/* Cutting a group apart: scribbled scissors that show only while the pointer is on the row (or the
keyboard on them), in the gap before the badge, so nothing in the row gives way to them and the
row is no taller than its names. Under the pointer they darken and the loop round the
group opens up, which says what they do without a tooltip. */
.agent-row.is-group { position: relative; }
.agent-row.is-group .agent-entry { position: relative; min-height: 52px; }
.agent-cut { position: absolute; z-index: 2; right: 50px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 50%; background: var(--sunken); color: var(--muted); rotate: -12deg; transition: color var(--d-fast), background var(--d-fast), opacity var(--d-fast); }
.agent-cut .sketch { width: 20px; height: 20px; stroke-width: 1.8; }
.agent-cut:hover, .agent-cut:focus-visible { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
.agent-entry[aria-current="true"] + .agent-cut { background: var(--surface); }
@media (hover: hover) {
.agent-cut { opacity: 0; }
.agent-row:hover .agent-cut, .agent-cut:focus-visible { opacity: 1; }
body.is-pairing .agent-cut { opacity: 0; }
}
/* Where nothing hovers (a tablet), the group that is picked shows them. */
@media (hover: none) { .agent-entry:not([aria-current="true"]) + .agent-cut { display: none; } }
/* The loop of a group goes round the whole entry, marks and names (ui.js groupLoop); the joint mark in
the row carries no loop of its own. (In a session's title the joint mark keeps its loop.) */
.group-loop { display: block; position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.group-loop path { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.agent-row .pair-mark > .pair-loop { display: none; }
.agent-row.is-group .agent-entry { padding-block: 9px; }
.agent-row.is-group + .agent-row, .agent-row + .agent-row.is-group { margin-top: 4px; }
.agent-row.is-group .agent-pair { margin-inline: -6px -8px; }
.agent-row:has(.agent-cut:hover) .pair-loop, .agent-row:has(.agent-cut:focus-visible) .pair-loop { stroke-dasharray: 9 7; stroke: var(--fg); animation: loop-open 700ms linear infinite; }
/* Putting a disconnected session away: shows on hover or focus; where nothing hovers, it is always there. */
.agent-archive { flex: none; width: 30px; height: 30px; margin-right: 6px; padding: 5px; border: 0; border-radius: 50%; background: none; color: var(--faint); overflow: hidden; }
.agent-archive .sketch { width: 20px; height: 20px; }
.agent-archive:hover { background: var(--sunken); color: var(--fg); }
@media (hover: hover) {
.agent-archive { width: 0; margin-right: 0; padding-inline: 0; opacity: 0; transition: width var(--d-fast) var(--ease-out), opacity var(--d-fast); }
.agent-row:hover .agent-archive, .agent-row:focus-within .agent-archive { width: 30px; margin-right: 6px; padding-inline: 5px; opacity: 1; }
body.is-pairing .agent-archive { display: none; }
}
/* ---- a session's state: no ground anywhere, colour and stroke carry it ----
At work, the session's own mark redraws itself: the whole drawing stays as a trace at half strength
and a darker stroke, about a third of each line, travels along it. Nothing turns at the right.
At the right end of the row stands the number of open questions, every number in one column; a
session that is stopped and waits for you has a hand drawn in red just before it, every hand on one
axis. A working session's number is small and muted, a disconnected one's faint. Idle: nothing. */
.agent-avatar.is-drawing .doodle { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.is-drawing .mark-trace { opacity: .5; }
.is-drawing .mark-live path:not(.pair-crown *) { stroke-dasharray: 34 66; stroke-width: 2.5; animation: mark-travel 2800ms linear infinite; }
@keyframes mark-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .is-drawing .mark-live path:not(.pair-crown *) { animation: none; stroke-dasharray: none; stroke-width: inherit; } }
/* The ring at the end of a session row, circled by hand. Its number is the open questions; while the
session works a drop travels round it; a knock turns it into the raised hand in a red loop. */
.agent-badge { flex: none; position: relative; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--fg); }
.agent-badge b { position: relative; }
.agent-ring, .hand-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agent-ring { color: color-mix(in srgb, var(--fg) 50%, var(--bg)); }
.ring-loop { stroke: currentColor; stroke-width: 1.25; }
/* Working: the ring itself steps back, and a short tapered stroke in the accent goes round it. The whole
stroke turns as one (the tip leads), eased, so each turn reads as one sweep of the pen. */
.agent-badge[data-state="running"] .agent-ring, .agent-working .agent-ring { color: var(--accent); }
.agent-badge[data-state="running"] .ring-loop, .agent-working .ring-loop { opacity: .38; }
.ring-drop { stroke: currentColor; transform-box: view-box; transform-origin: 50% 50%; animation: agent-flow var(--ring-turn, 1900ms) cubic-bezier(.45,.12,.55,.88) infinite; }
@keyframes agent-flow { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
.ring-drop { display: none; }
.agent-badge[data-state="running"] .ring-loop, .agent-working .ring-loop { opacity: 1; stroke-dasharray: 91 9; }
}
.agent-badge[data-state="waiting"] { --hand-soft: var(--urg-critical-soft); color: var(--urg-critical); }
.hand-mark { stroke: currentColor; }
.agent-badge[data-state="waiting"] .agent-ring { color: var(--urg-critical); }
.hand-loop { fill: var(--hand-soft, none); stroke-width: 1.5; }
.hand-pen { stroke-width: 1.45; }
.agent-badge[data-offline] { color: var(--faint); }
.agent-badge[data-offline] .agent-ring { color: var(--line-strong, var(--faint)); }
.bare-hand { display: block; width: 18px; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; rotate: -4deg; }
/* The badge stands beside the row's entry, over its right end, pulled in from the edge, so that it can
be a button of its own: a click goes through that session's questions. Under the pointer or the
keyboard the count is underlined and the hand gives a small wave. */
.agent-row.has-badge .agent-entry { padding-right: 48px; }
.agent-row > .agent-badge { position: relative; z-index: 1; margin: 0 12px 0 -42px; }
button.agent-badge { border: 0; border-radius: 50%; background: none; font-family: inherit; cursor: pointer; transition: scale 140ms ease-out; }
button.agent-badge:hover, button.agent-badge:focus-visible { scale: 1.08; }
button.agent-badge:active { scale: .95; }
/* The Desk entry says how many sessions are at work: a small turning ring and the number. */
.agent-working { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.agent-working b { display: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.desk-state .agent-working[data-n]:not([data-n="1"]) b { display: inline; margin-left: -2px; }
.agent-working .agent-ring { position: static; flex: none; width: 13px; height: 13px; }
.agent-working .ring-loop { stroke-width: 2.4; }
.agent-working .ring-drop path { stroke-width: 3.4; }
/* ---- microphone and focus button ---- */
.mic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.mic:hover { background: var(--sunken); color: var(--fg); }
.focus-open .ico { width: 18px; height: 18px; }
/* Wide screens reach the overview of all sessions from the bar's words; phones from one icon in the top bar. */
.roster-open { display: none; }
.roster-open[aria-current] { background: var(--accent-soft); color: var(--accent); }
/* ---- inbox: with no session selected, the grouped list of open questions is the whole page ---- */
#inbox { display: none; }
body[data-scope="all"] #inbox { container: inboxpage / inline-size; display: block; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); padding: var(--s-8) var(--gutter) var(--s-10); }
/* The two round buttons stand fixed at the bottom right (quick send, the pad): the Desk keeps a lane free for
them on its right, so the rows' tiles and tabs never scroll under them (his rule: nothing lies over what
one presses). A phone has them in the top bar instead. */
@media (min-width: 861px) {
body[data-scope="all"]:not([data-page]) #inbox { padding-right: calc(var(--gutter) + 60px); }
}
/* From 1224px (sidebar 256 + column 800 + twice 84) the column's own margin is that lane: it stands centred, under the pill. */
@media (min-width: 1224px) {
body[data-scope="all"]:not([data-page]) #inbox { padding-right: var(--gutter); }
}
.inbox-head, .inbox-groups { max-width: 800px; margin-inline: auto; }
.inbox-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-8); }
/* The heading, and on its line the count with its sentence; in a narrow window that wraps below. */
.inbox-title { flex: 1 1 20rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-6); }
.inbox-title h2 { font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.inbox-title p { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .3em; font-size: var(--t-lg); color: var(--muted); }
/* A number circled by hand: two half ellipses that do not quite meet. */
.inbox-circled { position: relative; display: inline-block; padding: 0 .45em; font-weight: 700; color: var(--fg); }
.inbox-circled svg { position: absolute; left: -.08em; top: -.2em; width: calc(100% + .16em); height: calc(100% + .42em); overflow: visible; fill: none; stroke: var(--urg-high); stroke-width: 2px; stroke-linecap: round; opacity: .75; pointer-events: none; }
.inbox-circled svg path { vector-effect: non-scaling-stroke; }
/* The way into the walk through all open questions: a plain button beside the heading's sentence, with a small arrow drawn in it. */
.inbox-tools { display: flex; align-items: center; gap: var(--s-2); }
/* The desk's heading is the way into the walk: the words in the display face, the number of what waits
in its circle, and a small arrow that steps forward under the pointer or the keyboard. */
.inbox-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .5em; }
.inbox-go { display: inline-flex; align-items: center; gap: .32em; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fg); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.inbox-go .inbox-circled { font: 700 .5em/1.5 var(--font); letter-spacing: 0; margin-left: .2em; }
.inbox-go .sketch { width: .62em; height: .62em; stroke-width: 2.2; color: var(--faint); transition: translate 140ms ease-out, color 140ms ease-out; }
.inbox-go:hover .sketch, .inbox-go:focus-visible .sketch { translate: 5px 0; color: var(--fg); }
.inbox-heading .inbox-knocks { font: 700 var(--t-lg)/1 var(--font); letter-spacing: 0; }
.inbox-go:active { scale: .98; }
/* "agents" in the line: the way to the page of all sessions */
.inbox-agents-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.inbox-agents-link:hover, .inbox-agents-link:focus-visible { color: var(--fg); text-decoration-color: currentColor; }
/* One list at one pitch: the senders' sections follow each other at the gap between two rows. The
piles at the foot stand a little apart. */
.inbox-groups { display: grid; gap: var(--s-4); container: rows / inline-size; }
.inbox-groups > .inbox-pile { margin-top: var(--s-6); }
.inbox-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
/* The sender's name is the divider: a rule beside it. */
.inbox-sender { display: flex; align-items: center; gap: var(--s-3); font: 800 1.2rem/1 var(--display); color: var(--fg); }
.inbox-sender::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-sender b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-avatar { position: relative; display: block; width: 38px; height: 38px; padding: 6px; border-radius: var(--r-md); background: var(--sunken); color: var(--fg); }
/* A sender's mark has no ground either (the piles' own drawings keep their outline). */
.inbox-avatar[style*="--hue"] { padding: 2px; background: none; color: var(--tone-pen); }
.inbox-avatar .crown-mark { left: 14%; top: -36%; width: 62%; }
.inbox-avatar .sketch { width: 100%; height: 100%; }
/* Our own card (card Nr. 87, "Farben so nicht"): a plain white row, grey text, one neutral line and one
soft shadow. The colour stands only where one answers: the tiles, the tabs, the knock. It is a tone
(tokens.css: --tone-wash, --tone-edge, --tone-mid, --tone-pen): the asking session's on the Desk, where
the row carries its hue; the urgency's where no session is named. */
.inbox-row {
--urg-color: var(--urg-normal);
--urg-soft: var(--urg-normal-soft);
--card-bg: var(--surface);
--card-ink: color-mix(in srgb, var(--muted) 75%, var(--fg));
--card-line: var(--line-strong);
/* Every row in the list is the same height and the answers are tiles at its right edge, always in
the same place. Answer one, the next slides up, and its tiles are under the pointer.
"Choose" unfolds a second grid row below; folded, that row has no height. */
min-height: 172px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: 172px auto; align-items: stretch;
position: relative; background: var(--card-bg); border-radius: 6px;
box-shadow: 0 0 0 1px var(--card-line), 0 6px 14px -10px rgb(20 30 25 / .18);
}
.inbox-row[data-urgency="low"] { --urg-color: var(--urg-low); --urg-soft: var(--urg-low-soft); }
.inbox-row[data-urgency="high"] { --urg-color: var(--urg-high); --urg-soft: var(--urg-high-soft); }
.inbox-row[data-urgency="critical"] { --urg-color: var(--urg-critical); --urg-soft: var(--urg-critical-soft); }
.inbox-row:not([data-from]) { --tone-pen: var(--urg-color); --tone-mid: var(--urg-color); --tone-edge: var(--line-strong); --tone-wash: var(--urg-soft); }
/* A card that says who asks (the desk) answers in that session's tones: its tiles and tabs (the row carries
--hue, tokens.css works out the tones). What knocks keeps its warning colour on top: the label and the
leading tile, so urgency still wins the eye. */
.inbox-row[data-from]:is([data-urgency="high"], [data-urgency="critical"]) .inbox-answer.is-lead { background: var(--urg-color); }
/* The sender's drawing, small, before the title; the text stands beside it. The byline then does not
say who asks a second time. */
.inbox-text.has-sender { position: relative; padding-left: 36px; }
.inbox-who.inbox-from-mark { position: absolute; left: 0; top: 3px; width: 26px; height: 26px; color: var(--tone-pen); }
/* ---- "In revision": the cards that are with their session right now, one slim line each ---- */
.inbox-revising { gap: 0; margin-top: var(--s-6); }
.inbox-revising-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font: 600 var(--t-sm)/1.4 var(--font); color: var(--muted); }
.inbox-revising-head b { font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.inbox-revising-row { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; border-top: 1px solid var(--line); }
.inbox-revising-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.inbox-revising-open .agent-ring { position: static; flex: none; width: 15px; height: 15px; color: var(--accent); }
.inbox-revising-open .ring-loop { opacity: .38; stroke-width: 2.2; }
.inbox-revising-open .ring-drop path { stroke-width: 3.2; }
.inbox-revising-open strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.inbox-revising-open:hover strong, .inbox-revising-open:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.inbox-revising-sent { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--faint); }
.inbox-revising-tail { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.inbox-revising-tail .inbox-from-mark { width: 16px; height: 16px; color: var(--tone-pen); }
.inbox-revising-take { flex: none; min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 500 var(--t-xs)/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0; }
.inbox-revising-row:hover .inbox-revising-take, .inbox-revising-take:focus-visible { opacity: 1; color: var(--fg); }
@media (hover: none) { .inbox-revising-take { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inbox-revising-open .ring-loop { opacity: 1; stroke-dasharray: 91 9; } }
/* In the dark the quiet tile (No, Deny) is nearly the card's own ground: an edge makes it a button. */
:root[data-theme="dark"] .inbox-answer:not(.is-lead):not(:hover):not(.is-picked):not(.is-hinted) { box-shadow: inset 0 0 0 1px var(--card-line); }
/* ---- a row unfolded in place: it holds the whole card (js/focus.js, inline) and nothing of its own ----
Its compact content is hidden while the card shows it; where the page has room the row is wider
than the column. */
@container inboxpage (min-width: 1000px) { .inbox-row.is-unfolded { margin-inline: -70px; } }
@container inboxpage (min-width: 1140px) { .inbox-row.is-unfolded { margin-inline: -140px; } }
/* ---- a run: the cards of one session, behind a divider tab ----
The tab stands in the list's own flow above the run's first card (so it never lies on the card
before it): the session's drawing, crown and name on the session's colour. The run's cards stand
close under it, 4px apart, square where they meet, and do not repeat the drawing. */
.inbox-group[data-sender] { --run-color: var(--tone-pen); --run-on: var(--surface); gap: var(--s-4); }
.inbox-group[data-sender] .inbox-who { display: none; }
.inbox-group[data-sender] .inbox-text.has-sender { padding-left: 0; }
.inbox-row[data-from] .inbox-byline :is(.inbox-from, .inbox-from + .inbox-sep) { display: none; }
.inbox-row > :not(.inbox-more) { grid-row: 1; }
/* The row the keyboard is on. */
.inbox-row.is-current { outline: 3px solid var(--fg); outline-offset: 3px; }
/* Whole lines only, in whole pixels: head 26, gap 8, 8 above the title, title 28 a line, gap 6,
text 25 a line, 16 below. One title line leaves room for two of text, two title lines for one
(data-tall, measured in inbox.js). */
.inbox-content { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4) var(--s-5); min-width: 0; overflow: hidden; }
.inbox-content > * { min-width: 0; }
.inbox-row-head { height: 26px; display: flex; align-items: flex-start; gap: var(--s-3); margin-left: calc(-1 * var(--s-5)); }
/* Only a knock has a head line (its tab). Every other row begins with its title, at the row's top padding. */
.inbox-row-head:empty { display: none; }
.inbox-content:has(> .inbox-row-head:empty) { padding-top: 13px; }
/* Only what stands out carries a tab: blocking and urgent. A normal question has none. */
.inbox-tab { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 7px 10px; border-radius: 6px 0 6px 0; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.inbox-tab { background: var(--urg-color); color: var(--surface); }
/* A knock wears the small drawing of knuckles on a door before its word. */
.inbox-tab .sketch { width: 15px; height: 15px; margin: -3px 0 -3px -2px; stroke-width: 2.1; }
/* "It knocks": a row that has just arrived urgent or blocking gives two quick small nudges (js/knock.js);
the mark of its session in the sidebar does the same, once. Under reduced motion nothing moves. */
@keyframes knock { 0%, 26%, 54%, 100% { translate: 0 0; rotate: 0deg; } 12% { translate: 6px 0; rotate: .35deg; } 40% { translate: 5px 0; rotate: .3deg; } }
.inbox-row.is-knocking { animation: knock 640ms cubic-bezier(.3, .7, .4, 1) 120ms; }
.agent-row.is-knocking .agent-avatar, .agent-row.is-knocking .agent-pair { animation: knock 640ms cubic-bezier(.3, .7, .4, 1) 120ms; }
@media (prefers-reduced-motion: reduce) { .inbox-row.is-knocking, .agent-row.is-knocking .agent-avatar, .agent-row.is-knocking .agent-pair { animation: none; } }
/* The knocks among the open questions, counted first in the line beside the heading. */
.inbox-knocks { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--urg-high); white-space: nowrap; }
.inbox-knocks .sketch { width: 21px; height: 21px; stroke-width: 2; }
.inbox-dot { color: var(--faint); }
/* One that can wait: no tab, a small hourglass scribbled in a soft colour. */
/* (It stands in the byline, before who asks.) */
.inbox-whenever { flex: none; display: inline-flex; color: var(--tone-mid); }
.inbox-whenever .sketch { width: 16px; height: 16px; stroke-width: 2; }
/* The byline under the text: who asks (the session's mark and name, where the list holds more than one
session), the card's number, its age, and what it carries. One quiet line at the foot of the row. */
.inbox-content { position: relative; }
.inbox-byline { position: absolute; left: var(--s-5); right: var(--s-4); bottom: 9px; margin: 0; display: flex; align-items: center; gap: .35em; font: 500 var(--t-xs)/1 var(--font); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--card-ink) 62%, var(--card-bg)); white-space: nowrap; overflow-x: clip; overflow-y: visible; }
.inbox-byline .inbox-from { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; color: var(--card-ink); }
.inbox-byline .inbox-from span:last-child { overflow: hidden; text-overflow: ellipsis; }
.inbox-byline .inbox-from-mark { width: 17px; height: 17px; color: var(--tone-pen); }
.inbox-from-mark { flex: none; position: relative; display: block; width: 18px; height: 18px; }
.inbox-from-mark .crown-mark { left: 0; top: -52%; width: 92%; }
.inbox-from-mark .crown-pen { stroke-width: 2.1; }
/* (Tightened by a few pixels, so that the byline has its line below two lines of title and one of text.) */
.inbox-text { display: grid; gap: 2px; padding: 2px 0 0; border: 0; background: none; text-align: left; min-width: 0; }
.inbox-question, .inbox-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.inbox-question { font: 800 1.45rem/28px var(--display); letter-spacing: -.012em; text-wrap: balance; color: var(--fg); }
.inbox-body { color: var(--card-ink); font-size: var(--t-lg); line-height: 25px; }
.inbox-row[data-tall] .inbox-body { -webkit-line-clamp: 1; }
/* Unfolded with its text in full below: the row itself does not say it a second time. */
/* At most one small picture, beside the text; the rest are behind it. */
/* Beside the title, at the top right of the text: a small clock for the card's age; the number shows
only under the pointer or the keyboard. */
.inbox-when { position: absolute; top: 15px; right: var(--s-4); display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--card-ink) 55%, var(--card-bg)); }
.inbox-content:has(> .inbox-row-head:not(:empty)) .inbox-when { top: 40px; }
.inbox-when .inbox-nr { margin: 0; padding: 2px 0 0 6px; font: 500 var(--t-xs)/1 var(--font); letter-spacing: .02em; text-transform: none; opacity: 0; background: var(--card-bg); transition: opacity 100ms ease-out; }
.inbox-row:hover .inbox-when .inbox-nr, .inbox-row:focus-within .inbox-when .inbox-nr, .inbox-row.is-current .inbox-when .inbox-nr { opacity: 1; }
.inbox-when .inbox-ago { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.age-clock { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inbox-question { padding-right: 30px; }
/* The pictures: a small stack under the text, a little fanned; beside it what the card carries. */
.inbox-byline .inbox-thumb { flex: none; position: relative; align-self: center; width: auto; height: 40px; margin: 0 4px 0 2px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: inline-flex; align-items: center; }
.inbox-byline .inbox-thumb img { width: 50px; height: 38px; border-radius: 5px; object-fit: cover; object-position: top center; background: var(--sunken); box-shadow: 0 0 0 1px var(--card-line), 0 1px 3px rgb(20 30 25 / .12); }
.inbox-byline .inbox-thumb img:nth-child(1) { rotate: -3deg; z-index: 3; }
.inbox-byline .inbox-thumb img:nth-child(2) { margin-left: -30px; rotate: 2.5deg; translate: 0 1px; z-index: 2; }
.inbox-byline .inbox-thumb img:nth-child(3) { margin-left: -30px; rotate: -1.5deg; translate: 0 -1px; z-index: 1; }
.inbox-byline:has(.inbox-thumb) { bottom: 8px; }
/* The picture and, under it, what the card carries ("6 pictures"). */
.inbox-pics { align-self: center; display: grid; justify-items: center; gap: 5px; margin-right: var(--s-4); }
.inbox-pics .inbox-thumb { margin-right: 0; }
.inbox-pics .inbox-carries { flex-direction: column; gap: 2px; font: 500 .68rem/1.2 var(--font); color: color-mix(in srgb, var(--card-ink) 62%, var(--card-bg)); white-space: nowrap; }
.inbox-pics .inbox-carries .sketch { width: 13px; height: 13px; }
.inbox-row:has(> .inbox-pics) .inbox-byline :is(.inbox-carries, .inbox-sep:has(+ .inbox-carries)) { display: none; }
/* It stands clear of the tiles by the row's own padding; a narrower column drops it before the gap. */
.inbox-thumb { position: relative; align-self: center; width: 64px; height: 64px; margin-right: var(--s-4); padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--sunken); box-shadow: 0 0 0 1px var(--card-line); cursor: zoom-in; transition: scale 100ms ease-out; }
@media (any-hover: hover) { .inbox-thumb:hover { scale: 1.05; } }
.inbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* What the card carries, in the byline: a small drawing and the count for each kind. */
/* "Trust": a quiet word at the end of the byline of a thumb row; it leaves the decision to the agent. */
.inbox-shred-open { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--card-ink); font-size: var(--t-sm); font-weight: 600; opacity: .75; }
.inbox-shred-open .sketch { width: 18px; height: 18px; }
.inbox-shred-open:hover { opacity: 1; background: var(--tone-wash); }
/* A card that is shredded leaves in strips. */
.inbox-row.is-leaving[data-leave="shredded"] { animation-name: row-shred; animation-duration: 340ms; -webkit-mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px); mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px); }
@keyframes row-shred { from { opacity: 1; translate: 0 0; } 40% { opacity: .9; } to { opacity: 0; translate: 0 38px; scale: 1 .86; } }
.inbox-carries { display: inline-flex; align-items: center; gap: .7em; min-width: 0; }
.inbox-carries > span { display: inline-flex; align-items: center; gap: 4px; }
.inbox-carries .sketch { width: 15px; height: 15px; stroke-width: 1.9; }
/* The row's ways out (.inbox-tabs): small paper tabs down its right edge, in the order of the opened
card: Snooze (.inbox-later, key L), Revise (.inbox-revise), Whatever (.inbox-trust), Shred
(.inbox-shred). Each is tucked behind the edge with only its drawing showing; under the pointer or
the keyboard it slides out and shows its word, eased,
with a soft shadow. Two places: in the desk on a wide page they lie wholly outside the row, in the
right margin, so no click on a tile can land on them; everywhere else (narrow pages, a session's own
list) they sit inside the right edge and slide inward, and the tiles are set in to clear them; on a
phone they are a short line at the card's top right. */
.inbox-tabs { position: absolute; z-index: 2; top: 0; right: 0; display: grid; justify-items: end; gap: 3px; }
.inbox-tab-act { --nub: 26px; position: relative; height: 26px; width: max-content; max-width: var(--nub); padding: 0; border: 0; background: none; color: var(--card-ink); overflow: hidden; border-radius: 8px 0 0 8px; filter: drop-shadow(0 1px 2px rgb(20 30 25 / .10)); transition: max-width 260ms cubic-bezier(.22, .9, .25, 1), filter 260ms ease-out; }
.inbox-tab-act:first-child { border-radius: 8px 6px 0 8px; }
.inbox-tab-act[hidden] { display: none; }
.inbox-tab-act:focus-visible { outline: 0; }
.inbox-later-flap { display: flex; flex-direction: row; align-items: center; gap: 7px; height: 100%; padding: 0 9px 0 6px; background: var(--tone-wash); box-shadow: inset 0 0 0 1px var(--card-line); border-radius: inherit; white-space: nowrap; transition: background 140ms; }
.inbox-later-flap .sketch { flex: none; width: 15px; height: 15px; stroke-width: 2.2; opacity: .8; }
.inbox-later-flap b { font: 700 .68rem/1 var(--font); letter-spacing: .07em; text-transform: uppercase; }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) { max-width: 150px; z-index: 1; filter: drop-shadow(0 3px 6px rgb(20 30 25 / .16)); }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) .inbox-later-flap { background: var(--tone-wash); }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) .sketch { opacity: 1; }
.inbox-tab-act:focus-visible .inbox-later-flap { box-shadow: inset 0 0 0 2px var(--fg); }
.inbox-tab-act:active .inbox-later-flap { filter: brightness(.95); }
.inbox-shred:is(:hover, :focus-visible, .is-unfolded) { color: var(--urg-critical); }
/* Shift held (bar.js sets body[data-shift]): the row's one tab is Shred instead of Snooze, slid out and red */
/* On the card, beside the title (inbox.js puts .inbox-tabs into .inbox-when): one small square button with the
drawing alone, the word is its tooltip; nothing lies outside the row. Shift held: the same place is Shred. */
.inbox-when .inbox-tabs { position: static; display: flex; gap: 4px; margin: -6px 0 -6px 2px; }
.inbox-when .inbox-tab-act, .inbox-when .inbox-tab-act:first-child { --nub: 28px; width: 28px; max-width: 28px; height: 28px; border-radius: 8px; filter: none; transition: none; color: var(--card-ink); }
.inbox-when .inbox-later-flap, .inbox-when .inbox-tab-act:is(:hover, :focus-visible) .inbox-later-flap { justify-content: center; padding: 0; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.inbox-when .inbox-tab-act:is(:hover, :focus-visible) .inbox-later-flap { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--fg); }
.inbox-when .inbox-tab-act:focus-visible .inbox-later-flap { box-shadow: inset 0 0 0 2px var(--fg); }
.inbox-when .inbox-later-flap .sketch { width: 16px; height: 16px; opacity: 1; }
.inbox-when .inbox-later-flap b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inbox-when .inbox-tab-act.inbox-shred .inbox-later-flap { box-shadow: inset 0 0 0 1px var(--urg-critical); }
body:not([data-shift]) .inbox-tab-act.inbox-shred { display: none; }
body[data-shift] .inbox-tabs:has(.inbox-shred) > .inbox-later { display: none; }
body[data-shift] .inbox-tab-act.inbox-shred { max-width: 150px; color: var(--urg-critical); }
/* on the row the keys are on, each tab wears its key */
.inbox-row.is-current .inbox-tab-act[data-cap]::after { content: none; }
/* Whatever under the pointer: the tile the agent would take lights up */
.inbox-answer.is-hinted { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--tone-pen); }
/* One tile or two, 124 square, from the right: the right-hand one is at the same place in every row.
(Set in from the right where the Snooze label sits inside the row's edge.) */
.inbox-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 12px 12px 0; }
.inbox-answer { flex: none; width: 124px; height: 124px; min-width: 0; padding: 8px 6px; display: grid; grid-template-columns: minmax(0, auto); justify-content: center; justify-items: center; align-content: center; gap: 6px; border: 0; border-radius: 12px; background: var(--tone-wash); color: var(--card-ink); font: 600 var(--t-sm)/1.2 var(--font); text-align: center; overflow-wrap: normal; transition: background 100ms ease-out, box-shadow 100ms ease-out, scale 100ms ease-out; }
.inbox-answer .sketch { width: 32px; height: 32px; }
/* Thumbs are the answer; the word under one says what the thumb means here. It stands whole, in one
or two lines at a size that reads: inbox.js lets only labels onto a tile that fit that way. */
.inbox-answer.is-thumb .sketch { width: 44px; height: 44px; stroke-width: 1.5; }
.inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { max-width: 100%; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-wrap: balance; overflow-wrap: normal; }
/* A longer pair of labels: smaller, up to three lines; a word is never broken inside (inbox.js labelSize). */
.inbox-answer.is-thumb.is-small { gap: 4px; }
.inbox-answer.is-thumb.is-small .sketch { width: 34px; height: 34px; }
.inbox-answer.is-thumb.is-small > span:last-child:not(.inbox-disc) { font-size: .72rem; line-height: 1.15; }
/* More than two ways: one tile, "Choose", in the place of the right-hand thumb. */
.inbox-answer.is-wide { font: 700 1.05rem/1.2 var(--display); }
.inbox-answer small { font: 500 var(--t-xs)/1.2 var(--font); opacity: .8; }
.inbox-answer.is-wide[aria-expanded="true"] .sketch { opacity: .5; }
.inbox-answer.is-lead { background: var(--tone-pen); color: var(--surface); }
/* An info card: "What??" and "Acknowledge" stand where the answers do; in the byline a small page says it is to read. */
.inbox-toread { color: var(--tone-mid); }
.inbox-toread-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.inbox-toread-count .sketch { width: 20px; height: 20px; stroke-width: 1.9; }
@media (any-hover: hover) {
.inbox-answer:hover, .inbox-option:hover { box-shadow: inset 0 0 0 2px var(--tone-pen); }
.inbox-answer.is-lead:hover { filter: brightness(.92); }
}
.inbox-answer:active, .inbox-option:active { scale: .97; }
.inbox-answer:disabled, .inbox-option:disabled { opacity: .35; }
.inbox-answer.is-picked, .inbox-option.is-picked { opacity: 1; box-shadow: inset 0 0 0 3px var(--tone-pen); }
.inbox-error { color: var(--deny); font-size: var(--t-sm); }
/* Unfolded: the text, every option as a tile, and a line to ask back. */
.inbox-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
/* The label in up to two lines, what it leads to in one. */
@media (pointer: coarse) { .inbox-option kbd { display: none; } }
/* The last entry of the options: not one of them, but "Trust" (the agent decides). Dashed, as asking back is. */
/* Several answers allowed: an option that is in stays filled. */
/* Asking back is not an answer: dashed. */
.inbox-asked { flex-basis: 100%; font-size: var(--t-sm); color: var(--card-ink); }
.inbox-asked:empty { display: none; }
/* Put off: dashed, because where these cards stand is provisional. */
/* The dashed edge is an outline, so the row and its tiles are exactly as large as an open one. */
.inbox-row[data-later] { background: none; box-shadow: none; outline: 1px dashed var(--tone-mid); outline-offset: -1px; }
/* ---- piles (inbox.js pile()): "Snoozed", "With the agent", "Answered" ----
At the foot of the list they stand side by side behind a dashed rule (one compact line each in a
narrow column). Folded, a pile is: its count as a tally of pen strokes, five to a gate; its name and
number; and one line under it, the latest of what it holds. Open, it takes the whole width: its
line is a dividing line with a rule and a stroke that points up, and its entries are rows like any
other. Plain blocks; only the tally and the small drawing are by hand. */
.inbox-groups { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-5); }
.inbox-groups > * { grid-column: 1 / -1; }
.inbox-groups > .inbox-pile:not(.is-open) { grid-column: span 3; }
/* Three of them: three to a row. */
.inbox-groups:has(> .inbox-pile ~ .inbox-pile ~ .inbox-pile) > .inbox-pile:not(.is-open) { grid-column: span 2; }
.inbox-pile { gap: var(--s-3); align-content: start; }
.inbox-pile-title { color: var(--muted); }
.inbox-pile-title::after { content: none; }
.inbox-pile-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
.inbox-pile-head::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-group-later .inbox-pile-head::after, .inbox-group-asked .inbox-pile-head::after { border-top-style: dashed; }
.inbox-pile-head b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.inbox-pile-fold { order: 4; flex: none; color: var(--muted); rotate: 180deg; }
.inbox-pile-fold .sketch { width: 20px; height: 20px; stroke-width: 2; }
.inbox-pile-head:hover, .inbox-pile-head:hover b, .inbox-pile-head:hover .inbox-pile-fold { color: var(--fg); }
.inbox-pile .inbox-avatar { background: none; color: inherit; outline: 1px solid var(--line-strong); outline-offset: -1px; }
.inbox-group-later .inbox-avatar, .inbox-group-asked .inbox-avatar { outline-style: dashed; }
/* the tally: pen strokes, five to a gate; beyond what is drawn, "+15" */
.tally { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tally-mark { flex: none; display: block; height: 24px; max-width: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.tally-more { font: 700 var(--t-sm)/1 var(--font); font-variant-numeric: tabular-nums; }
.inbox-pile-tally { display: none; }
.inbox-pile-sheets { display: flex; flex-direction: column; min-width: 0; }
.inbox-pile-item { position: relative; min-width: 0; margin-top: var(--s-4); }
.inbox-pile-item:first-child { margin-top: var(--s-1); }
.inbox-group-answered .inbox-pile-item { margin-top: var(--s-2); }
.inbox-pile-peek { display: none; align-items: center; gap: var(--s-2); min-width: 0; }
.inbox-pile-words { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.inbox-pile-words strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-sm)/1.3 var(--font); color: var(--fg); }
.inbox-pile-words span { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-xs)/1 var(--font); color: var(--faint); }
.inbox-group-answered .inbox-pile-words span { font-weight: 600; color: var(--accent); }
.inbox-pile-peek .inbox-from-mark { width: 17px; height: 17px; color: var(--tone-pen); }
/* folded: one quiet line, a word and its strokes; nothing else */
.inbox-groups > .inbox-pile:not(.is-open) { padding: 2px 0; cursor: pointer; }
.inbox-pile:not(.is-open) .inbox-pile-title { font: 600 var(--t-sm)/1 var(--font); color: var(--muted); }
.inbox-pile:not(.is-open) .inbox-pile-head { gap: 10px; }
.inbox-pile:not(.is-open) .inbox-pile-tally { display: inline-flex; order: 1; color: color-mix(in srgb, var(--muted) 75%, var(--surface)); }
.inbox-pile:not(.is-open) .tally-mark { height: 17px; width: auto !important; stroke-width: 2.3; }
.inbox-pile:not(.is-open) .tally-more, .inbox-pile:not(.is-open) .inbox-pile-head b,
.inbox-pile:not(.is-open) .inbox-pile-head::after, .inbox-pile:not(.is-open) .inbox-pile-fold, .inbox-pile:not(.is-open) .inbox-avatar, .inbox-pile:not(.is-open) .inbox-pile-sheets { display: none; }
@media (any-hover: hover) { .inbox-pile:not(.is-open):hover .inbox-pile-title, .inbox-pile:not(.is-open):hover .inbox-pile-tally { color: var(--fg); } }
/* While the sheets move, each is cut at its own edge. */
.inbox-pile.is-moving .inbox-pile-item { overflow: hidden; }
/* Nothing here yet: dashed and a little crooked, so it reads as not-yet-real. */
.inbox-empty { justify-self: center; display: grid; justify-items: center; gap: var(--s-3); margin: var(--s-10) auto 0; color: var(--muted); text-align: center; font-size: var(--t-lg); }
.inbox-empty .sketch { width: 96px; height: 96px; stroke-width: 1.1; color: var(--faint); }
/* A new account's Desk (no session yet): "Invite your first agent", a calm sheet of paper with one way on (views/desk.mjs).
The empty Desk's own line below it says the same thing later, so it steps aside while the note stands. */
.inbox-head:has(> .desk-invite) { justify-content: center; }
.desk-invite { flex: 0 1 34rem; display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-8); padding: var(--s-8) var(--s-6) var(--s-6); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; }
.desk-invite .desk-invite-art { width: 72px; height: 72px; stroke-width: 1.2; color: var(--accent); }
.desk-invite h2 { font: 800 var(--t-2xl)/1.15 var(--display); letter-spacing: -.02em; }
.desk-invite p { max-width: 30rem; color: var(--muted); font-size: var(--t-md); line-height: 1.5; }
.desk-invite code { font: .86em var(--mono); padding: 1px 4px; border-radius: 5px; background: var(--sunken); color: var(--fg); white-space: nowrap; }
.desk-invite form { margin: var(--s-2) 0 0; }
.desk-invite-go { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font: 650 var(--t-md) var(--font); cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--d-fast), transform var(--d-fast) var(--ease-out); }
.desk-invite-go:hover { background: var(--accent-hover); transform: translateY(-1px); }
.desk-invite-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.desk-invite-go .sketch { width: 20px; height: 20px; stroke-width: 1.9; }
#desk-head:has(> .desk-invite) ~ .inbox-groups .inbox-empty { display: none; }
@media (max-width: 600px) { .desk-invite { margin-top: var(--s-4); padding: var(--s-6) var(--s-4) var(--s-5); } .desk-invite code { white-space: normal; overflow-wrap: anywhere; } }
/* A narrower column: the text keeps its width, the picture waits behind the title. */
@container rows (max-width: 700px) {
.inbox-pics { display: none; }
.inbox-question { font-size: 1.25rem; }
.inbox-body { font-size: var(--t-md); }
}
/* Narrow (a phone, or sessions side by side): rows are as tall as their text, the answers stand below it. */
@container rows (max-width: 560px) {
.inbox-row { min-height: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; }
.inbox-answer { height: auto; }
.inbox-when, .inbox-content:has(> .inbox-row-head:not(:empty)) .inbox-when { top: 10px; right: 10px; }
.inbox-byline:has(.inbox-thumb) { order: 3; margin-top: 4px; }
.inbox-groups > .inbox-pile:not(.is-open), .inbox-groups:has(> .inbox-pile ~ .inbox-pile ~ .inbox-pile) > .inbox-pile:not(.is-open) { grid-column: 1 / -1; }
.inbox-groups > .inbox-pile + .inbox-pile { margin-top: calc(-1 * var(--s-3)); }
.inbox-row > :not(.inbox-more) { grid-row: auto; }
.inbox-content { grid-column: 1 / -1; padding: 0 var(--s-4) var(--s-3); overflow: visible; }
.inbox-row-head { height: auto; min-height: 26px; margin-left: calc(-1 * var(--s-4)); }
.inbox-question { font-size: 1.25rem; line-height: 1.18; }
.inbox-body, .inbox-row[data-tall] .inbox-body { -webkit-line-clamp: 2; font-size: var(--t-md); line-height: 1.45; }
.inbox-pics { display: block; grid-column: 1 / -1; justify-self: start; margin: 0 var(--s-4) var(--s-3); }
.inbox-pics .inbox-carries { display: none; }
.inbox-thumb { display: block; width: 72px; height: 54px; }
.inbox-row-head { padding-right: 30px; }
/* a phone: the four tabs are a short line at the card's top right */
.inbox-tabs { display: flex; gap: 2px; }
.inbox-tab-act, .inbox-tab-act:first-child { border-radius: 0 0 7px 7px; }
.inbox-tabs .inbox-tab-act:last-child { border-radius: 0 6px 0 7px; }
/* big enough for a thumb: one tap snoozes */
.inbox-tab-act { height: 36px; --nub: 36px; }
.inbox-tab-act .inbox-later-flap { padding: 0 10px 0 10.5px; gap: 14px; }
/* the note is a quiet line at the top of the card; later rows of a run drop the mark and the name */
.inbox-byline { position: static; order: -1; flex-wrap: wrap; row-gap: 2px; margin: 10px 0 0; padding-right: 26px; }
/* (the line keeps its height when it has nothing to say: the clock at the right stands in it) */
.inbox-row[data-from] .inbox-byline { min-height: 18px; }
.inbox-row[data-from] .inbox-row-head:not(:empty) ~ .inbox-byline { min-height: 0; margin-top: 0; }
.inbox-row-head { order: -2; }
.inbox-row-head:not(:empty) + .inbox-text { margin-top: 0; }
.inbox-content:has(> .inbox-row-head:empty) { padding-top: 0; }
.inbox-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--s-3) var(--s-4); }
.inbox-answer { width: auto; }
.inbox-answer.is-wide { grid-column: 1 / -1; }
.inbox-answer { aspect-ratio: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-content: center; align-items: center; gap: 10px; min-height: 56px; border-radius: 10px; }
.inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { text-align: left; }
.inbox-answer .sketch, .inbox-answer.is-thumb .sketch { width: 30px; height: 30px; stroke-width: 1.7; }
.inbox-answer.is-wide small { display: none; }
}
/* Narrower still (three sessions side by side): the word goes under its thumb again, so it keeps its width. */
@container rows (max-width: 330px) {
.inbox-answer.is-thumb { grid-auto-flow: row; grid-template-columns: minmax(0, auto); gap: 4px; padding-block: 8px; }
.inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { text-align: center; }
}
/* Two long answers (card Nr. 157): the tile shows the agent's short word (options[i].short), the thumb small
with it: above it in a square tile, beside it where tiles are flat. The word stands whole; inbox.js
(fitShorts) picks the step for the pair: one line, a size smaller, two lines, last the thumb above. */
.inbox-answer.is-thumb.is-short { padding-inline: 4px; }
.inbox-answer.is-thumb.is-short .sketch { width: 26px; height: 26px; stroke-width: 1.7; }
.inbox-answer.is-thumb.is-short > span.inbox-short { min-width: 0; max-width: 100%; font: 700 var(--t-md)/1.15 var(--display); white-space: nowrap; text-wrap: balance; overflow-wrap: normal; text-align: center; }
.inbox-answer.is-thumb.is-short.is-two > span.inbox-short { white-space: normal; }
.inbox-answer.is-thumb.is-short.is-tight > span.inbox-short { font-size: var(--t-sm); }
.inbox-answer.is-thumb.is-short.is-tiny > span.inbox-short { font-size: var(--t-xs); }
/* Who asks, on a wide screen (card Nr. 164): no tab above the rows; the session's drawing stands alone in a
narrow column left of each card, in the session's colour, level with the title. Its name is a small note
under it, written out into the margin so it lies over nothing, under the pointer or the keyboard; a click
opens the session (inbox.js questionRow). A phone says who asks in the card's first line (phone-desk.css). */
.inbox-gutter { display: none; }
@media (min-width: 861px) {
.inbox-group[data-sender] { padding-left: 46px; }
.inbox-group[data-sender] > .inbox-row > .inbox-gutter { display: block; position: absolute; left: -46px; top: 14px; width: 32px; height: 32px; border-radius: 8px; color: var(--tone-pen); }
.inbox-group[data-sender] > .inbox-row:has(.inbox-row-head:not(:empty)) > .inbox-gutter { top: 36px; }
.inbox-gutter .inbox-from-mark { position: relative; display: block; width: 32px; height: 32px; color: inherit; }
.inbox-gutter .doodle { stroke-width: 2.2; }
.inbox-gutter::after { content: attr(data-name); position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); padding: 5px 9px; border-radius: 7px; background: currentColor; font: 700 var(--t-sm)/1 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; -webkit-text-fill-color: var(--surface); }
.inbox-gutter:is(:hover, :focus-visible)::after { opacity: 1; }
.inbox-gutter:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}
/* Rows that came in above the fold while he is further down (inbox.js keepRow): said, not pushed. */
.inbox-news-at { position: sticky; top: 8px; z-index: 6; height: 0; display: flex; justify-content: center; pointer-events: none; }
.inbox-news-at:has(~ .inbox-edge.is-up > :not([hidden])) .inbox-news { translate: 0 26px; }
/* A knock out of sight (inbox.js tellKnocks): a slim strip on the edge of the list it lies beyond, as wide as
the list. It is the edge: rows pass under it, it floats over no tile. */
.inbox-edge { position: fixed; z-index: 6; pointer-events: none; }
.inbox-edge-knock { pointer-events: auto; width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 0 0 10px 10px; background: var(--urg-high); color: var(--surface); font: 700 var(--t-sm)/1 var(--font); white-space: nowrap; }
.inbox-edge.is-down .inbox-edge-knock { border-radius: 10px 10px 0 0; }
.inbox-edge-knock[hidden] { display: none; }
.inbox-edge-knock .sketch { width: 18px; height: 18px; stroke-width: 2; }
/* A tool of the paper in hand (css/deskpad.css, data-paper-front): the pad's toolbar stands at the window's foot, where
the lower strip would lie on it; the cards cannot be reached then anyway, so the strip waits until the pointer is back. */
#inbox[data-paper-front] .inbox-edge.is-down { display: none; }
.inbox-edge-knock[hidden] { display: none; }
.inbox-news { pointer-events: auto; align-self: start; padding: 7px 13px; border: 0; border-radius: 999px; background: var(--fg); color: var(--surface); font: 700 var(--t-sm)/1 var(--font); box-shadow: var(--shadow-lg); white-space: nowrap; }
@container rows (max-width: 560px) {
.inbox-answer.is-thumb.is-short { grid-auto-flow: column; grid-template-columns: auto minmax(0, auto); gap: 8px; padding-inline: 8px; }
.inbox-answer.is-thumb.is-short .sketch { width: 22px; height: 22px; }
.inbox-answer.is-thumb.is-short:not(.is-stacked) > span.inbox-short { text-align: left; }
.inbox-answer.is-thumb.is-short.is-stacked { grid-auto-flow: row; grid-template-columns: minmax(0, auto); gap: 3px; padding-block: 7px; }
}
/* ---- a question inside the conversation: the same row as in the inbox, where it was asked ---- */
.ask { margin-top: var(--s-4); }
.ask-open { container: rows / inline-size; margin-block: var(--s-6) var(--s-2); }
/* A session on its own: the question is the Desk's row itself, answerable in the stream (js/chat.js). */
.ask-card { container: rows / inline-size; margin-block: var(--s-6) var(--s-3); }
.ask > .event { margin-left: -6px; }
.ask > .event[aria-expanded="true"] .event-about { color: var(--fg); }
/* An answered question, unfolded where it was asked: read-only, with the way back. */
.ask-past { margin: var(--s-2) 0 var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); display: grid; gap: var(--s-3); justify-items: start; animation: arrive var(--d-med) var(--ease-out) both; }
.ask-past > strong { font: 700 1.05rem/1.3 var(--display); letter-spacing: -.01em; }
.ask-past > .rich { color: var(--muted); font-size: var(--t-sm); max-width: 100%; }
.ask-past-options { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-past-options li { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--t-sm); }
.ask-past-options li.is-chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.ask-past-options .ico { width: 15px; height: 15px; color: var(--accent); stroke-width: 2.4; }
.ask-past-note { font-size: var(--t-sm); color: var(--muted); }
.ask-past-take { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.ask-past-take:hover { border-color: var(--fg); }
/* What the human sent along stands at the right, under each other's edge like the bubbles. */
.msg.msg-user:has(.shots) { width: min(82%, 34rem); }
.msg.msg-user .shots { align-self: stretch; margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(0, 11rem)); justify-content: end; max-width: none; }
.msg.msg-user .shots-one { grid-template-columns: minmax(0, 18rem); }
.msg.msg-user .files { justify-content: flex-end; margin-bottom: var(--s-2); }
/* Open questions out of sight: how many, and the way to the next one. Beside "To the end", at the column's right edge. */
.open-jump {
position: absolute; z-index: 2; bottom: calc(100% + var(--s-3)); right: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter)));
display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px 0 13px;
border: 0; border-radius: var(--r-pill); background: var(--urg-high); color: var(--surface);
box-shadow: var(--shadow-md); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.open-jump .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.open-jump.is-up .ico { rotate: 180deg; }
.open-jump:hover { filter: brightness(.94); }
.open-jump:active { scale: .97; }
body[data-filter] .open-jump { display: none; }
/* ---- a session's head and its canvas (js/chat.js) ----
The switch "Conversation · Scribble" is gone: the canvas opens from the composer. Nothing floats over the head:
the memo button is left out inside a session ("/" still opens it), the Scratchpad is one quiet icon at its right end. */
html body:not([data-scope="all"]):not([data-page]) .modes, html body:not([data-scope="all"]):not([data-page]) .tabbar { display: none; }
html body:not([data-pair]) .pane-now { font-size: var(--t-sm); }
html .pane-now .caps { font-size: .62rem; letter-spacing: .06em; }
@media (min-width: 861px) {
html body:not([data-scope="all"]):not([data-page]) .quick-open { display: none; }
/* (same place and size as on the Desk, 8px from the top and 16px from the right: only its looks are quieter) */
html body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: var(--s-4); top: 8px; width: 38px; height: 38px; box-shadow: none; background: none; color: var(--muted); }
html body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open:hover { background: var(--sunken); color: var(--fg); translate: none; box-shadow: none; }
html body:not([data-scope="all"]):not([data-page]) .pane-title { padding-right: calc(var(--s-3) + 44px); }
}
@media (min-width: 1200px) {
html body:not([data-pair]):not([data-scope="all"]) .pane-title { padding-right: 0; }
html body:not([data-pair]):not([data-scope="all"]) .filters { margin: 0 var(--s-4) 9px 0; }
}
.composer-scribble .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.composer-scribble[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* The canvas in the pane's place: it carries the way back to the conversation. */
body[data-view="scribble"] #scribble { display: flex; flex-direction: column; }
#scribble > .scr { flex: 1; min-height: 0; height: auto; }
/* (app.js can mount the canvas twice when the page is loaded on /scribble; as before, only the first shows.) */
#scribble > .scr ~ .scr { display: none; }
.scribble-bar { flex: none; display: flex; align-items: center; padding: 5px var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); }
.scribble-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 6px; border: 0; border-radius: 8px; background: none; color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.scribble-back:hover { background: var(--sunken); }
.scribble-back .ico { width: 18px; height: 18px; }
/* A wide window, a session on its own: the conversation moves together to half the width, the canvas stands beside it. */
@media (min-width: 1200px) {
html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #session { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) .pane-title { grid-column: 1 / -1; }
html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #chat { display: flex; grid-column: 1; grid-row: 2; }
html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #scribble { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line); }
html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) .scribble-bar { display: none; }
}
/* Both markers stand at the column's right edge, one above the other, clear of the middle of the lines; and the
stream ends with room for them, so its last line is never under one. */
.jump { left: auto; translate: none; right: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter))); height: 34px; }
.jump:not([hidden]) ~ .open-jump { bottom: calc(100% + var(--s-3) + 40px); }
.chat-pane:not(.is-several) .log-inner { padding-bottom: 60px; }
/* On a wide window a session used to be split in two (css/beside.css: its questions in a column of their own,
the conversation narrow beside it). It is one stream again; these lines take that split back for a session
on its own. Sessions laid together keep their layout. */
@media (min-width: 1200px) {
body:not([data-pair]):not([data-scope="all"]) .pane-who,
body:not([data-pair]):not([data-scope="all"]) .pane-now { margin-inline: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter))) max(17rem, calc((100% - 47.5rem) / 2 + var(--gutter))); }
body:not([data-pair]):not([data-scope="all"]) .pane-title { border-bottom: 1px solid var(--line); }
}
.msg-details { margin-top: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.msg-details summary { cursor: pointer; padding: 8px var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.msg-details summary::before { content: "›"; display: inline-block; transition: transform var(--d-fast) var(--ease-out); }
.msg-details[open] summary::before { transform: rotate(90deg); }
.msg-details summary::-webkit-details-marker { display: none; }
.msg-details > .rich { padding: 0 var(--s-3) var(--s-3); font-size: var(--t-md) !important; color: var(--muted); }
/* ---- the lists a filter lays over the conversation: the session's questions, then the answered ones; its files ---- */
.session-cards .inbox-head, .session-cards .inbox-groups { max-width: none; }
.session-cards .inbox-head { margin-bottom: var(--s-5); }
.session-cards .inbox-title p { margin-top: 0; }
.session-cards .inbox-groups { gap: var(--s-8); }
.session-cards .inbox-empty { margin-top: var(--s-4); }
/* The heading is a divider, as the senders' names are in the inbox. */
.hist-heading { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); font: 800 1.2rem/1 var(--display); }
.hist-heading::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.hist-heading b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Files: everything the session sent, one line each. */
.file-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-width: 0; padding: var(--s-2) 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--sunken); color: var(--muted); }
.file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-text { min-width: 0; display: grid; gap: 1px; }
.file-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.file-row.is-gone strong { color: var(--faint); text-decoration: line-through; }
.file-meta { font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- overview of all sessions ---- */
body[data-page="roster"] #inbox, body[data-page="roster"] #session { display: none; }
/* ---- rename a session, pick its scribble ---- */
/* Rename is a small form at the name that was pressed (agents.js openEditor): no veil over the page. */
.session-editor { border: 0; padding: 0; border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); width: min(340px, calc(100vw - 16px)); animation: pop var(--d-fast) var(--ease-out) both; }
.session-editor[data-anchored] { position: fixed; margin: 0; }
.session-editor::backdrop { background: transparent; }
.session-editor form { display: grid; gap: var(--s-2); padding: var(--s-4); }
.session-editor h2 { font: 800 1.5rem/1.15 var(--display); }
.session-editor input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; font-size: max(16px, 1em); }
.session-editor .caps { color: var(--muted); }
/* The choice of drawing opens right under the picture that was clicked: forty tiles in the session's colour. */
.mark-picker { position: fixed; margin: 0; padding: var(--s-3); border: 0; border-radius: 14px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); animation: pop var(--d-fast) var(--ease-out) both; }
.mark-picker::backdrop { background: transparent; }
.mark-grid { display: grid; grid-template-columns: repeat(8, 38px); gap: 6px; }
.mark-tile { --ink: var(--tone-pen); width: 38px; height: 38px; padding: 6px; border: 0; border-radius: 11px; background: var(--tone-wash); color: var(--ink); transition: scale 100ms ease-out; }
@media (any-hover: hover) { .mark-tile:hover { scale: 1.12; } }
.mark-tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.mark-picker .session-error { margin-top: var(--s-2); max-width: 346px; }
.session-buttons { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.session-buttons button { min-height: 42px; padding: 0 1.2em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; font-weight: 600; }
.session-buttons .is-lead { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.session-error { color: var(--deny); font-size: var(--t-sm); }
.session-error:empty { display: none; }
/* ---- the bar: at the bottom on wide screens ----
One calm line: the logo (a door to Help, Admin and Keys), where to go, the two tools, the state.
Every control in it is the same plain shape, 36 high with a quiet rounded ground; what is drawn by
hand is the small drawing inside each, nothing else. (The pad's control comes from padlink.js with
a look of its own; here it is brought into line with the others.) */
.footnav { display: none; }
.brand h1 { display: flex; }
.brand-open { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; transition: background var(--d-fast); }
.brand-open:hover, .brand-open[aria-expanded="true"] { background: var(--sunken); }
.brand-fold { display: inline-flex; margin-left: -4px; color: var(--faint); rotate: 0deg; transition: rotate var(--d-med) var(--ease-out), color var(--d-fast); }
.brand-fold .sketch { width: 16px; height: 16px; stroke-width: 2.2; }
.brand-open:hover .brand-fold { color: var(--muted); }
.brand-open[aria-expanded="true"] .brand-fold { rotate: 180deg; color: var(--fg); }
/* The menu: a small sheet above the logo (below it on a phone, where the bar is at the top). */
.sidedoors { position: absolute; z-index: 6; left: max(var(--s-3), env(safe-area-inset-left, 0px)); bottom: calc(100% + 6px); min-width: 208px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); animation: pop var(--d-fast) var(--ease-out) both; }
.topbar .sidedoors a, .topbar .sidedoors button, .topbar .sidedoors #keys-open { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 500 var(--t-md)/1 var(--font); text-align: left; text-decoration: none; }
.topbar .sidedoors a:hover, .topbar .sidedoors button:hover, .topbar .sidedoors #keys-open:hover, .topbar .sidedoors :focus-visible { background: var(--sunken); text-decoration: none; }
.topbar .sidedoors :focus-visible { outline-offset: -2px; }
.sidedoors .sketch { width: 20px; height: 20px; stroke-width: 1.8; color: var(--muted); }
/* a switch in the menu says how it stands */
.sidedoors button { width: 100%; cursor: pointer; }
.sidedoors button i { margin-left: auto; padding-left: var(--s-4); font: 600 var(--t-xs)/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sidedoors button[aria-checked="true"] i { color: var(--accent); }
.sidedoors kbd { margin-left: auto; min-width: 22px; padding: 4px 6px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 0 var(--line-strong); font: 500 .72rem/1 var(--mono); color: var(--muted); text-align: center; }
/* the theme: a switch that says how it stands, with the moon while it is light and the sun while it is dark */
#theme-toggle i::after { content: "off"; }
#theme-toggle[aria-pressed="true"] i::after { content: "on"; }
#theme-toggle[aria-pressed="true"] i { color: var(--accent); }
/* the connection, last in the menu: a line, not a control */
.sidedoors .conn { margin: 4px 0 0; padding: 10px 12px 6px 14px; height: auto; border-top: 1px solid var(--line); border-radius: 0; font-size: var(--t-sm); }
.sidedoors .conn[data-state="online"] span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.sidedoors .conn[data-state="offline"] { margin: 4px -6px -6px; padding: 10px 18px 12px 20px; border-radius: 0 0 var(--r-md) var(--r-md); }
/* When the connection is not there it must be seen without opening anything: the logo carries a mark,
and the word stands beside it in the bar. */
/* Not connected: a small dot on the caret (the words stand in the menu's foot; a sentence here broke the bar). */
.brand:has(.conn[data-state="offline"]) .brand-open::after, .brand:has(.conn[data-state="connecting"]) .brand-open::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--faint); }
.brand:has(.conn[data-state="offline"]) .brand-open::after { background: var(--urg-high); animation: blink 1.6s var(--ease-in-out) infinite; }
.brand:has(.conn[data-state="offline"]) .brand-mark-bg { fill: var(--urg-high); }
/* The two tools, and on wide screens the two places: one shape. */
.topbar .focus-open, .topbar .padlink-open, .footnav button {
display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 14px 0 10px;
border: 0; border-radius: 10px; background: var(--sunken); color: var(--fg); rotate: none;
font: 600 var(--t-sm)/1 var(--font); letter-spacing: 0; white-space: nowrap;
transition: background var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
}
.topbar .focus-open:hover, .topbar .padlink-open:hover { rotate: none; background: var(--sunken); box-shadow: inset 0 0 0 2px var(--line-strong); }
.topbar .padlink-open[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.topbar .focus-open .sketch, .topbar .padlink-ico, .footnav .sketch { width: 20px; height: 20px; stroke-width: 1.8; }
/* The theme: a scribbled moon while it is light, a sun while it is dark. */
.topbar .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
#theme-toggle .ico-sun, :root[data-theme="dark"] #theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .ico-sun { display: block; }
/* The sheet of keys: only where there is a keyboard. */
@media (pointer: coarse) { .topbar #keys-open { display: none; } }
/* Two small round buttons float at the bottom right of every page: the memo pad showing the crowned
session (quick send, the memo slip: css/quicksend.css) and the pad's drawing. In a session
they stand above the composer, so they never lie on its send button. */
.quick-open, .topbar .padlink-open {
position: fixed; z-index: 6; bottom: calc(var(--s-4) + var(--float-up, 0px) + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0;
display: grid; place-items: center; border: 0; border-radius: 50%; rotate: none; background: var(--surface); color: var(--fg);
box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); transition: box-shadow var(--d-fast), translate var(--d-fast);
}
.topbar .padlink-open { right: calc(var(--s-4) + 52px); }
.quick-open:hover, .topbar .padlink-open:hover { background: var(--surface); box-shadow: 0 0 0 1px var(--fg), var(--shadow-md); translate: 0 -1px; rotate: none; }
.quick-open[aria-expanded="true"], .topbar .padlink-open[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.topbar .padlink-open span { display: none; }
.topbar .padlink-ico { width: 22px; height: 22px; }
/* In a session the two do not float over the conversation: they stand small at the top right, beside its title. */
body:not([data-scope="all"]):not([data-page]) :is(.quick-open, .topbar .padlink-open) { bottom: auto; top: 8px; width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--line); }
body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: calc(var(--s-4) + 44px); }
@media (max-width: 860px) {
body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: 100px; top: 6px; }
/* A phone's Desk too: the cards scroll under the whole screen, so nothing may float over their tiles
(his rule: nothing lies over what one presses). The two stand in the top bar, as in a session. */
body .topbar :is(.quick-open, .padlink-open) { bottom: auto; top: 6px; width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--line); }
body .topbar .quick-open { right: 56px; }
body .topbar .padlink-open { right: 100px; }
}
/* ---- wide screens: no bar. The logo with its menu floats at the top centre of the page, a small
pill; the menu drops down centred under it. In the sidebar the Inbox entry stays at the top while
the sessions scroll. ---- */
@media (min-width: 861px) {
body { grid-template-rows: minmax(0, 1fr); }
#agents { grid-column: 1; grid-row: 1; padding-top: 0; }
#session, #inbox, #ledger { grid-row: 1; }
/* The Desk stands at the top of the sidebar, a block of its own that stays while the sessions scroll:
the desk drawing, "Desk", who works, the knocks and everything open; one click goes to the Desk from
anywhere. The caret at its right opens the menu under it. (Not moved by a transform: the floating
buttons at the foot are children of .topbar and must stay the page's.) */
/* The block: one line. The desk drawing stands over the sessions' drawings, the big word "Desk" over
their names; beside it the small turning ring while sessions work; the knocks and everything open
as small marks before the caret, whose column stands over the rows' rings. Even margins all round;
below it clear room, kept by a spacer that stays while the sessions scroll under it. */
/* The rail (card Nr. 150, bar.js toggleRail): the sidebar folded to the sessions' drawings with their state at
the corner (ring, count, the red hand of a knock); the Desk block is its drawing and the knocks. Names
come as a note beside the row under the pointer (.rail-tip). The small button at the foot folds and opens. */
.rail-tip { display: block; }
.rail-fold { position: fixed; z-index: 7; left: 8px; bottom: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--faint); }
.rail-fold:hover, .rail-fold:focus-visible { color: var(--fg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.rail-fold svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--d-fast); }
/* (The old client's full-screen focus view hid the rail button; the app has no such view: no :has() over the whole page.) */
#agents { padding-bottom: 60px; }
[data-rail="folded"] body { grid-template-columns: 76px minmax(0, 1fr); }
[data-rail="folded"] .rail-fold { left: 20px; }
[data-rail="folded"] .rail-fold svg { rotate: 180deg; }
[data-rail="folded"] .topbar { width: 60px; height: 64px; }
[data-rail="folded"] .topbar .desk-go { flex-direction: column; justify-content: center; gap: 5px; padding: 0; border-radius: 14px; }
[data-rail="folded"] .topbar .desk-go > .sketch { margin: 0; width: 26px; height: 26px; }
[data-rail="folded"] .topbar .desk-name, [data-rail="folded"] .topbar .desk-state .agent-working, [data-rail="folded"] .topbar .desk-state .agent-count.is-total { display: none; }
[data-rail="folded"] .topbar .desk-state { flex: none; margin: 0; justify-content: center; }
[data-rail="folded"] .topbar .desk-state:empty { display: none; }
[data-rail="folded"] #agents { padding-inline: 6px; }
[data-rail="folded"] #agents::before { height: 80px !important; margin-inline: -6px; }
[data-rail="folded"] .agent-row { justify-content: center; }
[data-rail="folded"] .agent-entry { flex: none; justify-content: center; width: 60px; padding: 8px 0 !important; }
[data-rail="folded"] .agent-text { display: none; }
[data-rail="folded"] .agent-row > .agent-badge { position: absolute; right: -2px; top: -4px; margin: 0; width: 24px; height: 24px; scale: .85; }
[data-rail="folded"] .agent-row.is-group .agent-entry { min-height: 0; }
[data-rail="folded"] .agent-row > :is(.agent-cut, .agent-archive) { display: none; }
[data-rail="folded"] #agents > :not(.agent-row) { display: none; }
[data-rail="folded"] #agents > .agent-invite { display: flex; justify-content: center; padding: 0; }
.rail-tip { position: fixed; z-index: 9; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 600 var(--t-sm)/1 var(--font); pointer-events: none; white-space: nowrap; }
#agents { padding-top: 0; }
/* the Desk box: 8px from the top and the sides (one inset all round), the first row 16px under it, on the line of the page's first content */
#agents::before { content: ""; flex: none; position: sticky; top: 0; z-index: 3; height: 72px; margin: 0 calc(-1 * var(--s-2)) 6px; background: var(--bg); }
.topbar { position: fixed; z-index: 7; top: 8px; left: 8px; right: auto; width: 240px; margin: 0; min-height: 0; height: 56px; padding: 0; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.topbar:has(#desk-go[aria-current]) { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
.topbar .brand { margin-right: 0; flex: 1; min-width: 0; height: 100%; }
.topbar .brand h1 { width: 100%; height: 100%; font: 800 1.75rem/1 var(--display); letter-spacing: -.03em; }
.topbar .deskpill { gap: 0; }
.topbar .desk-go { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 0; padding: 0 7px 0 6px; border-radius: 14px 0 0 14px; text-align: left; }
.topbar .desk-go:hover { background: none; }
.topbar .desk-go .brand-mark { display: none; }
.topbar .desk-go > .sketch { flex: none; width: 28px; height: 28px; margin: 0 15px 0 9px; stroke-width: 1.6; }
.topbar .desk-state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; margin-left: 7px; }
.topbar .desk-state .agent-working b { display: none !important; }
.topbar .desk-state .agent-count.is-total .sketch { display: none; }
.topbar .desk-state .agent-count.is-total { min-width: 18px; height: 18px; padding: 0 5px; justify-content: center; border-radius: var(--r-pill); background: var(--sunken); font-size: .7rem; }
.topbar .desk-state .agent-working { order: -1; }
.topbar .desk-state .agent-working span { display: none; }
.topbar .desk-state .agent-working .agent-ring { width: 16px; height: 16px; }
.topbar .desk-state .agent-counts { margin-left: auto; gap: 7px; }
.topbar .desk-state .agent-count { padding: 0; gap: 2px; background: none; color: var(--muted); font-weight: 600; }
.topbar .desk-state .agent-count.is-knock { color: var(--urg-high); }
.topbar .desk-state .agent-count .sketch { width: 15px; height: 15px; }
.topbar .brand-open { align-self: stretch; width: 32px; min-width: 32px; margin-left: 0; padding: 0; justify-content: center; border-radius: 0 14px 14px 0; box-shadow: -1px 0 0 var(--line); cursor: pointer; }
.topbar .brand-open .brand-fold { margin-left: 0; }
/* ---- the menu's pill (card Nr. 161 "pille"; then "Desk wieder links, oben das Menü heißt Trommi"): the menu's
opener floats at the top centre of the page: the bell mark, the word "Trommi", a caret; a click anywhere on it
(or Ctrl+K) opens the menu under it. It is the product's menu, not the Desk: the Desk box stands at the top of
the sidebar again, without a caret, and carries the ring, the knocks and the count. The pill stands in a band of
its own above every view (Desk, session, Scribble, Agents), so it is always there and lies over nothing; the
pad's button stands in the same band at the right. Only the opened card and the walk cover it. (The opener is a
fixed child of .topbar, which is placed without a transform.) */
:root { --side: 256px; --band: 64px; } /* the band ends where the Desk box ends (8 + 56) */
:root[data-rail="folded"] { --side: 76px; }
#session, #inbox, #ledger { margin-top: var(--band); }
/* Desk and Agents: the heading begins 16px under the band, the same line on both pages (ledger.css said 32px, the Desk 8px) */
html body[data-scope="all"] #inbox, html body[data-page="roster"] #ledger { padding-top: var(--s-4); }
.topbar .desk-go { border-radius: 14px; }
/* (logo.css, linked later, put the bell into the Desk button for the time the Desk was the pill: the Desk box
shows its desk drawing again, the bell stands in the menu's pill) */
html body .topbar .desk-go .brand-mark { display: none; }
html body .topbar .desk-go > .sketch { display: block; }
html .topbar .brand-open { position: fixed; z-index: 8; top: 8px; left: var(--side); right: 0; width: max-content; min-width: 0; height: 38px; min-height: 0; margin: 0 auto; padding: 0 10px 0 8px; gap: 8px; align-self: auto; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); white-space: nowrap; }
html .topbar .brand-open:hover, html .topbar .brand-open[aria-expanded="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--fg), var(--shadow-md); }
.brand-open > .pill-mark { display: block; flex: none; width: 22px; height: 22px; }
.brand-open > .pill-word { display: block; font: 700 1.02rem/1 var(--display); letter-spacing: 0; }
.topbar .brand-open[data-other-knock]::before { right: 2px; top: 0; }
html.focus-lock .topbar .brand-open { display: none; }
html .topbar #brand-doors { position: fixed; z-index: 40; top: 54px; bottom: auto; left: var(--side); right: 0; margin-inline: auto; translate: none; width: 320px; max-height: calc(100dvh - 66px); overflow-y: auto; padding: 10px; border-radius: 18px; }
/* the pad's button: top right of the band, in every view */
html body .topbar .padlink-open { bottom: auto; top: 8px; right: var(--s-4); width: 38px; height: 38px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.agent-entry { border-radius: 14px; }
.agent-row > .agent-badge { margin-right: 8px; }
}
/* The menu, compact: the jump field, a quiet line for the project, four places two by two, and a foot
with the connection and two small switches. One thin rule between the parts. */
.topbar .sidedoors { width: 244px; min-width: 0; gap: 0; padding: 6px; border-radius: 14px; }
#jump-field { width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--sunken); color: var(--fg); font: 400 var(--t-sm)/1 var(--font); }
#jump-field:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
#jump-results { display: grid; gap: 1px; margin-top: 4px; }
#jump-results:empty { display: none; }
.topbar .sidedoors #jump-results :is(a, button) { min-height: 30px; font-size: var(--t-sm); }
#jump-results :is(a, button)[aria-selected="true"] { background: var(--sunken); }
.menu-head { margin: 0; padding: 9px 10px 3px; font: 600 .66rem/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.menu-desks { display: grid; gap: 1px; padding-bottom: 4px; }
.topbar .sidedoors .menu-desk { min-height: 32px; padding: 0 8px; font-size: var(--t-sm); }
.menu-desk b { font-weight: 600; }
.topbar .sidedoors .menu-desk i { text-transform: none; letter-spacing: 0; font-weight: 500; }
.menu-desk[aria-checked="true"]::after { content: "✓"; margin-left: 8px; color: var(--accent); font-weight: 700; }
/* Several desks (bar.js paintDesks): a row per desk (name, what waits, its key), the desk in view with "Rename" and
"Remove" under it; "+ New desk…"; a name is typed in place. A dot on the caret when another desk knocks. */
.menu-desk-row { display: flex; flex-wrap: wrap; align-items: center; }
.menu-desk-row > .menu-desk { flex: 1 1 100%; min-width: 0; }
.menu-desk b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sidedoors .menu-desk kbd { margin-left: 10px; white-space: nowrap; }
.topbar .sidedoors .menu-desk i.is-knock { color: var(--urg-high); }
.topbar .sidedoors .menu-desk.new-desk { color: var(--muted); }
.topbar .sidedoors .menu-desk.new-desk::after { content: none; }
.topbar .sidedoors .menu-desk-act { flex: none; width: auto; max-width: max-content; min-height: 28px; margin: 0 0 4px 8px; padding: 0 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); }
.topbar .sidedoors .menu-desk-act.is-remove[data-sure] { color: var(--urg-critical); box-shadow: inset 0 0 0 1px var(--urg-critical); }
.menu-desk-form { display: flex; gap: 6px; padding: 3px 4px 5px; }
.menu-desk-field { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
.topbar .sidedoors .menu-desk-form button { flex: none; width: auto; min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 600 var(--t-sm)/1 var(--font); }
.menu-desk-error { margin: 0; padding: 2px 10px 4px; color: var(--urg-critical); font: 500 var(--t-xs)/1.3 var(--font); }
.menu-desk-error:empty { display: none; }
/* Dev (bar.js): two quiet entries at the menu's foot for test cards, and a note when the hub cannot do it yet */
.menu-dev { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--line); }
.menu-dev .menu-head { display: block; }
.topbar #brand-doors .menu-dev button, .topbar #brand-doors .menu-dev a { color: var(--muted); }
.menu-dev-note { margin: 0; padding: 2px 12px 4px; color: var(--urg-high); font: 500 var(--t-xs)/1.3 var(--font); }
.menu-dev-note:empty { display: none; }
.brand-open[data-other-knock] { position: relative; }
.brand-open[data-other-knock]::before { content: ""; position: absolute; right: 5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-high); box-shadow: 0 0 0 2px var(--surface); }
[data-desks] .desk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 861px) { [data-desks] .topbar .brand h1 { font-size: 1.32rem; letter-spacing: -.01em; } }
@media (max-width: 860px) { .topbar .sidedoors .menu-desk kbd { display: none; } [data-desks] .desk-name { max-width: 7.5rem; } .topbar .sidedoors .menu-desk-act { min-height: 36px; } .ledger-desk { display: none; } }
.ledger-desk { height: 32px; max-width: 8.5rem; margin-right: 4px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); }
/* ---- the floating Desk: the way to the Desk and what waits there; the caret beside it opens the menu ---- */
.deskpill { display: flex; align-items: center; gap: 2px; }
.desk-go { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px 0 4px; border: 0; border-radius: var(--r-pill); background: none; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.desk-go:hover { background: var(--sunken); }
.desk-state { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-xs)/1 var(--font); letter-spacing: 0; }
.desk-state:empty { display: none; }
.desk-state .agent-working { font-size: var(--t-xs); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-block: 4px; border-top: 1px solid var(--line); }
.topbar .sidedoors .menu-grid :is(a, button, #keys-open) { min-height: 36px; gap: 10px; padding: 0 12px; font-size: var(--t-sm); }
.topbar .sidedoors .sketch { width: 17px; height: 17px; }
.menu-foot { display: flex; align-items: center; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.topbar .sidedoors .menu-foot .conn { flex: 1; margin: 0; padding: 0 8px; height: 30px; border: 0; font-size: var(--t-xs); }
.topbar .sidedoors .menu-foot .conn[data-state="offline"] { margin: 0; padding: 0 8px; border-radius: 8px; }
.topbar .sidedoors .menu-foot button { flex: none; width: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 8px; }
.topbar .sidedoors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) { background: var(--sunken); }
.topbar .sidedoors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) .sketch { color: var(--fg); }
@media (min-width: 861px) {
/* one edge on the pill: the logo button has no ground of its own in it */
.brand-open:hover, .brand-open[aria-expanded="true"] { background: var(--sunken); }
}
/* ---- phone: sessions as a strip, a session's two modes behind a tab bar ---- */
@media (max-width: 860px) {
body { --bar-h: 48px; --gutter: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
#session { grid-column: 1; grid-row: 3; }
#chat, #scribble { animation: fade var(--d-med) var(--ease-out); }
/* The strip of sessions above already says which one this is; the title keeps only the filters,
and for sessions laid together the names, to pick the one column there is room for. */
.pane-title { min-height: 0; padding: 6px var(--gutter); gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.pane-title .modes, .pane-who > .pane-mark, .pane-who > .agent-pair { display: none; }
.pane-who { flex: 1 1 auto; }
.pane-who:empty, body:not([data-pair]) .pane-who { display: none; }
.pane-title h2 { font-size: 1rem; }
.pane-members button[aria-pressed="false"] { color: var(--faint); }
.pane-members button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
body[data-view="scribble"]:not([data-pair]) .pane-title { display: none; }
.filters { margin-left: auto; }
.filters button { min-height: 36px; }
body[data-pair] .chat-pane:not(.is-member) { display: none; }
#chat[data-cols]:not([data-cols="1"]) .chat-pane { min-width: 0; --gutter: var(--s-4); }
.chat-pane-head { display: none; }
.pane-list { padding-block: var(--s-5) var(--s-8); }
#agents { grid-row: 2; flex-direction: row; gap: var(--s-1); overflow-x: auto; overflow-y: hidden; padding: var(--s-2) var(--s-3); border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
#agents::-webkit-scrollbar { display: none; }
/* (room at the foot, so the last row can be scrolled clear of the two floating buttons) */
body[data-scope="all"] #inbox { grid-column: 1; grid-row: 3; padding: var(--s-5) var(--gutter) 96px; }
.inbox-head { margin-bottom: var(--s-5); }
body[data-scope="all"] .tabbar { display: none; }
body[data-page="roster"] .tabbar { display: none; }
.agent-heading, .agent-archive, .agent-cut, .agent-row .crown-toggle[aria-pressed="false"] { display: none; }
.agent-row .crown-toggle { left: 4px; top: -9px; pointer-events: none; }
.agent-row.is-group .agent-entry { min-height: 44px; }
.agent-row { flex: none; }
.agent-row.is-insert-before::after, .agent-row.is-insert-after::after { left: auto; right: auto; top: 4px; bottom: 4px; width: 3px; height: auto; }
.agent-row.is-insert-before::after { left: -4px; }
.agent-row.is-insert-after::after { right: -4px; }
.sidedoors { bottom: auto; top: calc(100% + 6px); }
.brand-open { margin-left: -6px; padding: 0 6px; gap: 8px; }
.topbar .icon-btn { width: 44px; height: 40px; }
.roster-open { display: grid; }
.toast { left: var(--gutter); right: var(--gutter); width: auto; flex-wrap: nowrap; padding: 6px 6px 6px var(--s-4); border-radius: var(--r-pill); }
.toast:not(:has(button)) { padding-block: 10px; border-radius: var(--r-md); }
.toast button { flex: none; }
.agent-entry { width: auto; flex: none; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); gap: var(--s-2); }
.agent-entry[aria-current="true"] { box-shadow: 0 0 0 1px var(--line-strong); }
.agent-text small { display: none; }
.agent-avatar { width: 30px; height: 30px; border-radius: 50%; }
.agent-pair { margin-inline: -4px 0; height: 36px; width: 49px; }
.agent-text:has(strong + strong) { display: flex; gap: .35em; line-height: inherit; }
.agent-text strong + strong { rotate: none; translate: none; }
.agent-text strong + strong::before { content: "+ "; color: var(--faint); font-weight: 500; }
.agent-badge { width: 30px; height: 30px; }
.agent-row.has-badge .agent-entry { padding-right: 52px; }
.agent-row > .agent-badge { margin: 0 8px 0 -46px; }
.focus-open span { display: none; }
.mic { width: 44px; height: 44px; }
.topbar { gap: 0 2px; padding-left: max(var(--s-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s-1), env(safe-area-inset-right, 0px)); }
.brand-open { margin-left: 0; min-width: 40px; min-height: 40px; justify-content: center; }
.desk-go { min-height: 40px; padding-left: 0; }
.desk-go > .sketch { display: none; }
.desk-go:hover { background: none; }
.desk-state .agent-working span { display: none; }
.icon-btn { width: 44px; height: 44px; }
.log { scrollbar-gutter: auto; }
.log-inner { padding-block: var(--s-5) var(--s-5); }
.msg { margin-top: var(--s-6); }
.msg-user { max-width: 88%; }
.event { min-height: 44px; margin-top: var(--s-4); }
.event.cont .event-ico::before { height: 20px; }
.event-time { display: none; }
.dock { padding-bottom: var(--s-3); }
.composer { border-radius: var(--r-xl); padding: 5px; gap: 0; }
.composer textarea { height: 44px; padding-block: 10px; font-size: 16px; } /* below 16px iOS zooms the page on focus */
.send { width: 44px; height: 44px; }
#chat .rich pre code { font-size: .8rem; }
.tabbar {
grid-row: 4; display: grid; grid-template-columns: repeat(2, 1fr);
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--surface); border-top: 1px solid var(--line); position: relative; z-index: 5;
}
.tabbar button {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
height: 58px; padding: 0; border: 0; background: none;
color: var(--muted); font-size: var(--t-xs); font-weight: 500; letter-spacing: .01em;
transition: color var(--d-fast) var(--ease-out);
}
.tabbar button:focus-visible { outline-offset: -4px; border-radius: var(--r-md); }
.tab-ico {
position: relative; display: grid; place-items: center; width: 60px; height: 30px; border-radius: var(--r-pill);
transition: background var(--d-med) var(--ease-out);
}
.tab-ico .ico { width: 22px; height: 22px; }
.tabbar button[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tabbar button[aria-current="page"] .tab-ico { background: var(--accent-soft); }
.tab-dot { position: absolute; top: 2px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
/* the keyboard is up: give its room to the conversation */
:root[data-typing] .tabbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
}
/* A finger needs 44px: the one-line pile heads and the menu's entries. */
@media (pointer: coarse), (max-width: 860px) {
.inbox-pile-head { min-height: 44px; }
.topbar .sidedoors .menu-grid :is(a, button, #keys-open), .topbar .sidedoors .menu-desk, .topbar .sidedoors #jump-results :is(a, button) { min-height: 44px; }
.topbar .sidedoors .menu-foot button { width: 44px; min-height: 44px; }
#jump-field { height: 44px; }
.inbox-revising-row, .inbox-revising-open { min-height: 44px; }
}
/* ---- the Desk's menu: one column, one type size for entries and one small for what they say ----
The jump field first (its key at the right), the desk(s), the four places as a list with one icon
column, then the two switches as labelled rows, and the connection as the last quiet line. */
.topbar #brand-doors { gap: 0; padding: 8px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong), 0 12px 28px -10px rgb(20 30 25 / .28); }
.jump-box { position: relative; display: block; }
/* The field's own "clear" cross would lie on the key cap at its right end (Esc empties and closes it anyway). */
#jump-field::-webkit-search-cancel-button { display: none; }
#jump-field { height: 36px; padding: 0 58px 0 12px; border-radius: 9px; font: 400 var(--t-sm)/1 var(--font); }
.jump-box kbd { position: absolute; right: 8px; top: 50%; translate: 0 -50%; margin: 0; padding: 3px 6px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); font: 500 .68rem/1 var(--mono); color: var(--muted); pointer-events: none; }
.topbar #brand-doors :is(a, button):not(.menu-foot *), .topbar #brand-doors .menu-foot button { width: 100%; min-height: 36px; gap: 10px; padding: 0 12px; border-radius: 9px; font: 500 var(--t-sm)/1 var(--font); justify-content: flex-start; }
.topbar #brand-doors .menu-grid :is(a, button) { min-height: 36px; gap: 10px; padding: 0 12px; font-size: var(--t-sm); }
.topbar #brand-doors .sketch { flex: none; width: 18px; height: 18px; stroke-width: 1.8; color: var(--muted); }
.topbar #brand-doors :is(i, kbd):not(.jump-box kbd) { margin-left: auto; padding-left: 12px; font: 500 var(--t-xs)/1 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
.topbar #brand-doors kbd:not(.jump-box kbd) { min-width: 0; padding: 3px 6px; background: none; box-shadow: 0 0 0 1px var(--line-strong); border-radius: 6px; font-family: var(--mono); }
.menu-desks { padding: 6px 0 0; }
.menu-desks, .menu-grid, .menu-foot { margin-top: 6px; padding: 6px 0 0; border-top: 1px solid var(--line); }
.menu-desks { border-top: 0; margin-top: 2px; }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
/* one desk: a single quiet line, no heading and no tick */
.menu-head:has(+ .menu-desks > :only-child) { display: none; }
.menu-desk:only-child::after { content: none; }
.menu-desk[aria-checked="true"] i { color: var(--muted); }
.menu-foot { display: grid; gap: 0; align-items: stretch; }
.topbar #brand-doors .menu-foot .conn { order: 9; justify-content: flex-start; justify-self: start; height: 30px; margin: 4px 0 0; padding: 0 12px; border: 0; font-size: var(--t-xs); color: var(--muted); }
.topbar #brand-doors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) { background: none; }
.topbar #brand-doors .menu-foot button:hover, .topbar #brand-doors .menu-foot button:focus-visible { background: var(--sunken); }
#knock-sound::after { content: "Off"; }
#knock-sound[aria-checked="true"]::after { content: "On"; color: var(--accent); }
#theme-toggle::after { content: "Light"; }
:root[data-theme="dark"] #theme-toggle::after { content: "Dark"; }
#knock-sound::after, #theme-toggle::after { margin-left: auto; font: 500 var(--t-xs)/1 var(--font); color: var(--muted); }
@media (pointer: coarse), (max-width: 860px) {
.topbar #brand-doors { width: min(300px, calc(100vw - 24px)); }
.topbar #brand-doors .menu-grid :is(a, button) { min-height: 44px; }
.topbar #brand-doors :is(a, button):not(.menu-foot *), .topbar #brand-doors .menu-foot button { min-height: 44px; width: 100%; }
#jump-field { height: 44px; }
.jump-box kbd { display: none; }
}
/* ══ Phone polish (docs/qa-phone-design.md): found by measuring every state at 360, 390 and 430px. ══ */
@media (max-width: 860px) {
/* The bar: the pad and the memo are placed from the right edge, outside the flow, so the Desk box could
run under them (its menu arrow lay 12px under the pad). The box now ends before them. When the counts
get long the Agents button leaves first (see "Tight" below); only if that is not enough do the last counts
(who works, then the total) leave whole instead of being cut or covered. */
.topbar .brand { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 134px); }
.topbar .deskpill { min-width: 0; gap: 0; }
.topbar .desk-go { flex: 0 1 auto; min-width: 0; gap: 5px; padding-right: 2px; }
.topbar .desk-go .brand-mark, .topbar .desk-name { flex: none; }
.topbar .desk-state { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; align-content: flex-start; gap: 0 4px; height: 24px; overflow: hidden; }
.topbar .desk-state .agent-count.is-total { padding-inline: 2px; }
.topbar .desk-state > *, .topbar .desk-state .agent-counts > * { height: 24px; }
.topbar .desk-state .agent-counts { display: contents; }
.topbar .brand-open { flex: none; }
/* Tight (a 360px phone, or a two-digit knock count at 390px; js/bar.js sets data-tight, card Nr. 158): the
Agents button leaves the bar first and the counts keep their room. Agents stays an entry of the Desk menu. */
.topbar[data-tight] .roster-open { display: none; }
.topbar[data-tight] .brand { max-width: calc(100% - 94px); }
html body:not([data-x]):not([data-y]) .topbar[data-tight] .quick-open { right: 12px; }
html body:not([data-x]):not([data-y]) .topbar[data-tight] .padlink-open { right: 54px; }
/* the two round buttons stand on one line in every view (the memo sat 2px lower inside a session) */
html body:not([data-x]):not([data-y]) .topbar :is(.quick-open, .padlink-open) { top: 6px; }
html body:not([data-x]):not([data-y]) .topbar .quick-open { right: 50px; }
html body:not([data-x]):not([data-y]) .topbar .padlink-open { right: 92px; }
/* The strip of sessions: a row with a badge reached 8px past its own box, so the rows lay 4px over each
other. It now reaches 4px, which is the gap; the badge and the rows stay where they were. And one long
name does not take the whole strip. */
.agent-row.has-badge .agent-entry { padding-right: 48px; }
.agent-row > .agent-badge { margin-left: -42px; }
.agent-entry .agent-text { max-width: min(56vw, 15rem); }
/* The Desk's menu: a long desk name is cut with an ellipsis inside the menu (it made the field and every
line 37px wider than the menu, past its right edge). */
.topbar #brand-doors, .menu-desks { grid-template-columns: minmax(0, 1fr); }
.topbar #brand-doors > *, .menu-desk-row, .topbar .sidedoors .menu-desk { min-width: 0; max-width: 100%; }
.topbar .sidedoors .menu-desk i { flex: none; white-space: nowrap; }
/* A finger needs 40px. These keep their look; an unseen area around them takes the tap. */
:is(.agent-badge, .inbox-revising-take, #filter-questions, #filter-files, .rich .code-copy, .file-chip, .keys-close, .composer-file, .scribble-back, .inbox-walk, .inbox-when > .cardclip-copy, .inbox-done-sub > .cardclip-copy, .inbox-takeback) { position: relative; }
:is(.agent-badge, .inbox-revising-take, #filter-questions, #filter-files, .rich .code-copy, .file-chip, .keys-close, .composer-file, .scribble-back, .inbox-walk, .inbox-when > .cardclip-copy, .inbox-done-sub > .cardclip-copy, .inbox-takeback, .topbar .padlink-open, .open-jump, .jump, .rh-open)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); translate: -50% -50%; }
/* the memo button's ::after is its draft dot (quicksend.css): the tap area is its ::before, or a kept draft
turned the whole button into a green disc */
.topbar .quick-open::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); translate: -50% -50%; }
.msg-details summary { min-height: 40px; }
.composer-file { height: 34px; }
.inbox-when > .cardclip-copy { z-index: 1; }
/* the drawings to choose from: as many columns as the phone has room for (the eighth was cut off) */
.mark-grid { width: min(332px, calc(100vw - 76px)); grid-template-columns: repeat(auto-fill, 38px); justify-content: space-between; gap: 4px; }
.mark-tile { position: relative; }
.mark-tile::after { content: ""; position: absolute; inset: -2px; }
/* the Snooze corner of a question inside a conversation */
/* It is the 28px square beside the title now (.inbox-when): made 40px high it was 28x40 and lay 10px over the
title below. It keeps its look; an unseen 40px area takes the tap. */
.log .inbox-when .inbox-tab-act { overflow: visible; }
.log .inbox-when .inbox-tab-act::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; translate: -50% -50%; }
}
/* "Next, please" as index cards (card Nr. 166, "index"): the heading is the divider tab in front, standing on the
first card; the cards behind it peek out as small tabs with their titles, then "+N". Fixed heights: nothing
shifts when a card arrives. */
.inbox-title:has(> .inbox-index) { flex: 1 1 100%; }
.inbox-head:has(.inbox-index) { margin-bottom: 0; align-items: flex-end; }
.inbox-title h2.inbox-index { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0; min-width: 0; margin: 0; padding: 0 10px 0 var(--index-in, 46px); font: 700 1.1rem/1 var(--display); letter-spacing: -.01em; }
.inbox-index > .inbox-walk { flex: none; position: relative; z-index: 9; padding: 10px 14px 9px 16px; border-radius: 9px 9px 0 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); clip-path: inset(-2px -2px 0 -2px); }
.inbox-index > .inbox-walk .inbox-circled { font: 700 .86em/1.5 var(--font); }
.inbox-index > .inbox-walk .sketch { width: 17px; height: 17px; }
.inbox-index-tab { flex: 0 1 200px; min-width: 44px; display: flex; align-items: center; gap: 6px; height: 28px; margin: 0 0 0 -1px; padding: 0 10px 0 9px; border: 0; border-radius: 7px 7px 0 0; background: var(--sunken); box-shadow: 0 0 0 1px var(--line-strong); clip-path: inset(-2px -2px 0 -2px); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); letter-spacing: 0; cursor: pointer; }
.inbox-index-tab.inbox-index-more { flex: none; min-width: 0; cursor: default; }
button.inbox-index-tab:hover { color: var(--fg); background: var(--surface); }
.inbox-index-tab svg { flex: none; width: 15px; height: 15px; }
.inbox-index-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
.inbox-title h2.inbox-index { padding-left: 0; }
.inbox-index-tab { height: 32px; }
.inbox-index > .inbox-index-tab:nth-of-type(n + 2) { display: none; }
.inbox-index > .inbox-index-tab.inbox-index-more { display: flex; }
}
/* /css/crowns.css */
@supports (--sheet: crowns) { @media all {
/* Main agents and their subs in the sidebar (card Nr. 160, "Stapel + Klammer").
One crown per desk (card Nr. 172): only the session the human gave it to wears it; a main without it keeps its
stack and bracket. Folded, its subs lie as coloured card edges behind its row; unfolded, they stand
indented under it, held by a bracket drawn in the main's colour. The rows stay flat children of #agents
(.agent-row.is-main, then its .agent-row.is-sub), so the rail, the phone's strip and the keys treat them as rows.
Built by agents.js; nothing here applies while the hub sends neither `main` nor `parent`. */
/* ---- the main's row: a card, the top of its stack ---- */
.agent-row.is-main[data-fold] { --ghue: 162; margin-top: 6px; }
.agent-row.is-main[data-fold] .agent-entry { position: relative; z-index: 1; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.agent-row.is-main[data-fold] .agent-entry:hover { background: color-mix(in srgb, var(--surface) 60%, var(--sunken)); }
.agent-row.is-main[data-fold] .agent-entry[aria-current="true"] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fg) 60%, var(--line-strong)), var(--shadow-sm); }
.agent-row.is-main[data-fold] > .agent-badge { z-index: 2; }
.agent-row.is-main .agent-text strong { font-weight: 700; }
/* ---- the crown as the switch that folds and unfolds ---- */
/* (It sits on the drawing like the crown of a single session, app.css #agents .agent-avatar .crown-mark: over its middle, its base on the drawing's top.) */
.crown-fold { position: absolute; z-index: 3; left: 13px; top: -7px; width: 32px; height: 26px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: scale var(--d-fast); }
.crown-fold .crown-mark { position: static; width: 23px; rotate: -15deg; }
/* A main without the crown (one crown per desk, card Nr. 172): its switch is for the keyboard only. Nothing is
drawn and the pointer goes through to the entry; the stack and the bracket fold by the pointer. */
.crown-fold.is-plain { pointer-events: none; opacity: 0; }
.crown-fold.is-plain:focus-visible { opacity: 1; outline: 2px solid var(--fg); outline-offset: -4px; }
.crown-fold:hover, .crown-fold:focus-visible { scale: 1.15; }
body.is-pairing .crown-fold { visibility: hidden; }
/* ---- folded: the subs as card edges under the main's row ---- */
.agent-row.is-main[data-fold="shut"] { margin-bottom: calc(var(--n) * 4px + 18px); }
.crown-edges { position: absolute; z-index: 0; left: 0; right: 0; top: calc(100% - 3px); height: calc(var(--n) * 4px + 3px); cursor: pointer; }
.crown-edges::after { content: ""; position: absolute; inset: 0 0 -5px; }
/* an edge: its drawing (agents.js, edgeQuirk) stretched to the row, the pen as wide as everywhere; it lies a little crooked (--tilt, --dx: its own) */
.crown-edges { --fx: 1.6px; --fy: .7px; --fr: .5deg; --tk: 1; }
/* the fan spreads the same in total for any count: --p is the sheet's share (1 for the last), the full spread is six steps (one sheet moves all of it) */
.crown-edges i { --p: calc((var(--i) + 1) / var(--n, 6)); position: absolute; top: calc(var(--i) * 4px - 7px); left: calc(5px + var(--i) * 2.5px); right: calc(5px + var(--i) * 2.5px); height: 15px; z-index: calc(20 - var(--i)); transform-origin: 16% 0; translate: var(--dx, 0px) 0; rotate: calc(var(--tilt, 0deg) * var(--tk)); transition: translate 190ms cubic-bezier(.3, 1.8, .5, 1), rotate 190ms cubic-bezier(.3, 1.8, .5, 1), transform-origin 190ms ease-out; transition-delay: calc(var(--i) * 9ms); }
.crown-edges svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crown-edges path { fill: var(--tone-edge); stroke: var(--tone-pen); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.crown-edges .e-n { display: none; }
.crown-edges i.is-knock { height: 19px; }
.crown-edges i.is-knock path { fill: var(--urg-critical); stroke: color-mix(in srgb, var(--urg-critical) 72%, var(--fg)); }
/* the pointer on the stack, or on the crown (the keys too): the edges fan out a little, like cards being thumbed. Transforms only:
nothing below moves; the lowest edge comes down some 9px, into the air above the next row.
They lean to the side the mouse is on (lean_controller.js sets --lean -1 … 1 on the row, --lean-abs its size): over
the middle straight down, at the right tilted right, at the left the mirror. Without it (the keys, the old client) they lean right. */
@media (hover: hover) {
.crown-edges:hover i, .agent-row:has(> .crown-fold:is(:hover, :focus-visible)) > .crown-edges i { transform-origin: calc(50% - 34% * var(--lean, 1)) 0; translate: calc(var(--dx, 0px) * var(--lean-abs, 1) + var(--p) * 6 * var(--fx) * var(--lean, 1)) calc(1px + var(--p) * 6 * (var(--fy) + (1 - var(--lean-abs, 1)) * 1.6px)); rotate: calc(var(--tilt, 0deg) * var(--tk) * 2.2 * var(--lean-abs, 1) + var(--p) * 6 * var(--fr) * var(--lean, 1)); }
}
/* ---- unfolded: the subs under the main, the bracket beside them ---- */
.crown-bracket { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; --hue: var(--ghue); fill: none; stroke: var(--tone-pen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crown-bracket .crown-bracket-hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.agent-row.is-sub.is-unfolding { animation: crown-in 260ms cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.crown-bracket.is-unfolding { animation: crown-in 300ms 120ms ease-out backwards; }
@keyframes crown-in { from { opacity: 0; translate: 0 -10px; scale: .97; } }
@media (prefers-reduced-motion: reduce) { .agent-row.is-sub.is-unfolding, .crown-bracket.is-unfolding { animation: none; } .crown-edges i { transition: none; } }
@media (min-width: 861px) {
.agent-row.is-sub .agent-avatar { width: 28px; height: 28px; }
.agent-row.is-sub .agent-entry { min-height: 40px; }
.agent-row.is-main[data-fold="open"] { margin-bottom: 3px; }
/* the first row stands on the 80px line, crowned or not (the crown itself may reach above it) */
#agents > .agent-row.is-main[data-fold]:first-child { margin-top: 0; }
.agent-row.is-sub.is-last { margin-bottom: 8px; }
:root:not([data-rail="folded"]) .agent-row.is-sub { margin-left: 22px; }
/* the rail: the same, 60px wide; the names are gone, the bracket runs down the rail's left edge */
[data-rail="folded"] .agent-row.is-sub .agent-entry { padding-block: 5px !important; }
[data-rail="folded"] .crown-fold { left: 15px; top: -5px; }
[data-rail="folded"] .crown-edges { left: 2px; right: 2px; }
[data-rail="folded"] .crown-edges i { left: calc(4px + var(--i) * 2px); right: calc(4px + var(--i) * 2px); }
[data-rail="folded"] .crown-edges { --fx: .5px; --fy: .8px; --fr: 1.5deg; --tk: 2.4; }
[data-rail="folded"] .crown-edges .e-w { display: none; }
[data-rail="folded"] .crown-edges .e-n { display: inline; }
}
/* a phone's strip: the stack lies under the main's pill, an unfolded main's subs stand beside it over the bracket */
@media (max-width: 860px) {
#agents:has(.agent-row.is-main[data-fold]) { align-items: flex-start; }
.agent-row.is-main[data-fold] { margin-top: 0; margin-inline: 3px; }
.agent-row.is-main[data-fold="shut"] { margin-bottom: calc(var(--n) * 2px + 3px); }
.agent-row.is-main[data-fold="open"], .agent-row.is-sub { margin-bottom: 6px; }
.crown-fold { left: 5px; top: -8px; }
.crown-fold .crown-mark { width: 21px; }
#agents .agent-avatar .crown-mark { left: 5px; top: -7px; width: 21px; }
.crown-fold::after { content: ""; position: absolute; inset: -4px -6px -8px -4px; }
.crown-edges { top: calc(100% - 10px); height: calc(var(--n) * 2px + 10px); }
.crown-edges { --fx: .6px; --fy: .5px; --fr: .7deg; --tk: 1.6; }
.crown-edges i { top: calc(var(--i) * 2px - 3px); left: calc(12px + var(--i) * 2.5px); right: calc(12px + var(--i) * 2.5px); }
.crown-edges i.is-knock { height: 17px; }
.crown-edges .e-w { display: none; }
.crown-edges .e-n { display: inline; }
.crown-edges path { stroke-width: .9; }
}
/* ---- a session at work (the sidebar, server-rendered: views/sidebar.mjs avatar working) ----
Its drawing fills itself in, scribble-like: a faint trace of it stays, and its strokes draw themselves over it,
hold a moment, fade, and begin again. Only the strokes' dash and opacity move. No ring stands at the right for it. */
#agents .agent-avatar.is-drawing .mark-trace { opacity: .25; }
#agents .agent-avatar.is-drawing .mark-live path { stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-width: 2.6; animation: mark-fill 2600ms cubic-bezier(.45, .05, .4, 1) infinite; }
#agents .agent-avatar.is-drawing .mark-live path:nth-child(2n) { animation-delay: 160ms; }
#agents .agent-avatar.is-drawing .mark-live path:nth-child(3n) { animation-delay: 320ms; }
@keyframes mark-fill { 0% { stroke-dashoffset: 100; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
#agents .agent-avatar.is-drawing .mark-live path { animation: none; stroke-dashoffset: 0; }
}
#agents .agent-text .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
} }
/* /css/back.css */
@supports (--sheet: back) { @media all {
/* What just happened, and "Back" (js/back.js): one note at the top left of the view, in ink,
tilted a little like a slip of paper laid on the page. It names what happened to the question
that just left and takes it back; a scribbled line under it runs out. It never lies over the
answers, which are at the right. */
.says-host { position: absolute; z-index: 30; pointer-events: none; }
.says-page { position: fixed; }
.says {
position: relative; pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); width: max-content; max-width: min(430px, calc(100vw - 28px));
padding: 9px 10px 13px 14px; border-radius: 10px 13px 9px 12px; background: var(--fg); color: var(--bg);
box-shadow: 0 2px 3px rgb(20 30 25 / .12), 0 12px 26px -10px rgb(20 30 25 / .5);
rotate: -.7deg; transform-origin: 100% 50%; animation: says-in 260ms cubic-bezier(.25, 1.4, .5, 1);
}
@keyframes says-in { from { opacity: 0; translate: -10px -8px; } }
.says-words { min-width: 0; display: grid; gap: 2px; }
.says-words b { font: 800 1.02rem/1.15 var(--display); letter-spacing: -.005em; overflow-wrap: anywhere; }
.says-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-sm)/1.3 var(--font); opacity: .8; }
.says-back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font: 700 var(--t-sm)/1 var(--font); transition: scale 100ms ease-out; }
.says-back:hover { filter: brightness(.94); }
.says-back:active { scale: .96; }
.says-back:disabled { opacity: .5; }
.says-back:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
.back-arrow { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.says-back kbd { min-width: 20px; padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 10%, transparent); font: 500 .7rem/1 var(--mono); text-align: center; }
@media (pointer: coarse) { .says-back kbd { display: none; } .says-back { min-height: 44px; padding-inline: 12px 14px; } }
/* The time left runs out along a scribbled line. */
.back-line { position: absolute; left: 14px; bottom: 4px; width: calc(100% - 28px); height: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .6; overflow: visible; pointer-events: none; }
.back-line path { vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: back-time var(--back-ms, 4s) linear forwards; }
.says[data-paused] .back-line path { animation-play-state: paused; }
@keyframes back-time { to { stroke-dashoffset: 100; } }
/* The line is the clock, not an ornament: it keeps running where motion is reduced. */
@media (prefers-reduced-motion: reduce) {
.says.says { animation: none !important; }
.says.says .back-line path { animation-duration: var(--back-ms, 4s) !important; }
}
/* In the Focus window: its own top left corner, over the tab of the top bar for these few seconds. */
.focus-says { top: 10px; left: 12px; }
.focus-says .says { max-width: min(430px, calc(100cqi - 24px)); }
/* ---- a question leaves: one calm motion that shows where it goes ---- */
/* In a list the row that left stays for a moment as a ghost in its old place: an answered one
slides off to the side, one that was put off (Later, asked to explain) sinks towards the
"Later" group at the end. The rows below move up once it is on its way (inbox.js). */
.inbox-groups { position: relative; }
.inbox-row.is-leaving { position: absolute; z-index: 0; margin: 0; pointer-events: none; animation: row-answered 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.inbox-row.is-leaving[data-leave="later"] { animation-name: row-later; }
@keyframes row-answered { to { opacity: 0; translate: 72px -6px; rotate: 1.2deg; } }
@keyframes row-later { to { opacity: 0; translate: 0 64px; scale: .96; } }
/* In the Focus window the same two motions, a little longer than the window's own steps. */
.focus-card[data-out="sent"] { animation: focus-leave-answered 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.focus-card[data-out="later"] { animation: focus-leave-later 300ms cubic-bezier(.4, 0, .7, .2) forwards; }
.focus-card[data-in="sent"], .focus-card[data-in="later"] { animation-delay: 170ms; animation-fill-mode: backwards; }
@keyframes focus-leave-answered { to { opacity: 0; transform: translate3d(0, -64px, 0) rotate(-.6deg); } }
@keyframes focus-leave-later { to { opacity: 0; transform: translate3d(0, 88px, 0) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
.inbox-row.is-leaving.is-leaving { animation: row-fade 160ms linear forwards !important; }
.focus .focus-card[data-out="sent"], .focus .focus-card[data-out="later"] { animation: row-fade 160ms linear forwards !important; }
}
@keyframes row-fade { to { opacity: 0; } }
/* ---- Answered: the group at the very end of the inbox ---- */
/* Folded to its heading until it is opened. Then every answer is a slim row: what was asked, what
was said, who asked and when, and "Take back". Solid lines: these are decided. */
.inbox-group-answered { gap: var(--s-2); }
.inbox-group-answered .inbox-sender { color: var(--muted); }
.inbox-group-answered .inbox-sender::after { content: none; }
.inbox-answered-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
.inbox-answered-toggle::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-answered-toggle b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-answered-toggle:hover { color: var(--fg); }
.inbox-group-answered .inbox-avatar { background: none; color: var(--muted); outline: 1px solid var(--line-strong); outline-offset: -1px; }
.inbox-done { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); scroll-margin: 72px 0 28px; }
.inbox-done:focus { outline: none; }
.inbox-done-mark { display: grid; place-items: center; color: var(--muted); }
.inbox-done-mark .sketch { width: 26px; height: 26px; stroke-width: 1.7; }
.inbox-done-text { min-width: 0; display: grid; gap: 2px; }
.inbox-done-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.02rem/1.25 var(--display); letter-spacing: -.005em; }
.inbox-done-sub { display: flex; align-items: center; gap: var(--s-3); min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--t-sm); color: var(--muted); }
.inbox-done-sub b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--accent); }
.inbox-done-who { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.inbox-done-who .doodle { width: 16px; height: 16px; }
.inbox-done-ago { flex: none; font-size: var(--t-xs); color: var(--faint); }
.inbox-done-closed { flex: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.inbox-takeback { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.inbox-takeback:hover { border-color: var(--fg); }
.inbox-takeback:disabled { opacity: .5; }
@container rows (max-width: 520px) {
.inbox-done { grid-template-columns: 26px minmax(0, 1fr); }
.inbox-takeback { grid-column: 2; justify-self: start; }
.inbox-done-who { display: none; }
}
/* A phone has no free corner: while a note is up, the view gives it a strip at its lower edge
(above the tab bar; the composer moves up with the view), so the note lies over nothing. */
@media (max-width: 860px) {
body[data-says] main { margin-bottom: 72px; }
.says-page .says { rotate: 0deg; max-width: calc(100vw - 16px); padding-block: 7px 11px; }
.focus-says .says { max-width: calc(100cqi - 120px); }
}
/* For a moment a new note lets taps through, so a second tap meant for the next answer cannot hit "Back". */
.says[data-fresh] { pointer-events: none; }
/* What went wrong with an answer on a row: on the row's lower edge, in full, never cut by the text's fixed lines. */
.inbox-row-error { position: absolute; z-index: 2; left: 76px; bottom: 6px; max-width: calc(100% - 96px); padding: 3px 9px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--deny) 40%, var(--surface)); font-weight: 600; line-height: 1.3; }
.inbox-row-error[hidden] { display: none; }
} }
/* /css/beside.css */
@supports (--sheet: beside) { @media all {
/* A session's title on a wide window, and the view of sessions laid together (js/beside.js).
One session is one stream (js/chat.js): its questions stand in its conversation. Here is only the
head of its page on a wide window: a large mark, the name, a line with what it is at.
Sessions laid together: one list of the questions of all of them (js/beside.js mounts it) in a wide
column, their conversations narrow beside it, one above the other; below 1200px that list stands
above the conversations. */
.pane-now { display: none; }
@media (min-width: 1200px) {
body { --beside-col: 50.5rem; --talk-w: clamp(340px, 30vw, 440px); }
/* ---- one session: the title is a head of its own: mark, name, a line; the modes at its right end ---- */
body:not([data-pair]) .pane-title {
display: grid; grid-template-rows: auto auto; align-items: center; gap: 0;
min-height: 0; padding: 0;
}
body:not([data-pair]) .pane-who {
grid-column: 1 / -1; grid-row: 1; gap: var(--s-4);
margin: var(--s-6) max(var(--gutter), calc((100% - var(--beside-col)) / 2 + var(--gutter))) 0;
}
body:not([data-pair]) .pane-who .agent-avatar { width: 56px; height: 56px; border-radius: 16px; }
body:not([data-pair]) .pane-who .crown-toggle { left: 12px; top: -17px; }
body:not([data-pair]) .pane-who .crown-toggle .crown-mark { width: 26px; }
body:not([data-pair]) .pane-title h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.025em; }
/* Under the name: what the session is at, its model and machine. */
body:not([data-pair]) .pane-now {
grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); min-height: 1.5em;
margin: -14px max(var(--gutter), calc((100% - var(--beside-col)) / 2 + var(--gutter))) var(--s-3);
padding-left: calc(56px + var(--s-4)); color: var(--muted); font-size: var(--t-md);
}
.pane-now .caps { color: var(--faint); font-size: .66rem; white-space: nowrap; }
.pane-now span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name's column, then the filters, then the two modes, on the title's lower line. (The longer
selectors outweigh the lines in app.css that once took the old split back.) */
body:not([data-pair]):not([data-scope="all"]) .pane-title { grid-template-columns: minmax(0, 1fr) auto auto; }
/* (The name's box reaches under them and is positioned: they stand above it, so they can be pressed.) */
body:not([data-pair]):not([data-scope="all"]) :is(.filters, .modes) { position: relative; z-index: 1; }
body:not([data-pair]):not([data-scope="all"]) .filters { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: end; margin: 0 var(--s-3) 10px 0; }
body:not([data-pair]):not([data-scope="all"]) .modes { grid-column: 3; grid-row: 1 / -1; align-self: end; justify-self: end; margin: 0 var(--s-4) 6px 0; }
/* ---- sessions laid together: one wide column with the questions of all of them, the conversations
narrow beside it, one above the other, each with its own name and composer ---- */
body[data-pair]:not([data-page]):not([data-scope="all"]) #session { display: grid; grid-template-columns: minmax(0, 1fr) var(--talk-w); grid-template-rows: auto minmax(0, 1fr); }
body[data-pair] .pane-title { grid-column: 1 / -1; }
body[data-pair][data-view="chat"] .group-questions { grid-column: 1; grid-row: 2; }
body[data-pair] #chat { grid-column: 2; grid-row: 2; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); }
body[data-pair] #scribble { grid-column: 1 / -1; grid-row: 2; }
body[data-pair] #chat .chat-pane { min-width: 0 !important; --gutter: var(--s-4) !important; }
body[data-pair] #chat .chat-pane + .chat-pane { border-left: 0; border-top: 1px solid var(--line-strong); }
body[data-pair] #chat .log-inner { padding-block: var(--s-4) var(--s-4); }
body[data-pair] #chat .msg { margin-top: var(--s-5); }
body[data-pair] #chat .hint { display: none; }
}
/* The card a reference in a conversation pointed at, for a moment. */
.group-questions .inbox-row.is-pointed { outline: 3px solid var(--fg); outline-offset: 3px; }
/* ---- sessions laid together, at every width: the combined list of their questions ---- */
.group-questions { display: none; }
body[data-pair][data-view="chat"]:not([data-page]) .group-questions {
display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: var(--s-6) var(--gutter) var(--s-10); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
body[data-pair] #filter-questions { display: none; }
body[data-pair][data-filter="questions"] .log { visibility: visible; }
.group-list { max-width: 50.5rem; margin-inline: auto; }
.group-list .inbox-title h2 { display: none; }
.group-list .inbox-head { margin-bottom: var(--s-4); }
.group-list .inbox-empty { margin-top: var(--s-2); }
.group-questions .rich { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.group-questions .rich > * + * { margin-top: .8em; }
.group-questions .rich p { white-space: pre-wrap; }
.group-questions .rich ul { padding-left: 1.35em; }
.group-questions .rich a { color: var(--accent); text-underline-offset: 3px; }
.group-questions .rich :not(pre) > code { font: .86em/1.4 var(--mono); padding: .12em .4em; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); }
.group-questions .rich pre { margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font: .84rem/1.6 var(--mono); }
/* The two round buttons (memo, Scratchpad) stand at the top right of a session: the joined title's
controls end before them. */
@media (min-width: 861px) {
body[data-pair]:not([data-scope="all"]):not([data-page]) .pane-title { padding-right: 108px; }
}
/* Narrow, with nothing open: the list takes no room. */
@media (max-width: 1199px) {
body[data-pair][data-view="chat"]:not([data-page]) .group-questions { flex: none; max-height: min(46dvh, 480px); padding: var(--s-4) var(--gutter) var(--s-5); border-bottom: 1px solid var(--line-strong); }
body[data-pair][data-view="chat"]:not([data-page]) .group-questions:not(:has(.inbox-row, .inbox-pile)) { display: none; }
}
/* Wide: the first card of sessions laid together stands on the 80px line, like a single session's first line
(the band ends at 64px; the list's empty head keeps its 16px below it, so the column needs no room of its own). */
@media (min-width: 861px) {
body[data-pair][data-view="chat"]:not([data-page]) .group-questions { padding-top: 0; }
}
/* ---- an open question inside the conversation: a small reference to its card in the column ----
Only its title is left, on one quiet line in the question's colour; a click brings the card into
view beside (js/beside.js). */
body[data-pair] #chat .log .ask-open { container: none; margin-block: var(--s-4) 0; }
body[data-pair] #chat .log .ask-open .inbox-row {
min-height: 0; display: block; padding: 0; border-radius: var(--r-sm); background: none; box-shadow: none; outline: 0; cursor: pointer;
}
body[data-pair] #chat .log .ask-open .inbox-row > :not(.inbox-content),
body[data-pair] #chat .log .ask-open .inbox-content > :not(.inbox-text),
body[data-pair] #chat .log .ask-open .inbox-text > :not(.inbox-question) { display: none; }
body[data-pair] #chat .log .ask-open .inbox-content { display: block; padding: 0; overflow: visible; }
body[data-pair] #chat .log .ask-open .inbox-text { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; padding: 6px 10px 6px 8px; border-radius: var(--r-sm); border-left: 3px solid var(--tone-pen); background: var(--card-bg); }
body[data-pair] #chat .log .ask-open .inbox-text::before { content: "Question"; flex: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--tone-pen); }
body[data-pair] #chat .log .ask-open .inbox-text::after { content: "←"; flex: none; margin-left: auto; color: var(--tone-pen); }
body[data-pair] #chat .log .ask-open .inbox-question { display: block; font: 600 var(--t-sm)/1.35 var(--font); letter-spacing: 0; text-wrap: wrap; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1199px) { body[data-pair] #chat .log .ask-open .inbox-text::after { content: "↑"; } }
@media (any-hover: hover) { body[data-pair] #chat .log .ask-open .inbox-text:hover { background: var(--tone-wash); } }
/* ---- sessions laid together on a phone: the list is one line above the conversation, or the whole view ---- */
.group-bar { display: none; }
@media (max-width: 860px) {
body[data-pair][data-view="chat"]:not([data-page]) .group-bar:not([hidden]) {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 0 var(--gutter);
border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 600 var(--t-sm)/1.2 var(--font); text-align: left;
}
.group-bar b { flex: none; padding: 6px 12px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-weight: 600; }
body[data-pair][data-view="chat"]:not([data-page]) .group-questions { display: none; }
body[data-pair][data-joined-list][data-view="chat"]:not([data-page]) .group-questions { display: block; flex: 1; max-height: none; border-bottom: 0; }
body[data-pair][data-joined-list][data-view="chat"]:not([data-page]) #chat { display: none; }
}
/* ---- sessions laid together, wide window: the edge that drags the conversations' column, and its fold ----
(js/beside.js; width and fold are kept per browser). Folded, the column is a strip at the right edge. */
.talk-edge, .talk-fold, .talk-strip { display: none; }
@media (min-width: 1200px) {
body[data-pair][data-view="chat"]:not([data-page]):not([data-scope="all"]) #session { position: relative; }
body[data-pair][data-view="chat"]:not([data-page]):not([data-scope="all"]) .talk-edge {
display: block; position: absolute; z-index: 5; grid-column: 2; grid-row: 2; top: 0; bottom: 0; left: -6px; width: 12px;
cursor: col-resize; touch-action: none;
}
.talk-edge::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background 120ms; }
.talk-edge:hover::after, body[data-talk-drag] .talk-edge::after { background: var(--line-strong); }
.talk-edge[data-will-fold]::after { background: var(--fg); }
body[data-talk-drag] { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body[data-talk-drag] #session :is(iframe, .rh-frame) { pointer-events: none; }
/* Fold: a small round button on the edge, at the top of the column. */
body[data-pair][data-view="chat"]:not([data-talk-folded]):not([data-page]):not([data-scope="all"]) .talk-fold {
display: grid; place-items: center; position: absolute; z-index: 6; grid-column: 2; grid-row: 2; top: 10px; left: -14px;
width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
background: var(--surface); color: var(--muted); font: 600 .9rem/1 var(--font); box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .08));
}
.talk-fold:hover { color: var(--fg); border-color: var(--fg); }
/* Folded: the column is a strip; the list of questions takes the rest. */
body[data-pair][data-talk-folded] { --talk-w: 44px !important; }
body[data-pair][data-talk-folded] #chat { display: none !important; }
body[data-pair][data-talk-folded] .talk-edge { display: none !important; }
body[data-pair][data-talk-folded][data-view="chat"]:not([data-page]):not([data-scope="all"]) .talk-strip {
display: flex; flex-direction: column; align-items: center; gap: var(--s-3); grid-column: 2; grid-row: 2; min-height: 0;
padding: var(--s-3) 0; border: 0; border-left: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.talk-strip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 600 .9rem/1 var(--font); }
.talk-strip-words { writing-mode: vertical-rl; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.talk-strip:hover { color: var(--fg); background: var(--surface); }
}
} }
/* /css/cardclip.css */
@supports (--sheet: cardclip) { @media all {
/* Copying a decision into another session's conversation (js/cardclip.js). Clean, quiet controls. */
/* the copy button */
.cardclip-copy { flex: none; width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: background var(--d-fast), color var(--d-fast); }
.cardclip-copy:hover { background: var(--sunken); color: var(--fg); }
.cardclip-copy.is-done { color: var(--accent); }
.cardclip-copy .cardclip-ico { width: 17px; height: 17px; stroke-width: 1.8; rotate: none; }
/* in the Focus window: beside read-aloud and close, and also where those two are in the top bar */
.focus .focus-card-ends > .cardclip-copy, .focus[data-single] .focus-card[data-marks] .focus-card-ends > button.cardclip-copy { display: grid; width: 32px; height: 32px; border-radius: 50%; }
/* on a Desk row: beside the clock, under the pointer or the keyboard only */
.inbox-when > .cardclip-copy { width: 24px; height: 24px; margin: -4px 0; opacity: 0; color: inherit; transition: opacity 100ms ease-out, background var(--d-fast); }
.inbox-row:hover .inbox-when > .cardclip-copy, .inbox-row:focus-within .inbox-when > .cardclip-copy, .inbox-row.is-current .inbox-when > .cardclip-copy, .inbox-when > .cardclip-copy.is-done { opacity: 1; }
.inbox-when > .cardclip-copy .cardclip-ico { width: 15px; height: 15px; }
/* the quiet confirmation */
.cardclip-note { position: fixed; z-index: 2500; left: 50%; bottom: calc(124px + env(safe-area-inset-bottom)); translate: -50% 0; margin: 0; padding: 7px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 500 var(--t-sm)/1.3 var(--font); white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; }
.cardclip-note[hidden] { display: none; }
/* chips: above a composer, and in a message */
.cardclip-bar { flex: 0 0 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.cardclip-bar[hidden] { display: none; }
.cardclip-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 28px; padding: 0 4px 0 9px; border-radius: 8px; background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); text-decoration: none; }
.cardclip-chip b { flex: none; font-weight: 600; color: var(--muted); }
.cardclip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardclip-answer { flex: 0 1 auto; min-width: 3em; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 600; }
.cardclip-off { flex: none; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 400 16px/1 var(--font); cursor: pointer; }
.cardclip-off:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.cardclip-offer { display: inline-flex; align-items: center; height: 28px; padding: 0 3px 0 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.cardclip-paste { height: 28px; padding: 0 4px 0 10px; border: 0; background: none; color: inherit; font: 500 var(--t-xs)/1 var(--font); white-space: nowrap; cursor: pointer; }
.cardclip-offer:hover, .cardclip-offer:focus-within { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
/* in a message: a quiet line of linked chips */
.cardclip-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0 0 4px; }
.msg-user .cardclip-row { justify-content: flex-end; }
.cardclip-chip.is-link { padding-right: 9px; box-shadow: inset 0 0 0 1px var(--line); background: none; }
.cardclip-chip.is-link:hover { background: var(--sunken); }
.cardclip-chip.is-link:hover .cardclip-title { text-decoration: underline; text-underline-offset: 3px; }
/* quick send in the bar: the chips float above the field; the offer only while one writes there */
.quick .cardclip-bar { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; width: max-content; max-width: 100%; padding: 0; }
/* in a session the field hangs at the top of the page: the chips stand under it */
body:not([data-scope="all"]):not([data-page]) .quick .cardclip-bar, body:not([data-scope="all"]):not([data-page]) .quick[data-files] .cardclip-bar { bottom: auto; top: calc(100% + 8px); }
.quick[data-files] .cardclip-bar { bottom: calc(100% + 44px); }
.quick .cardclip-chip, .quick .cardclip-offer { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.quick:not(:focus-within) .cardclip-offer { display: none; }
/* on an answered question (Desk, pile "Answered"): at the end of its line, always there */
.inbox-done-sub > .cardclip-copy { width: 24px; height: 24px; margin: -5px 0; vertical-align: middle; }
.inbox-done-sub > .cardclip-copy .cardclip-ico { width: 15px; height: 15px; }
/* a finger has no hover: the button on a Desk row is always there, quietly */
@media (hover: none) { .inbox-when > .cardclip-copy { opacity: .75; } }
@media (max-width: 860px) { .cardclip-note { bottom: calc(176px + env(safe-area-inset-bottom)); } }
/* The copy icon, the number and the clock stand at the top right of a Desk row: the question keeps clear of them. */
.inbox-content:has(.inbox-when > .cardclip-copy) .inbox-question { padding-right: 82px; }
/* (a narrow row with a head puts them on the line of the head, above the question) */
@container rows (max-width: 560px) { .inbox-content:has(> .inbox-row-head:not(:empty)):has(.inbox-when > .cardclip-copy) .inbox-question { padding-right: 0; } }
/* Phone polish (docs/qa-phone-design.md): a finger needs 40px, in the card's corner as for its neighbours there. */
@container focus (max-width: 699.98px) {
.focus .focus-card-ends > .cardclip-copy, .focus[data-single] .focus-card[data-marks] .focus-card-ends > button.cardclip-copy { width: 40px; height: 40px; }
}
} }
/* /css/phone-desk.css */
@supports (--sheet: phone-desk) { @media all {
/* The Desk on a phone: calm cards (card Nr. 153, "Karten ohne Nebensachen"; the drawing: designs/phone-calm.html).
At phone width a question row shows only who asks, the title and the answer tiles. The copy button, the
clock, the Snooze corner, the text and the pictures are not on the row: a long press brings Snooze, Revise,
Whatever, What??, Shred and Copy up as a sheet (js/inbox.js, holdMenu), a tap on the title opens the card
with its text and pictures. Only in a list of questions (.inbox-groups: the Desk, a session's own list); a
question inside a conversation keeps its text. Wide screens keep the row of app.css. Loaded after app.css. */
@media (max-width: 860px) {
.inbox-groups .inbox-row {
min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 14px;
border-radius: 14px; box-shadow: none; background: var(--tone-wash);
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
transition: scale 120ms ease-out, box-shadow 120ms ease-out;
}
.inbox-groups .inbox-row > :not(.inbox-more) { grid-row: auto; grid-column: 1; }
/* the finger is down and holding: the card answers before the sheet comes */
.inbox-groups .inbox-row.is-held { scale: .985; box-shadow: 0 0 0 2px var(--tone-pen); }
/* what is read and chosen below the card (the unfolded options) can be selected as before */
/* not on the row: copy and clock, the Snooze corner, the text, the pictures and what the card carries */
.inbox-groups .inbox-row :is(.inbox-tabs, .inbox-when, .inbox-body, .inbox-pics, .inbox-thumb, .inbox-carries, .inbox-sep, .inbox-who) { display: none; }
/* every card says who asks, so a run needs no tab above it and its cards stand apart */
.inbox-groups .inbox-run-tab { display: none; }
.inbox-groups .inbox-group[data-sender] { gap: 10px; }
.inbox-groups { gap: 10px; }
/* two folded piles in a row stay apart: app.css pulls the second one up by more than this list's gap */
.inbox-groups > .inbox-pile + .inbox-pile { margin-top: -6px; }
.inbox-groups .inbox-group[data-sender] > .inbox-row { border-radius: 14px; box-shadow: none; }
.inbox-groups .inbox-group[data-sender] > .inbox-row.is-held { box-shadow: 0 0 0 2px var(--tone-pen); }
/* one line: who (drawing and name), then the knock; under it the title */
.inbox-groups .inbox-content { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; overflow: visible; }
.inbox-groups .inbox-content:has(> .inbox-row-head:empty) { padding-top: 0; }
.inbox-groups .inbox-byline, .inbox-groups .inbox-row[data-from] .inbox-byline { position: static; order: -2; flex: 0 1 auto; min-width: 0; min-height: 20px; margin: 0; padding: 0; flex-wrap: nowrap; font-size: var(--t-sm); }
.inbox-groups .inbox-row[data-from] .inbox-row-head:not(:empty) ~ .inbox-byline { min-height: 20px; margin: 0; }
.inbox-groups .inbox-byline:not(:has(.inbox-from, .inbox-whenever)) { display: none; }
.inbox-groups .inbox-row[data-from] .inbox-content .inbox-byline .inbox-from { display: inline-flex; gap: 7px; color: var(--tone-pen); }
.inbox-groups .inbox-byline .inbox-whenever { order: 1; }
.inbox-groups .inbox-byline .inbox-from-mark { width: 20px; height: 20px; }
.inbox-groups .inbox-row-head { order: -1; flex: none; height: auto; min-height: 0; margin: 0; padding: 0; align-items: center; }
.inbox-groups .inbox-tab { padding: 4px 7px 3px; border-radius: 6px; font: 700 .66rem/1 var(--font); letter-spacing: .07em; }
.inbox-groups .inbox-tab .sketch { width: 13px; height: 13px; margin: -2px 0; }
.inbox-groups .inbox-text, .inbox-groups .inbox-text.has-sender { flex: 0 0 100%; align-content: center; min-height: 40px; margin: -2px 0; padding: 0; }
.inbox-groups .inbox-row-head:not(:empty) + .inbox-text { margin-top: -2px; }
.inbox-groups .inbox-question { font: 700 1.3rem/1.18 var(--display); letter-spacing: -.015em; -webkit-line-clamp: 3; overflow-wrap: break-word; }
/* the answers: tiles in the session's colour, at finger size */
.inbox-groups .inbox-actions { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding: 0; }
.inbox-groups .inbox-answer { min-height: 58px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--tone-edge); }
.inbox-groups .inbox-answer.is-lead, .inbox-groups .inbox-row[data-from]:is([data-urgency="high"], [data-urgency="critical"]) .inbox-answer.is-lead { background: var(--tone-pen); box-shadow: none; }
.inbox-groups .inbox-row-error { margin: 8px 0 0; }
/* how to get at the rest, said once under the Desk's open questions */
#inbox .inbox-groups > .inbox-group[data-sender]:not(:has(~ .inbox-group[data-sender]))::after { content: "Hold a card: Snooze, Revise, Whatever, What??, Shred, Copy. Tap its title: text and pictures."; margin: 4px 12px 0; color: var(--faint); font: 500 var(--t-sm)/1.4 var(--font); text-align: center; text-wrap: balance; }
}
/* ---- the sheet a long press brings up ---- */
dialog.rowmenu {
--ink: var(--tone-pen);
/* opened with show(), not in the top layer (sheet_controller.js): above the round buttons and the memo */
position: fixed; z-index: 2800; inset: auto 0 0 0; width: 100%; max-width: 480px; max-height: 82dvh; margin: 0 auto; padding: 0; border: 0;
border-radius: 20px 20px 0 0; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
animation: rowmenu-up 240ms var(--ease-out, ease-out) both;
}
/* No veil over the page: a line and a shadow set the sheet off; Escape or a tap beside it closes. */
dialog.rowmenu { box-shadow: 0 0 0 1px var(--line-strong), 0 -12px 40px -12px rgb(20 30 25 / .35); }
dialog.rowmenu::backdrop { background: transparent; }
@keyframes rowmenu-up { from { translate: 0 100%; } }
@keyframes rowmenu-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.rowmenu, dialog.rowmenu::backdrop { animation: none; } }
.rowmenu-in { display: grid; padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); }
.rowmenu-in::before { content: ""; justify-self: center; width: 38px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--line-strong); }
.rowmenu-in h3 { overflow-wrap: anywhere; margin: 0 8px 8px; font: 700 1.15rem/1.2 var(--display); letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rowmenu-in button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: 500 1rem/1.2 var(--font); text-align: left; touch-action: manipulation; }
.rowmenu-in button:active { background: var(--sunken); }
.rowmenu-in button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rowmenu-in button svg { flex: none; width: 22px; height: 22px; color: var(--ink); }
.rowmenu-in button.is-shred, .rowmenu-in button.is-shred svg { color: var(--deny); }
.rowmenu-in hr { width: auto; margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
/* ---- a new version of the app took over (js/app/pwa.mjs): one quiet line above the round buttons at the foot ---- */
.app-update {
position: fixed; z-index: 2700; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 6px 6px 6px 16px;
border-radius: 999px; background: var(--fg); color: var(--bg); font: 500 var(--t-sm)/1.3 var(--font); box-shadow: var(--shadow-md);
animation: rowmenu-up 240ms var(--ease-out, ease-out) both;
}
.app-update button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg); font: 600 var(--t-sm)/1 var(--font); }
} }
/* /css/piles.css */
@supports (--sheet: piles) { @media all {
/* The piles at the foot of a list of questions (js/piles.js), one per state: Later (snoozed), In the works (in
revision, or answered and being acted on) and Done (closed) as three small stacks of paper drawn with the pen, and
at the end of the row a small waste-paper basket (shredded, withdrawn). A click fans a stack (or the basket) out below,
as full-width sheets. The sections keep the names the keys and the tests know (.inbox-pile,
.inbox-pile-head, .inbox-pile-sheets, .inbox-pile-item, .inbox-done); what the older piles in app.css and
back.css say about those is undone here. */
.inbox-groups > .inbox-stacks { --gap: 22px; --bin: 46px; --w: min(124px, calc((100cqi - var(--inset, 0px) - 3 * var(--gap) - var(--bin)) / 3)); --shade: rgb(20 30 25 / .14); grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, var(--w)) var(--bin); grid-template-rows: auto auto; column-gap: var(--gap); justify-content: start; min-width: 0; margin-top: var(--s-8); }
:root[data-theme="dark"] .inbox-groups > .inbox-stacks { --shade: rgb(0 0 0 / .55); }
/* a phone: three stacks of 124px, the basket and the gaps are wider than the list, so the stacks share what is there
(--w above) and the basket stays small, instead of pushing the Desk sideways; the stamps are set smaller with them */
@container rows (max-width: 430px) {
.inbox-groups > .inbox-stacks { --gap: 10px; --bin: 38px; }
.inbox-stacks .inbox-stack .inbox-stamp { padding: 3px 5px 2px 6px; font-size: .62rem; letter-spacing: .08em; }
.inbox-stacks .inbox-stack[data-stack="works"] .inbox-stamp { padding-inline: 4px; font-size: .52rem; letter-spacing: .03em; }
.inbox-stacks .inbox-stack .tally-mark { height: 14px; }
}
.inbox-stacks > .inbox-stack { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; margin: 0; padding: 0; cursor: auto; }
.inbox-stack-title { align-self: end; display: grid; margin: 0; font: inherit; }
/* a stack: the paper, on its top sheet the count (strokes, or a number), the turning ring, and its name as a stamp */
.inbox-stacks .inbox-stack .inbox-stack-head { position: relative; flex: none; display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 6px; row-gap: 5px; width: 100%; min-height: 0; padding: 0 0 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: inherit; text-align: center; cursor: pointer; }
.inbox-stacks .inbox-stack .inbox-stack-head::after { content: none; }
.inbox-stacks .inbox-stack .inbox-stack-head:disabled { cursor: default; }
.inbox-stack-paper { grid-area: 1 / 1 / 2 / 3; justify-self: center; position: relative; display: block; width: 100%; transition: translate 140ms ease-out; }
.inbox-stack-paper > span:first-child { display: block; }
.inbox-stack-sheets { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 2.5px var(--shade)); }
.inbox-stack-sheets path { fill: var(--surface); stroke: var(--fg); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
/* the top sheet is 124 x 78 in a box of 136 x 90: its upper part carries the count, its lower part the stamp */
.inbox-stack-on { position: absolute; inset: 0 0 auto; box-sizing: border-box; aspect-ratio: 136 / 90; padding: 5% 0 25%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.inbox-stack-on .agent-ring { position: static; flex: none; width: 15px; height: 15px; color: var(--accent); }
.inbox-stack-num { font: 700 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--fg); }
.inbox-stacks .inbox-stack .tally { color: var(--fg); }
.inbox-stacks .inbox-stack .tally-mark { height: 17px; width: auto !important; stroke-width: 2.3; }
/* The name of a stack: a rubber stamp on its top sheet, below the count. Capitals in a double frame drawn a little out of
true, turned a few degrees (each stack its own tilt), in an ink of its own; the ink took unevenly (one small mask of
noise, rastered once). The inks are variables, so the palette can retune them. */
.inbox-stacks { --stamp-works: #5c4a8a; --stamp-later: #46607c; --stamp-memos: #8a5f0c; --stamp-done: #1b6a57; }
:root[data-theme="dark"] .inbox-stacks { --stamp-works: #b9a8e6; --stamp-later: #9fb6d0; --stamp-memos: #d9b35a; --stamp-done: #6fd0b5; }
.inbox-stack-word { position: absolute; z-index: 1; inset: 0 0 auto; box-sizing: border-box; aspect-ratio: 136 / 90; padding-bottom: 10.5%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transition: translate 140ms ease-out; }
.inbox-stamp { --ink: var(--fg); position: relative; display: block; padding: 4px 7px 3px 8px; border: 1.5px solid var(--ink); border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px; color: var(--ink); font: 800 .75rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; rotate: -4deg;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.32'/%3E%3C/filter%3E%3Crect width='96' height='40' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 96px 40px;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.32'/%3E%3C/filter%3E%3Crect width='96' height='40' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 96px 40px; }
.inbox-stamp::before { content: ""; position: absolute; inset: 1.5px; border: 1px solid var(--ink); border-radius: 2px 4px 3px 4px / 4px 2px 4px 3px; }
.inbox-stack[data-stack="later"] .inbox-stamp { --ink: var(--stamp-later); rotate: -5deg; }
.inbox-stack[data-stack="memos"] .inbox-stamp { --ink: var(--stamp-memos); rotate: 3.5deg; mask-position: -31px -9px; -webkit-mask-position: -31px -9px; }
.inbox-stack[data-stack="works"] .inbox-stamp { --ink: var(--stamp-works); rotate: 3deg; padding-inline: 5px; font-size: .66rem; letter-spacing: .05em; mask-position: -31px -9px; -webkit-mask-position: -31px -9px; }
.inbox-stack[data-stack="done"] .inbox-stamp { --ink: var(--stamp-done); rotate: -2.5deg; mask-position: -57px -21px; -webkit-mask-position: -57px -21px; }
/* the yellow paper is yellow in the dark too: its stamp keeps the dark ochre there */
:root[data-theme="dark"] .inbox-stack.inbox-group-memos .inbox-stamp { --ink: #7a530a; }
/* The server-rendered pages (server/views/stacks.mjs): a stack's name and count are ONE element on its top sheet,
.stack-stamp[data-stamp="later|works|done"] > .stack-stamp-word + .stack-stamp-num (a numbering stamp; it stands
instead of the strokes). Its look is css/stamps.css. Here is only a plain default for as long as that sheet is not
linked: the number large, the word small under it, no frame, in the middle of the sheet. (The top sheet is
136 x 90 of the stack's width: the box below is that sheet.) */
.stack-stamp { position: absolute; z-index: 1; inset: 0 0 auto; aspect-ratio: 136 / 90; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 5px; color: var(--fg); pointer-events: none; transition: translate 140ms ease-out; }
.stack-stamp-num { font: 700 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.stack-stamp-word { font: 700 .62rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.inbox-stack.is-empty .stack-stamp { opacity: .5; }
.inbox-stack.is-open .stack-stamp { translate: 0 -4px; }
/* the ring of a session at work stands in the sheet's upper right corner, clear of the stamp */
.stack-ring { position: absolute; z-index: 1; top: 0; right: 0; margin: 9% 9% 0 0; display: block; line-height: 0; }
.stack-ring .agent-ring { position: static; display: block; width: 14px; height: 14px; color: var(--accent); }
@media (any-hover: hover) { .inbox-stack-head:not(:disabled):hover .stack-stamp { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .stack-stamp { transition: none; } }
@container rows (max-width: 430px) { .stack-stamp { gap: 4px; } .stack-stamp-num { font-size: 1.05rem; } .stack-stamp-word { font-size: .54rem; letter-spacing: .06em; } }
/* "N more" as a link (the server-rendered pages): its words stand in the middle of the sheet, like the button's */
.inbox-stacks .inbox-stack a.inbox-stack-more { display: flex; align-items: center; text-decoration: none; }
/* The search over a fanned stack (server/views/stacks.mjs): one quiet line, a magnifier drawn with the pen and a field
on a ruled line; the sheets below it stand in a frame (.stack-list) that the search fills. */
.inbox-stacks .stack-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }
.inbox-stacks .stack-search { margin: 0 0 3px; }
.inbox-stacks .stack-search label { display: flex; align-items: center; gap: 8px; max-width: 360px; padding: 0 2px 0 4px; border-bottom: 1.3px solid color-mix(in srgb, var(--fg) 40%, var(--surface)); color: var(--muted); }
.inbox-stacks .stack-search label:focus-within { border-bottom-color: var(--fg); color: var(--fg); }
.inbox-stacks .stack-search .sketch { flex: none; width: 17px; height: 17px; }
.inbox-stacks .stack-search input { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; background: none; color: var(--fg); font: 400 var(--t-sm)/1 var(--font); outline: 0; }
.inbox-stacks .stack-search input::placeholder { color: var(--faint); opacity: 1; }
.inbox-stacks .stack-search input::-webkit-search-cancel-button { cursor: pointer; }
.inbox-stacks .stack-search-none { margin: 4px 0 2px 6px; color: var(--muted); font: 400 var(--t-sm)/1.4 var(--font); }
@container rows (max-width: 600px) { .inbox-stacks .stack-search label { max-width: none; } .inbox-stacks .stack-search input { height: 40px; font-size: 16px; } }
/* the waste-paper basket (.inbox-bin): small, at the end of the row, its foot on the line the stacks stand on. Its name
is not shown (it is there for whoever reads the page aloud); its count is a small number at its foot. */
.inbox-bin .inbox-stack-word { clip-path: inset(50%); }
/* the basket is a pen drawing (sketch 'basket'): its line as heavy as the stacks' outline (1.7px at 46px of 24 units) */
.inbox-bin-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.inbox-stacks .inbox-bin .inbox-bin-drawing { stroke: var(--fg); stroke-width: .9; }
.inbox-stacks .inbox-bin.is-empty .inbox-bin-drawing { stroke: color-mix(in srgb, var(--fg) 38%, var(--surface)); }
.inbox-stacks .inbox-bin.is-open .inbox-bin-drawing { stroke-width: 1.3; }
/* its count: a small number written beside it, by hand, no badge */
.inbox-bin .inbox-stack-on { inset: auto -14px 2px auto; aspect-ratio: auto; padding: 0; }
.inbox-bin-count { display: block; rotate: -8deg; color: var(--fg); font: 700 .82rem/1 var(--display); font-variant-numeric: tabular-nums; }
/* the count as a number, for whoever reads the page aloud */
.inbox-stacks .inbox-stack .inbox-stack-head > b { order: 0; display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; letter-spacing: 0; text-transform: none; }
@media (any-hover: hover) { .inbox-stack-head:not(:disabled):hover :is(.inbox-stack-paper, .inbox-stack-word) { translate: 0 -2px; } }
/* an empty pile: one faint sheet, the same size, quieter */
.inbox-stack.is-empty .inbox-stack-sheets { filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--shade) 45%, transparent)); }
.inbox-stack.is-empty .inbox-stack-sheets path { fill: var(--surface); stroke: color-mix(in srgb, var(--fg) 38%, var(--surface)); stroke-width: 1.5; }
/* its stamp is faint, in the middle of the sheet: one still knows which stack it is */
.inbox-stack.is-empty .inbox-stack-word { padding-bottom: 0; align-items: center; opacity: .5; }
/* the open stack: its last sheet in heavy ink, lifted */
.inbox-stack.is-open .inbox-stack-sheets path { stroke-width: 2.6; }
.inbox-stack.is-open :is(.inbox-stack-paper, .inbox-stack-word) { translate: 0 -4px; }
/* the fan: the sheets of the open stack, across the whole list */
.inbox-stacks .inbox-stack > .inbox-pile-sheets { display: none; scroll-margin: 200px 0 24px; }
.inbox-stacks .inbox-stack.is-open > .inbox-pile-sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; box-sizing: border-box; width: calc(100cqi - var(--inset, 0px)); margin: 12px 0 0 calc(var(--at) * -1 * (var(--w) + var(--gap))); padding-right: 6px; }
.inbox-stacks .inbox-stack .inbox-pile-item { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 0 14px; border: 1.3px solid color-mix(in srgb, var(--fg) 55%, var(--surface)); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 2px var(--shade); transform-origin: 0 0; }
.inbox-stacks .inbox-pile-item:nth-child(odd) { rotate: -.22deg; }
.inbox-stacks .inbox-pile-item:nth-child(even) { rotate: .18deg; translate: 6px 0; }
.inbox-stacks .inbox-stack .inbox-stack-more { min-height: 38px; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); text-align: left; cursor: pointer; }
.inbox-stacks .inbox-stack .inbox-stack-more:hover { color: var(--fg); border-color: var(--fg); }
/* a sheet's line: mark, title, the grey line, who, when, the way back */
.inbox-stacks .inbox-pile-item > .inbox-done { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none; }
.inbox-stacks .inbox-revising-open .sketch { flex: none; width: 17px; height: 17px; color: var(--muted); }
.inbox-stacks .inbox-done[data-later] .inbox-revising-open .sketch { color: var(--gold-pen); }
.inbox-stacks .inbox-revising-open .agent-ring { margin-left: -3px; }
.inbox-stack-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inbox-stacks .inbox-done .inbox-takeback { grid-column: auto; min-height: 28px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 var(--t-xs)/1 var(--font); text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.inbox-stacks .inbox-done .inbox-takeback:hover { color: var(--fg); }
.inbox-stacks .inbox-done .inbox-takeback:disabled { opacity: .5; }
/* a narrow list (the phone, a slim pane): the lines without the grey text */
@container rows (max-width: 600px) {
.inbox-stacks .inbox-stack .inbox-pile-item { padding: 0 10px; }
.inbox-stacks .inbox-revising-sent { display: none; }
.inbox-stacks .inbox-revising-open strong { flex: 1 1 auto; }
}
.group-questions .inbox-done.is-pointed { outline: 3px solid var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .inbox-stack-paper, .inbox-stack-word { transition: none; } }
/* On the Desk of a wide screen the cards stand right of a narrow column with the session's drawing (app.css,
.inbox-gutter): the stacks stand under the cards, their paper's edge on the cards' left edge, and the fan
is as wide as the cards. */
@media (min-width: 861px) {
#inbox .inbox-groups > .inbox-stacks { --inset: 46px; padding-left: var(--inset); }
#inbox .inbox-stacks .inbox-stack-title { margin-left: -5px; }
#inbox .inbox-stacks .inbox-stack.is-open > .inbox-pile-sheets { padding-right: 0; }
#inbox .inbox-stacks .inbox-pile-item:nth-child(even) { translate: 0 0; }
}
/* ---- The places as small stamped tabs (server/views/stacks.mjs, card Nr. 198: c) ----
One line of tabs under the cards (two rows on a phone); the open place's list stands below all tabs, as wide as
the cards. The sections give up their box (display: contents) so that tabs and the open list share one row of
flex items: the tabs first, the list after them (order). Only under .stack-tabs: the old client keeps its stacks. */
.inbox-groups > .inbox-stacks.stack-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s-6); }
.inbox-stacks.stack-tabs > .inbox-stack { display: contents; }
.inbox-stacks.stack-tabs .inbox-stack-title { display: block; margin: 0; }
.inbox-stacks.stack-tabs .inbox-stack .inbox-stack-head { display: inline-flex; align-items: center; width: auto; min-height: 36px; padding: 0 12px; border: 1.4px solid var(--fg); border-radius: 4px 7px 4px 6px / 6px 4px 7px 4px; background: var(--surface); box-shadow: 0 1px 2px var(--shade); rotate: -.6deg; transition: translate 140ms ease-out; }
.inbox-stacks.stack-tabs .inbox-stack:nth-child(even) .inbox-stack-head { rotate: .5deg; }
@media (any-hover: hover) { .inbox-stacks.stack-tabs .inbox-stack-head:not(:disabled):hover { translate: 0 -2px; } }
.inbox-stacks.stack-tabs .inbox-stack.is-open .inbox-stack-head { border-width: 2.2px; padding: 0 11px; translate: 0 -2px; }
.inbox-stacks.stack-tabs .inbox-stack.is-empty .inbox-stack-head { border-color: color-mix(in srgb, var(--fg) 30%, var(--surface)); box-shadow: none; }
.inbox-stacks.stack-tabs .inbox-stack.is-empty .stack-tab-stamp { opacity: .5; }
/* the open place's list: below every tab, as wide as the cards */
.inbox-stacks.stack-tabs .inbox-stack > .inbox-pile-sheets { display: none; }
.inbox-stacks.stack-tabs .inbox-stack.is-open > .inbox-pile-sheets { display: grid; order: 1; flex: 0 0 100%; grid-template-columns: minmax(0, 1fr); gap: 5px; box-sizing: border-box; width: 100%; margin: 6px 0 0; padding-right: 6px; }
#inbox .inbox-groups > .inbox-stacks.stack-tabs { padding-left: var(--inset, 0px); }
#inbox .inbox-stacks.stack-tabs .inbox-stack.is-open > .inbox-pile-sheets { padding-right: 0; }
@container rows (max-width: 430px) { .inbox-groups > .inbox-stacks.stack-tabs { gap: 8px; } }
/* the bin's small basket in its tab */
.stack-tab-bin { flex: none; display: block; width: 19px; line-height: 0; }
.stack-tab-bin .inbox-bin-drawing { width: 19px; height: auto; stroke: var(--fg); stroke-width: 1.5; }
/* The tabs straight (his proposal "Mach das Schiefe da weg"): no turn, square corners of one radius, the stamp's sign
and word upright. Switched on by the class .is-straight on .stack-tabs (server/views/stacks.mjs: STRAIGHT). */
.inbox-stacks.stack-tabs.is-straight .inbox-stack .inbox-stack-head { rotate: 0deg; border-radius: 6px; }
.inbox-stacks.stack-tabs.is-straight .stack-stamp.stack-tab-stamp[data-stamp], .inbox-stacks.stack-tabs.is-straight .stack-tab-stamp > * { rotate: 0deg; transform: none; }
} }
/* /css/stamps.css */
@supports (--sheet: stamps) { @media all {
/* The stamp on a stack's top sheet (card Nr. 188: the numbering stamp, in colour, two leading zeros; his notes since:
a sign drawn with the board's pen, the word back above it, the gear turning).
Markup (server/views/stacks.mjs), one element on the top sheet of Later, In the works and Done; the small bin has none:
Snooze
005
Line 1 the word (Snooze | Working | Done), set in spaced capitals. Line 2 the sign (three growing Z | a gear | a tick,
drawn here as a mask, by data-stamp) and the number: the stack's count behind "00", "Nr." before it is drawn here; one
per digit sets each wheel a little out of line, fixed by its place, as on a numbering stamp (as plain text the
digits stand in line). The gear turns while the stack holds something. The stamp carries the count, so the sheet
shows no other count; an empty stack (.is-empty) shows "000", faint.
It scales with the stack: --w is the stack's width (css/piles.css), 124px when nothing sets it. The inks are the
tokens --stamp-ink-later | -works | -done (css/tokens.css), light and dark. The uneven ink is one small picture of
noise used as a mask, rastered once; only the gear moves, on the compositor. Load after css/piles.css. */
.stack-stamp[data-stamp] { --u: calc(var(--w, 124px) / 124); --ink: var(--stamp-ink-later);
/* its place is the top sheet (as css/piles.css sets it): a box of 136 x 90 over the paper, the stamp in its middle */
position: absolute; z-index: 1; inset: 0 0 auto; aspect-ratio: 136 / 90; rotate: -3deg;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u));
color: var(--ink); white-space: nowrap; pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='96' height='40' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 71px 43px;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='96' height='40' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 71px 43px; }
.stack-stamp[data-stamp="works"] { --ink: var(--stamp-ink-works); rotate: 2deg; -webkit-mask-position: -31px -9px; mask-position: -31px -9px; }
.stack-stamp[data-stamp="done"] { --ink: var(--stamp-ink-done); rotate: -1.5deg; -webkit-mask-position: -57px -21px; mask-position: -57px -21px; }
/* line 1, the word: small spaced capitals */
.stack-stamp[data-stamp] > .stack-stamp-word { display: block; padding-left: .28em; color: inherit; font: 700 calc(9 * var(--u))/1 var(--font); letter-spacing: .28em; text-transform: uppercase; }
/* line 2: the sign, then the number */
.stack-stamp[data-stamp] > .stack-stamp-line { display: flex; align-items: center; gap: calc(4 * var(--u)); }
/* the sign, cut into the die: Snooze the three growing Z (js/pen.js SNOOZE_Z), Working a gear, Done a tick, drawn with
the board's pen (wobbly line, round caps, uneven teeth; generated once, fixed) */
.stack-stamp[data-stamp] .stack-stamp-sign { flex: none; display: block; width: calc(19 * var(--u)); height: calc(19 * var(--u)); background-color: var(--ink);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='2.4' transform='rotate(-4 12 12)'%3E%3Cpath d='M2 12.2 L5.5 12 L2.1 16.5 L5.7 16.3'/%3E%3Cpath d='M8.4 10.7 L12.9 10.4 L8.5 16.5 L13.1 16.2'/%3E%3Cpath d='M16.2 8.8 L22 8.5 L16.3 16.5 L22.2 16.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='2.4' transform='rotate(-4 12 12)'%3E%3Cpath d='M2 12.2 L5.5 12 L2.1 16.5 L5.7 16.3'/%3E%3Cpath d='M8.4 10.7 L12.9 10.4 L8.5 16.5 L13.1 16.2'/%3E%3Cpath d='M16.2 8.8 L22 8.5 L16.3 16.5 L22.2 16.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.stack-stamp[data-stamp="works"] .stack-stamp-sign { width: calc(20 * var(--u)); height: calc(20 * var(--u)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.2 10.8 Q18.6 11.7 19.8 11.8 Q21.0 12.0 20.7 13.2 Q20.3 14.4 19.2 14.4 Q18.1 14.4 17.7 14.9 Q17.4 15.5 17.3 16.0 Q17.2 16.5 17.7 17.4 Q18.3 18.3 17.3 19.3 Q16.4 20.3 15.6 19.3 Q14.7 18.3 14.0 18.1 Q13.3 17.8 12.8 18.1 Q12.2 18.3 12.0 19.9 Q11.7 21.5 10.6 21.3 Q9.4 21.1 9.6 19.5 Q9.8 17.9 9.1 17.5 Q8.5 17.1 8.2 17.0 Q7.8 16.8 6.7 17.6 Q5.5 18.3 4.8 17.4 Q4.1 16.4 5.1 15.5 Q6.1 14.6 6.1 13.9 Q6.0 13.2 5.7 12.8 Q5.4 12.3 3.9 12.0 Q2.5 11.7 2.6 10.6 Q2.6 9.5 4.3 9.6 Q5.9 9.7 6.4 9.2 Q7.0 8.7 7.1 8.1 Q7.3 7.6 6.6 6.5 Q5.8 5.5 6.8 4.9 Q7.7 4.2 8.6 5.2 Q9.4 6.1 10.1 6.0 Q10.8 6.0 11.3 5.7 Q11.7 5.5 12.1 4.2 Q12.4 2.9 13.4 3.0 Q14.4 3.1 14.3 4.4 Q14.2 5.7 14.9 6.2 Q15.7 6.6 16.1 6.8 Q16.6 6.9 17.6 6.3 Q18.7 5.6 19.3 6.5 Q19.8 7.4 19.0 8.2 Q18.2 9.1 18.2 10.0 Q18.2 10.8 18.4 11.3' stroke-width='2.4'/%3E%3Cpath d='M14.4 12.8 Q12.2 14.4 11.2 14.0 Q10.1 13.7 9.9 12.3 Q9.6 10.9 10.7 10.2 Q11.8 9.5 12.8 10.1 Q13.9 10.6 14.2 11.7 Q14.4 12.8 13.3 13.6' stroke-width='1.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.2 10.8 Q18.6 11.7 19.8 11.8 Q21.0 12.0 20.7 13.2 Q20.3 14.4 19.2 14.4 Q18.1 14.4 17.7 14.9 Q17.4 15.5 17.3 16.0 Q17.2 16.5 17.7 17.4 Q18.3 18.3 17.3 19.3 Q16.4 20.3 15.6 19.3 Q14.7 18.3 14.0 18.1 Q13.3 17.8 12.8 18.1 Q12.2 18.3 12.0 19.9 Q11.7 21.5 10.6 21.3 Q9.4 21.1 9.6 19.5 Q9.8 17.9 9.1 17.5 Q8.5 17.1 8.2 17.0 Q7.8 16.8 6.7 17.6 Q5.5 18.3 4.8 17.4 Q4.1 16.4 5.1 15.5 Q6.1 14.6 6.1 13.9 Q6.0 13.2 5.7 12.8 Q5.4 12.3 3.9 12.0 Q2.5 11.7 2.6 10.6 Q2.6 9.5 4.3 9.6 Q5.9 9.7 6.4 9.2 Q7.0 8.7 7.1 8.1 Q7.3 7.6 6.6 6.5 Q5.8 5.5 6.8 4.9 Q7.7 4.2 8.6 5.2 Q9.4 6.1 10.1 6.0 Q10.8 6.0 11.3 5.7 Q11.7 5.5 12.1 4.2 Q12.4 2.9 13.4 3.0 Q14.4 3.1 14.3 4.4 Q14.2 5.7 14.9 6.2 Q15.7 6.6 16.1 6.8 Q16.6 6.9 17.6 6.3 Q18.7 5.6 19.3 6.5 Q19.8 7.4 19.0 8.2 Q18.2 9.1 18.2 10.0 Q18.2 10.8 18.4 11.3' stroke-width='2.4'/%3E%3Cpath d='M14.4 12.8 Q12.2 14.4 11.2 14.0 Q10.1 13.7 9.9 12.3 Q9.6 10.9 10.7 10.2 Q11.8 9.5 12.8 10.1 Q13.9 10.6 14.2 11.7 Q14.4 12.8 13.3 13.6' stroke-width='1.9'/%3E%3C/svg%3E"); }
.stack-stamp[data-stamp="done"] .stack-stamp-sign { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12.6 Q6.4 15.4 7.9 17.1 Q9.4 18.9 11.0 16.0 Q12.6 13.2 14.8 10.4 Q17.0 7.6 19.3 5.5 L21.6 3.4' stroke-width='2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12.6 Q6.4 15.4 7.9 17.1 Q9.4 18.9 11.0 16.0 Q12.6 13.2 14.8 10.4 Q17.0 7.6 19.3 5.5 L21.6 3.4' stroke-width='2.6'/%3E%3C/svg%3E"); }
/* the number: "Nr." and the wheels, heavy figures of one width */
.stack-stamp[data-stamp] .stack-stamp-num { display: flex; align-items: baseline; color: inherit; font: 700 calc(20 * var(--u))/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stack-stamp[data-stamp] .stack-stamp-num::before { content: "Nr."; margin-right: calc(4 * var(--u)); font: 700 calc(8.5 * var(--u))/1 var(--font); letter-spacing: .04em; }
.stack-stamp-num > i { display: block; margin-inline: calc(-.6 * var(--u)); font-style: normal; transform: scaleX(.86) rotate(-1deg); }
.stack-stamp-num > i:nth-child(6n + 2) { translate: 0 calc(.9 * var(--u)); rotate: 2.5deg; }
.stack-stamp-num > i:nth-child(6n + 3) { translate: 0 calc(-.8 * var(--u)); rotate: -1.5deg; }
.stack-stamp-num > i:nth-child(6n + 4) { translate: 0 calc(.6 * var(--u)); rotate: -3deg; }
.stack-stamp-num > i:nth-child(6n + 5) { translate: 0 calc(-1 * var(--u)); rotate: 2deg; }
.stack-stamp-num > i:nth-child(6n) { translate: 0 calc(.7 * var(--u)); rotate: -2deg; }
/* In the works: the gear turns while there is something on the stack (one turn in 7 s; transform only, so it stays on
the compositor; the ink's noise lies on the stamp around it and does not turn along). Still on an empty stack. */
@keyframes stack-stamp-turn { to { transform: rotate(1turn); } }
.inbox-stack:not(.is-empty) .stack-stamp[data-stamp="works"] .stack-stamp-sign { animation: stack-stamp-turn 7s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .stack-stamp[data-stamp="works"] .stack-stamp-sign { animation: none; } }
/* an empty stack: the stamp is there, faint (the lift of an open or hovered stack is css/piles.css) */
.inbox-stack.is-empty .stack-stamp[data-stamp] { opacity: .6; }
/* Done: stamped into the lower right corner of its sheet, smaller and turned, as one stamps a finished file
(his note on the live stacks: "das Erledigt dann doch in die Ecke stempeln"). */
.stack-stamp[data-stamp="done"] { --u: calc(var(--w, 124px) / 124 * .86); box-sizing: border-box; align-items: flex-end; justify-content: flex-end; padding: 0 8% 9% 0; transform-origin: 86% 84%; rotate: -9deg; }
.stack-stamp[data-stamp="done"] > .stack-stamp-word { padding-left: 0; margin-right: -.28em; }
/* In a small tab (server/views/stacks.mjs, card Nr. 198: c): the stamp lies in one line, sign, word and count, in its
ink; no "Nr.", no out-of-line wheels, no noise; the gear still turns while "Working" holds something. */
.stack-tabs .stack-stamp.stack-tab-stamp[data-stamp] { --u: .82; position: static; inset: auto; aspect-ratio: auto; rotate: 0deg; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 0; -webkit-mask: none; mask: none; }
.stack-tabs .stack-stamp[data-stamp="trash"] { --ink: var(--fg); }
.stack-tabs .stack-tab-stamp > .stack-stamp-word { padding-left: 0; margin-right: 0; font: 700 .72rem/1 var(--font); letter-spacing: .14em; }
.stack-tabs .stack-tab-stamp .stack-stamp-sign { width: 17px; height: 17px; }
.stack-tabs .stack-tab-stamp > .stack-stamp-num { font: 700 .82rem/1 var(--mono); }
.stack-tabs .stack-tab-stamp > .stack-stamp-num::before { content: none; }
} }
/* /css/logo.css */
@supports (--sheet: logo) { @media all {
/* The logo: a counter bell with two ring strokes, drawn in the pen of the session marks.
Bare on the page ground beside "Desk"; the bell in the text colour, the ring strokes in the accent.
Linked after app.css, whose older rules for the mark (a green square with a white pen) it replaces. */
.brand-mark { width: 28px; height: 28px; flex: none; overflow: visible; color: var(--fg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark-ring { stroke: var(--accent); }
/* Offline: the ring strokes turn red, as the square did. */
.brand:has(.conn[data-state="offline"]) .brand-mark-ring { stroke: var(--urg-high); }
/* A wide screen: the bell stands in the Desk pill in place of the small desk drawing. */
@media (min-width: 861px) {
html .topbar .desk-go .brand-mark { display: block; width: 22px; height: 22px; margin: 0; stroke-width: 1.9; }
html .topbar .desk-go > .sketch { display: none; }
}
} }
/* /css/links.css */
@supports (--sheet: links) { @media all {
/* Real links (js/link.js): what one navigates with is an , and looks exactly like the button it
was. Zero specificity (:where), so every rule written for the class still decides; this only takes the
browser's link looks away and gives back what a button has by itself. The focus ring is the page's own. */
:where(a[data-nav]) {
display: inline-block; color: inherit; text-decoration: none; text-align: center; cursor: pointer;
touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
/* A session in the sidebar is carried by a held finger (js/agents.js): no link preview comes up under it. */
a.agent-entry { -webkit-touch-callout: none; }
/* The state ring as a link (its walk has an address): what app.css says for button.agent-badge. */
a.agent-badge { border: 0; border-radius: 50%; background: none; font-family: inherit; cursor: pointer; transition: scale 140ms ease-out; }
a.agent-badge:hover, a.agent-badge:focus-visible { scale: 1.08; }
a.agent-badge:active { scale: .95; }
/* A button centres its words by itself; a link of a set height does it this way. */
a.memo-ledger, a.ledger-more { display: inline-flex; align-items: center; justify-content: center; }
/* The Agents page: the answers of a line keep their place now that the question before them is a link. */
.ledger-does > a ~ .ledger-ans:first-of-type { margin-left: 0; }
} }
/* /css/quicksend.css */
@supports (--sheet: quicksend) { @media all {
/* The memo (js/quicksend.js, js/memos.js): a yellow sticky note to a session. It floats over the page where
it was put, or lies on the Desk's paper. The controls are plain; the note itself is the one hand-made
thing: yellow paper, a ruled field, a dashed tear line that ends in the paper plane. Where the round button stands (bottom right beside the
Scratchpad's control; small at the top right in a session) is laid down in app.css together with
the pad's control: `.quick-open, .topbar .padlink-open`. */
/* ---- closed: the button is a yellow sticky note (who receives is in its tooltip and on the slip) ---- */
.topbar .quick-open { right: var(--s-4); width: 44px; height: 44px; border-radius: 50%; }
.memo-open { --sticky: #f7d64f; --sticky-ink: #4a3c08; }
:root[data-theme="dark"] .memo-open { --sticky: #e9c63f; }
.memo-sticky { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; rotate: -4deg; pointer-events: none; }
.memo-sticky .sticky-paper { fill: var(--sticky); }
.memo-sticky .sticky-fold { fill: color-mix(in srgb, var(--sticky) 62%, #fff); }
.memo-sticky .sticky-line { stroke: var(--sticky-ink); stroke-width: 1.4; }
:root[data-theme="dark"] .memo-sticky :is(.sticky-paper, .sticky-fold) { stroke: var(--sticky-ink); }
.memo-open[data-none] .memo-sticky { opacity: .55; }
/* while a note is out, it keeps its paper (the note must stay readable): a firm ring instead of a filled button */
.quick-open.memo-open[aria-expanded="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 2px var(--fg), var(--shadow-md); }
/* notes were put away: the button holds them and says how many; a click lists them (.memo-list) */
.memo-open[data-draft]::after { content: attr(data-count); position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--fg); color: var(--bg); font: 700 .68rem/1 var(--font); box-shadow: 0 0 0 2px var(--bg); }
.memo-list { position: fixed; z-index: 2650; display: grid; gap: 5px; width: max-content; min-width: 190px; max-width: min(300px, calc(100vw - 16px)); max-height: min(60vh, 420px); overflow-y: auto; padding: 4px; }
.memo-list[hidden] { display: none; }
.memo-list > button { display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 38px; padding: 8px 11px; border: 0; border-radius: 3px 3px 3px 9px / 3px 3px 3px 7px; background: #fbe886; color: #272008; font: 500 var(--t-sm)/1.3 var(--font); text-align: left; cursor: pointer; box-shadow: 0 1px 0 rgb(0 0 0 / .16), 0 6px 10px -7px rgb(0 0 0 / .45); }
:root[data-theme="dark"] .memo-list > button { background: #ecd462; }
.memo-list > button:nth-child(even) { rotate: .5deg; }
.memo-list > button:nth-child(odd) { rotate: -.4deg; }
.memo-list > button:is(:hover, :focus-visible) { outline: 2px solid var(--fg); outline-offset: 1px; }
.memo-list-note strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.memo-list-note small { flex: none; font-size: var(--t-xs); color: #6a5d24; }
.memo-list-new { align-items: center; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1.4px var(--fg), 0 6px 10px -7px rgb(0 0 0 / .45); font-weight: 600; }
.memo-list > .memo-list-new { background: var(--surface); color: var(--fg); }
.memo-list-new .sketch { flex: none; width: 17px; height: 17px; }
body:not([data-scope="all"]):not([data-page]) .memo-sticky { width: 23px; height: 23px; }
@media (max-width: 860px) { .memo-sticky { width: 23px; height: 23px; } }
/* ---- the note: a sheet of a yellow pad, drawn with the board's pen (card Nr. 192) ---- */
/* Yellow paper in both themes, written on with dark ink: the page's tokens are set anew inside it. The sheet is drawn
by three pictures (data URIs, painted once): --memo-sheet is the uneven pen outline with square corners, the flat
wash a touch off the line and one black pen line below, stretched over the slip (the pen keeps
its width); --memo-envelope the envelope the send button is (the crown is its seal), --memo-envelope-sealed
the same with the crown drawn in (kept for a later use). No ruled lines, no tear line, no rounded
corners, no shadow: it lies flat and sticks. */
.memo {
--paper: #f7de6c; --fg: #3b300d; --muted: #6a5d24; --faint: #94863f; --line-strong: #d9c35a; --line: #e6d373; --bg: #f7de6c; --surface: #fff6bf; --sunken: #f3dc6c;
--memo-sheet: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M2%202.6%20L100%201.8%20L99.6%20100.39999999999999%20L1.2%2099.19999999999999%20Z'%20fill%3D'%23f7de6c'%2F%3E%3Cpath%20d%3D'M0.7%201.1%20Q30%200.3%2062%200.9%20T99.4%200.7'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M99.1%200.2%20Q99.7%2030%2099.2%2060%20T99.4%2099'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M99.7%2098.6%20Q60%2099.3%2030%2098.39999999999999%20T0.4%2098.89999999999999'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M0.9%2099.19999999999999%20Q0.3%2060%200.8%2030%20T0.6%200.3'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
--memo-envelope: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.4%208%20Q16%2018.6%2027.6%2024.2%20Q40%2018%2052.4%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-env-body: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.6%2036.4%20Q16%2026%2024.4%2021.6%20M52.6%2036%20Q40%2026.4%2031.6%2021.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-env-flap: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2020'%3E%3Cpath%20d%3D'M3%201.2%20L52.8%20.8%20L28%2019.4%20Z'%20fill%3D'%23fbe9a8'%2F%3E%3Cpath%20d%3D'M3%201.2%20Q16%2012.6%2027.8%2019.2%20Q40%2012%2052.8%20.8'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-envelope-sealed: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.4%208%20Q16%2018.6%2027.6%2024.2%20Q40%2018%2052.4%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cg%20transform%3D'translate(15.6%2016.4)%20rotate(-6)%20scale(.95)'%3E%3Cpath%20d%3D'M5%2016.9%20L3.9%206.6%20L9.8%2011.6%20L14%203.8%20L18.5%2011.4%20L24.5%206.2%20L23.3%2017.1%20Z'%20fill%3D'%23f2b632'%2F%3E%3Cpath%20d%3D'M3.7%2016.1%20Q3.5%2010.4%202.5%205.5%20Q6.2%207.4%208.8%2010.7%20Q10.3%206.2%2013.1%202.7%20Q15.9%206.1%2017.4%2010.5%20Q20%207%2023.7%205.1%20Q23.6%2010.9%2022.2%2016.3%20Q13.2%2015.2%204.5%2015.9'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'2.5'%20cy%3D'4.6'%20r%3D'2.1'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'13'%20cy%3D'1.7'%20r%3D'2.3'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'23.7'%20cy%3D'4.2'%20r%3D'2.1'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
position: fixed; z-index: 2600; left: 0; top: 0; width: 340px; max-width: calc(100vw - 8px);
font: 400 var(--t-md)/1.4 var(--font); color: var(--fg); text-align: left;
}
:root[data-theme="dark"] .memo {
--memo-sheet: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M2%202.6%20L100%201.8%20L99.6%20100.39999999999999%20L1.2%2099.19999999999999%20Z'%20fill%3D'%23d4bb55'%2F%3E%3Cpath%20d%3D'M0.7%201.1%20Q30%200.3%2062%200.9%20T99.4%200.7'%20fill%3D'none'%20stroke%3D'%23141108'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M99.1%200.2%20Q99.7%2030%2099.2%2060%20T99.4%2099'%20fill%3D'none'%20stroke%3D'%23141108'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M99.7%2098.6%20Q60%2099.3%2030%2098.39999999999999%20T0.4%2098.89999999999999'%20fill%3D'none'%20stroke%3D'%23141108'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3Cpath%20d%3D'M0.9%2099.19999999999999%20Q0.3%2060%200.8%2030%20T0.6%200.3'%20fill%3D'none'%20stroke%3D'%23141108'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
--memo-envelope: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.4%208%20Q16%2018.6%2027.6%2024.2%20Q40%2018%2052.4%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-env-body: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.6%2036.4%20Q16%2026%2024.4%2021.6%20M52.6%2036%20Q40%2026.4%2031.6%2021.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-env-flap: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2020'%3E%3Cpath%20d%3D'M3%201.2%20L52.8%20.8%20L28%2019.4%20Z'%20fill%3D'%23fbe9a8'%2F%3E%3Cpath%20d%3D'M3%201.2%20Q16%2012.6%2027.8%2019.2%20Q40%2012%2052.8%20.8'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
--memo-envelope-sealed: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2056%2040'%3E%3Cpath%20d%3D'M3%207.4%20L52.6%206.6%20L53%2036.4%20L3.4%2037%20Z'%20fill%3D'%23fdf2c4'%2F%3E%3Cpath%20d%3D'M3%207.4%20Q28%206.4%2052.6%206.6%20Q53.4%2022%2053%2036.4%20Q28%2037.4%203.4%2037%20Q2.6%2022%203%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M3.4%208%20Q16%2018.6%2027.6%2024.2%20Q40%2018%2052.4%207.4'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cg%20transform%3D'translate(15.6%2016.4)%20rotate(-6)%20scale(.95)'%3E%3Cpath%20d%3D'M5%2016.9%20L3.9%206.6%20L9.8%2011.6%20L14%203.8%20L18.5%2011.4%20L24.5%206.2%20L23.3%2017.1%20Z'%20fill%3D'%23f2b632'%2F%3E%3Cpath%20d%3D'M3.7%2016.1%20Q3.5%2010.4%202.5%205.5%20Q6.2%207.4%208.8%2010.7%20Q10.3%206.2%2013.1%202.7%20Q15.9%206.1%2017.4%2010.5%20Q20%207%2023.7%205.1%20Q23.6%2010.9%2022.2%2016.3%20Q13.2%2015.2%204.5%2015.9'%20fill%3D'none'%20stroke%3D'%231d1a12'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'2.5'%20cy%3D'4.6'%20r%3D'2.1'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'13'%20cy%3D'1.7'%20r%3D'2.3'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3Ccircle%20cx%3D'23.7'%20cy%3D'4.2'%20r%3D'2.1'%20fill%3D'%23cf3a2b'%20stroke%3D'%231d1a12'%20stroke-width%3D'1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--fg: #2a210a; --paper: #d4bb55; --line-strong: #c4ad45; --line: #d6c052; --bg: #d4bb55; --sunken: #dcc24e; }
.memo[hidden] { display: none; }
.memo-slip { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 14px 14px; border-radius: 0; background: var(--memo-sheet) 0 0 / 100% 100% no-repeat; transform-origin: 100% 100%; }
.memo-slip.is-drop { box-shadow: 0 0 0 2px var(--accent); }
.memo[data-state="open"] .memo-slip { animation: memo-in var(--d-med) var(--ease-out) both; }
@keyframes memo-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
/* carried: lifted off the page; over the Desk's paper it says that it would lie there */
.memo.is-carried { z-index: 2700; }
.memo.is-carried .memo-slip { rotate: -1.5deg; animation: none; }
.memo.is-carried.over-paper .memo-slip { box-shadow: 0 0 0 2px var(--fg), 0 12px 16px -10px rgb(0 0 0 / .4); }
/* on the Desk's paper: part of the page, it scrolls with the paper and lies under whatever floats */
.memo.is-paper { position: absolute; z-index: 2; }
.memo.is-paper.is-carried { z-index: 3; }
.memo.is-paper .memo-head { cursor: grab; touch-action: none; }
.memo.is-paper .memo-slip { animation: none; }
/* the head: the binding band the note sticks by (drawn by .memo-slip). Nothing stands on it; the note is carried by it. */
.memo-head { height: 22px; margin: 0 -14px 4px; border-radius: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.memo.is-carried .memo-head { cursor: grabbing; }
/* the note is held by one strip of tape at the top centre (the look of the slips, slip.css), half over the edge.
The tape and the strip under it along the top are where the note is carried. */
.memo-head { position: relative; }
.memo-head::before { content: ""; position: absolute; left: 50%; top: -11px; width: 72px; height: 22px; translate: -50% 0; rotate: -6deg; background: color-mix(in srgb, #e6d27a 58%, transparent); box-shadow: 0 0 0 .5px rgb(0 0 0 / .07); clip-path: polygon(3% 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
:root[data-theme="dark"] .memo-head::before { background: color-mix(in srgb, #e6d27a 34%, transparent); }
.memo-bin { opacity: .75; }
.memo-slip:hover .memo-bin, .memo-bin:focus-visible { opacity: 1; }
/* chips above the field (cardclip.js puts its bar first in .memo-body) */
.memo-body { position: relative; min-width: 0; }
.memo-body .cardclip-bar { padding: 8px 0 2px; }
.memo-body .cardclip-chip { background: color-mix(in srgb, var(--fg) 9%, transparent); }
/* no ruled lines. No scrollbar: the note grows with its words (in steps of its 28px line); past its height it scrolls. */
.memo-field { display: block; width: 100%; height: 84px; min-height: 84px; margin: 0; padding: 0; border: 0; border-radius: 0; resize: none; background: none; font: 400 var(--t-md)/28px var(--font); color: var(--fg); overflow-y: auto; scrollbar-width: none; }
.memo-field::-webkit-scrollbar { display: none; }
.memo-field:focus-visible { outline: 0; }
.memo-field::placeholder { color: transparent; }
/* The attached files lie in the foot's row, beside the paperclip: bin, paperclip, the chips, room, the envelope.
(memo.mjs renders them before the foot; the grid puts both in one row, the chips over the foot's free middle.)
More than five fold into one chip: the paperclip and their number (a CSS counter); a click on it (memo_controller.js)
opens them as a list above the row, each with its ×. */
.memo-slip { grid-template-columns: minmax(0, 1fr); }
.memo-slip > .memo-head { grid-row: 1; }
.memo-slip > .memo-body { grid-row: 2; }
.memo-slip > .memo-foot, .memo-slip > .memo-files { grid-row: 3; grid-column: 1; }
.memo-bin { order: -1; }
.memo-files { --tools: 72px; z-index: 1; align-self: center; display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; margin: 0 64px 0 var(--tools); overflow: hidden; counter-reset: memo-files; }
.memo-files:empty { display: none; }
.memo-file { counter-increment: memo-files; flex: 0 1 auto; min-width: 46px; }
.memo-files:has(> .memo-file:nth-child(6)):not([data-open]) > .memo-file { position: absolute; width: 1px; opacity: 0; pointer-events: none; }
.memo-files:has(> .memo-file:nth-child(6))::after { content: counter(memo-files); flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 9px 0 26px; border-radius: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.8 7.4 L9.6 13.8 L8.6 16.4 L10.2 18.2 L12.8 17.4 L18.8 11.2 L19.6 7.8 L17.4 5.2 L14 5.6 L6.6 13.2 L5.2 17.2 L7.2 20.4 L11.2 20.6 L17.2 15' fill='none' stroke='%235a4c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 5px 50% / 18px 18px no-repeat, color-mix(in srgb, var(--fg) 9%, transparent); color: var(--fg); font: 700 var(--t-sm)/1 var(--font); cursor: pointer; }
.memo-files:has(> .memo-file:nth-child(6)) { cursor: pointer; }
.memo-files[data-open]:has(> .memo-file:nth-child(6)) { position: absolute; left: 14px; bottom: 54px; z-index: 3; display: grid; justify-items: start; gap: 4px; max-width: 260px; max-height: 50vh; margin: 0; padding: 8px; overflow: auto; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--fg); }
.memo-files[data-open] > .memo-file { max-width: 100%; }
/* two to five side by side: each only its drawing (the name is its tooltip; a click takes it off, as on every chip) */
.memo-files:has(> .memo-file:nth-child(2)):not([data-open]) > .memo-file { flex: none; min-width: 0; width: 30px; padding: 0; justify-content: center; }
.memo-files:has(> .memo-file:nth-child(2)):not([data-open]) > .memo-file :is(span, i) { display: none; }
.memo-file { display: inline-flex; align-items: center; gap: 5px; max-width: 120px; height: 28px; padding: 0 6px 0 7px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--fg) 9%, transparent); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); cursor: pointer; }
.memo-file:hover { background: color-mix(in srgb, var(--fg) 15%, transparent); }
.memo-file .sketch { flex: none; width: 17px; height: 17px; color: var(--muted); }
.memo-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-file i { flex: none; font: 400 16px/1 var(--font); color: var(--muted); }
/* the foot: paperclip, bin, then room (.memo-gap; .memo-tear in the old client, no longer drawn), then the envelope sealed with the crown (card Nr. 195) */
.memo-foot { display: flex; align-items: center; gap: 2px; margin: 6px -6px 0 -6px; }
.memo-tear { flex: 1; }
.memo-local { flex: none; margin-left: 6px; font-size: .68rem; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.memo-local[hidden] { display: none; }
.memo-tool { flex: none; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: none; color: var(--muted); cursor: pointer; }
.memo-tool:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.memo-tool .sketch { width: 17px; height: 17px; }
/* paperclip and bin lie together at the lower left, both large enough to hit (card Nr. 195) */
.memo-foot .memo-tool { width: 38px; height: 38px; }
.memo-foot .memo-tool .sketch { width: 23px; height: 23px; stroke-width: 1.8; }
/* the crown sends: no button of its own, the crown is where the note goes, a drawn arrow points at it; the crowned
session's name shows on hover (data-name, server/views/memo.mjs). Hollow while the desk has no crown. */
.memo-sends { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.memo-send { position: relative; flex: none; width: 58px; height: 44px; padding: 0; display: block; border: 0; border-radius: 0; background: var(--memo-envelope) center / 56px 40px no-repeat; color: var(--fg); rotate: -4deg; cursor: pointer; transition: rotate 140ms var(--ease-out), translate 140ms var(--ease-out); }
/* the crown is the envelope's seal, on the tip of its flap */
.memo-send .agent-avatar { position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; rotate: -6deg; }
.memo-send .crown-mark { position: absolute; left: 15px; top: 16px; width: 26px; height: auto; rotate: -6deg; --gold-pen: var(--fg); --crown-wash: #f2b632; --crown-jewel: #cf3a2b; }
.memo-send:not(:disabled):hover { rotate: 0deg; translate: 3px -2px; }
.memo-send:not(:disabled):active { translate: 1px 0; }
.memo-send:disabled { opacity: .5; cursor: default; }
.memo-send[data-name]::after { content: "to " attr(data-name); position: absolute; right: 0; bottom: calc(100% + 2px); padding: 3px 7px; background: var(--fg); color: var(--paper); font: 600 var(--t-xs)/1.2 var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms; }
.memo-send[data-name]:is(:hover, :focus-visible)::after { opacity: 1; }
.memo-send.is-none .crown-mark { --gold-pen: var(--muted); }
.memo-send.is-none .crown-wash { display: none; }
.memo-send.is-none .crown-jewel { fill: none; }
.memo-send:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.memo-slip[aria-busy] .memo-send { opacity: .6; }
/* ---- sent (after the hub took it): the envelope opens and takes the note, closes with the crown, swooshes off ----
t/lib/memo.js envelope() lays the envelope where the send button is and takes the note off when its flight ends;
aim() gives where it flies (--fly-x/--fly-y: the receiver's drawing in the sidebar). 1.2s, calm under reduced motion. */
.memo[data-state="sending"] { pointer-events: none; }
.memo[data-state="sending"] .memo-send { visibility: hidden; }
.memo[data-state="sending"]:has(> .memo-env) > .memo-slip { transform-origin: 50% 50%; animation: memo-into-env 1200ms var(--ease-in-out) both; }
@keyframes memo-into-env { 0%, 8% { transform: none; opacity: 1; } 44% { transform: translate(var(--env-x), var(--env-y)) scale(var(--env-s)); opacity: 1; } 48%, 100% { transform: translate(var(--env-x), var(--env-y)) scale(var(--env-s)); opacity: 0; } }
.memo-env { position: absolute; z-index: 2; pointer-events: none; rotate: -4deg; animation: memo-env-fly 1200ms both; }
.memo-env > i { position: absolute; display: block; }
.memo-env-body { inset: 0; background: var(--memo-env-body) center / 100% 100% no-repeat; }
/* the flap: hinged on the top edge, open it stands up behind, closed it lies down over the front */
.memo-env-flap { left: 0; right: 0; top: 7px; height: 25px; transform-origin: 50% 0; background: var(--memo-env-flap) center / 100% 100% no-repeat; animation: memo-env-flap 1200ms var(--ease-in-out) both; }
.memo-env-seal { left: 50%; top: 22px; width: 32px; translate: -50% -50%; display: grid; place-items: center; opacity: 0; animation: memo-env-seal 1200ms var(--ease-out) both; }
.memo-env-seal .agent-avatar { width: 28px; height: 28px; }
.memo-env-seal .crown-mark { position: static; width: 30px; height: auto; rotate: -6deg; --gold-pen: #1d1a12; --crown-wash: #f2b632; --crown-jewel: #cf3a2b; }
@keyframes memo-env-flap { 0% { transform: perspective(300px) rotateX(0); } 16%, 42% { transform: perspective(300px) rotateX(-170deg); } 54%, 100% { transform: perspective(300px) rotateX(0); } }
@keyframes memo-env-seal { 0%, 52% { opacity: 0; transform: scale(1.6); } 58% { opacity: 1; transform: scale(.92); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes memo-env-fly {
0%, 62% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .7, .6); }
80% { transform: translate(calc(var(--fly-x, 40px) * .45), calc(var(--fly-y, -40vh) * .45 - 60px)) rotate(-8deg) scale(.8); opacity: 1; animation-timing-function: cubic-bezier(.3, .4, .5, 1); }
100% { transform: translate(var(--fly-x, 40px), var(--fly-y, -40vh)) rotate(-14deg) scale(.4); opacity: .8; } }
/* the receiver's drawing in the sidebar, as the letter lands on it */
.agent-avatar.is-memo-landed { animation: memo-landed 520ms var(--ease-out); }
@keyframes memo-landed { 0% { transform: none; } 35% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(.94); } 100% { transform: none; } }
/* the quiet line that says what happened to a note */
.quick-note { position: fixed; z-index: 2600; right: var(--s-4); bottom: calc(var(--s-4) + 56px + var(--float-up, 0px) + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 2 * var(--s-4)); margin: 0; padding: 8px 13px; border-radius: 9px; background: var(--fg); color: var(--bg); font: 500 var(--t-sm)/1.3 var(--font); box-shadow: var(--shadow-md); animation: drop var(--d-med) var(--ease-out) both; }
.quick-note[hidden] { display: none; }
.quick-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body:not([data-scope="all"]):not([data-page]) .quick-note { bottom: auto; top: 54px; }
/* the drawings keep their light-theme strength on the yellow paper */
:root[data-theme="dark"] .memo .agent-avatar { filter: brightness(.5) saturate(1.4); }
/* ---- a phone: a sheet at the bottom of the page, one note at a time ---- */
@media (max-width: 860px) {
body:not([data-scope="all"]):not([data-page]) .quick-open { right: 56px; top: 6px; }
.memo:not(.is-paper) { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; }
/* no veil over the page: a line and a shadow at the sheet's upper edge */
.memo:not(.is-paper) .memo-slip { rotate: none; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-radius: 0; transform-origin: 50% 100%; box-shadow: 0 -8px 16px -12px rgb(0 0 0 / .4); }
.memo[data-state="open"]:not(.is-paper) .memo-slip { animation-name: memo-up; }
.memo-head { cursor: default; height: 24px; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))); background: none; }
.memo-field { font-size: 16px; }
.memo-foot { margin-inline: 0; }
.memo-tool { width: 40px; height: 40px; }
.memo-foot .memo-tool { width: 40px; height: 40px; }
.memo-foot .memo-tool .sketch { width: 24px; height: 24px; }
.memo-send { width: 60px; height: 48px; }
.memo-files { --tools: 76px; }
.quick-note, body:not([data-scope="all"]):not([data-page]) .quick-note { top: auto; bottom: calc(var(--s-4) + 120px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes memo-up { from { transform: translateY(100%); } }
@keyframes memo-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.memo[data-state] .memo-slip, .memo::before, .memo::after, .memo-env, .memo-env *, .agent-avatar.is-memo-landed, .quick-note { animation: none !important; }
}
/* On a card page the round button stands by itself, over the page: bottom right beside the card on a wide screen,
top right on a phone (the foot there holds the field and the arrows). */
.quick-open.memo-open-free { right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); top: auto; width: 44px; height: 44px; border-radius: 50%; z-index: 2601; display: grid !important; }
/* Always bottom right, on every page and width, above a phone's home bar (Christopher: "immer unten rechts"). The
paper's pen and eye switches stand bottom left. Strong on purpose: older rules put it into the top bar on narrow
pages (app.css, quick-open in .topbar). */
html body .quick-open.memo-open-free { top: auto !important; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)) !important; right: calc(var(--s-4) + env(safe-area-inset-right, 0px)) !important; left: auto !important; width: 44px !important; height: 44px !important; display: grid !important; }
/* a session's page on a phone has its message field and its filter button across the foot, and the "open" jump just
above them at the right: the button stands above those */
@media (max-width: 860px) { html body[data-t-view="session"] .quick-open.memo-open-free { bottom: calc(var(--s-4) + 136px + env(safe-area-inset-bottom, 0px)) !important; } }
} }
/* /css/keys.css */
@supports (--sheet: keys) { @media all {
/* The keyboard: the mark on the row it is on, the caps that say which key answers,
the small notice while a sequence is under way, and the sheet behind "?".
What the keys do is declared in js/keys.js. */
/* ---- the row the keyboard is on ---- */
/* Unmistakable, in ink: a thick frame, a scribbled arrow in the margin, and on each of its
controls the key that presses it. The other rows stay as they are. */
.inbox-row { scroll-margin: 72px 0 28px; }
.inbox-row:focus { outline: none; }
.inbox-row.is-current, .inbox-done.is-current { outline: 3px solid var(--fg); outline-offset: 3px; z-index: 1; }
.inbox-row.is-current::before, .inbox-done.is-current::before {
content: ""; position: absolute; right: calc(100% + 14px); top: 50px; width: 46px; height: 46px; background: var(--fg); pointer-events: none;
-webkit-mask: var(--keys-arrow) center / contain no-repeat; mask: var(--keys-arrow) center / contain no-repeat;
animation: keys-point 320ms cubic-bezier(.25, 1.4, .5, 1);
}
:root { --keys-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 25c9-3.500 19-1 33-3.200'/%3E%3Cpath d='M27.500 11.500c3.800 4.200 6.800 7.300 11.500 10-4.600 2.600-8.300 6.700-10.800 12.500'/%3E%3C/svg%3E"); }
@keyframes keys-point { from { translate: -14px 0; opacity: 0; } }
/* No margin to point from: a narrow window, or a list inside a session's column. */
/* An answered row is slim: the arrow stands at its middle. */
.inbox-done.is-current::before { top: 7px; }
@media (max-width: 1180px) { .inbox-row.is-current::before, .inbox-done.is-current::before { display: none; } }
.pane-list .inbox-row.is-current::before { display: none; }
/* A key cap: paper, a line, a little weight below. */
.keys-sheet kbd, .keys-pending kbd, .inbox-row.is-current [data-cap]::after, .inbox-done.is-current [data-cap]::after {
display: inline-block; min-width: 24px; padding: 5px 7px; border-radius: 6px; background: var(--surface); color: var(--fg);
box-shadow: 0 0 0 1px var(--line-strong), 0 2px 0 var(--line-strong);
font: 500 .74rem/1 var(--mono); letter-spacing: 0; text-align: center; text-transform: none; white-space: nowrap;
}
/* On the marked row every control wears its key, so the next move needs no legend. */
.inbox-row.is-current .inbox-answer { position: relative; }
.inbox-row.is-current [data-cap]::after { content: attr(data-cap); position: absolute; top: 7px; right: 7px; rotate: 3deg; }
.inbox-done.is-current [data-cap]::after { content: attr(data-cap); margin-left: 8px; min-width: 20px; padding: 3px 5px; box-shadow: 0 0 0 1px var(--line-strong); }
.inbox-row.is-current .inbox-later[data-cap]::after { position: static; margin-left: 7px; rotate: 0deg; min-width: 20px; padding: 3px 5px; box-shadow: 0 0 0 1px var(--line-strong); }
/* A finger has no keys. */
@media (pointer: coarse) { .inbox-row.is-current [data-cap]::after, .inbox-done.is-current [data-cap]::after { content: none; } }
/* The option the arrows are on, among the choices of the marked row. */
/* ---- a sequence under way: "g", then where to ---- */
.keys-pending {
position: fixed; z-index: 60; left: 50%; bottom: 76px; translate: -50% 0; max-width: calc(100vw - 2 * var(--s-4));
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: 10px var(--s-4);
border-radius: var(--r-md); background: var(--fg); color: var(--bg); box-shadow: var(--shadow-lg);
font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase;
animation: keys-rise 140ms ease-out;
}
.keys-pending[hidden] { display: none; }
.keys-pending span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.keys-pending > kbd:first-child { margin-right: var(--s-1); }
.keys-pending kbd { box-shadow: none; }
@keyframes keys-rise { from { translate: -50% 8px; opacity: 0; } }
/* While "g" waits, the sessions in the sidebar show their numbers. */
body[data-keys="g"] #agents { counter-reset: place; }
body[data-keys="g"] .agent-row[data-unit] { counter-increment: place; position: relative; }
body[data-keys="g"] .agent-row[data-unit]:nth-of-type(-n+10)::before {
content: counter(place); position: absolute; z-index: 2; left: 2px; top: 2px; min-width: 20px; padding: 4px 5px; border-radius: 6px;
background: var(--fg); color: var(--bg); font: 500 .72rem/1 var(--mono); text-align: center; pointer-events: none;
}
/* ---- the sheet behind "?" ---- */
.keys-sheet {
width: min(760px, calc(100vw - 2 * var(--s-4))); max-height: min(86vh, 860px); margin: auto; padding: var(--s-6) var(--s-8) var(--s-6);
border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); overflow-y: auto;
}
/* No veil over the page: the sheet lies on it with a line and a shadow; Escape, "?" or a click beside it closes. */
.keys-sheet { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.keys-sheet::backdrop { background: transparent; }
.keys-sheet header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.keys-sheet h2 { font: 800 2rem/1.05 var(--display); letter-spacing: -.02em; }
.keys-close { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-weight: 600; font-size: var(--t-sm); }
.keys-close:hover { background: var(--sunken); color: var(--fg); }
.keys-groups { columns: 2 300px; column-gap: var(--s-10); }
.keys-groups section { break-inside: avoid; margin-bottom: var(--s-6); }
/* The heading is the divider, as for the senders in the inbox. */
.keys-sheet h3 { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.keys-sheet h3::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.keys-sheet dl { display: grid; gap: 9px; }
.keys-sheet dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: var(--s-3); }
.keys-sheet dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.keys-sheet dd { font-size: var(--t-sm); line-height: 1.35; color: var(--fg); }
.keys-caps { display: inline-flex; align-items: center; gap: 4px; }
.keys-sheet dt i { font: 500 .68rem/1 var(--font); font-style: normal; color: var(--faint); }
.keys-foot { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px dashed var(--line-strong); font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 700px) { .keys-sheet { padding: var(--s-5); } }
/* In a pair, the column the keyboard is on (P moves it) carries a rule under its name. */
body[data-pair] .chat-pane.is-member .chat-pane-head { box-shadow: inset 0 -2px 0 var(--fg); }
@media (prefers-reduced-motion: reduce) { .inbox-row.is-current::before, .keys-pending { animation: none; } }
/* Every stop of the Tab key shows a ring, the Snooze tab of a row included. */
.inbox-later:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
} }
/* /css/ledger.css */
@supports (--sheet: ledger) { @media all {
/* The Ledger (js/ledger.js): the overview of the sessions at /agents, one line per session.
Plain lines and plain controls; by hand are only the marks, the crown, the hand, the small drawings. */
#ledger { display: none; }
body[data-page="roster"] #ledger {
display: block; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface);
padding: var(--s-8) var(--gutter) var(--s-10); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ledger-page { max-width: 1160px; margin-inline: auto; display: grid; gap: var(--s-4); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-6); }
.ledger-head h2 { font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.ledger-head p { font-size: var(--t-lg); color: var(--muted); }
.ledger-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
#ledger kbd { flex: none; font: 500 .68rem/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted); }
.ledger-find { flex: 1 1 260px; max-width: 360px; display: flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 10px 0 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: text; }
.ledger-find:focus-within { box-shadow: 0 0 0 2px var(--fg); }
.ledger-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: max(16px, var(--t-md)); color: var(--fg); appearance: none; -webkit-appearance: none; }
.ledger-find input::-webkit-search-cancel-button { display: none; }
.ledger-link { min-height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ledger-link:hover { text-decoration-color: currentColor; }
.ledger-link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.ledger-note { padding: var(--s-2) var(--s-3); border: 1.5px dashed var(--urg-high); border-radius: var(--r-md); font-size: var(--t-sm); }
/* ---- the lines ---- */
.ledger { display: grid; user-select: none; -webkit-user-select: none; }
.ledger-line {
--c: var(--urg-normal);
position: relative; display: grid; grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px 132px;
align-items: center; gap: 0 var(--s-3); min-height: 56px; padding: 0 6px; border-bottom: 1px solid var(--line); outline: 0;
}
.ledger-line[data-urgency="high"] { --c: var(--urg-high); }
.ledger-line[data-urgency="critical"] { --c: var(--urg-critical); }
.ledger-line[data-urgency="low"] { --c: var(--urg-low); }
.ledger-line.is-head { min-height: 36px; border-bottom-color: var(--line-strong); }
@media (any-hover: hover) { .ledger-line:not(.is-head):hover { background: var(--surface-2); } }
.ledger-line.is-cur { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--fg); }
.ledger-line:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.ledger-line.is-carried { opacity: .35; }
.ledger-line.is-pairing { box-shadow: inset 0 0 0 2px var(--urg-high); border-radius: var(--r-sm); }
.ledger[data-pairing] .ledger-line[data-id]:not(.is-pairing) { cursor: pointer; }
.ledger-th { justify-self: start; display: inline-flex; gap: 5px; padding: 0; border: 0; background: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
button.ledger-th { min-height: 32px; align-items: center; }
button.ledger-th:hover, .ledger-th[aria-sort="ascending"], .ledger-th[aria-sort="descending"] { color: var(--fg); }
.ledger-th i { font-style: normal; }
.ledger-sub { margin: 0; padding: var(--s-6) 6px var(--s-2); border-bottom: 1px solid var(--line-strong); font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
/* The grip: three plain strokes; there only in your own order. */
.ledger-grip { display: grid; gap: 3px; width: 18px; padding: 10px 2px; }
.ledger-grip[data-grab] { cursor: grab; }
.ledger-grip i { height: 2px; border-radius: 2px; background: var(--line-strong); }
.ledger-line:hover .ledger-grip i { background: var(--muted); }
.ledger-face { position: relative; display: block; width: 40px; height: 40px; }
.ledger-mark { display: block; padding: 0; border: 0; border-radius: 12px; background: none; }
.ledger-face .agent-avatar { width: 38px; height: 38px; }
@media (any-hover: hover) { .ledger-mark:hover .agent-avatar { box-shadow: 0 0 0 2px var(--line-strong); } }
.ledger-face .crown-toggle { left: 5px; top: -14px; }
@media (hover: hover) {
.ledger-face .crown-toggle[aria-pressed="false"] { opacity: 0; }
.ledger-line:hover .crown-toggle[aria-pressed="false"], .ledger-line.is-cur .crown-toggle[aria-pressed="false"] { opacity: .5; }
.ledger-face .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible) { opacity: 1; }
/* sent here from a memo that found no crown on the desk (quicksend.js toCrowns): every line shows the crown to give */
body[data-crown-hint] .ledger-face .crown-toggle[aria-pressed="false"] { opacity: .85; }
}
.ledger-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); }
.ledger-rename { max-width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.ledger-name strong { display: block; font: 700 1.02rem/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (any-hover: hover) { .ledger-rename:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--line-strong); } }
.ledger-name small { font-size: var(--t-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-with { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; max-width: 100%; }
.ledger-with { min-width: 0; }
.ledger-with-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ledger-with button { flex: none; width: 26px; height: 24px; padding: 3px; border: 0; border-radius: 50%; background: none; color: inherit; }
.ledger-with button:hover { color: var(--fg); }
.ledger-with .sketch { width: 18px; height: 18px; }
.ledger-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.ledger-state b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-line[data-state="waiting"] .ledger-state { color: var(--urg-critical); }
.ledger-state .agent-badge { flex: none; margin: 0; }
.ledger-sep { font-style: normal; color: var(--faint); margin-inline: -2px; }
.ledger-acts .ledger-menu { display: none; font: 700 1.2rem/1 var(--font); letter-spacing: .05em; }
/* A phone's sheet for one line: plain rows, at the lower edge. */
.ledger-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
.ledger-sheet[open] { display: grid; gap: 2px; }
/* No veil over the page: a line and a shadow set the sheet off; Escape, Close or a tap beside it closes. */
.ledger-sheet { box-shadow: 0 0 0 1px var(--line-strong), 0 -12px 40px -12px rgb(20 30 25 / .35); }
.ledger-sheet::backdrop { background: transparent; }
.ledger-sheet h3 { padding: var(--s-2) var(--s-3) var(--s-3); font: 800 1.2rem/1.2 var(--display); }
.ledger-sheet-item { min-height: 48px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: var(--fg); font: 500 1rem/1.2 var(--font); text-align: left; }
.ledger-sheet-item:hover, .ledger-sheet-item:focus-visible { background: var(--sunken); }
.ledger-sheet-item.is-close { margin-top: var(--s-2); text-align: center; font-weight: 600; background: var(--sunken); }
.ledger-line[data-state="away"] .ledger-state, .ledger-line.is-archived .ledger-state { color: var(--faint); }
.ledger-line[data-state="away"] .ledger-name strong { font-weight: 600; color: var(--muted); }
.ledger-does { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ledger-q { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; font: 600 var(--t-md)/1.3 var(--font); color: var(--fg); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-q:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ledger-more { flex: none; min-height: 26px; padding: 0 7px; border: 0; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); }
.ledger-more:hover { color: var(--fg); }
.ledger-ans { position: relative; flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: color-mix(in srgb, var(--c) 70%, var(--fg)); font: 600 var(--t-sm)/1 var(--font); }
.ledger-ans:first-of-type { margin-left: auto; }
.ledger-ans .sketch { width: 20px; height: 20px; }
.ledger-ans.is-lead { background: var(--c); color: var(--surface); }
.ledger-ans.is-advised { box-shadow: 0 2px 0 var(--urg-high); }
.ledger-ans:hover { box-shadow: inset 0 0 0 2px var(--c); }
.ledger-ans.is-lead:hover { filter: brightness(.92); }
.ledger-ans:disabled { opacity: .4; }
.ledger-task { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-cell { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-acts { display: flex; justify-content: flex-end; gap: 0; }
.ledger-ib { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); }
.ledger-ib:hover { background: var(--sunken); color: var(--fg); }
.ledger-ib .sketch { width: 20px; height: 20px; }
.ledger-line.is-archived { min-height: 46px; }
.ledger-line.is-archived .ledger-name strong { font: 600 var(--t-md)/1.3 var(--font); color: var(--muted); }
.ledger-line.is-archived .agent-avatar { width: 30px; height: 30px; }
.ledger-none { padding: var(--s-6) 6px; color: var(--muted); }
/* Let go here: a line between two lines (move), or a dashed frame (lay together). */
.ledger-line[data-drop="before"]::before, .ledger-line[data-drop="after"]::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--fg); pointer-events: none; }
.ledger-line[data-drop="before"]::before { top: -2px; }
.ledger-line[data-drop="after"]::before { bottom: -2px; }
.ledger-line[data-drop="pair"] { outline: 2px dashed var(--fg); outline-offset: -2px; border-radius: var(--r-sm); }
@media (max-width: 1500px) {
.ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) 88px var(--acts, 132px); }
.ledger-line > :nth-child(7) { display: none; }
}
@media (max-width: 1240px) {
.ledger-line { grid-template-columns: 18px 44px minmax(0, 1.2fr) 104px minmax(0, 1.8fr) var(--acts, 132px); }
.ledger-line > :nth-child(6), .ledger-line > :nth-child(8) { display: none; }
}
/* The selects of a line (its desk, its main agent) have room of their own in the last column, so they never lie on
the model, "last seen" or the question. The column is as wide in every line (also where a line has no select).
Up to 1500px the model gives way to them; up to 1360px each select is a small drawn button (its list says the rest). */
@media (min-width: 861px) {
.ledger { --acts: calc(136px + var(--pick-desk, 0px) + var(--pick-main, 0px)); }
.ledger:has(select.ledger-desk:not(.ledger-main)) { --pick-desk: 100px; }
.ledger:has(select.ledger-main) { --pick-main: 120px; }
.ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px var(--acts, 132px); }
.ledger-acts .ledger-desk { flex: none; width: 96px; max-width: none; text-overflow: ellipsis; }
.ledger-acts .ledger-main { width: 116px; }
.ledger-desk option { color: var(--fg); background: var(--surface); }
}
@media (min-width: 1501px) { .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) minmax(0, 112px) 88px var(--acts, 132px); } }
@media (min-width: 1241px) and (max-width: 1500px) {
.ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) minmax(0, 104px) 88px var(--acts, 132px); }
.ledger:has(select.ledger-desk) .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) 88px var(--acts, 132px); }
/* (Named by class, not a bare :nth-child: a :has() rule whose subject is any element makes the browser restyle
the whole page after every change to it.) */
.ledger:has(select.ledger-desk) .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6) { display: none; }
}
@media (min-width: 861px) and (max-width: 1240px) { .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.2fr) 104px minmax(0, 1.8fr) var(--acts, 132px); } }
@media (min-width: 861px) and (max-width: 1360px) {
.ledger:has(select.ledger-desk:not(.ledger-main)) { --pick-desk: 38px; }
.ledger:has(select.ledger-main) { --pick-main: 38px; }
.ledger-acts .ledger-desk { width: 34px; height: 34px; padding: 0; border-color: transparent; color: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 9.6Q12 9.2 21.4 9.6M5 10L5.2 19.6M19 10L18.8 19.6M5.2 14.4Q12 14 18.8 14.4'/%3E%3C/svg%3E"); }
.ledger-acts .ledger-main { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23808a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 24L4.6 9.6L11 17L16 7L21 17L27.400 9.6L27 24.2Z'/%3E%3C/svg%3E"); }
.ledger-acts .ledger-desk:hover, .ledger-acts .ledger-desk:focus-visible { background-color: var(--sunken); }
.ledger-acts .ledger-main:not(:has(option[value=""]:checked)) { border-color: var(--line-strong); }
}
/* ---- phone: mark, name, state and count; a tap opens ---- */
@media (max-width: 860px) {
body[data-page="roster"] #ledger { grid-column: 1; grid-row: 3; padding: var(--s-5) var(--gutter) var(--s-8); }
.ledger-line.is-head, .ledger-grip, .ledger-does, .ledger-acts .ledger-ib:not(.ledger-menu), .ledger-find kbd, .ledger-tools .ledger-link { display: none; }
.ledger-acts .ledger-menu { display: grid; width: 44px; height: 44px; }
.ledger-with button { width: 36px; height: 36px; }
.ledger-line { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 var(--s-3); min-height: 60px; padding: 0; }
/* A line of a pair holds the name and "with …" under it: room above and below, so the name does not touch the rule. */
.ledger-line:has(.ledger-with) { padding-block: 8px; }
.ledger-line.is-archived { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.ledger-line.is-archived .ledger-state { display: none; }
.ledger-find { max-width: none; }
.ledger-face .crown-toggle { pointer-events: none; }
.ledger-face .crown-toggle[aria-pressed="false"] { display: none; }
}
} }
/* /css/richhtml.css */
@supports (--sheet: richhtml) { @media all {
/* Rich content in a text (js/richhtml.js): the columns of a markdown table, and the frame an agent's
HTML stands in. Loaded by the module itself. The table's own rules are in tokens.css (.rich-table). */
/* A column of numbers: right-aligned, figures of one width. */
.rich-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rich-table .mid { text-align: center; }
.rich-table-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* An HTML block: a frame without an edge of its own, as tall as its content, at most most of the screen. */
/* A block of its own formatting, so that beside something floated (the answers of a question) it takes the
room that is left instead of dropping below it. */
.rh { position: relative; display: flow-root; max-width: 100%; min-width: 0; contain: paint; }
/* A frame without an origin is drawn by a process of its own, and the browser asks that process where a click
lands. Scrolled out under the head of a conversation it would still take the clicks meant for the controls
there (seen in Chromium, where a message has a transform), unless the block is a clip of its own: contain on
the block, a clip path on the frame. Either is enough; both stand. */
.rh-frame { display: block; width: 100%; height: 96px; max-height: 70vh; border: 0; background: transparent; clip-path: inset(0); }
/* Beyond the cap it scrolls inside, and says so with a rule at its foot. */
.rh.is-capped .rh-frame { border-bottom: 1px solid var(--line-strong); }
/* "Open large": quiet, at the block's upper right; it stands when the block is cut or wider than its
place, and comes on hover or focus otherwise. */
.rh-open {
position: absolute; top: 0; right: 0; z-index: 1; min-height: 26px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--muted);
font: 600 var(--t-xs)/1 var(--font); letter-spacing: .02em; white-space: nowrap; cursor: pointer;
opacity: 0; pointer-events: none; transition: opacity var(--d-fast) ease-out;
}
.rh:hover .rh-open, .rh-open:focus-visible, .rh.is-capped .rh-open, .rh.is-wide .rh-open { opacity: 1; pointer-events: auto; }
.rh-open:hover { color: var(--fg); border-color: var(--fg); }
/* Where it always stands it sits under the block, so it never covers a table's head. */
.rh.is-capped, .rh.is-wide { padding-bottom: 34px; }
.rh.is-capped .rh-open, .rh.is-wide .rh-open { top: auto; bottom: 0; }
/* The big view. */
/* The big view is a page of its own (large.html): a thin bar, and the frame fills the rest. */
.rh-page { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); color: var(--fg); font: 400 15px/1.5 var(--font); }
.rh-large-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.rh-large-name { font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rh-large-bar a { color: var(--muted); font-size: var(--t-sm); text-underline-offset: 3px; }
.rh-large-stage { flex: 1; min-height: 0; }
.rh-large-stage .rh-frame { height: 100%; max-height: none; }
.rh-large-stage p { margin: var(--s-6) var(--s-4); color: var(--muted); }
a.rh-open { text-decoration: none; display: inline-flex; align-items: center; }
/* Phone polish (docs/qa-phone-design.md): a table that is too wide scrolls sideways in its frame; its words stay
whole (the text around it breaks anywhere, and a narrow column then stood one syllable per line). */
@media (max-width: 860px) {
.rich-table th, .rich-table td { overflow-wrap: normal; word-break: normal; }
.rh-open { min-height: 36px; }
.rh.is-capped, .rh.is-wide { padding-bottom: 44px; }
}
} }
/* /css/session.css */
@supports (--sheet: session) { @media all {
/* A session's page on a wide window (861px and up): band, heading, conversation, one under the other.
The band at the top (app.css, --band: 64px, as high as the Desk box reaches) holds only what floats: the Desk
box, the menu's pill in its middle, the corner buttons. The heading (drawing, name, the quiet line, the crown
switch) has its own line under the band, on the conversation's column, as the Desk's and the Agents' headings
do (3 Oct: in the band it competed with the pill). The conversation begins under the heading, without a rule,
and fades out at its top edge. The filter stands beside the composer.
Linked last, so it outweighs the head rules in app.css and beside.css.
A phone: see the foot of this file. */
@media (min-width: 861px) {
body:not([data-scope="all"]):not([data-page]) #session { position: relative; }
/* One session, its conversation: it begins below the band (app.css, --band), so no line of it can lie under the
pill or the heading, wherever it is scrolled to; its first line stands 16px under the band, on the line of the
sidebar's first row, and what scrolls away fades out over the band's last 12px instead of being cut. */
body[data-view="chat"]:not([data-pair]) #session .log-inner,
body[data-view="chat"]:not([data-pair]) #session .pane-list { padding-top: var(--s-4); }
body[data-view="chat"]:not([data-pair]) #session :is(.log, .pane-list) { -webkit-mask-image: linear-gradient(#0000, #000 var(--s-3)); mask-image: linear-gradient(#0000, #000 var(--s-3)); }
/* The same fade wherever else something scrolls away under the band: the conversation beside the canvas, and
with sessions laid together the column of their questions. (Their conversations each begin under a name
with a rule, and the canvas under its strip of pictures: those are not at the band.) */
body[data-view="scribble"]:not([data-pair]) #session #chat :is(.log, .pane-list),
body[data-pair][data-view="chat"] #session .group-questions { -webkit-mask-image: linear-gradient(#0000, #000 var(--s-3)); mask-image: linear-gradient(#0000, #000 var(--s-3)); }
/* ---- the heading's own line: under the band, never in it (the band holds only the Desk box, the pill and the
corner buttons, so the place one is in does not compete with the menu). It stands on the 80px line (band 64 +
16), on the conversation's column (app.css .column: 47.5rem, the gutter inside), and the conversation begins
under it. It is in the flow, not laid over: what the stream replaces in it keeps its height (one line each). */
#session .pane-title {
position: relative; z-index: 4; flex: none; grid-area: auto;
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 0;
box-sizing: border-box; width: 100%; max-width: 47.5rem; min-height: 0; margin: 0 auto; padding: var(--s-4) var(--gutter) var(--s-3); border: 0;
--head-w: 100%;
}
/* ---- the heading: drawing, name, the quiet line under the name (at the column's left edge). ---- */
#session .pane-who:empty { display: none; }
#session .pane-who {
grid-column: 1; grid-row: 1; flex: none; display: flex; align-items: flex-start; gap: var(--s-3);
max-width: var(--head-w); min-height: 44px; margin: 0; pointer-events: auto; z-index: 1;
}
#session .pane-who .agent-avatar { width: 44px; height: 44px; border-radius: 12px; }
#session .pane-who .agent-pair { flex: none; }
#session .pane-title h2 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; } /* the name of the place: a heading */
body[data-pair] #session .pane-title h2 { align-self: center; font-size: 1.08rem; }
/* (The crown sits on the drawing's corner, its tip on the heading's top line.) */
#session .pane-who .crown-toggle { left: 7px; top: -4px; }
/* The crown a main session's drawing wears (app.css .agent-avatar .crown-mark stands a quarter above the drawing):
here it sits on its corner, as it did in the band. */
#session .pane-who .agent-avatar .crown-mark { top: 2%; left: 22%; width: 52%; }
#session .pane-who .crown-toggle .crown-mark { width: 22px; }
/* Under the name: what the session is at, its model and machine, on one line. */
body:not([data-pair]) #session .pane-now {
grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--s-2);
position: relative; z-index: 1; max-width: var(--head-w); min-height: 0; margin: -15px 0 0; padding-left: 56px;
color: var(--muted); font-size: var(--t-sm); line-height: 1.25; white-space: nowrap; overflow: hidden;
}
#session .pane-now span:first-child { flex: 0 0 auto; min-width: 2.5em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#session .pane-now .caps { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .68rem; }
/* A name alone (no line under it) stands at the drawing's middle. */
#session .pane-title:has(.pane-now:empty) .pane-who { align-items: center; }
/* ---- the filters: a quiet row under the composer, at the column's left edge ---- */
#session .filters {
position: static; grid-column: 1 / -1; grid-row: 4; justify-self: start; align-self: end; gap: 2px;
margin: 0 0 6px calc(max(var(--gutter), (100% - 47.5rem) / 2 + var(--gutter)) + 2px); pointer-events: auto;
}
#session .filters :is(a, button) { min-height: 26px; padding: 0 9px; border-radius: 7px; font-size: var(--t-xs); }
#session .filters b { margin-left: 6px; padding: 1px 6px; }
body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: 38px; }
/* Sessions laid together have a composer each: "Files" stands beside their names in the band. */
body[data-pair] #session .filters { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0 0 0 18px; }
}
/* ---- the filters are real links (js/link.js; hrefs kept by app.js paintLinks): what app.css says for
`.filters button`, for the anchor. (#mode-*, #tab-* are links too; .modes and .tabbar are shown nowhere.) ---- */
.filters a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.filters a:hover { color: var(--fg); background: var(--sunken); }
.filters a[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* ---- a phone (860px and below): the same idea. One session: no strip and no rule above the conversation; it
flows from under the top bars to the composer. The session's name stands in the strip of sessions already,
so there is no heading. The two filters are a quiet row under the composer; while the keyboard is up
(app.js sets data-typing; or the viewport is short) the row is gone and its room goes to the conversation.
Sessions laid together keep their line of names (it picks the one column) with "Files", without the rule. ---- */
@media (max-width: 860px) {
#session .pane-title { border-bottom: 0; }
body[data-view="chat"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #session { position: relative; }
body[data-view="chat"]:not([data-pair]) #session .pane-title {
position: absolute; z-index: 4; inset: 0; display: flex; align-items: flex-end; flex-wrap: nowrap;
min-height: 0; padding: 0 var(--gutter) max(3px, env(safe-area-inset-bottom, 0px)); pointer-events: none;
}
body[data-view="chat"]:not([data-pair]) #session .filters { margin: 0 0 0 4px; gap: 2px; pointer-events: auto; }
body[data-view="chat"]:not([data-pair]) #session .filters :is(a, button) { min-height: 32px; padding: 0 9px; font-size: var(--t-xs); }
body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }
:root[data-typing] body[data-view="chat"]:not([data-pair]) #session .filters { display: none; }
:root[data-typing] body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: var(--s-3); }
body[data-pair] #session .filters :is(a, button) { min-height: 36px; }
}
@media (max-width: 860px) and (max-height: 520px) {
body[data-view="chat"]:not([data-pair]) #session .filters { display: none; }
body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: var(--s-3); }
}
/* Windowed paint: what of the conversation is out of sight is neither laid out nor painted (messages: trommi.css). */
#session .log .event, #session .log .day { content-visibility: auto; contain-intrinsic-size: auto 36px; }
/* (A question's Desk row in the conversation is not skipped: its box and shadow reach past it and would be clipped.) */
/* The heading with a long name: the drawing keeps its size, the stop sign keeps its words, the name gives way. */
#session .pane-who .t-session-edit { flex: 0 1 auto; }
#session .pane-who .t-session-edit > .t-pick-mark, #session .pane-who .t-session-edit > .t-crown-form { flex: none; }
#session .pane-who .t-session-edit > .t-pick-name { flex: 0 1 auto; min-width: 0; }
#session .pane-who .t-blocked { flex: none; max-width: 45%; }
#session .pane-who .t-blocked > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
} }
/* /css/cardpage.css */
@supports (--sheet: cardpage) { @media all {
/* A card's own page (server/views/card.mjs, card Nr. 191): inside the board's frame, the sidebar beside it.
One calm card of fixed height in two columns, the comments below it. Tokens only. */
#cardpage { container: cardpage / inline-size; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); padding: 72px var(--gutter) var(--s-10); scrollbar-width: thin; }
.tc-page { --card-h: clamp(420px, calc(100dvh - 170px), 600px); --right: 330px; }
.tc-page > * { max-width: 1040px; margin-inline: auto; }
.tc-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ---- the row above the card: the way back, where it stands, More ---- */
.tc-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
/* The way back is plain words with its key beside it ("Back to Desk Esc"), no frame; on touch screens the key goes. */
.tc-back { color: var(--fg); text-decoration: none; }
.tc-head .tc-back { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; font: 700 var(--t-sm)/1 var(--font); }
.tc-head .tc-back:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tc-back span { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-back kbd { flex: none; padding: 3px 6px; border-radius: 5px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 0 var(--line-strong); color: var(--muted); font: 500 .68rem/1 var(--mono); }
@media (hover: none) and (pointer: coarse) { .tc-back kbd { display: none; } }
.tc-place { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--muted); font: 500 var(--t-sm)/1 var(--font); }
.tc-count { padding: 0 6px; white-space: nowrap; }
.tc-step-card { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); text-decoration: none; }
a.tc-step-card:hover { background: var(--sunken); color: var(--fg); }
span.tc-step-card { opacity: .3; }
.tc-more { position: relative; }
.tc-place + .tc-more { margin-left: 0; }
.tc-head > .tc-more:only-of-type:not(.tc-place ~ *) { margin-left: auto; }
.tc-more-open { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 12px; border-radius: var(--r-pill, 999px); cursor: pointer; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); }
.tc-more-open::-webkit-details-marker { display: none; }
.tc-more-open:hover, .tc-more[open] > .tc-more-open { background: var(--sunken); color: var(--fg); }
.tc-more-open .sketch { width: 16px; height: 16px; }
.tc-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: grid; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-md); }
.tc-more-item, .tc-more-list > .cardclip-copy { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: 500 var(--t-sm)/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.tc-more-list > .cardclip-copy::after { content: "Copy"; }
.tc-more-item:hover, .tc-more-list > .cardclip-copy:hover { background: var(--sunken); }
.tc-more-item .sketch, .tc-more-list .cardclip-ico { flex: none; width: 20px; height: 20px; }
.tc-more-item.is-shred { color: var(--urg-high); }
/* ---- the card: fixed height, two columns ---- */
.tc-card { position: relative; isolation: isolate; height: var(--card-h); display: grid; grid-template-columns: minmax(0, 1fr) var(--right); border-radius: var(--r-xl); background: var(--sunken); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.tc-left { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-6) var(--s-4) var(--s-8); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.tc-lead { flex: none; display: grid; gap: var(--s-2); min-width: 0; }
.tc-knock { justify-self: start; }
.tc-title { margin: 0; font: 800 var(--t-2xl)/1.12 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--muted); font: 500 var(--t-xs)/1.4 var(--font); }
.tc-meta a { color: inherit; text-decoration: none; }
.tc-meta a:hover { color: var(--fg); text-decoration: underline; }
.tc-from { display: inline-flex; align-items: center; gap: 5px; }
.tc-from .doodle { width: 18px; height: 18px; fill: none; stroke: var(--tone-pen); stroke-width: 2.2; stroke-linecap: round; }
.tc-text { font: 400 var(--t-md)/1.55 var(--font); color: var(--fg); max-height: calc(1.55em * 5); overflow: hidden; }
.tc-text .rich > :first-child { margin-top: 0; }
.tc-text .rich > :last-child { margin-bottom: 0; }
.tc-more-text { justify-self: start; color: var(--accent); font: 600 var(--t-xs)/1 var(--font); text-decoration: none; }
.tc-more-text:hover { text-decoration: underline; }
/* the picture: low, it takes what the words leave of the card's height */
turbo-frame.tc-media { flex: 1 1 0; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.tc-stage { position: relative; flex: 1 1 0; min-height: 0; max-height: 280px; display: flex; align-items: center; align-self: flex-start; max-width: 100%; }
.tc-figure { position: relative; height: 100%; max-width: 100%; display: block; cursor: zoom-in; }
.tc-figure img { height: 100%; max-width: 100%; width: auto; object-fit: contain; object-position: left center; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); background: var(--surface); display: block; }
.tc-zoom { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); opacity: 0; transition: opacity var(--d-fast, 120ms); }
.tc-figure:hover .tc-zoom, .tc-figure:focus-visible .tc-zoom { opacity: 1; }
.tc-step { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); text-decoration: none; }
.tc-stage .tc-step.is-prev { left: 6px; }
.tc-stage .tc-step.is-next { right: 6px; }
.tc-thumbs { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.tc-thumb { flex: none; width: 48px; height: 34px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.tc-thumb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 var(--t-xs)/1 var(--font); }
.focus-circles { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--urg-high); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.focus-circles text { fill: var(--urg-high); stroke: var(--surface); stroke-width: 3; paint-order: stroke; font: 700 14px/1 var(--display); }
.focus-arrow { position: absolute; left: 0; top: 0; width: 1px; height: 1px; z-index: 3; overflow: visible; pointer-events: none; fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the right column: the options (they scroll inside the card when many), "or" the duck, the field */
.tc-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); background: var(--surface); box-shadow: -1px 0 0 var(--line); }
.tc-answer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s-3); overflow-y: auto; scrollbar-width: thin; margin: -4px; padding: 4px; }
.tc-opts { display: grid; gap: 8px; }
.tc-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 34px 10px 14px; border: 0; border-radius: var(--r-md); background: var(--tone-wash, var(--sunken)); box-shadow: inset 0 0 0 1px var(--tone-edge, var(--line)); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.tc-opt:hover { box-shadow: inset 0 0 0 2px var(--tone-mid, var(--accent)); }
.tc-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tc-opt.is-still { cursor: default; box-shadow: inset 0 0 0 1px var(--line); background: var(--sunken); }
.tc-opt.is-picked { box-shadow: inset 0 0 0 2px var(--accent); }
.tc-opt.is-picked .tc-opt-label { color: var(--accent); }
.tc-opt[data-match] { box-shadow: inset 0 0 0 2px var(--fg); }
.tc-opt.is-picked-now { opacity: .6; }
.tc-opt-words { display: grid; gap: 2px; min-width: 0; }
.tc-opt-label { font: 700 var(--t-md)/1.25 var(--display); overflow-wrap: anywhere; }
.tc-opt-detail { color: var(--muted); font: 400 var(--t-xs)/1.35 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-opt-pen { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); opacity: 0; }
.tc-opt-pen .sketch { width: 14px; height: 14px; }
.tc-opt:hover .tc-opt-pen, .tc-opt:focus-within .tc-opt-pen, .tc-opt-pen[data-noted] { opacity: 1; }
.tc-opt-pen[data-noted] { color: var(--urg-high); }
@media (hover: none) { .tc-opt-pen { opacity: .6; } }
label.tc-opt > input { position: absolute; opacity: 0; pointer-events: none; }
.tc-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; }
label.tc-opt:has(> input:checked) .tc-tick { background: var(--accent); color: var(--accent-fg, #fff); box-shadow: none; }
.tc-send-many { justify-content: center; background: var(--accent); color: var(--accent-fg, #fff); box-shadow: none; }
.tc-opt-note { display: flex; align-items: center; gap: 6px; height: 38px; margin-top: -4px; padding: 0 10px; border-radius: var(--r-sm, 8px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tc-opt-note[hidden] { display: none; }
.tc-opt-note:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.tc-opt-note .sketch { flex: none; width: 15px; height: 15px; }
.tc-opt-note input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: var(--t-sm); color: var(--fg); outline: none; }
.tc-or { display: grid; justify-items: stretch; gap: 8px; }
.tc-or > i { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font: 600 var(--t-xs)/1 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.tc-or > i::before, .tc-or > i::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.tc-whatever { display: grid; justify-items: center; gap: 2px; min-height: 64px; min-width: 96px; padding: 6px 14px; border: 0; border-radius: var(--r-md); background: none; color: var(--fg); cursor: pointer; }
.tc-whatever:hover { background: var(--sunken); }
.tc-whatever .sketch-duck { width: 60px; height: 50px; stroke-width: 2; }
.tc-duck-line { display: none; color: var(--muted); font: 500 var(--t-xs)/1.2 var(--font); }
@media (hover: none) { .tc-duck-line { display: block; } }
.tc-way { align-self: start; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill, 999px); background: var(--sunken); color: var(--fg); font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.tc-way:hover { background: var(--line); }
.tc-quiet { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.tc-error { margin: 0; color: var(--urg-critical, var(--urg-high)); font: 600 var(--t-sm)/1.3 var(--font); }
.tc-error[hidden] { display: none; }
.tc-ask { flex: none; display: grid; gap: 6px; padding: 8px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tc-ask:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.tc-field { width: 100%; min-height: 44px; max-height: 160px; field-sizing: content; resize: none; border: 0; background: none; color: var(--fg); font: 400 var(--t-sm)/1.45 var(--font); outline: none; padding: 2px 4px; }
.tc-ask-row { display: flex; align-items: center; gap: 6px; }
.tc-clip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); cursor: pointer; }
.tc-clip:hover { background: var(--sunken); color: var(--fg); }
.tc-clip .sketch { width: 19px; height: 19px; }
.tc-saved { color: var(--muted); font: 500 var(--t-xs)/1 var(--font); }
.tc-saved[data-state="saved"] { color: var(--accent); }
.tc-saved[data-state="failed"] { color: var(--urg-high); }
.tc-send { margin-left: auto; flex: none; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-fg, #fff); cursor: pointer; }
.tc-send:hover { filter: brightness(1.08); }
.tc-send:active { transform: scale(.94); }
.tc-send .sketch { width: 30px; height: 30px; stroke-width: 2; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-chips[hidden] { display: none; }
.tc-chips .focus-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); }
.tc-chips .t-chip-drop { background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
/* something to read: two clear tiles */
.tc-info-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 110px; padding: 10px; border: 0; border-radius: var(--r-md); background: var(--sunken); color: var(--fg); font: 700 var(--t-sm)/1.2 var(--display); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.tc-tile .sketch { width: 30px; height: 30px; }
.tc-tile.is-ack { background: var(--accent); color: var(--accent-fg, #fff); box-shadow: none; }
.tc-tile:hover { filter: brightness(.96); }
/* ---- the comments under the card ---- */
.tc-feed { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding: 0 var(--s-2); }
.tc-feed[hidden] { display: none; }
.tc-feed .msg { max-width: 46rem; }
.tc-feed .msg-head { gap: var(--s-2); }
.tc-feed .focus-msg-mark { flex: none; width: 22px; height: 22px; color: var(--tone-pen, var(--muted)); }
.tc-feed .focus-msg-mark .doodle { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.tc-said { font: 700 var(--t-sm)/1 var(--display); }
.tc-whole { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--sunken); }
.tc-sec { padding-top: var(--s-3); border-top: 1px solid var(--line); margin-top: var(--s-3); }
.tc-sec:first-of-type { border-top: 0; margin-top: 0; }
.tc-sec h3 { margin: 0 0 4px; font: 700 var(--t-md)/1.25 var(--display); }
.tc-advised-word { color: var(--accent); font: 600 var(--t-xs)/1 var(--font); }
.tc-sec-pic img { max-width: min(100%, 320px); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.tc-did { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--muted); font: 500 var(--t-sm)/1.4 var(--font); }
.tc-did ul { margin: 4px 0 0; padding-left: 1.1em; }
.t-opt-links { display: block; }
.tc-feed a { color: var(--accent); text-underline-offset: 3px; }
.tc-feed a.tc-older { justify-self: center; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font: 500 var(--t-sm)/1 var(--font); text-decoration: none; }
.tc-feed a.tc-older:hover { color: var(--fg); }
.tc-turn { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.tc-turn-head { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 var(--t-sm)/1 var(--font); color: var(--muted); }
.tc-turn-head b { color: var(--fg); }
.tc-turn-head .sketch { width: 18px; height: 18px; }
.tc-turn-note { margin: 6px 0 0; }
.tc-turn-before { display: inline-block; margin-top: 6px; color: var(--accent); font: 600 var(--t-xs)/1 var(--font); }
.tc-files a { margin-right: 8px; }
/* ---- a phone, or a narrow window: one column ---- */
@container cardpage (max-width: 760px) {
.tc-card { height: auto; grid-template-columns: minmax(0, 1fr); }
.tc-left { padding: var(--s-5) var(--s-5) var(--s-3); overflow: visible; }
turbo-frame.tc-media { flex: none; }
.tc-stage { height: 200px; flex: none; }
.tc-card[data-kind="info"] .tc-stage { height: 140px; }
.tc-right { box-shadow: 0 -1px 0 var(--line); padding: var(--s-4); }
.tc-answer { overflow: visible; }
.tc-text { max-height: none; }
.tc-count { display: none; }
}
@media (min-width: 861px) { #cardpage { grid-row: 1; } }
@media (max-width: 860px) {
#cardpage { grid-column: 1; grid-row: 3; padding: var(--s-4) var(--s-3) 96px; }
}
/* ---- one picture, large, at its own address ---- */
.t-picture { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }
.t-picture-bar { display: flex; align-items: center; gap: var(--s-3); padding: 10px 14px; min-width: 0; }
.t-picture-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 var(--t-sm)/1.3 var(--font); }
.t-picture-view { display: grid; place-items: center; min-height: 0; padding: 0 14px 14px; cursor: zoom-out; }
.t-picture-fit { position: relative; display: inline-block; max-width: 100%; max-height: 100%; }
.t-picture-fit img { display: block; max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--surface); }
.t-picture .tc-step { position: fixed; }
.t-picture .tc-step.is-prev { left: 14px; }
.t-picture .tc-step.is-next { right: 14px; }
/* "or": the duck and ??? side by side, as tiles (card Nr. 176 and his word on the card page) */
.tc-or-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.tc-or-pair .tc-tile { min-height: 72px; gap: 2px; }
.tc-or-pair .tc-whatever .sketch-duck { width: 48px; height: 40px; stroke-width: 2; }
.tc-wtf b { font: 800 1.5rem/40px var(--display); letter-spacing: .06em; }
.tc-or-pair .tc-duck-line { display: block; color: var(--muted); font: 500 var(--t-xs)/1.2 var(--font); }
/* ---- marks on the card: the pen's ink over the left column, a written note at a paragraph (js/focus-marks.js) ---- */
.focus-ink { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; overflow: visible; pointer-events: none; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.focus-ink[data-pen] { pointer-events: auto; cursor: crosshair; touch-action: none; }
.focus-ink[data-rub] { cursor: cell; }
.focus-ink[data-rub] path { pointer-events: stroke; stroke-width: 9; stroke-opacity: .5; }
.tc-text:has(.focus-mark) { max-height: none; }
.focus-mark { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 10px 10px; padding: 4px 8px; border-left: 2px solid var(--urg-high); color: var(--urg-high); cursor: text; }
.focus-mark .sketch { flex: none; width: 15px; height: 15px; margin-top: 5px; }
.focus-mark textarea { flex: 1; min-width: 0; padding: 0; border: 0; background: none; resize: none; overflow: hidden; font: 500 1rem/1.5 var(--font); color: inherit; outline: none; }
.focus-mark-quill { position: absolute; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.focus-mark-quill .sketch { width: 14px; height: 14px; }
.focus-mark-quill:hover { color: var(--urg-high); box-shadow: 0 0 0 1px var(--urg-high); }
.focus-mark-tools { display: inline-flex; align-items: center; gap: 0; }
.focus-mark-tool { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.focus-mark-tool .sketch { width: 18px; height: 18px; }
.focus-mark-tool:hover { background: var(--sunken); color: var(--fg); }
.focus-mark-tool[aria-pressed="true"] { background: var(--fg); color: var(--surface); }
.focus-mark-state { padding: 0 4px 0 2px; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--urg-high); white-space: nowrap; }
.focus-mark-done, .focus-mark-clear { flex: none; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: 600 var(--t-xs)/1 var(--font); white-space: nowrap; color: var(--muted); cursor: pointer; }
.focus-mark-done { background: var(--fg); color: var(--surface); }
.focus-mark-tools[hidden], .focus-mark-tool[hidden], .focus-mark-state[hidden], .focus-mark-done[hidden], .focus-mark-clear[hidden] { display: none; }
.tc-ask-row:has(.focus-mark-tools[data-pen]) .tc-saved { display: none; }
/* What??: the word written by hand (pen.js sketchSvg('what'), card Nr. 206), no caption under it */
.tc-wtf .sketch-what, .tc-tile.is-what .sketch-what { width: 92px; height: 32px; stroke-width: 2.6; }
/* the agent's advice: the drawn highlighter behind the label (controller "advice") */
.tc-opt-label[data-controller~="advice"] { position: relative; isolation: isolate; width: fit-content; }
/* ---- the walk: an answered card flies off to the side, the next one is simply there (a view transition between the
two pages; Turbo starts it, the layout's ) ---- */
.tc-card { view-transition-name: tc-card; }
::view-transition-old(tc-card) { animation: tc-fly 260ms cubic-bezier(.5, 0, .75, 0) both; }
::view-transition-new(tc-card) { animation: tc-land 220ms 80ms ease-out both; }
@keyframes tc-fly { to { translate: 46% -6%; rotate: 5deg; opacity: 0; } }
@keyframes tc-land { from { opacity: 0; scale: .985; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(tc-card), ::view-transition-new(tc-card) { animation: none; } }
/* ---- the comments: sober, a conversation ---- */
#cardpage .rich { font-size: var(--t-md); line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
#cardpage .rich > * + * { margin-top: .75em; }
#cardpage .rich p { margin: 0; white-space: pre-wrap; }
#cardpage .rich :is(ul, ol) { margin: 0; padding-left: 1.4em; }
#cardpage .rich li + li { margin-top: .25em; }
#cardpage .rich a { color: var(--accent); text-underline-offset: 3px; }
#cardpage .rich :not(pre) > code { padding: .1em .35em; border-radius: 5px; background: var(--sunken); font: .9em var(--mono, monospace); }
#cardpage .rich pre { overflow-x: auto; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
#cardpage .rich .rich-point { font-weight: 600; }
.tc-feed .msg-user { justify-self: end; max-width: min(82%, 34rem); }
.tc-feed .msg-user .bubble { width: fit-content; margin-left: auto; }
.tc-fold { border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.tc-fold > summary { cursor: pointer; padding: 10px 14px; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); list-style: none; }
.tc-fold > summary::after { content: " ▸"; }
.tc-fold[open] > summary::after { content: " ▾"; }
.tc-fold > summary::-webkit-details-marker { display: none; }
.tc-fold[open] { padding-bottom: var(--s-4); }
.tc-fold[open] > :not(summary) { margin: var(--s-3) var(--s-4) 0; }
.tc-earlier[open] { display: grid; gap: var(--s-4); }
.tc-explained { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--line-strong); }
.tc-explained-head { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--muted); font: 600 var(--t-sm)/1.3 var(--font); }
.tc-turn-head { gap: 10px; }
/* the agent's advice on a card tile: a stronger marker than in running text, so it reads at a glance */
.tc-opt.is-advised { --marker: .42; }
:root[data-theme="dark"] .tc-opt.is-advised { --marker: .5; }
/* Revise: the reverse card opens a small field right under the row (views/card.mjs reviseTile) */
.tc-revise > summary { list-style: none; height: 100%; box-sizing: border-box; }
.tc-revise > summary::-webkit-details-marker { display: none; }
.tc-revise > summary .sketch { width: 34px; height: 34px; stroke-width: 2; }
.tc-revise[open] > summary { box-shadow: inset 0 0 0 2px var(--accent); }
.tc-revise-form { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 4; display: grid; gap: 6px; padding: 8px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
.tc-revise-form textarea { width: 100%; min-height: 56px; resize: none; border: 0; background: none; color: var(--fg); font: 400 var(--t-sm)/1.45 var(--font); outline: none; }
.tc-revise-send { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-fg, #fff); font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.tc-revise-send .sketch { width: 16px; height: 16px; }
@container cardpage (max-width: 760px) { .tc-revise-form { position: static; grid-column: 1 / -1; } .tc-or-pair:has(.tc-revise[open]) { grid-template-rows: auto auto; } }
/* the duck as a wide tile, written out (his word: as wide as the options) */
.tc-opt.tc-whatever { display: flex; flex-direction: row; align-items: center; min-width: 0; justify-items: start; justify-content: flex-start; gap: 12px; min-height: 56px; padding-right: 14px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.tc-opt.tc-whatever .sketch-duck { flex: none; width: 38px; height: 32px; stroke-width: 2; }
.tc-revise-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tc-revise-form input[type="text"] { min-width: 0; height: 36px; border: 0; background: none; color: var(--fg); font: 400 var(--t-sm)/1 var(--font); outline: none; padding: 0 4px; }
.tc-revise-send { justify-self: auto; }
/* the chat under the comments: a plain message to the agent, the card stays with him */
.tc-chat { position: sticky; bottom: 0; z-index: 5; margin: var(--s-6) auto 0; box-shadow: inset 0 0 0 1px var(--line-strong), 0 -10px 18px -12px rgb(0 0 0 / .18); }
.tc-right { overflow: hidden; }
} }
/* /css/asset.css */
@supports (--sheet: asset) { @media all {
/* The viewer of something a session published (views/session.mjs assetPage, /s//a/