/* /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;
}

/* /app.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 (desk.css): stamp blue, violet, green */
  --stamp-ink-later: #2b3f9e; --stamp-ink-works: #5c3aa0; --stamp-ink-done: #1b6a57; --stamp-ink-notes: #8a5f0c;
  --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 <html>), 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; --stamp-ink-notes: #e2bd5c;
  --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 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); }
.advice-loop.is-under path { stroke-linecap: round; }

/* 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-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 (sidebar.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");
}
/* 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; }
/* (The app's own page, index.html <html data-ui>; help.html shares the tokens above, not this frame.) */
html:where([data-ui]) { height: 100%; -webkit-text-size-adjust: 100%; }
html:where([data-ui]), :where([data-ui]) body { margin: 0; overflow: hidden; overscroll-behavior: none; }
:where([data-ui]) 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;
}
:where([data-ui]) :is(h1, h2, h3, p, ul, dl, dd) { margin: 0; }
:where([data-ui]) :is(button, textarea, input) { font: inherit; color: inherit; }
:where([data-ui]) button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus { outline: none; }
::selection { background: var(--accent-soft); color: var(--fg); }
.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; }
@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); }
/* 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; }
body[data-view="scribble"] #scribble { display: block; }
.column { width: 100%; max-width: 47.5rem; margin-inline: auto; padding-inline: var(--gutter); }
/* "☞" 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; }
.files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.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); }
.asset-actions { flex-wrap: wrap; }
.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); }
@media (max-width: 600px) {
  .asset-preview { width: 104px; height: 72px; }
  .has-preview .asset-text { align-self: center; }
}
.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); } }
.sk { display: block; height: 14px; border-radius: var(--r-pill); background: var(--sunken); animation: shimmer 1.5s var(--ease-in-out) infinite; }
@keyframes shimmer { 50% { opacity: .45; } }
@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; }
.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); } }
@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); } }

/* ---- 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; }
@keyframes loop-open { to { stroke-dashoffset: -16; } }
body.is-pairing, body.is-pairing * { cursor: grabbing !important; }
.is-drawing .mark-trace { opacity: .5; }
@keyframes mark-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ring-loop { stroke: currentColor; stroke-width: 1.25; }
.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; }
}
.hand-mark { stroke: currentColor; }
.hand-loop { fill: var(--hand-soft, none); stroke-width: 1.5; }
.hand-pen { stroke-width: 1.45; }

/* ---- 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); }

/* ---- 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); }
}
/* "It knocks": a row that has just arrived urgent or blocking gives two quick small nudges;
   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; } }
@keyframes row-shred { from { opacity: 1; translate: 0 0; } 40% { opacity: .9; } to { opacity: 0; translate: 0 38px; scale: 1 .86; } }
/* 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; }
/* ---- a session's head and its canvas ----
   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 { display: none; }
@media (min-width: 1200px) {
  html body:not([data-pair]):not([data-scope="all"]) .filters { margin: 0 var(--s-4) 9px 0; }
}
/* 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; }
@media (min-width: 1200px) {
  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); }
}
/* 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); }
/* ---- 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) {
  :where([data-ui]) body { grid-template-rows: minmax(0, 1fr); }
  /* ---- 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; }
}

/* ---- phone: sessions as a strip, a session's two modes behind a tab bar ---- */
@media (max-width: 860px) {
  :where([data-ui]) body { --bar-h: 48px; --gutter: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .filters { margin-left: auto; }
  .filters button { min-height: 36px; }
  /* (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; }
  .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; }
  .mic { width: 44px; height: 44px; }
  .icon-btn { width: 44px; height: 44px; }   /* below 16px iOS zooms the page on focus */
  .send { width: 44px; height: 44px; }
}

@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;
  }
}
@media (max-width: 860px) {
  /* 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; }
}

@keyframes crown-in { from { opacity: 0; translate: 0 -10px; scale: .97; } }
@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; } }
/* What just happened, and "Back": 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; }
.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; }
}
@keyframes row-answered { to { opacity: 0; translate: 72px -6px; rotate: 1.2deg; } }
@keyframes row-later { to { opacity: 0; translate: 0 64px; scale: .96; } }
@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); } }
@keyframes row-fade { to { opacity: 0; } }

/* 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; }
}
/* 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; }


@media (min-width: 1200px) {
  :where([data-ui]) body { --beside-col: 50.5rem; --talk-w: clamp(340px, 30vw, 440px); }
  /* (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; }
  body[data-pair] #scribble { grid-column: 1 / -1; grid-row: 2; }
}
body[data-pair] #filter-questions { display: none; }
@media (min-width: 1200px) {
  body[data-talk-drag] { cursor: col-resize; user-select: none; -webkit-user-select: none; }
  /* Folded: the column is a strip; the list of questions takes the rest. */
  body[data-pair][data-talk-folded] { --talk-w: 44px !important; }
}
/* Copying a decision into another session's conversation. 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; }
.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; }

@keyframes rowmenu-up { from { translate: 0 100%; } }
@keyframes rowmenu-fade { from { opacity: 0; } }

/* ---- 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); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 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); } }

/* Real links: what one navigates with is an <a href>, 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;
}

@keyframes memo-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@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; } }
@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; } }
@keyframes memo-landed { 0% { transform: none; } 35% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(.94); } 100% { transform: none; } }
@keyframes memo-up { from { transform: translateY(100%); } }
@keyframes memo-fade { from { opacity: 0; } }

: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; } }
/* 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; } }

/* ---- 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); }
}

/* Rich content in a text (ui.mjs): 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-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: over the whole window, a thin bar with Close, the frame fills the rest. */
.rh-large { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--surface); color: var(--fg); }
.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); padding-top: max(var(--s-2), env(safe-area-inset-top)); 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-close { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.rh-large .rh-frame { flex: 1; height: auto; max-height: none; }

/* Phone polish: 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; }
}


/* ---- 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); }

::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; }
}

/* Read aloud. The logic is in js/speech.js (old client) and controller "say".
   Colours come from tokens.css. (Live dictation was removed: out of scope for launch.) */

/* ---- Read aloud: the small speaker beside every message ----
   Quiet at rest: it shows when the message is under the pointer or it has the focus, and stays
   while it reads. Where nothing hovers (touch) it is always there, small and pale. */
.say { position: relative; display: none; flex: none; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; opacity: 0; vertical-align: middle; font-size: 0; line-height: 0; letter-spacing: 0; transition: opacity var(--d-fast), color var(--d-fast), background var(--d-fast); -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; }
.say:hover { background: var(--sunken); color: var(--fg); }
/* Under a finger the small speaker takes a tap from 38px around it; what is seen stays 26px. */
@media (pointer: coarse) { .say::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
}
.say > * { grid-area: 1 / 1; }

/* Reading: the speaker becomes a stop, a ring closes round it as the message is read. */
.say[data-say="loading"], .say[data-say="playing"] { color: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.say[data-say="loading"] { animation: say-wait 1.4s var(--ease-in-out) infinite; }
.say[data-say="failed"] { color: var(--urg-critical); }
@keyframes say-wait { 50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent); } }
@media (hover: none) {
  .say:hover { background: none; color: var(--faint); }
  .say[data-say="loading"]:hover, .say[data-say="playing"]:hover { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .say[data-say="loading"] { animation: none; }
}


/* ---- toast: one quiet line at the top right, the same on every page (ui.mjs) ----
   "<what happened>: <of what>  ↶ Undo", newest on top, three at most; a scribbled line under it is the time left. */
#says-host { top: 12px; right: 12px; left: auto; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 24px); }
#says-host:empty { display: none; }
.says form { margin: 0; flex: none; }
#says-host .says {
  rotate: 0deg; max-width: min(440px, calc(100vw - 24px)); min-height: 44px; box-sizing: border-box; gap: 10px;
  padding: 4px 4px 6px 14px; border-radius: 12px; background: var(--surface); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md); transform-origin: 100% 0; animation: toast-in 200ms var(--ease-out);
}
#says-host .says[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 -6px; } }
#says-host .says-words { display: flex; align-items: baseline; gap: .35em; min-width: 0; padding-block: 6px; white-space: nowrap; }
#says-host .says-words b { flex: none; font: 600 var(--t-sm)/1.3 var(--font); letter-spacing: 0; }
#says-host .says-words b:not(:last-child)::after { content: ':'; }
#says-host .says-words span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 var(--t-sm)/1.3 var(--font); color: var(--muted); opacity: 1; }
#says-host .says[role="alert"] .says-words b { color: var(--deny); }
#says-host .says-back { min-height: 36px; padding: 0 10px 0 8px; gap: 5px; background: transparent; color: var(--accent); }
#says-host .says-back:hover { filter: none; background: var(--accent-soft); }
#says-host .says-back .back-arrow { width: 17px; height: 17px; }
#says-host .says-back kbd { color: var(--muted); }
#says-host .says:not(:has(form)) { padding-right: 14px; }
#says-host .back-line { left: 14px; bottom: 1px; width: calc(100% - 28px); color: var(--accent); opacity: .35; }
@media (max-width: 860px) {
  #says-host { top: 8px; right: 8px; max-width: calc(100vw - 16px); }
  #says-host .says { max-width: calc(100vw - 16px); padding-block: 4px 6px; }
}
.keys-sheet header form { margin: 0; }
.keys-foot a { color: inherit; }

/* ---- The Agents page (agents.mjs) and a session's small forms (ui.mjs, controller "pops") ----
   The lines are agents.css. New here: controls that are <details> with their content lying over the page
   (no veil), forms where the old client had buttons, a main's subs under it, what the hub refused, the phone. */
