"""Shared visual language and layout content for the AutoML interfaces."""

from __future__ import annotations

import re

import gradio as gr


AUTOMATIC_SELECTION = "Automatic selection"

QUALITY_PRESET_CHOICES = [
    ("Balanced", "medium_quality"),
    ("Thorough", "high_quality"),
    ("Maximum quality", "best_quality"),
    ("Interpretable", "interpretable"),
]

APP_HEADER_HTML = """
<header class="app-header studio-header-contract" aria-labelledby="app-title">
  <div class="app-identity">
    <div class="app-mark" aria-hidden="true">AM</div>
    <div>
      <p class="app-eyebrow">Research analytics workspace</p>
      <h1 id="app-title">AutoML Studio</h1>
    </div>
  </div>
  <p class="app-subtitle">
    Build, evaluate, and reuse machine-learning models through a guided,
    reproducible workflow.
  </p>
</header>
"""

STUDIO_APP_HEADER_HTML = """
<header class="app-header studio-product-header" aria-labelledby="studio-app-title">
  <div class="studio-product-identity">
    <div class="studio-product-mark" aria-hidden="true">AM</div>
    <div>
      <h1 id="studio-app-title">AutoML Studio</h1>
      <p>Guided Research Workspace</p>
    </div>
  </div>
  <div class="studio-product-profile" aria-label="Workspace status">
    <span>Private workspace</span>
    <span class="studio-profile-badge" aria-hidden="true">AM</span>
  </div>
</header>
"""

RESEARCH_NOTICE_HTML = """
<aside class="research-notice" aria-label="Intended use">
  <p class="notice-title">Research use</p>
  <p>
    Review data governance, validation results, and institutional requirements
    before using an exported model. This workspace does not provide clinical
    diagnoses or treatment recommendations.
  </p>
</aside>
"""

EXISTING_DATA_GUIDE_HTML = """
<section class="context-panel" aria-labelledby="existing-guide-title">
  <p class="section-kicker">Workflow</p>
  <h2 id="existing-guide-title">Train with a managed dataset</h2>
  <ol class="workflow-list">
    <li><span>1</span><div><strong>Select data</strong><small>Choose a dataset and outcome.</small></div></li>
    <li><span>2</span><div><strong>Set evaluation</strong><small>Define the holdout and compute budget.</small></div></li>
    <li><span>3</span><div><strong>Review and run</strong><small>Confirm advanced options, then train.</small></div></li>
  </ol>
  <p class="context-note">
    Automatic selection is recommended unless your protocol requires a
    specific pipeline component.
  </p>
</section>
"""

UPLOAD_DATA_GUIDE_HTML = """
<section class="context-panel" aria-labelledby="upload-guide-title">
  <p class="section-kicker">Before you begin</p>
  <h2 id="upload-guide-title">Prepare your dataset</h2>
  <ul class="check-list">
    <li>Use a CSV for tabular data or a ZIP/manifest for images.</li>
    <li>Remove direct identifiers and protected health information.</li>
    <li>Confirm the outcome column and evaluation split.</li>
    <li>Keep an independent external test set when possible.</li>
  </ul>
</section>
"""

INFERENCE_GUIDE_HTML = """
<section class="context-panel" aria-labelledby="inference-guide-title">
  <p class="section-kicker">Model reuse</p>
  <h2 id="inference-guide-title">Run a single prediction</h2>
  <p>
    Select a model saved to your account or upload an exported package. The
    required input format appears after the model is inspected.
  </p>
  <p class="context-note">
    Predictions are analytical outputs and require domain-appropriate
    validation and human review.
  </p>
</section>
"""

