/* VADILATOR (2026-10-28): what only the Vadilator tab has. The frame, cards, rows, buttons,
   inputs, segments and tables are SETTINGS' and USERS' own (style.css, scoped to #viewVad
   there too); this adds the queue, the delivery, the checking views and the report.
   Drawn here first, no Figma node yet: light, A.D.I.'s tokens and status marks. */
#viewVad .st-body textarea, #viewVad .st-body input[type=date], #viewVad .st-body input[type=datetime-local] {
  box-sizing: border-box; border-radius: 0; background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); color: var(--tx-black);
  font: 400 13px 'Chakra Petch', sans-serif; padding: 4px 8px; outline: none; max-width: 100%; }
#viewVad .st-body input[type=date], #viewVad .st-body input[type=datetime-local] { height: 26px; }
#viewVad .st-body textarea { width: 100%; resize: vertical; line-height: 1.45; }
#viewVad .st-body textarea:focus, #viewVad .st-body input[type=date]:focus, #viewVad .st-body input[type=datetime-local]:focus { border-color: var(--blue); }
#viewVad .st-body textarea.wide { max-width: 520px; }
/* the pane as wide as USERS' wide sections (1180): SETTINGS' 900 let the file table of a new
   delivery run out of its card (2026-10-28). Doubled class: the shared rule in style.css is
   an :is() of ids, as strong as #viewVad .st-sec; a delivery (.vad-del, below) stays unlimited */
#viewVad .st-sec.st-sec { max-width: 1180px; }
#viewVad .vad-up { width: 100%; }
/* the waveform under a film, as SO CHECK's: peaks, a red playhead, a click to jump */
#viewVad .vad-wave { position: relative; height: 56px; margin: 8px 0 12px; background: var(--ui-main-light); border: 1px solid var(--bx-stroke); cursor: pointer; overflow: hidden; }
#viewVad .vad-wave canvas { display: block; width: 100%; height: 100%; }
#viewVad .vad-wave span { position: absolute; left: 8px; top: 5px; font: 600 11px/1 'Chakra Petch', sans-serif; letter-spacing: .5px; color: var(--tx-dark); pointer-events: none; }
#viewVad .vad-wave i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #d9534f; pointer-events: none; }
#viewVad .vad-wave.silent { background: #fff6ec; border-color: #e8a33d; }
#viewVad .vad-wave.silent span { color: #b5761c; }
#viewVad .vad-up td:nth-child(2) { overflow-wrap: anywhere; }
#viewVad .st-body button:disabled { opacity: .45; cursor: default; }
#viewVad .st-body button.on { background: var(--blue-super); border-color: var(--blue); color: var(--blue); }
#viewVad .st-body button.x { height: 22px; width: 22px; padding: 0; font: 400 15px/1 'Chakra Petch', sans-serif; letter-spacing: 0; flex: none; }
#viewVad .st-foot .msg.err { color: #d9534f; }
#viewVad .st-foot .msg.err::before { background: #d9534f; }
#viewVad .vad-pad { padding: 10px 12px; }
#viewVad .vad-pre { white-space: pre-wrap; }
#viewVad .vad-hint { margin-top: 12px; font-size: 13px; }
#viewVad .vad-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
#viewVad .vad-bar .sp, #viewVad .vad-tools .sp { flex: 1; }
#viewVad .vad-bar input[type=text] { min-width: 220px; }

/* status marks: a word on a tint */
#viewVad .vad-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font: 600 11px/1 'Chakra Petch', sans-serif; letter-spacing: .5px;
  background: var(--ui-main); color: var(--tx-dark); border: 1px solid var(--bx-stroke); white-space: nowrap; }
#viewVad .vad-tag::before { content: ''; width: 6px; height: 6px; margin-right: 6px; background: var(--bx-stroke-dark); }
#viewVad .vad-tag.st-in_review::before { background: var(--blue); }
#viewVad .vad-tag.st-ready::before, #viewVad .vad-tag.st-clean::before { background: #3ab36b; }
#viewVad .vad-tag.st-sent { color: var(--tx-standard); }
#viewVad .vad-tag.st-fixes::before, #viewVad .vad-tag.st-late::before { background: #e8a33d; }
#viewVad .vad-tag.st-issues::before { background: #d9534f; }
#viewVad .vad-am { display: inline-block; width: 7px; height: 7px; flex: none; background: var(--bx-stroke-dark); }
#viewVad .vad-am.am-ok { background: #3ab36b; }
#viewVad .vad-am.am-issues { background: #d9534f; }

/* numbers across the top */
#viewVad .vad-stats { display: flex; gap: 28px; margin: 0 0 16px; flex-wrap: wrap; }
#viewVad .vad-stats div { display: flex; flex-direction: column; gap: 4px; }
#viewVad .vad-stats span { color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; text-transform: uppercase; }
#viewVad .vad-stats b { font: 600 22px/1 'Chakra Petch', sans-serif; color: var(--tx-black); }
#viewVad .vad-stats b i { font-style: normal; font-size: 13px; color: var(--tx-dark); font-weight: 400; }
#viewVad .vad-stats b.alert { color: #d9534f; }

