/**
 * Brand theme — Cassette.
 * Structural styles live in app.css and read these variables.
 */

/* ── Cassette ── tool-orange on near-black */
:root,
[data-theme="cassette"] {
  --bg: #0b0b0c;
  --bg-elevated: #161412;
  --surface: #1f1c1a;
  --surface-2: #2a2623;
  --surface-3: #38322e;
  --border: rgba(249, 115, 22, 0.32);
  --border-strong: rgba(249, 115, 22, 0.48);
  --text: #fafafa;
  --muted: #a1a1aa;
  --accent: #f97316;
  --accent-dim: #ea580c;
  --accent-bright: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.16);
  --accent-softer: rgba(249, 115, 22, 0.08);
  --accent-ring: rgba(249, 115, 22, 0.3);
  --accent-border: rgba(249, 115, 22, 0.55);
  --accent-inset: rgba(249, 115, 22, 0.1);
  --cyan: #fb923c;
  --cyan-soft: rgba(251, 146, 60, 0.12);
  --result: #86efac;
  --input-bg: #131314;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(234, 88, 12, 0.1);
  --hover: rgba(249, 115, 22, 0.06);
  --hover-accent: rgba(249, 115, 22, 0.12);
  --selected: #3f2412;
  --selected-strong: #523018;
  --nav-bg: linear-gradient(180deg, #ea580c 0%, #000000 100%);
  --nav-border: rgba(249, 115, 22, 0.28);
  --nav-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  --body-wash:
    radial-gradient(ellipse 100% 55% at 50% -15%, rgba(249, 115, 22, 0.12), transparent 55%),
    linear-gradient(180deg, #0b0b0c 0%, #131314 100%);
  --btn-primary-bg: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #fdba74 0%, #fb923c 40%, #f97316 100%);
  --btn-primary-shadow: 0 2px 16px rgba(234, 88, 12, 0.4);
  --btn-primary-shadow-hover: 0 4px 24px rgba(234, 88, 12, 0.5);
  --card-bg: linear-gradient(155deg, #2c241c 0%, #1a1614 100%);
  color-scheme: dark;
}

/* Card surface follows theme token */
.card {
  background: var(--card-bg, var(--surface));
}

.card.login-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow), var(--shadow-glow);
}

/* Dark scheme: status / table colours that stay readable on dark surfaces */
[data-color-scheme="dark"] {
  --status-done: #4ade80;
  --status-done-bg: rgba(74, 222, 128, 0.28);
  --status-done-border: rgba(74, 222, 128, 0.55);
  --status-current: #fbbf24;
  --status-current-bg: rgba(251, 191, 36, 0.22);
  --status-current-border: rgba(251, 191, 36, 0.55);
  --status-upcoming: #f87171;
  --status-upcoming-bg: rgba(248, 113, 113, 0.16);
  --status-upcoming-border: rgba(248, 113, 113, 0.4);
  --status-pending-row: #5c2434;
  --status-pending-row-strong: #7a2f44;
  --status-target-row: rgba(74, 222, 128, 0.2);
  --status-target-row-strong: rgba(74, 222, 128, 0.34);
  --spin-bg: var(--surface-3);
  --spin-fg: var(--text);
  --spin-hover-bg: var(--accent-soft);
  --spin-hover-fg: var(--text);
}

/* Tension table: stronger structure and contrast on dark themes */
[data-color-scheme="dark"] .tension-table {
  --tension-input-bg: var(--bg-elevated);
  --tension-input-border: var(--border-strong);
}

