/* The Video-Analyse's page: the Auto-Interview's frame (.ai-stage, .ai-box in styles.css) as the Traumlabor uses it,
   on the platform's tokens, light and dark alike. Square panels with ink edges, one accent. Nothing is wider than its
   column at 400 px: the description's tables scroll inside their own box. */

/* ---- the head, as the dm Print Test's and the Traumlabor's: the step's kicker, the test marks at its right end, the title
   over the 2px rule, then the box; under the box what goes on from it (the steps are dots in the top bar, styles.css) */
.va-stage{display:flex;flex-direction:column;min-width:0}
.va-head-row{display:flex;align-items:baseline;gap:var(--s-2) var(--s-5);flex-wrap:wrap}
.va-num{font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-2)}
.va-marks{margin-left:auto;display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)}
.va-title{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.6vw,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}
.va-testmode{font:400 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--ink-soft)}
.tag.va-test{color:var(--ink);border-color:var(--accent)}
.va-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.va-nav[hidden]{display:none}

/* the set-up opens with its first section: no rule above it */
.va-box>.ai-sec:first-child{border-top:0;padding-top:0}

/* a status line holds nothing until there is something to say */
.va-page .status:empty{display:none}

/* ---- 01 the video */
.va-pick{align-self:flex-start;cursor:pointer}
.va-langs{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap}
.va-launch{display:flex;flex-direction:column;gap:var(--s-2)}
.va-upload{max-width:520px}

/* ---- 02 the analysis under way */
.va-now{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink)}

/* ---- the description: the model's Markdown read into blocks on the server */
.va-text{display:flex;flex-direction:column;gap:var(--s-2);max-width:86ch;min-width:0;overflow-wrap:anywhere}
.va-text p,.va-text blockquote{margin:0;line-height:1.55}
.va-text blockquote{padding-left:var(--s-3);border-left:2px solid var(--line-strong);color:var(--ink-soft)}
.va-text hr{border:0;border-top:1px solid var(--line);margin:var(--s-2) 0;width:100%}
.va-h{margin:var(--s-3) 0 0;font-family:var(--grot);font-weight:700;line-height:1.25}
h4.va-h{font-size:17px}
h5.va-h{font-size:15px}
h6.va-h{font-size:14px}
.va-li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);padding-left:calc(var(--d,0) * 18px)}
.va-mark{font:400 12px/1.55 var(--mono);color:var(--ink-soft);min-width:2ch}
.va-batch{margin:var(--s-4) 0 0;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.va-note{margin:0;font-size:13px;color:var(--ink-soft);max-width:72ch}
.va-tbl{max-width:100%;overflow-x:auto}
.va-tbl .tbl{font-size:13px;min-width:560px}
.va-tbl td,.va-tbl th{vertical-align:top}

/* ---- 03 the result: the files, the ad's story moments, the change by hand */
.va-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.va-top #va-meta{margin:0;overflow-wrap:anywhere}
.va-moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-4)}
.va-moment{margin:0;display:flex;flex-direction:column;border:1px solid var(--line-strong);background:var(--surface);min-width:0}
.va-moment.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.va-shot{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--paper-2)}
.va-none{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--paper-2) 0 6px,var(--paper) 6px 12px)}
.va-none span{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.va-moment figcaption{display:flex;flex-direction:column;gap:4px;padding:var(--s-2) var(--s-3) var(--s-3)}
.va-moment figcaption .btn{align-self:flex-start;margin-top:var(--s-1)}
.va-key{font-size:11px;color:var(--accent);letter-spacing:.1em}
.va-reason{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.va-picker{margin-top:var(--s-4);padding:var(--s-4);border:2px solid var(--ink);background:var(--paper-2);display:flex;flex-direction:column;gap:var(--s-3)}
.va-picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.va-picker-head h4{margin:0;font-family:var(--display);font-weight:600;font-size:20px}
.va-picker #va-picker-range{margin:0}
.va-shots{align-items:flex-end}
.va-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-3)}
.va-cand{display:flex;flex-direction:column;gap:4px;padding:var(--s-1);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;
  color:var(--ink);text-align:left;font:inherit}
.va-cand img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--paper)}
.va-cand span{font-size:11px;color:var(--ink-soft)}
.va-cand:hover,.va-cand:focus-visible{border-color:var(--ink)}
.va-cand.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

@media (max-width:640px){
  .va-moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .va-moment figcaption{padding:var(--s-2)}
  .va-cands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .va-tbl .tbl{min-width:480px}
}