/* tables */
#viewVad .vad-tbl { width: 100%; border-collapse: collapse; }
#viewVad .vad-tbl th { text-align: left; padding: 8px 12px; color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; background: var(--ui-main-light); border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vad-tbl td { padding: 9px 12px; border-top: 1px solid var(--bx-stroke-light); vertical-align: middle; }
#viewVad .vad-tbl .r { text-align: right; }
#viewVad .vad-tbl tr[data-open] { cursor: pointer; }
#viewVad .vad-tbl tr[data-open]:hover td { background: var(--ui-main-light); }
#viewVad .vad-tbl tr.faded td { opacity: .55; }
#viewVad .vad-tbl tr.sum td { font-weight: 600; background: var(--ui-main-light); }
#viewVad .vad-tbl tr.skip td { opacity: .55; }
#viewVad .vad-cn { font-weight: 600; color: var(--tx-black); }
#viewVad .vad-camp { color: var(--tx-dark); font-size: 13px; margin-top: 2px; }
#viewVad .vad-mix { display: flex; gap: 5px; flex-wrap: wrap; }
#viewVad .vad-mix span { padding: 1px 7px; background: var(--ui-main); border: 1px solid var(--bx-stroke-light); font-size: 12px; color: var(--tx-dark); white-space: nowrap; }
#viewVad .vad-clock { display: block; font: 600 15px/1 'Chakra Petch', sans-serif; color: var(--tx-black); white-space: nowrap; }
#viewVad .vad-clock.soon, #viewVad .vad-kv b.soon { color: #c47d12; }
#viewVad .vad-clock.now, #viewVad .vad-kv b.now { color: #d9534f; }
#viewVad .vad-clock-sub { display: block; margin-top: 3px; color: var(--tx-standard); font-size: 12px; }
#viewVad .vad-spec td { padding: 6px 12px; }
#viewVad .vad-spec td.ok { color: #2e8f55; }
#viewVad .vad-spec td.bad { color: #d9534f; font-weight: 600; }

/* taking files in */
#viewVad .vad-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 14px; cursor: pointer;
  border: 1px dashed var(--bx-stroke-dark); background: var(--ui-main-light); text-align: center; margin-bottom: 10px; }
#viewVad .vad-drop:hover, #viewVad .vad-drop.over { border-color: var(--blue); background: var(--blue-super); }
#viewVad .vad-drop b { color: var(--tx-black); }
#viewVad .vad-drop span { color: var(--tx-dark); font-size: 13px; }
#viewVad .vad-th { width: 44px; height: 44px; object-fit: contain; background: var(--ui-main); border: 1px solid var(--bx-stroke-light); display: grid; place-items: center; font-size: 10px; color: var(--tx-dark); }
#viewVad .vad-prog { height: 3px; background: var(--ui-main); margin-top: 5px; max-width: 280px; }
#viewVad .vad-prog i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
#viewVad .vad-prog.bad i { background: #d9534f; width: 100% !important; }
#viewVad .vad-chk { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 0 0; color: var(--tx-dark); font-size: 13px; white-space: nowrap; }
#viewVad .vad-chk input[type=checkbox] { transform: scale(.85); }
#viewVad .st-body input.vad-lang { width: 58px; text-transform: uppercase; }
#viewVad .vad-up select { min-width: 110px; }
#viewVad .vad-up td:nth-child(n+3) { white-space: nowrap; }

/* ONE DELIVERY: the bar that stays, the work, the client's file */
#viewVad .vad-del .st-sec { max-width: none; }
#viewVad .vad-dbar { position: sticky; top: -20px; z-index: 5; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: -20px -24px 16px; padding: 12px 24px;
  background: var(--ui-white); border-bottom: 1px solid var(--bx-stroke); }
