/* RudraCut Web: the caption studio on its own. The header carries the open project, Open video and Projects;
   the empty Captions tab is the start screen (open a video, or one of your projects). Panel tokens throughout. */
body.web nav.tabs, body.web #tab-home, body.web #tab-cut, body.web #tab-arr, body.web #tab-tit { display: none !important; }
body.web #brain, body.web #tx-fix, body.web #ch-menu [data-m="check"], body.web #ch-menu [data-m="reload"], body.web #cap-reload,
body.web #pv-follow-btn, body.web .vm-row:has(#pv-follow), body.web #ei-restart, body.web #help-tour, body.web #help-diag, body.web #setup-card,
body.web #my-row ~ .muted, body.web .pc-btns .pc-edit { display: none !important; }
body.web .topbar { gap: var(--sp-3); }
.web-bar { display: flex; align-items: center; gap: var(--sp-2); margin: 0 auto 0 var(--sp-4); min-width: 0; flex: 1 1 auto; }
.web-bar .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; }
.web-projname { font-weight: var(--fw-b); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 320px; margin-right: var(--sp-2); }
body.web-noproj .web-projname, body.web-noproj #web-projects { display: none; }

/* the start screen */
body.web-noproj #cap-empty > :not(.web-start) { display: none !important; }
body:not(.web-noproj) #cap-empty > .web-start { display: none !important; }
body.web #cap-empty { max-width: 680px; margin: var(--sp-5) auto; }
.web-start { text-align: center; }
.web-start h3 { font-size: var(--fs-6); }
.web-start > p { max-width: 520px; margin: var(--sp-2) auto var(--sp-4); }
.ws-drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); border: 1.5px dashed var(--line-3); border-radius: 16px;
  background: var(--surface-0); transition: border-color var(--dur-fast), background var(--dur-fast); }
.ws-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.ws-drop .primary { max-width: 300px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.ws-status { margin: var(--sp-3) 0 0; color: var(--text-2); }
.ws-recent { text-align: left; margin-top: var(--sp-5); }
.ws-recent h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); display: flex; align-items: baseline; gap: var(--sp-2); }
.ws-recent h4 small { font-weight: var(--fw); }
.ws-proj { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; }
.ws-proj:hover, .ws-proj:focus-visible { border-color: var(--line-3); }
.wp-ic { color: var(--accent); display: flex; }
.wp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.wp-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-t small { color: var(--muted); }
.wp-del.armed { color: var(--bad); background: var(--bad-soft); }
.ws-note { margin-top: var(--sp-5); }
/* before transcribing: language and accuracy */
.ws-opts { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin: 0 auto var(--sp-4); }
.ws-opts label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: var(--fs-2); color: var(--muted); }
.ws-opts select { min-width: 220px; min-height: var(--hit); }
@media (min-width: 1180px) and (min-height: 560px) {
  body.web > main.tabpane#tab-cap { padding: 0; }
  body.web.web-noproj #tab-cap, body.web:not(.cap-open) #tab-cap { overflow-y: auto; }
}
/* the Premiere steps strip ("Transcribe the active sequence…") is not needed: the start screen says it */
body.web #cap-flow, body.web #cap-hint { display: none !important; }