/* Optimizer workspace styles - loaded by optimizer.html after style.css. */ /* Theme palette. Light is the default; theme_toggle.js applies the dark set by setting data-theme="dark" on (persisted in localStorage). */ :root { --bg-sidebar: #FFFFFF; --bg-main: #F8FAFC; --bg-card: #FFFFFF; --border-subtle: rgba(0, 0, 0, 0.06); --border-softer: rgba(0, 0, 0, 0.04); --card-sheen: none; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); --text-primary: #0F172A; --text-secondary: #64748B; --complete-bg: rgba(27, 127, 75, 0.08); --accent-bg-recommendation: #EFF6FF; --accent-border-recommendation: rgba(37, 99, 235, 0.2); --control-bg: #FFFFFF; --control-border: rgba(0, 0, 0, 0.08); --control-border-hover: rgba(0, 0, 0, 0.16); --control-focus-bg: rgba(0, 0, 0, 0.04); --btn-bg: #FFFFFF; --btn-border: rgba(0, 0, 0, 0.08); --btn-bg-hover: #F1F5F9; --btn-border-hover: rgba(0, 0, 0, 0.16); --btn-text: #334155; /* Constants - identical in both themes. */ --overlay-bg: rgba(0, 0, 0, 0.55); --on-accent-text: #FFFFFF; } html[data-theme="dark"] { --bg-sidebar: #000000; --bg-main: #0A0A0A; --bg-card: #13151A; --border-subtle: rgba(255, 255, 255, 0.08); --border-softer: rgba(255, 255, 255, 0.05); --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); --card-shadow: none; --text-primary: #FFFFFF; --text-secondary: #A1A1AA; --complete-bg: rgba(52, 211, 153, 0.15); --accent-bg-recommendation: rgba(37, 99, 235, 0.04); --accent-border-recommendation: rgba(37, 99, 235, 0.15); --control-bg: rgba(255, 255, 255, 0.04); --control-border: rgba(255, 255, 255, 0.10); --control-border-hover: rgba(255, 255, 255, 0.20); --control-focus-bg: rgba(255, 255, 255, 0.06); --btn-bg: rgba(255, 255, 255, 0.03); --btn-border: rgba(255, 255, 255, 0.12); --btn-bg-hover: rgba(255, 255, 255, 0.08); --btn-border-hover: rgba(255, 255, 255, 0.20); --btn-text: #F9F9F9; } /* Theme switch transition on the structural surfaces (backgrounds, borders, text). Small controls keep their fast hover transitions untouched. */ .optimizer-forms, .optimizer-layout, .optimizer-header, .optimizer-header .header-left, .optimizer-header .optimizer-toolbar, .optimizer-header .header-right, .optimizer-results .card-box, .opt-card { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; } /* Header */ .header { background-color: rgba(26, 26, 26, 0.85); padding: 1rem 2rem; color: var(--fg); position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 0.5px solid var(--line); backdrop-filter: blur(12px); } .header-container { display: flex; justify-content: space-between; align-items: center; } .header-left { display: flex; align-items: flex-start; gap: 2rem; } .header-right { display: flex; align-items: center; gap: 18px; } .header-title { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Brand name: the single 600-weight exception of the system */ .header-title-link { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: inherit; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; } .header-title-link:hover, .header-title-link:active { color: inherit; text-decoration: none; } .simulation-form { display: flex; flex-direction: column; align-items: center; } .optimizer-page .simulation-form { align-items: stretch; } .main-column { width: 100%; } /* Both columns stay in document flow so the workspace has one scroll. */ .optimizer-layout { display: grid; grid-template-columns: var(--hint-optimizer-forms-width) minmax(0, 1fr); align-items: stretch; width: 100%; min-height: calc(100svh - var(--hint-workspace-header-height)); } .optimizer-forms { min-width: 0; padding: 24px; background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); } .optimizer-results { min-width: 0; width: 100%; max-width: 1440px; margin-inline: auto; padding: 32px clamp(24px, 3vw, 48px) 48px; scroll-margin-top: calc(var(--hint-workspace-header-height) + 24px); } /* Near-black canvas behind the cards, so tinted surfaces read against it. */ .optimizer-page .optimizer-layout { background: var(--bg-main); } .optimizer-results .card-box { background-color: var(--bg-card); background-image: var(--card-sheen); border: 1px solid var(--border-subtle); box-shadow: var(--card-shadow); border-radius: 8px; } .simulation-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; } .stacked-card-column { display: flex; flex-direction: column; gap: 10px; height: 100%; } .card-title-info-btn { flex-shrink: 0; background: none; border: none; padding: 0; margin-left: 8px; cursor: pointer; display: flex; align-items: center; color: var(--muted-2); opacity: 0.7; transition: opacity 160ms ease; } .card-title-info-btn svg { display: block; width: 15px; height: 15px; } .card-title-info-btn:hover, .card-title-info-btn:focus-visible { opacity: 1; } .card-title-info-btn:focus-visible { outline: none; } .results-section-header .card-title-info-btn { display: inline-flex; vertical-align: middle; } @media (max-width: 1024px) { .header { padding: 0.75rem 1.25rem; } .optimizer-layout { grid-template-columns: minmax(0, 1fr); } .optimizer-forms { padding: 24px; border-right: none; border-bottom: 0.5px solid var(--line); } .optimizer-results { padding: 24px; } .flow-details-content { grid-template-columns: 1fr; gap: 16px; } } .form-control { width: 100%; padding: 10px; background-color: var(--card); border: 0.5px solid var(--line-strong); color: var(--fg); box-sizing: border-box; font-family: inherit; transition: border-color 160ms ease; } .form-control:focus { border-color: var(--accent); outline: none; } .form-row { display: flex; gap: 20px; flex-wrap: wrap; } .form-col { flex: 1; min-width: 200px; margin-bottom: 15px; } /* Settings modal */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: var(--card); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; border: 0.5px solid var(--line-strong); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 0.5px solid var(--line); } .modal-body { padding: 1.5rem; overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; padding: 1rem 1.5rem; border-top: 0.5px solid var(--line); } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); padding: 0 8px; } .modal-close:hover { color: var(--fg); } /* Dashboard */ .results-dashboard { background-color: transparent; border: none; padding: 0; width: 100%; } .optimizer-page .results-dashboard { margin-top: 0; } /* Flow list */ .flow-list { display: flex; flex-direction: column; gap: 8px; } .flow-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; padding: 2px 0; } .flow-item[hidden] { display: none; } /* Optimization progress card (real pymoo progress polled from the ML API) */ .optimization-progress[hidden] { display: none; } .optimization-progress__card { max-width: 560px; margin: 0 auto 24px; } .optimization-progress__title { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg); } .optimization-progress__track { height: 6px; background-color: var(--bg-alt); } .optimization-progress__fill { height: 100%; width: 0%; background-color: var(--accent-fill); transition: width 400ms ease; } .optimization-progress__stats { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .optimization-progress__percent { font-size: 1.25rem; font-weight: 500; color: var(--accent); } .optimization-progress__counters { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); text-align: right; } @media (prefers-reduced-motion: reduce) { .optimization-progress__fill { transition: none; } } /* Modal / alert popup */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 160ms ease; } .modal-content { background-color: var(--card); border: 0.5px solid var(--line-strong); padding: 24px; width: 90%; max-width: 500px; position: relative; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 0.5px solid var(--line); padding-bottom: 12px; } .modal-title { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); } .modal-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 4px; transition: color 160ms ease; } .modal-close:hover { color: var(--accent); } .modal-body { color: var(--muted); margin-bottom: 24px; line-height: 1.6; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; } .modal-btn--secondary { background-color: transparent; color: var(--muted); border: 0.5px solid var(--line-strong); padding: 10px 20px; cursor: pointer; font-weight: 500; transition: border-color 160ms ease, color 160ms ease; } .modal-btn--secondary:hover { border-color: var(--accent); color: var(--accent); } .hint-input { width: 100%; padding: 10px 12px; border: 0.5px solid var(--line-strong); background: var(--card); color: var(--fg); font-size: 0.95rem; box-sizing: border-box; transition: border-color 160ms ease; } .hint-input:focus { outline: none; border-color: var(--accent); } .hint-input::placeholder { color: var(--faint); } .modal-field-label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2); } .modal-field-hint { margin-top: 8px; font-size: 0.82rem; color: var(--muted); line-height: 1.4; } .modal-btn { background-color: var(--accent-fill); color: var(--on-accent-text); border: 0.5px solid var(--accent-fill); padding: 10px 20px; cursor: pointer; font-weight: 500; transition: background-color 160ms ease, border-color 160ms ease; } .modal-btn:hover { background-color: var(--fg); border-color: var(--fg); color: var(--bg); } .modal-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(36, 82, 224, 0.35); } .form-submit-section { margin-top: 24px; display: flex; justify-content: center; flex-direction: column; align-items: stretch; gap: 8px; } .form-submit-section--centered { align-items: center; gap: 16px; } .optimizer-disclaimer { margin: 12px 0 0; max-width: none; align-self: stretch; text-align: left; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--muted-2); opacity: 0.7; /* dimmed so it blends into the page */ } .optimization-detail { color: var(--muted-2); font-size: 0.95rem; text-align: center; } .optimization-detail--results { color: var(--muted); font-style: normal; font-size: 0.9rem; text-align: left; margin-left: auto; } .optimizer-page .results-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .results-meta-heading { display: flex; align-items: baseline; gap: 4px; flex: 1; } .workspace-region-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; } .results-section { display: grid; gap: 12px; margin-top: 32px; } .results-section-header { display: flex; align-items: center; justify-content: flex-start; min-height: 20px; } .results-section-title { margin: 0; font-family: var(--font-mono); font-size: 12px !important; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-2); } /* Main CTA: the single solid accent button of the page */ .btn-cta-floating { display: inline-flex !important; align-items: center; gap: 10px; padding: 16px 32px; background: var(--accent-fill); color: var(--on-accent-text); border: 0.5px solid var(--accent-fill); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; width: fit-content !important; max-width: fit-content !important; } .btn-cta-floating__content { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .btn-cta-floating__label { line-height: 1.1; } .btn-cta-floating:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); } .btn-cta-floating:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(36, 82, 224, 0.35); } .btn-cta-floating svg { width: 20px; height: 20px; } @media (max-width: 1024px) { .form-submit-section { margin-top: 16px; } .btn-cta-floating { padding: 14px 28px; font-size: 0.95rem; width: 100%; justify-content: center; } .btn-cta-floating svg { width: 18px; height: 18px; } } .component-monthly { font-size: 0.75rem; color: var(--muted); font-weight: 400; } /* Sankey diagram container */ .sankey-container { min-height: 400px; width: 100%; margin-bottom: 24px; } @media (max-width: 1024px) { .cash-flow-section { display: none; } } .flow-details-content { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .financial-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .financial-card-stack { display: flex; flex-direction: column; gap: 24px; } /* Taxes card is the only direct-child card: it stretches to the left column's total height. */ .financial-cards-grid > .opt-card { height: 100%; display: flex; flex-direction: column; } @media (max-width: 1024px) { .financial-cards-grid { grid-template-columns: minmax(0, 1fr); } } .flow-section { background: var(--bg); padding: 16px; border: 0.5px solid var(--line); } .optimizer-page .flow-section--details .flow-list { gap: 6px; } .optimizer-page .flow-section--details .flow-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 3px 0; } .optimizer-page .flow-section--details .component-monthly { margin-top: 1px; font-size: 0.78rem; color: var(--muted); } .recommendations-card { padding: 24px 20px; } .optimizer-results .card-box.recommendations-card { background-color: var(--accent-bg-recommendation); border: 1px solid var(--accent-border-recommendation); } .recommendations-card .flow-details-content { display: block; margin-top: 0; } .recommendations-card .flow-list { gap: 12px; } .recommendations-card .decision-sentence { color: var(--muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .recommendations-card .decision-amount { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent); } .recommendations-card .decision-key { font-weight: 500; color: var(--fg); } .solution-navigation { display: inline-flex; align-items: center; gap: 8px; } .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-btn { display: flex; align-items: center; justify-content: center; padding: 0; background: var(--card); border: 0.5px solid var(--line-strong); color: var(--fg); cursor: pointer; transition: border-color 160ms ease, color 160ms ease; width: 44px; height: 44px; flex-shrink: 0; } .nav-btn svg { width: 18px; height: 18px; stroke-width: 2; } .solution-info { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 96px; } .solution-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; } .solution-counter { font-size: 14px; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Optimizer workspace */ .optimizer-page { --hint-optimizer-forms-width: 320px; --hint-workspace-header-height: 80px; position: relative; background-color: var(--bg); } .optimizer-page .optimizer-header { padding: 0; background: var(--bg-main); border-bottom: none; } /* Square corners: the universal * border-radius would otherwise curve the black/gray separator where the header cells meet at the top of the screen. */ .optimizer-header, .optimizer-header .header-left, .optimizer-header .optimizer-toolbar, .optimizer-header .header-right { border-radius: 0; } .optimizer-header .header-container { display: grid; grid-template-columns: var(--hint-optimizer-forms-width) minmax(0, 1fr) auto; min-height: 80px; max-width: none; align-items: stretch; } .optimizer-header .header-left { align-items: center; align-self: stretch; padding: 16px 24px; background: var(--bg-sidebar); /* same black as the sidebar below: one continuous left column */ border-right: 1px solid var(--border-subtle); /* separator runs to the very top of the screen */ } /* The header carries both logo artworks (hint.svg has dark ink, hint-light.svg white ink): only the one matching the active theme is shown. The show rule must come after the hide rule - same specificity, source order decides. */ .optimizer-header .header-logo--white-ink { display: none; } html[data-theme="dark"] .optimizer-header .header-logo { display: none; } html[data-theme="dark"] .optimizer-header .header-logo--white-ink { display: inline; } .optimizer-header .header-right { gap: 8px; padding-right: 24px; background: var(--bg-main); /* same gray as the results canvas */ border-bottom: 1px solid var(--border-softer); /* barely-there structure when content scrolls under */ } .optimizer-header .user-menu { margin-right: 0; } .optimizer-header .hint-storage-header-toggle { width: auto; min-height: 36px; gap: 8px; padding-inline: 8px; font: inherit; font-size: 13px; white-space: nowrap; } .optimizer-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; padding: 16px 24px; background: var(--bg-main); /* same gray as the results canvas: one continuous right zone */ border-bottom: 1px solid var(--border-softer); /* barely-there structure when content scrolls under */ } .optimizer-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .optimizer-toolbar-actions .hint-storage-save-trigger { min-height: 36px; padding: 6px 12px; font-size: 13px; } .optimizer-toolbar > .btn-cta-floating { min-height: 36px; padding: 8px 14px; font-size: 13px; } .optimizer-header .hint-storage-header-toggle, .optimizer-header .hint-storage-save-trigger, .optimizer-header .user-menu-trigger, .optimizer-header .btn-cta-floating { height: 36px; min-height: 36px; /* overrides the 44px min-height on the save-trigger base */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .optimizer-header .hint-storage-header-toggle, .optimizer-header .hint-storage-save-trigger, .optimizer-header .user-menu-trigger { background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px; color: var(--btn-text); } .optimizer-header .hint-storage-header-toggle:hover, .optimizer-header .hint-storage-save-trigger:hover, .optimizer-header .user-menu-trigger:hover { background: var(--btn-bg-hover); } .optimizer-forms > .workspace-region-title { margin-bottom: 32px; } .optimizer-forms .simulation-grid { gap: 16px; } .optimizer-forms .stacked-card-column { gap: 16px; } .optimizer-forms .card-title-info-btn { width: 44px; height: 44px; margin: -12px 0; justify-content: flex-end; } .optimizer-forms .card-box { padding: 14px 16px; } .optimizer-forms .card-box .form-group { margin-bottom: 22px; } .optimizer-forms .card-box .form-group:last-child { margin-bottom: 0; } .optimizer-forms .card-box label { margin-bottom: 8px; color: var(--text-secondary); } .optimizer-forms .card-box small { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; opacity: 0.75; } .optimizer-forms .card-box input, .optimizer-forms .card-box select, .optimizer-forms .card-box textarea, .optimizer-forms .card-box .form-control { background-color: var(--control-bg); border: 1px solid var(--control-border); color: var(--text-primary); } .optimizer-forms .card-box input:hover, .optimizer-forms .card-box select:hover, .optimizer-forms .card-box textarea:hover, .optimizer-forms .card-box .form-control:hover { border-color: var(--control-border-hover); } .optimizer-forms .card-box input:focus, .optimizer-forms .card-box select:focus, .optimizer-forms .card-box textarea:focus, .optimizer-forms .card-box .form-control:focus { background-color: var(--control-focus-bg); border-color: var(--accent); } .optimizer-forms .choice-segment label { margin-bottom: 0; border: 1px solid var(--control-border); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .optimizer-forms .choice-segment > div > div + div label { margin-left: -1px; /* adjacent segments share one border */ } .optimizer-forms .choice-segment label:has(input:checked) { border-color: color-mix(in srgb, var(--accent-on-dark) 55%, transparent); } /* Section accordions: initial state lives in the markup (first section open); panels animate via grid-template-rows, no JS height math. */ .card-accordion.is-collapsed { gap: 0; } /* theme.css rounds every element (* { border-radius }), which curved the ends of the hairline under expanded titles. */ .optimizer-forms .card-accordion > h3 { font-size: 10px !important; /* base rule in style.css uses !important */ letter-spacing: 0.08em; border-radius: 0; } .card-accordion > h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .card-accordion__toggle { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 10px; background: var(--bg-alt); border: 0.5px solid var(--line-strong); border-radius: var(--radius); font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color 160ms ease; } .card-accordion__toggle:hover { background: var(--line-strong); } /* The title is the only element allowed to shrink: min-width: 0 is what makes text-overflow work inside a flex container. */ .card-accordion__title { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .card-accordion__toggle:focus-visible { outline: none; border-radius: var(--radius); box-shadow: 0 0 0 3px rgba(143, 166, 245, 0.35); } .card-accordion__chevron { flex-shrink: 0; } .card-accordion__chevron { width: 16px; height: 16px; color: var(--muted-2); transition: transform 220ms ease; } .card-accordion.is-collapsed .card-accordion__chevron { transform: rotate(-90deg); } .section-completion { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; color: var(--faint); } .section-completion__icon { width: 18px; height: 18px; } .section-completion__icon circle { fill: none; stroke: currentColor; stroke-width: 1.5; transition: fill 160ms ease, stroke 160ms ease; } .section-completion__icon path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 160ms ease; } .section-completion.is-complete { color: var(--success); } .section-completion.is-complete .section-completion__icon circle { fill: var(--success); } .section-completion.is-complete .section-completion__icon path { stroke: var(--bg); } .card-accordion > h3 { padding-bottom: 0; border-bottom: none; transition: padding-bottom 220ms ease; } .card-accordion:not(.is-collapsed) > h3 { padding-bottom: 10px; border-bottom: 0.5px solid var(--line); } .card-accordion__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 220ms ease, visibility 0s; } .card-accordion.is-collapsed .card-accordion__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 220ms ease, visibility 0s linear 220ms; } .card-accordion__panel > .card-content { min-height: 0; overflow: hidden; padding: 12px 0 4px; } /* Segmented choice picker (legal status): joined pill segments, native radios visually hidden but still keyboard operable. */ .choice-segment > div { display: flex; margin: 0; } .choice-segment > div > div { flex: 1; } .choice-segment label { display: flex; align-items: center; justify-content: center; padding: 10px 12px; background: var(--card); border: 0.5px solid var(--line-strong); color: var(--muted); font-size: 14px; line-height: 1.25; text-align: center; cursor: pointer; user-select: none; border-radius: 0; transition: background-color 160ms ease, color 160ms ease; } .choice-segment > div > div:first-child label { border-radius: var(--radius) 0 0 var(--radius); } .choice-segment > div > div:last-child label { border-radius: 0 var(--radius) var(--radius) 0; } .choice-segment > div > div + div label { margin-left: -0.5px; } .choice-segment label:has(input:checked) { position: relative; z-index: 1; background: color-mix(in srgb, var(--accent) 15%, var(--card)); border-color: var(--accent-on-dark); color: var(--accent-on-dark); } .choice-segment label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(143, 166, 245, 0.35); } .choice-segment input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* Toggle switches on the dark page: softer "on" state matching the segmented choices (blue-tinted track + accent hairline instead of solid blue). */ .optimizer-page .toggle-switch input[type="checkbox"]:checked + .toggle-slider { background-color: color-mix(in srgb, var(--accent) 15%, var(--card)); border-color: var(--accent-on-dark); } .optimizer-page .toggle-switch input[type="checkbox"]:focus + .toggle-slider { box-shadow: 0 0 0 3px rgba(143, 166, 245, 0.35); } .optimizer-page .form-submit-section { margin-top: 12px; padding-bottom: env(safe-area-inset-bottom); } #simulation-results, #optimization-progress, .optimizer-forms :is(input, select, textarea) { scroll-margin-top: calc(var(--hint-workspace-header-height) + 24px); } .workspace-skip-link { position: absolute; top: -100px; left: 16px; padding: 12px 16px; background: var(--card); color: var(--accent); border: 0.5px solid var(--accent); z-index: 1; } .workspace-skip-link:focus { top: 16px; } @media (max-width: 1199px) { .optimizer-page { --hint-workspace-header-height: 132px; } .optimizer-header .header-container { grid-template-columns: minmax(0, 1fr) auto; } .optimizer-header .header-left { min-height: 64px; border-right: none; } .optimizer-toolbar { grid-column: 1 / -1; grid-row: 2; padding: 12px 24px; border-top: 0.5px solid var(--line); } } @media (max-width: 600px) { .optimizer-page { --hint-workspace-header-height: 168px; } .optimizer-header .header-left { padding-inline: 16px; } .optimizer-header .header-right { padding-right: 16px; } .optimizer-toolbar-actions .hint-storage-save-trigger, .optimizer-toolbar > .btn-cta-floating { padding-inline: 10px; font-size: 13px; } .optimizer-toolbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; } .optimizer-forms, .optimizer-results { padding: 24px 16px; } } .optimizer-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; padding: 32px 18px; background: transparent; border: none; min-height: 520px; min-height: max( 520px, calc( 100vh - var(--hint-header-height, 72px) - var(--hint-footer-height, 96px) - 56px ) ); } /* Inline SVG drawn with tokens; it follows the theme without any filter */ .optimizer-empty__illustration { width: min(520px, 92%); height: auto; } .optimizer-empty__title { margin: 0; } .optimizer-empty__text { margin: 0; color: var(--muted); max-width: 56ch; } .optimizer-page .form-submit-section { background: transparent; } @media (min-width: 1800px) { .header-container { max-width: 1600px; width: 100%; margin: 0 auto; } } /* Form title optional label */ .form-title-optional { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--faint); } /* Header user menu spacing (optimizer page) */ .header-right .user-menu { margin-right: 15px; } .constraints-list { margin-top: 15px; } .modal-footer--spaced { margin-top: 16px; }