#viewVad .vad-dt { flex: 1; min-width: 220px; }
#viewVad .vad-dc { display: flex; align-items: center; gap: 10px; font: 600 17px/1.2 'Chakra Petch', sans-serif; color: var(--tx-black); }
#viewVad .vad-timer { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--bx-stroke); background: var(--ui-main-light); }
#viewVad .vad-timer .dot { width: 7px; height: 7px; background: var(--bx-stroke-dark); }
#viewVad .vad-timer.on .dot { background: #3ab36b; }
#viewVad .vad-timer b { font: 600 15px/1 'Chakra Petch', sans-serif; min-width: 58px; font-variant-numeric: tabular-nums; }
#viewVad .vad-kv { display: flex; flex-direction: column; gap: 4px; text-align: right; }
#viewVad .vad-kv span { color: var(--tx-standard); font: var(--ui-tab); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
#viewVad .vad-kv b { font: 600 16px/1 'Chakra Petch', sans-serif; color: var(--tx-black); white-space: nowrap; }
#viewVad .vad-kv b i { font-style: normal; font-weight: 400; color: var(--tx-dark); font-size: 13px; }
#viewVad .vad-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
#viewVad .vad-side .card { margin-bottom: 12px; }
#viewVad .vad-sect { margin-bottom: 20px; }
#viewVad .vad-sect-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#viewVad .vad-sect-h b { font: 600 14px/1 'Chakra Petch', sans-serif; color: var(--tx-black); }
#viewVad .vad-sect-h span { color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-sect-h i { flex: 1; height: 1px; background: var(--bx-stroke); }
#viewVad .vad-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#viewVad .vad-tile { background: var(--ui-white); border: 1px solid var(--bx-stroke); cursor: pointer; border-top: 3px solid var(--bx-stroke-dark); min-width: 0; }
#viewVad .vad-tile:hover { border-color: var(--blue-medium); }
#viewVad .vad-tile.t-ok { border-top-color: #3ab36b; }
#viewVad .vad-tile.t-issues { border-top-color: #d9534f; }
#viewVad .vad-tile-th { height: 110px; display: grid; place-items: center; background: repeating-conic-gradient(#efefef 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; overflow: hidden; }
#viewVad .vad-tile-th img { max-width: 100%; max-height: 110px; }
#viewVad .vad-tile-th span { color: var(--tx-dark); font: 600 13px 'Chakra Petch', sans-serif; }
#viewVad .vad-tile-m { padding: 7px 9px; border-top: 1px solid var(--bx-stroke-light); }
#viewVad .vad-tile-m b { display: block; font-weight: 600; font-size: 12px; color: var(--tx-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewVad .vad-tile-m span { display: block; color: var(--tx-dark); font-size: 12px; margin-top: 2px; }
#viewVad .vad-sw { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
#viewVad .vad-sw i { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.15); flex: none; }
#viewVad .vad-sw b { flex: 1; font-weight: 600; font-size: 13px; }
#viewVad .vad-sw span { color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-note { position: relative; padding: 8px 10px; margin-bottom: 6px; background: #fff8e6; border: 1px solid #f0dfae; color: #5d4a12; font-size: 13px; white-space: pre-wrap; }
#viewVad .vad-note b { display: block; margin-bottom: 2px; color: #5d4a12; font-weight: 600; }
#viewVad .vad-note button.x { position: absolute; top: 4px; right: 4px; }
#viewVad .vad-prev { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vad-prev:last-of-type { border-bottom: 0; }
#viewVad .vad-prev b { min-width: 30px; color: #d9534f; font: 600 13px 'Chakra Petch', sans-serif; }
#viewVad .vad-prev span { color: var(--tx-dark); font-size: 13px; }
#viewVad .vad-copy { margin-bottom: 8px; }
#viewVad .vad-copy b { display: block; font: 600 12px 'Chakra Petch', sans-serif; margin-bottom: 3px; }
#viewVad .vad-form { display: grid; gap: 8px; }
#viewVad .vad-form label { display: grid; gap: 3px; color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-form input, #viewVad .vad-form select { width: 100%; }

