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

:root {
  --bg:           #0F0F11;
  --surface:      #161b22;
  --card:         #1c2030;
  --card-hover:   #222840;
  --border:       #2d3244;
  --border-light: #3a4060;
  --accent:       #664CFF;
  --accent-dim:   #4a6cf7;
  --text-primary:   #eef3f7;
  --text-secondary: #b5bbc2;
  --text-muted:     #8e949b;
  --success:      #3fb950;
  --danger:       #f85149;
  --warning:      #d29922;

  --ds-color-0: #664CFF;
  --ds-color-1: #3fb950;
  --ds-color-2: #ffa657;
  --ds-color-3: #f785a3;
  --ds-color-4: #bc8cff;

  --radius:    8px;
  --radius-sm: 4px;
  --shadow:    0 4px 24px rgba(0,0,0,0.5);
  --font:      'Inter', 'Segoe UI', system-ui, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── App Root ─────────────────────────────────────────────────────────────── */
.app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  gap: 16px;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-logo {
  height: 36px;
}

.app-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin: 0;
}

.app-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: -2px 0 0;
}

/* ── Section Labels ───────────────────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-block {
  margin-bottom: 28px;
}

/* ── Data Source Panel ────────────────────────────────────────────────────── */
.datasource-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.datasource-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datasource-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--card-accent, var(--accent));
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color 0.15s;
}

.datasource-card:hover {
  border-color: var(--border-light);
  border-left-color: var(--card-accent, var(--accent));
}

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ds-index-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-accent, var(--accent));
}

.ds-hw-badge {
  font-size: 11px;
  color: var(--text-secondary);
  margin: -4px 0 10px;
  line-height: 1.4;
}

.ds-hw-badge strong {
  color: var(--text-muted);
  font-weight: 600;
}

.ds-hw-sep {
  margin: 0 6px;
  color: var(--text-muted);
}

.ds-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-controls > div {
  flex: 1;
  min-width: 140px;
}

.ds-controls-encoders {
  flex: 2 !important;
  min-width: 200px !important;
}

.ds-field-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-add-source {
  align-self: flex-start;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--border-light);
  color: var(--text-secondary);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-source:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(108, 142, 251, 0.07);
}

.btn-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.btn-remove:hover {
  color: var(--danger);
  background: rgba(248, 81, 73, 0.1);
}

