/* concept m editorial system v2.3: the tokens and components of Zwillinge live and the dm Print Test, plus the platform shell. */
@font-face{font-family:"Clash Display";src:url(assets/fonts/ClashDisplay-600-900.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Rubik";src:url(assets/fonts/Rubik-300-900.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Rubik";src:url(assets/fonts/Rubik-300-900-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Space Mono";src:url(assets/fonts/SpaceMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(assets/fonts/SpaceMono-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/Poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#EFEDE6; --paper-2:#E4E1D7; --surface:#FBFAF6;
  /* behind every drawing (drawings are transparent): a mid neutral that holds pale and dark skin alike */
  --portrait-bg:#BDB8AE;
  --ink:#1B1A17; --ink-soft:#565249; --ink-mute:#7D786C;
  --line:#D7D3C8; --line-strong:#BEB9AB;
  --accent:#DA551C; --accent-ink:#FBFAF6; --accent-2:#137F45;
  --shade:#17171B; --shade-ink:#F1EFE8;
  --display:"Clash Display","Rubik",system-ui,sans-serif;
  --grot:"Rubik",-apple-system,system-ui,sans-serif;
  --mono:"Space Mono","SF Mono",ui-monospace,monospace;
  --logo:"Poppins","Rubik",system-ui,sans-serif;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-2:4px; --r-full:999px;
  --page-margin:var(--s-6); --pad:var(--s-5); --pad-lg:var(--s-6); --gutter:var(--s-4);
  --ease:cubic-bezier(.19,1,.22,1); --dur:.55s; --dur-tap:.15s;
  --tg-w:124px; --tg-h:34px; --tg-label-w:44px; --tg-track-w:44px; --tg-track-h:22px; --tg-knob:18px;
  --tg-travel:calc(var(--tg-track-w) - var(--tg-knob) - 4px);
  --shadow:0 12px 32px rgba(27,26,23,.12);
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#1A1A18; --paper-2:#232320; --surface:#222220;
  --portrait-bg:#57534C;
  --ink:#F1EFE8; --ink-soft:#B4AFA3; --ink-mute:#8B867A;
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24);
  --accent:#EE6A2E; --accent-ink:#1A1A18; --accent-2:#3CC271;
  --shadow:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* III.01: a filled shape on a surface re-scopes the neutrals in dark mode */
[data-theme="dark"] .entries,[data-theme="dark"] .ms-panel{ --paper-2:#3E3E37; }
@media (max-width:640px){ :root{ --page-margin:var(--s-5); } }

*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--grot);min-height:100vh}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em}
h1{font-size:48px;line-height:.95}
h2{font-size:32px;line-height:1}
.kicker{font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft)}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){ h1{font-size:36px} }

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
.mast-top{border-bottom:1px solid var(--line)}
.mast-top-in{display:flex;align-items:stretch;padding:0 var(--page-margin)}
.mast-top .cell{padding:var(--s-2) var(--gutter);font:400 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-right:1px solid var(--line);white-space:nowrap;display:flex;align-items:center}
.mast-top .cell:first-child{padding-left:0}
.mast-top .clocks{display:flex;margin-left:auto}
.mast-top .clk{border-left:1px solid var(--line);padding:var(--s-2) 0 var(--s-2) var(--gutter);font:400 11px/1.3 var(--mono);
  letter-spacing:.1em;color:var(--ink-soft);display:flex;gap:var(--s-2);align-items:center;text-transform:uppercase;white-space:nowrap}
.mast-top .clk .t{color:var(--ink);font-variant-numeric:tabular-nums}
.mast-top .clk .pip{width:5px;height:5px;border-radius:var(--r-full);background:var(--accent)}
.mast-main{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) var(--page-margin)}
.mast-lock{display:flex;align-items:center;gap:var(--s-3);flex:none}
.mast-lock .mk{width:40px;height:40px;display:block}
.mast-lock .wm{font-family:var(--logo);font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.mast-lock .wm .m{color:var(--accent)}
.mast-lock .wm .ai{font-family:var(--logo);font-weight:600;font-size:.42em;color:var(--accent);vertical-align:super;line-height:0;margin-left:1px}
/* --ink-soft, not the dm Print Test's --ink-mute: mute on paper is 3.75:1, under the text floor */
.mast-product{font:400 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  border-left:1px solid var(--line-strong);padding-left:var(--s-3);margin-left:var(--s-1);white-space:nowrap}
/* round 20: the dev server's mark beside the brand (chrome.js, paintEnv); ink on paper, the accent only as line and dot */
.env-pill{display:inline-flex;align-items:center;gap:6px;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-full);padding:5px 9px;white-space:nowrap;flex:none}
.env-pill::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--accent)}
.mast-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);flex:none}

/* III.10 mode switch: fixed 124 x 34 in both modes */
.tg{display:flex;align-items:center;justify-content:space-between;width:var(--tg-w);height:var(--tg-h);flex:none;
  padding:0 var(--s-1) 0 var(--s-3);cursor:pointer;background:transparent;color:var(--ink-soft);
  border:1px solid var(--line-strong);border-radius:var(--r-full);font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tg:hover{border-color:var(--accent);color:var(--ink)}
.tg .lab{width:var(--tg-label-w);flex:none;text-align:center}
.tg .track{position:relative;flex:none;width:var(--tg-track-w);height:var(--tg-track-h);border-radius:var(--r-full);
  background:var(--paper-2);border:1px solid var(--line-strong);transition:background var(--dur) var(--ease)}
.tg .knob{position:absolute;top:1px;left:1px;width:var(--tg-knob);height:var(--tg-knob);border-radius:var(--r-full);overflow:hidden;
  transition:transform var(--dur) var(--ease)}
.tg .knob img{width:100%;height:100%;display:block}
[data-theme="dark"] .tg .track{background:#000}
[data-theme="dark"] .tg .knob{transform:translateX(var(--tg-travel))}
/* ---------- shared controls ---------- */
.btn{font:700 14px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-full);min-height:44px;padding:0 var(--pad);
  border:1px solid transparent;cursor:pointer;transition:transform var(--dur-tap) var(--ease),filter var(--dur-tap)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);color:var(--accent-ink)}
/* light text on the light-mode accent is 3.8:1: only large type (19 px bold) clears the floor */
.btn.pri{font-size:19px;letter-spacing:.04em}
.btn.pri:hover{filter:brightness(1.06)}
.btn.gh{background:transparent;color:var(--ink);border-color:var(--ink)}
/* decision 4.11: the hover stays on the page's side: the second paper, and the ink ring doubled by an inset line, as the
   outlined controls show hover by their ring (.ms-btn, .pick-btn, .ai-ctab), no accent and nothing moves */
.btn.gh:hover{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.gh:disabled:hover{box-shadow:none}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:400 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.key{display:flex;gap:var(--s-2);flex-wrap:wrap}
.key-state{margin:0;display:flex;align-items:center;gap:var(--s-3);min-height:44px}
.live-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--accent-2);flex:none}

/* III.08 designed select */
.mselect{position:relative;max-width:560px}
.ms-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;border:0}
.ms-btn{display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--r-2);padding:var(--s-3) var(--s-4);color:var(--ink);cursor:pointer}
.ms-btn:hover{border-color:var(--ink)}
.mselect.open .ms-btn{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ms-val{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:1}
.ms-txt{flex:1;min-width:0}
.ms-t{display:block;font:700 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ms-d{display:block;font-size:13px;color:var(--ink-soft);margin-top:var(--s-1);line-height:1.5}
.ms-tag{flex:none;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-full);white-space:nowrap}
.ms-chev{flex:none;width:11px;height:11px;border-right:1.5px solid var(--ink-mute);border-bottom:1.5px solid var(--ink-mute);
  transform:translateY(-3px) rotate(45deg);transition:transform var(--dur-tap) var(--ease)}
.mselect.open .ms-chev{transform:translateY(1px) rotate(225deg);border-color:var(--accent)}
.ms-panel{position:absolute;left:0;right:0;top:calc(100% + var(--s-1));z-index:30;background:var(--surface);border:2px solid var(--ink);
  box-shadow:var(--shadow);max-height:min(52vh,380px);overflow:auto;overscroll-behavior:contain}
.ms-opt{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);
  padding:var(--s-3) var(--gutter);color:var(--ink);cursor:pointer;box-shadow:inset 3px 0 0 transparent}