/* CHECKING ONE FILE: the list, the work, the findings */
#viewVad .vad-check { display: grid; grid-template-columns: 190px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
#viewVad .vad-alist { background: var(--ui-white); border: 1px solid var(--bx-stroke); padding: 4px 0 8px; max-height: calc(100vh - 260px); overflow: auto; position: sticky; top: 64px; }
#viewVad .vad-alist .st-grp { padding: 10px 10px 4px; }
#viewVad .vad-ai { display: flex; align-items: center; gap: 7px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--tx-dark); border-left: 2px solid transparent; }
#viewVad .vad-ai span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewVad .vad-ai:hover { background: var(--ui-main-light); color: var(--tx-black); }
#viewVad .vad-ai.on { background: var(--blue-super); color: var(--tx-black); border-left-color: var(--blue); }
#viewVad .vad-ah { margin-bottom: 8px; }
#viewVad .vad-ah b { display: block; font: 600 15px/1.3 'Chakra Petch', sans-serif; color: var(--tx-black); word-break: break-all; }
#viewVad .vad-ah span { color: var(--tx-dark); font-size: 13px; }
#viewVad .vad-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; background: var(--ui-white); border: 1px solid var(--bx-stroke); border-bottom: 0; }
#viewVad .vad-tools select { min-width: 140px; }
#viewVad .vad-meta { padding: 5px 8px; min-height: 16px; background: var(--ui-main-light); border: 1px solid var(--bx-stroke); border-bottom: 0; color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-stage { background: repeating-conic-gradient(#ececec 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--bx-stroke); padding: 12px; overflow: auto; max-height: calc(100vh - 300px); text-align: center; margin-bottom: 12px; }
#viewVad .vad-stage.tall { max-height: calc(100vh - 260px); }
#viewVad .vad-stage canvas { box-shadow: 0 0 0 1px var(--bx-stroke-dark); max-width: none; vertical-align: top; }
#viewVad .vad-stage video { max-width: 100%; max-height: 60vh; background: #000; }
#viewVad .vad-stage iframe { border: 0; background: #fff; }
#viewVad #vadPageFrame { height: 70vh; box-shadow: 0 0 0 1px var(--bx-stroke-dark); }
#viewVad .vad-banner { display: inline-block; box-shadow: 0 0 0 1px var(--bx-stroke-dark); background: #fff; overflow: hidden; }
#viewVad .vad-twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
#viewVad .vad-fcol { position: sticky; top: 64px; }
#viewVad .vad-fp { background: var(--ui-white); border: 1px solid var(--bx-stroke); padding: 0 0 10px; max-height: calc(100vh - 200px); overflow: auto; }
#viewVad .vad-fp > textarea, #viewVad .vad-fp > .ctl, #viewVad .vad-fp > .unit { margin: 6px 12px 0; width: calc(100% - 24px); }
#viewVad .vad-fp-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px 2px; }
#viewVad .vad-fp-h b { font: var(--ui-tab); letter-spacing: 1px; text-transform: uppercase; color: var(--tx-black); }
#viewVad .vad-fp-h .n { color: var(--tx-standard); font: var(--ui-tab); }
#viewVad .vad-fp-h button { margin-left: auto; height: 22px; }
#viewVad .vad-fp-sub { padding: 0 12px 6px; color: var(--tx-dark); font-size: 12px; border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vad-f { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 12px; border-bottom: 1px solid var(--bx-stroke-light); cursor: pointer; }
#viewVad .vad-f:hover { background: var(--ui-main-light); }
#viewVad .vad-f.sel { background: var(--blue-super); box-shadow: inset 2px 0 var(--blue); }
#viewVad .vad-f input { margin-top: 2px; transform: scale(.8); }
#viewVad .vad-f b { display: block; font-weight: 600; font-size: 13px; color: var(--tx-black); }
#viewVad .vad-f span { display: block; color: var(--tx-dark); font-size: 12px; margin-top: 2px; }
#viewVad .vad-f em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--tx-standard); text-transform: uppercase; letter-spacing: .5px; }
#viewVad .vad-sev { width: 7px; height: 7px; margin-top: 6px; background: var(--blue); display: inline-block; flex: none; }
#viewVad .vad-sev.s-error { background: #d9534f; }
#viewVad .vad-sev.s-warn { background: #e8a33d; }
#viewVad .vad-n { display: flex; align-items: flex-start; gap: 8px; margin: 6px 12px 0; padding: 7px 8px; background: #fff8e6; border: 1px solid #f0dfae; font-size: 13px; color: #5d4a12; white-space: pre-wrap; }
#viewVad .vad-n span { flex: 1; }
#viewVad .vad-n em { font-style: normal; color: #9b8240; }
#viewVad .vad-n b.pin { width: 18px; height: 18px; display: grid; place-items: center; background: #e8a33d; color: #fff; font: 600 11px 'Chakra Petch', sans-serif; flex: none; border-radius: 50%; }
#viewVad .vad-fp-nav { display: flex; gap: 6px; padding: 12px 12px 0; margin-top: 10px; border-top: 1px solid var(--bx-stroke-light); flex-wrap: wrap; }
#viewVad .vad-fp-nav .primary { margin-left: auto; }
#viewVad .vad-frames { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; }
#viewVad .vad-fr { position: relative; width: 104px; border: 1px solid var(--bx-stroke); cursor: pointer; background: var(--ui-main-light); }
#viewVad .vad-fr.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
#viewVad .vad-fr img { display: block; width: 100%; height: 70px; object-fit: contain; background: #fff; }
#viewVad .vad-fr span { display: block; padding: 2px 5px; font-size: 11px; color: var(--tx-dark); }
#viewVad .vad-fr button.x { position: absolute; top: 2px; right: 2px; height: 18px; width: 18px; background: var(--ui-white); }
#viewVad #vadFrameView { margin: 0 12px 12px; }
#viewVad .vad-cl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--bx-stroke-light); }
#viewVad .vad-cl b { font-weight: 400; font-size: 13px; }
#viewVad .vad-cl.c-ok b { color: #2e8f55; }
#viewVad .vad-cl.c-bad b { color: #d9534f; }
#viewVad .vad-cl input { width: 100%; margin-top: 4px; }
#viewVad .vad-cl .us-seg span { padding: 0 8px; }

/* the report */
#viewVad .vad-rf { margin-bottom: 10px; }
#viewVad .vad-rf b { display: block; font-weight: 600; font-size: 13px; }
#viewVad .vad-rf ul { margin: 4px 0 0; padding: 0; list-style: none; }
#viewVad .vad-rf li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
#viewVad .vad-rf li span { color: var(--tx-dark); }
#viewVad .vad-rf li .vad-sev { margin-top: 0; }
#viewVad .vad-rc { display: flex; margin: 0 0 8px; white-space: normal; }
#viewVad .vad-kvs { display: grid; gap: 8px; }
#viewVad .vad-kvs div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--tx-dark); }
#viewVad .vad-kvs b { color: var(--tx-black); font: 600 13px 'Chakra Petch', sans-serif; }

