Blame for studio_design.py

"""Public Studio visual system, independent of the legacy/private application CSS."""

import gradio as gr

from ui_design import STUDIO_INTERACTION_HEAD_HTML

def studio_theme() -> gr.Theme:
    """System fonts and restrained defaults, without remote font requests."""
    return gr.themes.Base(
        primary_hue=gr.themes.colors.blue,
        neutral_hue=gr.themes.colors.slate,
        font=["system-ui", "sans-serif"],
        font_mono=["ui-monospace", "monospace"],
    ).set(
        body_background_fill="#f7f8fa",
        body_text_color="#18212f",
        block_label_text_color="#18212f",
        input_border_color="#e1e5eb",
        button_primary_background_fill="#315fd6",
        button_primary_background_fill_hover="#264dac",
        button_primary_text_color="#ffffff",
        shadow_drop="none",
    )


# Document-level rules belong in head: Gradio scopes launch CSS to its app root.
STUDIO_HEAD_HTML = STUDIO_INTERACTION_HEAD_HTML + """
<style>
html { color-scheme: light; background: #f7f8fa; }
body { margin: 0; background: #f7f8fa; }
gradio-app { display: block; min-height: 100vh; }
/* Gradio scopes media selectors beneath .contain; the root is outside it. */
@media (max-width: 1100px) { html .gradio-container { padding: 0 24px 24px !important; } }
@media (max-width: 800px) { html .gradio-container { padding: 0 20px 24px !important; } }
@media (max-width: 480px) { html .gradio-container { padding: 0 16px 20px !important; } }
</style>
"""

