/* ==============================================================================
   CUECLEAR — SWISS TECHNICAL NEO-BRUTALISM & GRID ARCHITECTURE
   Inspired by Teenage Engineering, Swiss International Style, Bloomberg Terminal
   ZERO EMOJIS — PURE GEOMETRIC PRECISION & MONOSPACE DATA DENSITY
   ============================================================================== */

:root {
  /* Stark High-Contrast Color Palette */
  --swiss-white: #FFFFFF;
  --swiss-black: #000000;
  --swiss-offwhite: #F6F6F6;
  --swiss-gray-light: #EBEBEB;
  --swiss-gray-mid: #777777;
  --swiss-gray-dark: #222222;
  --terminal-bg: #0A0D14;
  --terminal-text: #E5E5E5;

  /* Accent Accents for Critical Alerts */
  --accent-amber: #D97706;
  --accent-red: #DC2626;
  --accent-green: #16A34A;
  --accent-cyan: #0284C7;

  /* Grid Borders */
  --border-grid: 1px solid #000000;
  --border-grid-heavy: 2px solid #000000;
  --border-subtle: 1px solid #E0E0E0;

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.studio-body {
  font-family: var(--font-body);
  background-color: var(--swiss-white);
  color: var(--swiss-black);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Monospace Utilities */
.font-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.font-display {
  font-family: var(--font-display);
  font-weight: 800;
}

/* ==============================================================================
   A. TECHNICAL HEADER & TELEMETRY TOP-BAR
   ============================================================================== */

.swiss-telemetry-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  border-bottom: var(--border-grid);
  background: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-col {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: var(--border-grid);
}

.topbar-col:last-child,
.topbar-actions {
  border-right: none;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.telemetry-row {
  display: flex;
  gap: 8px;
}

.telemetry-label {
  color: var(--swiss-gray-mid);
}

.telemetry-val {
  color: var(--swiss-black);
  font-weight: 700;
}

.topbar-nav-links {
  display: flex;
  gap: 16px;
  font-size: 11px;
}

.topbar-nav-links a {
  color: var(--swiss-black);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.topbar-nav-links a:hover {
  border-bottom: 1px solid var(--swiss-black);
}

.btn-export-trigger {
  background: var(--swiss-black);
  color: var(--swiss-white);
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

.btn-export-trigger:hover:not(:disabled) {
  background: var(--swiss-white);
  color: var(--swiss-black);
}

.btn-export-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==============================================================================
   B. MASTER HERO BANNER (The Identity Matrix)
   ============================================================================== */

.swiss-hero-matrix {
  display: grid;
  grid-template-columns: 45% 55%;
  border-bottom: var(--border-grid);
  background: var(--swiss-white);
}

.hero-left-col {
  padding: 48px 40px;
  border-right: var(--border-grid);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-master-wordmark {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--swiss-black);
}

.hero-left-footer {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.hero-right-col {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--swiss-offwhite);
}

.hero-manifesto-text {
  font-family: var(--font-body);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--swiss-black);
  max-width: 600px;
}

.hero-sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--swiss-gray-mid);
  margin-top: 32px;
}

/* Sub-Bar Filter Matrix */
.hero-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  border-bottom: var(--border-grid);
  background: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.filter-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.filter-btn {
  background: var(--swiss-white);
  color: var(--swiss-black);
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
}

.filter-btn.active, .filter-btn:hover {
  background: var(--swiss-black);
  color: var(--swiss-white);
}

/* ==============================================================================
   C. WORKSPACE: INGESTION & LIVE TELEMETRY (Two-Column Grid)
   ============================================================================== */

.workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border-grid);
  background: var(--swiss-white);
}

.workspace-card {
  display: flex;
  flex-direction: column;
}

.workspace-card.left {
  border-right: var(--border-grid);
}

.card-header-bar {
  padding: 14px 24px;
  border-bottom: var(--border-grid);
  background: var(--swiss-offwhite);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Technical Reel Selector Buttons */
.reel-selectors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-reel-select {
  flex: 1;
  background: var(--swiss-white);
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

.btn-reel-select.active, .btn-reel-select:hover {
  background: var(--swiss-black);
  color: var(--swiss-white);
}

/* Technical Drafting Dropzone */
.technical-dropzone {
  border: 1px dashed var(--swiss-black);
  background: var(--swiss-offwhite);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.technical-dropzone:hover, .technical-dropzone.dragover {
  background: #EAEAEA;
}

.dropzone-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dropzone-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--swiss-gray-mid);
  margin-top: 6px;
  text-transform: uppercase;
}

/* Metadata Readout Strip */
.metadata-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-grid);
  background: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 11px;
}