/* clients and the archive */
#viewVad .vad-cr { display: grid; grid-template-columns: minmax(0, 1fr) 70px 130px 110px 150px; gap: 14px; align-items: center; padding: 12px; border-top: 1px solid var(--bx-stroke-light); cursor: pointer; }
#viewVad .card > .vad-cr:first-child { border-top: 0; }
#viewVad .vad-cr:hover { background: var(--ui-main-light); }
#viewVad .vad-cr b { display: block; font-weight: 600; color: var(--tx-black); }
#viewVad .vad-cr > div > span { display: block; color: var(--tx-dark); font-size: 13px; margin-top: 2px; }
#viewVad .vad-cr-r { text-align: right; color: var(--tx-dark); font-size: 13px; }
#viewVad .vad-cr-r.busy { color: var(--blue); }
#viewVad .vad-cr-r.warn { color: #c47d12; }
#viewVad .vad-crumb { color: var(--tx-dark); font-size: 13px; margin-bottom: 8px; }
#viewVad .vad-crumb span { color: var(--blue); cursor: pointer; }
#viewVad .vad-chead { display: flex; align-items: flex-start; gap: 12px; }
#viewVad .vad-chead > div { flex: 1; }
#viewVad .vad-colrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#viewVad .vad-colrow input[type=color] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--bx-stroke-dark); background: none; }
#viewVad .vad-colrow input[type=text]:nth-of-type(1) { width: 92px; }
#viewVad .vad-month { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; }
#viewVad .vad-month b { font: 600 15px 'Chakra Petch', sans-serif; color: var(--tx-black); }
#viewVad .vad-month span { color: var(--tx-dark); font-size: 13px; }

@media (max-width: 1280px) {
  #viewVad .vad-check { grid-template-columns: 160px minmax(0, 1fr) 280px; }
  #viewVad .vad-twocol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  #viewVad .vad-work, #viewVad .vad-check { grid-template-columns: minmax(0, 1fr); }
  #viewVad .vad-alist, #viewVad .vad-fcol { position: static; max-height: none; }
}

/* THE BOARD (vadilator-board.js, 2026-10-28): the picture with the old tool's kit, in the
   tab's dress. Tools and layers in two rows over the stage; the stage on the checkerboard */