APP_CSS = r"""
:root {
  /* Brand ---------------------------------------------------------------- */
  --ui-navy-900: #102f44;
  --ui-navy-800: #163f59;
  --ui-blue-700: #075b82;
  --ui-blue-600: #0877a5;
  --ui-teal-700: #0b6b68;
  --ui-teal-100: #dff3f1;
  --ui-violet-700: #5f4b8b;

  /* Text ----------------------------------------------------------------- */
  --ui-ink: #172b3a;
  --ui-ink-label: #294858;
  --ui-muted: #536b7a;

  /* Surfaces ------------------------------------------------------------- */
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f5f8fa;
  --ui-canvas: #f2f6f7;
  --ui-canvas-deep: #e8eff2;
  --ui-accent-bg: #e9f2f6;
  --ui-teal-bg: #e6f3f1;

  /* Scientific Light workbench ------------------------------------------ */
  --ui-research-ink: #17251f;
  --ui-research-muted: #58675f;
  --ui-research-green-900: #1b3027;
  --ui-research-green-700: #255e48;
  --ui-research-green-100: #e6eee9;
  --ui-research-paper: #fffefb;
  --ui-research-canvas: #eeece6;
  --ui-research-floating: rgba(255, 254, 251, 0.97);
  --ui-research-shadow: 0 6px 18px rgba(27, 48, 39, 0.08);

  /* Modern Scientific Studio -------------------------------------------- */
  --ui-studio-ink: #223047;
  --ui-studio-muted: #5f6f86;
  --ui-studio-subtle: #5f6f86;
  --ui-studio-bg: #f4f6fa;
  --ui-studio-surface: #ffffff;
  --ui-studio-soft: #eef2f7;
  --ui-studio-border: #dbe1eb;
  --ui-studio-border-strong: #c3cddb;
  --ui-studio-cobalt: #466ba6;
  --ui-studio-cobalt-hover: #385b92;
  --ui-studio-cobalt-soft: #e9eff9;
  --ui-studio-success: #326852;
  --ui-studio-success-soft: #e8f2ee;
  --ui-studio-warning: #806022;
  --ui-studio-warning-soft: #f7efd9;
  --ui-studio-danger: #954747;
  --ui-studio-danger-soft: #f8eaea;
  --ui-studio-shadow: 0 12px 30px rgba(49, 68, 98, 0.08);

  /* Lines ---------------------------------------------------------------- */
  --ui-border-subtle: #dde6ea;
  --ui-border: #b3c4cd;
  --ui-border-strong: #7b8f9b;

  /* Status --------------------------------------------------------------- */
  --ui-success: #176b45;
  --ui-success-bg: #e8f4ed;
  --ui-success-border: #8bbfa2;
  --ui-warning: #7a5500;
  --ui-warning-bg: #fff5d6;
  --ui-warning-border: #c7a967;
  --ui-error: #a1282f;
  --ui-error-bg: #fae9e8;
  --ui-error-border: #cf9296;
  --ui-danger-700: #a1282f;

  /* On dark -------------------------------------------------------------- */
  --ui-on-dark: #ffffff;
  --ui-on-dark-muted: #dcebf0;
  --ui-on-dark-subtle: #b9dfe8;

  /* States --------------------------------------------------------------- */
  --ui-disabled-dark: #536b7a;
  --ui-disabled-surface: #edf2f4;
  --ui-focus: #c07a00;

  /* Type ----------------------------------------------------------------- */
  --ui-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --ui-shadow: 0 1px 2px rgba(16, 47, 68, 0.06), 0 8px 24px rgba(16, 47, 68, 0.06);
}

html, body, .gradio-container,
button, input, textarea, select {
  font-family: var(--ui-font) !important;
}

code, kbd, pre, samp, .run-alias {
  font-family: var(--ui-font-mono) !important;
}

html, body {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink);
}

.gradio-container {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
  color-scheme: light !important;
}

.contain {
  gap: 20px !important;
}

.app-header {
  margin: 0 -24px 24px;
  padding: 24px 32px 24px;
  background: var(--ui-navy-900);
  border-bottom: 5px solid var(--ui-teal-700);
  color: var(--ui-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

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

.app-mark {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.55);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.app-eyebrow,
.section-kicker,
.notice-title {
  margin: 0 0 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.app-eyebrow {
  color: var(--ui-on-dark-subtle);
}

.app-header h1 {
  color: var(--ui-on-dark) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
  margin: 0 !important;
}

.app-subtitle {
  max-width: 570px;
  margin: 0 !important;
  color: var(--ui-on-dark-muted);
  font-size: 16px;
  line-height: 1.5;
}

.app-header .app-subtitle {
  color: var(--ui-on-dark-muted) !important;
}

.app-header .app-eyebrow {
  color: var(--ui-on-dark-subtle) !important;
}

.app-header .app-mark {
  color: var(--ui-on-dark) !important;
}

.research-notice {
  background: var(--ui-accent-bg);
  border-left: 4px solid var(--ui-blue-700);
  padding: 12px 16px;
  color: var(--ui-ink-label);
}

.research-notice p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-ink-label) !important;
}

.research-notice .notice-title {
  color: var(--ui-blue-700);
  margin-bottom: 4px !important;
}

.account-card,
.panel-card,
.results-shell,
.context-panel,
.inference-output {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--ui-shadow);
}

.account-card:not(.account-card .account-card) {
  max-width: 720px;
  margin: 28px auto 12px;
  padding: 8px 20px 20px !important;
}

.account-card .account-card {
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}

.account-card:has(.tabs.hide) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.account-card h2 {
  margin-top: 8px !important;
  border-bottom: 0 !important;
}

.account-card .tab-nav,
.account-card .tab-container {
  background: var(--ui-canvas-deep) !important;
  border: 1px solid var(--ui-border) !important;
}

.account-card .tab-nav button,
.account-card .tab-container button {
  color: var(--ui-ink-label) !important;
}

.account-card .tab-nav button.selected,
.account-card .tab-container button.selected {
  color: var(--ui-navy-900) !important;
  background: var(--ui-surface) !important;
  border-bottom: 3px solid var(--ui-teal-700) !important;
}

.account-strip {
  align-items: center;
  min-height: 48px;
  padding: 8px 16px !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
}

.panel-card {
  padding: 20px !important;
}

.panel-card .panel-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}

.context-panel {
  padding: 24px !important;
  align-self: flex-start;
}

.context-panel h2 {
  color: var(--ui-navy-900) !important;
  font-size: 20px !important;
  margin: 0 0 16px !important;
}

.section-kicker {
  color: var(--ui-teal-700);
}

.workflow-list,
.check-list {
  margin: 8px 0 20px !important;
  padding: 0 !important;
  list-style: none !important;
}

.workflow-list li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.workflow-list li > span {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-teal-100);
  color: var(--ui-teal-700);
  font-size: 12px;
  font-weight: 700;
}

.workflow-list strong,
.workflow-list small {
  display: block;
}

.workflow-list strong {
  font-size: 14px;
  color: var(--ui-ink);
}

.workflow-list small {
  color: var(--ui-muted);
  font-size: 12px;
  margin-top: 2px;
}

body .gradio-container .context-panel .workflow-list small,
body.dark .gradio-container .context-panel .workflow-list small {
  color: var(--ui-muted) !important;
}

.check-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 13px;
  line-height: 1.45;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 13px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--ui-teal-700);
  border-bottom: 2px solid var(--ui-teal-700);
  transform: rotate(-45deg);
}

.context-note {
  margin: 0 !important;
  padding: 12px 12px;
  background: var(--ui-canvas);
  border: 1px solid var(--ui-border-subtle);
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
}

#workspace-tabs {
  margin-top: 2px;
}

#workspace-tabs .tab-nav,
#workspace-tabs .tab-container {
  gap: 4px;
  padding: 4px 4px 0;
  background: var(--ui-canvas-deep);
  border: 1px solid var(--ui-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

#workspace-tabs .tab-nav button,
#workspace-tabs .tab-container button {
  color: var(--ui-muted);
  font-weight: 600;
  min-height: 46px;
  padding: 8px 16px;
  border-radius: 4px 4px 0 0;
}

#workspace-tabs .tab-nav button.selected,
#workspace-tabs .tab-container button.selected {
  color: var(--ui-navy-900);
  background: var(--ui-surface);
  border-bottom: 3px solid var(--ui-teal-700);
}

#workspace-tabs > .tabitem {
  padding-top: 20px;
}

.configuration-heading h2,
.results-heading h2 {
  color: var(--ui-navy-900) !important;
  margin: 0 !important;
}

.configuration-heading p,
.results-heading p {
  margin: 4px 0 0 !important;
  color: var(--ui-muted);
  font-size: 13px;
}

.advanced-options {
  margin-top: 8px;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-subtle) !important;
}

.advanced-options > .label-wrap {
  color: var(--ui-navy-900);
  font-weight: 700;
}

label span,
.block > label,
.form > label {
  color: var(--ui-ink-label) !important;
  font-weight: 600 !important;
}

input, textarea, select,
[data-testid="dropdown"] {
  border-color: var(--ui-border-strong) !important;
}

label.container.show_textbox_border,
.container.show_textbox_border {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 4px !important;
}

.gradio-container .wrap {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 4px !important;
  color: var(--ui-ink) !important;
}

.gradio-container .wrap .or {
  color: var(--ui-muted) !important;
}

.gradio-container label.float {
  background: var(--ui-surface) !important;
  color: var(--ui-ink-label) !important;
}

.gradio-container .label-wrap > span:not(.icon),
.gradio-container label > span:not(.icon),
.gradio-container .block > .container > span {
  color: var(--ui-ink-label) !important;
}

.reset-button {
  display: none !important;
}

button.primary,
.primary-button {
  background: var(--ui-blue-700) !important;
  border-color: var(--ui-blue-700) !important;
  color: var(--ui-on-dark) !important;
  font-weight: 700 !important;
  min-height: 44px;
}

button.primary *,
.primary-button * {
  color: var(--ui-on-dark) !important;
}

button.primary:hover,
.primary-button:hover {
  background: var(--ui-navy-800) !important;
  border-color: var(--ui-navy-800) !important;
}

button.secondary {
  background: var(--ui-surface) !important;
  color: var(--ui-blue-700) !important;
  border-color: var(--ui-blue-700) !important;
}

button.secondary * {
  color: var(--ui-blue-700) !important;
}

button.secondary:hover {
  background: var(--ui-canvas-deep) !important;
  color: var(--ui-navy-900) !important;
  border-color: var(--ui-navy-900) !important;
}

button.secondary:hover * {
  color: var(--ui-navy-900) !important;
}

button.stop {
  background: var(--ui-danger-700) !important;
  border-color: var(--ui-danger-700) !important;
  color: var(--ui-on-dark) !important;
}

button.stop *,
button.stop:hover * {
  color: var(--ui-on-dark) !important;
}

button.stop:hover {
  background: var(--ui-navy-900) !important;
  border-color: var(--ui-navy-900) !important;
}

/* A disabled primary reads as an inactive control, not as a filled slab that
   still looks like the main action. */
button.primary:disabled,
.primary-button:disabled,
button.stop:disabled {
  background: var(--ui-disabled-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-disabled-dark) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

button.primary:disabled *,
.primary-button:disabled *,
button.stop:disabled * {
  color: var(--ui-disabled-dark) !important;
}

button.secondary:disabled {
  background: var(--ui-disabled-surface) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-disabled-dark) !important;
  opacity: 1 !important;
}

button.secondary:disabled * {
  color: var(--ui-disabled-dark) !important;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="combobox"]:focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

.run-button {
  margin-top: 8px;
}

.route-summary {
  border-left: 3px solid var(--ui-blue-600) !important;
  background: var(--ui-accent-bg) !important;
  padding: 12px 12px !important;
  color: var(--ui-ink-label);
  font-size: 13px;
}

.results-shell {
  margin-top: 24px;
  padding: 24px !important;
}

.results-heading {
  background: var(--ui-surface) !important;
  border-bottom: 1px solid var(--ui-border-subtle);
  padding-bottom: 12px;
  margin-bottom: 2px;
}

.run-status {
  margin: 12px 0 4px;
  padding: 12px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 4px solid var(--ui-blue-600) !important;
  border-radius: 4px !important;
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-navy-900);
  font-weight: 600;
}

.performance-summary {
  padding: 4px 0 8px;
}

.performance-summary h3 {
  color: var(--ui-navy-900) !important;
  margin-top: 16px !important;
}

.performance-summary em {
  color: var(--ui-ink) !important;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.metric-card {
  min-height: 88px;
  padding: 12px 16px;
  background: var(--ui-canvas);
  border: 1px solid var(--ui-border-subtle);
  border-top: 3px solid var(--ui-teal-700);
  border-radius: 4px;
}

.metric-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric-value {
  display: block;
  color: var(--ui-navy-900);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.metric-value.metric-model {
  font-size: 16px;
  line-height: 1.35;
}

.performance-summary table {
  width: 100%;
  margin: 12px 0 20px !important;
  border-collapse: collapse;
  font-size: 13px;
}

.performance-summary th {
  background: var(--ui-navy-900) !important;
  color: var(--ui-on-dark) !important;
  text-align: left;
  font-weight: 700;
}

.performance-summary th * {
  color: var(--ui-on-dark) !important;
}

.performance-summary td,
.performance-summary th {
  padding: 8px 12px !important;
  border: 1px solid var(--ui-border) !important;
}

.performance-summary tbody tr:nth-child(even) {
  background: var(--ui-surface-subtle);
}

.artifact-panel {
  padding: 16px !important;
  background: var(--ui-canvas) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
}

.artifact-panel .artifact-note {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.detail-accordion {
  margin-top: 8px;
  border-color: var(--ui-border) !important;
}

.detail-markdown {
  color: var(--ui-ink-label);
  font-size: 13px;
}

.detail-markdown pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Gradio can apply dark-mode prose colors inside otherwise light result cards.
   Pin every foreground/background pair used by generated result HTML. */
.gradio-container .performance-summary .metric-card,
.performance-summary .metric-card {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
}

.gradio-container .performance-summary .metric-label,
.performance-summary .metric-label {
  color: var(--ui-muted) !important;
}

.gradio-container .performance-summary .metric-value,
.performance-summary .metric-value {
  color: var(--ui-navy-900) !important;
}

.gradio-container .performance-summary table tbody td,
.gradio-container .performance-summary table tbody td *,
.gradio-container .detail-markdown table tbody td,
.gradio-container .detail-markdown table tbody td *,
.performance-summary table tbody td,
.performance-summary table tbody td *,
.detail-markdown table tbody td,
.detail-markdown table tbody td * {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

.gradio-container .performance-summary table tbody tr:nth-child(even) td,
.gradio-container .detail-markdown table tbody tr:nth-child(even) td,
.performance-summary table tbody tr:nth-child(even) td,
.detail-markdown table tbody tr:nth-child(even) td {
  background: var(--ui-surface-subtle) !important;
}

.gradio-container .detail-markdown,
.gradio-container .detail-markdown p,
.gradio-container .detail-markdown li,
.detail-markdown,
.detail-markdown p,
.detail-markdown li {
  color: var(--ui-ink) !important;
}

.prediction-table {
  min-height: 250px;
}

.visual-prediction-image {
  min-width: 240px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: var(--ui-surface-subtle) !important;
}

.visual-prediction-image img {
  max-height: 520px !important;
  object-fit: contain !important;
  background: #0f172a !important;
}

.visual-prediction-warning {
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid #d6b35d !important;
  border-radius: 8px !important;
  background: #fff8df !important;
  color: #5f4704 !important;
}

.prediction-table .label,
.prediction-table .label *,
.inference-output .label,
.inference-output .label * {
  color: var(--ui-ink) !important;
}

.gradio-container .min_value,
.gradio-container .max_value {
  color: var(--ui-muted) !important;
}

.artifact-panel label {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

/* Hide Gradio's own page chrome without swallowing the workbench's own
   <footer> elements (pipeline card status rows, run bar). */
footer:not([class*="guided-"]):not([class*="studio-"]) {
  display: none !important;
}

.gradio-container .show-api,
.gradio-container .show-api *,
.gradio-container .built-with,
.gradio-container .built-with *,
.gradio-container .settings,
.gradio-container .settings *,
.gradio-container .divider {
  color: var(--ui-muted) !important;
}

body.dark,
body.dark .gradio-container {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
}

body.dark .prose,
body.dark .prose p,
body.dark .prose h1,
body.dark .prose h2,
body.dark .prose h3,
body.dark .prose h4,
body.dark .prose li,
body.dark .prose strong,
body.dark .tab-nav button,
body.dark label,
body.dark label span {
  color: var(--ui-ink) !important;
}

body.dark input,
body.dark textarea,
body.dark select,
body.dark [data-testid="dropdown"],
body.dark .tabitem,
body.dark .tab-nav,
body.dark .form,
body.dark .block {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

body.dark #workspace-tabs .tab-nav button {
  color: var(--ui-muted) !important;
}

body.dark #workspace-tabs .tab-container button,
body.dark #workspace-tabs .tab-nav button {
  color: var(--ui-muted) !important;
}

body.dark #workspace-tabs .tab-container button.selected,
body.dark #workspace-tabs .tab-nav button.selected {
  color: var(--ui-navy-900) !important;
  background: var(--ui-surface) !important;
}

body.dark .detail-accordion,
body.dark .detail-accordion .label-wrap,
body.dark .detail-accordion .label-wrap span {
  background: var(--ui-surface) !important;
  color: var(--ui-navy-900) !important;
}

body.dark button.primary,
body.dark .primary-button {
  background: var(--ui-blue-700) !important;
  color: var(--ui-on-dark) !important;
}

/*
 * Header contrast guardrails
 *
 * Gradio wraps HTML in `.prose`, and its theme rules can outrank ordinary
 * component styles. Both current mastheads are light surfaces, so scope their
 * foregrounds to the exact header contracts. A generic `.app-header *` rule
 * used to paint the product title, subtitle, and profile badge white on white.
 */
body .gradio-container .app-header.studio-header-contract,
body .gradio-container .app-header.studio-header-contract h1 {
  color: var(--ui-studio-ink) !important;
}

body .gradio-container .app-header.studio-header-contract .app-eyebrow,
body .gradio-container .app-header.studio-header-contract .app-subtitle {
  color: var(--ui-studio-muted) !important;
}

body .gradio-container .app-header.studio-header-contract .app-mark {
  color: var(--ui-on-dark) !important;
}

body .gradio-container .studio-product-header,
body .gradio-container .studio-product-identity h1 {
  color: var(--ui-studio-ink) !important;
}

body .gradio-container .studio-product-identity p,
body .gradio-container .studio-product-profile > span:first-child,
body .gradio-container .studio-profile-badge {
  color: var(--ui-studio-muted) !important;
}

body .gradio-container .studio-product-mark {
  color: var(--ui-on-dark) !important;
}

/* Table headers read as a quiet band, not a dark slab. The old near-black
   header also left its white label colour on the cell's children, so a light
   background alone turned the column labels invisible. */
.gradio-container table thead th,
.gradio-container table thead th.header-cell {
  border-bottom: 1px solid var(--ui-studio-border) !important;
  background: var(--ui-studio-soft) !important;
  color: var(--ui-studio-ink) !important;
  font-weight: 700 !important;
}

.gradio-container table thead th * {
  color: var(--ui-studio-ink) !important;
}

.gradio-container table thead th button,
.gradio-container table thead th button.secondary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ui-studio-ink) !important;
}

/* Detailed results workbench: deliberately scoped to training results. */
.results-shell > .styler {
  background: transparent !important;
}

.results-shell .results-heading {
  margin-bottom: 16px;
}

.results-shell .results-heading .section-kicker {
  color: var(--ui-teal-700) !important;
}

.results-shell .results-workbench-grid {
  align-items: stretch;
  gap: 16px;
}

.results-shell .run-context-column {
  min-width: 210px;
}

.results-shell .run-context-output {
  height: 100%;
}

.results-shell .run-context-card {
  height: 100%;
  padding: 16px;
  background: var(--ui-canvas);
  border: 1px solid var(--ui-border);
  border-top: 4px solid var(--ui-blue-600);
  border-radius: 8px;
}

.results-shell .run-context-card.state-complete {
  border-top-color: var(--ui-success);
}

.results-shell .run-context-card.state-failed,
.results-shell .run-context-card.state-cancelled {
  border-top-color: var(--ui-error);
}

.results-shell .run-context-card.state-queued {
  border-top-color: var(--ui-warning);
}

.results-shell .run-status-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--ui-navy-900);
  font-size: 13px;
  line-height: 1.45;
}

.results-shell .run-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--ui-blue-600);
}

.results-shell .state-complete .run-dot {
  color: var(--ui-success);
  background: var(--ui-success);
}

.results-shell .state-failed .run-dot,
.results-shell .state-cancelled .run-dot {
  color: var(--ui-error);
  background: transparent;
}

.results-shell .state-queued .run-dot {
  color: var(--ui-warning);
}

.results-shell .run-alias-row {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.results-shell .run-alias {
  display: block;
  margin: 4px 0 8px;
  color: var(--ui-navy-900);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  user-select: all;
}

.results-shell .run-id-copy {
  min-height: 30px;
  padding: 4px 8px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  border-radius: 4px;
  color: var(--ui-blue-700);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.results-shell .run-id-copy:hover {
  background: var(--ui-canvas-deep);
}

.results-shell .run-id-copy:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.results-shell .run-context-list,
.results-shell .run-technical-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.results-shell .run-context-item {
  min-width: 0;
}

.results-shell .run-context-label {
  display: block;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.results-shell .run-context-value {
  display: block;
  margin-top: 2px;
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.results-shell .run-technical {
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: 11px;
}

.results-shell .run-technical summary {
  color: var(--ui-blue-700);
  font-weight: 700;
  cursor: pointer;
}

.results-shell .workbench-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.results-shell .workbench-metric-card {
  min-width: 0;
  padding: 12px 16px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-top: 3px solid var(--ui-blue-600);
  border-radius: 8px;
}

.results-shell .workbench-metric-card.primary-metric-card {
  background: var(--ui-success-bg);
  border-top-color: var(--ui-success);
}

.results-shell .workbench-metric-card.model-metric-card {
  grid-column: 1 / -1;
  border-top-color: var(--ui-blue-600);
}

.results-shell .metric-label {
  display: block;
  color: var(--ui-muted) !important;
  font-size: 11px;
  font-weight: 700;
}

.results-shell .metric-value {
  display: block;
  margin-top: 8px;
  color: var(--ui-navy-900) !important;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.results-shell .metric-model {
  font-size: 18px;
}

.results-shell .reported-metrics-detail {
  margin-top: 12px;
}

.results-shell .reported-metrics-detail summary {
  color: var(--ui-blue-700);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.results-shell .reported-metrics-source {
  margin-top: 12px;
}

.results-shell .reported-metrics-source > .metric-grid {
  display: none;
}

.results-shell .performance-summary td,
.results-shell .performance-summary td *,
.results-shell .detail-markdown,
.results-shell .detail-markdown * {
  color: var(--ui-ink) !important;
}

body .gradio-container .results-shell .detail-markdown table thead th,
body.dark .gradio-container .results-shell .detail-markdown table thead th {
  background: var(--ui-canvas-deep) !important;
  color: var(--ui-navy-900) !important;
}

body .gradio-container .results-shell .detail-markdown table thead th *,
body.dark .gradio-container .results-shell .detail-markdown table thead th * {
  background: transparent !important;
  color: var(--ui-navy-900) !important;
}

body .gradio-container .results-shell .detail-markdown code,
body.dark .gradio-container .results-shell .detail-markdown code {
  background: var(--ui-canvas-deep) !important;
  color: var(--ui-navy-900) !important;
}

.results-shell .performance-summary table thead th,
.results-shell .prediction-accordion table thead th,
.results-shell .candidate-comparison table thead th {
  background: var(--ui-canvas-deep) !important;
  color: var(--ui-navy-900) !important;
}

.results-shell .prediction-accordion table thead th *,
.results-shell .candidate-comparison table thead th * {
  background: transparent !important;
  color: var(--ui-navy-900) !important;
}

.results-shell .candidate-comparison {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-blue-600);
  border-radius: 8px;
  background: var(--ui-surface-subtle);
  border-color: var(--ui-border) !important;
  border-left-color: var(--ui-blue-600) !important;
}

.results-shell .candidate-comparison h4 {
  margin-top: 0 !important;
  color: var(--ui-navy-900) !important;
}

.results-shell .candidate-comparison table {
  width: 100%;
  font-size: 12px;
}

.results-shell .candidate-comparison table td,
.results-shell .candidate-comparison table td * {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-ink) !important;
}

.results-shell .candidate-comparison table tbody tr:nth-child(even) td {
  background: var(--ui-surface-subtle) !important;
}

.results-shell .prediction-accordion {
  margin-top: 16px;
}

.results-shell .prediction-accordion .prediction-table {
  min-height: 0;
  max-height: 260px;
  overflow: auto;
}

.results-shell .prediction-accordion table td,
.results-shell .prediction-accordion table td * {
  color: var(--ui-ink) !important;
}

.results-shell .prediction-table .virtual-row {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

.results-shell .prediction-table .virtual-row.row-odd {
  background: var(--ui-surface-subtle) !important;
}

.results-shell .prediction-table .body-cell,
.results-shell .prediction-table .body-cell * {
  background: transparent !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-ink) !important;
}

.results-shell .artifact-panel {
  position: static !important;
  z-index: auto !important;
  margin-top: 16px;
}

.results-shell .artifact-heading {
  margin: 0 0 4px !important;
  color: var(--ui-navy-900) !important;
  font-size: 16px;
  font-weight: 700;
}

.results-shell .artifact-note {
  margin: 0 0 12px !important;
  color: var(--ui-muted) !important;
  font-size: 12px;
}

.results-shell .artifact-panel a,
.results-shell .artifact-panel .file-preview {
  color: var(--ui-blue-700) !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

body .gradio-container .results-shell .artifact-panel .file-preview tr.file,
body.dark .gradio-container .results-shell .artifact-panel .file-preview tr.file {
  background: var(--ui-surface) !important;
}

body .gradio-container .results-shell .artifact-panel .file-preview td,
body .gradio-container .results-shell .artifact-panel .file-preview span,
body .gradio-container .results-shell .artifact-panel .file-preview a,
body.dark .gradio-container .results-shell .artifact-panel .file-preview td,
body.dark .gradio-container .results-shell .artifact-panel .file-preview span,
body.dark .gradio-container .results-shell .artifact-panel .file-preview a {
  background: transparent !important;
  color: var(--ui-blue-700) !important;
}

.results-shell .artifact-panel .empty.large {
  height: 72px !important;
  min-height: 72px !important;
}

.results-shell .artifact-panel .empty.large .icon {
  width: 24px !important;
  height: 24px !important;
  opacity: .45;
}

body.dark .results-shell .run-context-card,
body.dark .results-shell .workbench-metric-card {
  background: var(--ui-surface) !important;
}

body.dark .results-shell .run-status-strip,
body.dark .results-shell .run-alias,
body.dark .results-shell .metric-value {
  color: var(--ui-navy-900) !important;
}

@media (max-width: 900px) {
  .results-shell .results-workbench-grid,
  .parallel-job-column .results-workbench-grid {
    flex-direction: column !important;
  }

  .results-shell .workbench-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .results-shell .workbench-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .results-shell .workbench-metric-card.model-metric-card {
    grid-column: auto;
  }
}

@media (max-width: 800px) {
  * {
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .app-header {
    margin: 0 -12px 20px;
    padding: 20px 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .app-subtitle {
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .row,
  .column,
  .tabs,
  .tabitem,
  .panel-card,
  .results-shell,
  .context-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  .row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .column {
    flex: 1 1 100% !important;
  }
  .tab-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .tab-container button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 8px 16px !important;
    white-space: nowrap;
  }
  .panel-card,
  .results-shell,
  .context-panel {
    padding: 16px !important;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Guided Research Workbench */
.guided-workbench-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--ui-border);
}

#workspace-tabs > .tabitem {
  padding-top: 8px;
}

.guided-workbench-heading h2 {
  margin: 2px 0 0 !important;
  color: var(--ui-navy-900) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em;
}

.guided-workbench-heading > p {
  max-width: 620px;
  margin: 0 !important;
  color: var(--ui-muted) !important;
  font-size: 14px;
  line-height: 1.55;
}

.guided-instrument-bench {
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1fr) 285px;
  gap: 16px !important;
  align-items: start !important;
  margin-top: 20px;
}

.guided-instrument-bench > .column {
  min-width: 0 !important;
  width: auto !important;
}

.guided-step-rail,
.guided-work-canvas,
.guided-research-panel {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 47, 68, .04), 0 12px 30px rgba(16, 47, 68, .045);
}

.guided-step-rail {
  position: sticky;
  top: 12px;
  overflow: hidden;
  padding: 12px !important;
}

.guided-rail-label {
  margin: 4px 8px 8px !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.guided-stepper {
  border: 0 !important;
  padding: 0 !important;
}

.guided-stepper > label {
  display: none !important;
}

.guided-stepper .wrap,
.guided-stepper .container {
  gap: 4px !important;
}

.guided-stepper label:has(input) {
  min-height: 42px;
  margin: 0 !important;
  padding: 12px 12px !important;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent !important;
  color: var(--ui-muted) !important;
  font-size: 12px;
  font-weight: 600;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.guided-stepper label:has(input):hover {
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-navy-900) !important;
}

.guided-stepper label:has(input:checked) {
  background: var(--ui-accent-bg) !important;
  border-color: var(--ui-border-strong);
  color: var(--ui-navy-900) !important;
}

.guided-stepper input[type="radio"] {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border: 1px solid var(--ui-border-strong) !important;
  box-shadow: none !important;
}

.guided-stepper input[type="radio"]:checked {
  background: var(--ui-blue-700) !important;
  border-color: var(--ui-blue-700) !important;
}

.guided-rail-note {
  display: grid;
  gap: 4px;
  margin: 12px 4px 2px;
  padding: 12px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
}

.guided-approval-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.guided-rail-note strong {
  color: var(--ui-navy-900);
  font-size: 11px;
}

.guided-rail-note span {
  font-size: 11px;
  line-height: 1.45;
}

.guided-work-canvas {
  padding: 20px !important;
}

.guided-canvas-heading,
.guided-dossier-heading,
.guided-inspector-heading,
.guided-snapshot-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.guided-canvas-heading span,
.guided-dossier-heading span:first-child,
.guided-inspector-heading span:first-child,
.guided-snapshot-heading span,
.guided-step-heading > span,
.guided-review > span,
.guided-summary-status > span {
  color: var(--ui-teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guided-canvas-heading h3,
.guided-dossier-heading h3,
.guided-inspector-heading h3,
.guided-snapshot-heading h3 {
  margin: 2px 0 0 !important;
  color: var(--ui-navy-900) !important;
  font-size: 16px !important;
}

.guided-canvas-heading small {
  color: var(--ui-muted);
  font-size: 11px;
}

.guided-pipeline-diagram {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  margin: 16px 0 20px;
  padding: 16px !important;
  overflow: visible;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-research-canvas);
}

.guided-pipeline-diagram > * {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.guided-pipeline-diagram > .guided-pipeline-card-shell {
  position: relative;
  min-width: 0;
  min-height: 166px;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-research-paper) !important;
  box-shadow: var(--ui-research-shadow);
}

.guided-pipeline-card-shell .guided-pipeline-card-shell {
  position: static;
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.guided-pipeline-card-shell .styler,
.guided-pipeline-card-output,
.guided-pipeline-card-output > div,
.guided-pipeline-card-output .html-container,
.guided-pipeline-card-output .prose {
  height: 100%;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.guided-pipeline-card-output {
  overflow: hidden !important;
}

.guided-pipeline-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 164px;
  height: 100%;
  padding: 16px;
  border-top: 3px solid var(--ui-research-green-700);
  color: var(--ui-research-ink);
}

.guided-node-topline,
.guided-node-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.guided-node-stage,
.guided-node-shape {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ui-font-mono);
}

.guided-node-stage {
  color: var(--ui-research-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guided-node-source {
  flex: 0 0 auto;
  max-width: 112px;
  overflow: hidden;
  padding: 4px 8px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-research-green-100);
  color: var(--ui-research-green-700);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-pipeline-card-content h4,
.guided-node-parameter {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guided-pipeline-card-content h4 {
  min-height: 40px;
  margin: 16px 0 4px !important;
  color: var(--ui-research-ink) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.guided-pipeline-card-content.is-selected h4 {
  padding-right: 82px;
}

.guided-node-parameter {
  margin: 0 0 12px !important;
  color: var(--ui-research-muted) !important;
  font-size: 12px;
  line-height: 1.45;
}

.guided-node-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border-subtle);
  color: var(--ui-research-muted);
  font-size: 11px;
}

.guided-node-compatibility {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 700;
}

.guided-node-compatibility.compatible {
  color: var(--ui-success);
}

.guided-node-compatibility.review {
  color: var(--ui-warning);
}

.guided-node-compatibility.blocked {
  color: var(--ui-error);
}

.guided-pipeline-card-content.is-selected {
  box-shadow: inset 0 0 0 2px var(--ui-research-green-700);
}

.guided-node-selected {
  position: absolute;
  top: 48px;
  right: 16px;
  color: var(--ui-research-green-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guided-pipeline-node-hitarea {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.guided-pipeline-diagram > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:hover) {
  border-color: var(--ui-research-green-700) !important;
  transform: translateY(-1px);
}

.guided-pipeline-diagram > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:focus-visible) {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}

.guided-secondary-action:focus-visible,
.guided-primary-action:focus-visible,
.guided-parallel-action:focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

.guided-step-panel {
  padding: 20px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: none !important;
}

.guided-step-heading {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.guided-step-heading h3 {
  margin: 4px 0 4px !important;
  color: var(--ui-navy-900) !important;
  font-size: 20px !important;
  letter-spacing: -.02em;
}

.guided-step-heading p {
  max-width: 700px;
  margin: 0 !important;
  color: var(--ui-muted) !important;
  font-size: 12px;
  line-height: 1.5;
}

.guided-research-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 16px !important;
  scrollbar-width: thin;
}

.guided-dossier,
.guided-dossier-empty {
  color: var(--ui-ink);
}

.guided-provider-badge,
.guided-compatibility {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 999px;
  background: var(--ui-accent-bg);
  color: var(--ui-blue-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.guided-dossier-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}

.guided-dossier-block h4,
.guided-candidate-card h4,
.guided-node-inspector h4,
.guided-plan-context h4,
.guided-review-warnings h4 {
  margin: 0 0 8px !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.guided-dossier-block strong {
  color: var(--ui-navy-900);
  font-size: 12px;
}

.guided-dossier-block p,
.guided-dossier-block li,
.guided-node-inspector p,
.guided-node-inspector li,
.guided-candidate-card p,
.guided-candidate-card li {
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  line-height: 1.5;
}

.guided-dossier-block ul,
.guided-node-inspector ul,
.guided-candidate-card ul {
  margin: 4px 0 0 !important;
  padding-left: 16px;
}

.guided-provider-note {
  margin: 16px 0 0 !important;
  padding: 8px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-subtle);
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  line-height: 1.45;
}

.guided-inline-error {
  margin-top: 12px;
  padding: 8px;
  border-left: 3px solid var(--ui-error);
  background: var(--ui-error-bg);
  color: var(--ui-error);
  font-size: 11px;
}

.guided-refinement-box {
  margin-top: 16px;
  padding: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: none !important;
}

.guided-secondary-action {
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-navy-900) !important;
  box-shadow: none !important;
}

.guided-secondary-action:hover {
  border-color: var(--ui-blue-700) !important;
  background: var(--ui-accent-bg) !important;
}

.guided-candidate-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.guided-plan-context {
  grid-column: 1 / -1;
  padding: 12px 12px;
  border-left: 3px solid var(--ui-teal-700);
  background: var(--ui-teal-bg);
}

.guided-candidate-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
}

.guided-candidate-card.selected {
  border-color: var(--ui-blue-700);
  box-shadow: inset 0 3px 0 var(--ui-blue-700);
}

.guided-candidate-index {
  color: var(--ui-teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.guided-candidate-card h3 {
  margin: 4px 0 8px !important;
  color: var(--ui-navy-900) !important;
  font-size: 16px !important;
}

.guided-candidate-rationale {
  min-height: 48px;
}

.guided-candidate-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}

.guided-candidate-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.guided-estimate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guided-estimate {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-subtle);
}

.guided-estimate span,
.guided-estimate small {
  color: var(--ui-muted);
  font-size: 11px;
}

.guided-estimate strong {
  color: var(--ui-navy-900);
  font-size: 12px;
}

.guided-selection-state {
  margin-top: auto !important;
  padding-top: 12px;
  color: var(--ui-blue-700) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.guided-node-inspector {
  display: grid;
  gap: 16px;
}

.guided-compatibility.compatible {
  border-color: var(--ui-success-border);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}

.guided-compatibility.review {
  border-color: var(--ui-warning-border);
  background: var(--ui-warning-bg);
  color: var(--ui-warning);
}

.guided-compatibility.blocked {
  border-color: var(--ui-error-border);
  background: var(--ui-error-bg);
  color: var(--ui-error);
}

.guided-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.guided-inspector-grid > div,
.guided-inspector-contract {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
}

.guided-detail-row {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-border-subtle);
  font-size: 11px;
}

.guided-detail-row:last-child {
  border-bottom: 0;
}

.guided-detail-row span {
  color: var(--ui-muted);
}

.guided-detail-row strong {
  color: var(--ui-ink);
  overflow-wrap: anywhere;
}

.guided-review {
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--ui-surface);
}

.guided-review.ready {
  border-left-color: var(--ui-success);
}

.guided-review.blocked {
  border-left-color: var(--ui-warning);
}

.guided-review h3 {
  margin: 4px 0 16px !important;
  color: var(--ui-navy-900) !important;
  font-size: 20px !important;
}

.guided-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guided-review-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-subtle);
}

.guided-review-grid small {
  color: var(--ui-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.guided-review-grid strong {
  color: var(--ui-navy-900);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.guided-review-warnings {
  margin-top: 12px;
}

.guided-variant-status {
  margin-top: 12px;
  padding: 12px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font-size: 11px;
}

.guided-variant-status.ready {
  border-color: var(--ui-success-border);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}

.guided-variant-status.blocked {
  border-color: var(--ui-error-border);
  background: var(--ui-error-bg);
  color: var(--ui-error);
}

.guided-run-bar {
  position: sticky;
  bottom: 10px;
  z-index: 20;
  margin-top: 16px;
  padding: 12px 12px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 8px 28px rgba(16, 47, 68, .12) !important;
  backdrop-filter: blur(12px);
}

.guided-run-bar > .row {
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.guided-run-summary-output {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.guided-run-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.guided-summary-status {
  display: grid;
  gap: 2px;
  min-width: 120px;
  padding-right: 16px;
  border-right: 1px solid var(--ui-border);
}

.guided-summary-status strong {
  color: var(--ui-navy-900);
  font-size: 12px;
}

.guided-summary-facts {
  display: flex;
  gap: 16px;
  min-width: 0;
}

.guided-summary-facts > span {
  display: grid;
  gap: 2px;
  color: var(--ui-ink);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.guided-summary-facts small {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guided-primary-action,
.guided-parallel-action {
  flex: 0 0 auto !important;
  min-width: 155px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.guided-parallel-action {
  background: var(--ui-teal-700) !important;
}

.guided-result-tabs {
  margin-top: 12px;
}

.guided-result-tabs .tab-nav {
  border-bottom: 1px solid var(--ui-border);
  overflow-x: auto;
}

.guided-snapshot-output {
  padding: 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  background: var(--ui-surface-subtle) !important;
}

.guided-snapshot {
  display: grid;
  gap: 12px;
}

.guided-empty-copy {
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-style: italic;
}

/* Scientific Light hierarchy -------------------------------------------- */
.guided-step-rail,
.guided-work-canvas,
.guided-research-panel {
  background: var(--ui-research-paper) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-research-shadow);
}

.guided-stepper label:has(input):hover {
  background: var(--ui-research-canvas) !important;
  color: var(--ui-research-ink) !important;
}

.guided-stepper label:has(input:checked) {
  background: var(--ui-research-green-100) !important;
  border-color: var(--ui-research-green-700);
  color: var(--ui-research-ink) !important;
}

.guided-stepper input[type="radio"]:checked {
  background: var(--ui-research-green-700) !important;
  border-color: var(--ui-research-green-700) !important;
}

.guided-step-panel,
.guided-refinement-box,
.guided-snapshot-output {
  background: var(--ui-research-canvas) !important;
}

.guided-research-panel {
  overflow-x: hidden;
}

.guided-dossier-heading {
  margin: -16px -16px 16px;
  padding: 16px;
  border-radius: 12px 12px 0 0;
  background: var(--ui-research-green-900);
}

.guided-dossier-heading h3,
.guided-dossier-heading span:first-child {
  color: var(--ui-on-dark) !important;
}

.guided-provider-badge {
  border-color: var(--ui-research-green-100);
  background: var(--ui-research-green-100);
  color: var(--ui-research-green-900);
}

.guided-dossier-block strong,
.guided-candidate-card h3,
.guided-review h3,
.guided-summary-status strong {
  color: var(--ui-research-ink) !important;
}

.guided-candidate-card {
  border-color: var(--ui-border);
  background: var(--ui-research-paper);
  box-shadow: var(--ui-research-shadow);
}

.guided-candidate-card.selected {
  border-color: var(--ui-research-green-700);
  box-shadow: inset 0 3px 0 var(--ui-research-green-700),
    var(--ui-research-shadow);
}

.guided-candidate-index,
.guided-selection-state,
.guided-canvas-heading span,
.guided-step-heading > span,
.guided-review > span,
.guided-summary-status > span {
  color: var(--ui-research-green-700) !important;
}

.guided-plan-context {
  border-left-color: var(--ui-research-green-700);
  background: var(--ui-research-green-100);
}

.guided-inspector-grid > div,
.guided-inspector-contract,
.guided-review {
  background: var(--ui-research-paper);
}

.guided-run-bar {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-research-floating) !important;
  box-shadow: var(--ui-research-shadow) !important;
}

.guided-primary-action {
  background: var(--ui-research-green-700) !important;
  border-color: var(--ui-research-green-700) !important;
}

.guided-parallel-action {
  background: var(--ui-surface) !important;
  border-color: var(--ui-research-green-700) !important;
  color: var(--ui-research-green-700) !important;
}

body.dark .guided-step-rail,
body.dark .guided-work-canvas,
body.dark .guided-research-panel,
body.dark .guided-step-panel,
body.dark .guided-candidate-card,
body.dark .guided-inspector-grid > div,
body.dark .guided-inspector-contract,
body.dark .guided-review,
body.dark .guided-run-bar,
body.dark .guided-snapshot-output {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

@media (max-width: 1180px) {
  .guided-instrument-bench {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .guided-research-panel {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

  .guided-candidate-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .guided-workbench-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .guided-workbench-heading > p {
    text-align: left;
  }

  .guided-instrument-bench {
    display: flex !important;
    flex-direction: column !important;
  }

  .guided-step-rail {
    position: static;
  }

  .guided-stepper .wrap,
  .guided-stepper .container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-candidate-columns,
  .guided-inspector-grid,
  .guided-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .guided-run-bar {
    position: static;
  }

  .guided-run-bar > .row {
    flex-direction: column !important;
  }

  .guided-run-summary,
  .guided-summary-facts {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .guided-summary-status {
    width: 100%;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  .guided-primary-action,
  .guided-parallel-action {
    width: 100% !important;
  }
}

@media (max-width: 650px) {
  .guided-pipeline-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-stepper .wrap,
  .guided-stepper .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-work-canvas,
  .guided-research-panel {
    padding: 12px !important;
  }

  .guided-estimate-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 440px) {
  .guided-pipeline-diagram {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 340px) {
  .guided-stepper .wrap,
  .guided-stepper .container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Modern Scientific Studio --------------------------------------------- */
.app-header.studio-header-contract {
  min-height: 66px;
  padding: 14px 24px;
  border: 1px solid var(--ui-studio-border);
  border-bottom-color: var(--ui-studio-border);
  color: var(--ui-studio-ink);
  background: var(--ui-studio-surface);
  box-shadow: none;
}

.app-header.studio-header-contract .app-mark {
  border-color: var(--ui-studio-cobalt);
  border-radius: 12px;
  color: #ffffff;
  background: var(--ui-studio-cobalt);
}

.app-header.studio-header-contract h1,
.app-header.studio-header-contract .app-eyebrow,
.app-header.studio-header-contract .app-subtitle {
  color: var(--ui-studio-ink) !important;
}

.app-header.studio-header-contract .app-eyebrow,
.app-header.studio-header-contract .app-subtitle {
  color: var(--ui-studio-muted) !important;
}

#workspace-tabs .tab-nav,
#workspace-tabs .tab-container {
  border-bottom-color: var(--ui-studio-border);
  background: var(--ui-studio-surface);
}

#workspace-tabs .tab-nav button,
#workspace-tabs .tab-container button {
  min-height: 40px;
  color: var(--ui-studio-muted) !important;
  background: transparent !important;
}

#workspace-tabs .tab-nav button.selected,
#workspace-tabs .tab-container button.selected {
  border-color: var(--ui-studio-cobalt) !important;
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-cobalt-soft) !important;
}

.guided-workbench-heading {
  align-items: flex-start;
  padding: 28px 12px 22px;
  border-bottom-color: var(--ui-studio-border);
}

.guided-workbench-heading h2 {
  color: var(--ui-studio-ink) !important;
  font-size: clamp(25px, 2.5vw, 31px) !important;
}

.guided-workbench-heading > p {
  max-width: 540px;
  color: var(--ui-studio-muted) !important;
}

.studio-workbench {
  display: grid !important;
  grid-template-columns: minmax(180px, .18fr) minmax(0, 1fr) minmax(280px, .29fr);
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--ui-studio-border) !important;
  border-radius: 16px !important;
  background: var(--ui-studio-surface) !important;
  box-shadow: var(--ui-studio-shadow);
}

.studio-workbench > .column {
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.studio-workflow {
  position: static;
  padding: 24px 18px !important;
  border-right: 1px solid var(--ui-studio-border) !important;
  background: #fbfcfe !important;
}

.studio-primary {
  padding: 24px 26px 32px !important;
  background: var(--ui-studio-bg) !important;
}

.studio-assistant {
  position: static;
  max-height: none;
  overflow-x: hidden;
  padding: 24px 20px 20px !important;
  border-left: 1px solid var(--ui-studio-border) !important;
  background: #fbfcfe !important;
}

.guided-rail-label,
.guided-canvas-heading span,
.guided-step-heading > span,
.guided-review > span,
.guided-summary-status > span {
  color: var(--ui-studio-cobalt) !important;
}

.guided-rail-label {
  margin: 1px 9px 14px !important;
  letter-spacing: .08em;
}

.guided-stepper .wrap,
.guided-stepper .container {
  gap: 5px !important;
}

.guided-stepper label:has(input) {
  min-height: 44px;
  padding: 10px !important;
  border-radius: 10px;
  color: var(--ui-studio-muted) !important;
  font-size: 11px;
}

.guided-stepper label:has(input):hover {
  border-color: var(--ui-studio-border);
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-soft) !important;
}

.guided-stepper label:has(input:checked) {
  border-color: var(--ui-studio-cobalt);
  color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt-soft) !important;
}

.guided-stepper input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-color: var(--ui-studio-border-strong) !important;
  border-radius: 9px !important;
  background: var(--ui-studio-surface) !important;
}

.guided-stepper input[type="radio"]:checked {
  border-color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt) !important;
}

.guided-rail-note {
  margin-top: 24px;
  border: 0;
  border-radius: 12px;
  color: var(--ui-studio-muted);
  background: var(--ui-studio-soft);
}

.guided-rail-note strong {
  color: var(--ui-studio-ink);
}

.guided-canvas-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.guided-canvas-heading h3 {
  color: var(--ui-studio-ink) !important;
  font-size: 18px !important;
  letter-spacing: -.02em;
}

.guided-canvas-heading small {
  color: var(--ui-studio-muted) !important;
}

.studio-pipeline {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  grid-auto-flow: column;
  gap: 12px !important;
  align-items: stretch !important;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 18px 18px 24px !important;
  border: 1px solid var(--ui-studio-border) !important;
  border-radius: 16px !important;
  background: var(--ui-studio-surface) !important;
  scrollbar-color: var(--ui-studio-border-strong) transparent;
  scrollbar-width: thin;
}

.studio-pipeline > * {
  min-width: 0 !important;
}

.studio-pipeline > .guided-pipeline-card-shell {
  position: relative;
  min-width: 84px;
  min-height: 154px;
  overflow: visible;
  border: 1px solid var(--ui-studio-border) !important;
  border-top: 3px solid var(--ui-studio-cobalt) !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
  box-shadow: none;
}

/* Gradio can leave a visible duplicate wrapper behind when switching steps.
   Only the active panel carries its semantic heading. Collapse empty shells so
   they cannot create anonymous cards in the research canvas. */
.studio-primary > .guided-step-panel:not(:has(.guided-step-heading)) {
  display: none !important;
}

.studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 75px;
  left: 100%;
  width: 12px;
  height: 2px;
  background: var(--ui-studio-border-strong);
}

.studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::before {
  content: "›";
  position: absolute;
  z-index: 2;
  top: 66px;
  right: -9px;
  color: var(--ui-studio-subtle);
  font-size: 14px;
}

.studio-pipeline .guided-pipeline-card-shell .guided-pipeline-card-shell {
  position: static;
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.studio-pipeline .guided-pipeline-card-output,
.studio-pipeline .guided-pipeline-card-output > div,
.studio-pipeline .guided-pipeline-card-output .html-container,
.studio-pipeline .guided-pipeline-card-output .prose,
.studio-pipeline .guided-pipeline-card-output .styler {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100%;
  padding: 0 !important;
}

.studio-pipeline .guided-pipeline-card-output {
  overflow: hidden !important;
}

.guided-pipeline-card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 13px;
  color: var(--ui-studio-ink);
  background: transparent;
}

.guided-node-topline {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.guided-node-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ui-studio-cobalt);
  background: var(--ui-studio-cobalt-soft);
  font: 600 9px/1 var(--ui-font-mono);
}

.guided-node-stage-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-studio-muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-node-source {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: var(--ui-studio-muted);
  background: transparent;
  font: 500 8px/1.2 var(--ui-font-mono);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.guided-pipeline-card-content h4 {
  display: -webkit-box;
  min-height: 34px;
  margin: 12px 0 5px;
  overflow: hidden;
  color: var(--ui-studio-ink) !important;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guided-node-parameter {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--ui-studio-muted) !important;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-node-footer {
  align-items: end;
  margin-top: auto;
  padding-top: 10px;
}

.guided-node-shape {
  max-width: 64%;
  color: var(--ui-studio-subtle) !important;
  font: 500 8px/1.25 var(--ui-font-mono);
}

.guided-node-compatibility {
  gap: 3px;
  color: var(--ui-studio-muted) !important;
  font-size: 8px;
}

.guided-node-compatibility.compatible {
  color: var(--ui-studio-success) !important;
}

.guided-node-compatibility.review {
  color: var(--ui-studio-warning) !important;
}

.guided-node-compatibility.blocked {
  color: var(--ui-studio-danger) !important;
}

.guided-pipeline-card-content.is-selected {
  background: var(--ui-studio-cobalt-soft);
  box-shadow: inset 0 0 0 1px var(--ui-studio-cobalt);
}

.guided-node-selected {
  display: none;
  top: 10px;
  right: 10px;
  color: var(--ui-studio-cobalt) !important;
  font-size: 8px;
}

.studio-pipeline > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:hover) {
  border-color: var(--ui-studio-cobalt) !important;
  transform: translateY(-1px);
}

.studio-pipeline > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:focus-visible) {
  outline: 3px solid rgba(70, 107, 166, .28);
  outline-offset: 3px;
}

.guided-step-panel,
.guided-refinement-box,
.guided-snapshot-output {
  border-color: var(--ui-studio-border) !important;
  border-radius: 14px !important;
  background: var(--ui-studio-surface) !important;
  box-shadow: none !important;
}

.guided-step-heading h3,
.guided-dossier-heading h3,
.guided-candidate-card h3,
.guided-node-inspector h3,
.guided-review h3,
.guided-summary-status strong {
  color: var(--ui-studio-ink) !important;
}

.guided-step-heading p,
.guided-dossier p,
.guided-candidate-card p,
.guided-node-inspector p,
.guided-review p {
  color: var(--ui-studio-muted) !important;
}

.guided-dossier-heading {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--ui-studio-border);
  border-radius: 0;
  background: transparent;
}

.guided-dossier-heading h3,
.guided-dossier-heading span:first-child {
  color: var(--ui-studio-ink) !important;
}

.guided-research-provider {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}

.guided-research-provider small {
  color: var(--ui-studio-subtle);
  font-size: 8px;
  white-space: nowrap;
}

.guided-provider-badge {
  border-color: var(--ui-studio-border);
  color: var(--ui-studio-cobalt);
  background: var(--ui-studio-cobalt-soft);
}

.guided-research-insights {
  display: grid;
  gap: 2px;
}

.guided-research-insight {
  padding: 12px 0 12px 13px;
  border-left: 2px solid var(--ui-studio-border-strong);
}

.guided-research-insight h4,
.guided-research-insight p {
  margin: 4px 0 0 !important;
}

.guided-insight-label {
  color: var(--ui-studio-cobalt);
  font: 600 8px/1.2 var(--ui-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guided-candidate-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.guided-plan-context {
  border-left-color: var(--ui-studio-cobalt);
  border-radius: 10px;
  background: var(--ui-studio-cobalt-soft);
}

.guided-candidate-card,
.guided-node-inspector,
.studio-detail,
.guided-review {
  border: 1px solid var(--ui-studio-border) !important;
  border-radius: 14px !important;
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-surface) !important;
  box-shadow: none !important;
}

.guided-candidate-card {
  padding: 16px;
}

.guided-candidate-card.selected {
  border-color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ui-studio-cobalt) !important;
}

.guided-candidate-index,
.guided-selection-state {
  color: var(--ui-studio-cobalt) !important;
  letter-spacing: .06em;
}

.guided-candidate-section,
.guided-dossier-block {
  border-top-color: var(--ui-studio-border);
}

.guided-estimate,
.guided-inspector-grid > div,
.guided-inspector-contract,
.guided-review-grid > div,
.guided-variant-status {
  border-color: var(--ui-studio-border);
  border-radius: 10px;
  background: var(--ui-studio-soft);
}

.guided-compatibility {
  border-radius: 8px;
  letter-spacing: .04em;
}

.guided-compatibility.compatible {
  border-color: #a7c7b9;
  color: var(--ui-studio-success);
  background: var(--ui-studio-success-soft);
}

.guided-compatibility.review {
  border-color: #d8c28e;
  color: var(--ui-studio-warning);
  background: var(--ui-studio-warning-soft);
}

.guided-compatibility.blocked {
  border-color: #d8abab;
  color: var(--ui-studio-danger);
  background: var(--ui-studio-danger-soft);
}

.guided-research-insight[data-insight-type="recommendation"] {
  border-left-color: var(--ui-studio-cobalt);
}

.guided-research-insight[data-insight-type="tradeoff"] {
  border-left-color: var(--ui-studio-warning);
}

.guided-research-insight[data-insight-type="assumption"] {
  border-left-color: var(--ui-studio-success);
}

.guided-research-insight[data-insight-type="warning"] {
  border-left-color: var(--ui-studio-danger);
}

.guided-refinement-box {
  margin-top: auto;
  border-color: var(--ui-studio-border) !important;
  border-radius: 12px !important;
  background: var(--ui-studio-surface) !important;
}

.guided-secondary-action {
  border-color: var(--ui-studio-border-strong) !important;
  border-radius: 10px !important;
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-surface) !important;
}

.guided-secondary-action:hover {
  border-color: var(--ui-studio-cobalt) !important;
  color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt-soft) !important;
}

.studio-runbar {
  position: sticky;
  z-index: 5;
  bottom: 12px;
  overflow: hidden;
  margin-top: 16px;
  padding: 12px !important;
  border: 1px solid var(--ui-studio-border-strong) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 16px 36px rgba(49, 68, 98, .14) !important;
  backdrop-filter: blur(14px);
}

.guided-summary-status {
  border-right-color: var(--ui-studio-border);
}

.guided-summary-status strong,
.guided-summary-facts > span {
  color: var(--ui-studio-ink) !important;
}

.guided-summary-facts small {
  color: var(--ui-studio-muted) !important;
}

.studio-runbar .guided-primary-action {
  border-color: var(--ui-studio-cobalt) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: var(--ui-studio-cobalt) !important;
}

.studio-runbar .guided-primary-action:hover {
  background: var(--ui-studio-cobalt-hover) !important;
}

.studio-runbar .guided-parallel-action {
  border-color: var(--ui-studio-border-strong) !important;
  border-radius: 10px !important;
  color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-surface) !important;
}

.guided-result-tabs .tab-nav {
  border-bottom-color: var(--ui-studio-border);
}

.guided-result-tabs .tab-nav button.selected {
  border-color: var(--ui-studio-cobalt) !important;
  color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt-soft) !important;
}

.results-shell .workbench-metric-grid .metric-card,
.results-shell .run-context-card,
.results-shell .artifact-panel,
.results-shell .prediction-accordion {
  border-color: var(--ui-studio-border) !important;
  border-radius: 12px !important;
  background: var(--ui-studio-surface) !important;
  box-shadow: none !important;
}

body.dark .studio-workbench,
body.dark .studio-workbench * {
  color-scheme: light;
}

body.dark .studio-workbench,
body.dark .studio-pipeline,
body.dark .studio-detail,
body.dark .guided-step-panel,
body.dark .guided-candidate-card,
body.dark .guided-node-inspector,
body.dark .studio-runbar {
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-surface) !important;
}

body.dark .studio-primary {
  background: var(--ui-studio-bg) !important;
}

body.dark .studio-workflow,
body.dark .studio-assistant {
  background: #fbfcfe !important;
}

@media (max-width: 1180px) {
  .studio-workbench {
    grid-template-columns: minmax(170px, .22fr) minmax(0, 1fr);
  }

  .studio-assistant {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ui-studio-border) !important;
    border-left: 0 !important;
  }

  .guided-candidate-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .guided-workbench-heading {
    padding-right: 4px;
    padding-left: 4px;
  }

  .studio-workbench {
    display: flex !important;
    flex-direction: column !important;
  }

  .studio-workflow,
  .studio-primary,
  .studio-assistant {
    width: 100% !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .studio-workflow,
  .studio-assistant {
    border-bottom: 1px solid var(--ui-studio-border) !important;
  }

  .guided-stepper .wrap,
  .guided-stepper .container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-candidate-columns,
  .guided-inspector-grid,
  .guided-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-runbar {
    position: static;
  }
}

@media (max-width: 560px) {
  .studio-runbar {
    position: static;
  }

  .studio-primary,
  .studio-assistant,
  .studio-workflow {
    padding: 16px !important;
  }

  .guided-canvas-heading,
  .guided-dossier-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .guided-research-provider {
    justify-items: start;
  }

  .studio-pipeline {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 18px !important;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 14px !important;
  }

  .studio-pipeline > .guided-pipeline-card-shell {
    min-width: 0;
    min-height: 142px;
  }

  .studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::after {
    top: 100%;
    left: 50%;
    width: 2px;
    height: 18px;
  }

  .studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::before {
    top: calc(100% + 4px);
    right: auto;
    left: calc(50% - 4px);
    transform: rotate(90deg);
  }

  .guided-estimate-grid,
  .guided-candidate-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .guided-run-bar > .row,
  .guided-run-summary,
  .guided-summary-facts {
    align-items: stretch;
    flex-direction: column !important;
  }

  .guided-summary-status {
    width: 100%;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-studio-border);
  }

  .guided-primary-action,
  .guided-parallel-action {
    width: 100% !important;
  }
}

@media (max-width: 340px) {
  .guided-stepper .wrap,
  .guided-stepper .container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Faithful Direction C shell ------------------------------------------ */
.gradio-container:has(#workspace-tabs) {
  width: 100% !important;
  max-width: none !important;
  padding: 12px !important;
  color: #243047;
  background: #edf1f5 !important;
}

.gradio-container:has(#workspace-tabs) .main.app {
  padding: 0 !important;
}

.gradio-container:has(#workspace-tabs) .main.app > .wrap {
  border: 0 !important;
}

.gradio-container:has(#workspace-tabs) main.contain,
.gradio-container:has(#workspace-tabs) main.contain > .column {
  gap: 0 !important;
}

.gradio-container:has(#workspace-tabs) .block:has(.studio-product-header),
.gradio-container:has(#workspace-tabs) .block:has(.studio-build-intro) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.gradio-container:has(#workspace-tabs) .block:has(.studio-product-header) .html-container {
  padding: 0 !important;
}

.gradio-container:has(#workspace-tabs) .block:has(.studio-build-intro) {
  display: none !important;
}

/* The intended-use notice is a disclaimer, so it stays on screen. It reads as
   a slim strip under the masthead rather than the stacked banner the legacy
   layout used. */
.block:has(.research-notice) {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.block:has(.research-notice) .html-container,
.block:has(.research-notice) .prose {
  margin: 0 !important;
  padding: 0 !important;
}

.research-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 !important;
  padding: 8px 26px !important;
  border: 0 !important;
  border-bottom: 1px solid #e6ebf2 !important;
  border-radius: 0 !important;
  background: var(--ui-studio-soft) !important;
}

.research-notice .notice-title {
  flex: 0 0 auto;
  margin: 0 !important;
  color: #5b6a86 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.research-notice p:not(.notice-title) {
  min-width: 0;
  margin: 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.studio-product-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  min-height: 66px;
  margin: 0 !important;
  padding: 0 25px !important;
  border: 1px solid #dfe4ec;
  border-radius: 18px 18px 0 0;
  color: var(--ui-studio-ink);
  background: var(--ui-studio-surface);
  box-shadow: 0 10px 30px rgba(45, 55, 75, .05);
}

.studio-product-identity,
.studio-product-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.studio-product-mark,
.studio-profile-badge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #ffffff;
  background: #415f99;
  font: 700 12px/1 var(--ui-font-mono);
  letter-spacing: -.02em;
}

.studio-product-identity h1 {
  margin: 0 !important;
  color: var(--ui-studio-ink) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
}

.studio-product-identity p,
.studio-product-profile > span:first-child {
  margin: 2px 0 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 12px !important;
  line-height: 1.2;
}

.studio-product-profile > span:first-child {
  margin: 0 !important;
  color: var(--ui-studio-muted) !important;
  font-weight: 600;
}

.studio-profile-badge {
  width: 28px;
  height: 28px;
  border: 1px solid #d4dbe7;
  border-radius: 50%;
  color: var(--ui-studio-muted);
  background: var(--ui-studio-soft);
  font-size: 11px;
}

#workspace-tabs {
  position: relative;
  gap: 0 !important;
  overflow: visible;
  margin: 0 !important;
  width: 100% !important;
  border: 1px solid #dfe4ec !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: #f7f8fb !important;
  box-shadow: 0 18px 45px rgba(45, 55, 75, .07);
}

#workspace-tabs > .tabitem {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
}

/* The nav pills sit in the masthead, which is two blocks above the tab group
   (masthead + intended-use strip). The shell layout pins them to the viewport
   instead; this offset covers the short-viewport fallback. */
#workspace-tabs > .tab-wrapper {
  position: absolute !important;
  z-index: 12;
  top: -79px;
  left: 50%;
  width: auto !important;
  /* Reserve room for all account tabs plus Gradio's temporary overflow control.
     Its measured tab area excludes that control while recovering from login. */
  min-width: min(480px, 100%);
  justify-content: center;
  transform: translateX(-50%);
}

#workspace-tabs > .tab-wrapper .tab-container,
#workspace-tabs > .tab-wrapper .tab-nav {
  display: flex;
  gap: 2px;
  width: max-content;
  padding: 4px;
  border: 0 !important;
  border-radius: 11px;
  background: #f0f2f6 !important;
}

/* Gradio measures this visible container, not its wrapper. Keep its width
   independent of how many tab buttons the overflow calculation currently shows. */
#workspace-tabs > .tab-wrapper > .tab-container[role="tablist"] {
  width: 100%;
  justify-content: center;
}

#workspace-tabs > .tab-wrapper button {
  min-width: 62px !important;
  min-height: 32px !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--ui-studio-muted) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

#workspace-tabs > .tab-wrapper button.selected {
  color: #344562 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 5px rgba(52, 69, 98, .12) !important;
}

.studio-workbench {
  display: grid !important;
  grid-template-columns: 205px minmax(0, 1fr) 300px;
  gap: 0 !important;
  min-height: 0;
  margin: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7f8fb !important;
  box-shadow: none !important;
}

.studio-workbench > .column {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.studio-workflow {
  position: static !important;
  padding: 27px 21px !important;
  border: 0 !important;
  border-right: 1px solid #e2e6ed !important;
  background: #fbfcfd !important;
}

.studio-primary {
  padding: 27px 25px 32px !important;
  border: 0 !important;
  background: #f7f8fb !important;
}

.studio-assistant {
  position: static !important;
  grid-column: auto;
  max-height: none;
  padding: 25px 20px 20px !important;
  overflow-x: hidden;
  border: 0 !important;
  border-left: 1px solid #e2e6ed !important;
  background: #fbfcfd !important;
}

.guided-rail-label {
  margin: 0 8px 15px !important;
  color: var(--ui-studio-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
}

.guided-stepper,
.guided-stepper.fieldset,
fieldset.guided-stepper,
.guided-stepper fieldset,
.guided-stepper .wrap,
.guided-stepper .container {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.studio-workflow .form {
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guided-stepper .wrap,
.guided-stepper .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
}

.guided-stepper label:has(input) {
  min-height: 45px;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  color: var(--ui-studio-muted) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600;
}

.guided-stepper label:has(input):hover {
  color: #3f4c64 !important;
  background: #f2f4f7 !important;
}

.guided-stepper label:has(input:checked) {
  border-color: #d8e0ed !important;
  color: #3f5680 !important;
  background: #eef3fb !important;
}

/* Numbered stepper: the native radio stays in the DOM for keyboard and
   assistive-technology use, but the visible control is a numbered badge drawn
   from a counter so the rail reads as a workflow rather than a form. */
.guided-stepper .wrap,
.guided-stepper .container {
  counter-reset: studio-step;
}

.guided-stepper label:has(input) {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  counter-increment: studio-step;
}

.guided-stepper label:has(input)::before {
  content: counter(studio-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d8deea;
  border-radius: 9px;
  color: var(--ui-studio-muted);
  background: #ffffff;
  font-family: var(--ui-font-mono);
  font-size: 11px;
  font-weight: 700;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.guided-stepper label:has(input:checked)::before {
  border-color: #708fc5;
  color: #ffffff;
  background: #456aa9;
  box-shadow: 0 5px 12px rgba(69, 106, 169, .2);
}

.guided-stepper input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.guided-stepper label:has(input:focus-visible) {
  outline: 2px solid #6c8cc4;
  outline-offset: 1px;
}

.guided-rail-note {
  display: grid;
  gap: 6px;
  margin: 23px 4px 0;
  padding: 14px;
  border: 1px solid #e2e6ed !important;
  border-radius: 11px;
  color: var(--ui-studio-muted);
  background: #f5f7f9;
}

.guided-rail-note strong {
  color: #3f4c62;
  font-size: 12px;
}

.guided-rail-note span {
  font-size: 12px;
  line-height: 1.45;
}

.guided-canvas-heading {
  align-items: center;
  margin: 0 0 20px;
}

.guided-canvas-heading h2 {
  margin: 0 !important;
  color: #273248 !important;
  font-size: 28px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em;
}

.guided-canvas-heading p {
  max-width: 570px;
  margin: 6px 0 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 13px;
  line-height: 1.45;
}

.guided-quality-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #c8ddd4;
  border-radius: 999px;
  color: #527565 !important;
  background: #edf6f2;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.guided-pipeline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.guided-pipeline-meta strong {
  color: #4b5870;
  font-size: 12px;
}

.guided-pipeline-meta span {
  color: var(--ui-studio-muted);
  font-size: 11px;
}

.studio-pipeline {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 11px !important;
  align-items: stretch !important;
  margin: 0 0 18px !important;
  padding: 17px 17px 22px !important;
  overflow: visible;
  border: 1px solid #e1e5ec !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(52, 65, 88, .025) !important;
}

.studio-pipeline > .guided-pipeline-card-shell {
  position: relative;
  min-width: 0;
  min-height: 184px;
  overflow: visible;
  border: 1px solid #e1e5ec !important;
  border-top: 3px solid #5f91c7 !important;
  border-radius: 11px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(2) {
  border-top-color: #7c8fc4 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(3) {
  border-top-color: #997eb7 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(4) {
  border-top-color: #b48096 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(5) {
  border-top-color: #b98667 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(6) {
  border-top-color: #759c88 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::after {
  top: 68px;
  left: 100%;
  width: 11px;
  height: 1px;
  background: #ccd3de;
}

.studio-pipeline > .guided-pipeline-card-shell:not(:last-child)::before {
  top: 61px;
  right: -8px;
  color: #a8b0be;
  font-size: 12px;
}

.guided-pipeline-card-content {
  min-height: 181px;
  padding: 15px 13px 12px;
  color: #2f3a50;
}

.guided-node-topline {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.guided-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #526fa4;
  background: #eaf0f8;
  font: 650 11px/1 var(--ui-font-mono);
}

.guided-node-stage-name {
  min-width: 0;
  color: var(--ui-studio-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-node-source {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ui-studio-muted);
  font: 600 10px/1.2 var(--ui-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-pipeline-card-content h4 {
  display: -webkit-box;
  min-height: 37px;
  margin: 12px 0 5px !important;
  overflow: hidden;
  color: #303b50 !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guided-node-parameter {
  display: block;
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  color: var(--ui-studio-muted) !important;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-node-footer {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid #eaedf2;
}

.guided-node-shape {
  display: none;
}

.guided-node-compatibility {
  color: var(--ui-studio-muted) !important;
  font-size: 10px;
}

.guided-node-compatibility b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #ffffff;
  background: #6d9a86;
  font-size: 10px;
}

.guided-node-compatibility.review b {
  background: #b89754;
}

.guided-node-compatibility.blocked b {
  background: #aa6262;
}

.guided-pipeline-card-content.is-selected {
  background: #eef3fb;
  box-shadow: inset 0 0 0 1px #6680ad;
}

.guided-pipeline-card-content.is-selected h4 {
  padding-right: 0;
}

.studio-pipeline > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:hover) {
  border-color: #aab8ce !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(63, 78, 105, .08) !important;
}

.guided-step-panel,
.guided-refinement-box,
.guided-snapshot-output {
  border: 1px solid #e1e5ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.guided-step-panel {
  padding: 17px !important;
}

/* Secure access card ----------------------------------------------------
   The sign-in screen is the first surface a user sees, so it carries the same
   type, surfaces, and controls as the workbench. */
.account-card:not(.account-card .account-card) {
  width: min(432px, 100%);
  max-width: none;
  margin: clamp(40px, 9vh, 92px) auto 40px !important;
  padding: 30px 30px 32px !important;
  border: 1px solid #e2e6ed !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(45, 55, 75, .08) !important;
}

.account-card .account-card,
.account-card .styler,
.account-card .form,
.account-card .block,
.account-card .container,
.account-card .input-container {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Beats the global `label.container.show_textbox_border` rule so the field's
   border is drawn once, on the control itself. */
.account-card label.container.show_textbox_border,
.account-card .container.show_textbox_border {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.account-card .form {
  display: grid !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.account-card h2 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #273248 !important;
  font-size: 22px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em;
}

.account-card .prose p {
  margin: 0 0 4px !important;
  color: var(--ui-studio-muted) !important;
  font-size: 13px !important;
}

.account-card .tab-wrapper .tab-container,
.account-card .tab-wrapper .tab-nav,
.account-card .tab-container,
.account-card .tab-nav {
  gap: 2px;
  margin: 16px 0 4px;
  padding: 4px;
  border: 0 !important;
  border-radius: 11px;
  background: #f0f2f6 !important;
}

.account-card .tab-nav button,
.account-card .tab-container button {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--ui-studio-muted) !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.account-card .tab-nav button.selected,
.account-card .tab-container button.selected {
  color: #344562 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 5px rgba(52, 69, 98, .12) !important;
}

/* The pill treatment replaces the underline Gradio draws on the active tab. */
.account-card .tab-nav button::after,
.account-card .tab-nav button::before,
.account-card .tab-container button::after,
.account-card .tab-container button::before {
  content: none !important;
  display: none !important;
}

.account-card label > span,
.account-card .block > label > span {
  margin-bottom: 6px !important;
  padding: 0 !important;
  color: #5d6a80 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.account-card input[type="text"],
.account-card input[type="password"],
.account-card textarea {
  min-height: 42px !important;
  padding: 10px 13px !important;
  border: 1px solid #cfd7e3 !important;
  border-radius: 9px !important;
  color: #2b3648 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
}

.account-card input[type="text"]:focus,
.account-card input[type="password"]:focus,
.account-card textarea:focus {
  border-color: #526fa6 !important;
  box-shadow: 0 0 0 3px rgba(82, 111, 166, .14) !important;
  outline: 0 !important;
}

.account-card button.primary {
  width: 100%;
  min-height: 44px !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: #456aa9 !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.account-card button.primary:hover {
  background: #3a5c95 !important;
}

/* Runs / Models / Account -----------------------------------------------
   These tabs never received the studio treatment, so they inherited the older
   palette and sat flush against the window edge. Give them the same page
   frame, surfaces, and type as the Build workbench. */
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) {
  gap: 20px !important;
  padding: 28px clamp(20px, 2.6vw, 38px) 44px !important;
  background: #f7f8fb !important;
}

#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .panel-card,
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .results-shell,
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) > .gr-group,
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) > .row > .column > .gr-group {
  border: 1px solid #e2e6ed !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .panel-card {
  padding: 22px !important;
}

/* Gradio renders a group as two nested wrappers plus a `.styler`, so the
   surface has to be declared once on the outer wrapper and cleared on the
   rest — otherwise the card shows a doubled border and the old slate band. */
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .panel-card .panel-card,
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .panel-card .styler,
#workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) .results-shell .styler {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.account-strip {
  gap: 14px !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border: 0 !important;
  border-top: 1px solid #e6e9ef !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#workspace-tabs > .tabitem .guided-workbench-heading {
  gap: 20px;
  align-items: flex-end;
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid #e2e6ed;
}

#workspace-tabs > .tabitem .guided-workbench-heading h2 {
  margin: 0 !important;
  color: #273248 !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -.03em;
}

#workspace-tabs > .tabitem .guided-workbench-heading > p {
  max-width: 460px;
  margin: 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

#workspace-tabs .gr-dataframe thead th,
#workspace-tabs table thead th {
  font-size: 12px !important;
}

/* Gradio's flex containers wrap by default, which turns any height-bounded
   column into a second, off-screen column instead of a scroll region. */
.studio-workbench .column,
.studio-workbench .gr-group,
.studio-workbench .styler,
.studio-workbench .form,
.studio-runbar .column,
.studio-runbar .gr-group,
.studio-runbar .styler {
  flex-wrap: nowrap !important;
}

.studio-workbench .gr-group,
.studio-workbench .styler,
.guided-step-panel {
  overflow: visible !important;
}

.studio-primary .form {
  gap: 10px !important;
  border: 0 !important;
}

.studio-primary .wrap {
  overflow: hidden;
  border: 1px solid #dce2ea !important;
  border-radius: 9px !important;
  color: #3f4c62 !important;
  background: #ffffff !important;
}

/* An open dropdown list ships with no border and a 1px shadow, so over a light
   panel it reads as loose text lying behind the page rather than a menu in
   front of it — and the option under the pointer is easy to misjudge. Give it
   a real panel and an unambiguous hover target. */
.gradio-container ul.options {
  padding: 4px !important;
  border: 1px solid var(--ui-studio-border) !important;
  border-radius: 10px !important;
  background: var(--ui-studio-surface) !important;
  box-shadow: 0 14px 34px rgba(38, 52, 76, .18),
    0 2px 6px rgba(38, 52, 76, .10) !important;
  /* Gradio fades and slides the list in with a script-driven transition, so
     for a beat the menu is translucent and sitting a few pixels above where it
     will settle. A pointer that lands in that window is ambiguous between an
     option and whatever the menu opened over. There is not always room below
     the field, and when the list opens upward over the data source radios the
     "Lung" row comes to rest exactly on "Upload data" — which is why the
     mis-click reproduced at some widths and not others. Presenting the list at
     its final opacity and offset immediately removes the ambiguous window: the
     menu is either absent or fully painted where it accepts clicks. These
     override the inline style the transition writes. */
  opacity: 1 !important;
  transform: none !important;
}

.gradio-container ul.options li.item {
  border-radius: 7px !important;
  color: var(--ui-studio-ink) !important;
  background: transparent !important;
}

.gradio-container ul.options li.item.active,
.gradio-container ul.options li.item:hover {
  color: var(--ui-studio-ink) !important;
  background: var(--ui-studio-soft) !important;
}

.gradio-container ul.options li.item.selected {
  color: var(--ui-studio-cobalt) !important;
  background: var(--ui-studio-cobalt-soft) !important;
  font-weight: 600;
}

.studio-primary label:has(input[type="radio"]),
.studio-primary label:has(input[type="checkbox"]) {
  color: #566277 !important;
  background: #ffffff !important;
}

.studio-primary label:has(input[type="radio"]):hover,
.studio-primary label:has(input[type="checkbox"]):hover {
  background: #f5f7fa !important;
}

.studio-primary label.selected,
.studio-primary label:has(input[type="radio"]:checked),
.studio-primary label:has(input[type="checkbox"]:checked) {
  color: #3f5680 !important;
  background: #eaf0f9 !important;
}

.studio-primary label.selected span,
.studio-primary label:has(input[type="radio"]:checked) span,
.studio-primary label:has(input[type="checkbox"]:checked) span {
  color: #3f5680 !important;
}

.studio-primary input[type="radio"],
.studio-primary input[type="checkbox"] {
  border-color: #aeb9ca !important;
  background: #ffffff !important;
}

.studio-primary input[type="radio"]:checked,
.studio-primary input[type="checkbox"]:checked {
  border-color: #526fa6 !important;
  background: #526fa6 !important;
}

.guided-step-heading > span {
  color: var(--ui-studio-muted) !important;
  font-size: 11px;
}

.guided-step-heading h3 {
  margin-top: 4px !important;
  color: #303b50 !important;
  font-size: 18px !important;
}

.guided-step-heading p {
  color: var(--ui-studio-muted) !important;
  font-size: 13px;
}

.guided-dossier-output,
.guided-dossier-output > div,
.guided-dossier-output .html-container,
.guided-dossier-output .prose {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.guided-dossier-empty,
.guided-dossier {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.guided-empty-agent-heading,
.guided-dossier-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e5e9ef;
}

.guided-research-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #526a93;
  background: #e8eef7;
  font: 700 11px/1 var(--ui-font-mono);
}

.guided-empty-agent-heading h3,
.guided-dossier-heading h3 {
  margin: 0 !important;
  color: #303b50 !important;
  font-size: 16px !important;
  line-height: 1.2;
}

.guided-empty-agent-heading small,
.guided-research-provider small {
  display: block;
  margin-top: 3px;
  color: var(--ui-studio-muted);
  font-size: 11px;
}

.guided-agent-intro {
  margin: 0 0 14px !important;
  color: var(--ui-studio-muted) !important;
  font-size: 13px;
  line-height: 1.5;
}

.guided-empty-insight,
.guided-research-insight {
  display: block;
  padding: 13px !important;
  border: 1px solid #e1e5ec !important;
  border-left: 3px solid #879bbd !important;
  border-radius: 10px;
  background: #ffffff;
}

.guided-empty-insight span,
.guided-insight-label {
  color: var(--ui-studio-muted) !important;
  font: 700 10px/1.2 var(--ui-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guided-empty-insight h4,
.guided-research-insight h4 {
  margin: 6px 0 4px !important;
  color: #3a465b !important;
  font-size: 14px !important;
  line-height: 1.35;
}

.guided-empty-insight p,
.guided-research-insight p {
  margin: 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 12px;
  line-height: 1.5;
}

.guided-research-insights {
  display: grid;
  gap: 8px;
}

.guided-research-insight[data-insight-type="recommendation"] {
  border-left-color: #7188af !important;
}

.guided-research-insight[data-insight-type="tradeoff"] {
  border-left-color: #b39154 !important;
}

.guided-research-insight[data-insight-type="assumption"] {
  border-left-color: #719481 !important;
}

.guided-research-insight[data-insight-type="warning"] {
  border-left-color: #a86868 !important;
}

.guided-provider-note {
  margin: 13px 2px 0 !important;
  color: var(--ui-studio-muted) !important;
  font-size: 10px !important;
  line-height: 1.45;
}

.guided-refinement-box {
  margin-top: auto;
  padding: 12px !important;
  background: #f7f8fa !important;
}

.guided-refinement-box label span {
  color: var(--ui-studio-muted) !important;
  font-size: 12px !important;
}

.guided-refinement-box textarea {
  min-height: 50px !important;
  border-color: #dce2ea !important;
  color: #3c485d !important;
  background: #ffffff !important;
  font-size: 13px !important;
}

.guided-refinement-box button {
  min-height: 38px !important;
  font-size: 12px !important;
}

.studio-runbar {
  position: static;
  z-index: auto;
  min-height: 78px;
  margin: 0 !important;
  padding: 13px 23px !important;
  overflow: hidden;
  border: 0 !important;
  border-top: 1px solid #e1e5ec !important;
  border-radius: 0 0 18px 18px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.studio-runbar > .row {
  min-height: 50px;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.studio-runbar .guided-primary-action,
.studio-runbar .guided-parallel-action {
  min-width: 150px !important;
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

.guided-summary-status > span {
  color: var(--ui-studio-muted) !important;
  font-size: 10px;
}

.guided-summary-status strong,
.guided-summary-facts > span {
  color: #3c485c !important;
  font-size: 12px;
}

.guided-summary-facts small {
  color: var(--ui-studio-muted) !important;
  font-size: 10px;
}

/* Direction C flat hierarchy ----------------------------------------- */
.gradio-container:has(#workspace-tabs) {
  padding: 0 !important;
  background: #f7f8fb !important;
}

.gradio-container:has(#workspace-tabs) .main.app,
.gradio-container:has(#workspace-tabs) .main.app > .wrap,
.gradio-container:has(#workspace-tabs) main.contain,
.gradio-container:has(#workspace-tabs) main.contain > .column {
  border: 0 !important;
  border-radius: 0 !important;
  background: #f7f8fb !important;
  box-shadow: none !important;
}

/* Gradio caps `.main.app` at 1280px. The studio shell is an application
   surface, not an article column, so it takes the full window (capped so the
   pipeline track does not stretch absurdly on ultrawide displays). */
.gradio-container:has(#workspace-tabs) .main.app {
  width: 100% !important;
  max-width: min(1760px, 100%) !important;
  margin: 0 auto !important;
}

.studio-product-header {
  border: 0 !important;
  border-bottom: 1px solid #e1e5ec !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#workspace-tabs,
#workspace-tabs > .tabitem {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.studio-workbench,
.studio-primary,
.studio-workflow,
.studio-assistant {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.studio-primary .block:has(.guided-canvas-heading),
.studio-workflow .block:has(.guided-rail-label),
.studio-workflow .block:has(.guided-rail-note) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guided-canvas-heading {
  padding: 0;
  background: transparent;
}

.guided-rail-note {
  margin: 24px 8px 0;
  padding: 16px 0 0;
  border: 0 !important;
  border-top: 1px solid #e3e7ed !important;
  border-radius: 0;
  background: transparent;
}

.studio-pipeline {
  padding: 18px !important;
  border: 1px solid #e2e6ed !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  /* The canvas is a height-bounded flex column, so the track was shrunk to fit
     alongside the step panel and became its own scroller — at 1512x900 that
     clipped it to 122px and hid the whole second row. The track keeps its
     natural height; the canvas column is what scrolls. */
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.studio-pipeline > .guided-pipeline-card-shell {
  border: 1px solid #e5e9f0 !important;
  border-top: 3px solid #5f91c7 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  /* Clip the card body to the shell's radius; without this the square inner
     corners show through and the card reads as two stacked rectangles. */
  overflow: hidden !important;
  transition: transform .14s ease, box-shadow .14s ease,
    border-color .14s ease, background-color .14s ease;
}

/* Gradio inserts a `.styler` between the group and its content, and that
   element carries a slate fill of its own. Left alone it paints over the card
   surface, which is why only the selected card — the one that sets its own
   background — looked right. */
.studio-pipeline .guided-pipeline-card-shell .guided-pipeline-card-shell,
.studio-pipeline .styler,
.studio-pipeline .guided-pipeline-card-output,
.studio-pipeline .guided-pipeline-card-output > div,
.studio-pipeline .html-container,
.studio-pipeline .prose {
  background: transparent !important;
}

.studio-pipeline .guided-pipeline-card-shell .guided-pipeline-card-shell {
  overflow: hidden !important;
}

/* The surface and the selected tint live on the card body, not the shell:
   several older rules target the shell (a `.gr-group`) with `!important` and
   win the cascade there. The shell keeps the border, radius and clipping. */
.studio-pipeline .guided-pipeline-card-content {
  background: #fbfcfe;
  box-shadow: none;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.studio-pipeline .guided-pipeline-card-content.is-selected {
  background: #edf3fc;
  box-shadow: inset 0 0 0 1px #9db6dd;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(2) {
  border-top-color: #7c8fc4 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(3) {
  border-top-color: #997eb7 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(4) {
  border-top-color: #b48096 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(5) {
  border-top-color: #b98667 !important;
}

.studio-pipeline > .guided-pipeline-card-shell:nth-child(6) {
  border-top-color: #759c88 !important;
}

/* Hover only lifts the card. The stage accent along the top edge is never
   recoloured, so each stage keeps its identity in every state. */
.studio-pipeline > .guided-pipeline-card-shell:has(.guided-pipeline-node-hitarea:hover) {
  border-right-color: #ccd7e7 !important;
  border-bottom-color: #ccd7e7 !important;
  border-left-color: #ccd7e7 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(63, 78, 105, .10) !important;
}

.guided-step-panel {
  padding: 24px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guided-step-panel > .form,
.guided-step-panel > .styler,
.guided-step-panel > .block,
.guided-step-panel .form {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guided-step-panel > .form,
.guided-step-panel > .styler {
  padding: 0 !important;
}

.guided-step-heading {
  border-bottom-color: #dce2e9;
}

.guided-empty-insight,
.guided-research-insight {
  border: 0 !important;
  border-left: 3px solid #879bbd !important;
  border-radius: 0;
  background: #f5f7fa;
}

.guided-provider-note {
  margin: 16px 0 0 !important;
  padding: 12px 0 0;
  border: 0 !important;
  border-top: 1px solid #e3e7ed !important;
  border-radius: 0;
  background: transparent;
}

.guided-refinement-box,
.guided-refinement-box > .form {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Direction C canvas readability ------------------------------------ */
.guided-pipeline-card-content {
  min-height: 176px;
  padding: 14px 13px 12px;
}

.guided-node-topline {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-content: start !important;
}

.guided-node-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 10px;
}

.guided-node-stage-name {
  display: block;
  min-height: 0;
  overflow: hidden;
  color: var(--ui-studio-muted) !important;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The decision source belongs on the card's bottom rail beside the
   compatibility chip, but the markup nests it in the top line. Pin it there
   instead of adding a row that squeezes the stage label. */
.guided-node-source {
  position: absolute;
  right: auto;
  bottom: 11px;
  left: 13px;
  max-width: calc(100% - 46px);
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The card's bottom rail only has room for the compatibility glyph. The word
   stays in the accessibility tree (and in the card's aria-label) but is not
   painted, matching the mock's single-mark treatment. */
.studio-pipeline .guided-node-compatibility {
  gap: 0;
  font-size: 0 !important;
}

.studio-pipeline .guided-node-compatibility b {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.studio-pipeline .guided-pipeline-card-content h4 {
  min-height: 51px;
  margin: 11px 0 4px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 3;
}

.guided-node-parameter {
  display: block;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-node-footer {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eaedf2;
}

/* Direction C pipeline polish --------------------------------------- */
.studio-pipeline > .guided-pipeline-card-shell::before,
.studio-pipeline > .guided-pipeline-card-shell::after {
  content: none !important;
  display: none !important;
}

.studio-pipeline .guided-pipeline-card-output,
.studio-pipeline .guided-pipeline-card-content {
  position: relative;
  z-index: 1;
}

.studio-pipeline .guided-pipeline-node-hitarea {
  z-index: 2;
  background: transparent !important;
}

.studio-pipeline .guided-node-source {
  display: block;
  min-height: 0;
  padding-left: 1px;
  overflow: hidden;
  color: var(--ui-studio-muted) !important;
  font-family: var(--ui-font-sans);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

/* The rest of the studio app shell (page-level sizing and scrolling) lives in
   RESPONSIVE_HEAD_HTML. Gradio rewrites selectors passed through `css=` by
   prefixing them with `.gradio-container … .contain`, which silently kills any
   rule aimed at the container itself or at <html>/<body>. */

/* Six stages read as one left-to-right track while the canvas can hold six
   ~130px cards. Below that the stage labels start clipping, so the track wraps
   to two rows of three rather than shrinking the type. */
@media (max-width: 1439px) {
  .studio-pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 14px !important;
  }

  /* Wider cards fit their titles on one line, so the three-line reservation
     that keeps the six-across row even would just add dead space. */
  .studio-pipeline > .guided-pipeline-card-shell,
  .studio-pipeline .guided-pipeline-card-content {
    min-height: 148px;
  }

  .studio-pipeline .guided-pipeline-card-content h4 {
    min-height: 0;
    font-size: 14px !important;
    -webkit-line-clamp: 2;
  }

  .studio-pipeline .guided-node-stage-name {
    font-size: 10px;
    letter-spacing: .07em;
  }

  .studio-pipeline > .guided-pipeline-card-shell:nth-child(3)::after,
  .studio-pipeline > .guided-pipeline-card-shell:nth-child(3)::before {
    display: none;
  }
}

/* The assistant rail is 300px: its heading has to stack instead of running the
   title and the provider badge side by side. */
.studio-assistant .guided-dossier-heading {
  display: grid !important;
  gap: 9px;
  align-items: start;
  margin-bottom: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3e7ed;
}

.studio-assistant .guided-dossier-heading h3 {
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.studio-assistant .guided-research-provider {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.studio-assistant .guided-research-provider small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-assistant .guided-refinement-box {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.studio-assistant .guided-refinement-box:has(> .guided-refinement-box) {
  margin-top: auto;
  padding-top: 20px !important;
  border-top: 1px solid #e3e7ed !important;
}

.studio-assistant .guided-refinement-box > .guided-refinement-box {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
}

.studio-assistant .guided-refinement-box .form,
.studio-assistant .guided-refinement-box .block,
.studio-assistant .guided-refinement-box .wrap,
.studio-assistant .guided-refinement-box .container,
.studio-assistant .guided-refinement-box label,
.studio-assistant .guided-refinement-box .styler,
.studio-assistant .guided-refinement-box .input-container {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.studio-assistant .guided-refinement-box label span {
  position: static !important;
  display: block;
  margin-bottom: 7px;
  padding: 0 !important;
  color: #657187 !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700;
}

.studio-assistant .guided-refinement-box textarea {
  min-height: 88px !important;
  padding: 12px 13px !important;
  border: 1px solid #cfd7e3 !important;
  border-radius: 8px !important;
  color: #354157 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.studio-assistant .guided-refinement-box textarea:focus {
  border-color: #526fa6 !important;
  box-shadow: 0 0 0 3px rgba(82, 111, 166, .12) !important;
  outline: 0 !important;
}

.studio-assistant .guided-refinement-box .guided-secondary-action,
.studio-assistant .guided-refinement-box .guided-secondary-action button {
  min-height: 40px !important;
  margin-top: 9px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: #526fa6 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.studio-assistant .guided-refinement-box .guided-secondary-action:hover,
.studio-assistant .guided-refinement-box .guided-secondary-action button:hover {
  background: #445f91 !important;
}

/* Run bar --------------------------------------------------------------
   Gradio nests the group as .studio-runbar > .studio-runbar > .styler > .row,
   so the inner wrappers have to be flattened before the bar can lay out. */
.studio-runbar {
  display: flex !important;
  align-items: center;
  min-height: 82px;
  padding: 0 26px !important;
  border-radius: 0 !important;
  border-top: 1px solid #e1e5ec !important;
  background: #ffffff !important;
}

.studio-runbar .studio-runbar,
.studio-runbar .styler {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.studio-runbar .row {
  display: flex !important;
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  align-items: center !important;
  min-width: 0;
}

.studio-runbar .guided-run-summary-output {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.guided-run-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  align-items: center;
  min-width: 0;
}

.guided-summary-status {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  padding-left: 13px;
  border-left: 3px solid #6d9a86;
}

.guided-summary-facts {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
}

.guided-summary-facts > span {
  display: grid;
  gap: 1px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 18px;
  border-left: 1px solid #e6e9ef;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-summary-facts small {
  order: -1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.studio-runbar .guided-primary-action,
.studio-runbar .guided-parallel-action {
  flex: 0 0 auto;
  min-width: 158px !important;
  min-height: 40px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

@media (max-width: 1160px) {
  .studio-workbench {
    grid-template-columns: 176px minmax(0, 1fr) 250px;
  }

  .studio-primary {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .studio-assistant {
    grid-column: auto;
    padding-right: 15px !important;
    padding-left: 15px !important;
    border-top: 0 !important;
    border-left: 1px solid #e2e6ed !important;
  }

  .studio-pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .studio-pipeline > .guided-pipeline-card-shell:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 980px) {
  .studio-workbench {
    grid-template-columns: 136px minmax(0, 1fr) 220px;
  }

  .studio-workflow {
    padding: 22px 12px !important;
  }

  .studio-primary {
    padding: 22px 16px 28px !important;
  }

  .studio-assistant {
    padding: 22px 12px 18px !important;
  }

  .guided-stepper label:has(input) {
    padding-right: 5px !important;
    padding-left: 5px !important;
    font-size: 11px !important;
  }

  .guided-stepper input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-right: 3px !important;
  }

  .guided-canvas-heading h2 {
    font-size: 19px !important;
  }

  .guided-quality-badge {
    display: none;
  }
}

@media (max-width: 760px) {
  .gradio-container:has(#workspace-tabs) {
    padding: 10px !important;
  }

  .studio-product-header {
    padding: 0 16px !important;
  }

  .studio-product-profile > span:first-child {
    display: none;
  }

  /* Below this width the masthead has no spare room to host the nav, and the
     notice strip wraps to an unpredictable height, so the pills return to
     normal flow above the workspace. */
  #workspace-tabs > .tab-wrapper {
    position: static !important;
    top: auto;
    right: auto;
    left: auto;
    padding: 10px 16px 0;
    transform: none;
  }

  #workspace-tabs > .tab-wrapper .tab-container,
  #workspace-tabs > .tab-wrapper .tab-nav {
    width: 100%;
  }

  .studio-workbench {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .studio-workflow {
    border-right: 1px solid #e2e6ed !important;
    border-bottom: 0 !important;
  }

  .studio-assistant {
    grid-column: 1 / -1;
    border-top: 1px solid #e2e6ed !important;
    border-left: 0 !important;
  }
}

@media (max-width: 620px) {
  .studio-product-header {
    justify-content: center;
    height: auto;
    min-height: 66px;
    padding: 10px 13px !important;
  }

  .studio-product-profile {
    display: none;
  }

  #workspace-tabs > .tab-wrapper {
    padding: 10px 13px 0;
  }

  .studio-workbench {
    display: flex !important;
    flex-direction: column !important;
  }

  .studio-workflow,
  .studio-primary,
  .studio-assistant {
    width: 100% !important;
    padding: 17px !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .studio-workflow {
    border-bottom: 1px solid #e2e6ed !important;
  }

  .guided-stepper .wrap,
  .guided-stepper .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .guided-canvas-heading {
    align-items: flex-start;
  }

  .guided-quality-badge {
    display: none;
  }

  .studio-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .studio-pipeline > .guided-pipeline-card-shell:nth-child(even)::after {
    display: none;
  }

  .studio-runbar .row,
  .guided-run-summary,
  .guided-summary-facts {
    align-items: stretch;
    flex-direction: column !important;
  }

  .guided-summary-facts > span {
    padding: 0;
    border-left: 0;
  }

  .studio-runbar .guided-primary-action,
  .studio-runbar .guided-parallel-action {
    width: 100% !important;
  }
}

/* Workbench readiness repair ----------------------------------------
   The pipeline is an evidence grid, not a compressed process ribbon. Three
   columns preserve the six-stage sequence while leaving every field readable. */
.studio-pipeline {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  overflow-x: hidden !important;
}

/* The reserved heights below keep the footers aligned across the row. They are
   sized to the text that actually appears, so a short field does not hold open
   space it never uses and push the step form off the first screen. Nothing is
   clamped: every field still wraps to as many lines as it needs. */
.studio-pipeline > .guided-pipeline-card-shell,
.studio-pipeline .guided-pipeline-card-content {
  min-width: 0;
  min-height: 178px;
}

.studio-pipeline .guided-pipeline-card-content {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  padding: 16px 16px 14px;
}

.studio-pipeline .guided-node-topline {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

.studio-pipeline .guided-node-stage-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.studio-pipeline .guided-pipeline-card-content h4 {
  display: block !important;
  min-height: 36px;
  margin: 11px 0 7px !important;
  overflow: visible;
  font-size: 14px !important;
  line-height: 1.35 !important;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.studio-pipeline .guided-node-parameter {
  display: block;
  min-height: 20px;
  margin: 0 0 7px !important;
  overflow: visible;
  color: #647087 !important;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.studio-pipeline .guided-node-shape {
  display: block !important;
  width: 100%;
  max-width: none;
  min-height: 16px;
  margin: 0 0 9px !important;
  overflow: visible;
  color: var(--ui-studio-muted) !important;
  font-size: 10.5px;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.studio-pipeline .guided-node-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
}

.studio-pipeline .guided-node-source {
  position: static;
  inset: auto;
  display: block;
  max-width: none;
  margin: 0 !important;
  overflow: visible;
  color: #65728a !important;
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.studio-pipeline .guided-node-compatibility {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  font-size: 10px !important;
  line-height: 1.2;
}

.guided-agent-status-grid,
.guided-reflection-sections,
.guided-next-experiment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.guided-agent-status-grid article,
.guided-reflection-sections article,
.guided-next-experiment-card {
  padding: 14px;
  border: 1px solid #cbd6dc;
  border-radius: 10px;
  background: #fff;
}

.guided-source-badge,
.guided-verification-badge,
.guided-metric-kind {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e7f2f6;
  color: #164c63;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.guided-verification-badge.rejected,
.guided-verification-badge.incompatible,
.guided-candidate-card.non-executable > .guided-selection-state {
  background: #fff0ee;
  color: #8b2b22;
}

.guided-candidate-card.non-executable {
  border-color: #d8aaa4;
  background: #fffafa;
}

.guided-next-experiment-card.suggestion-only {
  border-style: dashed;
  background: #f7f9fa;
}

.guided-next-experiment-card h5,
.guided-reflection-sections h5 {
  margin: 12px 0 5px;
  color: #3f5260;
  font-size: 12px;
}

.guided-reflection-empty {
  padding: 18px;
  border: 1px dashed #b8c7cf;
  border-radius: 10px;
  background: #f8fafb;
}

@media (max-width: 980px) {
  .guided-agent-status-grid,
  .guided-reflection-sections,
  .guided-next-experiment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-pipeline {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 440px) {
  .studio-pipeline {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
"""