.ms-opt:first-child{border-top:0}
.ms-opt:hover,.ms-opt.cursor{background:var(--paper-2)}
.ms-opt[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.ms-no{font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--accent);flex:none;width:var(--pad)}

/* ---------- platform shell ---------- */
.me-btn{display:flex;align-items:center;gap:var(--s-2);background:none;border:0;cursor:pointer;color:var(--ink);font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* Ansicht als: a band of the second paper under the masthead, not an inverted one, its edge an inset line so nothing
   moves (decision 4.11; .testing's accent edge replaces it) */
.viewing{display:flex;align-items:center;justify-content:center;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-2) var(--page-margin);
  background:var(--paper-2);color:var(--ink);box-shadow:inset 0 -1px 0 var(--line-strong);font:400 12px/1.4 var(--mono);letter-spacing:.06em}
.viewing button{background:none;border:1px solid var(--ink);color:var(--ink);border-radius:var(--r-full);min-height:30px;padding:0 var(--s-3);cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* round 33: testing as the user, the bar takes the accent so a test is never mistaken for read only */
.viewing.testing{box-shadow:inset 0 -4px 0 var(--accent)}
.viewing button[aria-pressed="false"]{background:var(--paper);color:var(--ink)}
.tag.test-mark{color:var(--ink);border-color:var(--accent)}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 120px)}
.side{border-right:1px solid var(--line);padding:var(--s-5) 0;display:flex;flex-direction:column;gap:var(--s-5);position:sticky;top:96px;align-self:start;
  max-height:calc(100vh - 96px);overflow:auto}
.side h2{font:400 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:0 var(--s-5);margin:0 0 var(--s-2)}
.side nav{display:flex;flex-direction:column}
.side a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-5);color:var(--ink);text-decoration:none;font-size:15px;
  box-shadow:inset 3px 0 0 transparent}
.side a:hover{background:var(--paper-2)}
.side a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent);font-weight:600;background:var(--paper-2)}
.side .count{margin-left:auto;font:400 11px/1 var(--mono);color:var(--ink-soft)}
/* back and forward (benja's pick, 2026-10-30: two thin arrows): the sidebar's line weight, a round hover, greyed with
   nowhere to go; the first arrow's stroke lines up with the links' text */
.trail{display:flex;gap:var(--s-1);padding:0 var(--s-5);margin:calc(-1 * var(--s-2)) 0 calc(-1 * var(--s-2)) calc(-1 * var(--s-3) + 2px)}
.trail button{width:32px;height:32px;padding:0;border:0;border-radius:var(--r-full);background:none;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-tap),opacity var(--dur-tap)}
.trail button:not(:disabled):hover{background:var(--paper-2)}
.trail button:disabled{opacity:.32;cursor:default}
.trail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trail svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){ .trail button{transition:none} }
.menu-btn{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);top:0;max-height:none;height:100vh;background:var(--paper);z-index:60;
    transform:translateX(-102%);transition:transform var(--dur) var(--ease);box-shadow:var(--shadow);padding-top:var(--s-7)}
  .side.open{transform:none}
  .menu-btn{display:inline-flex}
}
.page{padding:var(--s-6) var(--page-margin) var(--s-8);display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:var(--s-3)}
.page-head h1{font-size:40px}
/* round 22: the one back button (backLink in app.js), the same in the interview's bar and in a page's head, where it stands
   left of the title */
.btn.back{flex:none;gap:var(--s-2)}
.back .chev{width:9px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:3px}
.page-head.with-back{justify-content:flex-start;align-items:center}
.page-head.with-back .sec-head{flex:1 1 auto;min-width:0}
.lede{margin:0;color:var(--ink-soft);max-width:70ch}
.empty{padding:var(--s-2) 0;color:var(--ink-soft);margin:0}
.page>:empty{display:none}
/* a section of a page: its heading, one line under it, then its content */
.block{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.block>.sec-head{border-bottom:2px solid var(--ink);padding-bottom:var(--s-3)}
.page>.block+.block{margin-top:var(--s-3)}
.err{color:var(--ink);background:var(--err-bg);padding:var(--s-2) var(--s-3);border-radius:var(--r-2);margin:0}

/* numbers on the overview */
.tile{padding:var(--s-4);box-shadow:inset -1px -1px 0 var(--line);display:flex;flex-direction:column;gap:var(--s-2);text-decoration:none;color:var(--ink)}
.tile b{font:600 40px/1 var(--display);font-variant-numeric:tabular-nums}
.tile span{font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
a.tile:hover{background:var(--paper-2)}

/* tables */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line-strong)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--line-strong);white-space:nowrap}
.tbl td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr.sel td{background:var(--sel-bg)}
.tbl tr.active td{box-shadow:inset 0 0 0 0 transparent}
.tbl tr.open td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .mono{font:400 12px/1.3 var(--mono);color:var(--ink-soft)}
.tbl .name{font-weight:600}
.tbl input[type=checkbox],.chk{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:6px;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;
  border-radius:var(--r-full);border:1px solid var(--line-strong);color:var(--ink);white-space:nowrap}
.pill.on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2)}
.pill.off{color:var(--ink-soft)}
.pill.off::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.pill.warn{border-color:var(--accent)}

/* bulk bar: appears with a selection, on the page's own ground in both modes (benja: not black on light, not white on dark) */
.bulk{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4);
  background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-2);box-shadow:var(--shadow)}
.bulk b{font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.bulk select,.bulk input{min-height:36px;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);padding:0 var(--s-2);font-size:13px}
.bulk .btn{min-height:36px;font-size:12px;padding:0 var(--s-3)}

/* the editor beside a table */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:var(--s-6);align-items:start}
@media (max-width:1100px){ .split{grid-template-columns:1fr} }
.editor{border-top:1px solid var(--line-strong);padding-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);position:sticky;top:110px}
@media (max-width:1100px){ .editor{position:static} }
.editor h2{font-size:28px}
.editor .meta{font:400 11px/1.5 var(--mono);color:var(--ink-soft);letter-spacing:.04em;overflow-wrap:anywhere}
.fld{display:flex;flex-direction:column;gap:var(--s-1)}
.fld>span{font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.fld input[type=text],.fld input[type=number],.fld input[type=password],.fld select,.fld textarea{min-height:40px;padding:0 var(--s-3);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-2);color:var(--ink);font:inherit;width:100%}
.fld textarea{padding:var(--s-2) var(--s-3);min-height:80px}
.checks label,.inline{display:flex;align-items:center;gap:var(--s-2);font-size:14px;cursor:pointer}
.proj-assign{display:flex;flex-direction:column;gap:var(--s-2);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-3)}
.proj-assign .pa-head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.actions{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a,.tabs button{padding:var(--s-2) var(--s-4);text-decoration:none;color:var(--ink-soft);background:none;border:0;cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 -2px 0 transparent}
.tabs [aria-current="page"],.tabs [aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.filters{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
.filters .fld{min-width:180px}

/* interviews: twins by group */
.grp{display:flex;flex-direction:column;gap:var(--s-3)}
.grp h2{font-size:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border-top:1px solid var(--line-strong)}
/* a group's cards: the one black line under the group's heading */
.grp .cards{border-top:2px solid var(--ink)}
.twin-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);box-shadow:inset -1px -1px 0 var(--line);min-width:0}
.twin-card h3{font-size:24px;line-height:1.05;overflow-wrap:anywhere;hyphens:auto}
.twin-card p{margin:0;font-size:14px;color:var(--ink-soft)}
.mono-av{width:56px;height:56px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font:600 20px/1 var(--display);color:var(--ink)}
.twin-card .actions .btn{min-height:38px;font-size:12px;padding:0 var(--s-3)}

/* greyed: present, not usable, says why on hover and focus */
/* greyed by colour, not opacity, so the note on hover stays fully readable */
.locked,.btn.gh.locked{color:var(--ink-mute);border-color:var(--line);background:var(--paper-2);cursor:not-allowed !important;position:relative}
.btn.gh.locked:hover{background:var(--paper-2);color:var(--ink-mute);box-shadow:none}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:260px;padding:var(--s-2) var(--s-3);background:var(--surface);color:var(--ink);border-radius:var(--r-2);z-index:70;
  font:400 12px/1.4 var(--grot);letter-spacing:0;text-transform:none;white-space:normal;opacity:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow)}
