/* Public chart workspace. Theme variables stay inside this page: saved visuals and other makers
   retain their own styling. Renderer colors are owned by the selected preset, never by this sheet. */
.gixo-public-layout:has(.prism-chart-studio) { background: #f5f6f3; }
.gixo-public-container:has(> .prism-chart-studio) { max-width: 1440px; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.prism-chart-studio {
    --prism-tool-primary: #284ed1;
    --prism-tool-primary-dark: #1e3da6;
    --prism-tool-primary-text: #284ed1;
    --prism-tool-primary-rgb: 40, 78, 209;
    --prism-tool-on-primary: #fff;
    --prism-tool-heading: #172b4d;
    --prism-tool-text: #28394f;
    --prism-tool-muted: #526477;
    --prism-tool-subtle: #526477;
    --prism-tool-breadcrumb-current: #28394f;
    --prism-tool-surface: #fff;
    --prism-tool-surface-strong: #eef1f6;
    --prism-tool-surface-tint: #eaf0ff;
    --prism-tool-border: #cbd4df;
    --prism-tool-border-strong: #64748b;
    --prism-tool-code-bg: #eef1f6;
    --prism-tool-code-text: #28394f;
    --gixo-text-primary: #172b4d;
    --gixo-text-secondary: #526477;
    --gixo-text-subtle: #526477;
    --gixo-text-muted: #526477;
    --gixo-surface-tonal: color-mix(in srgb, var(--gixo-text-primary) 10%, transparent);
    --gixo-surface: #fff;
    --gixo-surface-light: #eef1f6;
    --gixo-background: #f5f6f3;
    --gixo-info: #284ed1;
    --gixo-warning: #8a5200;
    --gixo-error: #b42318;
    --gixo-success: #166534;
    --mud-palette-primary: #284ed1;
    --mud-palette-primary-rgb: 40, 78, 209;
    --mud-palette-primary-text: #fff;
    --mud-palette-secondary: #526477;
    --mud-palette-secondary-text: #fff;
    --mud-palette-info: #284ed1;
    --mud-palette-info-rgb: 40, 78, 209;
    --mud-palette-info-text: #fff;
    --mud-palette-info-darken: #1e3da6;
    --mud-palette-warning: #8a5200;
    --mud-palette-warning-rgb: 138, 82, 0;
    --mud-palette-warning-text: #fff;
    --mud-palette-warning-darken: #704100;
    --mud-palette-error: #b42318;
    --mud-palette-error-rgb: 180, 35, 24;
    --mud-palette-error-text: #fff;
    --mud-palette-error-darken: #911b13;
    --mud-palette-success: #166534;
    --mud-palette-success-rgb: 22, 101, 52;
    --mud-palette-success-text: #fff;
    --mud-palette-success-darken: #114d28;
    --mud-palette-text-primary: #172b4d;
    --mud-palette-text-secondary: #526477;
    --mud-palette-text-disabled: #64748b;
    --mud-palette-action-default: #526477;
    --mud-palette-surface: #fff;
    --mud-palette-background: #f5f6f3;
    --mud-palette-divider: #cbd4df;
    --mud-palette-lines-default: #cbd4df;
    --mud-palette-lines-inputs: #78879c;
    --mud-palette-table-lines: #d6dee8;
    max-width: none;
    padding: 2rem 0 5rem;
    color: #28394f;
    font-size: 1rem;
    line-height: 1.65;
}
.prism-chart-studio .prism-breadcrumb { margin-bottom: 1.75rem; font-size: .875rem; }
.prism-studio-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr); align-items: end; gap: 2.5rem; margin-bottom: 2.5rem; }
.prism-studio-eyebrow { display: block; color: #284ed1; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.prism-chart-studio .prism-h1 { margin: .6rem 0 1rem; color: #172b4d; font-size: clamp(2.5rem, 4.2vw, 3.75rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; }
.prism-chart-studio .prism-h1 span { color: #284ed1; }
.prism-chart-studio .prism-sub { max-width: 62ch; color: #526477; font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.prism-studio-access { max-width: 38ch; margin: 0; color: #526477; font-size: .875rem; line-height: 1.7; }
.prism-studio-access a { display: inline-block; color: #284ed1; margin-top: .6rem; text-underline-offset: 4px; }
.prism-chart-typebar { margin-bottom: 1.5rem; }
.prism-chart-workspace-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.15rem; }
.prism-chart-workspace-heading h2 { color: inherit; margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 650; letter-spacing: -.015em; }
.prism-chart-workspace-heading nav { display: flex; gap: 1.25rem; font-size: .875rem; }
.prism-chart-workspace-heading a { color: #284ed1; text-underline-offset: 4px; }
.prism-chart-studio .prism-type-thumbnails { gap: .65rem; margin: 0; padding: 3px 3px .85rem; }
.prism-chart-studio .prism-type-thumb { min-width: 112px; padding: .65rem; gap: .5rem; color: #28394f; background: #fff; border-color: #cbd4df; border-radius: 8px; font-size: .875rem; }
.prism-chart-studio .prism-type-thumb[aria-checked="true"] { color: #1e3da6; border-color: #284ed1; background: #eaf0ff; box-shadow: inset 0 0 0 1px #284ed1; }
.prism-chart-studio .prism-maker-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.prism-chart-studio .prism-maker-split__left, .prism-chart-studio .prism-maker-split__right { min-width: 0; scroll-margin-top: 1.5rem; }
.prism-chart-studio .prism-card { margin: 0; padding: clamp(1rem, 2vw, 1.75rem); background: #fff; border-color: #cbd4df; border-radius: 12px; }
.prism-chart-studio .prism-row { gap: 1rem; }
.prism-chart-studio .prism-grow { min-width: 180px; }
.prism-chart-studio .mud-input-root { font-size: 1rem; }
.prism-chart-studio .mud-input-label { color: #526477; }
.prism-chart-studio .mud-typography-caption, .prism-chart-studio .prism-muted, .prism-chart-studio .mud-button-size-small { font-size: .875rem; line-height: 1.6; }
.prism-chart-studio .prism-actions { gap: .75rem; }
.prism-chart-studio .prism-actions .mud-button-root { min-height: 44px; }
.prism-chart-studio .prism-theme-swatch { min-height: 40px; font-size: .875rem; }
.prism-chart-studio .prism-grid-toolbar { gap: .75rem; }
.prism-chart-studio .prism-grid-toolbar-right { gap: .5rem; }
.prism-chart-studio .prism-grid-toolbar .mud-button-root { min-height: 40px; }
.prism-chart-studio .prism-grid-title { font-size: 1rem; }
.prism-chart-studio .prism-grid-status { padding: .25rem .5rem; font-size: .8125rem; }
.prism-chart-studio .prism-grid-table { font-size: .9375rem; }
.prism-chart-studio .prism-grid-input { min-height: 38px; font-size: 1rem; }
.prism-chart-studio .prism-grid-btn-remove { min-width: 32px; min-height: 36px; }
.prism-chart-studio .prism-maker-split__right { position: sticky; top: 1.5rem; }
.prism-chart-studio .prism-live-preview { padding: clamp(1rem, 2vw, 1.75rem); background: #111c30; border: 1px solid #30415a; border-radius: 12px; color: #f8fafc; }
.prism-chart-studio .prism-live-preview__header { gap: 1rem; margin-bottom: 1.5rem; }
.prism-chart-studio .prism-live-preview__title { color: #f8fafc; font-size: 1.0625rem; font-weight: 650; }
.prism-chart-studio .prism-live-preview__status { color: #cbd5e1; font-size: .875rem; }
.prism-chart-studio .prism-live-preview__canvas { padding: .5rem; border-radius: 7px; background: #f8fafc; color: #172b4d; }
.prism-chart-studio .prism-live-preview__sample { margin: 0; }
.prism-chart-studio .prism-live-preview__sample img { display: block; width: 100%; height: auto; }
.prism-chart-studio .prism-live-preview__sample .prism-muted, .prism-chart-studio .prism-live-preview__empty .prism-muted { padding: .75rem; color: #526477; font-size: .875rem; }
.prism-chart-studio .prism-live-preview__error { color: #f8d49b; }
.prism-chart-studio .prism-tool-help { border-color: #cbd4df; }
.prism-chart-studio .prism-tool-help>summary { min-height: 48px; padding-block: .8rem; color: #28394f; font-size: .9375rem; }
.prism-studio-reference { margin-top: clamp(3.5rem, 6vw, 6rem); padding-top: 3rem; border-top: 1px solid #cbd4df; }
.prism-studio-section-heading { max-width: 48rem; margin-bottom: 2rem; }
.prism-studio-section-heading h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 650; color: #172b4d; margin: .65rem 0 0; }
.prism-chart-studio .prism-section { margin-top: 4rem; }
.prism-chart-studio .prism-section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 650; letter-spacing: -.025em; }
.prism-chart-studio .prism-section p, .prism-chart-studio .prism-section li { max-width: 75ch; font-size: 1.0625rem; line-height: 1.75; }
.prism-chart-studio .prism-table { font-size: .9375rem; line-height: 1.6; }
.prism-chart-studio a:focus-visible, .prism-chart-studio button:focus-visible, .prism-chart-studio summary:focus-visible { outline: 3px solid #0f766e; outline-offset: 4px; }
@media (max-width: 899px) {
    .prism-studio-intro { grid-template-columns: 1fr; gap: 1.25rem; }
    .prism-studio-access { max-width: 65ch; }
    .prism-chart-studio .prism-maker-split { grid-template-columns: minmax(0, 1fr); }
    .prism-chart-studio .prism-maker-split__right { position: static; }
}
@media (max-width: 600px) {
    .prism-chart-studio { padding-top: 1.5rem; }
    .prism-chart-studio .prism-h1 { font-size: 2.5rem; }
    .prism-chart-studio .prism-h1 span { display: block; }
    .prism-chart-studio .prism-sub { font-size: 1.0625rem; }
    .prism-chart-studio .prism-type-thumb { min-width: 104px; }
    .prism-chart-studio .prism-grow { min-width: min(100%, 160px); }
    .prism-chart-studio .prism-grid-btn-remove { min-width: 44px; min-height: 44px; }
    .prism-chart-studio .prism-grid-toolbar .mud-button-root { min-height: 44px; }
    .prism-chart-studio .prism-theme-swatch { min-height: 44px; }
}

/* A tool's introduction should leave room for the working chart in a laptop viewport. */
.prism-chart-studio { padding-top: 1.25rem; }
.prism-chart-studio .prism-breadcrumb { margin-bottom: 1rem; }
.prism-chart-studio .prism-h1 { font-size: clamp(2.25rem, 3.75vw, 3.2rem); }
.prism-studio-intro { margin-bottom: 1.5rem; }
.prism-chart-studio .prism-maker-split__right { top: 8rem; }
@media (max-width: 899px) { .prism-chart-studio .prism-maker-split__right { top: auto; } }
.prism-chart-studio .prism-type-thumbnails { padding: 8px 8px 14px; }
.prism-chart-studio .mud-input-label { font-size: 1.09375rem; }

.product-scope--prism .prism-tool.prism-chart-studio {
    --gixo-primary: #284ed1;
    --gixo-on-primary: #fff;
    --gixo-primary-hover: #1e3da6;
    --gixo-primary-light: #1e3da6;
    --prism-tool-primary: #284ed1;
    --prism-tool-primary-dark: #1e3da6;
    --prism-tool-primary-light: #5272e0;
    --prism-tool-primary-rgb: 40, 78, 209;
    --prism-tool-primary-text: #284ed1;
    --prism-tool-on-primary: #fff;
}
.prism-chart-studio .mud-button-root { box-shadow: none; }
.prism-chart-preview-hint { display: none; }
@media (max-width: 600px) {
    /* Preserve the renderer's label geometry instead of shrinking 800px of data into a phone. */
    .prism-chart-studio figure.content-chart { overflow-x: auto; overscroll-behavior-inline: contain; }
    .prism-chart-studio figure.content-chart svg { display: block; min-width: 740px; }
    .prism-chart-preview-hint { display: block; color: #526477; font-size: .875rem; line-height: 1.7; margin-top: .75rem; }
}

.prism-chart-studio .prism-growth h2 { color: #172b4d; font-weight: 600; letter-spacing: -.035em; }
.prism-chart-studio .prism-growth-intro { color: #526477; font-size: 1.0625rem; line-height: 1.75; }
.prism-chart-studio .prism-breadcrumb .sep { color: #526477; }
.prism-chart-studio .prism-growth-action { color: #fff; background: #284ed1; font-weight: 600; }

.prism-chart-studio code { color: #28394f; background: #e8edf5; padding: .1em .25em; border-radius: 3px; }