/* ============================================================
   THIOS CONFIG'R — BLUEPRINT REDESIGN LAYER
   Loaded AFTER configurator.min.css (see index.php). Additive override
   that brings the configurator UI in line with the site blueprint:
   warm paper + teal dot-field, angular (0 radius), hairlines not shadows,
   deep-teal + gold-CTA-only, Space Mono labels. Remove the one <link> to revert.
   ============================================================ */

:root{
  --rd-paper:#F4F1E9; --rd-paper-2:#ECE7DA; --rd-paper-glass:rgba(244,241,233,.92);
  --rd-ink:#1E2E2A; --rd-head:#0F4A47; --rd-muted:#4F5A56;
  --rd-teal:#15635E; --rd-teal-strong:#0F4A47;
  --rd-teal-line:rgba(21,99,94,.30); --rd-teal-hair:rgba(21,99,94,.16);
  --rd-dot:rgba(21,99,94,.15); --rd-gold:#E8AF00;
  --rd-grid-tile:96px 55.426px; --rd-grid-alpha:.1;
  --rd-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rd-sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rd-radius:0; --rd-transition:.18s ease;
}

/* ============================ BACKGROUND: paper + honeycomb dot-field ============================ */
#configurator-container{background:var(--rd-paper) !important}
#configurator-container::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--rd-grid-alpha);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'55.426'%20viewBox%3D'0%200%2096%2055.426'%3E%3Cpath%20d%3D'M32%2C0%20L64%2C0%20M64%2C0%20L80%2C27.713%20M80%2C27.713%20L64%2C55.426%20M64%2C55.426%20L32%2C55.426%20M32%2C55.426%20L16%2C27.713%20M16%2C27.713%20L32%2C0%20M0%2C27.713%20L16%2C27.713%20M80%2C27.713%20L96%2C27.713'%20fill%3D'none'%20stroke%3D'%2315635E'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
  background-size:var(--rd-grid-tile);background-repeat:repeat;
}
#viewport{position:relative;z-index:1;background:transparent !important}   /* was a sky-blue gradient; transparent so the paper + dots show behind the 3D */

/* ============================ HEADER / TOOLBAR ============================ */
#header{
  background:var(--rd-paper-glass) !important;
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--rd-teal-hair) !important;box-shadow:none !important;color:var(--rd-ink) !important;
}
#header h1{color:var(--rd-head) !important;font-family:var(--rd-sans) !important;font-style:normal !important}
/* CONFIG'R badge is a white grunge wordmark (built for dark bg). On the paper header
   brightness(0) forced it black, hiding its white. Show the white on a compact teal chip,
   and make the adjacent "by Thios" legible on paper (it was white → invisible). */
.header-logo{filter:brightness(0);opacity:.92;height:30px}
.header-branding-link span{color:var(--rd-ink) !important;opacity:.5}
.header-home-link,.header-branding-link{color:var(--rd-ink) !important}
.btn-label,.unit-toggle-btn,.row2-btn{
  font-family:var(--rd-mono) !important;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem !important;
}

