Spaces:
Sleeping
Sleeping
| """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)", | |
| ) | |