.meta-cell {
  padding: 8px 12px;
  border-right: var(--border-grid);
  display: flex;
  flex-direction: column;
}

.meta-cell:last-child {
  border-right: none;
}

.meta-key {
  color: var(--swiss-gray-mid);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.meta-val {
  font-weight: 800;
  font-size: 12px;
  color: var(--swiss-black);
}

/* Primary Action Button */
.btn-swiss-primary {
  width: 100%;
  padding: 16px 24px;
  background: var(--swiss-black);
  color: var(--swiss-white);
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-swiss-primary:hover:not(:disabled) {
  background: #262626;
  color: var(--swiss-white);
}

.helper-note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--swiss-gray-mid);
  line-height: 1.4;
}

.empty-state-cell {
  text-align: center;
  padding: 36px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--swiss-gray-mid);
}

.muted {
  color: var(--swiss-gray-mid);
}

.status-ok { color: #059669; font-weight: 700; }
.status-warn { color: var(--accent-amber); font-weight: 700; }
.status-bad { color: var(--accent-red); font-weight: 800; }

.holder-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 11px;
}

.split-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  border-bottom: var(--border-grid);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.notice {
  border: 1.5px solid var(--swiss-black);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.notice p { margin-top: 4px; }
.notice-warn { border-color: var(--accent-amber); background: rgba(217, 119, 6, 0.06); }
.notice-bad { border-color: var(--accent-red); background: rgba(220, 38, 38, 0.06); }
.notice-ok { border-color: #059669; background: rgba(5, 150, 105, 0.08); }

.audit-box {
  border: var(--border-grid);
  padding: 10px 12px;
  background: var(--swiss-offwhite);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
}

.excerpts-box {
  border: var(--border-grid);
  padding: 14px 16px;
  background: var(--swiss-white);
  color: var(--swiss-black);
  max-height: min(52vh, 440px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.excerpts-box > strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: var(--border-grid);
}

.excerpts-box-hint {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--swiss-gray-mid);
  margin-bottom: 12px;
  line-height: 1.4;
}

.excerpts-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: excerpt-counter;
}

.excerpt-item {
  counter-increment: excerpt-counter;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: var(--border-grid);
  background: var(--swiss-offwhite);
}

.excerpt-item:last-child {
  margin-bottom: 0;
}

.excerpt-item-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--swiss-gray-mid);
  margin-bottom: 8px;
}

.excerpt-item-label::before {
  content: counter(excerpt-counter, decimal-leading-zero) ". ";
  color: var(--swiss-black);
}

.excerpt-item-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--swiss-black);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.excerpt-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--swiss-black);
  text-decoration: underline;
  cursor: pointer;
}

.excerpt-toggle:hover {
  color: var(--accent-cyan);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.btn-swiss-primary:disabled {
  background: var(--swiss-gray-mid);
  cursor: not-allowed;
}

/* Autonomous Agent Terminal Feed - Fixed Height & Scrollable */
.swiss-terminal-body,
.terminal-container,
.terminal-deck-feed,
#terminalFeed,
#logStream,
.console-feed {
  height: 380px;          /* Locks the container to a clean fixed height */
  max-height: 380px;
  overflow-y: auto;       /* Adds smooth vertical scrolling */
  overflow-x: hidden;
  padding: 16px 20px;
  background: #F8F8F8;   /* Clean technical light background */
  border: 1px solid #000000;
  box-sizing: border-box;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: #111318;
}

/* Crisp technical scrollbar */
.swiss-terminal-body::-webkit-scrollbar,
.terminal-container::-webkit-scrollbar,
.terminal-deck-feed::-webkit-scrollbar,
#terminalFeed::-webkit-scrollbar,
#logStream::-webkit-scrollbar {
  width: 6px;
}
.swiss-terminal-body::-webkit-scrollbar-track,
.terminal-container::-webkit-scrollbar-track,
.terminal-deck-feed::-webkit-scrollbar-track,
#terminalFeed::-webkit-scrollbar-track,
#logStream::-webkit-scrollbar-track {
  background: #EBEBEB;
}
.swiss-terminal-body::-webkit-scrollbar-thumb,
.terminal-container::-webkit-scrollbar-thumb,
.terminal-deck-feed::-webkit-scrollbar-thumb,
#terminalFeed::-webkit-scrollbar-thumb,
#logStream::-webkit-scrollbar-thumb {
  background: #000000;
  border-radius: 2px;
}

.term-line {
  word-break: break-all;
}