[data-color-scheme="dark"] .tension-table table.data {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

[data-color-scheme="dark"] .tension-table table.data th {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 650;
  border-bottom: 1px solid var(--border-strong);
}

[data-color-scheme="dark"] .tension-table table.data td {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

[data-color-scheme="dark"] .tension-table .spoke-num-cell {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-color-scheme="dark"] .tension-table .kgf-cell {
  color: var(--text);
  font-weight: 650;
}

[data-color-scheme="dark"] .tension-table .drift-cell {
  color: var(--text);
  font-weight: 650;
}

[data-color-scheme="dark"] .tension-table .meter-inp-wrap .meter-inp {
  background-color: var(--tension-input-bg) !important;
  border-color: var(--tension-input-border);
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-color-scheme="dark"] .tension-table .meter-inp-wrap .meter-inp:focus {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

[data-color-scheme="dark"] .tension-table .meter-inp-spin {
  border-left-color: var(--tension-input-border);
}

[data-color-scheme="dark"] .tension-table .meter-inp-step {
  background: var(--surface-2);
  color: var(--accent-bright);
  font-size: 0.5rem;
}

[data-color-scheme="dark"] .tension-table .meter-inp-step:hover {
  background: var(--accent-soft);
  color: var(--text);
}

[data-color-scheme="dark"] .tension-table tr.tension-pending td {
  background: var(--status-pending-row) !important;
  box-shadow: inset 3px 0 0 #fb7185;
}

[data-color-scheme="dark"] .tension-table tr.tension-pending.highlight td,
[data-color-scheme="dark"] .tension-table table.data tr.tension-pending:hover td {
  background: var(--status-pending-row-strong) !important;
}

[data-color-scheme="dark"] .tension-table tr.tension-on-target td {
  background: var(--status-target-row) !important;
  box-shadow: inset 3px 0 0 #4ade80;
}

[data-color-scheme="dark"] .tension-table tr.tension-on-target.highlight td,
[data-color-scheme="dark"] .tension-table table.data tr.tension-on-target:hover td {
  background: var(--status-target-row-strong) !important;
}

[data-color-scheme="dark"] .tension-table tr.highlight:not(.tension-pending):not(.tension-on-target) td {
  background: var(--selected) !important;
  box-shadow: inset 3px 0 0 var(--accent-bright);
}

[data-color-scheme="dark"] .tension-table .tension-row-reset {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

[data-color-scheme="dark"] .tension-table .tension-row-reset:hover {
  color: var(--accent-bright);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* Dark scheme: force hardcoded light surfaces onto theme tokens */
[data-color-scheme="dark"] .product-label-input,
[data-color-scheme="dark"] .product-name-input,
[data-color-scheme="dark"] .product-label-input:hover,
[data-color-scheme="dark"] .product-name-input:hover,
[data-color-scheme="dark"] .product-label-input:focus,
[data-color-scheme="dark"] .product-name-input:focus,
[data-color-scheme="dark"] input[type="text"],
[data-color-scheme="dark"] input[type="email"],
[data-color-scheme="dark"] input[type="tel"],
[data-color-scheme="dark"] input[type="password"],
[data-color-scheme="dark"] input[type="number"],
[data-color-scheme="dark"] input[type="search"],
[data-color-scheme="dark"] input[type="date"],
[data-color-scheme="dark"] textarea,
[data-color-scheme="dark"] select:not(.product-category-select),
[data-color-scheme="dark"] .meter-inp-wrap .meter-inp,
[data-color-scheme="dark"] input.meter-reduction-input[type="number"] {
  background-color: var(--input-bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--border-strong);
  caret-color: var(--text);
}

[data-color-scheme="dark"] .product-category-select,
[data-color-scheme="dark"] .product-category-select:hover,
[data-color-scheme="dark"] .product-category-select:focus {
  background-color: var(--input-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23a1a1aa' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.65rem center !important;
  background-size: 0.75rem 0.5rem !important;
  color: var(--text) !important;
  border-color: var(--border-strong);
  caret-color: var(--text);
}

[data-color-scheme="dark"] .product-category-select:hover,
[data-color-scheme="dark"] .product-category-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23fb923c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-color-scheme="dark"] input::placeholder,
[data-color-scheme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

[data-color-scheme="dark"] .work-log-vis-option {
  background: var(--surface-2);
  border-color: var(--border);
}

[data-color-scheme="dark"] .work-log-vis-option:has(input:checked) {
  background: var(--selected);
  border-color: var(--accent-border, var(--accent));
}

[data-color-scheme="dark"] .work-log-vis-option input[type="radio"] {
  accent-color: var(--accent-bright, var(--accent));
}

[data-color-scheme="dark"] .work-log-entry,
[data-color-scheme="dark"] .work-log-composer,
[data-color-scheme="dark"] .badge,
[data-color-scheme="dark"] .wheel-build-figure-lg {
  background: transparent;
  border-color: transparent;
}

/* Keep a faint outline on every entry; shade the bubble when selected */
[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-entry {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-entry.is-selected {
  border-color: var(--accent-border, var(--accent));
  background: var(--selected-strong, var(--selected));
  box-shadow: none;
}

[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-entry-check,
[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-select-all input[type="checkbox"] {
  accent-color: #fff;
}

[data-color-scheme="dark"] .work-log-bulk {
  background: transparent;
  border-top-color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
  border-left-color: transparent;
  border-right-color: transparent;
}

[data-color-scheme="dark"] .meter-target-card {
  background: var(--surface-2);
  border-color: var(--border);
}

[data-color-scheme="dark"] .as-built-metric {
  background: var(--surface-2);
  border-color: var(--border);
}

[data-color-scheme="dark"] .as-built-metric--good {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.22), rgba(22, 101, 52, 0.32));
}

[data-color-scheme="dark"] .as-built-metric--warn {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.18), rgba(146, 64, 14, 0.28));
}

[data-color-scheme="dark"] .as-built-metric--bad {
  border-color: rgba(248, 113, 113, 0.5);
  background: linear-gradient(145deg, rgba(248, 113, 113, 0.18), rgba(127, 29, 29, 0.28));
}

[data-color-scheme="dark"] .as-built-override-score--good {
  color: #86efac;
}

[data-color-scheme="dark"] .as-built-override-score--warn {
  color: #fbbf24;
}

[data-color-scheme="dark"] .as-built-override-score--bad {
  color: #f87171;
}

[data-color-scheme="dark"] .as-built-metric-value {
  color: var(--text);
}

[data-color-scheme="dark"] .as-built-metric--good .as-built-metric-value {
  color: #86efac;
}

[data-color-scheme="dark"] .meter-target-card .meter-reading,
[data-color-scheme="dark"] .calc-result-item .val {
  color: #86efac;
}

[data-color-scheme="dark"] .swatch-low {
  background: #fb923c;
}

[data-color-scheme="dark"] .swatch-ok {
  background: #4ade80;
}

[data-color-scheme="dark"] .swatch-high {
  background: #f87171;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"]::-webkit-slider-runnable-track {
  background: var(--surface-3);
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"]::-moz-range-track {
  background: var(--surface-3);
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-low {
  accent-color: #fb923c;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-ok {
  accent-color: #4ade80;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-high {
  accent-color: #f87171;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-low::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #fb923c 0%,
    #fb923c var(--slider-pct, 50%),
    var(--surface-3) var(--slider-pct, 50%),
    var(--surface-3) 100%
  );
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-ok::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #4ade80 0%,
    #4ade80 var(--slider-pct, 50%),
    var(--surface-3) var(--slider-pct, 50%),
    var(--surface-3) 100%
  );
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-high::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #f87171 0%,
    #f87171 var(--slider-pct, 50%),
    var(--surface-3) var(--slider-pct, 50%),
    var(--surface-3) 100%
  );
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-low::-webkit-slider-thumb,
[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-low::-moz-range-thumb {
  background: #fb923c;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-ok::-webkit-slider-thumb,
[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-ok::-moz-range-thumb {
  background: #4ade80;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-high::-webkit-slider-thumb,
[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-high::-moz-range-thumb {
  background: #f87171;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-low::-moz-range-progress {
  background: #fb923c;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-ok::-moz-range-progress {
  background: #4ade80;
}

[data-color-scheme="dark"] .tension-slider-row input[type="range"].tension-slider-high::-moz-range-progress {
  background: #f87171;
}

[data-color-scheme="dark"] .tension-bar-mark.target {
  background: #4ade80;
  opacity: 1;
}

[data-color-scheme="dark"] .lacing-step.done {
  opacity: 0.78;
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
}

[data-color-scheme="dark"] .service-tension-feedback--success {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.5);
  color: #86efac;
}

[data-color-scheme="dark"] .service-tension-line.done {
  color: #86efac;
}

[data-color-scheme="dark"] .badge-complete {
  background: rgba(74, 222, 128, 0.22);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.45);
}

[data-color-scheme="dark"] .checklist-item:has(input:checked) .checklist-item-label {
  color: #86efac;
}

[data-color-scheme="dark"] .checklist-item input[type="checkbox"] {
  accent-color: #4ade80;
}

[data-color-scheme="dark"] .hub-browser-table-wrap,
[data-color-scheme="dark"] .table-wrap,
[data-color-scheme="dark"] .spec-subnav-shell,
[data-color-scheme="dark"] .nds-mode-option,
[data-color-scheme="dark"] .empty-state,
[data-color-scheme="dark"] .login-account-row,
[data-color-scheme="dark"] .login-add-panel,
[data-color-scheme="dark"] .add-product-panel {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

[data-color-scheme="dark"] .quotes-table-wrap {
  background: transparent;
  border-color: transparent;
}

[data-color-scheme="dark"] .badge-hold-customer,
[data-color-scheme="dark"] .badge-hold-delivery,
[data-color-scheme="dark"] .badge-hold-quote,
[data-color-scheme="dark"] .badge-workflow-current {
  background: #fbbf24;
  color: #1c1917;
  border-color: #f59e0b;
}

[data-color-scheme="dark"] .wheel-status-bubble.is-active {
  border-color: var(--accent, #f97316);
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
}

[data-color-scheme="dark"] a.wheel-status-bubble:hover {
  background: var(--hover-accent, rgba(249, 115, 22, 0.12));
}

[data-color-scheme="dark"] a.wheel-status-bubble.is-active:hover {
  background: color-mix(in srgb, var(--accent) 36%, var(--surface));
}

[data-color-scheme="dark"] .work-order-package-tier:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
  border-color: var(--accent, #f97316);
}

[data-color-scheme="dark"] .work-order-package-tier-price {
  color: #fff;
}

[data-color-scheme="dark"] .badge-hold-quote {
  background: #38bdf8;
  color: #0c4a6e;
  border-color: #0ea5e9;
}

[data-color-scheme="dark"] .card-intro,
[data-color-scheme="dark"] .login-account-meta {
  color: var(--text);
  opacity: 0.82;
}

[data-color-scheme="dark"] .login-add-panel > summary {
  color: var(--text);
}

[data-color-scheme="dark"] .login-add-panel > summary::before {
  color: var(--accent-bright);
}

[data-color-scheme="dark"] .login-accounts-list .empty-state {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 500;
}

[data-color-scheme="dark"] table.data th {
  background: var(--surface-3);
  color: var(--muted);
  border-color: var(--border);
}

[data-color-scheme="dark"] table.data td {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-color-scheme="dark"] table.data tr:hover td {
  background: var(--hover-accent);
}

[data-color-scheme="dark"] .build-tabs .main-tabs {
  background: var(--bg-elevated);
}

[data-color-scheme="dark"] .work-log-pill-kind,
[data-color-scheme="dark"] .work-log-pill-phase,
[data-color-scheme="dark"] .work-log-pill-attach,
[data-color-scheme="dark"] .hub-badge:not(.hub-badge--verified):not(.hub-badge--unverified) {
  background: var(--surface-3);
  color: var(--muted);
  border-color: var(--border);
}

[data-color-scheme="dark"] .hub-badge--verified {
  background: rgba(74, 222, 128, 0.22);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.55);
}

[data-color-scheme="dark"] .hub-badge--unverified {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.5);
}

[data-color-scheme="dark"] .msg {
  color: var(--text);
}

[data-color-scheme="dark"] .msg-success {
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.45);
  color: #86efac;
}

[data-color-scheme="dark"] .msg-error {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
}

[data-color-scheme="dark"] .msg-info {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
}

[data-color-scheme="dark"] .field-hint,
[data-color-scheme="dark"] .meter-sub,
[data-color-scheme="dark"] .meter-name {
  color: var(--muted);
}

[data-color-scheme="dark"] .as-built-override-controls .as-built-score-step {
  background: var(--surface-3);
  color: var(--text);
}

[data-color-scheme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-timer):not(.btn-hold-active),
[data-color-scheme="dark"] .btn-timer {
  background: var(--accent);
  border-color: var(--accent-dim);
  color: #fff;
}

[data-color-scheme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-timer):not(.btn-hold-active):hover,
[data-color-scheme="dark"] .btn-timer:hover {
  background: var(--accent-bright);
  border-color: var(--accent);
  color: #fff;
}

[data-color-scheme="dark"] .btn-timer.is-running,
[data-color-scheme="dark"] .btn-timer.is-running:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

[data-color-scheme="dark"] .btn-danger {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}

[data-color-scheme="dark"] .btn-danger:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

[data-color-scheme="dark"] .work-log-filter.active,
[data-color-scheme="dark"] .work-log-filter.active:hover {
  background: var(--accent-bright);
  border-color: var(--accent);
  color: #0b0b0c;
}

[data-color-scheme="dark"] .spec-subtab {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dim);
  opacity: 0.72;
}

[data-color-scheme="dark"] .spec-subtab:hover {
  opacity: 0.9;
  color: #fff;
  background: var(--accent-bright);
}

[data-color-scheme="dark"] .spec-subtab.active {
  background: var(--accent-bright);
  color: #0b0b0c;
  border-color: var(--accent);
  opacity: 1;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
}

[data-color-scheme="dark"] .spec-subtab.spec-subtab-missing:not(.active) {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
  opacity: 0.85;
}

[data-color-scheme="dark"] .spec-subtab.spec-subtab-done:not(.active) {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
  opacity: 0.85;
}

[data-color-scheme="dark"] .spec-subtab.spec-subtab-missing.active {
  background: #ef4444;
  color: #fff;
  opacity: 1;
  box-shadow: inset 0 3px 0 #fecaca;
}

[data-color-scheme="dark"] .spec-subtab.spec-subtab-done.active {
  background: #22c55e;
  color: #052e16;
  opacity: 1;
  box-shadow: inset 0 3px 0 #bbf7d0;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  background: color-mix(in srgb, var(--accent-dim) 55%, var(--bg-elevated));
  color: rgba(255, 255, 255, 0.72);
  border: none;
  border-radius: 14px 14px 0 0;
  margin: 0;
  padding: 0.75rem 0.5rem;
  opacity: 1;
  overflow: hidden;
  text-align: center;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab:hover:not(.disabled):not(.active) {
  background: color-mix(in srgb, var(--accent) 70%, var(--bg-elevated));
  color: #fff;
  border: none;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab.disabled,
[data-color-scheme="dark"] .build-tabs .main-tabs .tab.disabled:hover {
  background: color-mix(in srgb, var(--accent-dim) 22%, var(--bg));
  color: rgba(255, 255, 255, 0.32);
  opacity: 1;
  cursor: not-allowed;
  filter: saturate(0.35);
}

[data-color-scheme="dark"] .build-tabs.card {
  --build-tabs-radius: 20px;
  /* Match page so leftover strip past the last tab doesn't read as a grey block */
  background: var(--bg);
  border: none;
  border-radius: var(--build-tabs-radius);
  overflow: hidden;
  box-shadow: none;
  filter: none;
}

/* Workflow card above tabs: drop the orange glow that washes the strip */
[data-color-scheme="dark"] .workflow-card.card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

[data-color-scheme="dark"] .build-tabs .main-tabs {
  background: var(--bg);
  border-bottom: 4.5px solid var(--accent-bright);
  border-radius: 0;
  align-items: flex-end;
  /* Tabs fill the strip edge-to-edge with equal widths */
  padding: 0;
  gap: 0.35rem;
  position: relative;
}

[data-color-scheme="dark"] .build-tabs .main-tabs::after {
  content: none;
}

/* Outer corners match the card so active orange reads as the rounded chrome */
[data-color-scheme="dark"] .build-tabs .main-tabs .tab:first-child {
  border-radius: var(--build-tabs-radius) 14px 0 0;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab:last-child {
  border-radius: 14px var(--build-tabs-radius) 0 0;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab:first-child:last-child {
  border-radius: var(--build-tabs-radius) var(--build-tabs-radius) 0 0;
}

[data-color-scheme="dark"] .build-tabs .main-tabs .tab.active,
[data-color-scheme="dark"] .build-tabs .main-tabs .tab.active:hover,
[data-color-scheme="dark"] .build-tabs .main-tabs .tab.active:focus,
[data-color-scheme="dark"] .build-tabs .main-tabs .tab.active:focus-visible {
  /* Same orange as the frame so the tab + border read as one piece */
  background: var(--accent-bright);
  color: #0b0b0c;
  border: none;
  opacity: 1;
  position: relative;
  z-index: 2;
  margin-bottom: -4.5px;
  padding-bottom: calc(0.75rem + 4.5px);
  box-shadow: none;
  outline: none;
}

[data-color-scheme="dark"] .build-tabs .tab-panel {
  --build-panel-gutter: 0.675rem;
  background: var(--accent-bright);
  color: #0b0b0c;
  border: none;
  border-radius: 0;
  padding: var(--build-panel-gutter);
}

[data-color-scheme="dark"] .build-tabs .tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--build-panel-gutter);
}

/* Nested stacks (spec sections, etc.) use the same gutter as the orange frame */
[data-color-scheme="dark"] .build-tabs .tab-panel .spec-section.active {
  display: flex;
  flex-direction: column;
  gap: var(--build-panel-gutter);
}

/* Every card inside the orange frame — nested hosts included — must not glow,
   or the chrome reads as a different orange than the active tab. */
[data-color-scheme="dark"] .build-tabs .tab-panel .card,
[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: none;
  margin: 0;
  padding: 1.15rem 1.25rem;
  color: var(--text);
}

[data-color-scheme="dark"] .build-tabs .tab-panel .work-log-quick-host,
[data-color-scheme="dark"] .build-tabs .tab-panel .spec-measure-help,
[data-color-scheme="dark"] .build-tabs .tab-panel .spoke-tensions-wrap,
[data-color-scheme="dark"] .build-tabs .tab-panel .work-order-grand-total {
  margin: 0;
}

[data-color-scheme="dark"] .build-tabs .tab-panel .spoke-tensions-wrap,
[data-color-scheme="dark"] .build-tabs .tab-panel .wheel-overview {
  gap: var(--build-panel-gutter);
}

[data-color-scheme="dark"] .build-tabs .tab-panel .work-order-grand-total {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: none;
  color: var(--text);
}

[data-color-scheme="dark"] .build-tabs .tab-panel .spec-subnav-shell,
[data-color-scheme="dark"] .build-tabs .tab-panel .calc-panel {
  color: var(--text);
}

[data-color-scheme="dark"] .wheel-picker .btn.active:not(.btn-primary),
[data-color-scheme="dark"] .wheel-picker .btn.active:not(.btn-primary):hover {
  background: var(--btn-primary-bg, #f97316) !important;
  border-color: var(--accent-dim, #ea580c) !important;
  color: #fff !important;
  opacity: 1;
}

/* Primary buttons use white labels on dark themes (sapphire, navy, etc.) */
[data-color-scheme="dark"] .btn-primary,
[data-color-scheme="dark"] .btn-primary:hover {
  color: #fff;
}

[data-color-scheme="dark"] .btn-hold-active,
[data-color-scheme="dark"] .btn-hold-active:hover {
  background: #fbbf24 !important;
  border-color: #f59e0b !important;
  color: #1c1917 !important;
}

/* Theme picker in the top nav */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
}

.theme-picker-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.theme-picker select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 8.5rem;
  max-width: 11rem;
  padding: 0.28rem 1.6rem 0.28rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.12);
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-picker select option {
  color: #1c1917;
  background: #fff;
}

.theme-picker select:hover,
.theme-picker select:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}

@media (max-width: 720px) {
  .theme-picker-label { display: none; }
}

/* ── Scrollbars (Cassette) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--surface-3)) var(--bg-elevated);
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-elevated);
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 42%, var(--surface-3));
  border-radius: 999px;
  border: 2px solid var(--bg-elevated);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-bright, var(--accent));
  border: 2px solid var(--bg-elevated);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  background-clip: padding-box;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: var(--bg-elevated);
}