/* The Adviser Simulator's page: the source tool's components (its sim- classes) on the platform's
   tokens, inside the Auto-Interview's frame (.ai-stage, .ai-box in styles.css). Square panels with ink edges, one
   accent, the portraits at their own proportions. Since the drawings round the portraits are the twin drawn by avatar.js
   (transparent, on the twin's own ground from styles.css .pg) and the header is office.js's terrace with the twin. */
.adv-head-right{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.adv-steps{display:flex;gap:var(--s-4);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.adv-steps li{font:400 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.adv-steps li b{font-weight:400;margin-right:var(--s-1)}
.adv-steps li[aria-current="step"]{color:var(--ink)}
.adv-steps li[aria-current="step"] b{color:var(--accent);font-weight:700}
.adv-testmode{font:400 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-full);padding:4px 10px;white-space:nowrap}

/* the cover: the client (his name over the four facts, 2x2: life and money above, pension and tax below) beside the
   header, the practice room's words under both; narrow, the header first, then the facts, then the words */
.adv-cover{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"client hero" "intro intro";gap:var(--s-6);align-items:start}
.adv-intro{grid-area:intro}
.adv-sell{font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--ink-soft);max-width:72ch;margin-top:var(--s-3)}
.adv-hero{grid-area:hero;margin:0;border:2px solid var(--ink);background:var(--surface)}
.adv-scene{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.adv-scene>svg{position:absolute;inset:0;width:100%;height:100%}
.adv-cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);
  font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.adv-cap .v{color:var(--ink)}
.adv-persona{grid-area:client;align-self:stretch;display:flex;flex-direction:column;min-width:0;border:2px solid var(--ink);background:var(--surface)}
.adv-persona .hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--pad);border-bottom:1px solid var(--line)}
.adv-persona .nm,.adv-card .nm{font:600 22px/1.1 var(--display);letter-spacing:-.005em}
.adv-persona .sub,.adv-card .sub{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.adv-persona .facts{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:1px;background:var(--line)}
.adv-persona .facts>div{background:var(--surface);padding:var(--s-4) var(--pad);min-width:0}
.adv-persona .k{font:400 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.adv-persona .v{font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:var(--s-1);overflow-wrap:break-word}
@media (max-width:1000px){.adv-cover{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "client" "intro";gap:var(--pad)}}
/* 2026-10-29 follow-up: between the stacked layout and 1400 px the facts wrap into a card much taller than the 4:3
   picture beside it. There the picture grows to the card's height: the blurred terrace fills it, the twin stands at the
   bottom right a little larger, in a 5:6 box anchored to the scene's bottom right and never taller than the scene
   (near 1400 px the scene is only a little taller than 4:3, and an uncapped 5:6 box rose above it and cut his head).
   The drawing is anchored to that box's bottom right (xMaxYMax slice), so nothing of him is cut at any height between
   4:3 and 5:6. At 1400 px and wider the card is no taller than the picture, so nothing changes there, nor in the
   stacked layout. */
@media (min-width:1001px) and (max-width:1399px){
  .adv-hero{align-self:stretch;display:flex;flex-direction:column}
  .adv-scene{flex:1 1 auto}
  .adv-scene>svg.adv-scene-twin{inset:auto 0 0 auto;height:auto;aspect-ratio:5/6;max-height:100%}
}
@media (max-width:480px){.adv-persona .facts{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}

/* the set-up */
.adv-setup{gap:1px;background:var(--line);border:2px solid var(--ink);align-items:stretch}
.adv-cell{background:var(--paper);padding:var(--pad-lg);display:flex;flex-direction:column;gap:var(--pad)}
@media (max-width:640px){.adv-cell{padding:var(--pad)}}
.adv-q{display:flex;flex-direction:column;gap:var(--s-2)}
.adv-qh{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.adv-qt{font:600 19px/1.2 var(--display);letter-spacing:-.005em}
.adv-qv{font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.adv-chooser{flex-wrap:wrap}

/* the meeting */
.adv-conv{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--pad);align-items:start}
@media (max-width:860px){.adv-conv{grid-template-columns:minmax(0,1fr)}.adv-side{grid-template-columns:minmax(0,180px) minmax(0,1fr)}.adv-side .adv-card{grid-row:span 3}}
/* a phone: the card over the buttons, his picture cut to his head, nothing past the edge (review r1, 400 px) */
@media (max-width:560px){.adv-side{grid-template-columns:minmax(0,1fr)}.adv-side .adv-card{grid-row:auto}.adv-face{max-height:240px}
  .adv-composer{flex-wrap:wrap;justify-content:flex-end}.adv-composer textarea{flex-basis:100%}}
.adv-side{display:grid;gap:var(--s-3)}
.adv-side .btn.wide{width:100%;justify-content:center}
.adv-card{border:2px solid var(--ink);background:var(--surface)}
.adv-face{display:block;width:100%;aspect-ratio:409/690;object-fit:cover;object-position:50% 0}
.adv-card .bd{padding:var(--pad);border-top:1px solid var(--line)}
.adv-clockrow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.adv-clock{font:600 37px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.adv-clock.low{color:var(--accent)}
.adv-chat{border:2px solid var(--ink);background:var(--surface);display:flex;flex-direction:column;min-height:min(70vh,640px);min-width:0}
.adv-chathd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--pad);border-bottom:1px solid var(--line)}
.adv-chathd .t{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
/* the thread and its field are the platform's one chat (styles.css .msgs, .msg, .bubble, .composer); here only how they
   sit in the meeting's box */
.adv-thread{flex:1;overscroll-behavior:contain;max-height:62vh}
/* the mono line keeps the time on its first line at every width of the thread (2026-10-29): in the live transcript's
   narrow column "Sie · Beratung · gesprochen" and the time no longer fit side by side and the time fell under them.
   The time sits at the top right of the line, in room kept for it (the meeting's minute, m:ss, up to 6 characters);
   who said it, the mood and the spoken mark wrap beside it as they need, nothing cut */
.adv-thread .msg-k:has(> time){position:relative;padding-right:calc(6ch + var(--s-3))}
.adv-thread .msg-k>time{position:absolute;top:0;right:0}
.adv-thread .msg-k>.msg-sp{white-space:nowrap}      /* the spoken mark's dot stays with its word */
.adv-hint{font:400 11px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-mute);padding:0 var(--pad) var(--s-3);margin:0;min-height:var(--s-5)}
.adv-hint:empty{padding-bottom:0;min-height:0}

/* the live meeting (2026-10-28): the live interview's stage (styles.css .stage, .subs, .asked, .bar, .rec) inside the
   meeting's box, the transcript beside it; stacked when narrow */
.adv-chatctl{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.adv-modeseg .seg-b{min-width:0}
/* never shorter than what it holds: the stage, its bar and, stacked, the transcript (a shrunk box let the transcript
   cover the record button, review r1) */
.adv-live{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);flex:1 0 auto}
.adv-livestage{display:block;min-width:0;border-right:1px solid var(--line)}
.adv-room{flex:none;height:clamp(360px,52vh,600px);min-height:0;border-bottom:1px solid var(--line)}
.adv-room .stage-drawing{height:86%}
.adv-room .subs{bottom:var(--s-4);width:calc(100% - 2 * var(--pad))}
.adv-room .subs p{font-size:19px;line-height:1.4}
.adv-room .asked{left:var(--pad);right:var(--pad);top:var(--pad)}
.adv-room .asked p{font-size:16px}
/* the record button's bar (adv-recbar: .adv-bar is the debrief's score bar, whose 4 px height once squeezed this one, review r1) */
.adv-recbar{flex:none;justify-content:center;padding:var(--s-4) var(--pad)}
/* the transcript as tall as the stage and its bar beside it (contain: the stage sets the row's height), scrolling inside */
.adv-livechat{display:flex;flex-direction:column;min-width:0;min-height:0;contain:size}
.adv-live .adv-thread{max-height:none;flex:1;min-height:0}
.adv-live .adv-composer{flex-wrap:wrap;justify-content:flex-end}
.adv-live .adv-composer textarea{flex-basis:100%}
@media (max-width:1100px){.adv-live{grid-template-columns:minmax(0,1fr)}.adv-livestage{border-right:0}.adv-livechat{contain:none}.adv-live .adv-thread{flex:none;max-height:46vh}}
@media (max-width:640px){.adv-room{height:auto;aspect-ratio:4/5}.adv-room .subs p{font-size:16px}.adv-recbar .rec{width:100%}}

/* the cheat sheet, a drawer from the right */
.adv-drawer{position:fixed;top:0;right:0;z-index:80;height:100%;width:min(480px,100%);overflow-y:auto;background:var(--surface);border-left:2px solid var(--ink);padding:var(--pad-lg);box-shadow:-18px 0 44px rgba(0,0,0,.12)}
.adv-drawer .hd{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding-bottom:var(--s-4);border-bottom:2px solid var(--ink)}
.adv-drawer h3{font:600 20px/1.2 var(--display);margin:var(--pad-lg) 0 var(--s-3)}
.adv-dt{display:grid;grid-template-columns:40% minmax(0,1fr);gap:0 var(--gutter);padding:var(--s-3) 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5}
.adv-dt .k{font:400 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.adv-dt .v{color:var(--ink-soft)}
.adv-drawer ul{margin:0;padding-left:var(--s-4);font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.adv-drawer .foot{font:400 10.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--ink-mute);margin-top:var(--pad-lg);padding-top:var(--s-4);border-top:1px solid var(--line)}

/* the wait */
.adv-wait{display:grid;grid-template-columns:220px minmax(0,1fr);border:2px solid var(--ink);background:var(--surface);max-width:820px}
.adv-wait img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover;object-position:50% 20%;border-right:1px solid var(--line)}
.adv-wait .bd{padding:var(--pad-lg);display:flex;flex-direction:column;justify-content:center}
.adv-progress{height:var(--s-1);background:var(--paper-2);overflow:hidden;margin-top:var(--pad)}
.adv-progress i{display:block;height:100%;width:32%;background:var(--accent);animation:advslide 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.adv-progress i{animation:none}}
@keyframes advslide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media (max-width:560px){.adv-wait{grid-template-columns:minmax(0,1fr)}.adv-wait img{max-height:240px;border-right:0}}

/* the debrief */
.adv-verdict{font:500 clamp(20px,2.4vw,28px)/1.25 var(--display);letter-spacing:-.005em;max-width:42ch;margin:0}
.adv-evtop{display:grid;grid-template-columns:260px minmax(0,1fr) 200px;gap:1px;background:var(--line);border:2px solid var(--ink)}
.adv-evtop>div{background:var(--surface);padding:var(--pad-lg);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.adv-evtop .ph{padding:0}.adv-evtop .ph img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;object-position:50% 15%}
@media (max-width:1000px){.adv-evtop{grid-template-columns:minmax(0,1fr)}.adv-evtop .ph img{max-height:280px}}
.adv-ring{position:relative;width:160px;height:160px}
.adv-ring .trk{stroke:var(--paper-2)}.adv-ring .val{stroke:var(--accent)}
.adv-ring .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.adv-ring .n{font:600 44px/1 var(--display);font-variant-numeric:tabular-nums}
.adv-ring .l{font:400 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.adv-quote{font:500 19px/1.45 var(--display);margin:0}
.adv-ko{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.adv-ko>div{background:var(--paper);padding:var(--s-4)}
.adv-ko .st{font:700 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.adv-ko .hit{box-shadow:inset 0 3px 0 var(--accent)}.adv-ko .hit .st{color:var(--accent)}
.adv-ko .nm{font:600 16px/1.25 var(--display);margin-top:var(--s-1)}
.adv-ko p{font-size:13.5px;color:var(--ink-soft);margin:var(--s-2) 0 0}
@media (max-width:1000px){.adv-ko{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adv-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad) var(--s-6)}
@media (max-width:860px){.adv-dims{grid-template-columns:minmax(0,1fr)}}
.adv-dimhd{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.adv-dimhd h4{font:600 17px/1.25 var(--display);margin:0;flex:1;min-width:0}
.adv-dimhd .sc{font:600 22px/1 var(--display);font-variant-numeric:tabular-nums}
.adv-bar{height:var(--s-1);background:var(--paper-2);margin:var(--s-2) 0}.adv-bar i{display:block;height:100%;background:var(--accent)}
.adv-pm{margin:0;padding-left:var(--s-4);font-size:14px;line-height:1.6;color:var(--ink-soft)}
.adv-pm .p::marker{content:"+  ";color:var(--accent-2)}.adv-pm .m::marker{content:"–  ";color:var(--accent)}
.adv-tip{font-size:14px;margin:var(--s-2) 0 0;color:var(--ink)}.adv-tip b{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-right:var(--s-2);color:var(--accent)}
.adv-miss{font:400 12px/1.5 var(--mono);color:var(--ink-mute);margin:0}
.adv-rr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.adv-rr>div{background:var(--paper);padding:var(--s-4)}.adv-rr .wide{grid-column:1/-1}
.adv-rr h4{font:600 16px/1.25 var(--display);margin:0}.adv-rr .set{font:400 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:var(--s-1) 0}
.adv-rr p{font-size:14px;color:var(--ink-soft);margin:var(--s-2) 0 0}
@media (max-width:860px){.adv-rr{grid-template-columns:minmax(0,1fr)}}
/* stark, the strongest tag: 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) */
.adv-page .tag.solid{background:color-mix(in srgb,var(--ink) 12%,var(--surface));color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.adv-page .tag.warn{border-color:var(--accent);color:var(--ink)}.adv-page .tag.ok{border-color:var(--accent-2)}
.adv-tips{margin:0;padding-left:var(--s-5);display:grid;gap:var(--s-2);font-size:15px}
.adv-phase+.adv-phase{margin-top:var(--pad)}
.adv-phh{display:flex;align-items:baseline;gap:var(--s-3);border-bottom:1px solid var(--line);padding-bottom:var(--s-2)}
.adv-phh h4{font:600 17px/1.2 var(--display);margin:0}
.adv-iv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.adv-iv img{width:72px;height:96px;object-fit:cover;object-position:50% 15%;border:1px solid var(--line-strong)}
.adv-iv .rep{margin:0;font-size:15px}.adv-iv .rep .who{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-right:var(--s-2)}
.adv-iv .an{font-size:14px;color:var(--ink-soft);margin:var(--s-2) 0 0}
.adv-iv .inner{margin-top:var(--s-2);padding-left:var(--s-3);box-shadow:inset 3px 0 0 var(--accent)}.adv-iv .inner p{margin:var(--s-1) 0 0;font-size:14px}
.adv-pips{display:inline-flex;gap:3px;vertical-align:middle;margin-left:var(--s-2)}
.adv-pips i{width:8px;height:8px;border-radius:50%;border:1px solid var(--line-strong)}.adv-pips i.on{background:var(--accent);border-color:var(--accent)}
.adv-actions{border-top:1px solid var(--line);padding-top:var(--s-5);flex-wrap:wrap}