.locked[data-tip]:hover::after,.locked[data-tip]:focus-visible::after{opacity:1}
.tip-host{position:relative;display:inline-flex}

/* chats */
.tree{display:flex;flex-direction:column;gap:var(--s-5)}
.tree h2{font-size:24px;border-bottom:2px solid var(--ink);padding-bottom:var(--s-2)}
.tree h3{font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:var(--s-3)}
.tree h4{font:600 17px/1.2 var(--grot);margin:var(--s-2) 0 0}
.chat-list,.shared-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.chat-list li,.shared-list li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chat-list a,.shared-list a{color:var(--ink);font-weight:500}
.chat-list .mono,.shared-list .mono{font:400 11px/1.3 var(--mono);color:var(--ink-soft)}
/* One chat for every conversation with a persona (2026-10-29, the study's "Mitte" with bubbles): the text chat, a live
   interview's chat, Verwaltung's view of a chat and the Adviser's thread, typed and live, are built from these classes
   (interview.js lineHtml) and styled here alone. The persona on the left with its round head, the user on the right;
   the persona's bubble filled with a thin edge, the user's in the accent's tint; inside each a mono line with who said
   it, a mood, the spoken mark and the time. The study's option 6, "Creme, Schwung an der Ecke" (2026-10-29): in light
   a warm cream ground under the thread and its field; bubbles rounded 18 px with a curled tail out of the bottom corner
   on the speaker's side, dipping just under the line, the persona's edge running on round it, the head at the bubble's
   foot beside it. The field's edge is the muted ink, 3:1 or more on the cream bar (the old #BEB9AB fell to 1.7:1 there).
   In dark the colours stay (the field lifted off its bar, the user's bubble off the ground), only the tail is new */
:root{ --chat:#F4EDE0; --chat-bar:#F4EDE0; --bubble-twin:#FDFBF7; --bubble-twin-edge:#D9D0BF; --bubble-me:#F2D4BF; --bubble-me-k:#4F4A42;
  --field:#FDFBF7; --field-edge:var(--ink-mute); --bubble-r:18px;
  /* the tail: a 13 x 21 box at the bubble's bottom corner, 3 px of it inside the bubble, its foot 3 px under the line.
     Two masks of one curl: the outline (the edge's colour) and the same curl 1 px inside it (the bubble's colour) */
  --tail-w:13px; --tail-h:21px; --tail-dip:-4px;
  --tail-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 21'%3E%3Cpath d='M9 0C9 10 6.4 16.6 0 21C5 21.6 8.8 20.2 11.4 18H13V0Z'/%3E%3C/svg%3E");
  --tail-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 21'%3E%3Cpath d='M10 0C10 10.4 7.6 17 2.6 20C6 20.1 8.8 18.9 10.9 17H13V0Z'/%3E%3C/svg%3E"); }
[data-theme="dark"]{ --chat:#1E1E1C; --chat-bar:#222220; --bubble-twin:#2A2A27; --bubble-twin-edge:#45433E; --bubble-me:#55331F; --bubble-me-k:#D2C3B6;
  --field:#2F2F2B; --field-edge:#7A766C; }
.chatbox{border:1px solid var(--line);border-radius:var(--r-2);background:var(--chat);display:flex;flex-direction:column;overflow:hidden}
.msgs{list-style:none;margin:0;padding:var(--s-4);min-height:300px;max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-3);background:var(--chat)}
.msgs>.empty{align-self:center;padding:var(--s-2) var(--s-3)}
.msg{display:flex;align-items:flex-end;gap:var(--s-3);max-width:min(720px,80%);min-width:0}
.msg.twin{align-self:flex-start}
.msg.me{align-self:flex-end}
.msg-av{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover}
.bubble{position:relative;min-width:0;padding:10px 14px 11px;margin-bottom:3px;border:1px solid transparent;border-radius:var(--bubble-r);color:var(--ink);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.msg.twin .bubble{background:var(--bubble-twin);border-color:var(--bubble-twin-edge);border-bottom-left-radius:0}
.msg.me .bubble{background:var(--bubble-me);border-bottom-right-radius:0}
/* the tail: ::before in the edge's colour, ::after in the bubble's over it, reaching over the bubble's own border, so the
   persona's edge runs on round the curl without a seam; the user's bubble has no edge, so both are its fill. The user's
   is the persona's mirrored */
.msg:is(.twin,.me) .bubble::before,.msg:is(.twin,.me) .bubble::after{content:"";position:absolute;bottom:var(--tail-dip);width:var(--tail-w);height:var(--tail-h);
  pointer-events:none;-webkit-mask:var(--tail-m) no-repeat 0 0/100% 100%;mask:var(--tail-m) no-repeat 0 0/100% 100%}
.msg:is(.twin,.me) .bubble::before{--tail-m:var(--tail-edge)}
.msg:is(.twin,.me) .bubble::after{--tail-m:var(--tail-fill)}
.msg.twin .bubble::before,.msg.twin .bubble::after{left:calc(3px - var(--tail-w))}
.msg.twin .bubble::before{background:var(--bubble-twin-edge)}
.msg.twin .bubble::after{background:var(--bubble-twin)}
.msg.me .bubble::before,.msg.me .bubble::after{right:calc(3px - var(--tail-w));background:var(--bubble-me);transform:scaleX(-1)}
.bubble .text{display:block;white-space:pre-wrap}
.msg-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-bottom:3px;font:400 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.msg-name{font-weight:700;color:var(--ink);white-space:normal}
.msg-sp::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.msg-k time{margin-left:auto;padding-left:var(--s-3);letter-spacing:.06em;text-transform:none;white-space:nowrap}
.msg.me .msg-k,.msg.me .msg-name{color:var(--bubble-me-k)}
.msg.me .msg-name{font-weight:400}
/* a note in the thread (the Adviser's time is up): a line across, not a bubble */
.msg.note{align-self:stretch;max-width:none;display:block;padding:var(--s-2) var(--s-3);box-shadow:inset 3px 0 0 var(--accent);font:400 12px/1.5 var(--mono);color:var(--ink-soft)}
/* the persona is answering: its head and a small bubble with the words and three dots */
.msg-dots i{font-style:normal;animation:msgblink 1.2s infinite}
.msg-dots i:nth-child(2){animation-delay:.2s}.msg-dots i:nth-child(3){animation-delay:.4s}
@keyframes msgblink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.msg-dots i{animation:none}}
.msg-typing .msg-k{margin:0}
/* the field: one line rounded to a pill, more lines a rounded box; no microphone here, speaking is the Live mode's */
.composer{display:flex;align-items:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);background:var(--chat-bar)}
.composer :is(input,textarea){flex:1;min-width:0;min-height:44px;padding:0 var(--s-4);background:var(--field);border:1px solid var(--field-edge);border-radius:22px;color:var(--ink);font:inherit}
.composer textarea{padding:10px var(--s-4);max-height:180px;resize:none;line-height:1.5;field-sizing:content}
.composer :is(input,textarea)::placeholder{color:var(--ink-soft);opacity:1}
.composer :is(input,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.composer .btn{flex:none}
/* a narrow thread (a phone, the live meeting's column beside the stage): wider bubbles, a smaller head */
.msgs{container-type:inline-size}
@container (max-width:480px){
  .msg{max-width:94%}
  .msg-av{width:26px;height:26px}
  .bubble{padding:8px 12px 9px}
}
@media (max-width:640px){ .msgs{padding:var(--s-3)} }

/* sign-in */
.signin{min-height:70vh;display:grid;place-items:center;padding:var(--s-7) var(--page-margin)}
.signin-card{max-width:440px;width:100%;display:flex;flex-direction:column;gap:var(--s-4);border-top:2px solid var(--ink);padding-top:var(--s-5)}
.signin-card h1{font-size:44px}

@media (max-width:640px){ .page-head h1{font-size:30px}  .mast-actions{gap:var(--s-2)} .me-btn span{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
/* decision 4.11: a floating box like the pickers' panels, the surface in a ring of ink, drawn inside so the box keeps its size */
.toast{position:fixed;left:50%;bottom:var(--s-5);transform:translateX(-50%);z-index:80;background:var(--surface);color:var(--ink);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-2);box-shadow:inset 0 0 0 2px var(--ink),var(--shadow);max-width:min(560px,90vw)}
.confirm{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-left:var(--s-2);font-size:14px}
.confirm .btn{min-height:32px;font-size:11px;padding:0 var(--s-3)}
.status{margin:0;min-height:1.3em}
.sec-head{display:flex;flex-direction:column;gap:var(--s-2)}
.sec-head h2{font-size:24px}
.tf{min-height:40px;padding:0 var(--s-3);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-2);color:var(--ink)}
.key-state{margin:0;display:flex;align-items:center;gap:var(--s-3);min-height:32px}
.live-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--accent-2);flex:none}
.tag{flex:none;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-full);white-space:nowrap;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);text-decoration:none}
.col{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.btn.menu-btn{display:none}
@media (max-width:900px){ .btn.menu-btn{display:inline-flex;min-height:36px;padding:0 var(--s-3);font-size:11px} }
.tbl td.mono{max-width:220px;overflow-wrap:anywhere}
@media (max-width:900px){
  .mast-main{flex-wrap:wrap;row-gap:var(--s-2);padding:var(--s-2) var(--page-margin)}
  .mast-product,.me-btn{display:none}
  .mast-actions{order:3;width:100%;margin-left:0;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-2)}
  .side{top:0}
}
@media (max-width:640px){ .mast-actions .tg{width:auto;gap:var(--s-2)} .page{padding-top:var(--s-4)} }
.page a:not(.btn):not(.tile){color:var(--ink);text-underline-offset:3px}
.page a:not(.btn):not(.tile):hover{text-decoration-thickness:2px}
.tbl td.clip{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl td:last-child .actions{flex-wrap:nowrap;white-space:nowrap}
/* the note opens below the control, so it never covers the card's own text */
[data-tip]:hover::after,[data-tip]:focus-visible::after{bottom:auto;top:calc(100% + 8px)}
/* an error line: ink on a tint, never accent text, which is 3.4:1 on paper in light mode */
.status.error{color:var(--ink);background:var(--err-bg);padding:var(--s-1) var(--s-2);border-radius:var(--r-2)}
:root{ --err-bg:#F6DACC; --ok-bg:#D7EBDD; --sel-bg:#F3E3D9; }
[data-theme="dark"]{ --err-bg:#4A2A1E; --ok-bg:#1E3A28; --sel-bg:#33261F; }
/* placeholders in the soft ink of their own surface, not the browser's light grey */
::placeholder{color:var(--ink-soft);opacity:1}

/* ---------- interview: from Zwillinge live, the office as a canvas painted once (no CSS blur or mask) ---------- */
.interview{padding-bottom:var(--s-8)}
.ibar{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-4) var(--page-margin);border-bottom:1px solid var(--line)}
.who-chip{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.who-chip b{display:block;font:600 22px/1 var(--display)}
.chip-av{width:44px;height:44px;border-radius:var(--r-full);display:block;flex:none}
.ibar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:var(--r-full);padding:2px}
.seg-b{display:flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);border:0;background:none;border-radius:var(--r-full);cursor:pointer;
  font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.seg-b::before{content:"";width:12px;height:12px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);flex:none}
.seg-b[aria-pressed="true"]{font-weight:700}
.seg-b[aria-pressed="true"]::before{background:var(--accent);box-shadow:none}
.seg-b:hover{background:var(--paper-2)}
/* the parents' switch while a turn runs (round 15): it waits for the answer to finish */
.seg-b[data-speaker][aria-disabled="true"]{color:var(--ink-mute);cursor:not-allowed}
.seg-b[data-speaker][aria-disabled="true"]:hover{background:none}

.stage{position:relative;height:calc(100vh - 290px);min-height:440px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the room: blurred like a video call's background, fading into the glow behind the twin */
.stage canvas.office{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);opacity:0;transition:opacity var(--dur) var(--ease);will-change:transform}
.stage.drawing canvas.office{opacity:1}
.stage canvas.orb{z-index:1}
.stage-drawing{z-index:2;position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:88%;width:auto;aspect-ratio:300/340;overflow:visible}
.asked{position:absolute;left:var(--page-margin);right:var(--page-margin);top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);max-width:62ch;z-index:2}
.asked p{margin:0;font:400 20px/1.4 var(--grot);color:var(--ink-soft)}
.subs{position:absolute;left:50%;transform:translateX(-50%);bottom:var(--s-6);width:min(46em,calc(100% - 2 * var(--page-margin)));display:flex;flex-direction:column;
  align-items:center;gap:var(--s-2);text-align:center;z-index:2}