STUDIO_CSS = r"""
.gradio-container {
  --studio-canvas: #f7f8fa;
  --studio-surface: #fff;
  --studio-text: #18212f;
  --studio-muted: #5c6778;
  --studio-line: #e1e5eb;
  --studio-action: #315fd6;
  --body-background-fill: var(--studio-canvas);
  --body-text-color: var(--studio-text);
  --body-text-color-subdued: var(--studio-muted);
  --block-background-fill: var(--studio-surface);
  --block-border-color: var(--studio-line);
  --block-radius: 8px;
  --input-background-fill: var(--studio-surface);
  --input-border-color: var(--studio-line);
  --input-radius: 6px;
  --button-primary-background-fill: var(--studio-action);
  --button-primary-background-fill-hover: #264dac;
  --button-primary-text-color: #fff;
  --button-primary-border-color: var(--studio-action);
  --button-secondary-background-fill: #fff;
  --button-secondary-background-fill-hover: #f0f3f8;
  --button-secondary-border-color: var(--studio-line);
  --button-secondary-text-color: var(--studio-text);
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto;
  padding: 0 40px 32px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--studio-text);
  background: var(--studio-canvas);
}
footer { display: none !important; }
.gradio-container .app { gap: 0; }
.gradio-container .main.app { width: 100%; max-width: none; padding: 0; }
.gradio-container .html-container { padding: 0 !important; }
.gradio-container h1, .gradio-container h2, .gradio-container h3,
.gradio-container h4 { color: var(--studio-text); font-family: inherit; letter-spacing: -.025em; }
h1 { font-size: 22px; line-height: 1.2; font-weight: 650; }
h2 { font-size: 28px; line-height: 1.25; font-weight: 650; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 650; }
h4 { font-size: 14px; line-height: 1.5; font-weight: 650; }
p { margin: 0; }
p, li, dd { overflow-wrap: anywhere; }
a { color: var(--studio-action); }
button, input, textarea, select { font: inherit; }
button { border-radius: 6px !important; box-shadow: none !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--studio-action) !important; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.gradio-container .form { border: 0; box-shadow: none; background: transparent; gap: 16px; }
.gradio-container .block { box-shadow: none; }
/* Gradio 6 duplicates Group classes on its inner wrapper. Decorate once. */
.gr-group > .gr-group { flex: 0 0 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; max-width: none; }
.gr-group > .styler { --layout-gap: 16px !important; --form-gap-width: 16px !important; --block-radius: 6px !important; --button-border-width: 1px !important; --button-large-radius: 6px !important; --button-small-radius: 6px !important; background: transparent !important; }
/* A hidden Gradio Group can retain nested visible children. Its step heading
   is the authoritative visibility signal set by the existing navigation event. */
.studio-primary > .guided-step-panel:not(:has(.guided-step-heading)) { display: none !important; }
.account-card:not(:has(h2)) { display: none !important; }
.gradio-container .block:has(> .html-container) { padding: 0 !important; }
.gradio-container .block .wrap > label { border-radius: 6px; }
.gradio-container .block .wrap:has(> .wrap-inner) { border: 1px solid var(--studio-line); border-radius: 6px; min-height: 42px; }
.gradio-container textarea { border: 1px solid var(--studio-line) !important; border-radius: 6px; background: #fff; padding: 12px; }
.gradio-container .html-container > .prose > :first-child { margin-top: 0; }
.gradio-container .html-container > .prose > :last-child { margin-bottom: 0; }
.guided-rail-note { border-top: 1px solid var(--studio-line); padding-top: 16px; font-size: 12px; color: var(--studio-muted); }
.guided-rail-note strong { display: block; color: var(--studio-text); font-size: 12px; margin-bottom: 6px; }
.guided-rail-note span { display: block; }

.gradio-container .gap { gap: 16px; }
.gradio-container .row { gap: 24px; }
.gradio-container .prose { font-size: 15px; }
.gradio-container .prose h3 { font-size: 20px; }
.gradio-container .prose p { color: var(--studio-muted); }
.gradio-container label > span, .gradio-container .block > .label-wrap { color: var(--studio-text); }
.studio-product-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; }
.studio-product-identity { display: flex; align-items: center; gap: 12px; }
.studio-product-identity h1 { margin: 0; font-size: 20px; }
.studio-product-identity p { color: var(--studio-muted); font-size: 12px; margin-top: 3px; }
.studio-product-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ccd6eb; border-radius: 9px; font-size: 12px; font-weight: 750; color: var(--studio-action); background: #edf2fc; }
.studio-product-profile { display: flex; align-items: center; gap: 10px; color: var(--studio-muted); font-size: 12px; }
.studio-profile-badge { display: none; }
.research-notice { display: flex; gap: 12px; border-top: 1px solid var(--studio-line); padding: 10px 0; color: var(--studio-muted); font-size: 11px; }
.notice-title { flex: 0 0 auto; font-weight: 650; }
#workspace-tabs { border: 0; padding: 0; background: transparent; }
#workspace-tabs > .tab-wrapper { border-bottom: 1px solid var(--studio-line); padding: 0; margin-bottom: 28px; }
#workspace-tabs > .tab-wrapper > .tab-container { gap: 28px; }
#workspace-tabs > .tab-wrapper button[role="tab"] { border-radius: 0 !important; border: 0; border-bottom: 2px solid transparent; padding: 14px 2px; background: transparent; font-size: 14px; color: var(--studio-muted); }
#workspace-tabs > .tab-wrapper button[role="tab"][aria-selected="true"] { border-bottom-color: var(--studio-action); color: var(--studio-text); font-weight: 650; }
#workspace-tabs > .tabitem { border: 0; padding: 0; background: transparent; }
.studio-workbench { align-items: flex-start; gap: 40px !important; }
.studio-workflow { flex: 0 0 180px !important; min-width: 0 !important; gap: 20px !important; padding: 4px 0; }
.guided-rail-label, .section-kicker { font-size: 11px; font-weight: 650; color: var(--studio-muted); letter-spacing: .08em; text-transform: uppercase; }
.guided-stepper { padding: 0 !important; background: transparent !important; border: 0 !important; }
.guided-stepper .wrap { flex-direction: column; gap: 4px; counter-reset: step; }
.guided-stepper label { display: flex; align-items: center; gap: 12px; border: 0 !important; border-radius: 6px !important; background: transparent !important; padding: 10px 12px !important; margin: 0 !important; min-height: 42px; color: var(--studio-muted); font-size: 14px; counter-increment: step; }
.guided-stepper label::before { content: counter(step, decimal-leading-zero); font-size: 11px; color: #7b8595; font-variant-numeric: tabular-nums; }
.guided-stepper label:has(input:checked) { background: #eaf0fc !important; color: var(--studio-action); font-weight: 650; }
.guided-stepper label:has(input:checked)::before { color: var(--studio-action); }
.guided-stepper input { position: absolute; opacity: 0; width: 1px; }
.guided-stepper label:has(input:focus-visible) { outline: 2px solid var(--studio-action); outline-offset: 2px; }
.studio-primary { flex: 1 1 0 !important; min-width: 0 !important; }
.guided-step-panel { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; background: var(--studio-surface) !important; padding: 28px !important; }
.guided-step-panel > .styler { background: transparent !important; }
.guided-step-heading { margin-bottom: 12px; }
.guided-step-heading > span { display: block; color: var(--studio-muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.guided-step-heading h3 { font-size: 28px; margin: 0 0 10px; }
.guided-step-heading p { color: var(--studio-muted); max-width: 72ch; font-size: 14px; }
.guided-research-status, .guided-approval-status, .guided-inline-error, .guided-inline-warning { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.guided-approval-status strong, .guided-approval-status span { display: block; }
.guided-approval-status span { color: var(--studio-muted); margin-top: 4px; }
.guided-inline-error { color: #ad3434; }
.guided-inline-warning { color: #8a5a14; }
.studio-assistant { border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: transparent !important; }
.studio-assistant > .label-wrap { padding: 14px 16px; }
.guided-dossier-header h2 { font-size: 22px; }
.guided-dossier-block, .guided-inspector-contract, .guided-candidate-section { margin-top: 20px; }
.guided-dossier-block h4, .guided-inspector-contract h4, .guided-candidate-section h4 { margin: 0 0 8px; }
.guided-dossier-block p, .guided-dossier-block li { font-size: 14px; color: var(--studio-muted); }
.guided-refinement-box { background: transparent !important; border: 0 !important; margin-top: 20px; }
.guided-run-bar { margin-top: 28px; border: 0 !important; border-top: 1px solid var(--studio-line) !important; border-radius: 0 !important; padding: 20px 0 !important; background: transparent !important; }
.guided-run-bar > .styler { background: transparent !important; }
.guided-run-bar .row { align-items: center; }
.guided-run-summary-output { flex: 3 1 540px !important; }
.guided-run-bar button { flex: 1 1 160px !important; min-width: 160px !important; }
.guided-run-summary { display: flex; align-items: flex-start; gap: 24px; font-size: 12px; }
.guided-summary-status { min-width: 120px; }
.guided-summary-status > span, .guided-summary-facts small { display: block; color: var(--studio-muted); font-size: 11px; margin-bottom: 5px; }
.guided-summary-status strong { font-size: 13px; font-weight: 600; }
.guided-summary-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.guided-summary-facts > span:first-child { max-width: 240px; }
.guided-empty-state { padding: 24px 0; color: var(--studio-muted); }
.guided-empty-state h3 { font-size: 16px; margin: 0 0 8px; }
.guided-empty-copy { color: var(--studio-muted); font-size: 13px; }
.guided-candidate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.guided-plan-context { grid-column: 1 / -1; font-size: 13px; color: var(--studio-muted); }
.guided-plan-context h4 { margin: 0; }
.guided-plan-context ul { margin: 8px 0; padding-left: 20px; }
.guided-candidate-card { padding: 20px; border: 1px solid var(--studio-line); border-radius: 10px; min-width: 0; background: #fff; }
.guided-candidate-card.recommended { border-color: #9cb3ed; }
.guided-candidate-card.selected { outline: 2px solid var(--studio-action); outline-offset: 2px; }
.guided-candidate-index { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--studio-muted); margin-bottom: 12px; }
.guided-candidate-card h3 { font-size: 20px; margin: 12px 0; }
.guided-candidate-card p, .guided-candidate-card li { font-size: 13px; line-height: 1.6; }
.guided-candidate-card ul { padding-left: 18px; }
.guided-candidate-rationale { color: var(--studio-muted); }
.guided-recommended-badge, .guided-verification-badge, .guided-source-badge, .guided-node-source, .guided-compatibility { display: inline-block; border: 1px solid var(--studio-line); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; margin: 0 4px 4px 0; }
.guided-recommended-badge { color: var(--studio-action); background: #edf2fc; border-color: #d4dff8; }
.guided-verification-badge.passed, .guided-compatibility.compatible { color: #267350; }
.guided-verification-badge.rejected, .guided-compatibility.incompatible { color: #ad3434; }
.guided-estimate-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.guided-estimate-grid > div { padding: 8px; background: #f7f8fa; border-radius: 6px; font-size: 12px; }
.guided-estimate-grid strong, .guided-estimate-grid small { display: block; }
.guided-candidate-details { margin-top: 20px; border-top: 1px solid var(--studio-line); padding-top: 12px; }
.guided-candidate-details summary { font-size: 13px; font-weight: 600; cursor: pointer; }
.guided-selection-state { border-top: 1px solid var(--studio-line); margin-top: 16px; padding-top: 12px; color: var(--studio-muted); }
.studio-pipeline { gap: 8px !important; }
.guided-pipeline-card-shell { flex: 1 1 120px !important; min-width: 120px !important; border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: #fafbfc !important; }
.guided-pipeline-card-shell > .styler { background: transparent !important; }
.guided-pipeline-card-content { padding: 12px; min-height: 156px; }
.guided-node-topline { display: flex; gap: 6px; font-size: 11px; color: var(--studio-muted); }
.guided-node-icon { display: none; }
.guided-pipeline-card-content h4 { margin: 12px 0 6px; font-size: 13px; overflow-wrap: anywhere; }
.guided-node-parameter, .guided-node-shape { font-size: 11px; color: var(--studio-muted); margin: 4px 0; }
.guided-node-shape { display: none; }
.guided-node-selected { font-size: 10px; color: var(--studio-action); }
.guided-node-footer { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.guided-node-compatibility { font-size: 10px; }
.guided-pipeline-node-hitarea { min-width: 0 !important; font-size: 11px !important; padding: 8px 4px !important; border: 0 !important; border-top: 1px solid var(--studio-line) !important; background: #fff !important; border-radius: 0 !important; }
.guided-node-inspector { margin-top: 12px; }
.guided-inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--studio-line); }
.guided-inspector-heading h3 { margin: 4px 0; font-size: 22px; }
.guided-inspector-heading span { color: var(--studio-muted); font-size: 12px; }
.guided-mapping-row, .guided-detail-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.guided-workbench-heading { margin: 0 0 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.guided-workbench-heading h2 { margin: 6px 0 0; }
.guided-workbench-heading > p { color: var(--studio-muted); font-size: 13px; max-width: 50ch; }
.results-shell { border: 0 !important; background: transparent !important; }
.guided-result-tabs > .tabitem { border: 1px solid var(--studio-line); border-radius: 8px; padding: 24px; background: #fff; }
.guided-result-tabs .tab-container { flex-wrap: wrap; }
.guided-snapshot-heading { margin-bottom: 20px; }
.guided-snapshot-heading span { font-size: 11px; color: var(--studio-muted); text-transform: uppercase; letter-spacing: .06em; }
.guided-snapshot-heading h3 { margin: 6px 0; }
.guided-snapshot { max-width: 100%; }
.guided-snapshot pre, .guided-snapshot code { white-space: pre-wrap; overflow-wrap: anywhere; }
.guided-reflection-metric-grid, .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16px; margin: 16px 0; }
.guided-reflection-metric, .metric-card { padding: 16px; border: 1px solid var(--studio-line); border-radius: 8px; }
.candidate-comparison { overflow-x: auto; }
.candidate-comparison table { width: 100%; border-collapse: collapse; font-size: 13px; }
.candidate-comparison table th, .candidate-comparison table td { border: 0 !important; border-bottom: 1px solid var(--studio-line) !important; padding: 12px !important; text-align: left; }
.candidate-comparison table th { color: var(--studio-muted); background: #f7f8fa; font-weight: 500; }
.studio-model-actions { gap: 8px !important; }
.studio-model-actions button { min-width: 100px !important; font-size: 12px !important; padding: 10px 8px !important; }
.studio-models { gap: 32px !important; }
.studio-model-controls { padding-right: 24px; border-right: 1px solid var(--studio-line); }
.configuration-heading { margin-bottom: 12px; }
.configuration-heading h2 { font-size: 28px; margin: 0 0 12px; }
.configuration-heading p { font-size: 14px; color: var(--studio-muted); }
.inference-output { min-width: 0; }
.visual-prediction-gallery { background: #fff; border: 1px solid var(--studio-line); border-radius: 8px; }
.panel-card, .account-card { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; padding: 28px !important; background: #fff !important; }
.account-card { max-width: 600px; margin: 40px auto; }
.account-card h2 { margin: 0 0 12px; }
.account-card p { color: var(--studio-muted); }
.run-context-card { padding: 0; }
.run-status-strip { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-bottom: 20px; }
.run-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a94a3; }
.state-complete .run-dot { background: #267350; }
.state-failed .run-dot { background: #ad3434; }
.run-alias-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--studio-line); padding-bottom: 16px; }
.run-context-label { font-size: 12px; color: var(--studio-muted); }
.run-alias { font-size: 14px; }
.run-id-copy { padding: 4px 8px; font-size: 11px; border: 1px solid var(--studio-line); background: #fff; }
.run-context-list, .run-technical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 20px 0; }
.run-context-item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.run-context-item strong { font-weight: 500; }
.run-technical summary, .reported-metrics-detail summary { font-size: 13px; color: var(--studio-muted); cursor: pointer; }
.workbench-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.workbench-metric-card { border-bottom: 1px solid var(--studio-line); padding: 16px 0; }
.metric-label { display: block; color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; }
.metric-value { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-value.metric-model { font-size: 18px; }
.guided-review-grid, .guided-inspector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 24px 0; }
.guided-review-grid small, .guided-review-grid strong { display: block; }
.guided-review-grid small { color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; }
.guided-review-grid strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.guided-provider-badge, .guided-evidence-provenance { display: inline-block; font-size: 11px; color: var(--studio-muted); margin: 4px 0; }
.guided-dossier-heading { margin-bottom: 20px; }
.guided-dossier-heading h3 { margin: 8px 0; }
.guided-research-insights, .guided-evidence-grid, .guided-next-experiment-grid { display: grid; gap: 16px; margin: 20px 0; }
.guided-research-insight, .guided-evidence-card, .guided-next-experiment-card, .guided-trace-entry { padding: 16px 0; border-top: 1px solid var(--studio-line); }
.guided-evidence-heading h4 { margin: 0 0 8px; }
.guided-insight-label { color: var(--studio-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.guided-research-icon { display: none; }
.guided-dossier-empty h3 { font-size: 18px; margin: 0 0 6px; }
.guided-empty-insight { padding: 20px 0; }
.guided-provider-note, .guided-agent-intro { color: var(--studio-muted); font-size: 13px; }
.guided-estimate > span { display: block; font-size: 11px; color: var(--studio-muted); }
.guided-estimate strong { font-size: 16px; margin: 6px 0; }
.guided-trace-list { padding: 0; list-style: none; }
@media (max-width: 1100px) {
  .studio-workbench { gap: 24px !important; }
  .studio-workflow { flex-basis: 150px !important; }
  .guided-step-panel { padding: 24px !important; }
  .guided-summary-facts { gap: 12px 16px; }
}
@media (max-width: 800px) {
  .studio-workbench { flex-direction: column; }
  .studio-workflow, .studio-primary { width: 100%; flex: 1 1 auto !important; }
  .studio-workflow { gap: 8px !important; padding: 0; }
  .guided-rail-label { display: none; }
  .guided-stepper .wrap { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .guided-stepper label { flex: 0 0 auto; padding: 8px 10px !important; min-height: 40px; gap: 6px; font-size: 12px; }
  .guided-stepper label::before { font-size: 10px; }
  .studio-model-controls { padding-right: 0; border-right: 0; }
  .guided-workbench-heading { display: block; }
  .guided-workbench-heading > p { margin-top: 12px; }
  .guided-run-summary { flex-direction: column; gap: 12px; }
  .research-notice { font-size: 10px; }
}
@media (max-width: 480px) {
  .guided-stepper .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guided-stepper label { padding: 8px 4px !important; font-size: 11px; justify-content: center; }
  .guided-stepper label::before { display: none; }
  .studio-product-header { padding: 20px 0 16px; }
  .studio-product-profile { display: none; }
  .research-notice { display: block; }
  .notice-title { margin-bottom: 4px; }
  #workspace-tabs > .tab-wrapper { margin-bottom: 20px; }
  #workspace-tabs > .tab-wrapper > .tab-container { gap: 24px; }
  .guided-step-panel, .panel-card { padding: 20px !important; }
  .guided-step-heading h3, .configuration-heading h2 { font-size: 24px; }
  .guided-run-bar .row { gap: 12px; }
  .guided-result-tabs > .tabitem { padding: 16px; }
  .guided-mapping-row, .guided-detail-row { grid-template-columns: 1fr; gap: 4px; }
  .guided-inspector-heading { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
"""