RESPONSIVE_HEAD_HTML = """
<script>
/* The studio surfaces are a light-only design. Gradio adds `dark` to <body>
   whenever the OS prefers dark, which leaves its dark text tokens painting on
   the workbench's white panels. Pin the app to light instead. */
(function () {
  /* Hugging Face embeds the Space in an iframe whose height is calculated from
     this document. A viewport-height shell inside that auto-sized iframe feeds
     its new height back into the next measurement and grows without bound.
     Keep the fixed desktop shell for direct visits, and use document scrolling
     when the app is embedded. */
  document.documentElement.classList.toggle(
    "automl-embedded",
    window.self !== window.top
  );

  if (window.__automlLightThemePinned) return;
  window.__automlLightThemePinned = true;

  function pinLight() {
    var body = document.body;
    if (body && body.classList.contains("dark")) body.classList.remove("dark");
    var root = document.documentElement;
    if (root && root.classList.contains("dark")) root.classList.remove("dark");
  }

  pinLight();
  document.addEventListener("DOMContentLoaded", pinLight);
  new MutationObserver(pinLight).observe(document.documentElement, {
    attributes: true,
    childList: true,
    subtree: false,
    attributeFilter: ["class"]
  });
  if (document.body) {
    new MutationObserver(pinLight).observe(document.body, {
      attributes: true,
      attributeFilter: ["class"]
    });
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      new MutationObserver(pinLight).observe(document.body, {
        attributes: true,
        attributeFilter: ["class"]
      });
    });
  }
})();
</script>
<style>
/* ---------------------------------------------------------------------
   Page-shell styles.

   Everything passed to Gradio through `css=` is rewritten so each selector is
   prefixed with `.gradio-container … .contain`, which makes rules targeting
   <html>, <body>, `.gradio-container`, `.main.app` or `main.contain` match
   nothing. Those rules have to live here in `head=`, which Gradio injects
   verbatim.
   --------------------------------------------------------------------- */
:root { color-scheme: light; }

/* Gradio's own page chrome renders outside `.contain`. */
.gradio-container > .wrap > footer,
.gradio-container .wrap > footer,
.gradio-container .show-api,
.gradio-container .built-with,
.gradio-container .settings {
  display: none !important;
}

.gradio-container:has(#workspace-tabs) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: #f7f8fb !important;
}

/* Signed out, the workspace tabs are not rendered at all, so the page is just
   the masthead, the notice strip and the access card. It gets the same ground
   as the workbench rather than the default framed panel. */
.gradio-container:not(:has(#workspace-tabs)) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: #f7f8fb !important;
}

html:not(.automl-embedded) .gradio-container:not(:has(#workspace-tabs)) {
  min-height: 100dvh;
}

.gradio-container:not(:has(#workspace-tabs)) .main.app,
.gradio-container:not(:has(#workspace-tabs)) .main.app > .wrap,
.gradio-container:not(:has(#workspace-tabs)) main.contain {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gradio-container:not(:has(#workspace-tabs)) main.contain > .column {
  gap: 0 !important;
}

.gradio-container:has(#workspace-tabs) .main.app {
  width: 100% !important;
  max-width: min(1760px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #f7f8fb !important;
}

.gradio-container:has(#workspace-tabs) .main.app > .wrap,
.gradio-container:has(#workspace-tabs) main.contain {
  border: 0 !important;
  background: #f7f8fb !important;
}

.gradio-container:has(#workspace-tabs) main.contain > .column,
.gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem > .column {
  gap: 0 !important;
}

/* Studio app shell: a fixed masthead, a body that fills the window, and a run
   bar pinned to the bottom edge. Only the three workbench rails scroll. */
@media (min-width: 981px) and (min-height: 700px) {
  html:not(.automl-embedded):has(#workspace-tabs),
  html:not(.automl-embedded) body:has(#workspace-tabs),
  html:not(.automl-embedded) body:has(#workspace-tabs) > gradio-app {
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs),
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .main.app,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .main.app > .wrap,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) main.contain,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) main.contain > .column,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem > .column {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Gradio toggles tab panels with an inline `display`, so this one must not
     force a display value or every panel renders at once. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem {
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs),
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .main.app,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .main.app > .wrap,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) main.contain {
    overflow: hidden !important;
  }

  /* The workspace nav pills are positioned over the masthead from inside the
     tab group, so nothing between them may clip. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) main.contain > .column,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem > .column {
    overflow: visible !important;
  }

  /* The masthead and the run bar hold their size; the workbench absorbs the
     remaining height. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .block:has(.studio-product-header),
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .block:has(.research-notice),
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .studio-runbar {
    flex: 0 0 auto;
  }

  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .studio-workbench {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  /* Gradio columns default to `flex-wrap: wrap`; once the rails have a bounded
     height that silently spills their content into a second, off-screen
     column instead of scrolling. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .studio-workflow,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .studio-primary,
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) .studio-assistant {
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Tabs other than Build are ordinary documents: let them scroll as one. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tabitem > .column:not(:has(.studio-workbench)) {
    display: block !important;
    overflow-y: auto !important;
  }

  /* The nav pills belong in the masthead, but they live inside the tab group
     further down the DOM. Pinning them to the viewport keeps them centred on
     the masthead regardless of how tall the notice strip wraps; the shell
     itself never scrolls, so nothing can drift out from under them. */
  html:not(.automl-embedded) .gradio-container:has(#workspace-tabs) #workspace-tabs > .tab-wrapper {
    position: fixed !important;
    z-index: 40;
    top: 17px;
    right: auto !important;
    bottom: auto;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 800px) {
  body {
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .gradio-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  .gradio-container .main.app {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px 28px !important;
  }
  .gradio-container .main.app > .wrap,
  .gradio-container main.contain {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
</style>
<script>
(function () {
  if (window.__automlRunCopyReady) return;
  window.__automlRunCopyReady = true;

  function fallbackCopy(value) {
    var input = document.createElement("textarea");
    input.value = value;
    input.setAttribute("readonly", "");
    input.style.position = "fixed";
    input.style.opacity = "0";
    document.body.appendChild(input);
    input.select();
    var copied = document.execCommand("copy");
    document.body.removeChild(input);
    if (!copied) throw new Error("Copy command was rejected");
  }

  document.addEventListener("click", function (event) {
    var button = event.target.closest && event.target.closest(".run-id-copy");
    if (!button) return;
    var value = button.getAttribute("data-copy-value") || "";
    if (!value) return;
    var operation = navigator.clipboard && navigator.clipboard.writeText
      ? navigator.clipboard.writeText(value)
      : Promise.resolve().then(function () { fallbackCopy(value); });
    operation.then(function () {
      button.textContent = "Copied";
      window.setTimeout(function () { button.textContent = "Copy"; }, 1600);
    }).catch(function () {
      try {
        fallbackCopy(value);
        button.textContent = "Copied";
      } catch (error) {
        button.textContent = "Copy failed";
      }
      window.setTimeout(function () { button.textContent = "Copy"; }, 1600);
    });
  });
})();
</script>
<script>
(function () {
  if (window.__automlMenuTapGuardReady) return;
  window.__automlMenuTapGuardReady = true;

  // Gradio's dropdown selects an option on mousedown -- `__mousedown` on the
  // list calls preventDefault() so the field keeps focus -- and it keeps the
  // list mounted only while that field is document.activeElement.
  //
  // That pairing holds for a mouse, where mousedown precedes any focus change.
  // It breaks for touch: the field blurs on touchstart, before the
  // compatibility mousedown, so the list unmounts before it is ever told which
  // option was pressed. The option is not selected, and the click that ends
  // the tap is delivered by coordinate to whatever the list was covering.
  // There is not always room below the field, and when the list opens upward
  // over the data source radios that is a radio -- so a tap on a dataset name
  // silently switched the source to "Upload data" instead.
  //
  // Two guards. On pointerdown the list is still mounted, so the option is
  // selected there through Gradio's own delegated mousedown handler rather
  // than through a reimplementation of it. Then the trailing click is
  // swallowed, so whatever else happens a tap that began on a menu cannot
  // activate the page behind it.
  var tappedMenuAt = 0;

  function now() {
    return window.performance ? window.performance.now() : Date.now();
  }

  function menuOf(node) {
    return node && node.closest ? node.closest("ul.options") : null;
  }

  document.addEventListener("pointerdown", function (event) {
    var menu = menuOf(event.target);
    tappedMenuAt = menu ? now() : 0;
    if (!menu || event.pointerType === "mouse") return;

    // A mouse never gets here: mousedown precedes any focus change, so
    // Gradio's handler already runs and its preventDefault() holds the focus.
    var option = event.target.closest("li[data-index]");
    if (!option) return;
    option.dispatchEvent(
      new MouseEvent("mousedown", { bubbles: true, cancelable: true })
    );
  }, true);

  document.addEventListener("click", function (event) {
    if (!tappedMenuAt) return;
    // Only the click that ends that press is suppressed. A press that never
    // produces one must not leave the guard armed for an unrelated click
    // later, and a keyboard activation (detail 0) is never the tail of a tap.
    var isTailOfTap = event.detail > 0 && now() - tappedMenuAt < 1000;
    tappedMenuAt = 0;
    if (!isTailOfTap || menuOf(event.target)) return;
    event.preventDefault();
    event.stopPropagation();
  }, true);

  ["pointercancel", "touchcancel"].forEach(function (type) {
    document.addEventListener(type, function () { tappedMenuAt = 0; }, true);
  });
})();
</script>
<script>
(function () {
  if (window.__automlTabOverflowLabelReady) return;
  window.__automlTabOverflowLabelReady = true;

  // When the result tabs do not fit, Gradio collapses the remainder behind an
  // icon-only button with no text and no aria-label, so a screen reader
  // announces it as an unnamed button. The menu itself works; only the name is
  // missing. Gradio mounts it lazily and re-creates it on resize, so name it
  // whenever it appears.
  var LABEL = "More tabs";

  function nameOverflowButtons(root) {
    var menus = (root || document).querySelectorAll(".overflow-menu");
    for (var i = 0; i < menus.length; i++) {
      var buttons = menus[i].querySelectorAll("button");
      for (var j = 0; j < buttons.length; j++) {
        var button = buttons[j];
        if (button.getAttribute("aria-label")) continue;
        if ((button.textContent || "").trim()) continue;
        button.setAttribute("aria-label", LABEL);
        button.setAttribute("title", LABEL);
      }
    }
  }

  function start() {
    nameOverflowButtons(document);
    new MutationObserver(function () {
      nameOverflowButtons(document);
    }).observe(document.body, { childList: true, subtree: true });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }
})();
</script>
"""