.stage.drawing .subs,.stage.drawing .asked{background:color-mix(in srgb,var(--paper) 88%,transparent);padding:var(--s-3) var(--s-4);border-radius:var(--r-2)}
.subs p{margin:0;font:400 26px/1.35 var(--grot);color:var(--ink)}
.subs.thinking p{color:var(--ink-soft)}
.subs .end{display:inline-block;width:16px;height:16px;margin-left:8px;vertical-align:-1px}
/* round 22: the twin thinking: three dots where the subtitle comes, bobbing one after another, one subtitle line tall (a
   paragraph like the subtitle, so it takes the subtitle's size at every width) */
.subs p.subs-dots{display:flex;align-items:center;justify-content:center;gap:8px;height:1lh}
.subs p.subs-dots[hidden]{display:none}
.subs-dots i{width:9px;height:9px;border-radius:var(--r-full);background:var(--ink-soft);animation:subs-bob 1.2s ease-in-out infinite}
.subs-dots i:nth-child(2){animation-delay:.16s}
.subs-dots i:nth-child(3){animation-delay:.32s}
@keyframes subs-bob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
@keyframes subs-fade{0%,60%,100%{opacity:.35}30%{opacity:1}}
/* without motion the dots stay in place and only fade in turn */
@media (prefers-reduced-motion:reduce){ .subs-dots i{animation-name:subs-fade} }
@media (max-width:640px){ .subs p{font-size:20px} .asked p{font-size:17px} .stage{height:auto;aspect-ratio:3/4;min-height:0} }