.t-pick { position: relative; min-width: 0; max-width: 100%; }
.t-pick > summary { list-style: none; cursor: pointer; }
.t-pick > summary::-webkit-details-marker { display: none; }
.t-pop { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); margin: 0; user-select: text; -webkit-user-select: text; }
.t-pop-wait { padding: var(--s-2) var(--s-3); color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.mark-picker.t-pop { width: max-content; max-width: calc(100vw - 16px); }
.t-menu { display: grid; gap: 2px; min-width: 168px; max-width: min(280px, calc(100vw - 16px)); max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.t-menu button { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 500 var(--t-sm)/1.2 var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-menu button[aria-current="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--fg); }
@media (max-width: 860px) {
  .t-sheet { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; box-sizing: border-box; width: auto; max-width: none; max-height: 82dvh; overflow-y: auto; user-select: text; -webkit-user-select: text; }
  .t-sheet form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); margin: 0; }
  .t-sheet input[type="text"] { min-width: 0; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--fg); font-size: max(16px, 1em); }
  .t-sheet-marks > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
  .t-sheet-marks > summary::-webkit-details-marker { display: none; }
  .t-sheet-marks .mark-grid { margin: var(--s-2) var(--s-3) var(--s-3); width: auto; }
}
.status-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-ago { flex: none; color: var(--faint); font-size: var(--t-xs); }
.status-mark { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent); }
.status-mark svg { width: 18px; height: 18px; fill: none; }
.status-mark .ring-loop { opacity: .38; stroke-width: 2.2; }
@keyframes files-turn { to { transform: rotate(1turn); } }
@keyframes files-jumped { 0%, 45% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
button.t-chip-drop { background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
/* One drawing per run (his pick B, "Ein Zeichen, eine Linie"): only the first card of a session's run shows the session's
   drawing and name beside it; a hand-drawn line in the session's colour runs down from under it and turns into each
   following card with a small hook (the hook is the link into the session the drawing was). A single card is as before.
   On a phone the line runs in the margin left of the cards and only the first card names the session. A card that
   arrives live joins its session's run (app/board.mjs, desk live diff). */
:root {
  --run-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 100' preserveAspectRatio='none'%3E%3Cpath d='M4.4 0C2.6 13 5.9 26 4.2 41S2.3 64 5 78S3.4 94 4 100' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --run-hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M2 1C2.6 7.5 6.5 10 26.5 8.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --run-hook-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M2 1C2.3 6.5 4.6 9.4 11 9' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* An attachment the hub no longer has (retention, quota). */
.att-gone { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px dashed var(--line, #d8d6cf); border-radius: 10px; color: var(--muted, #6b6b66); font-size: 13px; }

@keyframes room-pulse { 50% { opacity: .2 } }
@keyframes room-rise { from { opacity: 0; translate: -50% 12px; } }
@media print {
  body * { visibility: hidden !important; }
}

/* Everything the agents sent (media.mjs): the pile "Media N" at the foot of the Desk and the plain media
   gallery /assets it opens. The pile is paper like its neighbours (desk.css .off-pile); the gallery is sober. */

/* ---- the page /assets ---- */
#gallery { display: none; }


/* ---- The page curl (ui.mjs curlHTML, controller "curl"): over the page's main area, only the corner takes the
   pointer; the sketch paper (dots) under the Desk's corner, the Desk's paper under the Sketchpad's ---- */
.curl { position: fixed; z-index: 7; pointer-events: none; }
.curl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curl-under { fill: url(#curl-dots); }
:root[data-curl="pad"] .curl-under { fill: var(--surface); }
.curl-paper { fill: #fbfbf7; }
.curl-dot { fill: #cbd0c6; }
.curl-ink { fill: none; stroke: #33507e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
:root[data-curl="pad"] .curl-sketch { display: none; }
/* drawn: ink outline, pen hatching for the shadow and at the fold */
.curl-hatch-line { stroke: var(--fg); stroke-width: .9; opacity: .55; }
.curl-cast { fill: url(#curl-hatch); opacity: .55; }
.curl-flap { fill: var(--surface); stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }
.curl-flap-tone { fill: url(#curl-hatch); opacity: .45; }
.curl-fold { fill: none; stroke: var(--fg); stroke-width: 1.7; stroke-linecap: round; }
:root[data-theme="dark"] .curl-paper { fill: #1d2320; } :root[data-theme="dark"] .curl-dot { fill: #3a443f; }
.curl-grab { position: absolute; right: 0; bottom: 0; width: 96px; height: 96px; padding: 0; border: 0; background: none; cursor: grab; pointer-events: auto; touch-action: none; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.curl-grab:active { cursor: grabbing; }
.curl-grab:focus-visible { outline: 2px solid var(--fg); outline-offset: -6px; }
/* the round memo button steps up out of the corner's way */
:root[data-curl] { --float-up: 92px; }
@media (max-width: 860px) { .curl-grab { width: 72px; height: 72px; } :root[data-curl] { --float-up: 70px; } }
html[data-curl] body .quick-open.memo-open-free { bottom: calc(var(--s-4) + 92px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 860px) { html[data-curl] body .quick-open.memo-open-free { bottom: calc(var(--s-4) + 72px + env(safe-area-inset-bottom, 0px)) !important; } }

/* /sidebar.css */
/* 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));
}
#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; }

.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; }
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }

.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; }
.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; }

/* (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 (sidebar.mjs). */
/* The invite row: a quiet "+ New agent" under the last session, the plus where the drawings stand, the words on the
   names' line; green while there is no session yet (the obvious first step). Phone: the last chip. */
.agent-invite { display: flex; margin: 2px 0 0; padding: 0; }
.agent-invite-go { flex: 1; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: var(--s-3); padding: 6px var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color var(--d-fast), background var(--d-fast); }
.agent-invite-go .sketch { flex: none; width: 34px; height: 22px; stroke-width: 2.1; }
.agent-invite-label { font-weight: 500; white-space: nowrap; }
#agents:not(:has(.agent-row[data-unit])) .agent-invite-go { background: var(--accent-soft); color: var(--accent); }
#agents:not(:has(.agent-row[data-unit])) .agent-invite-label { font-weight: 600; }
.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 { filter: grayscale(1); opacity: .6; }
/* 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 { fill: var(--crown-wash); stroke: none; }
.crown-pen { fill: none; stroke: var(--gold-pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.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; }
@media (hover: hover) {
  body.is-pairing .crown-toggle { visibility: hidden; }
}
.agent-row { position: relative; }
.agent-row .crown-toggle { left: 11px; top: -13px; }
/* 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; }
.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 strong.is-carried { text-decoration: line-through; }
/* 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); }
/* 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; }
/* 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-row.is-group .agent-entry { padding-block: 9px; }
.agent-row.is-group + .agent-row, .agent-row + .agent-row.is-group { margin-top: 4px; }

/* ---- 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-live path:not(.pair-crown *) { stroke-dasharray: 34 66; stroke-width: 2.5; animation: mark-travel 2800ms linear infinite; }
@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)); }
/* 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 { color: var(--accent); }
.agent-badge[data-state="running"] .ring-loop { opacity: .38; }
@media (prefers-reduced-motion: reduce) {
  .agent-badge[data-state="running"] .ring-loop { opacity: 1; stroke-dasharray: 91 9; }
}
.agent-badge[data-state="waiting"] { --hand-soft: var(--urg-critical-soft); color: var(--urg-critical); }
.agent-badge[data-state="waiting"] .agent-ring { color: var(--urg-critical); }
.agent-badge[data-offline] { color: var(--faint); }
.agent-badge[data-offline] .agent-ring { color: var(--line-strong, var(--faint)); }
/* 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:active { scale: .95; }
/* 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); }
.agent-row.is-knocking .agent-avatar { animation: knock 640ms cubic-bezier(.3, .7, .4, 1) 120ms; }
.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; }
.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; }
/* 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; }
}
@media (min-width: 861px) {
  #agents { grid-column: 1; grid-row: 1; padding-top: 0; }
  /* 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 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 { 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; }
  [data-rail="folded"] .agent-invite-go { flex: none; width: 60px; justify-content: center; padding: 8px 0; }
  [data-rail="folded"] .agent-invite-label { display: none; }
  .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 .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 .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 band ends where the Desk box ends (8 + 56) */
  :root[data-rail="folded"] { --side: 76px; }
  .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 .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; }
  .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; }
.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; }
.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); }
.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; }
.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; }
}

/* ---- 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); }
.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); }
}
@media (max-width: 860px) {
  #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; }
  .agent-heading,
.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; }
  .agent-entry { width: auto; flex: none; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); gap: var(--s-2); }
  .agent-invite { flex: none; margin: 0; }
  .agent-invite-go { flex: none; min-height: 44px; padding: 4px 14px 4px 6px; gap: var(--s-2); border-radius: var(--r-pill); }
  .agent-invite-go .sketch { width: 30px; height: 20px; }
  .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-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; }
  .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; }
}
@media (pointer: coarse), (max-width: 860px) {
  .topbar .sidedoors .menu-grid :is(a, button, #keys-open),
.topbar .sidedoors .menu-desk { min-height: 44px; }
  .topbar .sidedoors .menu-foot button { width: 44px; 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); }
.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); }
.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; }
.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; }
#theme-toggle::after { content: "Light"; }
:root[data-theme="dark"] #theme-toggle::after { content: "Dark"; }
#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%; }
}

/* ══ Phone polish: 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 .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); }

  /* 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 > *,
.topbar .sidedoors .menu-desk { min-width: 0; max-width: 100%; }
  .topbar .sidedoors .menu-desk i { flex: none; white-space: nowrap; }
}

/* ---- The Desk box (his word: "klassisch ganz rechts Dropdown"; sidebar.mjs topbar): the desk drawing, its lamp lit while
   something waits on this desk (deskLamp, kept current by the live stream), the desk's own name in the big type (the way
   to the Desk; a longer name steps down, a long one takes two lines), and at the far right a caret that opens the Trommi
   menu at its desk list, under the box. No count, no hand beside it. ---- */
.desk-lamp { flex: none; display: grid; }
.desk-lamp > .sketch { display: block; overflow: visible; }
html body .topbar .deskpill .desk-go > .sketch { display: none; }
.topbar .deskpill .desk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 861px) {
  .topbar .deskpill > .desk-go { flex: 1; min-width: 0; padding: 0 8px 0 0; }
  .topbar .desk-go .desk-lamp > .sketch { width: 28px; height: 28px; margin: 0 13px 0 15px; stroke-width: 1.6; }
  .topbar .desk-name[data-size="m"] { font-size: 1.45rem; }
  .topbar .desk-name[data-size="l"] { font-size: .98rem; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; letter-spacing: -.02em; }
  /* the rail: the drawing alone, the way to the Desk */
  [data-rail="folded"] .topbar .desk-go .desk-lamp > .sketch { margin: 0; width: 26px; height: 26px; }
}
@media (max-width: 860px) {
  /* the drawing in place of the bell; the menu's own caret (#brand-menu, 44px, the same menu with the desks first)
     stands at the right of the name, so the box has one caret, not two */
  html body .topbar .deskpill .desk-go .brand-mark { display: none; }
  .topbar .desk-go .desk-lamp > .sketch { width: 26px; height: 26px; margin-right: 8px; stroke-width: 1.6; }
  .topbar .deskpill > .brand-open { min-width: 44px; min-height: 44px; }
  .topbar .brand { max-width: calc(100% - 90px); }
  .topbar .deskpill > .desk-go { flex: 0 1 auto; min-width: 0; }
  .topbar .deskpill .desk-name { flex: 0 1 auto; text-align: left; }
  .topbar .desk-name[data-size="l"] { max-width: 9rem; font-size: .9rem; line-height: 1.04; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; letter-spacing: -.02em; }
}
/* 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; }
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)); }

/* ---- 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; }
@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: 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; }
@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; }/* 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; }
}
/* A session in the sidebar is carried by a held finger: 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:active { scale: .95; }
/* 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;
}
.agent-row[hidden] { display: none !important; }
a.agent-badge { text-decoration: none; }
.topbar .sidedoors a.menu-desk { text-decoration: none; }
.status-mark .agent-ring { position: static; color: inherit; }

/* The crown switch in a session's heading (ui.mjs crownControl; placed by beside.css). */
.t-crown-form { display: contents; }
.topbar .roster-open { color: var(--muted); }
.topbar .roster-open .sketch { width: 22px; height: 22px; }   /* the walk is an <a> too: the first tab stays */
/* The opened Trommi menu: a plain sheet of paper under the pill (no clipboard: sidebar.css is kept for a
   settings page). Paper surface, a thin pen line, a quiet shadow; the entries are simple rows. */
.topbar #brand-doors:not([hidden]) {
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--fg) 70%, transparent); border-radius: 12px;
  box-shadow: 0 10px 28px -16px rgb(20 30 25 / .45);
}
.topbar #brand-doors :is(.menu-desks, .menu-grid, .menu-foot, .menu-dev) { border-top-style: dashed; }

/* The bracket round an unfolded main's subs is drawn inside the main's row (ui.mjs folds). */
.agent-row.is-main[data-fold] { position: relative; }

.deskpill { position: relative; }
.topbar #brand-doors button.menu-desk-add { width: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 8px; color: var(--muted); }
.topbar #brand-doors button.menu-desk-add svg { width: 18px; height: 18px; }
.topbar #brand-doors .menu-desk-form[hidden] { display: none; }
.topbar #brand-doors .menu-desk-form { display: flex; gap: 6px; padding: 3px 4px 5px; }
.topbar #brand-doors .menu-desk-form .menu-desk-field { flex: 1; min-width: 0; width: auto; }
.topbar #brand-doors .menu-desk-form button { flex: none; width: auto; min-height: 36px; padding: 0 14px; justify-content: center; border-radius: 8px; background: var(--fg); color: var(--bg); }
/* The pill names the desk in view; a lost connection is a small warning dot on it, nothing else. */
.brand-open .pill-word { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-open .pill-conn { display: none; }
.brand-open .pill-conn[data-state="offline"] { display: inline-block; width: 8px; height: 8px; margin: 0 2px 0 4px; padding: 0; border: 0; border-radius: 50%; background: var(--urg-critical); }
.brand-open .pill-conn i, .brand-open .pill-conn::after, .brand-open .pill-conn i::after { display: none; }
.brand-open .pill-conn #conn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* "Push on this device" in the menu behind the logo: the switch, what it may say, and one line of help. */
.push-row::after { content: "Off"; margin-left: auto; font: 500 var(--t-xs, 12px)/1 var(--font, inherit); color: var(--muted, #777); }
.push-row[aria-checked="true"]::after { content: "On"; color: var(--accent, #1b6a57); }
.push-row[aria-busy="true"]::after { content: "…"; }
.push-note { margin: 2px 12px 6px; font: 400 var(--t-xs, 12px)/1.4 var(--font, inherit); color: var(--muted, #777); max-width: 34ch; }
.push-note:empty { display: none; }/* The app's own few rules outside the areas (the room screens are in auth.css). */
/* The Trommi menu (sidebar.mjs): the desks without a heading, each with the desk drawing, its lamp on (a warm cone and
   three rays) while something waits on that desk; the desk in view is the marked row. "New desk" is a quiet line under them; the theme sits beside Log out. */
.topbar { --lamp: #e2a21b; }   /* the menu's rows and the Desk box's drawing */
:root[data-theme="dark"] .topbar { --lamp: #f2bd4a; }
.topbar #brand-doors .menu-desks { margin-top: 0; padding-top: 0; }
.topbar #brand-doors .menu-desk[aria-checked]::after { content: none; }
.topbar #brand-doors .menu-desk { gap: 10px; }
.topbar #brand-doors .menu-desk .sketch.menu-lamp { width: 24px; height: 24px; stroke-width: 1.7; color: var(--muted); overflow: visible; }
.topbar #brand-doors .menu-desk .sketch.menu-lamp.is-lit { color: var(--fg); }
.topbar #brand-doors .menu-desk[aria-checked="true"] { background: var(--sunken); }
.topbar #brand-doors .menu-desk[aria-checked="true"] b { font-weight: 700; }
.topbar #brand-doors .menu-desk-rows { display: contents; }
.menu-lamp .lamp-light { stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; fill: none; }
.menu-lamp .lamp-light :is(.lamp-glow, .lamp-cone) { fill: var(--lamp); stroke: none; }
.menu-lamp .lamp-glow { fill-opacity: .85; }
.menu-lamp .lamp-cone { fill-opacity: .42; }
.topbar #brand-doors .menu-desk.is-demo i { opacity: .8; }
.topbar #brand-doors button.menu-desk-add { width: 100%; min-height: 30px; padding: 0 12px 0 15px; gap: 13px; justify-content: flex-start; color: var(--muted); font: 500 var(--t-xs)/1 var(--font); }
.topbar #brand-doors button.menu-desk-add svg { width: 15px; height: 15px; }
.topbar #brand-doors .menu-leave { display: flex; align-items: center; gap: 2px; }
.topbar #brand-doors .menu-leave .menu-logout { flex: 1; min-width: 0; }
.topbar #brand-doors .menu-leave button.menu-theme::after { content: none; }
.topbar #brand-doors:focus { outline: 0; }
.topbar #brand-doors .menu-leave button.menu-theme { flex: none; width: 36px; min-height: 36px; padding: 0; justify-content: center; border-radius: 9px; }
@media (max-width: 860px) { .topbar #brand-doors .menu-leave button.menu-theme { width: 44px; min-height: 44px; } .topbar #brand-doors button.menu-desk-add { min-height: 40px; }
}

/* ---- The Desk as one flat line (his word, 4 October: "nicht so erhaben, ein einzeiliges Element"; his pick a): the desk
   drawing with its lamp, the name in the rows' type, the chevron, the Sketchpad's pen at the right end; a hairline
   under it. No card, no shadow. ---- */
.desk-pad { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--accent); text-decoration: none; }
.desk-pad .sketch { width: 22px; height: 22px; }
.desk-pad:hover, .desk-pad[aria-current] { background: var(--sunken); }
@media (min-width: 861px) {
  .topbar { height: 48px; top: 8px; left: 8px; width: 240px; border-radius: 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  #agents::before { height: 64px; }
  .topbar .deskpill { height: 100%; gap: 2px; padding-right: 4px; }
  .topbar .deskpill > .desk-go { padding: 0 6px 0 0; border-radius: 8px; }
  .topbar .desk-go .desk-lamp > .sketch { width: 26px; height: 26px; margin: 0 12px 0 10px; }
  .topbar .deskpill .desk-name, .topbar .desk-name[data-size="m"], .topbar .desk-name[data-size="l"] { font: 700 var(--t-md)/1.2 var(--font); letter-spacing: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; -webkit-line-clamp: unset; }
  [data-rail="folded"] .topbar { width: 60px; height: 48px; }
  [data-rail="folded"] .topbar .desk-pad { display: none; }
}
@media (max-width: 860px) { .topbar .deskpill > .desk-pad { margin-left: 2px; } }
@media (min-width: 861px) { html body .topbar { box-shadow: 0 1px 0 var(--line) !important; } }
@media (max-width: 860px) { .topbar .deskpill > .brand-open { order: 1; } .topbar .deskpill > .desk-pad { order: 2; } }
/* the Desk row says the desk's own name; switching desks is in the Trommi menu (his word, 4 October) */
@media (min-width: 861px) { .topbar .deskpill > .desk-go { padding-right: 12px; } }
/* the folded rail: the desk's drawing alone, centred like the sessions' drawings; its name in the tooltip */
@media (min-width: 861px) {
  html[data-rail="folded"] .topbar .deskpill .desk-name { display: none !important; }
  html[data-rail="folded"] .topbar { width: 60px; box-shadow: none !important; }
  html[data-rail="folded"] .topbar .deskpill { justify-content: center; padding: 0; }
  html[data-rail="folded"] .topbar .deskpill > .desk-go { flex: none; width: 60px; padding: 0; justify-content: center; align-items: center; }
  html[data-rail="folded"] .topbar .desk-go .desk-lamp > .sketch { margin: 0; width: 28px; height: 28px; }
}

/* ---- The note in the sidebar (sidebar.mjs sideNotes): one yellow sticky pinned at the sidebar's foot, above the fold button; folded its first line,
   unfolded a field that grows, the bin and the crown ---- */
@media (min-width: 861px) { .side-notes { margin: auto 0 0; padding: 12px 0 52px; position: sticky; bottom: 0; background: var(--bg); } }
.side-note-head { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 40px; padding: 6px var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: var(--muted); font: 500 var(--t-md)/1.2 var(--font); text-align: left; cursor: pointer; }
.side-note-head:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg); }
.side-note-first { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-notes.has-words .side-note-head { color: #3b300d; background: #f7de6c; box-shadow: inset 0 0 0 1px rgb(120 95 20 / .25), 0 1px 2px rgb(20 30 25 / .15); border-radius: 2px; rotate: -.6deg; }
.side-notes.has-words .side-note-head:hover { background: #fae58a; }
.side-note-ico { flex: none; width: 34px; height: 22px; overflow: visible; }
.side-note-ico .note-fill { fill: #f5d64a; } .side-note-ico .note-ink { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .side-note-ico .note-lines { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.side-notes.has-words .side-note-ico { width: 22px; }
.side-notes.is-open .side-note-head { display: none; }
.side-note-body[hidden] { display: none; }
.side-note-body { display: grid; gap: 4px; padding: 10px 10px 6px; border-radius: 2px; background: #f7de6c; box-shadow: inset 0 0 0 1px rgb(120 95 20 / .3), 0 2px 6px rgb(20 30 25 / .18); rotate: -.4deg; }
.side-note-field { width: 100%; min-height: 64px; resize: none; padding: 2px; border: 0; background: none; color: #2d2406; font: 500 var(--t-sm)/1.45 var(--font); outline: none; }
.side-note-foot { display: flex; align-items: center; gap: 4px; }
.side-note-foot > i { flex: 1; }
.side-note-bin { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: #6a5d24; cursor: pointer; }
.side-note-bin .sketch { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.side-note-bin:hover { background: rgb(0 0 0 / .06); color: #3b300d; }
.side-notes .side-note-send { position: relative; width: 58px; height: 40px; }
.side-note-nocrown { font-size: var(--t-xs); color: #6a5d24; }
:root[data-theme="dark"] :is(.side-notes.has-words .side-note-head, .side-note-body) { background: #d9c35f; }
@media (min-width: 861px) {
  html[data-rail="folded"] .side-notes { display: flex; justify-content: center; }
  html[data-rail="folded"] .side-note-head { position: relative; width: 48px; justify-content: center; padding: 6px 0; background: none !important; box-shadow: none !important; rotate: none; }
  html[data-rail="folded"] .side-note-first { display: none; }
  html[data-rail="folded"] .side-notes.has-words .side-note-head::after { content: ""; position: absolute; right: 8px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-high); }
  html[data-rail="folded"] .side-notes.is-open .side-note-body { position: fixed; left: 80px; bottom: 60px; width: 300px; z-index: 30; }
}
@media (max-width: 860px) {
  .side-notes { margin: 0; flex: none; }
  .side-note-head { min-height: 44px; border-radius: 22px; padding: 0 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); max-width: 180px; }
  .side-notes.is-open .side-note-body { position: fixed; z-index: 80; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 14px; rotate: none; border-radius: 6px; }
}
/* the floating memo button goes: the sidebar has it */
html body .quick-open.memo-open-free, html[data-curl] body .quick-open.memo-open-free, html body[data-t-view] .quick-open.memo-open-free { display: none !important; }
/* ---- One calm sidebar (his word, 4 October: "so noch komisch"): one inset for every row, the pills inside with equal
   margins; "New note" a quiet row like "+ New agent", right under it, the unsent notes as small stickies under that;
   the bracket of an unfolded main thinner and lighter ---- */
@media (min-width: 861px) {
  #agents { padding-inline: 10px; }
  #agents .agent-row { margin-inline: 0; }
  #agents .agent-row.is-main[data-fold] .agent-entry, #agents .agent-entry { width: auto; }
  .agent-row.is-main[data-fold] { margin-inline: 0; }
  .crown-bracket { stroke-width: 1.3; opacity: .45; }
}
.side-note-field:focus, .side-note-field:focus-visible { outline: none; box-shadow: none; }
@media (min-width: 861px) { html[data-rail="folded"] #agents > .side-notes { display: flex !important; padding: 8px 0 56px; } }
/* the note on the sidebar's bottom line, beside the fold button (his word: anchored, no gap) */
@media (min-width: 861px) {
  :root:not([data-rail="folded"]) #agents { padding-bottom: 0; }
  :root:not([data-rail="folded"]) #agents > .side-notes { margin-bottom: 0; padding: 8px 0 12px 40px; }
  :root:not([data-rail="folded"]) #agents > .side-notes .side-note-head { padding-left: 8px; }
}
/* the note's attachments: thumbnails and file names under the words, the paperclip beside the bin */
.side-note-files { display: flex; flex-wrap: wrap; gap: 6px; }
.side-note-files:empty { display: none; }
.side-note-file { position: relative; display: inline-flex; align-items: center; max-width: 100%; min-height: 28px; padding: 2px 22px 2px 8px; border: 0; border-radius: 4px; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(120 95 20 / .3); color: #3b300d; font: 500 var(--t-xs)/1.2 var(--font); cursor: pointer; }
.side-note-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-note-file.is-pic { padding: 3px; }
.side-note-file.is-pic img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 2px; }
.side-note-file > i { position: absolute; top: 1px; right: 4px; font-style: normal; opacity: .55; }
.side-note-file:hover > i { opacity: 1; }
.side-note-clip { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: #6a5d24; cursor: pointer; }
.side-note-clip .sketch { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.side-note-clip:hover { background: rgb(0 0 0 / .06); color: #3b300d; }
.side-notes.is-drop .side-note-body { box-shadow: inset 0 0 0 2px #8a6d14, 0 2px 6px rgb(20 30 25 / .18); }
.side-note-err { font-size: var(--t-xs); color: var(--urg-critical); }

/* /desk.css */
.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); }
/* 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 .sketch { width: .62em; height: .62em; stroke-width: 2.2; color: var(--faint); transition: translate 140ms ease-out, color 140ms ease-out; }
.inbox-go:active { scale: .98; }
/* 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); }
/* 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); }
.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-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); }
@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 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; }
.inbox-row.is-knocking { 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 { animation: none; }
}
/* 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-ago { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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; }
.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; }
/* 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); }
.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-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; }
.inbox-tab-act:active .inbox-later-flap { filter: brightness(.95); }
/* 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 .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); }
@media (any-hover: hover) {
  .inbox-answer:hover { box-shadow: inset 0 0 0 2px var(--tone-pen); }
  .inbox-answer.is-lead:hover { filter: brightness(.92); }
}
.inbox-answer:active { scale: .97; }
.inbox-answer:disabled { opacity: .35; }
.inbox-answer.is-picked { opacity: 1; box-shadow: inset 0 0 0 3px var(--tone-pen); }
.inbox-error { color: var(--deny); font-size: var(--t-sm); }
/* 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-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-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-head:hover,
.inbox-pile-head:hover b { color: var(--fg); }
.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); }
/* 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-head { gap: 10px; }
.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-sheets { display: none; }
/* 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 (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 .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-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-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); }
}
/* 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; }
.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; }
}
@media (min-width: 861px) {
  .topbar:has(#desk-go[aria-current]) { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
}
@media (max-width: 860px) {
  .inbox-head { margin-bottom: var(--s-5); }
}

/* 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; }
  .inbox-revising-open { min-height: 44px; }
}

/* "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; }

/* ---- 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; }
@media (prefers-reduced-motion: reduce) {
  .inbox-row.is-leaving.is-leaving { animation: row-fade 160ms linear forwards !important; }
}
.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-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; }
}

/* 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; }
/* 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 (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; }
  .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; }
@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 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); }/* The piles at the foot of a list of questions, 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 .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-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; }
.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; }
/* The server-rendered pages (desk.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 desk.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; }
@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 (desk.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 .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 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; }
/* 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-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-open strong { flex: 1 1 auto; }
}
/* 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 (desk.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 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 (desk.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; }

/* ---- The Notes stack (desk.mjs 'notes'): his notes as plain slips of the memo's yellow paper, no tape (the tape
   is what a note gets when it is sent: session.css .msg-note). A line: the words (open to write), when, the session
   it goes to with Send, Delete. ---- */
.inbox-stacks .inbox-stack .inbox-pile-item.is-note { --note-paper: #fbeaa0; --note-ink: #3b300d; --note-muted: #6a5d24; border-color: color-mix(in srgb, #8a6d14 55%, transparent); background: var(--note-paper); color: var(--note-ink); }
:root[data-theme="dark"] .inbox-stacks .inbox-stack .inbox-pile-item.is-note { --note-paper: #d9c35f; --note-ink: #231c06; --note-muted: #4d4214; border-color: #a58c2c; }
.inbox-stacks .note-line > form { display: contents; }
.inbox-stacks .note-line .note-open-form { display: block; flex: 1 1 auto; min-width: 0; }
.inbox-stacks .note-open { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 36px; padding: 0; border: 0; background: none; color: var(--note-ink); font: inherit; text-align: left; cursor: pointer; }
.inbox-stacks .note-open strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.inbox-stacks .note-open .sketch { flex: none; width: 17px; height: 17px; color: var(--note-muted); }
.inbox-stacks .note-line .inbox-revising-tail { flex: none; color: var(--note-muted); font-size: var(--t-xs); }
.inbox-stacks .note-line .inbox-revising-tail * { color: inherit; }
.inbox-stacks .note-line .note-send { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.inbox-stacks .note-line .note-to select { max-width: 150px; height: 28px; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--note-ink) 30%, transparent); border-radius: 5px; background: color-mix(in srgb, #fff 45%, var(--note-paper)); color: var(--note-ink); font: 500 var(--t-xs)/1 var(--font); }
.inbox-stacks .note-line .inbox-takeback, .inbox-stacks .note-new-go { color: var(--note-muted, var(--muted)); }
.inbox-stacks .note-line .note-send-go { color: var(--note-ink); font-weight: 700; }
.inbox-stacks .note-line .inbox-takeback:hover { color: var(--note-ink); }
.inbox-stacks .note-new { margin: 0 0 3px; }
.inbox-stacks .note-new-go { min-height: 30px; padding: 0 2px; border: 0; background: none; font: 600 var(--t-sm)/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inbox-stacks .note-new-go:hover { color: var(--fg); }
@container rows (max-width: 600px) {
  .inbox-stacks .note-line { flex-wrap: wrap; row-gap: 0; padding-bottom: 4px; }
  .inbox-stacks .note-line .note-open-form { flex-basis: 100%; }
  .inbox-stacks .note-line .inbox-revising-tail { margin-right: auto; }
}

/* ---- Off the desk (desk.mjs offPile; his pick A of three, 4 October): ONE pile for every card that left the
   open rows, beside the Notes tab. Folded: its label and the newest five sheets fanned, each with the sign of its place
   (desk.css), its title and when. Unfolded (.is-open, the controller "piles"): the label as a tab with "Fold up",
   and below the row a box with the filter chips (radio buttons: CSS shows the lines of the checked one), the search,
   the newest ten lines and "N more". ---- */
.inbox-groups > .inbox-stacks.stack-tabs { align-items: flex-start; column-gap: 24px; row-gap: 12px; margin-bottom: 56px; }
.inbox-stacks.stack-tabs .inbox-stack-title { align-self: flex-start; }
.inbox-stacks.stack-tabs .off-pile > .inbox-stack-title { flex: 1 1 240px; max-width: 380px; min-width: 0; }
.inbox-stacks.stack-tabs .inbox-stack.off-pile .inbox-stack-head.off-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; rotate: 0deg; translate: none; color: var(--fg); text-align: left; cursor: pointer; }
.inbox-stacks.stack-tabs .inbox-stack.off-pile .inbox-stack-head.off-head:disabled { cursor: default; }
.off-label { display: flex; align-items: center; gap: 8px; min-height: 18px; white-space: nowrap; font: 700 .72rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.off-label > .off-count { font: 700 .86rem/1 var(--mono); letter-spacing: 0; }
.off-fold { display: none; margin-left: auto; align-items: center; gap: 4px; color: var(--accent); letter-spacing: .06em; }
.off-fold .sketch { width: 14px; height: 14px; transform: rotate(180deg); }
.off-fan { position: relative; display: block; height: calc(34px + (var(--n) - 1) * 25px); }
.off-sheet { position: absolute; left: calc(var(--i) * 3px); right: calc(var(--i) * -2px); top: calc(var(--i) * 25px); z-index: calc(10 - var(--i)); box-sizing: border-box; height: 34px; display: flex; align-items: flex-end; gap: 9px; padding: 0 12px 7px; 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: calc(-.8deg + var(--i) * .45deg); transition: translate 140ms ease-out; }
.off-sheet:first-child { align-items: center; padding-bottom: 0; }
.off-sheet:nth-child(2n) { rotate: calc(.6deg - var(--i) * .2deg); }
.off-sheet.is-blank { border-style: dashed; border-color: color-mix(in srgb, var(--fg) 30%, var(--surface)); box-shadow: none; color: var(--faint); }
.off-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-sm)/1.2 var(--font); }
.off-sheet .ago { flex: none; color: var(--faint); font-size: var(--t-xs); white-space: nowrap; }
@media (any-hover: hover) { .off-head:not(:disabled):hover .off-sheet { translate: 0 -2px; }
}
.off-pile.is-empty .off-label { opacity: .5; }
/* NOTES: the same pile, its slips yellow note paper (desk.mjs notesTab); none: one faint slip "+ New note" to press */
.inbox-stacks.stack-tabs .notes-pile > .inbox-stack-title { flex: 0 1 190px; min-width: 0; }
.off-sheet.note-sheet { --note-paper: #fbeaa0; border-color: color-mix(in srgb, #8a6d14 60%, transparent); background: var(--note-paper); color: #3b300d; }
.off-sheet.note-sheet .ago { color: #6a5d24; }
:root[data-theme="dark"] .off-sheet.note-sheet { --note-paper: #d9c35f; border-color: #a58c2c; color: #231c06; }
.off-sheet.note-sheet.is-blank { position: absolute; width: auto; font: inherit; border-color: color-mix(in srgb, #8a6d14 40%, transparent); background: color-mix(in srgb, #fbeaa0 35%, var(--surface)); color: var(--muted); cursor: pointer; }
.off-sheet.note-sheet.is-blank:hover, .off-sheet.note-sheet.is-blank:focus-visible { border-style: solid; color: var(--fg); }
.inbox-stacks.stack-tabs .notes-pile.is-empty .inbox-stack-head.off-head { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; rotate: 0deg; min-height: 0; }
.inbox-stacks.stack-tabs .inbox-stack.off-pile.is-open .inbox-stack-head.off-head { padding: 9px 12px; border: 2px solid var(--fg); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 2px var(--shade); }
.off-pile.is-open .off-fan { display: none; }
.off-pile.is-open .off-fold { display: inline-flex; }

/* the sign of a place, small, in its stamp's ink; the basket for Trash */
.off-pile .stack-stamp.off-sign[data-stamp], .off-pile .off-sign { position: static; inset: auto; aspect-ratio: auto; rotate: 0deg; transform: none; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0; -webkit-mask: none; mask: none; color: var(--ink, var(--fg)); }
.off-pile .off-sign .stack-stamp-sign { width: 17px; height: 17px; }
.off-pile .off-sign[data-g="works"] .stack-stamp-sign { animation: stack-stamp-turn 7s linear infinite; }
.off-pile .off-sign[data-g="trash"] svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .off-pile .off-sign .stack-stamp-sign { animation: none; }
}

/* the unfolded pile: one box under the row */
.inbox-stacks.stack-tabs .inbox-stack.off-pile.is-open > .off-body { display: block; margin-top: 4px; padding: 10px 6px 6px; border-radius: 12px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.off-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; }
.off-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; cursor: pointer; }
.off-chip input { position: absolute; opacity: 0; pointer-events: none; }
.off-chip b { font: 700 var(--t-xs)/1 var(--mono); color: var(--muted); }
.off-pile .off-chip .off-sign { width: 15px; height: 15px; }
.off-pile .off-chip .off-sign .stack-stamp-sign { width: 14px; height: 14px; }
.off-pile .off-chip .off-sign[data-g="trash"] svg { width: 15px; height: 15px; }
.off-chip:has(input:checked) { border-color: var(--fg); background: var(--fg); color: var(--surface); }
.off-chip:has(input:checked) b { color: var(--surface); }
.off-pile .off-chip:has(input:checked) .off-sign { --ink: var(--surface); }
.off-pile .off-chip:has(input:checked) .off-sign[data-g="trash"] svg { stroke: var(--surface); }
.inbox-stacks .off-search { margin: 0 4px 2px; }
.inbox-stacks .off-search label { max-width: none; }

/* a line: sign, title and its grey line, sender and time, the way back */
.inbox-stacks .off-list .inbox-done.off-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 0; padding: 6px 8px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line); }
.off-open { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--fg); text-decoration: none; }
.off-open strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-md)/1.3 var(--font); }
.off-said { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: var(--t-sm); }
.off-tail { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: var(--t-xs); white-space: nowrap; }
.off-tail .inbox-from-mark, .off-tail .inbox-from-mark svg { width: 18px; height: 18px; }
.off-who { color: var(--tone-pen, var(--muted)); font-weight: 600; }
.off-way { margin: 0; min-width: 76px; text-align: right; }
.inbox-stacks .off-line .inbox-takeback { min-height: 28px; padding: 0 6px; font-weight: 600; }
.inbox-stacks .off-line[data-later] .inbox-takeback { color: var(--stamp-ink-later); }
.off-more { display: block; padding: 8px 8px 4px; border-top: 1px solid var(--line); color: var(--accent); font: 600 var(--t-sm)/1 var(--font); text-align: center; cursor: pointer; }
.off-more input { position: absolute; opacity: 0; pointer-events: none; }
.off-more:not(:has(input:checked)) .off-more-shut, .off-more:has(input:checked) .off-more-open { display: none; }
.inbox-stacks .off-none { display: none; }
/* the list shows the newest ten and "N more" */
.off-pile:not(:has([data-off-more]:checked)) .off-line.is-rest { display: none; }

/* a narrow list (the phone): the pile under the Notes tab, across the width; a line in two rows */
@container rows (max-width: 600px) {
  .inbox-stacks.stack-tabs .off-pile > .inbox-stack-title { flex-basis: 100%; }
  .off-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .inbox-stacks .off-list .inbox-done.off-line { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "s o w" ". t w"; gap: 2px 10px; padding: 7px 4px; }
  .off-line > .off-sign { grid-area: s; } .off-line > .off-open { grid-area: o; } .off-line > .off-tail { grid-area: t; } .off-line > .off-way { grid-area: w; min-width: 0; }
  .off-said { display: none; }
}/* 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 (desk.mjs), one element on the top sheet of Later, In the works and Done; the small bin has none:
     <span class="stack-stamp" data-stamp="later|works|done">
       <span class="stack-stamp-word">Snooze</span>
       <span class="stack-stamp-line"><span class="stack-stamp-sign" aria-hidden="true"></span><span class="stack-stamp-num"><i>0</i><i>0</i><i>5</i></span></span>
     </span>
   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
   <i> 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 (desk.css), 124px when nothing sets it. The inks are the
   tokens --stamp-ink-later | -works | -done (app.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 desk.css. */
.stack-stamp[data-stamp] { --u: calc(var(--w, 124px) / 124); --ink: var(--stamp-ink-later);
  /* its place is the top sheet (as desk.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; }
/* 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; }
.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 desk.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 (desk.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; }

/* Notes: his own notes, not sent yet (desk.mjs 'notes'). The sign is a sticky note drawn with the board's pen
   (wobbly square, folded corner, two lines of writing), in the ochre of the memo's paper. */
.stack-stamp[data-stamp="notes"] { --ink: var(--stamp-ink-notes); }
.stack-stamp[data-stamp="notes"] .stack-stamp-sign { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.6%204.5%20Q12.1%203.7%2019.6%204.2%20Q20.1%209.5%2019.8%2014.5%20L14.7%2019.8%20Q9.5%2020.3%204.4%2019.7%20Q4%2012.1%204.6%204.5'%20stroke-width='2.3'/%3E%3Cpath%20d='M19.6%2014.6%20Q17.1%2014.3%2015%2014.8%20Q14.5%2017.2%2014.7%2019.7'%20stroke-width='1.9'/%3E%3Cpath%20d='M8%209.1%20Q12%208.5%2016.1%208.8'%20stroke-width='2'/%3E%3Cpath%20d='M8.1%2012.7%20Q10.4%2012.3%2012.7%2012.6'%20stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.6%204.5%20Q12.1%203.7%2019.6%204.2%20Q20.1%209.5%2019.8%2014.5%20L14.7%2019.8%20Q9.5%2020.3%204.4%2019.7%20Q4%2012.1%204.6%204.5'%20stroke-width='2.3'/%3E%3Cpath%20d='M19.6%2014.6%20Q17.1%2014.3%2015%2014.8%20Q14.5%2017.2%2014.7%2019.7'%20stroke-width='1.9'/%3E%3Cpath%20d='M8%209.1%20Q12%208.5%2016.1%208.8'%20stroke-width='2'/%3E%3Cpath%20d='M8.1%2012.7%20Q10.4%2012.3%2012.7%2012.6'%20stroke-width='2'/%3E%3C/svg%3E"); }/* 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);
}
/* 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; }
}

/* 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; }
}

@media (prefers-reduced-motion: reduce) { .inbox-row.is-current::before, .keys-pending { animation: none; }
}
/* A question in the conversation: after its age, at the end of the row's head. */
.inbox-row-head > .say { margin: -3px 0 -3px 2px; }/* The few rules of the server-rendered board that the old styles do not have: forms and
   links standing where the old client had buttons, the picture's own page, the passing note's place.
   Everything else is styled by the sheets the old client uses. Colours are tokens only. */

/* A tile that is a link ("Choose" leads to the card's own page), and forms that hold a row's tiles and tabs. */
a.inbox-answer { text-decoration: none; box-sizing: border-box; }
form.inbox-actions, form.inbox-tabs { margin: 0; }
a.inbox-thumb { text-decoration: none; }
a.inbox-stack-more { text-decoration: none; text-align: center; }
.inbox-group:empty { display: none; }
.rowmenu-in > form { display: contents; }
.rowmenu-in button[hidden] { display: none; }
.rowmenu-in a.rowmenu-open { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-radius: 10px; color: var(--fg); font: 500 1rem/1.2 var(--font); text-decoration: none; }
.rowmenu-in a.rowmenu-open:active { background: var(--sunken); }
.rowmenu-in a.rowmenu-open svg { flex: none; width: 22px; height: 22px; color: var(--ink); }

/* What??: the word written by hand (pen.js sketchSvg('what'), card Nr. 206) on the Desk tile and in the phone sheet. */
.inbox-answer.is-thumb .sketch.sketch-what { width: 72px; height: 25px; stroke-width: 2.2; }
.rowmenu-in button .sketch-what { width: 63px; height: 22px; stroke-width: 2; }

.inbox-answer[data-controller~="advice"] { position: relative; isolation: isolate; }

/* Desk rows (his word, 3 October): the answer tiles have ONE colour for every session, the bell's green, not the
   session's tone; who asks is said by its drawing at the left and its name beside it. */
.inbox-row .inbox-actions {
  --tone-pen: var(--accent);
  --tone-mid: color-mix(in srgb, var(--accent) 60%, var(--surface));
  --tone-edge: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --tone-wash: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.inbox-row .inbox-actions .inbox-answer.is-lead { background: var(--accent); color: var(--accent-fg, var(--surface)); }
.inbox-gutter-name { display: none; }
@media (min-width: 861px) {
  .inbox-group[data-sender] > .inbox-row > .inbox-gutter .inbox-gutter-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: absolute; left: 50%; top: calc(100% + 4px); width: 64px; translate: -50% 0; text-align: center; overflow-wrap: anywhere; font: 600 .66rem/1.2 var(--font); color: var(--tone-pen); }
  .inbox-group[data-sender] > .inbox-row > .inbox-gutter::after { display: none; }
}
/* "Next" above the Desk (desk.mjs): one small plain sentence, "Next 3 →", no tab. On a wide screen it
   starts where the cards start (past the column of session drawings). */
.inbox-head:has(> .inbox-title > .inbox-next) { margin-bottom: var(--s-3); }
.inbox-title > p.inbox-next { display: block; margin: 0; font: 600 var(--t-md)/1.5 var(--font); letter-spacing: 0; color: var(--muted); }
.inbox-next > .inbox-go { gap: .35em; color: inherit; }
.inbox-next .inbox-next-n { font-weight: 700; color: var(--fg); }
.inbox-next > .inbox-go .sketch { width: 16px; height: 16px; }
@media (min-width: 861px) { .inbox-title > p.inbox-next { padding-left: 46px; }
}
/* the line: each card but the last draws its piece, from its hook down to the next card's hook */
.inbox-group[data-sender] > .inbox-row:not(:last-of-type)::after { content: ""; position: absolute; left: -34px; top: 21px; width: 8px; height: calc(100% + 16px); background: var(--tone-pen); -webkit-mask: var(--run-line) center / 100% 100% no-repeat; mask: var(--run-line) center / 100% 100% no-repeat; pointer-events: none; }
/* (the first card's piece starts under its drawing and name) */
.inbox-group[data-sender] > .inbox-row:first-of-type:not(:last-of-type)::after { top: 72px; height: calc(100% - 72px + 16px + 21px); }
.inbox-group[data-sender] > .inbox-row:first-of-type:not(:last-of-type):has(.inbox-row-head:not(:empty))::after { top: 94px; height: calc(100% - 94px + 16px + 21px); }
@media (max-width: 860px) {
  .inbox-groups .inbox-group[data-sender] > .inbox-row:not(:last-of-type)::after, .inbox-groups .inbox-group[data-sender] > .inbox-row:first-of-type:not(:last-of-type)::after, .inbox-groups .inbox-group[data-sender] > .inbox-row:first-of-type:not(:last-of-type):has(.inbox-row-head:not(:empty))::after { left: -13px; top: 15px; height: calc(100% + 10px); }
  /* every card of a run of two or more gets a hook from the line (a phone's rows stand in a grid: 14px padding) */
  .inbox-groups .inbox-group[data-sender] > .inbox-row:is(:not(:first-of-type), :not(:last-of-type)) > .inbox-gutter { display: block; position: absolute; left: -26px; top: 14px; width: 12px; height: 14px; background: var(--tone-pen); -webkit-mask: var(--run-hook-s) center / contain no-repeat; mask: var(--run-hook-s) center / contain no-repeat; }
  .inbox-groups .inbox-group[data-sender] > .inbox-row > .inbox-gutter > * { display: none; }
  .inbox-groups .inbox-group[data-sender] > .inbox-row:not(:first-of-type) .inbox-byline .inbox-from { display: none !important; }
  .inbox-groups .inbox-group[data-sender] > .inbox-row:not(:first-of-type) .inbox-byline:not(:has(.inbox-whenever)) { display: none; }
}
@media (min-width: 861px) {
  .inbox-group[data-sender] > .inbox-row:not(:first-of-type) > .inbox-gutter, .inbox-group[data-sender] > .inbox-row:not(:first-of-type):has(.inbox-row-head:not(:empty)) > .inbox-gutter { left: -32px; top: 20px; width: 28px; height: 14px; border-radius: 0; background: var(--tone-pen); -webkit-mask: var(--run-hook) center / contain no-repeat; mask: var(--run-hook) center / contain no-repeat; }
  .inbox-group[data-sender] > .inbox-row:not(:first-of-type) > .inbox-gutter > * { display: none !important; }
}
/* A Desk row that is not filled in yet (beyond the first rows; desk-window.mjs fills it when it comes near). */
.inbox-row[data-later] { min-height: 172px; visibility: hidden; }
@media (max-width: 860px) { .inbox-row[data-later] { min-height: 150px; }
}
/* "Clear": no question and no info waits (desk.mjs clearHead). */
/* Clear: the heading at the top, with the sessions at work */
.inbox-head.is-clear { display: block; margin-bottom: var(--s-6); }
@media (min-width: 861px) { .inbox-head.is-clear { padding-left: 46px; } }
.news-clear { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.news-clear h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 1.5rem/1.1 var(--display); letter-spacing: -.02em; color: var(--fg); }
.news-clear-tick { width: 24px; height: 24px; color: var(--accent); }

@media (max-width: 860px) { .news-clear h2 { font-size: 1.35rem; } }
/* narrow (a phone): Notes and Media share the first row, "Off the desk" takes the next one whole */
@container rows (max-width: 600px) {
  .inbox-stacks.stack-tabs > [data-stack="notes"] > .inbox-stack-title { order: -2; }
}
/* With the agents (desk.mjs withAgents, his pick B): the cards being worked on, slim and grey below the open ones. */
#desk-ip[hidden] { display: none; }
.inbox-groups > .ipb { display: grid; gap: 8px; margin-top: var(--s-2); min-width: 0; text-align: left; }
@media (min-width: 861px) { .inbox-groups > .ipb { padding-left: 46px; } }
.ipb :is(a, article, h2) { text-align: left; }
.ip-gear { display: inline-block; flex: none; width: 15px; height: 15px; background: currentColor; -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%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") 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%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") center / contain no-repeat; animation: ip-turn 7s linear infinite; }
@keyframes ip-turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ip-gear { animation: none; } }
.ip-status { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-sm)/1.35 var(--font); color: var(--muted); }
.ip-status b { font-weight: 600; color: color-mix(in srgb, var(--muted) 55%, var(--fg)); }
.ip-status.is-none { color: var(--faint); font-style: italic; }
.ipb-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 4px; font: 700 var(--t-xs)/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--stamp-ink-works); }
.ipb-word { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ipb-rule { flex: 1; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--stamp-ink-works) 35%, transparent); }

/* ---- The foot of the Desk as one piece (his word, 4 October: "aus einem Guss"): Notes, Off the desk and Media in three
   equal columns on the card column's edges; one heading style, one slip (height, corner, border, step, turn) for all
   three, five slips at most; the open list below across all three. A phone: one column, the same slips. ---- */
#inbox .inbox-groups > .inbox-stacks.stack-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--s-5) 28px; margin-top: var(--s-6); }
.inbox-stacks.stack-tabs > .inbox-stack > .inbox-stack-title, .inbox-stacks.stack-tabs .off-pile > .inbox-stack-title, .inbox-stacks.stack-tabs .notes-pile > .inbox-stack-title { flex: none; max-width: none; width: 100%; min-width: 0; }
.inbox-stacks.stack-tabs .inbox-stack.is-open > .inbox-pile-sheets { grid-column: 1 / -1; order: 1; }
.inbox-stacks.stack-tabs > .media-pile { order: 0; display: grid; gap: 10px; width: 100%; min-width: 0; color: var(--fg); text-decoration: none; }
.inbox-stacks.stack-tabs .off-head, .inbox-stacks.stack-tabs > .media-pile { gap: 12px; }
.off-label { min-height: 18px; }
/* one slip */
.off-fan { margin-right: 10px; }
.off-sheet { left: calc(var(--i) * 3px); right: calc(var(--i) * -2px); height: 34px; border-width: 1.4px; border-radius: 4px 7px 4px 6px / 6px 4px 7px 4px; }
.off-sheet.media-slip { align-items: flex-end; gap: 8px; padding: 0 10px 6px 4px; background: var(--surface); }
.off-sheet.media-slip:first-child { align-items: center; padding-bottom: 0; }
.media-thumb { flex: none; position: relative; width: 38px; height: 24px; overflow: hidden; border-radius: 2px; }
.off-sheet.media-slip:not(:first-child) .media-thumb { display: none; }
.media-thumb .asset-preview { position: absolute; inset: 0; grid-area: auto; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 2px; }
.media-thumb .asset-preview::after, .media-thumb :is(.asset-page-label, .gal-ext, .gal-play) { display: none; }
.media-thumb .asset-glyph { width: 16px; height: 16px; }
@media (any-hover: hover) { .media-pile:hover .off-sheet { translate: 0 -2px; } }
@container rows (max-width: 600px) {
  #inbox .inbox-groups > .inbox-stacks.stack-tabs { grid-template-columns: minmax(0, 1fr); }
  .inbox-stacks.stack-tabs > [data-stack="notes"] > .inbox-stack-title, .inbox-stacks.stack-tabs > .media-pile { order: 0; }
}
/* With the agents: one slim line each (his word "Agent refines … bla"), lighter than an open question, in the slips'
   language: the session's drawing, "<session> is working on: <title>", when. */
.ipb-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 4px 14px 4px 10px; border: 1.4px solid color-mix(in srgb, var(--fg) 22%, var(--surface)); border-radius: 4px 7px 4px 6px / 6px 4px 7px 4px; background: var(--surface); color: var(--muted); text-decoration: none; text-align: left; }
.ipb-card:hover { border-color: color-mix(in srgb, var(--fg) 55%, var(--surface)); color: var(--fg); }
.ipb-card .agent-avatar { flex: none; width: 28px; height: 28px; }
.ipb-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-md)/1.3 var(--font); }
.ipb-line b { font-weight: 600; color: var(--tone-pen, var(--fg)); }
.ipb-title { color: var(--fg); }
.ipb-card .ago { flex: none; color: var(--faint); font-size: var(--t-xs); white-space: nowrap; }
.inbox-groups > .ipb { gap: 6px; margin-top: var(--s-4); }
@media (max-width: 860px) { .ipb-line { font-size: var(--t-sm); } }
/* foot: no half-step to the left (the piles stand on the card column's edges) */
#inbox .inbox-stacks.stack-tabs .inbox-stack-title { margin-left: 0; }
.off-t { text-align: left; }

/* ---- TEST (his word, 4 October: "weniger hoch"): a lower decision row, the pictures as a small fan beside the title ---- */
@media (min-width: 861px) {
  .inbox-row { min-height: 0; grid-template-rows: auto auto; }
  .inbox-row > .inbox-content { padding: 12px 16px 12px 20px; }
  .inbox-content:has(> .inbox-fan) { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .inbox-content > * { grid-column: 1 / -1; }
  .inbox-content > .inbox-fan { grid-column: 1; grid-row: 2; align-self: center; }
  .inbox-content:has(> .inbox-fan) > .inbox-text { grid-column: 2; grid-row: 2; }
  .inbox-byline { position: static; }
  .inbox-byline:not(:has(*:not(.inbox-from):not(.inbox-sep))) { display: none; }
  .inbox-actions { padding: 10px 10px 10px 0; }
  .inbox-actions .inbox-answer { height: 76px; width: 112px; }
  .inbox-actions .inbox-answer .sketch, .inbox-actions .inbox-answer.is-thumb .sketch { width: 26px; height: 26px; }
  .inbox-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .inbox-row[data-later] { min-height: 100px; }
}
.inbox-fan { position: relative; display: flex; align-items: center; height: 44px; text-decoration: none; }
.inbox-fan > :is(img, video) { flex: none; width: 56px; height: 42px; border-radius: 4px; object-fit: cover; object-position: top center; background: var(--sunken); border: 1.2px solid var(--fg); box-shadow: 0 1px 3px rgb(20 30 25 / .14); }
.inbox-fan > :nth-child(1) { rotate: -3deg; z-index: 3; }
.inbox-fan > :nth-child(2) { margin-left: -38px; rotate: 3deg; z-index: 2; }
.inbox-fan > :nth-child(3) { margin-left: -38px; rotate: -1deg; translate: 4px 0; z-index: 1; }
@media (any-hover: hover) { .inbox-fan:hover > :nth-child(1) { translate: 0 -2px; } }
@media (max-width: 860px) {
  .inbox-groups .inbox-content > .inbox-fan { order: 0; flex: none; height: 40px; }
  .inbox-groups .inbox-content > .inbox-fan > :is(img, video) { width: 48px; height: 36px; }
  .inbox-groups .inbox-content > .inbox-fan > :nth-child(n+2) { margin-left: -32px; }
  .inbox-groups .inbox-content:has(> .inbox-fan) > .inbox-text { flex: 1 1 0; min-width: 0; }
  .inbox-groups .inbox-answer { min-height: 48px; }
  .inbox-groups .inbox-content:has(> .inbox-fan) > .inbox-row-head:not(:empty) { flex-basis: 100%; }
  .inbox-groups .inbox-content:has(> .inbox-fan) .inbox-question { font-size: 1.15rem; }
}

/* ---- A run of one session's cards (his word, 4 October: "Der Strich ist zu viel"): only the session's drawing and name
   at the run's first card; the next drawing marks where the next run begins. No line, no hooks. ---- */
.inbox-group[data-sender] > .inbox-row::after { content: none !important; }
.inbox-groups .inbox-group[data-sender] > .inbox-row:not(:first-of-type) > .inbox-gutter { display: none !important; }
@media (max-width: 860px) { .inbox-groups .inbox-group[data-sender] > .inbox-row:first-of-type > .inbox-gutter { display: none; } }

/* ---- Desk rows, titles only (his word, 4 October: "Subtext ganz weg, nur Überschriften"; the context stays on the
   card's page), and a knock as the round hand of the sidebar at the card's corner, no word: orange a knock, red
   blocking ---- */
.inbox-groups .inbox-row .inbox-body { display: none; }
.inbox-groups .inbox-row .inbox-row-head:empty { display: none !important; }
.inbox-knock svg { width: 100%; height: 100%; }
.inbox-knock { position: relative; display: inline-block; vertical-align: -.12em; margin-right: .3em; width: .95em; height: .95em; border-radius: 50%; background: var(--surface); color: var(--urg-high); }
.inbox-row[data-urgency="critical"] .inbox-knock { color: var(--urg-critical); }
.inbox-knock .hand-loop { fill: currentColor; stroke: currentColor; }
.inbox-knock .hand-pen { stroke: var(--surface); stroke-width: 1.7; }
@media (min-width: 861px) { .inbox-groups .inbox-row > .inbox-content { min-height: 76px; align-content: center; overflow: visible; } .inbox-content:has(> .inbox-fan) > .inbox-text, .inbox-content > .inbox-fan { grid-row: 1; } }

/* ---- The stack, one compact line per card (his word, 4 October: "einzeilig, die Titel nur"): the round sign (knock,
   or the page of an info) and the title on one line with an ellipsis, the pictures small at its right, the quiet
   Snooze, the answers as low tiles. The whole title on hover and on the card's page. ---- */
.inbox-news-sign { display: inline-block; vertical-align: -.1em; width: .95em; height: .95em; margin-right: .35em; color: var(--muted); }
.inbox-news-sign .sketch { width: 100%; height: 100%; }
@media (min-width: 861px) {
  .inbox-groups .inbox-row { min-height: 0; grid-template-rows: auto auto; }
  .inbox-groups .inbox-row > .inbox-content, .inbox-groups .inbox-row > .inbox-content:has(> .inbox-fan) { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 10px 0 18px; overflow: visible; }
  .inbox-groups .inbox-row .inbox-byline { display: none; }
  .inbox-groups .inbox-row .inbox-text { order: 1; flex: 1 1 auto; display: block; min-width: 0; padding: 0; }
  .inbox-groups .inbox-row .inbox-question { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-wrap: nowrap; padding-right: 0 !important; font-size: 1.2rem !important; line-height: 1.35 !important; }
  .inbox-groups .inbox-row .inbox-content > .inbox-fan { order: 2; height: 36px; }
  .inbox-groups .inbox-row .inbox-fan > :is(img, video) { width: 44px; height: 32px; }
  .inbox-groups .inbox-row .inbox-fan > :nth-child(n+2) { margin-left: -30px; }
  .inbox-groups .inbox-row .inbox-when { order: 3; position: static; flex: none; }
  .inbox-groups .inbox-row .inbox-when .inbox-tab-act { box-shadow: none; background: none; opacity: .45; }
  .inbox-groups .inbox-row:hover .inbox-when .inbox-tab-act, .inbox-groups .inbox-row .inbox-when .inbox-tab-act:focus-within { opacity: 1; }
  .inbox-groups .inbox-row .inbox-when .inbox-later-flap { box-shadow: none; }
  .inbox-groups .inbox-row:hover .inbox-when .inbox-later-flap { box-shadow: inset 0 0 0 1px var(--line-strong); }
  .inbox-groups .inbox-row .inbox-actions { padding: 8px 8px 8px 0; gap: 6px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer { width: 116px; height: 48px; grid-auto-flow: column; grid-template-columns: auto minmax(0, auto); align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer .sketch { width: 22px !important; height: 22px !important; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer > span:last-child:not(.inbox-disc) { font-size: var(--t-sm); line-height: 1.1; text-align: left; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-what .sketch-what { width: 52px !important; height: 18px !important; }
  .inbox-row[data-later] { min-height: 64px; }
}
@media (max-width: 860px) {
  .inbox-groups .inbox-content > .inbox-byline { flex-basis: 100%; }
  .inbox-groups .inbox-row .inbox-text, .inbox-groups .inbox-content:has(> .inbox-fan) > .inbox-text { order: 1; flex: 1 1 0; min-width: 0; min-height: 0; margin: 0; }
  .inbox-groups .inbox-content > .inbox-fan { order: 2; height: 32px; }
  .inbox-groups .inbox-content > .inbox-fan > :is(img, video) { width: 40px; height: 30px; }
  .inbox-groups .inbox-content > .inbox-fan > :nth-child(n+2) { margin-left: -28px; }
  .inbox-groups .inbox-row .inbox-question, .inbox-groups .inbox-content:has(> .inbox-fan) .inbox-question { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-wrap: nowrap; -webkit-line-clamp: unset; font-size: 1.12rem; }
  .inbox-groups .inbox-actions { margin-top: 8px; }
  .inbox-groups .inbox-answer { min-height: 44px; }
}
.inbox-groups .inbox-row .inbox-byline .inbox-toread { display: none; }
@media (min-width: 861px) {
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-ack { width: 56px; grid-template-columns: auto; padding: 0; justify-content: center; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-ack > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-what { width: 84px; }
}
@media (max-width: 860px) {
  .inbox-groups .inbox-row[data-from] .inbox-content > .inbox-byline { flex: 0 0 100%; }
  .inbox-groups .inbox-row[data-kind="info"] .inbox-actions { grid-template-columns: 1fr 64px; }
  .inbox-groups .inbox-row .inbox-answer.is-ack > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .inbox-groups .inbox-row .inbox-answer.is-what .sketch-what { height: 20px; }
}
@media (max-width: 860px) { .inbox-groups .inbox-group[data-sender] > .inbox-row:not(:first-of-type) .inbox-content > .inbox-byline { display: none !important; } }
@media (max-width: 860px) { .inbox-groups .inbox-row .inbox-question { padding-right: 0 !important; } }
/* a little higher, so the answers are bigger (his word, 4 October): rows ~76px, tiles 60px, icon and word */
@media (min-width: 861px) {
  .inbox-groups .inbox-row > .inbox-content, .inbox-groups .inbox-row > .inbox-content:has(> .inbox-fan) { min-height: 76px; }
  .inbox-groups .inbox-row .inbox-actions { padding: 8px 8px 8px 0; gap: 8px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer { width: 132px; height: 60px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer .sketch { width: 26px !important; height: 26px !important; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-ack { width: 64px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-what { width: 96px; }
  .inbox-row[data-later] { min-height: 76px; }
}
@media (max-width: 860px) {
  .inbox-groups .inbox-answer { min-height: 56px; }
  .inbox-groups .inbox-row { min-height: 72px; }
}

/* ---- Who asked: no drawings beside the cards (the session's drawing is in the row); the cards take that width ---- */
#inbox .inbox-groups .inbox-group[data-sender] > .inbox-row > .inbox-gutter { display: none !important; }
@media (min-width: 861px) {
  #inbox .inbox-groups > .inbox-group, #inbox .inbox-groups > .ipb, #inbox .inbox-groups > .inbox-stacks { padding-left: 0; }
  #inbox .inbox-groups > .inbox-stacks { --inset: 0px; }
  .inbox-title > p.inbox-next { padding-left: 0; }
  .inbox-head.is-clear { padding-left: 0; }
}
.inbox-groups .inbox-row .inbox-byline .inbox-from { display: none !important; }
@media (max-width: 860px) { .inbox-groups .inbox-row .inbox-content > .inbox-byline:not(:has(.inbox-whenever)) { display: none !important; } }
/* 0: a tiny muted drawing of the session in the row, before the time and the zzZ; its name on hover */

/* ---- Three lines and square answers (his word, 4 October: "etwas mehr Info, damit die Buttons quadratisch sind"):
   the title (one line), who asked and when (small, muted, the session's tiny drawing), one line of context; the
   pictures right of the text; the answers square tiles, the heaviest thing in the row. ---- */
.row-meta { display: none; }
.inbox-groups .inbox-row .inbox-text { display: grid !important; grid-template-columns: minmax(0, 1fr); row-gap: 3px; align-content: center; }
.inbox-groups .inbox-row .inbox-text > .inbox-from-mark { display: none; }
.inbox-groups .inbox-row .row-meta { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; color: var(--muted); font: 500 var(--t-xs)/1.2 var(--font); }
.row-meta-mark { flex: none; width: 15px; height: 15px; color: var(--tone-pen); opacity: .8; }
.row-meta-mark svg { width: 100%; height: 100%; }
.row-meta-who { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: color-mix(in srgb, var(--tone-pen) 70%, var(--muted)); }
.row-meta-dot { color: var(--faint); }
.inbox-groups .inbox-row .inbox-body { display: block !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; color: var(--muted); font: 400 var(--t-sm)/1.35 var(--font); }
.inbox-groups .inbox-row .inbox-body .inbox-body-about { color: inherit; }
.inbox-groups .inbox-row .inbox-question { font-size: 1.12rem !important; line-height: 1.3 !important; }
.inbox-answer.is-wide .sketch, .inbox-answer .sketch { flex: none; }
@media (min-width: 861px) {
  .inbox-groups .inbox-row > .inbox-content, .inbox-groups .inbox-row > .inbox-content:has(> .inbox-fan) { min-height: 108px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer, .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-ack, .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-what { width: 92px; height: 92px; grid-auto-flow: row; grid-template-columns: minmax(0, auto); justify-items: center; align-content: center; gap: 6px; padding: 6px; border-radius: 12px; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer .sketch { width: 30px !important; height: 30px !important; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer > span:last-child:not(.inbox-disc) { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: visible !important; text-align: center !important; font-size: var(--t-xs); line-height: 1.15; }
  .inbox-groups .inbox-row .inbox-actions .inbox-answer.is-what .sketch-what { width: 64px !important; height: 22px !important; }
  .inbox-groups .inbox-row .inbox-content > .inbox-fan { height: 44px; }
  .inbox-groups .inbox-row .inbox-fan > :is(img, video) { width: 56px; height: 42px; }
  .inbox-groups .inbox-row .inbox-fan > :nth-child(n+2) { margin-left: -38px; }
  .inbox-row[data-later] { min-height: 108px; }
}
@media (max-width: 860px) {
  .inbox-groups .inbox-row { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 10px; align-items: center; min-height: 0; padding: 10px; }
  .inbox-groups .inbox-row > :not(.inbox-more) { grid-column: 1; grid-row: 1; }
  .inbox-groups .inbox-row > .inbox-actions { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; gap: 6px; margin: 0 !important; }
  .inbox-groups .inbox-row > .inbox-row-error { grid-column: 1 / -1; grid-row: 2; }
  .inbox-groups .inbox-row .inbox-answer, .inbox-groups .inbox-row .inbox-answer.is-wide { flex: none; width: 76px; min-width: 0; height: 76px; min-height: 0; grid-auto-flow: row; grid-template-columns: minmax(0, auto); justify-items: center; align-content: center; gap: 4px; padding: 4px; }
  .inbox-groups .inbox-row .inbox-answer .sketch { width: 26px !important; height: 26px !important; }
  .inbox-groups .inbox-row .inbox-answer > span:last-child:not(.inbox-disc) { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; overflow: hidden !important; max-width: 100%; text-align: center !important; font-size: .7rem; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
  .inbox-groups .inbox-row .inbox-answer.is-what .sketch-what { width: 56px; height: 20px; }
  .inbox-groups .inbox-row .inbox-content { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .inbox-groups .inbox-row .inbox-content > .inbox-byline { display: none !important; }
  .inbox-groups .inbox-row .inbox-content > .inbox-fan { order: 2; }
  .inbox-groups .inbox-row .inbox-question { font-size: 1rem !important; }
  .inbox-groups .inbox-row .inbox-body { font-size: var(--t-xs); }
}

/* ---- Blocking and knocking stand first and in colour (his word, 4 October): a tinted row and a coloured left edge,
   red blocking (the raised hand), orange a knock (the knocking knuckle); the answer tiles in that colour as before ---- */
.inbox-groups .inbox-row[data-knock] { background: color-mix(in srgb, var(--urg-high) 7%, var(--surface)); box-shadow: inset 4px 0 0 var(--urg-high), 0 0 0 1px color-mix(in srgb, var(--urg-high) 45%, var(--line)); }
.inbox-groups .inbox-row[data-knock][data-urgency="critical"] { background: color-mix(in srgb, var(--urg-critical) 7%, var(--surface)); box-shadow: inset 4px 0 0 var(--urg-critical), 0 0 0 1px color-mix(in srgb, var(--urg-critical) 45%, var(--line)); }
.inbox-row:not([data-urgency="critical"]) .inbox-knock { background: none; color: var(--urg-high); }
.inbox-row:not([data-urgency="critical"]) .inbox-knock .sketch { width: 100%; height: 100%; stroke-width: 2.4; }
@media (max-width: 860px) { .inbox-groups .inbox-row[data-knock] { box-shadow: inset 4px 0 0 var(--urg-high); } .inbox-groups .inbox-row[data-knock][data-urgency="critical"] { box-shadow: inset 4px 0 0 var(--urg-critical); } }
#inbox .inbox-groups .inbox-row[data-knock] { box-shadow: inset 4px 0 0 var(--urg-high), 0 0 0 1px color-mix(in srgb, var(--urg-high) 45%, var(--line)); }
#inbox .inbox-groups .inbox-row[data-knock][data-urgency="critical"] { box-shadow: inset 4px 0 0 var(--urg-critical), 0 0 0 1px color-mix(in srgb, var(--urg-critical) 45%, var(--line)); }
#inbox .inbox-groups .inbox-row[data-knock] .inbox-answer.is-lead { background: var(--urg-high); color: var(--surface); box-shadow: none; }
#inbox .inbox-groups .inbox-row[data-knock][data-urgency="critical"] .inbox-answer.is-lead { background: var(--urg-critical); }

/* ---- Two lines of teaser instead of who and when (his word, 4 October: "einfach 2 Zeilen Teaser") ---- */
.inbox-groups .inbox-row .row-meta { display: none !important; }
.inbox-groups .inbox-row .inbox-body { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; white-space: normal !important; overflow: hidden; line-height: 1.4; }
/* no coloured edge (his word: "Dieser Farbstrich weg"): a knock reads by its round sign, its tiles and a faint tint */
#inbox .inbox-groups .inbox-row[data-knock], #inbox .inbox-groups .inbox-row[data-knock][data-urgency="critical"] { box-shadow: 0 0 0 1px var(--card-line); }
#inbox .inbox-groups .inbox-row[data-knock] { background: color-mix(in srgb, var(--urg-high) 4%, var(--surface)); }
#inbox .inbox-groups .inbox-row[data-knock][data-urgency="critical"] { background: color-mix(in srgb, var(--urg-critical) 4%, var(--surface)); }
@media (max-width: 860px) { #inbox .inbox-groups .inbox-row[data-knock], #inbox .inbox-groups .inbox-row[data-knock][data-urgency="critical"] { box-shadow: none; } }

/* ---- The session's drawing at the row's left, with its crown; the knock, block or info as a small badge on it (his
   word, 4 October). Its name in the row's hover title. ---- */
.row-mark { display: none; }
.inbox-groups .inbox-row .row-mark { order: 0; position: relative; flex: none; display: block; width: 30px; height: 30px; color: var(--tone-pen); }
.inbox-groups .inbox-row .row-mark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.inbox-groups .inbox-row .row-mark > .crown-mark { position: absolute; left: 3px; top: -11px; width: 22px; height: auto; }
.row-badge { position: absolute; right: -6px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--surface); }
.row-badge > svg { width: 15px; height: 15px; }
.row-badge.is-block { color: var(--urg-critical); }
.row-badge.is-block .hand-loop { fill: currentColor; stroke: currentColor; }
.row-badge.is-block .hand-pen { stroke: var(--surface); stroke-width: 1.7; }
.row-badge.is-knock { color: var(--urg-high); }
.row-badge.is-knock .sketch { stroke-width: 2.4; }
.row-badge.is-info { color: var(--muted); }
.inbox-groups .inbox-row .inbox-knock, .inbox-groups .inbox-row .inbox-news-sign { display: none; }
@media (max-width: 860px) { .inbox-groups .inbox-row .row-mark { width: 26px; height: 26px; } .inbox-groups .inbox-row .row-mark > .crown-mark { width: 19px; top: -9px; } }
/* the session's drawing smaller, the urgency its own small sign before the title (his word: "komisch darüber") */
.inbox-groups .inbox-row .row-mark { width: 20px; height: 20px; }
.inbox-groups .inbox-row .row-mark > .crown-mark { left: 2px; top: -8px; width: 15px; }
.row-urg { display: inline-grid; place-items: center; vertical-align: -.18em; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; }
.row-urg > svg { width: 18px; height: 18px; }
.row-urg.is-block { color: var(--urg-critical); }
.row-urg.is-block .hand-loop { fill: currentColor; stroke: currentColor; }
.row-urg.is-block .hand-pen { stroke: var(--surface); stroke-width: 1.7; }
.row-urg.is-knock { color: var(--urg-high); }
.row-urg.is-knock .sketch { stroke-width: 2.4; }
@media (max-width: 860px) { .inbox-groups .inbox-row .row-mark { width: 18px; height: 18px; } .inbox-groups .inbox-row .row-mark > .crown-mark { width: 14px; top: -7px; } }

/* ---- The foot of the Desk as three desk objects (his pick, idea 1, 4 October): a sticky block with the top note
   readable (Notes), an out-tray with a slip per place peeking, its sign only (Off the desk), a loose pile of real
   photos (Media). The word and count under each; a click opens the same list or the gallery. ---- */
#inbox .inbox-groups > .inbox-stacks.stack-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; justify-items: center; gap: var(--s-4) 28px; margin-top: var(--s-8); }
.inbox-stacks.stack-tabs .inbox-stack.off-pile .inbox-stack-head.off-head, .inbox-stacks.stack-tabs > .media-pile { display: grid; justify-items: center; gap: 12px; width: auto; }
.inbox-stacks.stack-tabs .off-head > .off-label, .media-pile > .off-label { order: 2; justify-content: center; color: var(--muted); }
.inbox-stacks.stack-tabs .off-head > .off-label .off-count, .media-pile > .off-label .off-count { color: var(--fg); }
.desk-obj { position: relative; display: block; width: 200px; height: 132px; }
@media (any-hover: hover) { .off-head:not(:disabled):hover .desk-obj, .media-pile:hover .desk-obj { translate: 0 -2px; } }
.desk-obj { transition: translate 140ms ease-out; }
.off-pile.is-open .desk-obj { display: none; }
/* the sticky block */
.note-under { position: absolute; inset: 0; translate: calc(2px + var(--i) * 2px) calc(4px + var(--i) * 3px); rotate: calc(1.2deg - var(--i) * 2.4deg); background: #fbe98f; box-shadow: 0 1px 2px var(--shade); }
.note-under:nth-child(2) { rotate: -1.2deg; }
.note-top { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 16px 12px; rotate: -1.5deg; background: #f7de6c; color: #3b300d; box-shadow: 0 2px 3px var(--shade); text-align: left; font: 500 .85rem/1.3 var(--font); }
.note-words { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.note-top i { font-style: normal; font-size: var(--t-xs); opacity: .65; }
.note-tape { position: absolute; top: -8px; left: 70px; width: 58px; height: 16px; rotate: 3deg; background: rgb(255 255 255 / .55); border: 1px solid rgb(0 0 0 / .05); }
.note-pad.is-blank .note-top { border: 0; justify-content: center; align-items: center; background: color-mix(in srgb, #f7de6c 30%, var(--surface)); box-shadow: inset 0 0 0 1.3px color-mix(in srgb, #8a6d14 35%, transparent); color: var(--muted); font-weight: 600; cursor: pointer; }
.note-pad.is-blank .note-top:hover { color: var(--fg); }
:root[data-theme="dark"] .note-top { background: #d9c35f; color: #231c06; } :root[data-theme="dark"] .note-under { background: #c9b453; }
/* the out-tray */
.tray-slip { position: absolute; top: 30px; left: calc(14px + var(--i) * 44px); z-index: 1; width: 52px; height: 68px; display: flex; justify-content: center; padding-top: 8px; border: 1.3px solid color-mix(in srgb, var(--fg) 55%, var(--surface)); border-radius: 4px; background: var(--surface); rotate: calc(-4deg + var(--i) * 3.5deg); }
.tray-slip .off-sign { width: 18px; height: 18px; }
.tray-box { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: flex-end; padding: 0 14px 9px; border: 1.6px solid var(--fg); border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 10px 0 -9px var(--line-strong); }
.tray-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--t-sm); }
.out-tray.is-blank .tray-box { border-color: color-mix(in srgb, var(--fg) 30%, var(--surface)); }
/* the photos */
.photo-pile { width: 210px; }
.photo { position: absolute; width: 168px; height: 105px; left: calc(6px + var(--i) * 12px); top: calc(10px - var(--i) * 4px); border: 5px solid var(--surface); outline: 1.3px solid color-mix(in srgb, var(--fg) 55%, var(--surface)); box-shadow: 0 2px 4px var(--shade); rotate: calc(-7deg + var(--i) * 6deg); overflow: hidden; background: var(--surface); }
.photo:last-child { rotate: -1.5deg; }
.photo .asset-preview { position: absolute; inset: 0; width: 100%; height: 100%; grid-area: auto; aspect-ratio: auto; border-radius: 0; }
.photo .asset-preview::after, .photo :is(.asset-page-label, .gal-ext) { display: none; }
.photo-pile.is-blank { border: 1.3px dashed var(--line-strong); border-radius: 6px; }
/* a phone: the three in one row, smaller */
@container rows (max-width: 600px) {
  #inbox .inbox-groups > .inbox-stacks.stack-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--s-3) 10px; }
  .desk-obj, .photo-pile { width: 108px; height: 76px; }
  .note-top { padding: 12px 8px 6px; font-size: .7rem; } .note-words { -webkit-line-clamp: 2; } .note-tape { left: 30px; width: 40px; height: 12px; }
  .tray-slip { width: 30px; height: 40px; left: calc(8px + var(--i) * 26px); padding-top: 4px; } .tray-slip .off-sign { width: 14px; height: 14px; }
  .tray-box { height: 28px; padding: 0 6px 5px; } .tray-t { font-size: .65rem; }
  .photo { width: 88px; height: 56px; border-width: 3px; left: calc(4px + var(--i) * 6px); }
  .inbox-stacks.stack-tabs .off-head > .off-label, .media-pile > .off-label { font-size: .62rem; letter-spacing: .1em; }
}
.tray-slip:nth-child(2) { top: 22px; }
#inbox .inbox-stacks.stack-tabs > .media-pile, #inbox .inbox-stacks.stack-tabs > [data-stack="notes"] > .inbox-stack-title { order: 0; }
@container rows (max-width: 600px) { .tray-slip { top: 18px; } .tray-slip:nth-child(2) { top: 13px; } }

/* ---- Select by the session's drawing (desk.mjs selectWays): a soft ring on hover, an empty round box, a filled round
   tick when chosen; the chosen row a quiet tint; the bar at the bottom while any is chosen. The row's zzZ goes (L and
   the card's page keep Later); the ?snooze= tries keep theirs. ---- */
.inbox-groups .inbox-row button.row-mark { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 -4px 0 -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tone-pen); cursor: pointer; }
.inbox-groups .inbox-row button.row-mark > svg.doodle, .inbox-groups .inbox-row button.row-mark > svg:first-child { width: 22px; height: 22px; overflow: visible; }
.inbox-groups .inbox-row button.row-mark > .crown-mark { position: absolute; left: 10px; top: 0; width: 16px; height: auto; }
.row-check { position: absolute; inset: 7px; display: none; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--muted); background: var(--surface); }
.row-check svg { width: 16px; height: 16px; fill: none; stroke: var(--surface); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
@media (any-hover: hover) {
  .inbox-groups .inbox-row button.row-mark:hover { box-shadow: 0 0 0 1.5px var(--line-strong); background: var(--surface); }
  .inbox-groups .inbox-row button.row-mark:hover > .row-check { display: grid; }
}
.inbox-groups .inbox-row button.row-mark:focus-visible > .row-check, #inbox.is-choosing .inbox-groups .inbox-row button.row-mark > .row-check { display: grid; }
.inbox-groups .inbox-row.is-chosen button.row-mark > .row-check { display: grid; background: var(--fg); box-shadow: none; }
.inbox-groups .inbox-row.is-chosen .row-check svg { opacity: 1; }
#inbox .inbox-groups .inbox-row.is-chosen { background: color-mix(in srgb, var(--fg) 5%, var(--surface)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fg) 45%, var(--surface)); }
@media (min-width: 861px) { .inbox-groups .inbox-row > .inbox-content { padding-left: 14px !important; } }
/* the bar */
.sel-bar[hidden] { display: none; }
.sel-bar { position: fixed; z-index: 20; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 4px; margin: 0; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--fg); color: var(--surface); box-shadow: var(--shadow-lg); }
@media (min-width: 861px) { .sel-bar { left: calc(50% + 128px); } }
.sel-n { margin-right: 8px; font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; }
.sel-bar button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.sel-bar button:hover, .sel-bar button:focus-visible { background: color-mix(in srgb, var(--surface) 16%, transparent); }
.sel-bar button[hidden] { display: none; }
.sel-bar .sketch { width: 18px; height: 18px; }
.sel-bar .sel-shred { color: color-mix(in srgb, var(--urg-critical) 45%, var(--surface)); }
.sel-bar .sel-clear { width: 40px; justify-content: center; padding: 0; font-size: 1rem; opacity: .7; }
@media (max-width: 860px) {
  .inbox-groups .inbox-row button.row-mark { width: 40px; height: 40px; margin: 0 -6px 0 -6px; }
  .sel-bar { left: 10px; right: 10px; translate: none; bottom: 14px; justify-content: space-between; padding-left: 12px; }
  .sel-bar button { padding: 0 8px; } .sel-bar button span { font-size: var(--t-xs); }
}
#inbox.is-choosing .inbox-groups .inbox-row button.row-mark > .crown-mark, .inbox-groups .inbox-row button.row-mark:focus-visible > .crown-mark { display: none; }
@media (any-hover: hover) { .inbox-groups .inbox-row button.row-mark:hover > .crown-mark { display: none; } }
@media (max-width: 860px) { .sel-bar { right: 72px; } }
@media (min-width: 861px) { .sel-bar { bottom: 24px; } }
@media (max-width: 860px) { .sel-bar { gap: 0; padding: 4px 4px 4px 10px; } .sel-n { margin-right: 2px; font-size: var(--t-xs); } .sel-bar button { gap: 4px; padding: 0 6px; } .sel-bar .sketch { width: 16px; height: 16px; } .sel-bar .sel-clear { width: 30px; } }

/* ---- Off the desk as a shopping list on a slip (his word, 4 October): one line per card, newest first; done ticked
   and struck through, shredded struck and faded, snoozed greyed with its zz. The heading folds and unfolds it (no
   boxed button); the way back of a line comes quietly under the pointer. ---- */
.shop-slip { width: 210px; height: auto; min-height: 118px; padding: 12px 14px 10px 12px; display: grid; align-content: start; gap: 2px; background: #fffdf6; border: 1px solid color-mix(in srgb, var(--fg) 18%, var(--surface)); box-shadow: 0 2px 3px var(--shade); rotate: 1deg; background-image: repeating-linear-gradient(transparent 0 19px, color-mix(in srgb, #6a8fb5 22%, transparent) 19px 20px); background-position: 0 9px; }
:root[data-theme="dark"] .shop-slip { background-color: #232a26; }
.shop-line { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; font: 600 .82rem/20px var(--display); color: var(--fg); text-align: left; }
.shop-line.is-blank { color: var(--faint); font-weight: 500; }
.shop-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shop-mark { flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.shop-mark .sketch { width: 14px; height: 14px; }
.shop-mark[data-g="done"] { color: var(--stamp-ink-done); }
.shop-mark[data-g="later"] { color: var(--faint); }
/* struck through by a pen: done and shredded */
:is(.shop-line, .off-line)[data-g="done"] :is(.shop-t, .off-open strong), :is(.shop-line, .off-line)[data-g="trash"] :is(.shop-t, .off-open strong) { text-decoration: line-through; text-decoration-thickness: 1.6px; text-decoration-color: color-mix(in srgb, var(--fg) 70%, transparent); }
:is(.shop-line, .off-line)[data-g="trash"] { opacity: .45; }
:is(.shop-line, .off-line)[data-g="later"] :is(.shop-t, .off-open strong) { color: var(--muted); font-weight: 500; }
/* the unfolded list: the same slip, wider; no boxed head, no chips' weight */
.inbox-stacks.stack-tabs .inbox-stack.off-pile.is-open:not(.notes-pile) .inbox-stack-head.off-head { padding: 0; border: 0; background: none; box-shadow: none; }
.off-pile:not(.notes-pile) .off-fold { display: none !important; }
.inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="off"].is-open > .off-body { margin-top: 10px; padding: 12px 16px 10px; border-radius: 2px; background: #fffdf6; background-image: repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, #6a8fb5 18%, transparent) 33px 34px); box-shadow: 0 2px 3px var(--shade); border: 1px solid color-mix(in srgb, var(--fg) 15%, var(--surface)); }
:root[data-theme="dark"] .inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="off"].is-open > .off-body { background-color: #232a26; }
.inbox-stacks .off-list .inbox-done.off-line { grid-template-columns: 16px minmax(0, 1fr) auto auto; min-height: 34px; padding: 0 4px; border-top: 0; }
.off-line .off-open strong { font: 600 var(--t-md)/1.3 var(--display); }
.off-line .off-said { font-size: var(--t-xs); }
.off-line .off-tail .inbox-from-mark, .off-line .off-who { display: none; }
@media (any-hover: hover) { .off-line .off-way { opacity: 0; transition: opacity 120ms; } .off-line:hover .off-way, .off-line:focus-within .off-way { opacity: 1; } }
.off-pile[data-stack="off"] .off-chips { padding: 0 0 8px; }
.off-pile[data-stack="off"] .off-chip { min-height: 26px; border: 0; background: none; color: var(--muted); }
.off-pile[data-stack="off"] .off-chip:has(input:checked) { background: none; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.off-pile[data-stack="off"] .off-chip:has(input:checked) b { color: var(--fg); }
.off-more { border-top: 0; text-align: left; padding-left: 24px; }
@container rows (max-width: 600px) { .shop-slip { width: 108px; min-height: 76px; padding: 6px 6px 4px; background-size: auto; } .shop-line { height: 14px; font-size: .58rem; line-height: 14px; gap: 3px; } .shop-mark, .shop-mark .sketch { width: 10px; height: 10px; } .shop-slip .shop-line:nth-child(n+5) { display: none; } }
.inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="off"].is-open > .off-body { background-image: none; }
.off-pile[data-stack="off"] .off-list .inbox-done.off-line { border-bottom: 1px solid color-mix(in srgb, #6a8fb5 20%, transparent); border-radius: 0; }
.off-pile[data-stack="off"] .off-search label { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: none; }

/* ---- The list, radically simple (his word, 4 October: "optisch zu überladen"): the mark and the title on ruled paper,
   no dividers; the filters plain small words; the search a magnifier that opens; the way back a small word at the end
   of a line under the pointer. ---- */
.inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="off"].is-open > .off-body { position: relative; padding: 10px 16px 12px; background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, #6a8fb5 20%, transparent) 31px 32px); background-position: 0 40px; }
.off-pile[data-stack="off"] .off-list .inbox-done.off-line { grid-template-columns: 16px minmax(0, 1fr) auto; min-height: 32px; border: 0 !important; background: none; }
.off-pile[data-stack="off"] .off-chips { gap: 14px; padding: 0 40px 6px 0; }
.off-pile[data-stack="off"] .off-chip { min-height: 24px; padding: 0; font: 500 var(--t-xs)/1 var(--font); letter-spacing: .02em; }
.off-pile[data-stack="off"] .off-chip:has(input:checked) { font-weight: 700; text-decoration: none; }
.off-find { position: absolute; top: 8px; right: 12px; z-index: 1; }
.off-find > summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.off-find > summary::-webkit-details-marker { display: none; }
.off-find > summary .sketch { width: 16px; height: 16px; }
.off-find > summary:hover { color: var(--fg); background: var(--sunken); }
.off-find[open] { position: static; }
.off-find[open] > summary { position: absolute; top: 8px; right: 12px; }
.off-find[open] .off-search { margin: 0 0 4px; }
.off-find .off-search label { border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; border-radius: 0; background: none; }
.off-find .off-search label > .sketch { display: none; }
.off-pile[data-stack="off"] .off-line .off-way { min-width: 0; }
.off-pile[data-stack="off"] .off-line .inbox-takeback { min-height: 24px; padding: 0 2px; border: 0; background: none; font: 500 var(--t-xs)/1 var(--font); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.off-pile[data-stack="off"] .off-line .inbox-takeback:hover { color: var(--fg); }

/* ---- The photos without frames (his word: "Die Rahmen machen keinen Sinn"): the pictures themselves, rounded, a soft
   shadow, a hairline in the paper's colour ---- */
.photo { border: 0; outline: 0; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent), 0 2px 8px rgb(20 30 25 / .16); }
.gal-sheet { padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent), 0 2px 8px rgb(20 30 25 / .16); overflow: hidden; }
/* the ruling is the lines' own (so it always sits under the words) */
.inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="off"].is-open > .off-body { background-image: none; }
.off-pile[data-stack="off"] .off-list .inbox-done.off-line { height: 32px; min-height: 0; align-items: end; padding: 0 4px 3px; border-bottom: 1px solid color-mix(in srgb, #6a8fb5 22%, transparent) !important; }
.off-pile[data-stack="off"] .off-line .off-open strong { font-size: .95rem; line-height: 1.2; }
.off-pile[data-stack="off"] .off-line > .shop-mark { align-self: end; margin-bottom: 3px; }
.off-pile[data-stack="off"] .off-line > .off-open { align-self: end; padding-bottom: 1px; }
.off-pile[data-stack="off"].is-open .desk-obj { display: grid; }

/* ---- The notes as a small list at the block (his word, 4 October: "Liste direkt an der Maus, ohne dass die Memos
   weggehen"): the block stays; the list opens beside it, "+ New note" first, a line per note (a click opens it);
   a click beside it or Escape closes it. A phone: a small sheet from the bottom. ---- */
#inbox .inbox-stacks.stack-tabs > [data-stack="notes"] { display: block; position: relative; }
.off-pile[data-stack="notes"].is-open .desk-obj { display: block !important; }
.inbox-stacks.stack-tabs .inbox-stack.off-pile[data-stack="notes"].is-open .inbox-stack-head.off-head { padding: 0; border: 0; background: none; box-shadow: none; }
.off-pile[data-stack="notes"] .off-fold { display: none !important; }
#inbox .inbox-stacks.stack-tabs .inbox-stack[data-stack="notes"].is-open > .inbox-pile-sheets { position: absolute; z-index: 30; left: calc(100% - 24px); bottom: 24px; width: 300px; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; gap: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
[data-stack="notes"] .inbox-pile-sheets .stack-search, [data-stack="notes"] .inbox-pile-sheets :is(.note-send, .note-bin), [data-stack="notes"] .inbox-pile-sheets .inbox-revising-tail { display: none !important; }
[data-stack="notes"] .inbox-pile-sheets .note-new { margin: 0; }
[data-stack="notes"] .inbox-pile-sheets .note-new-go { width: 100%; min-height: 36px; padding: 0 10px; text-align: left; text-decoration: none; border-radius: 8px; color: var(--accent); font-weight: 700; }
[data-stack="notes"] .inbox-pile-sheets .note-new-go:hover { background: var(--sunken); }
.inbox-stacks [data-stack="notes"] .inbox-pile-item.is-note { border: 0; background: none; box-shadow: none; padding: 0; }
.inbox-stacks [data-stack="notes"] .inbox-pile-sheets .note-line { padding: 0; background: none; box-shadow: none; }
.inbox-stacks [data-stack="notes"] .inbox-pile-sheets .note-open { min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--fg); }
.inbox-stacks [data-stack="notes"] .inbox-pile-sheets .note-open:hover { background: #fbeaa0; }
.inbox-stacks [data-stack="notes"] .inbox-pile-sheets .note-open .sketch { color: #8a6d14; }
@media (max-width: 860px) {
  #inbox .inbox-stacks.stack-tabs .inbox-stack[data-stack="notes"].is-open > .inbox-pile-sheets { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60vh; padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; }
}
.inbox-stacks [data-stack="notes"] .inbox-pile-sheets .inbox-pile-item { margin: 0 !important; translate: none !important; rotate: none !important; }
@media (max-width: 860px) { #inbox .inbox-stacks.stack-tabs .inbox-stack[data-stack="notes"].is-open > .inbox-pile-sheets { z-index: 80; bottom: 70px; } }
/* the mark at the line's start, centred with the title in a narrow column (his word: on the same line) */
.off-pile[data-stack="off"] .off-list .inbox-done.off-line { grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 0 4px; }
.off-pile[data-stack="off"] .off-line > .shop-mark, .off-pile[data-stack="off"] .off-line > .off-open { align-self: center; margin: 0; padding: 0; }
.off-pile[data-stack="off"] .off-line > .shop-mark { width: 18px; height: 18px; }
.off-pile[data-stack="off"] .off-line > .shop-mark .sketch { width: 16px; height: 16px; }
.off-pile[data-stack="off"] .off-line .off-open { display: flex; align-items: center; min-height: 31px; }
.off-pile[data-stack="off"] .off-line .off-open strong { line-height: 1.2; }
.off-pile[data-stack="off"] .off-line:hover .off-open strong { text-decoration-line: underline; text-underline-offset: 3px; }
.off-pile[data-stack="off"] .off-line[data-g="done"]:hover .off-open strong, .off-pile[data-stack="off"] .off-line[data-g="trash"]:hover .off-open strong { text-decoration-line: line-through underline; }
.off-pile[data-stack="off"] .off-body { padding-top: 40px !important; }
.shop-mark[data-g="trash"] { color: var(--muted); }
.off-pile[data-stack="off"] .off-body { padding-top: 34px !important; }

/* the answers take one fixed width (one tile or two, set at the right), so the text stands the same in every row */
@media (min-width: 861px) {
  #inbox .inbox-groups .inbox-row > .inbox-actions { width: 200px; box-sizing: border-box; justify-content: flex-end; }
}
@media (max-width: 860px) {
  #inbox .inbox-groups .inbox-row > .inbox-actions { width: 158px; justify-content: flex-end; }
}
@media (max-width: 860px) {
  /* a phone keeps the title room: the pictures wait on the card's page; two smaller tiles */
  #inbox .inbox-groups .inbox-row .inbox-content > .inbox-fan { display: none; }
  #inbox .inbox-groups .inbox-row > .inbox-actions { width: 140px; gap: 4px; }
  #inbox .inbox-groups .inbox-row .inbox-answer, #inbox .inbox-groups .inbox-row .inbox-answer.is-wide { width: 68px; height: 72px; }
  #inbox .inbox-groups .inbox-row button.row-mark { width: 32px; margin: 0 -2px 0 -6px; }
}

/* ---- The selection bar, drawn (his word, 4 October): paper, an ink outline in the pen's line, a slight turn; "N
   selected", then the ways as drawn signs with words: the pull-tag (Later: the rows go down into Off the desk), the
   duck (Egal), the tick (Read, with infos), the bin (Shred, muted red), the cross ---- */
.sel-bar { background: var(--surface); color: var(--fg); padding: 6px 8px 6px 18px; border-radius: 6px 10px 7px 9px / 9px 6px 10px 7px; box-shadow: 0 0 0 1.6px var(--fg), 4px 5px 0 -1px color-mix(in srgb, var(--fg) 12%, transparent), 0 10px 24px -12px rgb(20 30 25 / .35); rotate: -.6deg; }
.sel-n { font: 700 var(--t-sm)/1 var(--display); margin-right: 10px; }
.sel-bar button { min-height: 48px; padding: 0 12px; border-radius: 8px; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); }
.sel-bar button:hover, .sel-bar button:focus-visible { background: var(--sunken); }
.sel-bar .sketch { width: 20px; height: 20px; }
.sel-bar .sel-later svg { width: 15px; height: 30px; margin: -6px 0 -2px; overflow: visible; fill: none; stroke: var(--stamp-ink-later); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 0; transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.sel-bar .sel-later .tag-paper { fill: var(--surface); }
.sel-bar .sel-later .tag-lines { opacity: .55; }
.sel-bar .sel-later:hover svg { transform: rotate(5deg) translateY(2px); }
.sel-bar .sel-shred { color: color-mix(in srgb, var(--urg-critical) 75%, var(--fg)); }
.sel-bar .sel-clear { width: 44px; padding: 0; opacity: .7; }
.sel-bar .sel-clear .sketch { width: 16px; height: 16px; }
.sel-bar .sel-clear:hover { opacity: 1; }
@media (max-width: 860px) {
  .sel-bar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); rotate: none; padding: 4px 4px 4px 12px; justify-content: space-between; }
  .sel-bar button { min-height: 48px; padding: 0 8px; gap: 5px; }
  .sel-n { font-size: var(--t-xs); margin-right: 2px; }
}
/* no Later on the row any more: it is in the selection bar (and L, and the card's page) */
.inbox-groups .inbox-row .inbox-when .inbox-tabs .inbox-later { display: none; }
.sel-bar .sel-clear .sketch { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* while cards are chosen, the bar has the bottom: the note and the corner step aside */
:root.is-choosing .curl { opacity: 0; pointer-events: none; }

/* ---- The foot's three objects on one line (his word, 4 October): the same box for each, the words under them on one
   baseline; the list straight ---- */
#inbox .inbox-groups > .inbox-stacks.stack-tabs { align-items: start !important; }
#inbox .inbox-stacks.stack-tabs > * { margin: 0 !important; align-self: start; }
#inbox .inbox-stacks.stack-tabs .inbox-stack-title { margin: 0 !important; }
#inbox .inbox-stacks.stack-tabs .desk-obj { box-sizing: border-box; height: 132px !important; min-height: 0; }
#inbox .inbox-stacks.stack-tabs .shop-slip { rotate: 0deg; overflow: hidden; }
@container rows (max-width: 600px) { #inbox .inbox-stacks.stack-tabs .desk-obj { height: 76px !important; } }
#inbox .inbox-stacks.stack-tabs > .media-pile { gap: 12px !important; }
#inbox .inbox-groups > .inbox-stacks.stack-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* /card.css */
/* 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,
.focus-opt[data-state="done"].is-advised { --advice-under: 1; --advice: color-mix(in srgb, var(--surface) 82%, var(--tone-pen)); --marker: .95; }
/* 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-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.event:hover .event-time, .event:focus-visible .event-time { opacity: 1; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.composer textarea:focus-visible { outline: none; }
.agent-invite-go:hover, .agent-invite-go:focus-visible { background: var(--sunken); color: var(--fg); }
.agent-invite-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crown-toggle:hover, .crown-toggle:focus-visible { opacity: 1; scale: 1.12; }
@media (hover: hover) {
  .agent-row .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible), .pane-who .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible) { opacity: 1; }
}
button.agent-badge:hover, button.agent-badge:focus-visible { scale: 1.08; }
.inbox-go:hover .sketch, .inbox-go:focus-visible .sketch { translate: 5px 0; color: var(--fg); }
.inbox-revising-open:hover strong, .inbox-revising-open:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.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-tab-act:focus-visible { outline: 0; }
: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-shred:is(:hover, :focus-visible, .is-unfolded) { color: var(--urg-critical); }
.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); }
.desk-invite-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 861px) {
  .inbox-gutter:is(:hover, :focus-visible)::after { opacity: 1; }
  .inbox-gutter:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}
.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; }
@media (min-width: 861px) {
  .rail-fold:hover, .rail-fold:focus-visible { color: var(--fg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
}
.topbar #brand-doors .menu-foot button:hover, .topbar #brand-doors .menu-foot button:focus-visible { background: var(--sunken); }
.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; }
/* 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)); }
}
.says-back:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }
/* 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; }
@media (prefers-reduced-motion: reduce) {
  .focus .focus-card[data-out="sent"], .focus .focus-card[data-out="later"] { animation: row-fade 160ms linear forwards !important; }
}
.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; }
.cardclip-offer:hover, .cardclip-offer:focus-within { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.quick:not(:focus-within) .cardclip-offer { display: none; }
.rowmenu-in button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.inbox-stacks .stack-search label:focus-within { border-bottom-color: var(--fg); color: var(--fg); }
.off-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.off-open:hover strong, .off-open:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.off-more:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
a.agent-badge:hover, a.agent-badge:focus-visible { scale: 1.08; }

/* 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; }
.rh:hover .rh-open, .rh-open:focus-visible, .rh.is-capped .rh-open, .rh.is-wide .rh-open { opacity: 1; pointer-events: auto; }/* A card's own page (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%; min-width: 96px; }  /* (the arrows keep their sides while the picture is still being decrypted) */
.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-video { margin: 0; height: 100%; max-width: 100%; }
.tc-video video { display: block; height: 100%; max-width: 100%; width: auto; border-radius: var(--r-md); background: #000; box-shadow: 0 0 0 1px var(--line); }
.tc-thumb-video { display: grid; place-items: center; background: #1d1d1f; color: #fff; }
.tc-thumb-video .tc-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.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-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-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-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; }

/* A card's picture, large (picturePage): it fits the width and scrolls; a click shows it at its own size (both ways)
   and back. The card's answer stands at the right (a phone: a bar at the foot), always in reach. */
.t-picture.is-deciding { --answer-w: 340px; grid-template-columns: minmax(0, 1fr) var(--answer-w); grid-template-rows: auto minmax(0, 1fr); }
.t-picture.is-deciding > .t-picture-bar { grid-column: 1 / -1; }
.t-picture.is-deciding > .t-picture-view { grid-column: 1; grid-row: 2; display: flex; overflow: auto; overscroll-behavior: contain; padding: 0 14px 14px; cursor: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.t-picture.is-deciding > .t-picture-view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.t-picture.is-deciding .t-picture-fit { flex: none; margin: auto; max-width: 100%; max-height: none; cursor: zoom-in; }
.t-picture.is-deciding .t-picture-fit img { width: auto; height: auto; max-width: 100%; max-height: none; object-fit: initial; }
.t-picture.is-deciding:has(.t-picture-zoom:checked) .t-picture-fit { max-width: none; cursor: zoom-out; }
.t-picture.is-deciding:has(.t-picture-zoom:checked) .t-picture-fit img { max-width: none; }
.t-picture.is-deciding .tc-step.is-next { right: calc(var(--answer-w) + 14px); }
.t-picture-answer { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: -1px 0 0 var(--line); scrollbar-width: thin; }
.t-picture-answer .tc-answer { flex: none; overflow: visible; }
.t-picture-answer .tc-revise-form { top: auto; bottom: calc(100% + 8px); }
.t-picture-later { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); }
.t-picture-later .sketch { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .t-picture.is-deciding { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .t-picture.is-deciding > .t-picture-view { padding: 0 8px 8px; }
  .t-picture.is-deciding .tc-step.is-next { right: 14px; }
  .t-picture-answer { grid-column: 1; grid-row: 3; max-height: 46dvh; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgb(0 0 0 / .06); }
  .t-picture-answer .tc-answer { gap: 8px; }
  .t-picture-answer .tc-opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
  .t-picture-answer .tc-opt { min-height: 44px; padding: 8px 30px 8px 12px; }
  .t-picture-answer .tc-opt-detail { display: none; }
  .t-picture-answer .tc-opt-note { grid-column: 1 / -1; }
  .t-picture-answer .tc-or { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 6px; }
  .t-picture-answer .tc-or > i { display: none; }
  .t-picture-answer .tc-or > .tc-whatever { min-height: 48px; }
  .t-picture-answer .tc-or-pair { gap: 6px; }
  .t-picture-answer .tc-or-pair .tc-tile, .t-picture-answer .tc-info-ways .tc-tile { min-height: 48px; }
  .t-picture-answer .tc-or-pair:has(.tc-revise[open]) { grid-template-rows: auto auto; }
  .t-picture-answer .tc-revise-form { position: static; grid-column: 1 / -1; }
  .t-picture-later { margin-top: 8px; min-height: 32px; }
}

/* "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; }

/* ---- marks on the card: the pen's ink over the left column, a written note at a paragraph (card.mjs) ---- */
.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 <meta name="view-transition">) ---- */
.tc-card { view-transition-name: tc-card; }

/* ---- 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 (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; }/* The viewer of something a session published (session.mjs assetPage, /s/<id>/a/<object>): the bar of the
   picture page (turbo.css .t-picture), the note under it, the thing as large as the page lets it be. Sober: what an
   agent made is shown as it is, nothing drawn around it. */
.t-picture.as-view { grid-template-rows: auto auto minmax(0, 1fr); }
.t-picture.as-view:not(:has(.as-note)) { grid-template-rows: auto minmax(0, 1fr); }
.as-view .t-picture-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg:hover .say,
.ask-card:hover .say,
.focus-title:hover .say,
.say:focus-visible,
.say[data-say] { opacity: 1; }
.focus-card:hover .focus-title .say { opacity: .7; }
.say:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The question of the window: at the end of its title. */
.focus-title > .say { width: 30px; height: 30px; margin: -6px 0 -2px 8px; }

@media (hover: none) {
  .say, .focus-card:hover .focus-title .say { opacity: .62; }
}

/* The agent's advice on a tile: a line under the words, until the drawn marker's island stands. */
.focus-opt.is-advised .focus-opt-label { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--advice, var(--accent)) 30%, transparent) 55%); }
#says-host .says-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
a.focus-stage-step,
a.focus-back-desk { text-decoration: none; }
a.focus-stage-step { display: grid; place-items: center; }
label.focus-opt { cursor: pointer; }
label.focus-opt > input { position: absolute; opacity: 0; pointer-events: none; }
label.focus-opt:has(> input:checked) { border-color: var(--accent); }
div.focus-opt { cursor: default; }
.focus-card .inbox-tab { align-self: flex-start; }

/* One picture, large, at its own address (/q/<n>/p/<i>): the browser's Back closes it. */
.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-bar .t-picture-back { position: static; min-width: 0; max-width: 46vw; }
.t-picture-bar .t-picture-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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-where b { color: var(--fg); font-weight: 600; }
.t-picture-view { display: grid; place-items: center; min-height: 0; padding: 0 14px 14px; cursor: zoom-out; }
.t-picture-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--surface); }
.t-picture .focus-stage-step { position: fixed; top: 50%; }
.t-picture .focus-stage-step.is-prev { left: 14px; }
.t-picture .focus-stage-step.is-next { right: 14px; }

.focus-opt.is-advised .focus-opt-label { width: fit-content; }
.t-menu button:hover, .t-menu button:focus-visible { background: var(--sunken); }
.session-filter-menu a:hover, .session-filter-menu a:focus-visible { background: var(--sunken); }
.files-close:hover, .files-close:focus-visible { background: var(--sunken); color: var(--fg); }
.files-jump:hover, .files-jump:focus-visible { background: var(--sunken); }
.focus-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); }
.t-opt-links ul { margin: 4px 0 0; padding-left: 1.1em; }
.t-picture-fit { position: relative; display: inline-block; max-width: 100%; max-height: 100%; }
.t-picture-fit img { display: block; }
/* The way back from a large picture (focus.css hides .focus-back-desk outside the card's window): shown in the bar, for a session's picture and a card's alike. */
.t-picture-bar .t-picture-back { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.t-picture-bar .t-picture-back .focus-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#session .pane-who:hover .crown-toggle[aria-pressed="false"], #session .pane-who .crown-toggle:focus-visible { opacity: .5; }
.inbox-next > .inbox-go:hover, .inbox-next > .inbox-go:focus-visible { color: var(--fg); }
.topbar #brand-doors button.menu-desk-add:is(:hover, :focus-visible) { color: var(--fg); }
.news-tick:hover .sketch, .news-tick:focus-visible .sketch { opacity: 1; }
.news-tick:hover, .news-tick:focus-visible { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.news-open:hover, .news-open:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.media-pile:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

/* /session.css */
/* 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; }

/* 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; }

/* ---- 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); }
.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-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); }
#chat, #scribble { flex: 1; min-width: 0; min-height: 0; display: none; position: relative; }
body[data-view="chat"] #chat { display: flex; overflow-x: auto; }
/* 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); }
/* 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 { visibility: visible; }
body[data-filter] .jump { display: none; }
.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; }
.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); }
: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); }
.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-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 (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-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; }
}

/* 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.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; }

/* 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; }
.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); }

/* ---- 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); }

.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 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::placeholder { color: var(--faint); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 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); }
@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; }
}
.pane-who { position: relative; }
.pane-who .crown-toggle { left: 4px; top: calc(50% - 32px); }

/* ---- a question inside the conversation: the same row as in the inbox, where it was asked ---- */
.ask { margin-top: var(--s-4); }
/* A session on its own: the question is the Desk's row itself, answerable in the stream. */
.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); }
/* 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; }
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]) .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; }
}
/* 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; }
}
/* 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 (session.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); }

/* ---- 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); }
.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); }
@media (max-width: 860px) {
  #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 { 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; }
  body[data-view="scribble"]:not([data-pair]) .pane-title { display: none; }
  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); }
  .pane-list { padding-block: var(--s-5) var(--s-8); }

  .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; }
  #chat .rich pre code { font-size: .8rem; }
}
.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); }
@media (max-width: 860px) {

  /* 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%; }
  .msg-details summary { min-height: 40px; }
  .composer-file { height: 34px; }
  /* 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%; }
}/* A session's title on a wide window, and the view of sessions laid together.
   One session is one stream: 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 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) {

  /* ---- 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; }

  /* ---- 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] #chat { grid-column: 2; grid-row: 2; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); }
  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; }
}
body[data-pair][data-filter="questions"] .log { visibility: visible; }
/* 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; }
}
@media (max-width: 860px) {
  body[data-pair][data-joined-list][data-view="chat"]:not([data-page]) #chat { display: none; }
}
@media (min-width: 1200px) {
  body[data-pair][data-view="chat"]:not([data-page]):not([data-scope="all"]) #session { position: relative; }
  body[data-talk-drag] #session :is(iframe, .rh-frame) { pointer-events: none; }
  body[data-pair][data-talk-folded] #chat { display: none !important; }
}
.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); }

/* 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 .cardclip-chip, .quick .cardclip-offer { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.pane-list .inbox-row.is-current::before { display: none; }/* 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) { -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-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; }
}

/* ---- 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; }
.as-view .as-copy { flex: none; margin-left: auto; }
.as-note { margin: 0; padding: 0 18px 10px; color: var(--muted); font-size: var(--t-sm); text-wrap: pretty; }
.as-stage { min-height: 0; display: flex; flex-direction: column; padding: 0 14px 14px; }
.as-stage[data-type="image"], .as-stage[data-type="video"], .as-stage[data-type="audio"], .as-stage[data-type="file"] { align-items: center; justify-content: center; }
/* The published page gets the room: a sheet with a hairline, edge to edge on a phone. */
.as-frame-box { position: relative; flex: 1; min-height: 0; border-radius: var(--r-sm); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
.as-frame-box > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.as-wait { margin: auto; padding: var(--s-6); color: var(--faint); font-size: var(--t-sm); }
.as-media { display: block; max-width: 100%; max-height: 100%; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); }
audio.as-media { width: min(100%, 560px); box-shadow: none; }
video.as-media { background: #000; }
.as-file, .as-problem { max-width: 560px; padding: var(--s-5) var(--s-6); border-radius: var(--r-sm); background: var(--surface); }
.as-file { display: grid; gap: var(--s-2); justify-items: start; box-shadow: 0 0 0 1px var(--line-strong); }
.as-file-name { font: 500 var(--t-md)/1.3 var(--mono); overflow-wrap: anywhere; }
.as-problem { margin: auto; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.as-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); padding: 0 1.3em; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; }
@media (max-width: 600px) {
  .as-stage[data-type="html"] { padding-inline: 0; padding-bottom: 0; }
  .as-frame-box { border-radius: 0; box-shadow: none; }
}

/* Where it stands. An agent's message: beside the time. */
.msg-head > .say { margin: -4px 0 -4px -4px; }
/* The human's own: to the left of the bubble. */
.bubble:has(> .say) { position: relative; }
.bubble > .say { position: absolute; right: calc(100% + 4px); top: 50%; margin-top: -13px; }
/* A session's heading: its mark and its name, each the control that changes it. */
.t-session-edit { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.t-head-mark, .t-head-name { display: block; }

/* ---- the session page (worker A: session.mjs, t/islands/composer.js) ---- */
/* The log begins at its end and stays there while messages arrive, without a script: a reversed column scrolls
   from its end, and what is put in above (the earlier messages) does not move what is in view. */
#session .log { display: flex; flex-direction: column-reverse; }
#session .log-inner { flex: none; }
/* The frame the earlier messages are loaded into is no box: they are lines of the log like the others. */
turbo-frame.log-earlier { display: contents; }
.log-earlier-link { align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: var(--s-4); padding: 0 14px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.log-earlier-link:hover { color: var(--fg); }
.log-earlier-link b { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.log-earlier-link.is-later { margin: var(--s-6) 0 0; }
turbo-frame.log-earlier[busy] > .log-earlier-link { opacity: .5; pointer-events: none; }
#session a.shot { cursor: zoom-in; }
#session a.event { text-align: left; user-select: text; -webkit-user-select: text; }
#session a.msg-about { text-align: left; }
/* What the session is at, at the end of the conversation: one quiet line per piece of running work. */
.session-status { display: grid; gap: 6px; justify-items: start; margin-top: var(--s-6); }
.session-status[hidden] { display: none; }
.status-line { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; color: var(--muted); font-size: var(--t-sm); }
.status-line b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 600; }
.status-line[data-state="done"] b { color: var(--muted); font-weight: 500; }
.status-line[data-state="decision"] .status-mark { color: var(--urg-high); }
.status-line[data-state="done"] .status-mark { color: var(--faint); }
.session-status .working { margin-top: var(--s-2); }
/* The composer: the clip is the label of a real file field; the chosen files stand above the words. */
.composer-clip { cursor: pointer; }
.composer .composer-file { cursor: default; }
.composer-file-off { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; font: 400 15px/1 var(--font); color: var(--muted); cursor: pointer; }
.composer-file-off:hover { background: var(--fg); color: var(--bg); }
/* The heading's controls (ui.mjs), on the heading's line under the band: the name in the heading's letters. */
#session .pane-who .t-head-name strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
#session .pane-who .t-session-edit { min-height: 44px; align-items: flex-start; }
/* Messages that arrive while one reads further up do not move what is in view: the controller "log" keeps the place. */
#session .log { overflow-anchor: none; }
#session .jump[hidden], #session .open-jump[hidden] { display: none; }
.empty-pick { text-align: center; }
.session-past { display: grid; justify-items: start; }
.session-past .event { margin-top: 0; }
a.open-jump { text-decoration: none; }
/* The filter beside the composer (session.mjs sessionFilters): one quiet line icon at the bar's right; its menu
   opens upward, the one in view ticked; a dot on the icon while a filter is on. */
#session .session-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
#session .session-compose > :not(.composer, .session-filter) { grid-column: 1 / -1; }
.session-filter { margin-bottom: 7px; }
/* (session.css keeps a row free under the composer for the old pills; on a wide screen nothing stands there now.
   A phone keeps it: the memo button sits in it.) */
@media (min-width: 861px) { body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); }
}
.session-filter-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.session-filter-btn:hover, .session-filter[open] > .session-filter-btn { color: var(--fg); border-color: var(--line-strong); }
.session-filter[data-on] > .session-filter-btn { color: var(--fg); border-color: var(--line-strong); }
.session-filter-btn .ico { width: 19px; height: 19px; }
.session-filter-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.session-filter-menu.t-pop { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
.session-filter-menu a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 8px; border-radius: var(--r-sm); color: var(--fg); font-size: var(--t-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.session-filter-menu a[aria-current="true"] { font-weight: 700; }
.session-filter-tick { width: 16px; height: 16px; visibility: hidden; }
.session-filter-menu a[aria-current="true"] .session-filter-tick { visibility: visible; }
.session-filter-menu b { margin-left: auto; 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; }
.session-filter-menu b:empty { display: none; }
@media (max-width: 860px) {
  .session-filter { margin-bottom: 6px; }
  .session-filter-btn { width: 40px; height: 40px; }
  #session .session-compose { column-gap: 6px; }
}

/* ---- the session's files (session.mjs filesChip, filesDrawer; controller "files"): "N files"
   beside the quiet line opens a drawer from the right, the conversation stays; on a phone "Files (N)" in the filter
   menu opens it as a sheet from below. Sober: lines and tokens, nothing drawn. ---- */
#session .pane-now .files-chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 1px 9px 1px 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font: 600 var(--t-xs)/1.5 var(--font); text-decoration: none; white-space: nowrap; }
#session .pane-now .files-chip .ico { width: 13px; height: 13px; }
#session .pane-now .files-chip span { overflow: visible; min-width: 0; }
#session .pane-now .files-chip:hover, #session[data-files-open] .pane-now .files-chip { color: var(--fg); background: var(--sunken); }
.session-filter-files .session-filter-tick { visibility: visible; }
@media (min-width: 861px) { .session-filter-menu .session-filter-files { display: none; }
}
.files-drawer { position: fixed; z-index: 60; top: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + 68px); width: min(380px, calc(100vw - 2 * var(--s-3))); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.files-drawer[hidden] { display: none; }
.files-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.files-head h3 { margin: 0; font: 800 1.1rem/1 var(--display); }
.files-close { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.files-close .ico { width: 18px; height: 18px; }
.files-frame { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.files-frame[busy]:empty::before { content: ""; display: block; margin: var(--s-6) auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: transparent; animation: files-turn .8s linear infinite; }
.files-list { padding: 4px 8px 12px; }
.files-sum { margin: 8px 10px 4px; color: var(--muted); font-size: var(--t-xs); }
.files-group { display: grid; gap: 8px; padding: 10px; }
.files-group + .files-group { border-top: 1px solid var(--line); }
.files-group-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.files-where { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; color: var(--fg); text-decoration: none; }
.files-where b { flex: none; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.files-where b time { font: inherit; }
.files-where span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 600; }
a.files-where:hover span { text-decoration: underline; }
.files-jump { flex: none; display: inline-flex; align-items: center; gap: 1px; padding: 3px 4px 3px 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); font-size: .72rem; font-weight: 600; text-decoration: none; }
.files-jump .ico { width: 13px; height: 13px; }
.files-thumbs { display: flex; align-items: center; gap: 6px; }
.files-thumb { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--sunken); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.files-thumb.asset-preview { grid-area: auto; width: 64px; height: 44px; }
.files-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.files-thumb .asset-glyph { width: 22px; height: 22px; }
.files-thumb.asset-preview > iframe { display: none; }
.files-more, .files-empty { color: var(--muted); font-size: var(--t-xs); }
.files-empty { margin: var(--s-4) 10px; line-height: 1.4; }
#session .is-jumped { animation: files-jumped 1.8s var(--ease-out); border-radius: var(--r-md); }
@media (min-width: 1280px) { #session[data-files-open] { padding-right: 392px; }
}
@media (max-width: 860px) {
  .files-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(74vh, 640px); padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: var(--r-xl) var(--r-xl) 0 0; z-index: 2700; }
}
@media (prefers-reduced-motion: reduce) { #session .is-jumped { animation-duration: .01s; box-shadow: 0 0 0 3px var(--accent); }
}
.session-past { grid-template-columns: minmax(0, 1fr); }
.session-cards > .hist-heading { margin-top: var(--s-8); }
#session .pane-who .crown-toggle[aria-pressed="false"] { opacity: 0; }
/* Stopped (cards Nr. 202/203): the raised hand, solid red, means the SESSION is really stopped (server/blocked.mjs);
   the knock (warm orange) stays the sign of an urgent card. One colour each. Sidebar badge, the Desk box, a session's
   heading, the Agents line. */
.agent-badge[data-state="blocked"], .agent-badge[data-state="blocked"][data-offline], .desk-blocked, .t-blocked { color: var(--urg-critical); }
.agent-badge[data-state="blocked"] .hand-loop, .desk-blocked .hand-loop, .t-blocked .hand-loop { fill: var(--urg-critical); stroke: var(--urg-critical); }
/* Quiet (not a stop): a grey hint, no hand. */
.t-quiet { color: var(--faint); font-size: var(--t-xs); white-space: nowrap; }
.agent-badge[data-state="blocked"] .hand-pen, .desk-blocked .hand-pen, .t-blocked .hand-pen { stroke: var(--surface); stroke-width: 1.7; }
.t-blocked { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 4px; font: 600 .8rem/1.2 var(--font); }
.t-blocked .hand-mark { position: static; flex: none; width: 26px; height: 26px; }
.t-blocked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .t-blocked span { display: none; }
}
/* Long Desk lists: rows out of sight are not laid out or painted until they come near. */
#desk-list .inbox-row, .log .msg { content-visibility: auto; contain-intrinsic-size: auto 172px; overflow-clip-margin: 80px; }

/* ---- the pile "Media N" in #desk-stacks, beside Notes and "Off the desk": prints fanned, the newest on top ---- */
.inbox-stacks.stack-tabs > .media-pile { --w: 104px; --h: 74px; --step: 27px; flex: none; display: grid; gap: 10px; align-self: flex-start; color: var(--fg); text-decoration: none; }
.media-fan { position: relative; display: block; width: calc(var(--w) + (var(--n) - 1) * var(--step) + 8px); height: calc(var(--h) + 14px); }
.media-sheet { position: absolute; top: 6px; left: calc(var(--i) * var(--step)); z-index: calc(10 - var(--i)); box-sizing: border-box; width: var(--w); height: var(--h); padding: 4px; 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: calc(-3deg + var(--i) * 2.6deg); transform-origin: 50% 100%; transition: translate 140ms ease-out, rotate 140ms ease-out; }
.media-sheet:nth-child(2) { rotate: 3deg; top: 3px; }
.media-sheet:nth-child(3) { rotate: -1.5deg; top: 8px; }
.media-sheet:nth-child(4) { rotate: 5deg; top: 2px; }
.media-sheet .asset-preview { grid-area: auto; width: 100%; height: 100%; border-radius: 2px; }
.media-sheet .asset-preview::after { content: none; }
.media-sheet .asset-preview .asset-glyph { width: 24px; height: 24px; }
@media (any-hover: hover) {
  .media-pile:hover .media-sheet { translate: 0 -2px; }
  .media-pile:hover .media-sheet:nth-child(2) { translate: 6px -3px; }
  .media-pile:hover .media-sheet:nth-child(3) { translate: 12px -2px; }
  .media-pile:hover .media-sheet:nth-child(4) { translate: 18px -3px; }
}
@container rows (max-width: 600px) {
  .inbox-stacks.stack-tabs > .media-pile { order: -1; --w: 92px; --h: 64px; --step: 24px; }
}

/* /notes.css */
@media (min-width: 861px) {
  html body:not([data-scope="all"]):not([data-page]) .quick-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: notes.css) and the pad's drawing. In a session
   they stand above the composer, so they never lie on its send button. */
.quick-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);
}
.quick-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"] { background: var(--fg); color: var(--bg); }
/* 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); }
@media (max-width: 860px) {
  /* 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; }
}
@media (max-width: 860px) {
  html body:not([data-x]):not([data-y]) .topbar[data-tight] .quick-open { right: 12px; }
  /* 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; }
  /* 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%; }
}/* The memo (js/memos.js): a yellow sticky note to a session. It floats over the page where
   it was put. 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); }
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; }
/* carried: lifted off the page */
.memo.is-carried { z-index: 2700; }
.memo.is-carried .memo-slip { rotate: -1.5deg; 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-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-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, notes.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 ----
   notes.mjs 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; }
.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; }
/* 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); }

/* 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 { 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 .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"] .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; }
}

@media (prefers-reduced-motion: reduce) {
  .memo[data-state] .memo-slip,
.memo::before,
.memo::after,
.memo-env,
.memo-env *,
.agent-avatar.is-memo-landed { 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; }
}
/* A note being written is plain paper: the tape is what it gets once sent, stuck into the conversation
   (session.css .msg-note). Until then it lies on the Notes stack (desk.mjs). */
.memo-head::before { content: none; }

/* ---- A note he sent (session.mjs, msg.memo): in the flow on his side, at the time it was sent, as the slip of
   memo paper it was, held by one strip of tape at the top (the tape of the memos and the sidebar slip). Restrained:
   no bubble, a slight turn, no shadow beyond a hairline, the words in the conversation's own type. ---- */
.msg-note-at { margin-top: var(--s-3); }
.msg-note { position: relative; box-sizing: border-box; width: min(100%, 22rem); margin: 0; padding: 14px 16px 12px; rotate: -1deg;
  background: #fbe7a1; color: #3b300d; border: 1px solid color-mix(in srgb, #8a6d14 35%, transparent); border-radius: 1px; box-shadow: 0 1px 0 rgb(0 0 0 / .06); text-align: left; }
.msg-note p { margin: 0; white-space: pre-wrap; font: 400 var(--t-md)/1.45 var(--font); }
.msg-note-tape { position: absolute; left: calc(50% - 34px); top: -10px; width: 68px; height: 20px; rotate: -5deg; background: color-mix(in srgb, #e6d27a 62%, transparent); box-shadow: 0 0 0 .5px rgb(0 0 0 / .08); clip-path: polygon(3% 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.msg-note-cap { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; color: #6a5d24; font: 700 .66rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.msg-note-cap .sketch { width: 14px; height: 14px; }
.msg-note-at .msg-time { margin-top: 6px; }
:root[data-theme="dark"] .msg-note { background: #d9c35f; color: #231c06; border-color: #a58c2c; }
:root[data-theme="dark"] .msg-note-cap { color: #4d4214; }
:root[data-theme="dark"] .msg-note-tape { background: color-mix(in srgb, #fff2b8 58%, transparent); }
.msg-note-when { margin-left: auto; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: var(--t-xs); }

/* Memos (notes.mjs, t/controllers/memo*, notes.mjs): what the old sheet (quicksend.css) does not have.
   The round button is a form; a note without a place of its own stands above it; on a phone only the note he opened
   on this page is out, as the sheet. */
.memo-new { display: contents; }
@media (min-width: 861px) { .memo[data-unplaced] { left: auto; top: auto; right: var(--s-4); bottom: calc(var(--s-4) + 64px); }
}
a.memo-send { text-decoration: none; box-sizing: border-box; }
.memo-gap { flex: 1; }   /* the room between the tools and the crown (the note's look is chosen elsewhere) */
@media (max-width: 860px) { .memo:not([data-sheet]) { display: none; }
}
/* The notes that were put away hang off the round button: their number on it, the list above it on a click. */
.memo-count { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--bg); font: 700 .68rem/1 var(--font); box-shadow: 0 0 0 2px var(--bg); }
.memo-open[data-count]::after { content: none; }
.memo-away { position: fixed; z-index: 2601; right: var(--s-4); bottom: calc(var(--s-4) + 52px + env(safe-area-inset-bottom, 0px)); width: min(320px, calc(100vw - 2 * var(--s-4))); max-height: min(60vh, 420px); overflow-y: auto; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-md, 12px); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-md); }
.memo-away[hidden] { display: none; }
.memo-away form { margin: 0; }
.memo-away-line { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: 500 var(--t-sm)/1.3 var(--font); text-align: left; cursor: pointer; }
.memo-away-line:hover, .memo-away-line:focus-visible { background: var(--sunken); outline: 0; }
.memo-away-line svg { flex: none; width: 20px; height: 20px; }
.memo-away-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-away-new { font-weight: 700; }
.memo-away-float { display: none; }
@media (max-width: 860px) { .memo-away-float { display: block; }
}

/* Parity with the old board (worker "parity"): the phone's Agents button beside the memo button, the memo count of
   a phone (a floating note waits at the button there too), the index-card heading's tabs as links. */
@media (min-width: 861px) { .memo-count-phone { display: none; }
}
@media (max-width: 860px) { .memo-count:not(.memo-count-phone) { display: none; }
}

/* ---- Keep on the pile: a small drawn button beside the send (an arrow down onto a stack) ---- */
.memo-keep .memo-keep-ico { width: 20px; height: 20px; }

/* ---- The memo button: a hand-drawn sticky note right above the page's corner (his word, 4 October: drawn, like the
   rest; no circle, no flat box) ---- */
html body .quick-open.memo-open-free { width: 54px; height: 54px; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--fg); rotate: -4deg; overflow: visible; }
html body .quick-open.memo-open-free .memo-sticky { display: none; }
html body .quick-open.memo-open-free .memo-note { width: 54px; height: 54px; overflow: visible; }
.memo-note .note-fill { fill: #f5d64a; }
.memo-note .note-ink { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.memo-note .note-lines { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.memo-note .note-pencil path { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.memo-note .note-pencil .pencil-body { fill: var(--surface); }
.memo-note .note-tape { fill: rgb(255 255 255 / .55); stroke: var(--fg); stroke-width: 1; stroke-opacity: .35; }
html body .quick-open.memo-open-free:hover { rotate: -1deg; translate: 0 -2px; }
html[data-curl] body .quick-open.memo-open-free { right: calc(var(--s-4) + 4px + env(safe-area-inset-right, 0px)) !important; }
:root[data-theme="dark"] .memo-note .note-fill { fill: #d9bc3c; }
.memo-foot { flex-wrap: nowrap; }
/* the sticky never lies over the cards: in the free margin left of the page's corner, at the bottom */
/* beside the page's corner while there is room in the margin; on smaller screens above it (his word, 4 October) */
html[data-curl] body .quick-open.memo-open-free { right: calc(14px + var(--curl-edge, 0px) + env(safe-area-inset-right, 0px)) !important; bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 1380px) { html[data-curl] body .quick-open.memo-open-free { right: calc(var(--s-4) + 96px + var(--curl-edge, 0px) + env(safe-area-inset-right, 0px)) !important; bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)) !important; } }
@media (max-width: 860px) { html[data-curl] body .quick-open.memo-open-free { right: calc(10px + var(--curl-edge, 0px) + env(safe-area-inset-right, 0px)) !important; bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } }
html[data-curl] body .quick-open.memo-open-free { position: fixed !important; max-width: calc(100vw - 16px); }
/* the sidebar's note sends with the same envelope */
.side-note-body { --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"); }
:root[data-theme="dark"] .side-note-body { --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"); }

/* /agents.css */
/* ---- overview of all sessions ---- */
body[data-page="roster"] #inbox, body[data-page="roster"] #session { display: none; }
@media (min-width: 861px) {
  #session, #inbox, #ledger { grid-row: 1; }
  #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); }
}
@media (max-width: 860px) { .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); }

/* A button centres its words by itself; a link of a set height does it this way. */
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; }/* The Ledger: 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; }

/* ---- 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; }
}
.ledger-line.is-current { outline: 3px solid var(--fg); outline-offset: -3px; }
.ledger-line:focus { outline-offset: -3px; }
.ledger-acts .t-pop { left: auto; right: 0; }
.ledger-line form { margin: 0; }
.ledger-face form, .ledger-acts > form, .ledger-with form { display: contents; }
.ledger-tools > form { flex: 1 1 260px; max-width: 360px; margin: 0; }
.ledger-tools .ledger-find { max-width: none; }
a.ledger-th, a.ledger-ib, a.ledger-q, a.ledger-more, a.ledger-ans, a.ledger-link, a.ledger-sheet-item { text-decoration: none; }
a.ledger-th { min-height: 32px; align-items: center; color: var(--faint); }
a.ledger-th:hover { color: var(--fg); }
a.ledger-link { display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--line-strong); }
a.ledger-ans { display: inline-grid; margin-left: auto; }
a.ledger-more { display: inline-flex; align-items: center; }
a.ledger-sheet-item { display: flex; align-items: center; }
.ledger-mark { display: block; }
.ledger-name > .t-pick { flex: 0 1 auto; }
.ledger-rename { display: block; }
/* A main's subs stand under it, a step in. */
.ledger-line.is-sub .ledger-face { margin-left: 10px; }
.ledger-line.is-sub .ledger-face .agent-avatar { width: 31px; height: 31px; margin-top: 4px; }
/* (No transform on a line's parts: it would hold the open control under the lines that follow.) */
.ledger-line:has(details.t-pick[open]) { z-index: 5; }
.ledger-line.is-sub .ledger-name { padding-left: 12px; }
/* The main agent's choice: "belongs under", drawn; beside the name where there is room, alone where there is none. */
.ledger-main > .sketch { flex: none; width: 18px; height: 18px; margin-right: 4px; }
/* In his own order a line moves one place up or down: two small forms in the grip's place. */
.ledger-grip > form { display: grid; gap: 0; }
.ledger-grip { padding: 0; gap: 0; }
.ledger-grip button { width: 18px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--line-strong); }
.ledger-grip button .sketch { display: block; width: 16px; height: 16px; margin: auto; }
.ledger-grip button[value="up"] .sketch { scale: 1 -1; }
.ledger-line:hover .ledger-grip button, .ledger-grip button:focus-visible { color: var(--muted); }
.ledger-grip button:hover { background: var(--sunken); color: var(--fg); }
.ledger[data-sorted] .ledger-grip > form { visibility: hidden; }
/* What the hub refused: a quiet line under the session's line. */
.ledger-err { grid-column: 3 / -1; margin: -4px 0 8px; color: var(--deny); font-size: var(--t-sm); }
.ledger-open, .ledger-dots { display: none; }
.t-marks-page { position: static; margin: var(--s-6) auto; width: max-content; max-width: calc(100vw - 16px); }
@media (min-width: 861px) {
  /* The room of the last column: as wide in every line; the two choices (desk, main agent) have their own. */
  .ledger[data-desks] { --pick-desk: 100px; }
  .ledger[data-mains] { --pick-main: 120px; }
  .ledger-acts { align-items: center; }
  .ledger-acts summary.ledger-desk { display: flex; align-items: center; box-sizing: border-box; height: 34px; margin-right: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background-color: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
  .ledger-acts summary.ledger-desk > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1241px) and (max-width: 1500px) {
  .ledger[data-desks] .ledger-line, .ledger[data-mains] .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) 88px var(--acts, 132px); }
  .ledger[data-desks] .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6), .ledger[data-mains] .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6) { display: none; }
}
@media (min-width: 861px) and (max-width: 1360px) {
  /* Each choice is a small drawn button; its list says the rest. The desk's is drawn by agents.css; the main agent's is
     the pen's "belongs under" (the crown means one thing only: the crowned session of a desk). */
  .ledger-acts summary.ledger-main { background-image: none; justify-content: center; color: var(--muted); }
  .ledger-acts summary.ledger-main > .sketch { width: 20px; height: 20px; margin: 0; }
  .ledger[data-desks] { --pick-desk: 38px; }
  .ledger[data-mains] { --pick-main: 38px; }
  .ledger-acts summary.ledger-desk { margin-right: 0; border-color: transparent; }
  .ledger-acts summary.ledger-desk > span { display: none; }
  .ledger-acts summary.ledger-main[data-set] { border-color: var(--line-strong); }
}
@media (max-width: 860px) {
  /* A line is mark, name, state and "…": a tap on the line opens the session, "…" the sheet at the lower edge. */
  .ledger-pick, .ledger-acts > a.ledger-ib { display: none; }
  .ledger-dots { display: block; position: relative; z-index: 2; }
  .ledger-open { display: block; position: absolute; inset: 0; z-index: 1; }
  .ledger-tools > form { max-width: none; }
  .t-sheet form > .ledger-sheet-item:only-of-type { grid-column: 1 / -1; }
  .t-sheet form:has(> input[type="text"]) > .ledger-sheet-item { grid-column: auto; background: var(--sunken); font-weight: 600; }
  .t-sheet .ledger-sheet-item { width: 100%; box-sizing: border-box; }
}
.ledger-line[data-state="stopped"] .ledger-state { color: var(--urg-critical); }
.ledger-tabs { margin: 0 0 var(--s-4, 16px); }

/* /media.css */
body[data-page="gallery"] #inbox, body[data-page="gallery"] #session { display: none; }
body[data-page="gallery"] #gallery {
  display: block; grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface);
  padding: var(--s-4) var(--gutter) var(--s-10); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
@media (min-width: 861px) { body[data-page="gallery"] #gallery { margin-top: var(--band); }
}
.gal-column { max-width: 1160px; margin-inline: auto; display: grid; gap: var(--s-5); }
.gal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-6); }
.gal-head h2 { margin: 0; font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.gal-head p { margin: 0; font-size: var(--t-lg); color: var(--muted); }

.gal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.gal-seg { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--sunken); }
.gal-seg a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); text-decoration: none; }
.gal-seg a b { font: 500 var(--t-xs)/1 var(--font); color: var(--faint); }
.gal-seg a[aria-current] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.gal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gal-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); color: var(--fg); font: 600 var(--t-sm)/1 var(--font); text-decoration: none; background: var(--surface); }
.gal-chip:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.gal-chip-all { padding-left: 12px; }
.gal-chip[aria-current] { background: var(--tone-wash); box-shadow: 0 0 0 1.5px var(--tone-pen); }
.gal-chip .inbox-from-mark, .gal-sub .inbox-from-mark { position: static; display: inline-block; width: 22px; height: 22px; flex: none; color: var(--tone-pen); }
.gal-chip .inbox-from-mark svg, .gal-sub .inbox-from-mark svg { width: 100%; height: 100%; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 48px 32px; }
.gal-tile { display: grid; gap: 14px; min-width: 0; color: var(--fg); text-decoration: none; }
.gal-tile .asset-preview { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
.gal-tile:hover .asset-preview::after { box-shadow: inset 0 0 0 1.5px var(--fg); }
.gal-file { display: grid; place-items: center; align-content: center; gap: 6px; }
.gal-ext { font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.gal-meta { display: grid; gap: 3px; min-width: 0; }
.gal-meta strong { font: 600 15px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta small { color: var(--faint); font: 500 var(--t-xs)/1.2 var(--font); }
.gal-sub { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.gal-sub .inbox-from-mark { width: 18px; height: 18px; }
.gal-who { overflow: hidden; text-overflow: ellipsis; }
.gal-dot { color: var(--faint); }

@media (max-width: 860px) {
  body[data-page="gallery"] #gallery { grid-column: 1; grid-row: 3; padding: var(--s-4) var(--gutter) var(--s-8); }
  .gal-head h2 { font-size: 2rem; }
  .gal-head p { font-size: var(--t-sm); }
  .gal-filters { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .gal-seg { display: flex; } .gal-seg a { flex: 1; justify-content: center; padding: 0 6px; }
  .gal-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
  .gal-chip { flex: none; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}
.media-sheet :is(.asset-page-label, .gal-ext) { display: none; }
.media-sheet .gal-play { width: 26px; height: 26px; }
.media-sheet .gal-play svg { width: 14px; height: 14px; }

/* a video: its first frame (the decrypted blob, muted, never playing here) under a round play mark */
.asset-preview.gal-video { background: #1d1d1f; color: rgb(255 255 255 / .55); }
.asset-preview.gal-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gal-play { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(0 0 0 / .55); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.gal-play svg { width: 20px; height: 20px; fill: #fff; translate: 1px 0; }

/* fixes: the preview fills its tile (app.css gives it a grid area and a fixed size); the crown stays in the sidebar */
.gal-tile .asset-preview { grid-area: auto; }
:is(.gal-page, .media-pile) .crown-mark { display: none; }
.gal-page .inbox-from-mark { position: relative; overflow: visible; }
.gal-count { position: absolute; z-index: 1; right: 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; }
.gal-tile, .gal-meta { text-align: left; justify-items: stretch; }
.gal-column { grid-template-columns: minmax(0, 1fr); } .gal-filters > * { min-width: 0; }
.gal-none { color: var(--muted); }

/* the stack of one decision: up to three sheets of paper, the first on top, the others peeking out turned */
.gal-fan { position: relative; display: block; aspect-ratio: 4 / 3; margin: 6px 10px 8px 6px; }
.gal-sheet { position: absolute; inset: 0; padding: 5px; background: var(--surface); border: 1.4px solid var(--fg); border-radius: 4px 7px 4px 6px / 6px 4px 7px 4px; box-shadow: 0 1px 3px var(--shade); transform-origin: 50% 100%; transition: translate 140ms ease-out; }
.gal-sheet[data-s="0"] { z-index: 3; rotate: -1deg; }
.gal-sheet[data-s="1"] { z-index: 2; rotate: 3.5deg; translate: 12px -2px; }
.gal-sheet[data-s="2"] { z-index: 1; rotate: -3deg; translate: -8px 0; }
.gal-sheet .asset-preview { position: absolute; inset: 5px; width: auto; height: auto; aspect-ratio: auto; border-radius: 2px; }
.gal-sheet .asset-preview::after { content: none; }
.gal-tile:hover .gal-sheet[data-s="0"] { translate: 0 -2px; }
.gal-tile:hover .gal-sheet[data-s="1"] { translate: 18px -3px; }
.gal-tile:hover .gal-sheet[data-s="2"] { translate: -12px 0; }
.gal-sheet .asset-page-label { display: none; }
@media (max-width: 860px) { .gal-grid { gap: 32px 24px; } .gal-fan { margin: 6px 14px 8px 8px; } .gal-meta strong { font-size: var(--t-sm); } }
/* the stacks without frames (his word, 4 October): the pictures themselves, rounded, a soft shadow */
.gal-sheet { padding: 0; border: 0; border-radius: 6px; background: var(--sunken); box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent), 0 2px 8px rgb(20 30 25 / .16); overflow: hidden; }
.gal-sheet .asset-preview { inset: 0; border-radius: 6px; }
/* ---- Simpler (his word, 4 October): the kind as four drawn buttons beside the heading; each tile's title begins with
   its session's small drawing; no counts, no session chips ---- */
.gal-head { align-items: center; }
.gal-kinds { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--sunken); }
.gal-kinds a { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 9px; color: var(--muted); }
.gal-kinds a .sketch { width: 20px; height: 20px; }
.gal-kinds a:hover { color: var(--fg); }
.gal-kinds a[aria-current] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.gal-meta strong { display: flex; align-items: center; gap: 7px; min-width: 0; }
.gal-who { flex: none; display: grid; width: 18px; height: 18px; }
.gal-who .inbox-from-mark { position: static; width: 18px; height: 18px; color: var(--tone-pen); }
.gal-who .inbox-from-mark svg { width: 100%; height: 100%; }
.gal-who .crown-mark { display: none; }
.gal-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta small { display: none; }

/* /auth.css */
/* The page for people outside the room (/a/<share_id>): the shared page in a sandboxed frame, or the picture. */
#share.share { margin: 0; position: fixed; inset: 0; max-width: none; padding: 16px; overflow: auto; background: var(--bg, #fff); }
.share-frame { display: block; width: 100%; height: calc(100vh - 32px); border: 1px solid var(--line, #d8d6cf); border-radius: 12px; background: #fff; }
.share-picture { display: block; max-width: 100%; max-height: calc(100vh - 32px); margin: 0 auto; border-radius: 8px; }/* The account screens (create account, log in, Emergency Kit, pair, recover, devices, invite, settings) and the reload notice. Owner: pairing
   area (auth.mjs). Sober: the board's tokens and type; pen drawings only on the two choice buttons. */
.room { box-sizing: border-box; width: 100%; max-width: 712px; margin: 0 auto; padding: 72px 16px 96px; color: var(--fg); }
#room-screen { grid-column: 1 / -1; width: 100%; min-height: 100dvh; background: var(--bg); }
#room-screen .room { padding-top: max(48px, 10vh); }
.room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.room-head h2 { font: 700 28px/1.15 var(--display); margin: 0; }
.room-bell .brand-mark { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.room h3 { font: 650 var(--t-lg)/1.3 var(--display); margin: 0 0 12px; }
.room-section { margin: 32px 0 0; }
.room-lead { font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.room-meta { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 22px; }
.room-meta a, .room-lead a { color: var(--accent); }
.room-wait { color: var(--muted); }
.room-wait::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .55em; border-radius: 50%; background: var(--accent); animation: room-pulse 1.2s ease-in-out infinite; vertical-align: .05em; }
@media (prefers-reduced-motion: reduce) { .room-wait::before { animation: none; }
}
.room-error { color: var(--deny); font-weight: 500; }
.room-ok { color: var(--accent); font-weight: 600; }

/* tabs: Devices | Settings */
.room-tabs { display: flex; gap: 4px; margin: -4px 0 8px; border-bottom: 1px solid var(--line); }
.room-tabs a { padding: 8px 12px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.room-tabs a:hover { color: var(--fg); }
.room-tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }

/* forms and buttons */
.room-form { display: grid; gap: 14px; margin: 18px 0; }
.room-form label, .room-agent-form label, .room-handover label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.room input:not([type="checkbox"], [type="radio"]), .room select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--fg); min-width: 0; }
.room input:focus-visible, .room select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.room-check { display: flex !important; align-items: center; gap: 10px !important; font-weight: 400 !important; }
.room-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.room button, .room .room-done { font: 600 15px/1 var(--font); padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none; display: inline-block; }
.room button:hover { border-color: var(--fg); }
.room button.room-primary, .room .room-done { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.room button.room-primary:hover { background: var(--accent-hover); }
.room button.room-danger { background: var(--deny); border-color: var(--deny); color: var(--surface); margin-top: 8px; }
.room button:disabled { opacity: .5; cursor: not-allowed; }
.room-more summary, .room-gone summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; }
.room-more[open] { display: grid; gap: 12px; }
.room-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.room-inline { display: inline-block; margin: 8px 12px 0 0; }
.room-back { display: inline-block; margin-top: 14px; color: var(--muted); font-size: 14px; }
.room-mono, .room-fp { font-family: var(--mono); }
.room-hint { font-weight: 400; font-size: 13px; color: var(--muted); line-height: 1.4; }
.room-link { display: flex; gap: 8px; margin: 0 0 14px; }
.room-link input { flex: 1; font-family: var(--mono) !important; font-size: 13px !important; }

/* the two ways to add a device */
.room-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.room-way { margin: 0; display: contents; }
.room .room-way-go { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: start; text-align: left; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); text-decoration: none; font: inherit; line-height: 1.4; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out); }
.room .room-way-go:hover { border-color: var(--accent); transform: translateY(-1px); }
.room .room-way-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.room-way-go svg { grid-row: span 2; width: 36px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.room-way-go b { font: 650 17px/1.25 var(--display); }
.room-way-go span { font-size: 14px; color: var(--muted); }
.room-ways-first { margin: 22px 0 8px; }

/* pairing: the QR code, the steps, the four codes */
.room-pair { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin: 4px 0 18px; }
.room-qr { width: 232px; padding: 8px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.room-qr .qr { display: block; width: 100%; height: auto; }
.room-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.room-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 460px; margin: 6px 0 4px; }
.room-choices form { margin: 0; }
.room .room-choice { width: 100%; padding: 20px 8px; font: 600 30px/1 var(--mono); letter-spacing: .06em; border-radius: var(--r-md); border-width: 1.5px; }
.room .room-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.room-code { font: 600 52px/1.15 var(--mono); letter-spacing: .04em; word-spacing: -.3em; margin: 12px 0 18px; }
.room-code-form { display: flex; gap: 10px; }
.room .room-code-input { width: 10ch; font-family: var(--mono); font-size: 24px; letter-spacing: .2em; text-align: center; }
.room-recovery { font: 500 20px/1.6 var(--mono); letter-spacing: .04em; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); word-break: break-word; user-select: all; margin: 0; }
.room-scan { border-radius: var(--r-md); overflow: hidden; background: #000; aspect-ratio: 1; max-width: 360px; margin: 6px 0 4px; }
.room-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the members */
.room-devices { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.room-device { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.room-device.is-removed { opacity: .6; }
.room-device-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--line-strong); }
.room-device-dot[data-online="yes"] { background: var(--st-done); }
.room-device-name { display: grid; gap: 2px; min-width: 0; }
.room-device-name em { font-style: normal; font-size: 12px; color: var(--accent); }
.room-device-name small { color: var(--muted); font-size: 12px; }
.room-remove summary { cursor: pointer; font-size: 13px; color: var(--deny); list-style: none; text-align: right; }
.room-handover { margin-top: 10px; }
.room-agent-form { display: grid; gap: 10px; }
.room-remove details[open] { max-width: 260px; font-size: 13px; line-height: 1.45; }
.room-remove details[open] p { margin: 6px 0 0; }
.room-agent-form { margin-top: 14px; }
.room-agent-form button, .room-handover button { justify-self: start; }
.room-history { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.room-history legend { font-weight: 500; padding: 0; margin-bottom: 4px; width: 100%; }
.room-history label { display: flex !important; align-items: center; gap: 6px; font-weight: 400 !important; }
.room-history input { accent-color: var(--accent); width: 18px; height: 18px; }
.room-gone { margin-top: 24px; }
.room-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.room-usage div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.room-usage dt { font-size: 13px; color: var(--muted); }
.room-usage dd { margin: 4px 0 0; font: 600 20px/1.2 var(--font); }
.room-usage dd.has-bar::after { content: ""; display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--used), var(--sunken) var(--used)); }

/* "Neue Version bereit": boot.mjs adds it when the hub says this client is too old */
.room-notice { position: fixed; z-index: 1000; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 10px 10px 16px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font: 500 15px/1.3 var(--font); box-shadow: var(--shadow-lg); animation: room-rise var(--d-med) var(--ease-out); }
.room-notice-go { font: 600 14px/1 var(--font); padding: 9px 14px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--accent-fg); cursor: pointer; white-space: nowrap; }
.room-notice-go:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .room-notice-go { background: var(--accent-fg); color: var(--accent); }

@media (max-width: 600px) {
  .room { padding-top: 64px; }
  .room-head h2 { font-size: 24px; }
  .room-pair { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .room-qr { width: min(260px, 70vw); }
  .room-code { font-size: 44px; }
  .room-remove details[open] { max-width: none; }
}

/* account: password with Generate, the Emergency Kit */
.room-pwrow { display: flex; gap: 8px; }
.room-pwrow input { flex: 1; font-family: var(--mono) !important; }
.room .room-pwrow .room-gen { padding: 10px 14px; flex: none; }
.room textarea { font: 16px/1.5 var(--mono); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--fg); resize: vertical; }
.room-sub { font: 600 15px/1.3 var(--display); margin: 22px 0 8px; }
.room-kit { border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); padding: 18px 20px; margin: 8px 0 12px; }
.room-kit-title { display: flex; align-items: center; gap: 8px; font: 700 18px/1.2 var(--display); margin: 0 0 6px; }
.room-kit-title .brand-mark { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.room-kit .room-meta { margin-top: 8px; }
.room-kit-words { list-style: decimal; columns: 3 9em; column-gap: 24px; margin: 14px 0 6px; padding-left: 1.6em; font: 500 17px/1.9 var(--mono); }
@media print {
  .room-kit, .room-kit * { visibility: visible !important; }
  .room-kit { position: absolute; inset: 0 auto auto 0; width: 100%; border: 1px solid #000; color: #000; background: #fff; }
}
/* Log out: the red button and Cancel on one line; the quiet link at the foot of Settings -> Account */
.room-logout { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.room-logout .room-back { margin-top: 8px; }
.room-logout-line { margin: 18px 0 0; font-size: 14px; }
.room-logout-line a { color: var(--muted); }

/* /whiteboard.css */
/* The Sketchpad (whiteboard.mjs; called Whiteboard until 4 October): its card under the Desk box and its page, the pad
   as large as the main area. The Desk itself is cards on plain paper. */

/* ---- the drawer: a second card taped under the Desk box, pulled out of the desk (his pick, reference wb2-2) ---- */
.whiteboard-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; rotate: -4deg; }
.whiteboard-mark { color: var(--fg); }
.whiteboard-sub { display: none; }
body[data-t-view="whiteboard"] .whiteboard-row .agent-entry { background: var(--surface); box-shadow: var(--shadow-sm); }
.whiteboard-row { margin-bottom: var(--s-2); }
@media (min-width: 861px) {
  :root:not([data-rail="folded"]) .whiteboard-row { position: sticky; top: 58px; z-index: 4; margin: -16px 6px var(--s-4); }
  :root:not([data-rail="folded"]) .whiteboard-row .agent-entry { min-height: 66px; gap: 12px; padding: 10px 14px 10px 12px; border-top: 1px dashed var(--line-strong); border-radius: 0 0 14px 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); rotate: -.4deg; transition: translate 140ms ease-out, box-shadow 140ms; }
  :root:not([data-rail="folded"]) .whiteboard-row .agent-entry:hover { translate: 0 2px; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
  :root:not([data-rail="folded"]) body[data-t-view="whiteboard"] .whiteboard-row .agent-entry { box-shadow: 0 0 0 2px var(--fg), var(--shadow-sm); }
  :root:not([data-rail="folded"]) .whiteboard-row .agent-avatar.whiteboard-mark { width: 42px; height: 42px; background: none; box-shadow: none; display: grid; place-items: center; }
  :root:not([data-rail="folded"]) .whiteboard-mark svg { width: 38px; height: 38px; stroke-width: 1.7; }
  :root:not([data-rail="folded"]) .whiteboard-row .agent-text strong { font: 800 1.3rem/1.05 var(--display); letter-spacing: -.02em; }
  :root:not([data-rail="folded"]) .whiteboard-sub { display: block; margin-top: 3px; font: 500 var(--t-xs)/1.2 var(--font); color: var(--muted); white-space: nowrap; }
  /* the tape that holds it to the Desk box: a strip of translucent paper over the seam */
  :root:not([data-rail="folded"]) .whiteboard-row::before { content: ""; position: absolute; z-index: 1; left: 58%; top: -7px; width: 46px; height: 16px; rotate: 3deg; background: color-mix(in srgb, #e9dfb8 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #b9a970 35%, transparent); pointer-events: none; }
  :root[data-theme="dark"]:not([data-rail="folded"]) .whiteboard-row::before { background: color-mix(in srgb, #8a7d52 55%, transparent); }
}

/* ---- the page ---- */
#whiteboard { display: none; }
body[data-page="whiteboard"] #inbox, body[data-page="whiteboard"] #session { display: none; }
body[data-page="whiteboard"] #whiteboard { display: block; grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; position: relative; background: var(--surface); }
@media (min-width: 861px) { body[data-page="whiteboard"] #whiteboard { margin-top: var(--band); }
}
.whiteboard-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }

@media (max-width: 860px) {
  body[data-page="whiteboard"] #whiteboard { grid-column: 1; grid-row: 3; }
  /* the pad's own bar takes the foot of the screen: the memo button stands above it */
  html body[data-t-view="whiteboard"] .quick-open.memo-open-free { bottom: calc(var(--s-4) + 76px + env(safe-area-inset-bottom, 0px)) !important; }
  body[data-t-view="whiteboard"] .whiteboard-row .agent-entry { box-shadow: 0 0 0 1px var(--line-strong); }
  .whiteboard-row { margin-bottom: 0; }
  .whiteboard-mark svg { width: 22px; height: 22px; }
}

/* ---- the pad ---- */
/* The global pad. Everything is prefixed pad-; colours, shadows, radii and
   easings of the chrome come from /app.css. The paper follows the theme;
   ink colours are content and are painted by elements.js. */


.pad { position: absolute; inset: 0; overflow: hidden; background: var(--surface); color: var(--fg); font: 400 var(--t-md)/1.4 var(--font); -webkit-font-smoothing: auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.pad *, .pad *::before, .pad *::after, .pad-dialog, .pad-dialog * { box-sizing: border-box; }
.pad [hidden] { display: none !important; }
:where(.pad, .pad-dialog) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
:where(.pad, .pad-dialog) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: crosshair; }
.pad[data-cursor="select"] .pad-canvas { cursor: default; }
.pad[data-cursor="move"] .pad-canvas { cursor: move; }
.pad[data-cursor="nwse"] .pad-canvas { cursor: nwse-resize; }
.pad[data-cursor="nesw"] .pad-canvas { cursor: nesw-resize; }
.pad[data-cursor="grab"] .pad-canvas { cursor: grab; }
.pad[data-cursor="grabbing"] .pad-canvas { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .pad[data-cursor="eraser"] .pad-canvas { cursor: none; } }

.pad-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pad-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* floating chrome shares one look: a pill on the paper */
.pad-pill { display: flex; align-items: center; background: var(--surface); border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line), var(--shadow-md); }
.pad-icon-btn { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--fg); text-decoration: none; transition: background var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--ease-out); }
.pad-icon-btn:hover:not(:disabled) { background: var(--sunken); }
.pad-icon-btn:active:not(:disabled) { transform: scale(.92); }
.pad-icon-btn:disabled { color: var(--line-strong); cursor: default; }
.pad-icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.pad-icon-btn.pad-danger:hover { color: var(--deny); }
.pad-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--line); }

/* tooltips with the shortcut, for a mouse only */
@media (hover: hover) and (pointer: fine) {
  .pad [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 9; width: max-content; padding: 5px 9px; border-radius: var(--r-sm); background: var(--fg); color: var(--surface); font: 500 var(--t-xs)/1.2 var(--font); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--d-fast) .35s; }
  .pad .pad-bar [data-tip]::after, .pad .pad-selbar [data-tip]::after { top: auto; bottom: calc(100% + 8px); }
  .pad .pad-top .pad-pill:last-child [data-tip]::after { left: auto; right: 0; transform: none; }
  .pad [data-tip]:hover::after, .pad [data-tip]:focus-visible::after { opacity: 1; }
}

/* ── top bar ────────────────────────────────────────────────────────────── */
.pad-top { position: absolute; top: max(var(--s-2), env(safe-area-inset-top)); left: var(--s-2); right: var(--s-2); z-index: 3; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.pad-top > * { pointer-events: auto; }
.pad-gap { flex: 1; pointer-events: none; }
.pad-title { padding-right: var(--s-4); gap: 2px; }
.pad-title strong { font: 600 var(--t-lg)/1 var(--display); letter-spacing: -.01em; }
.pad-title span { margin-left: var(--s-2); padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
/* The Whiteboard (?place): the sidebar names the place and leads away, so no title pill (no close, no canvas name). */
[data-place] .pad-title { visibility: hidden; }
.pad-zoom { height: 44px; min-width: 58px; padding: 0 8px !important; border-radius: var(--r-pill); font: 600 var(--t-xs)/1 var(--font) !important; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--muted) !important; white-space: nowrap; position: relative; }
.pad-zoom:hover { background: var(--sunken); color: var(--fg) !important; }

/* ── empty pad ──────────────────────────────────────────────────────────── */
.pad-hint { position: absolute; left: 50%; top: 42%; margin: 0; width: max-content; max-width: calc(100% - 48px); padding: 12px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--muted); font-size: var(--t-md); text-align: center; transform: translate(-50%, -50%) rotate(-1deg); pointer-events: none; opacity: 0; transition: opacity var(--d-med); }
.pad-hint[data-show="true"] { opacity: 1; }
.pad-hint b { color: var(--fg); font-weight: 600; }

/* ── the note being typed ───────────────────────────────────────────────── */
.pad-editor { position: absolute; left: 0; top: 0; z-index: 1; min-width: 2px; min-height: 1.35em; width: max-content; margin: 0; padding: 0; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; transform-origin: 0 0; caret-color: var(--accent); user-select: text; -webkit-user-select: text; cursor: text; }
.pad-editor::after { content: ""; position: absolute; inset: -5px -8px; border-radius: 6px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.pad-editor:empty::after { box-shadow: none; }
.pad-caret-tip { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-2); color: var(--faint); font-size: var(--t-xs); white-space: nowrap; animation: pad-rise var(--d-med) var(--ease-out); }
.pad-chip { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 8px !important; border-radius: var(--r-pill); background: var(--surface) !important; color: var(--fg) !important; font: 600 var(--t-xs)/1 var(--font) !important; box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.pad-chip:not(:has(svg)) { padding-left: 12px !important; }
.pad-chip:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); color: var(--accent) !important; }
.pad-chip .pad-icon { width: 16px; height: 16px; }
@keyframes pad-rise { from { opacity: 0; translate: 0 4px; } }

/* ── actions for the selection ──────────────────────────────────────────── */
.pad-selbar { position: absolute; top: 0; left: 0; z-index: 2; padding: 3px; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); will-change: transform; }
.pad-selbar .pad-icon-btn { width: 40px; height: 40px; }
.pad-send { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px 0 12px !important; border-radius: var(--r-pill); background: var(--accent) !important; color: var(--accent-fg) !important; font: 600 var(--t-sm)/1 var(--font) !important; white-space: nowrap; transition: background var(--d-fast), transform var(--d-fast) var(--ease-out); }
.pad-send:hover { background: var(--accent-hover) !important; }
.pad-send:active { transform: scale(.96); }
.pad-send .pad-icon { width: 18px; height: 18px; rotate: 45deg; }

.pad-menu { position: absolute; top: 0; left: 0; z-index: 5; min-width: 220px; max-width: calc(100% - 16px); padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); animation: pad-rise var(--d-med) var(--ease-out); }
.pad-menu-head { margin: 0; padding: 6px 10px 6px; font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pad-menu-item { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px !important; border-radius: var(--r-sm); font: 500 var(--t-sm)/1.2 var(--font) !important; text-align: left; }
.pad-menu-item:hover, .pad-menu-item:focus-visible { background: var(--accent-soft) !important; color: var(--accent) !important; outline: none; }
.pad-menu-item small { margin-left: auto; color: var(--faint); font-size: var(--t-xs); }
.pad-menu-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-done); }
.pad-menu-item[data-online="false"] .pad-menu-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* ── toolbar ────────────────────────────────────────────────────────────── */
.pad-bar { position: absolute; left: var(--s-2); right: var(--s-2); bottom: max(34px, calc(env(safe-area-inset-bottom) + 30px)); z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.pad-bar > * { pointer-events: auto; }
.pad-tools { position: relative; padding: 4px; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.pad-tool[aria-pressed="true"] { background: var(--accent) !important; color: var(--accent-fg); }
.pad-tools .pad-sep { margin: 0 3px; }
.pad-dot { display: block; width: var(--d, 10px); height: var(--d, 10px); border-radius: 50%; background: var(--c, var(--fg)); }
.pad-stylebtn::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pad-stylebtn[aria-expanded="true"]::before { box-shadow: inset 0 0 0 2px var(--accent); }
.pad-stylebtn[data-kind="hl"] .pad-dot { border-radius: 3px; opacity: .8; }
.pad-style { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 3; width: max-content; max-width: calc(100vw - 2 * var(--s-2)); display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); transform: translateX(-50%); }
.pad-style-row { display: flex; align-items: center; gap: var(--s-2); }
.pad-label { flex: none; width: 4.2em; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pad-swatches, .pad-widths { display: flex; align-items: center; }
.pad-swatch, .pad-width { position: relative; flex: none; width: 40px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); }
.pad-swatch::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent); transition: transform var(--d-fast) var(--ease-spring); }
.pad-swatch:hover::before { transform: scale(1.1); }
.pad-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.pad-width::before { content: ""; position: absolute; inset: 5px 3px; border-radius: var(--r-pill); }
.pad-width:hover::before, .pad-width[aria-pressed="true"]::before { background: var(--sunken); }
.pad-width[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pad-width .pad-dot { position: relative; background: var(--fg); }

/* ── status line, drop target, toast ────────────────────────────────────── */
.pad-status { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 1; padding: 0 var(--s-3); text-align: center; font: 500 var(--t-xs)/1.3 var(--font); color: var(--faint); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-status[data-kind="error"] { color: var(--urg-critical); }
.pad-drop { position: absolute; inset: 6px; z-index: 6; display: grid; place-items: center; border-radius: var(--r-lg); border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent-soft) 72%, transparent); pointer-events: none; }
.pad-drop span { padding: 10px 18px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: var(--t-sm); }
.pad-toast { position: absolute; top: 68px; left: 50%; z-index: 6; width: max-content; max-width: calc(100% - 32px); padding: 9px 16px; border-radius: var(--r-lg); background: var(--fg); color: var(--surface); font: 500 var(--t-sm)/1.3 var(--font); text-align: center; box-shadow: var(--shadow-md); transform: translateX(-50%); pointer-events: none; }
.pad-toast[data-kind="error"] { background: var(--urg-critical); }

/* ── dialogs: what would be sent, and the shortcuts ─────────────────────── */
.pad-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--fg); font: 400 var(--t-md)/1.45 var(--font); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); overflow: auto; }
/* No veil over the paper: a line and a shadow set them off; Escape, Close or a click beside them closes. */
.pad-dialog { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.pad-dialog::backdrop { background: transparent; }
/* "Send to…" is a panel at the selection (pad.js openSendDialog places it): narrow, one column. */
#send-dialog { width: min(400px, calc(100vw - 16px)); }
#send-dialog[data-anchored] { position: fixed; margin: 0; }
#send-dialog .pad-payload { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-5); }
#send-dialog .pad-payload img { max-height: 28vh; }
#send-dialog .pad-payload pre { max-height: 12vh; margin-bottom: var(--s-3); }
#send-dialog .pad-dialog-lead { margin-top: var(--s-3); }
.pad-dialog header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); background: var(--surface); border-bottom: 1px solid var(--line); }
.pad-dialog h2 { margin: 0; font: 600 var(--t-xl)/1.2 var(--display); letter-spacing: -.01em; }
.pad-dialog h3 { margin: 0 0 6px; font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pad-dialog h3 span, .pad-dialog figcaption span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.pad-dialog-lead { margin: var(--s-4) var(--s-5) 0; color: var(--muted); font-size: var(--t-sm); max-width: 64ch; }
.pad-payload { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-4) var(--s-5); }
.pad-payload figure { margin: 0; min-width: 0; }
.pad-payload figcaption { margin-bottom: 6px; font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pad-payload img { display: block; max-width: 100%; max-height: 46vh; border-radius: var(--r-sm); background: #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.pad-payload pre { margin: 0 0 var(--s-4); padding: 10px 12px; max-height: 22vh; overflow: auto; border-radius: var(--r-sm); background: var(--sunken); font: 400 var(--t-sm)/1.45 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.pad-payload pre#send-ids { font: 400 var(--t-xs)/1.5 var(--mono); margin-bottom: 0; }
.pad-dialog-note { margin: 0 var(--s-5) var(--s-4); padding: 10px 12px; border-radius: var(--r-sm); background: var(--urg-critical-soft); color: var(--fg); font-size: var(--t-sm); box-shadow: inset 3px 0 0 var(--urg-critical); }
.pad-dialog footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); background: var(--surface); border-top: 1px solid var(--line); }
.pad-btn { height: 44px; padding: 0 20px !important; border-radius: var(--r-pill); background: var(--sunken) !important; font: 600 var(--t-sm)/1 var(--font) !important; }
.pad-btn:hover { background: var(--line) !important; }
.pad-btn-primary { background: var(--accent) !important; color: var(--accent-fg) !important; }
.pad-btn-primary:hover:not(:disabled) { background: var(--accent-hover) !important; }
.pad-btn:disabled { opacity: .6; cursor: default; }

.pad-keys:focus { outline: none; }
.pad-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); padding: var(--s-5); }
.pad-keys dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; align-items: baseline; font-size: var(--t-sm); }
.pad-keys dt { color: var(--muted); white-space: nowrap; }
.pad-keys dd { margin: 0; }
.pad-dialog kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 6px; background: var(--sunken); box-shadow: inset 0 -1.5px 0 var(--line-strong), 0 0 0 1px var(--line); font: 500 var(--t-xs)/1.3 var(--mono); color: var(--fg); text-align: center; }

/* ── narrow screens ─────────────────────────────────────────────────────── */
.pad-wide { display: none; }
@media (min-width: 620px) { .pad-wide { display: grid; } }
@media (max-width: 619px) {
  .pad-top { gap: 4px; }
  .pad-title { padding-right: 10px; }
  .pad-title span { display: none; }
  .pad-top .pad-icon-btn { width: 40px; height: 40px; }
  .pad-zoom { min-width: 48px; height: 40px; padding: 0 4px !important; }
  /* the narrowest phones: the bar must end inside the screen, so the "100 %" button goes (a pinch zooms, Fit stays) */
  @media (max-width: 400px) { .pad-zoom { display: none; } }
  .pad-tools .pad-icon-btn { width: 42px; }
  .pad-tools .pad-sep { margin: 0 1px; }
  .pad-payload, .pad-keys { grid-template-columns: minmax(0, 1fr); }
  .pad-payload img { max-height: 30vh; }
  .pad-caret-tip span { display: none; }
}
.pad-status[data-kind="warn"] { color: var(--urg-high, var(--muted)); }

/* Send an area: the chooser at the frame, the marks of the sessions, and the layer the cut-out flies in. */
.pad-area-menu { min-width: 232px; max-height: min(60vh, 420px); overflow-y: auto; }
.pad-area-menu .pad-menu-item { gap: 10px; }
.pad-menu-find { display: block; width: calc(100% - 8px); margin: 2px 4px 6px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: var(--sunken); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); outline: none; }
.pad-menu-find:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pad-menu-item kbd { margin-left: auto; padding: 2px 6px; border-radius: 5px; box-shadow: 0 0 0 1px var(--line-strong); font: 500 11px/1.3 var(--mono); color: var(--muted); }
.pad-mark { --hue: 162; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: hsl(var(--hue) 55% 91%); color: hsl(var(--hue) 62% 28%); font: 700 13px/1 var(--display); }
:root[data-theme="dark"] .pad-mark { background: hsl(var(--hue) 34% 20%); color: hsl(var(--hue) 62% 76%); }
.pad-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pad-menu-item[data-online="false"] .pad-mark { filter: grayscale(1); opacity: .6; }
.pad-fly { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.pad[data-cursor="area"] .pad-canvas { cursor: crosshair; }

/* ── on the Desk (?desk): the paper the Desk lies on ──────────────────────────
   No bar of its own, no zoom: the Desk scrolls it. The tools show while the paper is in front (data-started:
   a tool in hand, or something on the paper held); with the bare pointer the Desk's cards lie over this frame. */

/* The pen and the highlighter carry their colour: a dot at the foot of the icon. A second click on the tool in hand opens colour and width there. */
.pad-tool:is([data-tool="pen"], [data-tool="hl"])::before { content: ""; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--fg)); box-shadow: 0 0 0 1.5px var(--surface); }
.pad-tool[data-tool="hl"]::before { border-radius: 3px; }
.pad-tool:is([data-tool="pen"], [data-tool="hl"])[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px var(--accent); outline: 1.5px solid var(--accent-fg); outline-offset: 1.5px; }
.pad[data-cursor="text"] .pad-canvas { cursor: text; }