:host {
  display: block;
  container-type: inline-size;
  color-scheme: light;
  --paper: #c7c7c7;
  --ink: #111;
  --muted: #505050;
  --line: #00000026;
  --soft: #dadada;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: none; padding: 28px 32px 24px; }
h1 { font-size: clamp(28px, 3vw, 38px); }
.page-heading { margin-bottom: 28px; }
.result-continuation { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.result-continuation h2 { margin: 0 0 8px; font-size: 17px; }
.continuation-note { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.continuation-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.continuation-actions button { padding: 10px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.continuation-actions button:first-child { color: var(--paper); background: var(--ink); }
.continuation-actions button:disabled { cursor: default; opacity: .5; }
.continuation-error { margin: 12px 0 0; color: #8b2525; font-size: 13px; }
@container (max-width: 740px) {
  main { padding: 24px 20px 22px; }
  .page-heading { align-items: start; flex-direction: column; gap: 15px; margin-bottom: 28px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .input-panel { padding: 22px 0 28px; border-right: 0; }
  .result-panel { padding: 26px 0 32px; border-top: 1px solid var(--line); }
  .empty-result { min-height: 180px; max-width: none; margin: 0; }
  .empty-result .empty-mark { display: none; }
  .result-summary { font-size: 16px; }
}

/* Private multi-video workspace: size by the available workbench, not outer viewport. */
main.batch-main { width: 100%; max-width: none; margin: 0; padding: clamp(18px, 3cqw, 36px); }
.batch-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 1px solid var(--line); }
.batch-main input[type="file"] { display: block; width: 100%; max-width: 100%; margin: 12px 0; }
.batch-main input:not([type="file"]) { width: 100%; min-width: 0; padding: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; }
.batch-file-label { display: block; font-size: 16px; font-weight: 600; margin-top: 6px; }
.batch-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.batch-actions button, .batch-clip > button { border: 1px solid var(--line); border-radius: 5px; padding: 9px 14px; background: var(--soft); color: var(--ink); }
.batch-actions .analyze-button { margin-top: 0; width: auto; flex: 1; justify-content: center; background: var(--ink); color: var(--paper); }
.batch-clip { border: 1px solid var(--line); padding: 14px; border-radius: 6px; margin: 18px 0; }
.batch-clip h2 { overflow-wrap: anywhere; margin-bottom: 12px; }
.batch-preview { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #111; border-radius: 4px; }
.batch-orientation-panel { width: 100%; min-width: 0; }
.batch-orientation-grid { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
.batch-preview-frame { grid-area: preview; min-width: 0; width: 100%; }
.batch-orientation-grid .orientation-marker { width: 44px; min-width: 0; }
.batch-orientation-grid .orientation-marker select { width: 100%; min-width: 0; min-height: 44px; padding: 5px 2px; background: var(--soft); }
@container (max-width: 380px) {
  .batch-clip { padding: 8px; }
  .batch-orientation-grid { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; }
  .batch-orientation-grid .orientation-marker { width: 40px; }
}
.batch-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.batch-clip details { margin-top: 14px; }
.batch-clip details p { font-size: 13px; }
.batch-main .result-panel { overflow-wrap: anywhere; }
@container (max-width: 899px) {
  .batch-layout { grid-template-columns: minmax(0, 1fr); }
  .batch-layout > .input-panel { padding: 22px 0 28px; border-right: 0; }
  .batch-layout > .result-panel { padding: 26px 0; border-top: 1px solid var(--line); }
}

/* Serial studies: dates are user-entered capture metadata, not file timestamps. */
.batch-order-actions, .batch-clip-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.batch-order-actions { margin: 18px 0 8px; }
.batch-order-actions button, .batch-clip-actions button { border: 1px solid var(--line); border-radius: 5px; padding: 8px 11px; background: var(--soft); color: var(--ink); font: inherit; cursor: pointer; }
.batch-main button:disabled { opacity: .5; cursor: default; }
.batch-acquisition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; border: 0; border-top: 1px solid var(--line); margin: 18px 0 12px; padding: 12px 0 0; min-width: 0; }
.batch-acquisition legend { font-weight: 600; padding: 0 6px 0 0; font-size: 13px; }
.batch-acquisition label { min-width: 0; display: grid; gap: 5px; font-size: 12px; }
.batch-acquisition input { min-height: 42px; font: inherit; }
.batch-preview-placeholder { display: flex; min-height: 150px; align-items: center; justify-content: center; padding: 20px; background: var(--soft); color: var(--muted); text-align: center; border-radius: 4px; }
.batch-execution-metadata { margin: 22px 0; border-top: 1px solid var(--line); padding-top: 15px; }
.batch-execution-metadata p { font-size: 13px; }
.batch-main [hidden] { display: none !important; }
@container (max-width: 420px) {
  .batch-acquisition { grid-template-columns: minmax(0, 1fr); }
}