#viewVad .vad-board { margin-bottom: 12px; }
#viewVad .vad-board[hidden] { display: none; }
#viewVad .vb-tools, #viewVad .vb-layers { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 5px 8px; background: var(--ui-white); border: 1px solid var(--bx-stroke); border-bottom: 0; }
#viewVad .vb-layers { background: var(--ui-main-light); gap: 4px; }
#viewVad .vb-tools .sp, #viewVad .vb-layers .sp { flex: 1; }
#viewVad .vb-grp, #viewVad .vb-seg { display: inline-flex; }
#viewVad .vb-grp button, #viewVad .vb-seg button { margin-left: -1px; }
#viewVad .vb-grp button:first-child, #viewVad .vb-seg button:first-child { margin-left: 0; }
#viewVad .vb-tools button, #viewVad .vb-layers button { height: 24px; padding: 0 8px; font: 600 11px/1 'Chakra Petch', sans-serif; letter-spacing: .6px; position: relative; }
#viewVad .vb-tools button.on, #viewVad .vb-layers button.on { z-index: 1; }
#viewVad .vb-lab { color: var(--tx-standard); font: 600 10px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; margin-right: 4px; }
#viewVad .vb-layers button i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: -1px; border: 1px solid currentColor; opacity: .5; }
#viewVad .vb-layers button.on i { opacity: 1; }
#viewVad .vb-layers i.ly-guides { border-color: #00b4c8; }
#viewVad .vb-layers i.ly-margins { border-color: #b87400; }
#viewVad .vb-layers i.ly-bands { border-color: #00a0c8; border-style: dashed; }
#viewVad .vb-layers i.ly-blocks { border-color: #12945c; border-style: dotted; }
#viewVad .vb-layers i.ly-edges { border-color: #d9534f; }
#viewVad .vb-layers i.ly-safe { border-color: #d9534f; border-style: dashed; }
#viewVad .vb-layers i.ly-dim { background: #2a2c31; border-color: #2a2c31; }
#viewVad .vb-layers i.ly-notes { border-color: #e8a33d; border-radius: 50%; }
#viewVad .vb-layers button.on i.ly-guides { background: #00b4c8; }
#viewVad .vb-layers button.on i.ly-margins { background: #b87400; }
#viewVad .vb-layers button.on i.ly-bands { background: #00a0c8; }
#viewVad .vb-layers button.on i.ly-blocks { background: #12945c; }
#viewVad .vb-layers button.on i.ly-edges, #viewVad .vb-layers button.on i.ly-safe { background: #d9534f; }
#viewVad .vb-layers button.on i.ly-notes { background: #e8a33d; }
#viewVad .vb-stage { position: relative; overflow: hidden; height: max(360px, calc(100vh - 340px)); border: 1px solid var(--bx-stroke); background: repeating-conic-gradient(#ececec 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; touch-action: none; user-select: none; cursor: grab; }
#viewVad .vb-stage.tall { height: max(420px, calc(100vh - 300px)); }
#viewVad .vad-board.sm .vb-stage { height: 440px; }
#viewVad .vb-stage.grab { cursor: grabbing; }
#viewVad .vb-stage[data-tool=ruler], #viewVad .vb-stage[data-tool=rect], #viewVad .vb-stage[data-tool=circle], #viewVad .vb-stage[data-tool=arrow], #viewVad .vb-stage[data-tool=pin] { cursor: crosshair; }
#viewVad .vb-stage[data-tool=pick] { cursor: cell; }
#viewVad .vb-stage[data-tool=cv] { cursor: ew-resize; }
#viewVad .vb-stage[data-tool=ch] { cursor: ns-resize; }
#viewVad .vb-stage[data-tool=cf] { cursor: nwse-resize; }
#viewVad .vb-cv { position: absolute; box-shadow: 0 0 0 1px var(--bx-stroke-dark), 0 2px 10px rgba(0, 0, 0, .08); }
#viewVad .vb-cv img, #viewVad .vb-cv svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; max-width: none; }
#viewVad .vb-cv svg { overflow: visible; pointer-events: none; }
#viewVad .vb-cv.px img { image-rendering: pixelated; }
#viewVad .vb-zoom { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; background: rgba(255, 255, 255, .92); border: 1px solid var(--bx-stroke); font: 600 11px/1 'Chakra Petch', sans-serif; color: var(--tx-dark); pointer-events: none; }
#viewVad .vb-hud { position: absolute; left: 8px; right: 8px; top: 8px; width: max-content; max-width: calc(100% - 16px); padding: 5px 9px; background: rgba(29, 31, 36, .9); color: #fff; font: 600 11.5px/1.35 'Chakra Petch', sans-serif; letter-spacing: .3px; white-space: pre-wrap; pointer-events: none; }
#viewVad .vb-hud[hidden] { display: none; }
#viewVad .vb-loupe { position: absolute; width: 132px; height: 132px; border: 1px solid #1a1a1a; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; image-rendering: pixelated; }
#viewVad .vb-loupe[hidden] { display: none; }
#viewVad .vb-note { position: absolute; z-index: 5; display: flex; gap: 6px; align-items: center; padding: 6px; background: var(--ui-white); border: 1px solid var(--blue); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); cursor: default; }
#viewVad .vb-note input { width: 260px; height: 26px; box-sizing: border-box; border: 1px solid var(--bx-stroke-dark); padding: 0 8px; font: 400 13px 'Chakra Petch', sans-serif; outline: none; }
#viewVad .vb-note input:focus { border-color: var(--blue); }
#viewVad .vb-note button { height: 26px; }
#viewVad .vb-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 8px; background: var(--ui-white); border: 1px solid var(--bx-stroke); border-top: 0; font-size: 12px; }
#viewVad .vb-picks[hidden] { display: none; }
#viewVad .vb-pick { display: inline-flex; align-items: center; gap: 6px; }
#viewVad .vb-pick b { font-weight: 600; color: var(--tx-dark); }
#viewVad .vb-pick i { width: 14px; height: 14px; box-shadow: 0 0 0 1px var(--bx-stroke-dark); }
#viewVad .vb-pick em { font-style: normal; color: var(--tx-dark); }
#viewVad .vb-pick u { text-decoration: none; font: 600 10px/1 'Chakra Petch', sans-serif; letter-spacing: .5px; padding: 3px 5px; background: var(--ui-main); }
#viewVad .vb-pick u.v-match { background: #e6f5ec; color: #23824b; }
#viewVad .vb-pick u.v-drift { background: #fff3e0; color: #b5761c; }
#viewVad .vb-pick u.v-off { background: #fbe9e8; color: #c03b37; }
#viewVad .vb-pick button.x { height: 18px; width: 18px; font-size: 13px; }
#viewVad .vb-picks > button { height: 22px; margin-left: auto; }
/* the fix preview: before and after side by side, over the tab */
#viewVad .vb-fix { position: fixed; inset: 0; z-index: 50; background: rgba(20, 22, 26, .55); display: flex; align-items: center; justify-content: center; padding: 24px; }
#viewVad .vb-fix-in { background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); max-width: min(1400px, 96vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
#viewVad .vb-fix-h { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vb-fix-h b { font: 600 12px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; }
#viewVad .vb-fix-h span { color: var(--tx-dark); font-size: 13px; }
#viewVad .vb-fix-h button { margin-left: auto; }
#viewVad .vb-fix-sub { padding: 8px 14px; color: var(--tx-dark); font-size: 12.5px; background: var(--ui-main-light); }
#viewVad .vb-fix-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; overflow: auto; }
#viewVad .vb-fix-two figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#viewVad .vb-fix-two figcaption { font: 600 10.5px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; color: var(--tx-standard); }
#viewVad .vb-fix-two img { max-width: 100%; max-height: 72vh; object-fit: contain; box-shadow: 0 0 0 1px var(--bx-stroke-dark); background: repeating-conic-gradient(#ececec 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; }
#viewVad .vad-f .vad-ffix { display: block; margin-top: 6px; height: 22px; font-size: 11px; }

