/* The Traumlabor page's look: v17's stations on the platform's tokens, laid out as the dm Print Test's page (benja,
   2026-10-30 and 31): the stations as dots in the top bar, the explanation with its drawing at the left outside the box,
   the kicker and title over the box, the box with the dark border (.ai-box in styles.css) holding the work, back and
   next under it. Square panels with ink edges, one accent, the drawings in dm's line manner. Every surface is on the
   page's side: light on a light page, dark on a dark one, nothing inverted (the platform's rule, "Light pages light,
   dark pages dark", checked in the browser). Nothing here is wider than its column: no sideways scroll at 400 px. */

/* ---- the station drawings (traumlabor-art.js): ink on paper, surfaces in --surface, hatching for what is absent */
.tl-art{display:block;width:100%;height:auto;--art-p2:var(--paper-2);--art-mute:var(--ink-mute);--art-dk:color-mix(in srgb,var(--ink) 78%,var(--paper))}
[data-theme="dark"] .tl-art{--art-p2:#3E3E37;--art-mute:#A49E90;--art-dk:#5A574F}
.tl-art .ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-art .ln2{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.tl-art .hl{fill:none;stroke:var(--ink-soft);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.tl-art .lnf{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tl-art .lnp{fill:var(--art-p2);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tl-art .lna{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-art .sl{fill:none;stroke:var(--ink-soft);stroke-width:1.1;stroke-dasharray:3 4;stroke-linecap:round}
.tl-art .slf{fill:var(--surface);fill-opacity:.55;stroke:var(--ink-soft);stroke-width:1.1;stroke-dasharray:3 4;stroke-linecap:round;stroke-linejoin:round}
.tl-art .sla{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round}
.tl-art .f-ac{fill:var(--accent)}
.tl-art .f-tint{fill:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.tl-art .hatch-ln{stroke:var(--art-mute);stroke-width:1}
.tl-art .num{font:700 9px/1 var(--mono);fill:var(--surface);text-anchor:middle;dominant-baseline:central}
.tl-art .num.mut{fill:var(--ink-soft)}
/* the second pendulum over the box swings side to side from its point at the top while the persona sleeps, as v17's
   did; still for reduced motion */
.tl-art .tl-pend{transform-box:view-box;transform-origin:220px 0}
.tl-pend-art .tl-pend{transform-origin:100px 0}
.tl-hyp-pend.swinging .tl-pend{animation:tl-swing 2.4s ease-in-out infinite}
@keyframes tl-swing{0%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}100%{transform:rotate(-14deg)}}
@media (prefers-reduced-motion:reduce){.tl-hyp-pend.swinging .tl-pend{animation:none}}

/* ---- the page as dm's, to its small things (benja, 2026-10-31: "have the design be consistent with all of these
   little things"); every value here is the dm Print Test's as the shell shows it (its stylesheet's .sl-screen, .sl-vis,
   .sl-head, .sl-num, .sl-frame, .sl-expl, .sl-steps, .dm-testmodus, measured in the browser beside it):
   - the explanation at the left, outside the box: open, 38% of the station with 38 px inside its right edge and no
     gap; shut, the head and the box take the whole width; no transition; at 960 px and under it stands over the box,
     at most 38% of the window high, scrolling inside itself
   - "‹ Schließen" at its top, 16 px over the drawing; the drawing in a 1 px ink frame on the paper, 8 px inside it;
     the paragraphs at 15/24 px, 14 px apart; the checklist under them in mono with small square boxes
   - at the right, level with "‹ Schließen": the kicker (mono, 8 px over the title), "› Erklärung" before it while the
     explanation is shut, the test mode's notice at the right end; the title in the display face over the 2px rule,
     16 px under it and 16 px over the box */
.tl-station{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;min-width:0;container-type:inline-size}
.tl-station.open{grid-template-columns:38% minmax(0,1fr)}
.tl-info{display:none}
.tl-station.open .tl-info{display:flex;flex-direction:column;min-width:0;padding-right:38px}
@media (max-width:960px){.tl-station.open{grid-template-columns:minmax(0,1fr)}
  .tl-station.open .tl-info{padding-right:0;max-height:38vh;overflow:auto;scrollbar-width:thin;margin-bottom:var(--s-4)}}
.tl-col{display:flex;flex-direction:column;min-width:0}
.tl-fold{font:400 11px/normal var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);background:none;border:0;padding:0;cursor:pointer}
.tl-fold:hover{color:var(--accent)}
.tl-fold:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tl-fold-close{align-self:flex-start;margin-bottom:16px}
.tl-station.open .tl-fold-open{display:none}
.tl-art-slot:empty{display:none}
.tl-frame{margin:0 0 6px;background:var(--paper);border:1px solid var(--ink);padding:8px}
@media (max-width:960px){.tl-frame{max-width:420px}}
.tl-expl{margin:14px 0 0;font-size:15px;line-height:24px;color:var(--ink-soft)}
.tl-head-row{display:flex;align-items:baseline;justify-content:flex-start;gap:var(--s-5)}
.tl-head-row:has(.tl-testmode){flex-wrap:wrap;row-gap:var(--s-1)}
.tl-num{font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-2)}
.tl-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.6cqw,42px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);
  margin:0 0 16px;padding-bottom:16px;border-bottom:2px solid var(--ink);overflow-wrap:anywhere}
/* dm's notice that the answers are recorded, in the risk colour, at the head row's right end */
.tl-page{--tl-risk:#A32D2D}
[data-theme="dark"] .tl-page{--tl-risk:#F0887E}
.tl-testmode{margin-left:auto;padding-left:var(--s-2);border-left:4px solid var(--tl-risk);font:400 11px/1.3 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tl-risk);text-align:right;margin-bottom:var(--s-2)}
.tl-box{position:relative;gap:var(--s-5)}

/* ---- the persona falls asleep (benja, 2026-10-31): over the box the darkness grows slowly, about half a minute to a
   deep dim in which the words stay readable, a dimming of the page's own colours in either mode, not an inversion;
   the pendulum swings in front of it on no ground of its own. Going on, the darkness parts from the middle like
   opening eyes (.tl-wake, about a second). For reduced motion: a plain dim at once, a still pendulum, a plain cut. */
.tl-page{--tl-sleep:rgba(0,0,0,.3)}
[data-theme="dark"] .tl-page{--tl-sleep:rgba(0,0,0,.45)}
.tl-box.asleep{min-height:520px}
.tl-hyp{position:absolute;inset:0;z-index:3;pointer-events:none;background-color:transparent;animation:tl-fall 30s cubic-bezier(.3,0,.6,1) forwards}
@keyframes tl-fall{to{background-color:var(--tl-sleep)}}
.tl-hyp-pend{position:absolute;top:0;left:50%;width:min(220px,46%);margin:0;transform:translateX(-50%)}
/* the lids cover what can be seen of the box (it is often taller than the window), so they part at the eye's height */
.tl-wake{position:absolute;left:0;right:0;top:0;height:min(100%,100vh);z-index:4;pointer-events:none}
.tl-wake i{position:absolute;left:0;right:0;height:50%;background:var(--tl-sleep);animation:tl-lid 1s cubic-bezier(.5,0,.3,1) forwards}
.tl-wake i:first-child{top:0;transform-origin:top}
.tl-wake i:last-child{bottom:0;transform-origin:bottom}
@keyframes tl-lid{to{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.tl-hyp{animation:none;background-color:var(--tl-sleep)}.tl-wake{display:none}}

/* ---- under the box, outside it, as dm's arrows: 14 px under it, what Next waits for at the left, the buttons at the
   right, Next's right edge on the box's outer edge (benja, 2026-10-31: "change the arrows to be like in dm") */
.tl-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:14px}
.tl-nav-msg{margin:0;flex:1 1 220px;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.tl-nav-msg:empty{display:none}
.tl-nav-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
/* dm's round arrows (its .sl-nav button inside the shell): 44 px, an ink ring on the paper; the hover is the second
   paper here, not dm's inverted ring (the theme rule); greyed as dm's when the station is not open, greyed by colour
   when it cannot start, so the reason over it stays readable */
.tl-arrow{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--ink);color:var(--ink);background:var(--paper);font:400 22px/1 var(--grot);
  display:flex;align-items:center;justify-content:center;padding:0 0 3px;cursor:pointer;transition:background .15s}
.tl-arrow:hover:not([disabled]):not(.locked){background:var(--paper-2)}
.tl-page .tl-arrow[disabled]{opacity:.3;cursor:not-allowed;background:var(--paper);color:var(--ink);border-color:var(--ink)}
.tl-arrow.locked{color:var(--ink-mute);border-color:var(--line);background:var(--paper);cursor:not-allowed}

/* every button here keeps to the page's side: the ghost buttons' hover is the second paper, not inverted; a greyed one
   is greyed; the reason on hover reads on the page's own surface */
.tl-page .btn.gh:hover:not([disabled]):not(.locked){background:var(--paper-2);color:var(--ink)}
.tl-page .btn[disabled]{color:var(--ink-mute);border-color:var(--line);background:var(--paper-2);cursor:not-allowed}
.tl-page [data-tip]:hover::after,.tl-page [data-tip]:focus-visible::after{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.tl-list{list-style:none;margin:14px 0 0;padding:0;font:400 11.5px/23px var(--mono);letter-spacing:.04em;color:color-mix(in srgb,var(--ink-soft) 60%,var(--ink-mute))}
.tl-list li{display:flex;gap:10px;align-items:baseline}
.tl-list li::before{content:"";width:6px;height:6px;border:1px solid currentColor;flex:none;position:relative;top:-1px}
.tl-list li.run{color:var(--ink)}
.tl-list li.run::before{background:var(--accent);border-color:var(--accent);animation:tl-blink 1.4s ease-in-out infinite}
.tl-list li.ok{color:var(--ink-soft)}
.tl-list li.ok::before{background:var(--ink);border-color:var(--ink)}
@keyframes tl-blink{50%{opacity:.35}}
.tl-main{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.tl-main:empty{display:none}
.tl-sec{gap:var(--s-3)}
.tl-sec .ai-folio{flex-wrap:wrap}
.tl-hint{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:72ch}
.tl-lead2{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:72ch}
.tl-h4{font:600 19px/1.15 var(--display);letter-spacing:-.005em;margin:var(--s-3) 0 0}
.tl-ai{border-color:var(--line-strong)}
.tl-why{margin:0;color:var(--ink-soft)}
.tl-failed{display:flex;flex-direction:column;gap:var(--s-3)}
.tl-running{display:flex;align-items:center;gap:var(--s-3);font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* the waiting dots are the platform's own (.msg-dots in styles.css, the text chat's); the step marker blinks on its own */
@media (prefers-reduced-motion:reduce){.tl-list li.run::before{animation:none}}
.tl-sleep{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:1px dashed var(--line-strong);border-radius:var(--r-2)}

/* ---- 1 Setup: the industries, the eight personas drawn, the run's language */
.tl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:640px){.tl-tiles{grid-template-columns:minmax(0,1fr)}}
.tl-tile{display:flex;flex-direction:column;gap:var(--s-1);text-align:left;padding:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.tl-tile:hover{border-color:var(--ink)}
.tl-tile[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tl-tile .t{font:600 20px/1.1 var(--display);letter-spacing:-.005em}
.tl-tile .d{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.tl-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:760px){.tl-people{grid-template-columns:minmax(0,1fr)}}
.tl-pick{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-3);align-items:start;text-align:left;padding:var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.tl-pick:hover{border-color:var(--ink)}
.tl-pick[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tl-pick-pic{display:block;width:96px;aspect-ratio:300/340;border-radius:var(--r-2);background:var(--portrait-bg);object-fit:cover}
.tl-pick-bd{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-pick .k,.tl-persona-k{font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tl-pick .t{font:600 18px/1.15 var(--display)}
.tl-pick .d{font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.tl-persona{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-4);align-items:end;max-width:760px}
.tl-persona-pic{display:block;width:150px;aspect-ratio:300/340;border-radius:var(--r-2);background:var(--portrait-bg);object-fit:cover}
.tl-persona h3{font-size:24px;line-height:1.05;margin:2px 0 6px}
.tl-persona p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.tl-persona .tl-fixed{margin-top:var(--s-3)}
@media (max-width:480px){.tl-persona{grid-template-columns:104px minmax(0,1fr)}.tl-persona-pic{width:104px}.tl-pick{grid-template-columns:72px minmax(0,1fr)}.tl-pick-pic{width:72px}}

/* ---- 2 Stimulus: the drop, the thumbnails, the summary of a run's stimulus */
.tl-drop{display:flex;flex-direction:column;gap:var(--s-1);align-items:center;text-align:center;padding:var(--s-5) var(--s-4);border:1px dashed var(--ink-soft);border-radius:var(--r-2);background:var(--surface);cursor:pointer;color:var(--ink)}
.tl-drop:hover,.tl-drop.over{border-color:var(--accent);background:var(--paper-2)}
.tl-drop small{color:var(--ink-soft);font-size:12.5px}
.tl-thumbs{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tl-thumbs:empty{display:none}
.tl-thumb{position:relative;margin:0;width:120px;height:90px;border:1px solid var(--line-strong);border-radius:var(--r-2);overflow:hidden;background:var(--paper-2)}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tl-thumb .ai-x{position:absolute;top:4px;right:4px;background:var(--surface)}
.tl-sum{display:flex;flex-direction:column;gap:var(--s-3)}
.tl-sumline{margin:0;font-size:17px}
.tl-sumtext{margin:0;white-space:pre-wrap;color:var(--ink-soft);max-width:72ch}
.tl-stimgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-3)}
.tl-stimgrid figure{margin:0}
.tl-stimgrid img{display:block;width:100%;max-height:46vh;object-fit:contain;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-2)}
.tl-stimgrid figcaption{font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:var(--s-1)}

/* ---- 3 Hypnose */
.tl-miss{margin:0;padding-left:18px;color:var(--ink-soft)}
.tl-ready{margin:0;font:600 22px/1.25 var(--display);letter-spacing:-.005em;max-width:46ch}
.tl-kern{margin:0;font:600 21px/1.3 var(--display);max-width:52ch}
.tl-bilanz{display:flex;gap:var(--s-5);flex-wrap:wrap;font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.tl-bilanz b{display:block;font:600 34px/1 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}

/* ---- 4 Bildpunkte: the markers over the stimulus beside the list of points */
.tl-points{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s-5);align-items:start}
@media (max-width:1100px){.tl-points{grid-template-columns:minmax(0,1fr)}}
.tl-points-img{display:flex;flex-direction:column;gap:var(--s-3);position:sticky;top:var(--s-3)}
@media (max-width:1100px){.tl-points-img{position:static}}
.tl-markwrap{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;line-height:0;border:1px solid var(--line-strong);background:var(--paper-2)}
.tl-markwrap img{display:block;max-width:100%;max-height:60vh;width:auto;height:auto}
.tl-mark{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--mono);
  background:var(--accent);color:var(--accent-ink);border:2px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s}
.tl-mark.no{background:var(--surface);color:var(--ink);border-color:var(--ink-mute);border-style:dashed}
.tl-mark.big{width:42px;height:42px;font-size:14px}
.tl-mark.small{width:26px;height:26px;font-size:11px}
.tl-mark.hl{transform:translate(-50%,-50%) scale(1.2);z-index:3}
.tl-imgsw{justify-content:center}
.tl-pts{border-top:1px solid var(--line-strong)}
.tl-pt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--line);font-size:14.5px;align-items:start}
.tl-pt.hl{background:var(--paper-2)}
.tl-pt .k{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 12px/1 var(--mono);color:var(--accent);min-width:28px}
.tl-pt.no .k{color:var(--ink-mute)}
.tl-pt .b{min-width:0;overflow-wrap:anywhere}
.tl-pt .b small{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.45;margin-top:3px}
.tl-pt .s{font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:right;white-space:nowrap}
.tl-pt.yes .s{color:var(--accent)}
.tl-pt.no .s{color:var(--ink-mute)}
@media (max-width:480px){.tl-pt{grid-template-columns:auto minmax(0,1fr)}.tl-pt .s{grid-column:2;text-align:left}}
.tl-dom{display:inline-block;height:6px;background:var(--ink);border-radius:3px;vertical-align:middle;margin-right:6px;max-width:60px}
.tl-roles{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}
.tl-role{border-color:var(--accent);color:var(--ink)}
.tl-crop{display:block;flex:none;border:1px solid var(--line-strong);border-radius:var(--r-2);background-color:var(--paper-2);background-repeat:no-repeat}
.tl-crop.whole{background-size:contain;background-position:center}

/* ---- 5 Traum: each scene's text with its picture beside it (variant A) */
.tl-dream{display:flex;flex-direction:column;gap:var(--s-5)}
.tl-dhead{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.tl-dtitle{font:600 30px/1.05 var(--display);letter-spacing:-.01em;margin:0}
@media (max-width:640px){.tl-dtitle{font-size:24px}}
.tl-meta{margin:0;font:400 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tl-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-5);align-items:start;border-top:1px solid var(--line-strong);padding-top:var(--s-4)}
.tl-dream.live .tl-scene{grid-template-columns:minmax(0,1fr)}
@media (max-width:1000px){.tl-scene{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}}
.tl-scene-t{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.tl-scene-k b{color:var(--accent);font-weight:700}
.tl-scene h4{font:600 23px/1.1 var(--display);margin:0}
.tl-stext p{margin:0 0 .7em;font-size:16px;line-height:1.65;max-width:62ch}
.tl-tags{display:flex;flex-wrap:wrap;gap:6px}
.tl-naht{margin:0;font:400 12px/1.5 var(--mono);color:var(--ink-soft);padding-left:var(--s-3);box-shadow:inset 1px 0 0 var(--accent)}
.tl-scene-pic{min-width:0}
.tl-ende{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4);box-shadow:inset 3px 0 0 var(--accent);background:var(--surface);font-size:16px;line-height:1.6}
.tl-ende b{font:600 16px/1.3 var(--display)}

/* ---- the interpretation's blocks, ported from v17 (.deut, .urteil, .sig, .poles, .bind) */
.tl-deut{padding:var(--s-3) var(--s-4);box-shadow:inset 3px 0 0 var(--accent);background:var(--surface);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.tl-deut>b{display:block;font:600 15px/1.35 var(--display);margin-bottom:var(--s-1)}
.tl-deut::after{content:"";display:block;clear:both}
.tl-l{font:400 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* v17 set these on ink with paper letters; here they stand out by the accent's tint on the page's own surface, so they
   are light on a light page and dark on a dark one (benja, 2026-10-30: the cut and the verdicts inverted) */
.tl-urteil{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r-2);font-size:16px;line-height:1.55}
.tl-urteil>b{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 72%,var(--ink))}
.tl-urteil .src{font-size:13.5px;color:var(--ink-soft)}
.tl-urteil .tl-pair{float:none;margin:0 0 var(--s-2)}
.tl-urteil figcaption{color:var(--ink-soft)}
.tl-big{display:block;font:600 24px/1.25 var(--display);margin:2px 0 4px}
.tl-wort{font-weight:600}
.tl-sig{border-top:1px solid var(--line-strong)}
.tl-sig .r{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) minmax(0,140px);gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:start}
.tl-sig .k{display:flex;flex-direction:column;gap:4px;font:400 12px/1.4 var(--mono);color:var(--ink-soft);overflow-wrap:anywhere}
.tl-sig .b{min-width:0;overflow-wrap:anywhere}
.tl-sig .b small{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.45;margin-top:3px}
.tl-sig .w{font:600 16px/1.3 var(--display);text-align:right;overflow-wrap:anywhere}
@media (max-width:640px){.tl-sig .r{grid-template-columns:minmax(0,1fr)}.tl-sig .w{text-align:left}}
.tl-th{margin:0;display:inline-flex;flex-direction:column;gap:2px;vertical-align:top}
.tl-th img{width:72px;height:72px;object-fit:cover;border:1px solid var(--line-strong);border-radius:var(--r-2);display:block;background:var(--paper-2)}
.tl-th figcaption{font:400 9.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.tl-pair{display:flex;gap:6px;flex-wrap:wrap;float:right;margin:0 0 var(--s-2) var(--s-3)}
@media (max-width:480px){.tl-pair{float:none;margin:0 0 var(--s-2)}}
.tag.tl-h.p,.tag.tl-w.p{border-color:var(--accent);color:var(--ink)}
.tag.tl-h.t,.tag.tl-w.t{color:var(--ink-mute)}
.tag.tl-w.n{background:var(--paper-2);color:var(--ink);border-color:var(--ink);font-weight:700}
.tag.tl-w.a{border-style:dashed;color:var(--ink)}
.tl-kons{display:flex;flex-direction:column;gap:var(--s-4)}
.tl-kons2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.tl-kons2 ul{margin:var(--s-2) 0 0;padding-left:18px;line-height:1.55}
.tl-kons2 li{margin-bottom:var(--s-2)}
@media (max-width:760px){.tl-kons2{grid-template-columns:minmax(0,1fr)}}
.tl-ganz{padding:var(--s-3) var(--s-4);box-shadow:inset 3px 0 0 var(--ink);background:var(--surface);font-size:14px;line-height:1.55}
.tl-poles{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-3);align-items:center}
.tl-poles .c{border:1px solid var(--line-strong);background:var(--surface);padding:var(--s-3) var(--s-4);border-radius:var(--r-2);font-size:15px;line-height:1.5}
.tl-poles .k{display:block;font:400 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-1)}
.tl-poles .vs{font:600 20px/1 var(--display);color:var(--accent)}
@media (max-width:640px){.tl-poles{grid-template-columns:minmax(0,1fr)}.tl-poles .vs{transform:rotate(90deg);justify-self:center}}
.tl-bind{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r-2)}
.tl-bind .k{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 72%,var(--ink))}
.tl-bind .role{font:600 20px/1.3 var(--display)}
.tl-bind .e{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.tl-bind .s{font-size:15.5px;line-height:1.55}
.tl-sal-says{margin:0;font-size:16px;line-height:1.6;max-width:72ch}
/* the findings' tables: one card per row on a phone, each cell named by its column */
.tl-tw{max-width:100%;overflow-x:auto}
.tl-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tl-tbl th{text-align:left;font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:var(--s-2) 6px;vertical-align:bottom}
.tl-tbl td{vertical-align:top;padding:var(--s-2) 6px;border-bottom:1px solid var(--line);line-height:1.45;overflow-wrap:anywhere}
.tl-tbl td small{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
.tl-tbl td.k .tl-crop{margin-bottom:4px}
@media (max-width:900px){
  .tl-tbl thead{display:none}
  .tl-tbl,.tl-tbl tbody,.tl-tbl tr,.tl-tbl td{display:block;width:100%}
  .tl-tbl tr{border:1px solid var(--line-strong);border-radius:var(--r-2);padding:var(--s-2) var(--s-3);margin-bottom:var(--s-3);background:var(--surface)}
  .tl-tbl td{border:0;padding:4px 0;display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:var(--s-3)}
  .tl-tbl td::before{content:attr(data-l);font:400 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .tl-tbl td.k{display:block;padding-bottom:var(--s-2);border-bottom:1px solid var(--line);margin-bottom:var(--s-1)}
  .tl-tbl td.k::before{display:none}
}
@media (max-width:420px){.tl-tbl td{grid-template-columns:minmax(0,1fr);gap:0}}
/* the downloads on the right, the last one's right edge on the box's inner edge (benja, 2026-10-30 and 31) */
.tl-exports{flex-wrap:wrap;justify-content:flex-end}
.tl-downloads{border-top:1px solid var(--line);padding-top:var(--s-4)}

/* ---- 6 Couch: the platform's one chat (styles.css .msgs, .msg, .bubble); both speakers on the left, Salander's
   bubble on the second paper colour; the phase (REGIE) as a line across, her note (NOTIZ) set off quietly, the
   picture she lays down (BILD) in the thread */
.tl-couch{border:2px solid var(--ink);background:var(--chat);display:flex;flex-direction:column;min-width:0}
.tl-couch-head{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--chat-bar)}
.tl-couch-av{width:40px;height:40px;border-radius:50%;background:var(--portrait-bg);object-fit:cover;flex:none}
.tl-couch-head .who{font:400 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:var(--s-3)}
.tl-couch-head .who b{color:var(--ink);font-weight:700}
.tl-couch-head .tl-ai{margin-left:auto}
.tl-thread{max-height:72vh;min-height:220px}
.tl-thread .msg.tl-sal .bubble{background:var(--paper-2);border-color:var(--paper-2)}
.tl-thread .msg.tl-sal .bubble::before,.tl-thread .msg.tl-sal .bubble::after{background:var(--paper-2)}
.tl-thread .msg.tl-phase{align-self:stretch;max-width:none;display:flex;align-items:center;gap:var(--s-3);margin:var(--s-2) 0 0;font:400 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tl-thread .msg.tl-phase::before,.tl-thread .msg.tl-phase::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.tl-thread .msg.tl-phase span{text-align:center;max-width:70%}
.tl-thread .msg.tl-phase b{color:var(--accent);font-weight:700;margin-right:6px}
.tl-thread .msg.tl-notiz{align-self:flex-start;max-width:min(520px,80%);display:block;padding:6px 10px;margin-left:44px;border-left:1px solid var(--line-strong);font:400 12px/1.5 var(--mono);color:var(--ink-soft)}
.tl-thread .msg.tl-notiz b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;margin-right:8px}
.tl-thread .msg.tl-bild{align-self:flex-start;margin-left:44px;max-width:min(320px,80%);display:block}
.tl-thread .msg.tl-bild figure{margin:0;background:var(--surface);border:1px solid var(--bubble-twin-edge);border-radius:var(--r-2);padding:var(--s-2)}
.tl-thread .msg.tl-bild img{display:block;width:100%;max-height:40vh;object-fit:contain}
.tl-thread .msg.tl-bild figcaption{font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
@container (max-width:480px){.tl-thread .msg.tl-notiz,.tl-thread .msg.tl-bild{margin-left:34px}}

/* a long button label wraps on a phone instead of running past the edge */
.tl-page .tl-main .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.15;padding-block:var(--s-2)}
/* with the explanation open the work area is narrower: the poster over its points rather than beside them */
@media (max-width:1500px){.tl-station.open .tl-points{grid-template-columns:minmax(0,1fr)}.tl-station.open .tl-points-img{position:static}}