/* the deep dive and the story moments, one line each, Details opening the rest; the files keep them in full */
.va-dds{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:110ch}
.va-dd{border-bottom:1px solid var(--line)}
.va-dd-row{display:flex;align-items:baseline;gap:var(--s-1) var(--s-3);padding:var(--s-2) 0;min-width:0}
.va-dd-no{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.va-dd-row b{flex:none;font-size:14px}
.va-dd-time{flex:none;font-size:11px;color:var(--ink-soft)}
.va-dd-what{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-dd-row .va-x{flex:none}
.va-dd-body{padding:0 0 var(--s-3) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.va-dd-body[hidden]{display:none}
.va-dd-full{margin:0;font-size:14px;line-height:1.5}
@media (max-width:640px){
  .va-dd-row{flex-wrap:wrap}
  .va-dd-what{flex-basis:100%;order:3;white-space:normal}
  .va-dd-row .va-x{margin-left:auto}
  .va-dd-body{padding-left:0}
}

/* ---- 01 the check step: the run's own video, its moments on the timeline, their words beside it (below it when narrow).
   The current entry is marked by the accent's edge and a tint of the surface, in both modes. */
.va-check{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:var(--s-5);align-items:start}
.va-player{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
/* the ground around a clip of another shape: the second paper, not black on a light page (decision 4.11) */
.va-screen{position:relative;background:var(--paper-2);aspect-ratio:16/9;border:2px solid var(--ink)}
.va-screen video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.va-noplay{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:var(--s-4);text-align:center;color:var(--ink);font-size:14px}
.va-bar{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap}
.va-gap{flex:1}
.va-play{width:44px;height:44px;border-radius:var(--r-full);border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;flex:none}
.va-play svg{width:16px;height:16px;fill:currentColor}
.va-play:focus-visible,.va-tl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.va-clock{font-size:12px;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the timeline is inset by half a marker so the first and last markers stay inside the column */
.va-tl{position:relative;height:36px;margin:0 14px;cursor:pointer;touch-action:none;flex:1 1 calc(100% - 28px);order:-1}
.va-rail{position:absolute;left:0;right:0;top:16px;height:4px;background:var(--line-strong)}
.va-span{position:absolute;top:14px;height:8px;background:color-mix(in srgb,var(--accent) 20%,transparent)}
.va-span.cur{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.va-done{position:absolute;left:0;top:16px;height:4px;background:var(--ink)}
.va-head{position:absolute;top:8px;width:2px;height:20px;background:var(--ink);transform:translateX(-1px)}
.va-pin{position:absolute;top:0;transform:translateX(-50%);min-width:22px;height:17px;padding:0 4px;border:1px solid var(--ink);border-radius:2px;
  background:var(--surface);color:var(--ink);font:700 10px/15px var(--mono);text-align:center;cursor:pointer}
.va-pin::after{content:"";position:absolute;left:50%;top:16px;width:1px;height:16px;background:var(--ink);transform:translateX(-.5px)}
.va-pin.cur{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.va-pin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.va-opt{display:flex;align-items:center;gap:var(--s-2);font-size:13px;cursor:pointer;color:var(--ink)}
.va-follow{font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:var(--r-full);
  padding:7px 10px;background:none;color:var(--ink-soft);cursor:pointer}
.va-follow[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.va-follow[aria-pressed="true"]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}

.va-list{list-style:none;margin:0;padding:var(--s-2) 0 0;position:relative;display:flex;flex-direction:column;gap:var(--s-2);
  max-height:min(600px,72vh);overflow-y:auto;scroll-behavior:auto;border-top:1px solid var(--line);overscroll-behavior:contain}
.va-entry{display:grid;grid-template-columns:auto minmax(0,1fr) 96px;gap:var(--s-1) var(--s-3);padding:var(--s-3);
  border:1px solid var(--line);border-left:4px solid transparent;background:var(--surface)}
.va-entry[aria-current="true"]{border-color:var(--line-strong);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.va-entry.new{border-style:dashed;border-left:4px solid var(--accent)}
.va-no{font-size:11px;font-weight:700;line-height:1.6;color:var(--accent);letter-spacing:.08em}
.va-hd{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;min-width:0}
.va-hd b{font-size:15px;overflow-wrap:anywhere}
.va-at{background:none;border:0;padding:0;font-size:11px;color:var(--ink-soft);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
span.va-at{cursor:default;text-decoration:none}
.va-desc{grid-column:2;margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.va-thumb{grid-column:3;grid-row:1 / span 3;width:96px;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--paper-2);border:1px solid var(--line)}
span.va-thumb.va-none{display:flex}
span.va-thumb.va-none span{font-size:9px}
.va-ed{grid-column:2 / -1;display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.va-ed input,.va-ed textarea{width:100%;font:400 14px/1.5 var(--grot);color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:var(--s-2)}
.va-ed textarea{min-height:88px;resize:vertical}
.va-tools{grid-column:2 / -1;display:flex;gap:var(--s-1) var(--s-3);flex-wrap:wrap;align-items:center}
.va-who{font:400 10.5px/1.4 var(--mono);color:var(--ink-mute);letter-spacing:.04em}
.va-x{background:none;border:0;padding:4px 0;font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.va-x:hover{color:var(--ink)}
.va-x.danger:hover{color:var(--accent)}
.va-x:disabled{color:var(--ink-mute);cursor:not-allowed;text-decoration:none}

.va-checked{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s-4)}
.tag.va-ok{color:var(--ink);border-color:var(--accent-2)}
.tag.va-ok::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent-2);margin-right:6px}
.tag.va-no-check{border-color:var(--line-strong)}
.va-checked .va-who{font-size:11px;color:var(--ink-soft)}
.va-checked.va-bare{border-top:0;padding-top:0}

/* ---- the page after Fertig: the checked run in short, then the way into the Interview Factory */
.va-sum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3)}
.va-sum li{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-strong);background:var(--surface);padding:var(--s-2);min-width:0}
.va-sum b{font-size:14px;overflow-wrap:anywhere}
/* the factory's button is long: at 400 px it breaks onto two lines inside the box instead of running out of it */
#va-to-factory{max-width:100%;white-space:normal;text-align:center;line-height:1.15;padding-block:var(--s-2)}
@media (max-width:640px){ .va-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)} }

@media (max-width:1000px){
  .va-check{grid-template-columns:minmax(0,1fr)}
  .va-list{max-height:52vh}
}
@media (max-width:640px){
  .va-entry{grid-template-columns:auto minmax(0,1fr) 72px;padding:var(--s-2) var(--s-3)}
  .va-thumb{width:72px}
  .va-screen{border-width:1px}
}