.btn-add-view {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-add-view:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-share {
  background: #432DC2;
  border: 1px solid rgba(108, 142, 251, 0.4);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-share:hover {
  background: rgba(108, 142, 251, 0.2);
}

/* ── Controls Row ─────────────────────────────────────────────────────────── */
.controls-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}

.control-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── 3D Plot ──────────────────────────────────────────────────────────────── */
.main-plot-wrapper {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.main-3d-plot {
  height: 68vh;
  min-height: 480px;
}

/* ── 2D FPS Views ─────────────────────────────────────────────────────────── */
.fps-views-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fps-views-header .fps-views-hint {
  flex: 1;
  min-width: 200px;
  margin-top: 21px;
  font-size: 12px;
  color: var(--text-secondary);
}

.fps-views-header > .btn-add-view {
  margin-top: 21px;
}

/* ── Analysis section divider ─────────────────────────────────────────────── */
.analysis-divider {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 36px 0 28px;
}

.analysis-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

.analysis-divider-content {
  text-align: center;
  white-space: nowrap;
}

.analysis-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.analysis-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
  white-space: normal;
  line-height: 1.5;
}

/* ── KPI Gauges ───────────────────────────────────────────────────────────── */
.gauge-row {
  display: flex;
  gap: 16px;
}

.gauge-row > div {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.fps-views-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fps-slot-row {
  display: flex;
  gap: 14px;
}

.fps-view-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.fps-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.fps-view-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.fps-input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.fps-input {
  width: 72px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 4px 8px;
  font-size: 13px;
  font-family: var(--font);
  text-align: right;
}

.fps-input:focus {
  outline: none;
  border-color: var(--accent);
}

.fps-slice-graph {
  height: 320px;
}

.fps-slot-mode-dd {
  font-size: 12px;
}

.fps-slot-individual-controls {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: flex-end;
  flex-wrap: wrap;
}

.fps-view-card .dash-spreadsheet-container {
  padding: 8px;
}

/* ── BD Table (per-slice cards) ───────────────────────────────────────────── */
.bd-table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Share URL row ────────────────────────────────────────────────────────── */
.share-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.share-url-row .share-url-display {
  max-width: 420px;
}

.share-url-display {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Tab navigation ───────────────────────────────────────────────────────── */
.app-nav {
  display: flex;
  gap: 4px;
  margin: -8px 0 24px;
  border-bottom: 1px solid var(--border);
}

.app-nav-tab {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.app-nav-tab:hover {
  color: var(--text-primary);
}

.app-nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Encoder Explorer collapse toggle ─────────────────────────────────────── */
.explorer-toggle-btn {
  margin-top: 8px;
}

/* ── Gauge per-sequence BD table (collapsible) ────────────────────────────── */
.gauge-seq-details {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 12px 10px;
}

.gauge-seq-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 2px;
  list-style: revert;
}

.gauge-seq-summary:hover {
  color: var(--text-primary);
}

/* ── Test set page ────────────────────────────────────────────────────────── */
.testset-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.testset-source-card {
  flex: 1;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.testset-source-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.testset-source-name:hover {
  text-decoration: underline;
}

.testset-source-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 6px 0 0;
  line-height: 1.5;
}

.testset-placeholder {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
}

/* Per-sequence list with thumbnail strips */
.testset-seq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.testset-seq-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.testset-seq-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.testset-seq-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.testset-seq-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.testset-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.testset-variant {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.testset-variant strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* Card body: proxy | complexity | thumbnail group, all the same fixed height.
   Every element is sized by height with auto width, so the videos keep their
   native aspect (no letterbox) and the thumbnails keep theirs (no crop). A
   single gap value gives uniform spacing: 14px between the three groups, and
   6px between thumbnails both horizontally (row gap) and vertically (grid gap). */
.testset-seq-body {
  --media-h: 230px;
  /* Two thumbnail rows + their 6px gap add up to the media height. A *fixed*
     px height (not %) is essential: in a flex row the browser derives an image's
     width from a fixed height + aspect ratio, but with height:100% it falls back
     to the image's intrinsic width — which overflowed the row. */
  --thumb-h: calc((var(--media-h) - 6px) / 2);
  width: 100%;
  display: flex;
  align-items: flex-start;
  /* "Justified": proxy flush left, thumbnail group flush right, the slack split
     into equal gaps between the three (gap is the minimum when space is tight). */
  justify-content: space-between;
  gap: 14px;
}

.testset-proxy,
.testset-complexity {
  height: var(--media-h);
  width: auto;
  flex: 0 0 auto;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #000;
}

.testset-thumb-grid {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.testset-thumb-row {
  display: flex;
  gap: 6px;
}

.testset-thumb {
  height: var(--thumb-h);   /* fixed height → width follows native aspect (no crop) */
  width: auto;
  flex: 0 0 auto;           /* don't let flex resize it to intrinsic/stretched width */
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

@media (max-width: 900px) {
  .testset-seq-body {
    flex-direction: column;
    align-items: stretch;
  }
  .testset-proxy,
  .testset-complexity {
    width: 100%;
    height: auto;
  }
  .testset-thumb-grid {
    width: 100%;
    height: auto;
  }
  .testset-thumb-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .testset-thumb {
    width: 100%;
    height: auto;
  }
}

/* Transient highlight when a sequence card is jumped-to from the scatter. */
.testset-seq-card {
  transition: border-color 0.3s, box-shadow 0.3s;
}

.testset-seq-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(108, 142, 251, 0.35);
}

/* ── Docs page ────────────────────────────────────────────────────────────── */
.docs-section {
  margin-bottom: 8px;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--border);
}

.docs-p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 12px;
}

.docs-ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.docs-ul li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}

.docs-p strong,
.docs-ul strong {
  color: var(--text-primary);
  font-weight: 600;
}

.docs-p a,
.docs-ul a {
  color: var(--accent);
  text-decoration: none;
}

.docs-p a:hover,
.docs-ul a:hover {
  text-decoration: underline;
}

/* ── Legal footer ─────────────────────────────────────────────────────────── */
.app-footer {
  margin-top: auto;          /* pin to the bottom of the flex .app-root column */
  padding: 20px 0 4px;
  border-top: 1px solid var(--border);
}

.app-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.app-footer-notice {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.app-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.app-footer-links a {
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.app-footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Sub-pages (licenses, test set) ───────────────────────────────────────── */
.subpage-content {
  max-width: 1600px;
}

.subpage-lede {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 28px;
}

.subpage-h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 28px 0 4px;
  letter-spacing: -0.2px;
}

.subpage-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.6;
}

.lic-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 13px;
}

.lic-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.lic-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}

.lic-table tr:hover td {
  background: var(--card);
}

.lic-table .lic-name {
  white-space: nowrap;
  font-weight: 500;
}

.lic-table .lic-name a {
  color: var(--accent);
  text-decoration: none;
}

.lic-table .lic-name a:hover {
  text-decoration: underline;
}

.lic-table .lic-license {
  color: var(--text-primary);
}