# Reuse the proven interaction fixes without importing the legacy shell layout.
STUDIO_INTERACTION_HEAD_HTML = "\n".join(
    re.findall(r"<script>.*?</script>", RESPONSIVE_HEAD_HTML, flags=re.DOTALL)
)


def professional_theme() -> gr.Theme:
    """Return a restrained, high-contrast theme built from system fonts."""

    return gr.themes.Base(
        primary_hue=gr.themes.colors.blue,
        secondary_hue=gr.themes.colors.teal,
        neutral_hue=gr.themes.colors.slate,
        radius_size=gr.themes.sizes.radius_sm,
        font=[
            gr.themes.GoogleFont("IBM Plex Sans", weights=(400, 600, 700)),
            gr.themes.Font("-apple-system"),
            gr.themes.Font("Segoe UI"),
            "sans-serif",
        ],
        font_mono=[
            gr.themes.GoogleFont("IBM Plex Mono", weights=(400, 600)),
            gr.themes.Font("Consolas"),
            "monospace",
        ],
    ).set(
        body_background_fill="#f2f6f7",
        body_text_color="#172b3a",
        block_background_fill="#ffffff",
        block_border_color="#b3c4cd",
        block_label_text_color="var(--ui-ink-label)",
        button_primary_background_fill="#075b82",
        button_primary_background_fill_hover="#163f59",
        button_primary_text_color="#ffffff",
        input_background_fill="#ffffff",
        input_border_color="#7b8f9b",
        shadow_drop="0 1px 2px rgba(16,47,68,.06)",
    )