.term-sys { color: #666666; }
.term-query, .term-hit { color: #0022FF; font-weight: 700; }
.term-extract { color: #6B21A8; font-weight: 700; }
.term-cleared, .term-verified { color: #059669; font-weight: 800; }
.term-action, .term-flagged { color: #DC2626; font-weight: 800; }
.term-audit { color: #D97706; font-weight: 700; }
.term-complete { color: #000000; font-weight: 900; text-decoration: underline; }

.tag-supervisor-signed {
  display: inline-block;
  background: #059669;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ==============================================================================
   D. MASTER AUDIO CUE SHEET MATRIX (High-Density Swiss Grid Table)
   ============================================================================== */

.master-table-section {
  background: var(--swiss-white);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-top-bar {
  padding: 16px 40px;
  border-bottom: var(--border-grid);
  background: var(--swiss-offwhite);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-top-bar h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.table-search-input {
  border: var(--border-grid);
  background: var(--swiss-white);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  min-width: 320px;
  outline: none;
}

.table-search-input:focus {
  background: #FAFAFA;
}

.swiss-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.swiss-matrix-table th {
  background: var(--swiss-black);
  color: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: var(--border-grid);
  white-space: nowrap;
}

.swiss-matrix-table td {
  padding: 12px 14px;
  border: var(--border-grid);
  vertical-align: middle;
  background: var(--swiss-white);
}

.swiss-matrix-table tr:hover td {
  background: var(--swiss-offwhite);
}

/* Inverted Black Status Tags */
.tag-inverted-black {
  display: inline-block;
  background: var(--swiss-black);
  color: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tag-amber-outline {
  display: inline-block;
  border: 1.5px solid var(--accent-amber);
  color: var(--accent-amber);
  background: rgba(217, 119, 6, 0.08);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tag-red-outline {
  display: inline-block;
  border: 1.5px solid var(--accent-red);
  color: var(--accent-red);
  background: rgba(220, 38, 38, 0.08);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tag-usage-outline {
  display: inline-block;
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  text-transform: uppercase;
}

.tag-telemetry-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border: var(--border-grid);
  text-transform: uppercase;
  margin-top: 4px;
}

.tag-telemetry-chip.live {
  background: #E0F2FE;
  color: #0369A1;
}

.tag-telemetry-chip.cached {
  background: #FEF3C7;
  color: #92400E;
}

.tag-telemetry-chip.sfx {
  background: #F3E8FF;
  color: #6B21A8;
}

.tag-telemetry-chip.provenance {
  background: #ECFDF5;
  color: #047857;
  text-transform: none;
  letter-spacing: 0;
}

.tag-telemetry-chip.invoke {
  background: #EEF2FF;
  color: #3730A3;
  text-transform: none;
}

.tag-telemetry-chip.idchip {
  background: #F8FAFC;
  color: #334155;
  text-transform: none;
  letter-spacing: 0;
}

.cue-provenance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  max-width: 320px;
}

.btn-inspect-action {
  background: var(--swiss-white);
  border: var(--border-grid);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

.btn-inspect-action:hover {
  background: var(--swiss-black);
  color: var(--swiss-white);
}

/* ==============================================================================
   E. SPLIT AUDIT & SIGN-OFF MODAL
   ============================================================================== */

.swiss-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.swiss-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.swiss-modal-window {
  background: var(--swiss-white);
  border: var(--border-grid-heavy);
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

.swiss-modal-header {
  padding: 16px 24px;
  background: var(--swiss-black);
  color: var(--swiss-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-close-trigger {
  background: transparent;
  border: none;
  color: var(--swiss-white);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.swiss-modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-metadata-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-grid);
}

.modal-meta-box {
  padding: 8px 12px;
  border-right: var(--border-grid);
  font-family: var(--font-mono);
}

.modal-meta-box:last-child {
  border-right: none;
}

.modal-meta-box small {
  display: block;
  font-size: 9.5px;
  color: var(--swiss-gray-mid);
  text-transform: uppercase;
}

.modal-meta-box strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

/* Swiss Drafting Split Bars */
.swiss-split-bar {
  height: 16px;
  border: var(--border-grid);
  display: flex;
  background: var(--swiss-offwhite);
  margin: 6px 0 14px 0;
}

.bar-segment-writers {
  background: var(--swiss-black);
}

.bar-segment-publishers {
  background: repeating-linear-gradient(
    45deg,
    #000000,
    #000000 2px,
    #FFFFFF 2px,
    #FFFFFF 6px
  );
}

/* ==============================================================================
   EXPORT DROPDOWN MENU
   ============================================================================== */

.export-menu-container {
  position: relative;
}

.export-menu-popup {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 260px;
  background: var(--swiss-white);
  border: var(--border-grid);
  display: none;
  flex-direction: column;
  z-index: 200;
}

.export-menu-popup.show {
  display: flex;
}

.export-menu-link {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--swiss-black);
  border-bottom: var(--border-grid);
  font-family: var(--font-mono);
}

.export-menu-link:last-child {
  border-bottom: none;
}

.export-menu-link:hover {
  background: var(--swiss-black);
  color: var(--swiss-white);
}

.export-menu-link strong {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.export-menu-link small {
  font-size: 9.5px;
  color: inherit;
  opacity: 0.8;
}

/* Label switching helpers */
.label-short { display: none; }
.label-full { display: inline; }

/* ==============================================================================
   RESPONSIVE — standard device widths
   Optimized for:
   1280+ desktop | 1024 tablet landscape | 768 tablet | 430 Pro Max
   412 Pixel | 390 iPhone 12/13/14 | 375 iPhone SE | 360 Android (360x800)
   ============================================================================== */

@media (max-width: 1100px) {
  .table-search-input {
    min-width: 200px;
    width: min(100%, 260px);
  }

  .hero-sub-bar,
  .table-top-bar,
  .hero-left-col,
  .hero-right-col {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Tablet / small laptop */
@media (max-width: 1024px) {
  .swiss-hero-matrix {
    grid-template-columns: 1fr;
  }

  .hero-left-col {
    border-right: none;
    border-bottom: var(--border-grid);
    padding: 28px 20px;
  }

  .hero-right-col {
    padding: 22px 20px;
  }

  .hero-master-wordmark {
    font-size: clamp(52px, 10vw, 80px);
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .workspace-card.left {
    border-right: none;
    border-bottom: var(--border-grid);
  }

  .swiss-telemetry-topbar {
    grid-template-columns: 1fr 1fr;
  }

  .topbar-col.topbar-actions {
    grid-column: 1 / -1;
    border-right: none;
    border-top: var(--border-grid);
    justify-content: stretch;
    padding: 12px 16px;
  }

  .topbar-actions .export-menu-container,
  .topbar-actions .btn-export-trigger {
    width: 100%;
  }

  .hero-sub-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }

  .filter-pills-row {
    justify-content: flex-start;
    width: 100%;
  }

  .btn-reel-select {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .table-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .table-search-input {
    min-width: 0;
    width: 100%;
  }

  .swiss-matrix-table {
    min-width: 820px;
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 280px;
    max-height: 280px;
  }
}

/* iPad portrait / large phones landscape */
@media (max-width: 768px) {
  .label-full { display: none; }
  .label-short { display: inline; }

  .swiss-telemetry-topbar {
    grid-template-columns: 1fr;
  }

  .topbar-col {
    border-right: none;
    border-bottom: var(--border-grid);
    padding: 10px 14px;
  }

  .topbar-col.topbar-actions {
    grid-column: auto;
    border-top: none;
  }

  .hero-left-col,
  .hero-right-col {
    padding: 20px 14px;
  }

  .hero-master-wordmark {
    font-size: clamp(42px, 12vw, 64px);
    line-height: 0.9;
  }

  .hero-manifesto-text {
    font-size: 16px;
    line-height: 1.35;
  }

  .hero-sublabel {
    margin-top: 16px;
    font-size: 10px;
  }

  .card-header-bar {
    padding: 12px 14px;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
  }

  .card-body {
    padding: 14px;
    gap: 12px;
  }

  .metadata-strip {
    grid-template-columns: 1fr;
  }

  .meta-cell {
    border-right: none;
    border-bottom: var(--border-grid);
    padding: 10px 12px;
  }

  .meta-cell:last-child {
    border-bottom: none;
  }

  .technical-dropzone {
    padding: 20px 12px;
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 240px;
    max-height: 240px;
    padding: 12px 14px;
  }

  .modal-metadata-grid {
    grid-template-columns: 1fr;
  }

  .modal-meta-box {
    border-right: none;
    border-bottom: var(--border-grid);
  }

  .modal-meta-box:last-child {
    border-bottom: none;
  }

  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal-actions .btn-export-trigger,
  .modal-actions .btn-inspect-action {
    width: 100%;
    text-align: center;
    padding: 12px;
  }

  .holder-row,
  .split-labels {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .export-menu-popup {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Large phones: 430×932, 412×915 */
@media (max-width: 430px) {
  .hero-master-wordmark {
    font-size: 44px;
  }

  .filter-btn {
    font-size: 10px;
    padding: 7px 10px;
  }

  .btn-reel-select {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    font-size: 10.5px;
    padding: 10px 8px;
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 220px;
    max-height: 220px;
  }

  .swiss-modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .swiss-modal-window {
    min-height: 100%;
    max-height: 100%;
    border-left: none;
    border-right: none;
  }

  .swiss-modal-body {
    max-height: calc(100dvh - 56px);
    padding: 14px;
  }

  .excerpts-box {
    max-height: min(56vh, 460px);
    padding: 12px 14px;
  }

  .excerpt-item-text {
    font-size: 14px;
  }
}

/* Standard phones: 390×844, 375×812, 375×667 */
@media (max-width: 390px) {
  .hero-left-col,
  .hero-right-col,
  .hero-sub-bar,
  .table-top-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-master-wordmark {
    font-size: 40px;
  }

  .hero-manifesto-text {
    font-size: 15px;
  }

  .btn-reel-select {
    flex: 1 1 100%;
  }

  .btn-swiss-primary {
    padding: 14px 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 200px;
    max-height: 200px;
    font-size: 11px;
  }

  .table-top-bar h3 {
    font-size: 16px;
  }

  .swiss-matrix-table {
    min-width: 760px;
    font-size: 11px;
  }

  .swiss-matrix-table th,
  .swiss-matrix-table td {
    padding: 10px 10px;
  }
}

/* Compact Android: 360×800, 360×640 */
@media (max-width: 360px) {
  .topbar-col {
    padding: 8px 10px;
  }

  .btn-export-trigger {
    width: 100%;
    padding: 10px 12px;
    font-size: 10.5px;
  }

  .hero-left-col,
  .hero-right-col {
    padding: 16px 10px;
  }

  .hero-master-wordmark {
    font-size: 34px;
    letter-spacing: -0.04em;
  }

  .hero-left-footer {
    margin-top: 14px;
  }

  .hero-manifesto-text {
    font-size: 14px;
    line-height: 1.4;
  }

  .hero-sublabel {
    margin-top: 12px;
    font-size: 9.5px;
    letter-spacing: 0.05em;
  }

  .hero-sub-bar {
    padding: 10px;
    gap: 8px;
  }

  .filter-bar-title {
    font-size: 10px;
  }

  .filter-btn {
    font-size: 9.5px;
    padding: 6px 8px;
  }

  .card-header-bar {
    padding: 10px;
    font-size: 10.5px;
  }

  #activeTimelineLabel {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-body {
    padding: 10px;
    gap: 10px;
  }

  .technical-dropzone {
    padding: 16px 10px;
  }

  .dropzone-label {
    font-size: 11px;
  }

  .meta-key {
    font-size: 9px;
  }

  .meta-val {
    font-size: 11px;
  }

  .reel-selectors-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .btn-reel-select {
    width: 100%;
    min-height: 36px;
    padding: 8px 6px;
    font-size: 10px;
  }

  .btn-swiss-primary {
    width: 100%;
    min-height: 44px;
  }

  .helper-note {
    font-size: 11px;
    line-height: 1.35;
  }

  .cue-provenance-row {
    max-width: 100%;
  }

  .tag-telemetry-chip {
    font-size: 8.5px;
    padding: 2px 4px;
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 180px;
    max-height: 180px;
    padding: 10px;
    font-size: 10.5px;
  }

  .table-top-bar {
    padding: 12px 10px;
  }

  .empty-state-cell {
    padding: 24px 10px;
    font-size: 11px;
  }

  .swiss-modal-header {
    padding: 12px 10px;
    font-size: 11px;
    gap: 8px;
  }

  .swiss-modal-body {
    padding: 12px 10px;
    gap: 12px;
  }

  .excerpts-box {
    max-height: min(58vh, 420px);
    padding: 12px;
  }

  .excerpts-box > strong {
    font-size: 10.5px;
  }

  .excerpt-item {
    padding: 10px 12px;
  }

  .excerpt-item-text {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

/* Short viewports (e.g. 360×640, landscape phones) */
@media (max-height: 700px) and (max-width: 900px) {
  .hero-left-col {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .hero-master-wordmark {
    font-size: clamp(32px, 10vh, 48px);
  }

  .swiss-terminal-body,
  #terminalFeed {
    height: 160px;
    max-height: 160px;
  }
}

/* Safe areas for notched phones */
@supports (padding: max(0px)) {
  body.studio-body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .swiss-telemetry-topbar {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  .swiss-modal-window {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}