/* ============================ BUTTONS ============================ */
.btn,.header-btn,.row2-btn,.btn-action-primary,.btn-action-secondary,.btn-action-danger,
.btn-icon,.unit-toggle-btn,.start-over-btn,.undo-redo-btn,.camera-preset-btn,.screenshot-res-btn{
  border-radius:var(--rd-radius) !important;box-shadow:none !important;background-image:none !important;
  transition:var(--rd-transition) !important;font-family:var(--rd-mono) !important;
  text-transform:uppercase;letter-spacing:.08em;
}
/* default header buttons → ghost teal on paper */
.header-btn,.row2-btn,.btn-icon,.undo-redo-btn,.start-over-btn{
  background:transparent !important;color:var(--rd-teal) !important;border:1px solid var(--rd-teal-line) !important;
}
.header-btn:hover,.row2-btn:hover,.btn-icon:hover,.undo-redo-btn:hover,.start-over-btn:hover{
  background:transparent !important;border-color:var(--rd-teal) !important;color:var(--rd-teal-strong) !important;transform:none !important;
}
/* colored accents (cyan/teal/pink) all normalize to the blueprint; Share stays but angular */
.header-btn.cyan,.header-btn.teal,.header-btn.pink,.share-accent{color:var(--rd-teal) !important}
/* primary action = the one gold CTA */
.btn-action-primary,.get-quotes-btn,.cta-primary{
  background:var(--rd-gold) !important;color:var(--rd-ink) !important;border:1px solid var(--rd-gold) !important;
}
.btn-action-primary:hover,.get-quotes-btn:hover,.cta-primary:hover{
  background:transparent !important;border-color:var(--rd-gold) !important;color:var(--rd-ink) !important;transform:none !important;
}
.btn-action-secondary{background:transparent !important;color:var(--rd-teal) !important;border:1px solid var(--rd-teal-line) !important}
.btn-action-danger{background:transparent !important;color:#B23B2E !important;border:1px solid rgba(178,59,46,.4) !important}
/* unit toggle (IN/CM) → angular segmented hairline */
.header-unit-toggle{border:1px solid var(--rd-teal-line) !important;border-radius:0 !important;background:transparent !important}
.unit-toggle-btn{background:transparent !important;color:var(--rd-muted) !important;border-radius:0 !important}
.unit-toggle-btn.active{background:var(--rd-teal) !important;color:#fff !important}

/* ============================ PANELS / CARDS / TABS ============================ */
#module-library,#module-preview-section,.plans-price-hint,.panel,[class*="-panel"],
.selected-module-card,.module-card-library,.module-card-v3,.kit-card,.env-panel,.material-panel,.side-panel{
  background:var(--rd-paper) !important;border:1px solid var(--rd-teal-hair) !important;
  border-radius:var(--rd-radius) !important;box-shadow:none !important;
}
.module-card-library:hover,.module-card-v3:hover,.selected-module-card:hover,.kit-card:hover{
  border-color:var(--rd-teal) !important;box-shadow:none !important;transform:none !important;
}
.module-card-library.selected,.module-card-v3.selected,.kit-card.selected,.kit-card.active{border-color:var(--rd-gold) !important}
/* category tabs → mono, hairline underline, teal active (no pills) */
.category-tabs{border-bottom:1px solid var(--rd-teal-hair) !important}
.category-tab{
  background:transparent !important;border-radius:0 !important;color:var(--rd-muted) !important;box-shadow:none !important;
  font-family:var(--rd-mono) !important;text-transform:uppercase;letter-spacing:.08em;
}
.category-tab.active{color:var(--rd-head) !important;border-bottom:2px solid var(--rd-teal) !important;background:transparent !important}
.category-tab.active i,.category-tab:hover:not(.active) i{color:var(--rd-teal) !important}
/* material swatches → angular hairline chips, gold ring when active */
.material-btn{border-radius:0 !important;box-shadow:none !important;border:1px solid var(--rd-teal-hair) !important}
.material-btn:hover{border-color:var(--rd-teal) !important}
.material-btn.active{border:2px solid var(--rd-gold) !important;box-shadow:none !important}

/* ============================ TYPOGRAPHY / MISC ============================ */
h1,h2,h3,h4,.panel-title,.section-title,.price-value{color:var(--rd-head) !important;font-family:var(--rd-sans) !important;font-weight:500 !important}
.price-hint-label,.plans-price-hint,[class*="label"]{color:var(--rd-muted) !important}
input,select,textarea{border-radius:0 !important;border:1px solid var(--rd-teal-line) !important;background:var(--rd-paper) !important;color:var(--rd-ink) !important}

/* ============================ ANGULAR SWEEP + SHADOW KILL ============================ */
*,*::before,*::after{border-radius:0 !important}
[class*="btn"],[class*="card"],[class*="panel"],[class*="-box"],.chip,.tag,.badge,.toast,.modal,
.dropdown,.popover,.tooltip,input,select,textarea,button{box-shadow:none !important}
/* protect genuinely round UI (swatches, spinners, social/close FABs, dots, checkboxes) */
.skeleton-circle,.color-picker-input,.input-color,.color-picker-small,.color-preset,.build-mat-dot,
.spinner,.kit-loading-spinner,.light-gate-spinner,.social-btn,.social-share-btn,.share-btn,
.ar-modal-close,.kit-modal-close,.light-gate-close,#mobile-share-fab,.module-add-btn,.module-quick-add,
.hero-dot,.dot,.color-swatch,[class*="circle"],[class*="avatar"],[class*="-fab"],[class*="radio"],
input[type=checkbox],input[type=radio]{border-radius:50% !important}

/* ============================ LIVING CONSTELLATION ============================ */
/* constellation retired: the static hex grid is the configurator background now */

/* ============ DARK CHROME -> PAPER + HAIRLINE (audit sweep) ============ */
/* desktop bottom "post-design" banner (was navy #1a2332) */
.post-design-banner{background:var(--rd-paper) !important;border-top:1px solid var(--rd-teal-line) !important;box-shadow:none !important}
.post-design-text,.post-design-content,.post-design-title{color:var(--rd-ink) !important}
/* mobile cost ribbon (was black rgba(20,20,20,.94)) */
.mobile-cost-ribbon{background:var(--rd-paper) !important;border-top:1px solid var(--rd-teal-line) !important;box-shadow:none !important}
.mobile-cost-ribbon,.mobile-cost-ribbon span,.mobile-cost-ribbon .cost-label{color:var(--rd-ink) !important}
.mobile-cost-ribbon .cost-value,.mobile-cost-ribbon strong,.mobile-cost-ribbon b{color:var(--rd-head) !important}
/* floating edit panel container + header (was teal --color-primary) */
.inline-edit-container,.inline-edit-container.floating,.floating-edit-panel,.module-edit-container{background:var(--rd-paper) !important;border:1px solid var(--rd-teal-line) !important;box-shadow:none !important}
.inline-edit-header,.module-edit-header,.edit-panel-header{background:transparent !important;color:var(--rd-head) !important;border-bottom:1px solid var(--rd-teal-hair) !important}
.inline-edit-header *,.module-edit-header *,.edit-panel-header *{color:var(--rd-head) !important}
/* mobile bottom nav (View/Modules/Quote) -> paper + hairline */
#mobile-nav,.mobile-nav{background:var(--rd-paper) !important;border-top:1px solid var(--rd-teal-line) !important;box-shadow:none !important}
.mobile-nav-item{color:var(--rd-muted) !important;background:transparent !important}
.mobile-nav-item.active{color:var(--rd-teal) !important}
.mobile-nav-item.active svg,.mobile-nav-item svg{color:inherit !important}
/* tools FAB (bottom-right): teal gradient -> gold */
#mobile-share-fab{background:var(--rd-gold) !important;background-image:none !important;border-color:var(--rd-gold) !important;box-shadow:none !important}
#mobile-share-fab i,#mobile-share-fab svg{color:var(--rd-ink) !important}

/* ============ FLATTEN GRADIENT CHROME + KILL STRAY RADII/SHADOWS (audit pass 2) ============ */
/* the configurator bundle uses gradients + pill radii on floating CTAs/indicators; blueprint is flat + angular */
.floating-share-cta,.mobile-ar-fab,.floating-quotes-cta,.quote-submit-btn,.mobile-stats-bar,
.native-share-btn,.annotate-indicator,.measure-indicator,.progress-bar-fill,.loading-progress-bar,
.confirm-dialog,.confirm-dialog-btn{background-image:none !important;border-radius:0 !important;box-shadow:none !important}
/* money CTAs -> flat gold */
.floating-quotes-cta,.quote-submit-btn{background:var(--rd-gold) !important;border:1px solid var(--rd-gold) !important}
.floating-quotes-cta,.floating-quotes-cta *,.quote-submit-btn,.quote-submit-btn *{color:var(--rd-ink) !important}
/* accents/features/indicators -> flat teal */
.floating-share-cta,.mobile-ar-fab,.mobile-stats-bar,.native-share-btn,.annotate-indicator,.measure-indicator,.progress-bar-fill,.loading-progress-bar{background:var(--rd-teal) !important}
.floating-share-cta,.floating-share-cta *,.mobile-ar-fab,.mobile-ar-fab *{color:#fff !important}
/* confirm dialog -> paper + hairline (was shadowed) */
.confirm-dialog{border:1px solid var(--rd-teal-line) !important;background:var(--rd-paper) !important}
/* tools panel icons: uniform teal line-work (were multi-colored .tool-item-icon.purple/red/green/gold/etc.) */
.tool-item-icon,.tool-icon-purple,[class*="tool-item-icon"]{color:var(--rd-teal) !important}
/* hero/embed: hide the "Plans from $29" hint (store link; commerce paused, decluttering the hero) */
.embed-mode #plans-price-hint,.embed-mode .plans-price-hint{display:none !important}

/* ── TEMP (Pete, 2026-09): hide the THIOS scene watermark "for now" ──────────
   Element is #configurator-watermark in index.php. Reverse by deleting this block. */
.configurator-watermark { display: none !important; }

/* ── LIGHT THEME PASS (2026-09): blueprint the remaining dark-slab overlays ──── */

/* Welcome-back resume banner (was dark navy glass) */
.welcome-back-banner{
  background:var(--rd-paper-glass) !important;
  border:1px solid var(--rd-teal-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.welcome-back-title{color:var(--rd-head) !important;font-family:var(--rd-sans) !important}
.welcome-back-subtitle{color:var(--rd-muted) !important;font-family:var(--rd-mono) !important;font-size:.72rem !important;letter-spacing:.03em}
.welcome-back-btn{border-radius:0 !important;font-family:var(--rd-mono) !important;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem !important;transition:var(--rd-transition) !important}
.welcome-back-btn:hover{transform:none !important}
.welcome-back-btn.primary{background:var(--rd-teal) !important;color:#fff !important;border:1px solid var(--rd-teal) !important}
.welcome-back-btn.primary:hover{background:var(--rd-teal-strong) !important}
.welcome-back-btn.secondary{background:transparent !important;color:var(--rd-teal) !important;border:1px solid var(--rd-teal-line) !important}
.welcome-back-btn.secondary:hover{background:transparent !important;border-color:var(--rd-teal) !important;color:var(--rd-teal-strong) !important}

/* Post-design bottom bar (was dark navy #1a2332) */
.post-design-banner{
  background:var(--rd-paper-glass) !important;
  color:var(--rd-ink) !important;
  border-top:1px solid var(--rd-teal-line) !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px);
}
.post-design-text{color:var(--rd-ink) !important;font-family:var(--rd-sans) !important}
.post-design-text strong{color:var(--rd-head) !important}
.post-design-btn{border-radius:0 !important;font-family:var(--rd-mono) !important;text-transform:uppercase;letter-spacing:.06em;box-shadow:none !important;transition:var(--rd-transition) !important}
.post-design-btn:hover{transform:none !important}
.post-design-primary{background:var(--rd-gold) !important;color:var(--rd-ink) !important;border:1px solid var(--rd-gold) !important}
.post-design-primary:hover{background:transparent !important;color:var(--rd-ink) !important}
.post-design-secondary{background:transparent !important;color:var(--rd-teal) !important;border:1px solid var(--rd-teal-line) !important}
.post-design-secondary:hover{background:transparent !important;border-color:var(--rd-teal) !important}
.post-design-dismiss{color:var(--rd-muted) !important}
.post-design-dismiss:hover{color:var(--rd-ink) !important}

/* Close the 5px paper gap under the mobile Est. Cost ribbon — sit it flush on the 70px nav */
#mobile-cost-ribbon{bottom:70px !important}

/* ── Mobile chrome consolidation (html.mobile-view = ≤1024, not just ≤768) ─────
   The mobile bottom-nav + Est.Cost ribbon + FAB + floating moon all activate at
   ≤1024 (MOBILE_BREAKPOINT in mobile-panel-v2.js), but this consolidation used to
   stop at ≤768 — leaving a 769–1024 dead zone with a redundant canvas FAB AND a
   floating moon AND a Tools menu that dropped its mobile-only items (so the moon
   was the only theme control there). Track the full mobile-view range: one
   coherent mobile layout, everything reached through the toolbar Tools menu. */
@media (max-width: 1024px) {
  #mobile-share-fab { display: none !important; }               /* drop the canvas FAB */
  #share-menu-btn   { display: none !important; }               /* redundant with the Tools menu */
  #theme-toggle-btn { display: none !important; }               /* day/night lives in the Tools menu */
  .header-branding-link { max-width: 140px; overflow: hidden; } /* tighten the oversized logo → room */
  #more-tools-btn { display: inline-flex !important; }          /* surface Tools as the far-right icon */
  #more-tools-btn .btn-label { display: none !important; }      /* icon-only */
  .mobile-only-tool { display: flex !important; }               /* Night Mode / Share / Interior / Walk / Start Over in the menu */
}

/* Share opened from the Tools menu on mobile — anchor its panel top-right */
@media (max-width: 1024px) {
  #share-dropdown { position: fixed !important; top: 55px !important; right: 10px !important; left: auto !important; bottom: auto !important; max-height: 78vh; overflow-y: auto; }
}

/* ── DEEP POLISH round 1 (2026-09): blueprint consistency ─────────────────── */

/* Buttons don't inherit font-family, so the primary CTAs + dialog buttons were
   rendering in Arial. Pin the blueprint sans (Space Grotesk). */
.cta-primary,.cta-secondary,.cta-tertiary,.confirm-dialog-btn,#panel-close-handle,
#get-quotes-btn,#export-list-btn,#checkout-btn{ font-family:var(--rd-sans) !important; }

/* Tools / share menu icons were a 9-colour rainbow (cyan/purple/pink/green/orange…).
   Unify to teal for the calm blueprint; reserve red for destructive items only. */
.tool-item-icon{ color:var(--rd-teal) !important; }
.tool-item.danger .tool-item-icon,.tool-item-icon.red{ color:#B23B2E !important; }
/* PDF Export carries a legacy `.red` colour class but isn't destructive — the
   danger-red rule above caught it, leaving it the lone red icon in the share
   sheet. Restore it to teal (later + equal specificity wins). */
.tool-item-icon.fa-file-pdf{ color:var(--rd-teal) !important; }

/* Foundation toggle labels (Plinth / Trailer / Casters) were 10.4px — below the
   readable minimum. Nudge up + tighten to a blueprint label. */
.foundation-btn-v2 span{ font-size:11px !important; letter-spacing:.01em; }

/* ── DEEP POLISH round 3 (2026-09): kit picker "What are you building?" ──────
   The picker panel was a dark charcoal box (rgb 37,37,37 + near-white text) on
   the paper/teal site — the biggest "old theme" tell. The cards inside were
   already blueprint (paper + teal hairline + radius 0); only the panel, subtitle
   and the round close button were off. Repaint the panel to paper. */
#kit-selection-modal .kit-modal-content{
  background:var(--rd-paper) !important;
  color:var(--rd-ink) !important;
  border:1px solid var(--rd-teal-line) !important;
  border-radius:0 !important;
  box-shadow:0 12px 40px rgba(30,46,42,.22) !important;
}
#kit-selection-modal .kit-modal-subtitle{ color:var(--rd-muted) !important; }
#kit-selection-modal .kit-card{ color:var(--rd-ink) !important; }  /* base ink; teal labels keep their colour */
/* Round (50% radius, Arial) close button → squared blueprint chip */
#kit-selection-modal .kit-modal-close{
  background:var(--rd-paper) !important;
  color:var(--rd-ink) !important;
  border:1px solid var(--rd-teal-line) !important;
  border-radius:0 !important;
  font-family:var(--rd-sans) !important;
}
#kit-selection-modal .kit-modal-close:hover{ color:var(--rd-teal) !important; border-color:var(--rd-teal) !important; }

/* ── DEEP POLISH round 4 (2026-09): the last two white overlays ──────────────
   The build-summary / light-gate content panel and the onboarding coach-mark
   tooltip were pure #fff with a heavy black drop-shadow — the only non-paper
   chrome left in the configurator. Repaint to paper + teal hairline so they
   match every other blueprint modal. (Radius is already zeroed by the universal
   config'r sweep.) The coach-mark arrow now takes the tooltip's own fill (set in
   index.php positionTooltip) — a soft drop-shadow makes the paper pointer read
   against both the dimmed canvas and light targets. */
.light-gate-content{
  background:var(--rd-paper) !important;
  border:1px solid var(--rd-teal-line) !important;
  box-shadow:0 12px 40px rgba(30,46,42,.22) !important;
}
.onboarding-tooltip{
  background:var(--rd-paper) !important;
  border:1px solid var(--rd-teal-line) !important;
  box-shadow:0 6px 20px rgba(30,46,42,.18) !important;
}
#onboarding-arrow{ filter:drop-shadow(0 1px 1.5px rgba(30,46,42,.30)); }

/* ── DEEP POLISH round 5 (2026-09): confirm dialog ──────────────────────────
   The overlay centres via `display:flex` + align/justify-center, but the show
   state adds a global `.visible` utility whose `display:block !important` won
   the cascade → the dialog rendered top-left instead of centred. Restore flex
   with a more specific selector (0,2,0 beats the bare `.visible`). */
.confirm-dialog-overlay.visible{ display:flex !important; }
/* Warning/caution icon was pure black (#000, off-palette) — amber on the paper. */
.confirm-dialog-icon,.confirm-dialog-icon i{ color:var(--rd-gold) !important; }

/* ── DEEP POLISH round 6 (2026-09): kit picker on mobile ────────────────────
   .kit-grid (the card wrapper) has a near-black bg (#1a1a1a) that framed the
   cards as a dark box on mobile — single-column, so the grid bg shows around
   them (on the paper picker). Make it transparent so the cards sit on paper.
   The 32px title also wrapped to two oversized lines on a phone; trim it. */
#kit-selection-modal .kit-grid{ background:transparent !important; }
@media (max-width:768px){ #kit-selection-modal .kit-modal-title{ font-size:24px !important; } }

/* ── DEEP POLISH round 7 (2026-09): mobile module drawer ────────────────────
   mobile-ux-v2.css themes the mobile module drawer as a dark "Star Trek console"
   by DEFAULT (--console-* = #1a1a1a / #2d2d2d / #fff text), only going light when
   body.day-mode is set — which isn't reliably set on mobile, so the whole drawer
   (category tabs, foundation buttons, module cards) rendered dark, with WHITE
   card titles that were invisible on the paper cards. Repoint the console theme
   vars to the blueprint so the drawer is always paper + ink (consistent with the
   rest of the chrome, which stays light in night mode too). */
@media (max-width: 1024px){
  html.mobile-view{
    --console-bg: var(--rd-paper) !important;
    --console-panel: var(--rd-paper) !important;
    --console-card: var(--rd-paper) !important;
    --console-card-expanded: var(--rd-paper-2) !important;
    --console-text: var(--rd-ink) !important;
    --console-text-secondary: var(--rd-muted) !important;
    --console-border: var(--rd-teal-line) !important;
  }
  /* The drawer backdrop (#panel-overlay, z-index 4998) sat ABOVE the drawer
     (z-index 400), so its rgba(0,0,0,.5) scrim greyed out the drawer content
     itself (masked before, when the drawer was dark). Lift the drawer over it. */
  html.mobile-view #module-library.slide-panel{ z-index: 4999 !important; }
  /* Sticky preview bar text ("Choose a Module" / hint) was white — invisible on
     the now-paper bar. (Hardcoded white, not a --console- var.) */
  html.mobile-view .inline-preview-name{ color: var(--rd-ink) !important; }
  html.mobile-view .inline-preview-desc{ color: var(--rd-muted) !important; }

  /* ── Quote panel (#build-summary) teal bars ──
     The header ("YOUR BUILD") and the stats bar are flat teal (brand accent),
     but their text picked up the --console-text override (ink) / --rd-head →
     dark-on-teal, nearly invisible. Give the teal bars light text (values were
     already white). Also the tertiary CTA was faint #888 → teal link. */
  html.mobile-view #build-summary .drawer-header,
  html.mobile-view #build-summary .drawer-header *{ color: var(--rd-paper) !important; }
  html.mobile-view #build-summary .mobile-stat-label{ color: rgba(255,255,255,.8) !important; }
  html.mobile-view #build-summary .cta-tertiary{ color: var(--rd-teal) !important; }
}

/* ── DAY/NIGHT DROPPED (Pete, 25 Sep 2026) ──────────────────────────────────
   Night mode filled the 3D area with dark navy while the toolbar/panels stayed
   paper — a half-dark/half-light clash that also hid the paper+hex-dot blueprint.
   The config'r is now always the clean light blueprint. Hide every control that
   changed the time-of-day / darkened the scene (a script in index.php clears any
   saved 'night' + pins the scene to day). Weather/environment presets are left
   as-is — they don't darken the paper background. */
#theme-toggle-btn,                 /* floating moon quick-toggle */
#theme-toggle-tool,                /* mobile Tools-menu "Night Mode" (also removed from the DOM) */
#day-night-toggle,                 /* Dawn/Noon/Dusk/Night presets */
#sun-btn, #sun-btn-r2,             /* the two Sun-Position triggers (menu + toolbar) */
#sun-slider-panel,                 /* Sun-Position tool window */
#props-sun{ display: none !important; }  /* props "Sun" section */

/* ── Mobile Tools menu overflow ─────────────────────────────────────────────
   The Tools dropdown has 16 items (~787px) with no max-height or scroll, so it
   overflowed the bottom of the phone and the last items (My Designs / Tour /
   Start Over) were cut off behind the ribbon + nav, unreachable. Cap its height
   to fit above the bottom chrome and let it scroll. */
@media (max-width: 1024px){
  #more-tools-dropdown{ max-height: calc(100dvh - 170px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}

/* "Show Lines in 3D" (.dimension-toggle-btn) toggles gold (off) ↔ teal (on) but
   had white text in BOTH — white-on-gold is low-contrast (the blueprint's gold
   buttons use ink text). Ink on the gold/off state; keep white on the teal/on. */
.dimension-toggle-btn:not(.active), .dimension-toggle-btn:not(.active) *{ color: var(--rd-ink) !important; }

/* Camera Views presets used a generic bootstrap-ish theme (white buttons, gray
   borders, pure-black icons/labels, and a cyan/pale-blue "inside" highlight —
   #17a2b8, off-palette). Blueprint them: paper + teal hairline + ink, with a
   teal-tinted active/Interior state. */
.camera-preset-btn{ background: var(--rd-paper) !important; border-color: var(--rd-teal-line) !important; color: var(--rd-ink) !important; }
.camera-preset-btn i{ color: var(--rd-ink) !important; }
.camera-preset-btn:hover{ border-color: var(--rd-teal) !important; }
.camera-preset-btn.inside, .camera-preset-btn.active, .camera-preset-btn.selected{ background: var(--rd-paper-2) !important; border-color: var(--rd-teal) !important; color: var(--rd-teal) !important; }
.camera-preset-btn.inside i, .camera-preset-btn.active i, .camera-preset-btn.selected i{ color: var(--rd-teal) !important; }

/* Scene panel background + weather options were light-gray (#f5f5f5) with black
   text — same generic theme as the camera presets. Match the blueprint. */
.env-option, .weather-option{ background: var(--rd-paper) !important; color: var(--rd-ink) !important; border-color: var(--rd-teal-line) !important; }
.env-option i, .weather-option i{ color: var(--rd-ink) !important; }
.env-option.active, .env-option.selected, .weather-option.active, .weather-option.selected{ background: var(--rd-paper-2) !important; border-color: var(--rd-teal) !important; color: var(--rd-teal) !important; }
.env-option.active i, .env-option.selected i, .weather-option.active i, .weather-option.selected i{ color: var(--rd-teal) !important; }

/* ── Tool-panel sweep (25 Sep) ──────────────────────────────────────────────
   The config'r's tune panel + tool windows shipped a generic light theme the
   blueprint never fully converted. Two fixes here:
   (1) .props-header (collapsible section titles) only got full-width flex at
       ≥901px, so on mobile the universal *{padding:0} reset left them as tiny
       inline-block chips jammed top-left with the icon clipped. Restore the
       full-width header on mobile, and blueprint the bar (paper-2 + ink, teal
       title icon, muted chevron).
   (2) .tune-option (material/option buttons) + .tool-btn were light-gray with
       black/#333 text → paper + ink + teal hairline, teal-tinted active. */
@media (max-width: 900px){
  .props-header{ display:flex !important; width:100% !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; padding:10px 14px !important; box-sizing:border-box !important; }
}
.props-header{ background: var(--rd-paper-2) !important; color: var(--rd-ink) !important; border-color: var(--rd-teal-line) !important; }
.props-header i:not(.props-chevron){ color: var(--rd-teal) !important; }
.props-header .props-chevron{ color: var(--rd-muted) !important; }

.tune-option, .tool-btn{ background: var(--rd-paper) !important; color: var(--rd-ink) !important; border-color: var(--rd-teal-line) !important; }
.tune-option.active, .tune-option.selected{ background: var(--rd-paper-2) !important; border-color: var(--rd-teal) !important; color: var(--rd-teal) !important; }
.tune-option.active i, .tune-option.selected i{ color: var(--rd-teal) !important; }

/* Kit Wizard modal was a white generic theme (white container + white option
   cards + black icons + a faint #999 "Expert Mode" link). The option cards are
   inline-styled by wizard.js with no class (active = 2px teal border), so paper
   the container + cards (the active card's JS teal border keeps distinguishing
   it), ink the icons, and teal the skip link. */
.wizard-container{ background: var(--rd-paper) !important; }
.wizard-options button{ background: var(--rd-paper) !important; }
.wizard-options button i{ color: var(--rd-ink) !important; }
.wizard-skip{ color: var(--rd-teal) !important; }

/* Active Tools-menu item (e.g. Measure while measuring) had a teal background
   but kept dark ink text/icon → low contrast. White label + icon on teal for
   any active .tool-item (the shortcut-hint keeps its own light chip). The
   measure-mode indicator itself is already teal + white. */
.tool-item.active{ color: #fff !important; }
.tool-item.active .tool-item-icon{ color: #fff !important; }

/* Finish the tool-panel sweep: the popup tool windows (Camera / Scene / Explode /
   Sun) and the My Designs modal still had a pure-white body — the last non-paper
   chrome. Paper them (header bar to paper-2 for a subtle distinction). */
.tool-window, .save-modal{ background: var(--rd-paper) !important; }
.tool-window-header{ background: var(--rd-paper-2) !important; }

/* ── Mobile: 16px text inputs to prevent iOS zoom-on-focus ────────────────────
   The configurator bundle has no global input rule; the quote/lead/save/share
   fields could zoom on focus. 16px floor only (no blanket 44px — it would blow
   out the dense toolbar). */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,select{font-size:16px !important}
}