/* Shared sample-navigation states also apply to keyboard navigation. */
.rs-sample-choice {
    display: flex;
    align-items: center;
    padding: .35rem .6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 400;
    color: var(--whs-ui-muted, rgba(255, 255, 255, .55));
    text-decoration: none;
    transition: background .15s;
}
.rs-sample-choice:hover, .rs-sample-choice:focus-visible {
    background: var(--whs-ui-surface-muted, rgba(255, 255, 255, .05));
    color: var(--whs-ui-text, rgba(255, 255, 255, .85));
    text-decoration: none;
}
.rs-sample-choice.is-current {
    background: var(--whs-ui-accent-soft, rgba(206, 255, 26, .12));
    color: var(--whs-ui-accent-text, #ceff1a);
    border-color: var(--whs-ui-accent-border, rgba(206, 255, 26, .25));
    font-weight: 600;
}

/* Page-specific light surfaces. The aliases are deliberately light-only: each
   use keeps its original dark colour as a fallback, including inline styles. */
html[data-theme="light"] {
    --whs-ui-surface: var(--whs-surface);
    --whs-ui-surface-muted: var(--whs-surface-muted);
    --whs-ui-text: var(--whs-text);
    --whs-ui-muted: var(--whs-muted);
    --whs-ui-border: var(--whs-border);
    --whs-ui-accent-text: var(--whs-accent-text);
    --whs-ui-on-accent: var(--whs-on-accent);
    --whs-ui-accent-soft: var(--whs-accent-soft);
    --whs-ui-accent-border: var(--whs-accent-text);
    --whs-ui-success: #17633b;
    --whs-ui-danger: #a62b3c;
    --whs-ui-warning: #805100;
    --whs-ui-info: #08627a;
    --whs-ui-shadow: rgba(26, 35, 28, .12);
    --whs-ui-scrim: rgba(27, 34, 28, .38);
    --lc-light: var(--whs-text);
    --lc-grey: var(--whs-muted);
    --lc-dark: var(--whs-border);
    --lc-darkgray: var(--whs-surface);
    --lc-darker: var(--whs-surface-muted);
}

/* Canvas tools and calculator panels retain the compact warehouse-workspace
   aesthetic. A dark edge makes solid chartreuse controls distinct on white. */
html[data-theme="light"] body.lc-root,
html[data-theme="light"] .lc-canvas-wrap,
html[data-theme="light"] .rs-layout,
html[data-theme="light"] .rs-main,
html[data-theme="light"] .rs-visualization {
    background-color: var(--whs-page);
}
html[data-theme="light"] .lc-canvas-wrap { background: var(--whs-page); }
html[data-theme="light"] body:not(.lc-has-file):not(.lc-has-sat) #lc-poly { stroke: var(--whs-accent-text); }
html[data-theme="light"] body.lc-has-file .lc-canvas-wrap,
html[data-theme="light"] body.lc-has-sat .lc-canvas-wrap { background: transparent; }
html[data-theme="light"] .lc-tool-primary,
html[data-theme="light"] .lc-ai-send,
html[data-theme="light"] .lc-nav-primary,
html[data-theme="light"] .lc-dim-empty,
html[data-theme="light"] .lc-seg-btn.lc-active,
html[data-theme="light"] .sr-btn-primary,
html[data-theme="light"] .rs-ctrl.accent,
html[data-theme="light"] .op-primary,
html[data-theme="light"] .auth-card button:not(.secondary),
html[data-theme="light"] .btn-early-access,
html[data-theme="light"] .step-number {
    box-shadow: inset 0 0 0 1px var(--whs-ui-accent-border);
}
html[data-theme="light"] .lc-dim-empty { animation: none; }
html[data-theme="light"] .lc-dim.lc-dim-set {
    background: var(--whs-surface);
    color: var(--whs-accent-text);
}
html[data-theme="light"] .lc-card:hover,
html[data-theme="light"] .lc-preset-card:hover,
html[data-theme="light"] .lc-nav-btn:hover:not(:disabled),
html[data-theme="light"] .lc-saved-item:hover {
    border-color: var(--whs-accent-text);
}
html[data-theme="light"] .lc-prog-pill.lc-current .lc-prog-label,
html[data-theme="light"] .lc-pill.lc-pill-active {
    color: var(--whs-accent-text);
}
html[data-theme="light"] .lc-prog-pill.lc-done .lc-prog-dot {
    border-color: var(--whs-accent-text);
}
html[data-theme="light"] .lc-sku-preview {
    background: var(--whs-surface);
    box-shadow: 0 8px 32px var(--whs-ui-shadow);
}
html[data-theme="light"] .lc-sku-preview-overlay { filter: none; }
html[data-theme="light"] .lc-sku-preview-table tbody tr:nth-child(even) td,
html[data-theme="light"] .lc-sku-preview-table tbody tr:nth-child(even) th {
    background: var(--whs-surface-muted);
}
html[data-theme="light"] .lc-sku-preview-table tbody tr:hover td,
html[data-theme="light"] .lc-sku-preview-table tbody tr:hover th {
    background: var(--whs-accent-soft);
}
html[data-theme="light"] .lc-sku-preview-table-wrap,
html[data-theme="light"] .rs-sidebar {
    scrollbar-color: var(--whs-border) transparent;
}
html[data-theme="light"] .lc-panel-head p,
html[data-theme="light"] .lc-modal p,
html[data-theme="light"] .lc-pill.lc-pill-todo { opacity: 1; }
html[data-theme="light"] .lc-modal-backdrop,
html[data-theme="light"] .sr-modal,
html[data-theme="light"] .rs-scenario-overlay { background: var(--whs-ui-scrim); }
html[data-theme="light"] .op-dialog::backdrop { background: var(--whs-ui-scrim); }
html[data-theme="light"] .rs-recalc-overlay {
    background: rgba(248, 250, 245, .94);
    color: var(--whs-accent-text);
}
html[data-theme="light"] .rs-recalc-spinner,
html[data-theme="light"] .phase-icon .spinner-icon {
    border-color: var(--whs-border);
    border-top-color: var(--whs-accent-text);
}

/* Result shells, comparison cards, loading states and operating presets. */
html[data-theme="light"] .rs-visualization,
html[data-theme="light"] .sr-card-art {
    background-image: linear-gradient(rgba(50, 33, 58, .055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(50, 33, 58, .055) 1px, transparent 1px);
}
html[data-theme="light"] .sr-card-art,
html[data-theme="light"] .sr-choice-art,
html[data-theme="light"] .sr-preview { background-color: var(--whs-surface-muted); }
html[data-theme="light"] .sr-status,
html[data-theme="light"] .sr-loading .sr-status { border-color: currentColor; }
html[data-theme="light"] .sr-loading,
html[data-theme="light"] .sr-loading .sr-preview,
html[data-theme="light"] #loading-root { background: var(--whs-page); }
html[data-theme="light"] .sr-loading-sidebar,
html[data-theme="light"] #right-panel { background: var(--whs-surface); }
html[data-theme="light"] .sr-loading-brand,
html[data-theme="light"] #canvas-title .brand,
html[data-theme="light"] #phases-label { opacity: 1; }
html[data-theme="light"] #canvas-fade {
    background: linear-gradient(to right, transparent 55%, var(--whs-page) 100%);
}
html[data-theme="light"] #progress-track,
html[data-theme="light"] .sr-progress { background: var(--whs-border); }
html[data-theme="light"] #progress-fill,
html[data-theme="light"] .sr-progress > span {
    background: var(--whs-accent-text);
    box-shadow: none;
}
html[data-theme="light"] .phase-pill,
html[data-theme="light"] .sr-loading .sr-queue-row { border-color: var(--whs-border); }
html[data-theme="light"] .phase-pill.state-active,
html[data-theme="light"] .sr-loading .sr-queue-row:has(.sr-status-running) {
    background: var(--whs-accent-soft);
    border-color: var(--whs-accent-text);
}
html[data-theme="light"] .sr-loading .sr-queue-row:has(.sr-status-complete) {
    border-color: var(--whs-ui-success);
}
html[data-theme="light"] .phase-icon .dot { background: var(--whs-muted); }
html[data-theme="light"] .btn-glow-3d { animation: none; box-shadow: none; }
/* The multicolour SKU control is a graphic legend, so its light label stays
   on its original darkened colour bands in either theme. */
html[data-theme="light"] .btn-sku-gradient { color: #fff !important; }

/* Public and account pages use the same neutral paper and ink palette. */
html[data-theme="light"] .hero-logo,
html[data-theme="light"] .early-access-logo { filter: brightness(0); }
html[data-theme="light"] .step-4-container { border-color: var(--whs-accent-text) !important; }
html[data-theme="light"] .shared-access-page {
    background-color: var(--whs-page);
    background-image: radial-gradient(circle at 50% 22%, var(--whs-accent-soft), transparent 34rem),
                      linear-gradient(rgba(50, 33, 58, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(50, 33, 58, .04) 1px, transparent 1px);
}
html[data-theme="light"] .auth-qr { background: #fff; }
html[data-theme="light"] .shared-access-icon,
html[data-theme="light"] .share-modal-icon {
    box-shadow: inset 0 0 0 1px var(--whs-ui-accent-border);
}