.bar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--page-margin)}
.rec{display:flex;align-items:center;justify-content:center;gap:var(--s-3);width:220px;height:56px;flex:none;border:0;border-radius:var(--r-full);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;font:700 19px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  transition:transform var(--dur-tap) var(--ease)}
.rec:active{transform:translateY(1px)}
.rec .dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--accent-ink)}
/* recording: off the accent onto the surface in a ring of ink, the green dot saying it records (decision 4.11) */
.rec[aria-pressed="true"]{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.rec[aria-pressed="true"] .dot{background:var(--accent-2)}
.rec:disabled{background:var(--paper-2);color:var(--ink-mute);cursor:not-allowed}
.rec:disabled .dot{background:var(--ink-mute)}
.interview.text .live-only{display:none}
.interview:not(.text) #text-status{visibility:hidden}
.bar .ask{flex:1 1 320px;padding:0;border:0;background:none}
.interview{display:flex;flex-direction:column;gap:0}
.iv-body{display:flex;flex-direction:column;gap:var(--s-4);padding-bottom:var(--s-6)}
.interview .chatbox{margin:0 var(--page-margin)}
.interview.text .chatbox .msgs{max-height:calc(100vh - 330px);min-height:320px}
.interview .composer{padding:var(--s-3) var(--page-margin)}
.interview .bar .composer{flex:1 1 320px;padding:0;border:0;background:none}
.interview.text .chatbox .composer{padding:var(--s-3) var(--s-4)}
.who-chip .mono{display:block;font:400 11px/1.3 var(--mono);color:var(--ink-soft);letter-spacing:.04em}
.stage .asked{z-index:3}.stage .subs{z-index:3}

/* the questionnaire before the chat: every option visible */
.questionnaire{display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-6) var(--page-margin);max-width:900px}
.q{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-4)}
.q legend{font:600 20px/1.3 var(--display);padding:0;margin-bottom:var(--s-3)}
.q-opts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.q-opt{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-full);cursor:pointer;background:var(--surface)}
.q-opt input{accent-color:var(--accent);width:16px;height:16px}
.q-opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* the pickers in the top bar: project and language share one button, panel and row */
.pick,.proj{position:relative;flex:none}
.pick-btn{display:flex;align-items:center;gap:var(--s-2);min-height:34px;padding:2px var(--s-3) 2px 4px;border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:var(--paper);color:var(--ink);cursor:pointer;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pick-btn:hover,.pick-btn[aria-expanded="true"]{border-color:var(--ink)}
/* round 22: the project picker inside a page below the sidebar's: greyed, says why on hover and focus, does not open */
.pick-btn.locked,.pick-btn.locked:hover{border-color:var(--line);background:var(--paper-2)}
.pick-btn.locked .pick-name{color:var(--ink-mute)}
.pick-btn.locked .emblem,.pick-btn.locked .logo{filter:grayscale(1);opacity:.6}
.pick-btn.locked .ms-chev{border-color:var(--line-strong)}
.pick-btn .ms-chev{margin-left:var(--s-1)}
.pick-btn[aria-expanded="true"] .ms-chev{transform:translateY(1px) rotate(225deg);border-color:var(--accent)}
.pick-name{color:var(--ink);font-weight:700;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a project without an emblem: its letters on the second paper in a fine ring (decision 4.11) */
.pick-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;background:var(--paper-2);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font:700 9px/1 var(--mono);letter-spacing:.02em}
.pick-btn .emblem,.pick-btn .logo,.pick-opt .emblem,.pick-opt .logo,.proj-one .emblem,.proj-one .logo{border-radius:50%;flex:none}
.proj-one{display:flex;align-items:center;gap:var(--s-2);font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pick-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:70;min-width:260px;max-height:min(60vh,460px);overflow:auto;background:var(--surface);
  border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:var(--r-2);padding:var(--s-1)}
.mast-actions .pick-panel{left:auto;right:0;min-width:200px}
.pick-opt{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:40px;padding:var(--s-2) var(--s-3);background:none;border:0;border-radius:var(--r-2);
  cursor:pointer;text-align:left;color:var(--ink)}
.pick-opt:hover,.pick-opt:focus-visible{background:var(--paper-2)}
.pick-opt[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.pick-opt-name{flex:1;font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.logo{object-fit:contain;background:#fff;border-radius:6px}

/* the compact designed select: tables, filters, bars, the top bar */
.mselect.compact{max-width:100%}
.mselect.compact .ms-btn{padding:var(--s-2) var(--s-3);gap:var(--s-2);min-height:38px}
.mselect.compact .ms-t{font-size:11px}
.mselect.compact .ms-d{display:none}
.mselect.compact .ms-panel{min-width:220px}
.mselect.disabled{opacity:.5;pointer-events:none}
.bulk .mselect{min-width:160px}
.filters .mselect{min-width:180px}

/* focus on the viewing band: the ink, now that the band is the second paper (decision 4.11) */
.viewing :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* pictures: cards with drawings, focus groups at their table, emblems */
.twin-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);box-shadow:inset -1px -1px 0 var(--line);min-width:0}
.card-pic{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:300/340;border-radius:var(--r-2);background:var(--paper-2)}
.table-pic{aspect-ratio:600/340;overflow:hidden}
.table-pic svg{display:block;width:100%;height:100%}
.twin-card.focus{grid-column:span 2}
@media (max-width:640px){ .twin-card.focus{grid-column:auto} }
.grp-head{display:flex;align-items:center;gap:var(--s-3)}
.grp-head .emblem,.grp-head .logo{flex:none}
.app-card .app-mark{display:flex}
/* an application's greyed Öffnen sits at the card's left edge: its note opens to the right, not under the sidebar */
.app-card [data-tip]:hover::after,.app-card [data-tip]:focus-visible::after{left:0;transform:none}
.thumb{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;overflow:hidden;background:var(--paper-2)}
.thumb svg,.thumb img{width:100%;height:100%}
img.thumb{object-fit:cover}
#tab{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.btn{white-space:nowrap}
.file-btn{cursor:pointer}

/* users: filters above the table, aligned with it */

#users th{white-space:normal}
#users td:last-child{width:1%}
/* a project with its tier and narrowing: one group of tags that may wrap, so the table never widens */
#twins td.clip{max-width:130px}
#users .actions{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.split>.col>.sec-head{padding-top:var(--s-4)}
.tbl tr[hidden]{display:none}

/* ---------- round 3 ---------- */

/* confirm: a designed pop-up under the button that asked */
.pop-confirm{position:absolute;z-index:90;width:min(320px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--r-2);box-shadow:var(--shadow);padding:var(--s-3) var(--s-4)}
.pop-confirm::before{content:"";position:absolute;top:-9px;left:calc(var(--tip,50%) - 8px);width:14px;height:14px;background:var(--surface);
  border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.pop-confirm p{margin:0 0 var(--s-3);font-size:14px;line-height:1.45}
.pop-actions{display:flex;justify-content:flex-end;gap:var(--s-2)}
.btn.sm{min-height:34px;padding:0 var(--s-3);font-size:11px}
.btn.danger{background:#A8231C;color:#FFFFFF;border:1px solid #A8231C}
.btn.danger:hover{background:#8C1C16;border-color:#8C1C16}
.row-actions{flex-wrap:nowrap;gap:var(--s-2)}

/* a family on the stage: both parents and the baby; the parent who listens a step back */
.stage-drawing.family{aspect-ratio:560/340;height:86%}
.stage-drawing svg.listening{opacity:.88}
/* every editor's form: the same space between its fields */
.editor form:not(.filters){display:flex;flex-direction:column;gap:var(--s-3)}
.editor form:not(.filters)>.actions{margin-top:var(--s-2)}
/* the interview bar never reflows when live or text is chosen: the display choice keeps its place, hidden in text,
   and on a wide screen the bar stays one row, the twin's name giving way with an ellipsis */
.interview.text .ibar .seg.live-only{display:flex;visibility:hidden}
/* the display choice (live) and the download (text chat only) share one place left of the live/text switch, so neither moves it */
.ibar-swap{display:grid;justify-items:end;align-items:center}
.ibar-swap>*{grid-area:1/1}
.dl{position:relative}
.interview:not(.text) .ibar .dl{visibility:hidden}
.dl-btn::before{display:none}
.dl-btn .ms-chev{margin-left:var(--s-1)}
.dl-btn[aria-expanded="true"]{font-weight:700}
.dl-btn[aria-expanded="true"] .ms-chev{transform:translateY(1px) rotate(225deg);border-color:var(--accent)}
.dl-menu{left:auto;right:0;min-width:220px}
.dl-menu .pick-opt-name{flex:1}
/* the Verlauf's download menu (round 14): placed by the page under its button, outside the table's scroll box */
.dl-hist{display:inline-flex}
.dl-hist .dl-menu{position:fixed;right:auto;top:0;left:0;min-width:220px}
.dl-hist .pick-opt{text-decoration:none}
.dl-hist .dl-btn .ms-chev{width:8px;height:8px;border-color:currentColor}
/* the application's own page making an export (dm): out of sight, laid out as its page in the shell (app.js, exportFrame) */
.export-host{position:fixed;overflow:hidden;pointer-events:none;background:var(--paper)}
@media (min-width:1241px){
  .ibar{flex-wrap:nowrap}
  .ibar-right{flex-wrap:nowrap;flex:none}
  .who-chip{flex:1 1 auto;min-width:160px}
  .who-chip>div{min-width:0}
}
/* the twin's name is cut with an ellipsis if it is still too long (benja's call); the full name is on hover */
.who-chip b,.who-chip .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.who-chip>div{min-width:0}
/* on a laptop the switches take their own row under the name, the same row in live and text */
@media (max-width:1240px){ .ibar-right{flex-basis:100%;margin-left:0;justify-content:flex-end} }
@media (max-width:1440px){ .ibar .seg-b{padding:0 var(--s-3)} .ibar-right{gap:var(--s-2)} }
/* ---------- drawings v2 ---------- */
.look-ed{display:flex;flex-direction:column;gap:var(--s-3)}

/* ---------- round 4 ---------- */
/* four personas to a row on a desktop; fewer as the screen narrows */
.grp .cards,.page>.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .grp .cards,.page>.cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .grp .cards,.page>.cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grp .cards,.page>.cards{grid-template-columns:1fr} .twin-card.focus{grid-column:auto} }
/* every card has room for two lines of name and two of description, so the buttons line up across a row;
   a longer description ends in "…", and opening it makes the row taller */
.twin-card .card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.1em;line-height:1.05}
.card-desc{position:relative;display:flex;align-items:flex-start;gap:var(--s-1)}
.card-desc .clamp{margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft);min-height:2.9em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1;min-width:0}
.twin-card.expanded .card-desc .clamp{-webkit-line-clamp:unset;display:block}
.card-desc .more{flex:none;align-self:flex-end;border:0;background:var(--paper-2);color:var(--ink);border-radius:var(--r-full);
  min-width:28px;height:22px;padding:0 var(--s-2);font:700 14px/1 var(--grot);cursor:pointer}
.card-desc .more:hover{background:var(--line)}
.twin-card .actions,.twin-card>.tag{margin-top:auto}
/* the sidebar entirely in Rubik */
.side h2{font:600 11px/1.3 var(--grot);letter-spacing:.16em}
/* marks: projects round, groups square, applications hexagonal, also when a logo is uploaded */
img.logo.shape-project{border-radius:50%}
img.logo.shape-group{border-radius:18%}
img.logo.shape-app{border-radius:0;clip-path:polygon(50% 3%,93% 26.5%,93% 73.5%,50% 97%,7% 73.5%,7% 26.5%)}
.pick-btn img.logo.shape-group,.pick-opt img.logo.shape-group,.proj-one img.logo.shape-group{border-radius:18%}
/* live: the persona larger and higher so long subtitles stay below the face; the written chat only in text chat */
.stage-drawing{height:112%;bottom:-4%}
.interview:not(.text) .chatbox{display:none}
.subs{bottom:var(--s-4)}
.subs p{font-size:22px;line-height:1.3}
/* a family is drawn lower in its picture than one person: lifted off the stage's bottom edge, the bodies fading out, so long subtitles stay below the faces */
.stage-drawing.family{height:92%;bottom:15%}
/* on a phone: one person or the family across the width at the top of the stage, fading out downward instead of ending in a cut; subtitles smaller so they take fewer lines */
@media (max-width:640px){
  .stage-drawing{height:auto;width:92%;top:0;bottom:auto}
  .subs p{font-size:17px;line-height:1.3}
  .stage-drawing.family{height:auto;width:100%;top:3%;bottom:auto}
}
/* round 5: a wooden table in front of a drawing that sits above the stage's bottom edge (a family, everyone on a phone),
   so their bodies end behind it instead of fading out */
.stage-table{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;display:none;pointer-events:none}
.stage.drawing .stage-table.family{display:block;height:20%}
@media (max-width:640px){
  /* the drawing is fitted to the width at the top: the table starts a little above where it ends */
  .stage.drawing .stage-table{display:block;--tt:calc(92vw * 340 / 300 - 9vw);top:var(--tt);height:calc(100% - var(--tt))}
  .stage.drawing .stage-table.family{--tt:calc(3% + 100vw * 340 / 560 - 7vw);height:calc(100% - var(--tt))}
}
/* the text chat fills the screen below the bar from the first message on, with room under the bar's line */
.interview.text{padding-bottom:0}
.interview.text .iv-body{padding-top:var(--s-5);padding-bottom:0}
.interview.text .chatbox{height:var(--chat-h,calc(100vh - 260px));min-height:320px}
.interview.text .chatbox .msgs{flex:1 1 auto;min-height:0;max-height:none}
/* round 6: the top bar and the sidebar stand still; only the page scrolls, and bounces, under them */
html.app,html.app body{height:100%;overflow:hidden;overscroll-behavior:none}
html.app body{display:flex;flex-direction:column}
html.app .mast,html.app .viewing{flex:none}
html.app .shell{flex:1 1 auto;min-height:0}
html.app #view{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:auto}
html.app .editor{top:var(--s-4)}
@media (min-width:901px){ html.app .side{position:relative;top:0;align-self:stretch;max-height:none;height:100%;overscroll-behavior:contain} }
@media (max-width:900px){ html.app .side{height:100%} }

/* sections open and close with a chevron; no rule between them */
.sec-sub{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
/* the people in the picture, as chips: who they are and the name users see */
.people{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.people .person{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--line-strong);
  border-radius:var(--r-2);background:var(--paper);cursor:pointer;color:var(--ink)}
.people .person[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.people .person .who{font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.people .person .as{font-size:13px;color:var(--ink-soft)}
/* the top bar keeps its measures in every language: the switch, the language button and sign-out are as wide as their longest label */
#signout{min-width:var(--signout-w,auto);text-align:center}
#lang-btn .pick-name{min-width:var(--lang-w,auto);text-align:left}
/* the pickers on the scale (design system Ⅲ.13): 4 px around the mark, the panel 4 px below the button */
.pick-btn{padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1)}
.pick-panel{top:calc(100% + var(--s-1))}
.mast-product{min-width:var(--product-w,auto)}
/* the neutral behind every drawing, the same picture in light and dark mode */
.card-pic,.ed-portrait,img.thumb,.chip-av,.msg-av{background:var(--portrait-bg)}

/* a list beside its editor fills the window; each scrolls on its own */
.split.fit{align-items:stretch;grid-template-rows:minmax(0,1fr)}
.split.fit>.col,.split.fit>.editor{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.split.fit>.editor{position:static;padding-right:var(--s-2)}
.split.fit>.col .tbl thead th{position:sticky;top:0;z-index:1;background:var(--paper)}
.split.fit>.col .tbl-wrap{overflow-x:visible}

/* what users see: the original on the left, its translations on the right */

/* a focus group's table, painted as a picture: as tall as the portraits beside it, the office cropped from the top */
.table-pic .table-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}

/* a twin's own ground behind its transparent drawing (Portrait.groundOn sets --g, --a and the kind). The colours
   are the twin's; dark mode darkens the same colours here, so a mode switch is a restyle and no drawing is painted
   again. The grain is one small shared tile. */
:root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23n%29' fill='%23000'/%3E%3C/svg%3E"); --g-hl:#FFF7EC; }
.pg{ --g0:var(--g); --a0:var(--a); }
[data-theme="dark"] .pg{ --g0:color-mix(in oklab, var(--g) 40%, #1C1A17); --a0:color-mix(in oklab, var(--a) 55%, #1C1A17); --g-hl:#A39B8F; }
/* where the browser can, dark mode keeps each colour's hue at one darkness: pale grounds stay told apart */
@supports (color: oklch(from red l c h)) {
  [data-theme="dark"] .pg{ --g0:oklch(from var(--g) 0.4 calc(c * 1.8) h); --a0:oklch(from var(--a) 0.48 c h); }
}
.pg.g-flat{ background:var(--grain), var(--g0); background-blend-mode:multiply, normal; }
.pg.g-halo{ background:var(--grain),
  radial-gradient(ellipse 68% 68% at 42% 33%, color-mix(in oklab, var(--g0) 40%, var(--g-hl)) 0%, color-mix(in oklab, var(--g0) 70%, var(--g-hl)) 45%, var(--g0) 100%);
  background-blend-mode:multiply, normal; }
.pg.g-haloAccent{ background:var(--grain),
  radial-gradient(ellipse 55% 55% at 86% 20%, color-mix(in srgb, var(--a0) 50%, transparent) 0%, transparent 100%),
  radial-gradient(ellipse 68% 68% at 42% 33%, color-mix(in oklab, var(--g0) 40%, var(--g-hl)) 0%, color-mix(in oklab, var(--g0) 70%, var(--g-hl)) 45%, var(--g0) 100%);
  background-blend-mode:multiply, normal, normal; }
.pg.g-shard{ --shard:var(--shard-l); background:var(--grain),
  radial-gradient(ellipse 50% 50% at 42% 34%, color-mix(in srgb, color-mix(in oklab, var(--g0) 50%, var(--g-hl)) 55%, transparent) 0%, transparent 100%),
  var(--shard) 0 0 / 100% 100% no-repeat, var(--g0);
  background-blend-mode:multiply, normal, normal, normal; }
[data-theme="dark"] .pg.g-shard{ --shard:var(--shard-d); }

/* one language a line, as wide as the name in the twin's own language above */

.chat-list .chat-name,.shared-list .chat-name{font-weight:600}
/* a family together in a small round picture: the faces, not the floor */
.msg-av.fam,.chip-av.fam{object-fit:cover;object-position:50% 58%}

/* round 8b: text as it is, inputs inside tables */
.az-pre{margin:0;max-height:360px;overflow:auto;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);
  font:400 12px/1.5 var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.az-in{min-height:34px;padding:0 var(--s-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-2);color:var(--ink);font:inherit;width:100%;min-width:140px}
.page .block .proj-assign h3{font-size:18px}

/* round 8c: the Auto-Interview (autointerview.js): the questions to check, the twins by group, the run as it goes, the guide */
/* round 8p: framed in the shell as the dm Print Test's stations (its .sl-num, .sl-head h1, .sl-box): a
   kicker row (here the application's tabs), the view's title over a 2px rule, the content in a box with a 2px dark border
   on the platform's paper; inside it the console's sections, numbered as its folios */
.ai-stage{display:flex;flex-direction:column;min-width:0}
.ai-kick{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-bottom:18px}
.page .ai-kick a:not(.btn){font:400 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.page .ai-kick a:hover{color:var(--ink)}
/* round 8w, benja: "get rid of the little arrow on the auto interview that is next to the selected window": the
   selected tab is told by its ink and a 2px rule under it, the frame's own line, not by a mark in front of it */
.page .ai-kick a[aria-current="page"]{color:var(--ink);text-decoration:underline 2px var(--ink);text-underline-offset:6px}
.ai-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:var(--s-4);margin-bottom:var(--s-4)}
.ai-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.6vw,42px);line-height:1.02;letter-spacing:-.015em;margin:0;min-width:0;overflow-wrap:anywhere}
.ai-box{border:2px solid var(--ink);border-radius:0;background:var(--paper);padding:var(--pad-lg);display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
@media (max-width:640px){.ai-box{padding:var(--pad)}}
.ai-box>.ai-sec,.ai-box>.ai-launch{border-top:1px solid var(--line);padding-top:var(--s-5)}
.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);align-items:start}
.ai-col{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.ai-col>.ai-sec+.ai-sec{border-top:1px solid var(--line);padding-top:var(--s-5)}
@media (max-width:1000px){.ai-grid{grid-template-columns:minmax(0,1fr)}.ai-grid>.ai-col{border-top:1px solid var(--line);padding-top:var(--s-5)}}
.ai-sec{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.ai-folio{display:flex;align-items:baseline;gap:var(--s-3)}
.ai-no{font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-soft)}
.ai-folio h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:-.01em;margin:0}
.ai-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.ai-chooser{display:flex;gap:var(--s-2);flex-wrap:wrap}
.ai-cellbar{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.ai-cl{font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:var(--s-1)}
.ai-ctabs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.ai-ctab-w{display:inline-flex;gap:var(--s-1);align-items:center}
.ai-ctab{min-height:34px;border:1px solid var(--line-strong);border-radius:var(--r-full);background:transparent;color:var(--ink);padding:0 var(--s-3);
  font:700 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ai-ctab:hover{border-color:var(--ink)}
/* the chosen tab, heavier than a hovered one: a ground of the surface tinted with ink (apart from paper and surface in
   both modes) in a doubled ink ring, not inverted (decision 4.11) */
.ai-ctab[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 12%,var(--surface));border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ai-ctab .cnt{font-weight:400;margin-left:8px;opacity:.75}
#ai-cell-name{width:auto;flex:1 1 220px;max-width:320px}
.ai-bulk{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;padding:var(--s-2) var(--s-3);border:1px solid var(--ink);background:var(--surface);
  position:sticky;top:var(--s-2);z-index:5}
.ai-bulk .mselect{min-width:180px}
.ai-bn{font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:var(--s-2)}
.ai-shows{display:flex;flex-direction:column;gap:var(--s-2)}
.ai-percell{font-size:13px;color:var(--ink-soft)}
.ai-slots>.ai-percell{margin-left:auto}
.ai-slot img,.ai-file img{width:22px;height:22px;object-fit:cover;border-radius:2px;flex:none}
.ai-slot{display:inline-flex;gap:6px;align-items:center}
.ai-launch{display:flex;flex-direction:column;gap:var(--s-2)}
.ai-total{margin:0}
.ai-questions{display:flex;flex-direction:column;gap:var(--s-3)}
.ai-q{display:flex;flex-direction:column;gap:var(--s-2);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-3);background:var(--surface)}
.ai-q.sel{border-color:var(--ink)}
.ai-q-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.ai-qno{font:700 12px/1 var(--mono);color:var(--ink-soft);min-width:2ch}
.ai-q-head .mselect{min-width:220px}
.ai-qdel{margin-left:auto}
.ai-q textarea.az-in,.ai-q .fld textarea.az-in{min-height:auto;padding:var(--s-2);resize:vertical}
.ai-slots,.ai-files{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.ai-files:empty{display:none}
.ai-attach{gap:var(--s-2)}
.ai-slot{min-height:30px;border:1px solid var(--line-strong);border-radius:var(--r-full);background:transparent;color:var(--ink);
  font:700 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:var(--s-1) var(--s-3);text-align:left}
.ai-slot[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ai-file{display:inline-flex;gap:var(--s-2);align-items:center;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-1) var(--s-1) var(--s-1) var(--s-3);font-size:14px;max-width:100%}
.ai-file b{flex:none;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ai-fname{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
/* the x that removes an attachment or a cell: a small round button, not a link */
.ai-x{flex:none;width:26px;height:26px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:transparent;color:var(--ink-soft);font:400 16px/1 var(--grot);cursor:pointer;text-decoration:none}
.ai-x:hover{border-color:var(--ink);color:var(--ink)}
.ai-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-3)}
.ai-twinlist{display:flex;flex-direction:column;gap:var(--s-1);padding-left:26px}
.ai-groups .chk{flex:none}
/* round 8l: a run's results as the console's page: the run's line, the exports, the progress
   with its live table, a tab per twin, a tab per cell and pass beside the transcript; colours, type and spacing the platform's */
.ai-meta{margin:0;max-width:52ch;font:400 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);text-align:right}
@media (max-width:820px){.ai-meta{text-align:left}}
.ai-plate{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.ai-plate .kicker{color:var(--ink)}
.ai-exports{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-left:auto}
.ai-exports .btn[disabled]{opacity:.4;cursor:not-allowed}
.ai-progbox{border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--paper-2);overflow:hidden}
.ai-prog{height:10px;background:var(--line);overflow:hidden}
.ai-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
.ai-progtxt{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap;align-items:center;padding:var(--s-2) var(--s-3);border-top:1px solid var(--line);
  font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.ai-progtxt>span:empty{display:none}
.ai-progtxt #ai-count{color:var(--ink)}
.ai-eta{margin-left:auto;color:var(--ink)}
.ai-eta:empty+#ai-state{margin-left:auto}
.ai-live{border-top:1px solid var(--line-strong)}
.ai-lh,.ai-lr{display:grid;grid-template-columns:minmax(140px,220px) minmax(110px,180px) minmax(0,1fr) 150px 96px;gap:var(--s-3);align-items:center;padding:var(--s-2) var(--s-3)}
.ai-lh{font:400 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);border-bottom:1px solid var(--line)}
.ai-lr{border-bottom:1px solid var(--line);font-size:13px}
.ai-lr:last-child{border-bottom:0}
.ai-lr.slow{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ai-lr .mono{font:400 11px/1.3 var(--mono);color:var(--ink-mute)}
.ai-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-qx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
.ai-qx .ai-qn{margin-right:6px}
.ai-to{display:flex;align-items:center;gap:var(--s-2)}
.ai-tobar{width:56px;height:4px;background:var(--line);position:relative;flex:none;border-radius:var(--r-full);overflow:hidden}
.ai-tobar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.ai-lr .ai-to .mono{color:var(--accent)}
.ai-lr .ai-to .mono.hot{font-weight:700}
.ai-lr.slow .ai-el{color:var(--accent)}
.ai-lr-empty{padding:var(--s-2) var(--s-3);font-size:11px;color:var(--ink-mute)}
.ai-lr [data-waiting]{color:var(--ink-soft)}
.ai-progtxt .ai-conn{font:400 11px/1.3 var(--mono);color:var(--accent)}
.ai-reasoning{margin-top:var(--s-3)}
@media (max-width:820px){.ai-lh,.ai-lr{grid-template-columns:1fr 1fr;row-gap:var(--s-1)}.ai-qx{grid-column:1/-1}}
.ai-ptabs{display:flex;flex-wrap:wrap;border-bottom:2px solid var(--ink);margin-bottom:var(--s-4)}
.ai-ptab{background:transparent;border:1px solid var(--line);border-bottom:0;border-top:2px solid transparent;padding:var(--s-3) var(--s-4);margin:0 -1px -2px 0;
  font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer}
.ai-ptab:hover{color:var(--ink)}
.ai-ptab[aria-pressed="true"]{background:var(--surface);color:var(--ink);border-top-color:var(--accent);border-left-color:var(--line-strong);border-right-color:var(--line-strong)}
.ai-ptab .cnt{font-weight:400;font-size:10.5px;color:var(--ink-mute);margin-left:9px}
.ai-ptab[aria-pressed="true"] .cnt,.ai-ptab.err .cnt{color:var(--accent)}
.ai-iview{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--s-5);align-items:start}
.ai-rtabs{display:flex;flex-direction:column;position:sticky;top:var(--s-4);max-height:calc(100vh - 48px);overflow:auto;border-top:1px solid var(--line)}
.ai-rtab{background:transparent;border:0;border-bottom:1px solid var(--line);padding:var(--s-3);text-align:left;cursor:pointer;
  font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);transition:padding var(--dur-tap)}
.ai-rtab:hover{padding-left:18px;color:var(--accent)}
.ai-rtab[aria-pressed="true"]{color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);padding-left:18px}
@media (max-width:820px){.ai-iview{grid-template-columns:1fr;gap:var(--s-4)}
  .ai-rtabs{position:static;flex-direction:row;flex-wrap:wrap;border-top:0;max-height:none}.ai-rtab{border:1px solid var(--line);margin:0 -1px -1px 0}}
.ai-transcript{min-width:0;max-width:min(96ch,100%)}
.ai-qa{border:1px solid var(--line);border-top:0;background:var(--surface);padding:var(--s-3) var(--s-4);overflow-wrap:anywhere}
.ai-qa:first-child{border-top:1px solid var(--line)}
.ai-qline{display:flex;gap:9px;align-items:baseline}
.ai-qn{flex:none;font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;color:var(--ink-mute)}
h3.ai-qt{font:600 14px/1.45 var(--grot);letter-spacing:0;color:var(--ink)}
.ai-tagrow{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0 0;padding-left:29px}
.ai-t{font:400 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:var(--r-full);color:var(--ink-mute);border:1px solid var(--line)}
.ai-t.img{color:var(--ink-soft)}
.ai-t.off{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ai-a{font:400 13px/1.6 var(--mono);color:var(--ink);white-space:pre-wrap;margin:7px 0 0 29px;padding-left:11px;border-left:2px solid var(--line-strong)}
.ai-a.error{color:var(--accent)}
.ai-a.stopped{color:var(--ink-soft)}
.ai-guide{max-width:84ch;display:flex;flex-direction:column;gap:var(--s-3)}
/* round 8w, benja: "the guide put the title in the square": the guide's own heading, in its language, is the first
   thing in the box, set as the view's title was (Clash Display, the same size), a line under it as the box's sections have */
.ai-guide h1.ai-guide-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.6vw,42px);line-height:1.02;letter-spacing:-.015em;
  margin:0 0 var(--s-2);padding-bottom:var(--s-4);border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.ai-guide h2{font-size:28px;margin-top:var(--s-4)}
.ai-guide h3{font-size:20px;margin-top:var(--s-3)}
.ai-guide h4{font-size:16px}
.ai-guide p,.ai-guide ul,.ai-guide ol{margin:0}
.ai-guide li+li{margin-top:var(--s-1)}
.ai-guide code{font:400 13px/1.4 var(--mono);background:var(--paper-2);padding:1px 4px;border-radius:var(--r-2)}

/* round 8m, benja: the dm Print Test "should be a part of the platform not its own full screen section ... the dots can
   go into the top bar of the platform". A mounted application's page is framed in the page (app.js, mountedPage),
   filling the view below its title; the view does not scroll around it, the stations scroll inside it as before.
   Its stations sit in the masthead's slot, between the project and the mode switch, with "Neuer Test". */
.mast-slot{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--s-3)}
.app-steps{display:flex;align-items:center;flex-wrap:nowrap;flex:none}
.app-step{display:flex;align-items:center;justify-content:center;width:22px;height:30px;padding:0;background:none;border:0;cursor:pointer;flex:none}
.app-step i{display:block;width:8px;height:8px;border-radius:var(--r-full);border:1px solid var(--ink-mute);transition:transform .25s,background .25s}
.app-step:hover i{border-color:var(--ink)}
.app-step.done i{background:var(--ink);border-color:var(--ink)}
.app-step.cur i{background:var(--accent);border-color:var(--accent);transform:scale(1.3)}
.app-step.run i{background:var(--accent);border-color:var(--accent);animation:app-pulse 1.1s ease-in-out infinite}
.app-step.locked{opacity:.4;cursor:not-allowed}
@keyframes app-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
.app-new{flex:none;background:none;border:0;cursor:pointer;padding:var(--s-2);font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}
.app-new:hover{color:var(--accent)}
/* where the slot does not fit beside the rest (app.js, fitSlot): first without the product's word, then without the
   account's name too, then on a row of its own */
.mast-main.slot-tight .mast-product,.mast-main.slot-tighter .mast-product,.mast-main.slot-tighter .me-btn{display:none}
.mast-main.slot-below{flex-wrap:wrap;row-gap:var(--s-1)}
.mast-main.slot-below .mast-slot{order:4;flex-basis:100%;justify-content:flex-start}
@media (max-width:900px){ .mast-slot{order:4;width:100%;justify-content:flex-start} }
@media (prefers-reduced-motion:reduce){ .app-step.run i{animation:none} }
.page.app-page{height:100%;padding-bottom:var(--s-6)}
/* an iframe has no children: the page's rule for empty parts would hide it */
.page>.app-frame{display:block;flex:1 1 0;min-height:420px;width:100%;border:0;background:var(--paper)}

/* round 9: the three states, facts, the day chart from the theme's tokens */
:root{ --warn:#C98A12; }
[data-theme="dark"]{ --warn:#E0A62D; }
.pill.lvl-ok::before,.pill.lvl-warn::before,.pill.lvl-bad::before{content:"";width:7px;height:7px;border-radius:50%}
.pill.lvl-warn{border-color:var(--warn)}.pill.lvl-warn::before{background:var(--warn)}
.fact{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.fact b{font-weight:400;font-size:14px;display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.fact .mono,.az-detail .mono{font:400 12px/1.3 var(--mono);color:var(--ink-soft)}
/* round 9c: the marker while a newer result is read behind the shown one */
@keyframes az-pulse{from{opacity:.25}to{opacity:1}}
/* round 25: why a text chat's turn failed, under the conversation and above the field, until the next question is taken */
.turn-err{flex:none;align-self:center;max-width:calc(100% - 2 * var(--s-4));margin:0 var(--s-4) var(--s-3);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-2);background:var(--err-bg);color:var(--ink);font-size:14px;line-height:1.45;text-align:center;overflow-wrap:anywhere}
/* S3, second half: a closed project's notice, with the day it is deleted and the user's own download */
.closed-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:0 0 var(--s-4);padding:var(--s-2) var(--s-3);
  border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--paper-2)}
.closed-note p{margin:0;max-width:70ch}
/* S3, second half B: the terms of use before anything else */
.terms-card{max-width:40rem}
.terms-points{margin:0;padding-left:1.2em;display:grid;gap:var(--s-1)}