/* the server's checks (vadilator.com worker.php): a status line with its button, the frames it took */
#viewVad .vad-srvbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vad-srvbar button { margin-left: auto; flex: none; }
#viewVad .vad-srvst { font-size: 12.5px; color: var(--tx-dark); }
#viewVad .vad-srvst.wait::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: var(--blue); animation: vadPulse 1s ease-in-out infinite alternate; }
#viewVad .vad-srvst.bad { color: #c03b37; }
@keyframes vadPulse { from { opacity: .25; } to { opacity: 1; } }
#viewVad .vad-srvfr { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
#viewVad .vad-srvfr img { height: 84px; max-width: 160px; object-fit: contain; background: var(--ui-main-light); box-shadow: 0 0 0 1px var(--bx-stroke); cursor: pointer; }
#viewVad .vad-srvfr img:hover { box-shadow: 0 0 0 2px var(--blue); }
#viewVad .vad-srvdl { color: var(--blue); font: 600 12px 'Chakra Petch', sans-serif; letter-spacing: .5px; text-decoration: none; text-transform: uppercase; }
#viewVad .vad-warn { color: #b5761c; }

/* the server's bar at the foot of the tab, and its queue panel above it */
#viewVad .vad-st { position: relative; }
#viewVad .st-foot .vad-sf { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-right: 8px; max-width: 60%;
  background: var(--ui-white); border: 1px solid var(--bx-stroke); color: var(--tx-dark); font: 600 11px/1 'Chakra Petch', sans-serif; letter-spacing: .5px; cursor: pointer; white-space: nowrap; overflow: hidden; }
#viewVad .st-foot .vad-sf span { font-weight: 400; letter-spacing: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#viewVad .st-foot .vad-sf i { width: 7px; height: 7px; flex: none; background: #3ab36b; }
#viewVad .st-foot .vad-sf.busy i { background: var(--blue); animation: vadPulse .8s ease-in-out infinite alternate; }
#viewVad .st-foot .vad-sf.bad i { background: #d9534f; }
#viewVad .st-foot .vad-sf.bad span { color: #c03b37; }
#viewVad .st-foot .vad-sf:hover, #viewVad .st-foot .vad-sf.on { border-color: var(--blue); }
#viewVad .vad-sp { position: absolute; right: 12px; bottom: 52px; z-index: 30; width: min(640px, calc(100% - 260px)); max-height: 62vh; overflow: auto;
  background: var(--ui-white); border: 1px solid var(--bx-stroke-dark); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
#viewVad .vad-sp[hidden] { display: none; }
#viewVad .vad-sph { position: sticky; top: 0; display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; background: var(--ui-white); border-bottom: 1px solid var(--bx-stroke-light); }
#viewVad .vad-sph b { font: 600 12px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; white-space: nowrap; }
#viewVad .vad-sph span { color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-sph button { margin-left: auto; align-self: center; }
#viewVad .vad-spg { padding: 10px 12px 4px; color: var(--tx-standard); font: 600 10.5px/1 'Chakra Petch', sans-serif; letter-spacing: 1px; }
#viewVad .vad-spe { padding: 4px 12px 8px; color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-spr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--bx-stroke-light); cursor: pointer; }
#viewVad .vad-spr:hover { background: var(--blue-super); }
#viewVad .vad-spr > i { width: 7px; height: 7px; background: var(--bx-stroke-dark); }
#viewVad .vad-spr.s-running > i { background: var(--blue); animation: vadPulse .8s ease-in-out infinite alternate; }
#viewVad .vad-spr.s-queued > i { background: var(--blue); opacity: .45; }
#viewVad .vad-spr.s-done > i { background: #3ab36b; }
#viewVad .vad-spr.s-error > i { background: #d9534f; }
#viewVad .vad-spr b { display: block; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewVad .vad-spr span { display: block; color: var(--tx-dark); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewVad .vad-spr em { font-style: normal; font-size: 12px; color: var(--tx-dark); text-align: right; }
#viewVad .vad-spr.s-error em { color: #c03b37; max-width: 240px; }
#viewVad .vad-spr button { height: 24px; }