/* ── Dash 4.x dcc.Dropdown dark theme ────────────────────────────────────── */
/* Override Dash design-system tokens so all internal styles pick up dark values */
.dash-dropdown,
.dash-dropdown-wrapper {
  --Dash-Fill-Inverse-Strong: var(--card);
  --Dash-Stroke-Strong:       var(--border);
  --Dash-Text-Strong:         var(--text-primary);
  --Dash-Text-Weak:           var(--text-secondary);
  --Dash-Text-Disabled:       var(--text-muted);
  --Dash-Fill-Interactive-Weak:   rgba(108,142,251,0.15);
  --Dash-Fill-Interactive-Strong: var(--accent);
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.dash-dropdown-content {
  --Dash-Fill-Inverse-Strong: var(--card);
  --Dash-Stroke-Strong:       var(--border-light);
  --Dash-Text-Strong:         var(--text-primary);
  --Dash-Text-Weak:           var(--text-secondary);
  --Dash-Text-Disabled:       var(--text-muted);
  --Dash-Fill-Interactive-Weak:   rgba(108,142,251,0.12);
  --Dash-Fill-Interactive-Strong: var(--accent);
  background: var(--card) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
  z-index: 9999 !important;
}

.dash-dropdown-option {
  color: var(--text-primary) !important;
}

.dash-dropdown-option:hover {
  background: rgba(108,142,251,0.12) !important;
}

.dash-dropdown-placeholder {
  color: var(--text-muted) !important;
}

.dash-dropdown-search-container {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.dash-dropdown-search {
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* ── Dash DataTable dark theme ────────────────────────────────────────────── */
.dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
  background: var(--card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  font-size: 13px;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background: var(--card-hover) !important;
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */
._dash-loading {
  background: rgba(13, 17, 23, 0.7) !important;
}

._dash-loading-callback-spinner {
  border-color: var(--accent) transparent transparent transparent !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* The gauge control row stays on a single line on desktop (7 controls + the
   "vs" separator). This replaces the old inline `flex-wrap: nowrap` so the
   media queries below can relax it on smaller screens. */
.gauge-controls-row { flex-wrap: nowrap; }

/* ── Tablet / small laptop ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Too many controls to keep on one line — let them wrap. */
  .gauge-controls-row { flex-wrap: wrap; }
}

/* ── Phone / narrow ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-root { padding: 0 12px 24px; }

  /* Header: let it wrap, shrink the logo, drop the tall divider, and give the
     Share-URL row its own full-width line below the title. */
  .app-header { flex-wrap: wrap; align-items: flex-start; }
  .app-logo { height: 28px; width: auto !important; max-width: 180px; }
  .app-title { font-size: 22px; }
  .app-header-left > div[style*="width: 1px"] { display: none !important; }
  .share-url-row { flex-basis: 100%; justify-content: flex-start; }
  .share-url-row .share-url-display { max-width: none; }

  /* Nav tabs: allow horizontal swipe instead of overflowing the page. */
  .app-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav-tab { white-space: nowrap; }

  /* Stack every control cluster vertically. */
  .ds-controls { flex-direction: column; }
  .controls-row { flex-direction: column; }
  .gauge-controls-row { flex-direction: column; align-items: stretch; }
  .control-group,
  .ds-controls > div,
  .ds-controls-encoders { min-width: 0 !important; width: 100%; }

  /* Stack the two KPI gauges. */
  .gauge-row { flex-direction: column; }

  /* Stack each slice/perf slot's graph card above its table card
     (the container is flex, so target the row, not grid-template-columns). */
  .fps-slot-row { flex-direction: column; }
  .fps-slot-individual-controls { flex-direction: column; align-items: stretch; }
  .fps-slot-individual-controls > div { min-width: 0 !important; width: 100%; }

  /* Trim the tall fixed graph heights so plots aren't taller than the screen. */
  .main-3d-plot { height: 60vh; min-height: 300px; }
  .fps-slice-graph { height: 300px !important; }

  /* Wide data tables scroll within their own box instead of the page. */
  .lic-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* iOS Safari zooms the page when focusing an input whose font is < 16px.
     Bump the interactive controls to 16px on touch-sized screens. */
  .fps-input,
  .dash-dropdown,
  .dash-dropdown input,
  .dash-dropdown-search { font-size: 16px !important; }

  /* Give the collapse/divider heading room to breathe when stacked. */
  .analysis-divider { gap: 12px; }
  .analysis-subtitle { max-width: none; }
}

/* ── Very small phones ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .app-title { font-size: 20px; }
  .app-subtitle { font-size: 12px; }
  .section-block { margin-bottom: 20px; }
  .fps-slice-graph { height: 260px !important; }
  .main-3d-plot { height: 55vh; min-height: 260px; }
}