/* SERWER: the queue on the left, the analysis of the picked file on the right */
#viewVad .vad-sv { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
#viewVad .vad-svl { background: var(--ui-white); border: 1px solid var(--bx-stroke); max-height: calc(100vh - 330px); overflow: auto; }
#viewVad .vad-svl .vad-spr:first-child { border-top: 0; }
#viewVad .vad-spr.sel { background: var(--blue-super); box-shadow: inset 3px 0 0 var(--blue); }
#viewVad .vad-svd .card { margin-bottom: 12px; }
#viewVad .vad-svh { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--ui-white); border: 1px solid var(--bx-stroke); }
#viewVad .vad-svh > div { flex: 1; min-width: 0; }
#viewVad .vad-svh b { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewVad .vad-svh span { color: var(--tx-dark); font-size: 12px; }
#viewVad .vad-svgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 12px 12px; }
#viewVad .vad-svgrid figure { margin: 0; cursor: zoom-in; }
#viewVad .vad-svgrid img { display: block; width: 100%; height: 150px; object-fit: contain; background: repeating-conic-gradient(#ececec 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; box-shadow: 0 0 0 1px var(--bx-stroke); }
#viewVad .vad-svgrid figure:hover img { box-shadow: 0 0 0 2px var(--blue); }
#viewVad .vad-svgrid figcaption { margin-top: 4px; font-size: 11px; color: var(--tx-dark); }
#viewVad .vad-svc { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 12px; border-top: 1px solid var(--bx-stroke-light); }
#viewVad .vad-svc > i { font-style: normal; font-weight: 700; text-align: center; }
#viewVad .vad-svc.c-found > i { color: #23824b; }
#viewVad .vad-svc.c-different > i { color: #b5761c; }
#viewVad .vad-svc.c-missing > i { color: #c03b37; }
#viewVad .vad-svc b { display: block; font-weight: 600; font-size: 13px; }
#viewVad .vad-svc span { display: block; color: var(--tx-dark); font-size: 12px; margin-top: 2px; }
/* the viewer */
#viewVad .vad-lb { position: fixed; inset: 0; z-index: 60; background: rgba(20, 22, 26, .78); display: flex; align-items: center; justify-content: center; padding: 24px; }
#viewVad .vad-lb-in { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 96vw; max-height: 94vh; }
#viewVad .vad-lb-in img { max-width: 94vw; max-height: 84vh; object-fit: contain; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
#viewVad .vad-lb-bar { display: flex; align-items: center; gap: 10px; background: var(--ui-white); padding: 6px 10px; border: 1px solid var(--bx-stroke-dark); }
#viewVad .vad-lb-bar span { font-size: 12.5px; color: var(--tx-dark); min-width: 120px; text-align: center; }
#viewVad .vad-sph button:not(.x) { margin-left: auto; height: 24px; }
#viewVad .vad-sph button.x { margin-left: 0; }

/* the storyboard: the frames in order on a dark strip, as SO CHECK showed what went to the model */
#viewVad .vad-sbd { margin: 4px 12px 12px; border: 1px solid var(--bx-stroke-dark); }
#viewVad .vad-sbd-h { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--ui-white); border-bottom: 1px solid var(--bx-stroke-dark); }
#viewVad .vad-sbd-h span { flex: 1; font: 600 11px/1.3 'Chakra Petch', sans-serif; letter-spacing: .5px; color: var(--tx-dark); }
#viewVad .vad-sbd-h button { height: 24px; }
#viewVad .vad-sbd-strip { display: flex; gap: 8px; padding: 8px; overflow-x: auto; background: #111; }
#viewVad .vad-sbd-strip figure { margin: 0; flex: none; cursor: zoom-in; }
#viewVad .vad-sbd-strip img { display: block; height: var(--sbh, 160px); width: auto; max-width: 70vw; object-fit: contain; outline: 1px solid #333; }
#viewVad .vad-sbd-strip figure:hover img { outline: 2px solid var(--blue); }
#viewVad .vad-sbd-strip figcaption { margin-top: 4px; color: #bbb; font: 500 11px/1 'Chakra Petch', sans-serif; text-align: center; }
#viewVad .vad-lb-in.wide { width: 96vw; }
#viewVad .vad-lb-strip { display: flex; gap: 10px; padding: 10px; overflow-x: auto; max-width: 96vw; background: #111; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
#viewVad .vad-lb-strip figure { margin: 0; flex: none; cursor: zoom-in; }
#viewVad .vad-lb-strip img { display: block; height: 70vh; width: auto; object-fit: contain; outline: 1px solid #333; }
#viewVad .vad-lb-strip figcaption { margin-top: 6px; color: #ccc; font: 500 12px/1 'Chakra Petch', sans-serif; text-align: center; }

/* the boxes where the server found text, on the storyboard and in the viewer */
#viewVad .vad-fw { position: relative; display: block; line-height: 0; }
#viewVad .vad-fw.big { display: inline-block; }
#viewVad .vad-bx { position: absolute; display: block; border: 2px solid #9aa1ab; box-sizing: border-box; pointer-events: none; }
#viewVad .vad-fw .vad-bx { pointer-events: auto; }
#viewVad .vad-bx.s-ok { border-color: #2e9e5b; }
#viewVad .vad-bx.s-bad { border-color: #d9534f; background: rgba(217, 83, 79, .12); }
#viewVad .vad-bx.s-extra { border-color: #e8a33d; }
#viewVad .vad-sbd-l { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 6px 8px; background: var(--ui-white); border-top: 1px solid var(--bx-stroke-dark); font-size: 11.5px; color: var(--tx-dark); }
#viewVad .vad-sbd-l span { display: inline-flex; align-items: center; gap: 5px; }
#viewVad .vad-sbd-l .vad-bx { position: static; width: 14px; height: 10px; }
#viewVad .vad-sbd-l em { font-style: normal; color: var(--tx-standard); margin-left: auto; }
#viewVad .vad-lb-txt { display: flex; flex-wrap: wrap; gap: 6px; max-width: 94vw; justify-content: center; }
#viewVad .vad-lb-txt span { background: var(--ui-white); padding: 3px 8px; font-size: 12px; border-left: 3px solid #9aa1ab; }
#viewVad .vad-lb-txt span.s-ok { border-color: #2e9e5b; }
#viewVad .vad-lb-txt span.s-bad { border-color: #d9534f; }
#viewVad .vad-lb-txt span.s-extra { border-color: #e8a33d; }