/* ==========================================================================
Interactive tools — UniFi-inspired redesign (Storage Calculator + WiFi Planner)
Loaded after cameras.css on /surveillance-storage-calculator/ and /wifi-planner/,
so these rules intentionally override the older .wp-* / .sc-* styling.
Palette matches UniFi closely: their blue accent, light neutrals, green meter.
========================================================================== */
:root {
--uf-blue: #006FFF;
--uf-blue-d: #0A57C2;
--uf-blue-t: rgba(0,111,255,.10);
--uf-bg: #F6F7F9;
--uf-card: #FFFFFF;
--uf-line: #E4E7EC;
--uf-line-2: #EEF0F3;
--uf-ink: #1B1F26;
--uf-ink-2: #3A4048;
--uf-muted: #7A828D;
--uf-green: #27C281;
--uf-shadow: 0 1px 2px rgba(16,35,60,.04), 0 8px 24px rgba(16,35,60,.05);
}
/* ---- Hero — UniFi light scheme (overrides the branded navy in cameras.css).
Applies to both tool pages; tools.css only loads on those two. ---- */
.wp-hero {
background: linear-gradient(180deg, #FFFFFF 0%, var(--uf-bg) 100%);
border-bottom: 1px solid var(--uf-line);
padding: 132px 0 56px;
}
.wp-hero .cx-eyebrow { color: var(--uf-blue); letter-spacing: .14em; font-weight: 700; }
.wp-hero h1 { color: var(--uf-ink); }
.wp-hero h1 em { color: var(--uf-blue); font-style: normal; }
.wp-hero .cx-sub { color: var(--uf-ink-2); max-width: 66ch; }
/* ---- Tool shell ---- */
.wp-tool { background: var(--uf-bg); padding: 40px 0 84px; }
.wp-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 26px; }
/* ---- Left form: each fieldset becomes a clean white card with an icon badge ---- */
.wp-form { gap: 20px; top: 88px; }
.wp-fs {
background: var(--uf-card);
border: 1px solid var(--uf-line);
border-radius: 16px;
box-shadow: var(--uf-shadow);
padding: 20px 22px 22px;
}
.wp-fs legend {
display: flex; align-items: center; gap: 11px;
font: 700 15px/1.2 var(--sans);
color: var(--uf-ink);
padding: 0; margin: 0 0 2px; float: none; width: 100%;
}
.wp-fs legend::before {
content: ''; flex: none;
width: 30px; height: 30px; border-radius: 8px;
background: var(--uf-blue) var(--uf-badge, none) center/18px no-repeat;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* per-section badge icons (white glyph on the blue tile) */
.wp-fs:nth-of-type(1) legend::before { --uf-badge: url("data:image/svg+xml;utf8,"); }
.wp-fs:nth-of-type(2) legend::before { --uf-badge: url("data:image/svg+xml;utf8,"); }
.wp-fs:nth-of-type(3) legend::before { --uf-badge: url("data:image/svg+xml;utf8,"); }
.sc-hint { color: var(--uf-muted); font: 500 13px/1.5 var(--sans); margin: 10px 0 14px; }
/* Plain-language helper line under a field, and a small "optional" tag */
.sc-help { display: block; font: 500 12px/1.45 var(--sans); color: var(--uf-muted); margin-top: 6px; }
.sc-opt { display: inline-block; font: 600 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--uf-muted); background: var(--uf-line-2); border-radius: 5px; padding: 3px 6px; margin-left: 7px; vertical-align: middle; }
/* ---- Fields / native controls styled like UniFi ---- */
.wp-field { margin-top: 16px; }
.wp-field > span { display: block; font: 600 13px/1.4 var(--sans); color: var(--uf-ink-2); margin-bottom: 7px; }
.wp-field select,
.wp-field input[type="number"],
.wp-field input[type="text"] {
width: 100%; box-sizing: border-box;
font: 500 14px/1.2 var(--sans); color: var(--uf-ink);
background: #fff; border: 1px solid var(--uf-line); border-radius: 10px;
padding: 11px 13px; transition: border-color .16s, box-shadow .16s;
-webkit-appearance: none; appearance: none;
}
.wp-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px;
}
.wp-field select:focus,
.wp-field input:focus { outline: none; border-color: var(--uf-blue); box-shadow: 0 0 0 3px var(--uf-blue-t); }
.wp-pair { gap: 14px; }
/* Segmented pill selector (for retention / redundancy / drive size — progressive enhancement) */
.uf-seg { display: flex; flex-wrap: wrap; gap: 6px; background: var(--uf-line-2); padding: 4px; border-radius: 12px; }
.uf-seg button {
flex: 1 1 auto; font: 600 13px/1 var(--sans); color: var(--uf-ink-2);
background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap;
}
.uf-seg button:hover { color: var(--uf-blue); }
.uf-seg button[aria-pressed="true"] { background: #fff; color: var(--uf-blue); box-shadow: 0 1px 2px rgba(16,35,60,.12); }
/* Slider row: label + inline value + range with a round blue handle */
.uf-slider-val { float: right; font: 700 14px/1.2 var(--sans); color: var(--uf-blue); font-variant-numeric: tabular-nums; }
.wp-field input[type="range"] {
width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
background: var(--uf-line); border-radius: 999px; margin: 10px 0 2px;
}
.wp-field input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--uf-blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,111,255,.4); cursor: pointer;
}
.wp-field input[type="range"]::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; background: var(--uf-blue);
border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,111,255,.4); cursor: pointer;
}
/* "Add group" ghost button */
.sc-add.cx-btn-ghost {
display: block; width: 100%; margin-top: 16px;
font: 600 13.5px/1 var(--sans); color: var(--uf-blue);
background: var(--uf-blue-t); border: 1px dashed rgba(0,111,255,.35); border-radius: 10px; padding: 12px;
transition: background .15s;
}
.sc-add.cx-btn-ghost:hover { background: rgba(0,111,255,.16); border-color: var(--uf-blue); }
/* Camera group cards (generated by storage.js) */
.sc-grp { border: 1px solid var(--uf-line); border-radius: 12px; padding: 14px 16px 16px; margin-top: 12px; background: #FBFCFD; }
.sc-grp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-grp-head strong { font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--uf-blue); }
.sc-del { font: 600 12px/1 var(--sans); color: var(--uf-muted); background: none; border: 0; cursor: pointer; padding: 4px 2px; }
.sc-del:hover { color: #E5484D; }
.sc-grp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sc-grp-grid label { display: block; margin: 0; }
.sc-grp-grid label > span { display: block; font: 600 12px/1.4 var(--sans); color: var(--uf-ink-2); margin-bottom: 6px; }
.sc-grp-grid select, .sc-grp-grid input[type="number"] {
width: 100%; box-sizing: border-box; font: 500 13px/1.2 var(--sans); color: var(--uf-ink);
background: #fff; border: 1px solid var(--uf-line); border-radius: 9px; padding: 9px 10px;
-webkit-appearance: none; appearance: none;
}
.sc-grp-grid select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; padding-right: 30px; }
.sc-grp-grid select:focus, .sc-grp-grid input:focus { outline: none; border-color: var(--uf-blue); box-shadow: 0 0 0 3px var(--uf-blue-t); }
/* ---- Output card ---- */
.wp-out.sc-out { background: var(--uf-card); border: 1px solid var(--uf-line); border-radius: 18px; box-shadow: var(--uf-shadow); padding: 8px; }
/* Result headline block */
.sc-headline { background: linear-gradient(135deg, #0B1F45 0%, #123A86 100%); border-radius: 14px; padding: 24px; text-align: center; color: #fff; }
.sc-headline .sc-cap { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9FC0FF; margin: 0 0 8px; }
.sc-big { font: 800 clamp(40px,6vw,60px)/1 var(--sans); color: #fff; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sc-big em { font-style: normal; font-size: .38em; font-weight: 700; color: var(--uf-green); }
.sc-headline .sc-sub { font: 500 13.5px/1.5 var(--sans); color: #BFD3F5; margin: 8px 0 0; }
/* Capacity meter (UniFi-style segmented bar) — populated by JS if present */
.uf-meter-wrap { padding: 16px 20px; }
.uf-meter-top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.uf-meter-top strong { font: 700 13px/1 var(--sans); color: var(--uf-ink); }
.uf-meter-top span { font: 700 13px/1 var(--sans); color: var(--uf-blue); font-variant-numeric: tabular-nums; }
.uf-meter { display: flex; gap: 3px; height: 26px; }
.uf-meter i { flex: 1 1 auto; border-radius: 2px; background: var(--uf-line); }
.uf-meter i.on { background: linear-gradient(180deg, #34D89B, #22B877); }
/* Stat tiles */
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 16px 6px; }
.sc-stats > div { background: #F8FAFC; border: 1px solid var(--uf-line-2); border-radius: 12px; padding: 14px 12px; text-align: center; }
.sc-stats strong { display: block; font: 700 22px/1.1 var(--sans); color: var(--uf-ink); font-variant-numeric: tabular-nums; }
.sc-stats span { display: block; font: 600 11px/1.3 var(--sans); color: var(--uf-muted); margin-top: 3px; letter-spacing: .01em; }
/* NVR recommendation */
.sc-nvr { margin: 8px 16px; padding: 16px 18px; background: var(--uf-blue-t); border: 1px solid rgba(0,111,255,.18); border-radius: 12px; }
.sc-nvr strong { display: block; font: 700 15px/1.3 var(--sans); color: var(--uf-ink); }
.sc-nvr span, .sc-nvr em { display: block; font: 500 13px/1.5 var(--sans); font-style: normal; color: var(--uf-ink-2); margin-top: 2px; }
/* Explainer notes */
.sc-notes-wrap { padding: 8px 20px 4px; }
.sc-notes-wrap .sc-cap, .wp-h2 { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-blue); margin: 8px 0 12px; }
.sc-notes { list-style: none; margin: 0; padding: 0; }
.sc-notes li { position: relative; padding: 0 0 10px 22px; font: 500 13.5px/1.6 var(--sans); color: var(--uf-ink-2); }
.sc-notes li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--uf-green); }
.sc-summary { margin: 10px 20px; padding: 14px 16px; background: #F8FAFC; border: 1px solid var(--uf-line-2); border-radius: 12px; font: 600 13.5px/1.6 var(--sans); color: var(--uf-ink); }
/* Actions */
.sc-actions { padding: 8px 20px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sc-actions .btn-blue { background: var(--uf-blue); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,111,255,.28); }
.sc-actions .btn-blue:hover { background: var(--uf-blue-d); }
.sc-actions .cx-btn-ghost { color: var(--uf-blue); border-color: var(--uf-line); border-radius: 10px; }
.sc-actions .cx-btn-ghost:hover { border-color: var(--uf-blue); color: var(--uf-blue); }
@media (max-width: 860px) {
.wp-grid { grid-template-columns: 1fr; }
.wp-form { position: static; }
.sc-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ---- Explainer card grids below the tool ---- */
/* "Why most calculators are wrong" has 4 cards — lay them out 2×2 instead of
an orphaned 3+1. */
.cl-grid.sv-plat3.sc-why { grid-template-columns: repeat(2, 1fr); }
/* Card paragraphs need side padding too — only :last-child had it, so the
description paragraph in multi-paragraph cards ran to the card edges. */
.cl-card > p { margin-left: 24px; margin-right: 24px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 720px) { .cl-grid.sv-plat3.sc-why { grid-template-columns: 1fr; } }
/* ---- Camera-group stacked fields (pills + slider) ---- */
.sc-fields { display: flex; flex-direction: column; gap: 15px; }
.sc-fields .wp-field { margin-top: 0; }
.sc-fields .wp-field > span { font-size: 12px; color: var(--uf-ink-2); }
.sc-unit { float: right; font: 600 11px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--uf-muted); }
.sc-fields .uf-seg button { padding: 8px 6px; font-size: 12.5px; }
/* ---- Capacity-meter caption ---- */
.uf-meter-cap { margin: 8px 0 0; font: 500 12px/1.5 var(--sans); color: var(--uf-muted); }
/* ============================================================
WiFi Planner — retint the shared .wp-* result panel to UniFi blue
(the form side already inherits the tool styles above).
============================================================ */
/* Room chips → UniFi toggle pills */
.cx .wp-chip {
border-radius: 999px; border: 1px solid var(--uf-line); background: #fff;
color: var(--uf-ink-2); font: 600 13px/1 var(--sans); padding: 9px 15px;
transition: background .15s, color .15s, border-color .15s;
}
.cx .wp-chip:hover { border-color: var(--uf-blue); color: var(--uf-blue); }
.cx .wp-chip.on { background: var(--uf-blue); border-color: var(--uf-blue); color: #fff; }
.cx .wp-chip:focus-visible { outline: 2px solid var(--uf-blue); outline-offset: 2px; }
/* Result-panel accents */
.wp-label { color: var(--uf-ink-2); }
.wp-label b { color: var(--uf-blue); }
.wp-headline { color: var(--uf-ink); }
.wp-headline b { color: var(--uf-blue); }
.wp-rule b { color: var(--uf-ink); }
.wp-h2 { color: var(--uf-blue); letter-spacing: .14em; }
.wp-out { border-color: var(--uf-line); border-radius: 18px; box-shadow: var(--uf-shadow); }
.wp-kit-row { background: #F8FAFC; border: 1px solid var(--uf-line-2); }
.wp-kit-body strong { color: var(--uf-ink); }
.wp-kit-body em { color: var(--uf-ink-2); }
/* Walk-the-house speed-test panel */
.wt-panel { border-color: var(--uf-line); }
.wt-go.btn-blue, .wt-actions .btn-blue { background: var(--uf-blue); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,111,255,.28); }
.wt-go.btn-blue:hover, .wt-actions .btn-blue:hover { background: var(--uf-blue-d); }
.wp-cta .btn-blue { background: var(--uf-blue); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,111,255,.28); }
.wp-cta .btn-blue:hover { background: var(--uf-blue-d); }
.wp-cta .cx-btn-ghost, .wt-toggle.cx-btn-ghost { color: var(--uf-blue); border-color: var(--uf-line); border-radius: 10px; }
.wp-cta .cx-btn-ghost:hover, .wt-toggle.cx-btn-ghost:hover { border-color: var(--uf-blue); color: var(--uf-blue); }
/* ============================================================
Internet Speed Test — UniFi light hero with the live gauge kept on a
dark "device panel" card; body + result cards retinted to UniFi blue.
============================================================ */
.st-hero {
background: linear-gradient(180deg, #FFFFFF 0%, var(--uf-bg) 100%);
border-bottom: 1px solid var(--uf-line);
color: var(--uf-ink);
}
.st-hero .cx-eyebrow { color: var(--uf-blue); letter-spacing: .14em; }
.st-hero h1 { color: var(--uf-ink); }
.st-hero h1 em { color: var(--uf-blue); }
.st-hero .cx-sub { color: var(--uf-ink-2); }
.st-why li { color: var(--uf-ink-2); }
.st-why li b { color: var(--uf-ink); }
.st-why li::before { border-left-color: var(--uf-green); border-bottom-color: var(--uf-green); }
.st-phase { color: var(--uf-muted); }
/* The gauge lives on its own dark panel so it keeps its glow on a light page */
.st-dial-in {
background: linear-gradient(160deg, #0F1A2E 0%, #16243E 100%);
border: 1px solid rgba(255,255,255,.06); border-radius: 20px;
padding: 18px 18px 8px; box-shadow: 0 12px 30px rgba(16,35,60,.16);
}
.st-fill { stroke: var(--uf-blue); filter: drop-shadow(0 0 9px rgba(0,111,255,.55)); }
.st-mark { stroke: var(--uf-blue); filter: drop-shadow(0 0 7px rgba(0,111,255,.8)); }
.st-big-unit { color: #6FA8FF; }
.st-go.btn-blue { background: var(--uf-blue); border-radius: 12px; box-shadow: 0 3px 12px rgba(0,111,255,.32); }
.st-go.btn-blue:hover { background: var(--uf-blue-d); }
/* Body + result cards */
.st-body { background: var(--uf-bg); }
.st-stat { border: 1px solid var(--uf-line); border-radius: 14px; box-shadow: var(--uf-shadow); }
.st-stat-down { border-left: 3px solid var(--uf-blue); }
.st-stat-up { border-left: 3px solid var(--uf-green); }
.st-stat strong { color: var(--uf-ink); }
.st-h2 { color: var(--uf-ink); }
.st-caps li { border-color: var(--uf-line); border-radius: 14px; box-shadow: var(--uf-shadow); }
.st-caps strong { color: var(--uf-blue); }
.st-caps span { color: var(--uf-ink); }
.st-card { border-color: var(--uf-line); border-radius: 16px; box-shadow: var(--uf-shadow); }
.st-card h3 { color: var(--uf-ink); }
.st-field input { border-radius: 10px; border-color: var(--uf-line); }
.st-field input:focus { outline: none; border-color: var(--uf-blue); box-shadow: 0 0 0 3px var(--uf-blue-t); }
.st-save-btn { color: var(--uf-blue); border-color: var(--uf-line); border-radius: 10px; }
.st-save-btn:hover { color: var(--uf-blue); border-color: var(--uf-blue); background: var(--uf-blue-t); }
/* ---- Speed-test: clearer baseline card + report action ---- */
.st-steps { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-steps li { font: 500 13.5px/1.6 var(--sans); color: var(--uf-ink-2); padding-left: 0; }
.st-steps li b { color: var(--uf-blue); }
.st-steps li em { font-style: italic; color: var(--uf-ink); }
.st-save-hint { font: 500 12px/1.5 var(--sans); color: var(--uf-muted); margin: 8px 0 0; }
.st-report-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -8px 0 30px; }
.st-report-row[hidden] { display: none; }
.st-report-hint { font: 500 12.5px/1.5 var(--sans); color: var(--uf-muted); max-width: 42ch; }
.st-report-btn.btn-blue { background: var(--uf-blue); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,111,255,.28); }
.st-report-btn.btn-blue:hover { background: var(--uf-blue-d); }
/* ---- Speed-test dial: the rAF easing loop in speedtest.js now drives the
needle + arc every frame, so drop the CSS position transitions that would
otherwise smear/fight it. The glow filters stay. ---- */
.st-fill { transition: none; }
.st-mark { transition: none; }
/* ===== Smart Home Budget Calculator (bc-*) ===== */
.bc-tier { margin-bottom: 10px; }
.bc-tier button { flex: 1; }
.bc-scale { grid-template-columns: 1fr 1fr; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-range { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font-size: clamp(26px, 3.2vw, 40px) !important; }
.bc-range .bc-to { font: 500 14px/1 var(--sans); color: var(--ink-soft); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.bc-rows { margin: 18px 0 6px; border-top: 1px solid var(--uf-line); }
.bc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--uf-line); }
.bc-row strong { display: block; font: 700 14px/1.3 var(--sans); color: var(--uf-ink); }
.bc-row span { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft); margin-top: 2px; }
.bc-row em { font: 700 14px/1.3 var(--sans); color: var(--uf-blue-d); font-style: normal; white-space: nowrap; }
.bc-stats { grid-template-columns: repeat(3, 1fr); }
.bc-stats strong { font-size: 15px; line-height: 1.25; }
.bc-lead { margin-top: 18px; padding: 18px 20px 16px; border: 1px solid var(--uf-line); border-radius: 14px; background: #F6F8FB; }
.bc-lead[hidden] { display: none; }
.bc-lead .sc-cap { margin-bottom: 12px; }
.bc-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.bc-lead-grid .wp-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--uf-line); border-radius: 10px; font: 500 14px/1.3 var(--sans); background: #fff; }
.bc-lead-grid .wp-field input:focus { outline: none; border-color: var(--uf-blue); box-shadow: 0 0 0 3px var(--uf-blue-t); }
.bc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bc-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 14px; font: 500 13.5px/1.4 var(--sans); color: var(--uf-ink); }
.bc-check input { width: 16px; height: 16px; accent-color: var(--uf-blue); }
.bc-err { margin: 10px 0 0; font: 500 13px/1.4 var(--sans); color: #B42318; }
.bc-done { margin: 6px 0 0; font: 600 14px/1.4 var(--sans); color: var(--uf-green); }
@media (max-width: 640px) { .bc-scale, .bc-lead-grid { grid-template-columns: 1fr; } .bc-stats { grid-template-columns: 1fr 1fr; } .bc-row em { white-space: normal; text-align: right; } }
/* ===== WiFi Planner — the tool itself, restyled to the UniFi light scheme (Sep 27, 2026) ===== */
/* map card: light "design center" canvas with a faint dot grid */
.wp-viz {
background:
radial-gradient(circle at 1px 1px, rgba(27,31,38,.10) 1px, transparent 1.6px) 0 0/18px 18px,
linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
border: 1px solid var(--uf-line); border-radius: 14px; padding: 10px 10px 4px; box-shadow: inset 0 1px 0 #fff;
}
.wp-viz-cap { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-blue); margin: 4px 0 6px 6px; }
.wp-viz-cap-now { color: var(--uf-green); }
.wp-viz svg { filter: drop-shadow(0 6px 14px rgba(16,35,60,.08)); }
.wp-viz-key { gap: 8px; flex-wrap: wrap; padding: 8px 0 8px; }
.wp-k { color: var(--uf-ink-2); letter-spacing: .08em; font-size: 10.5px; background: #fff; border: 1px solid var(--uf-line); border-radius: 999px; padding: 6px 10px; }
.wp-k-in::before { background: var(--uf-blue); }
.wp-k-out::before { background: var(--uf-green); }
.wp-k-det::before { background: #E0A83A; }
.wp-k-zone::before { background: none; border: 2px solid var(--uf-blue); }
.wp-k-rack::before { background: var(--uf-ink); border-radius: 2px; }
.wp-k-now-g::before { background: var(--uf-green); } .wp-k-now-y::before { background: #E0A83A; } .wp-k-now-r::before { background: #E5484D; }
/* scene */
.wp-slab { fill: #F0F4FA; stroke: #B9C6D8; stroke-width: 1.2; }
.wp-slab-det { fill: #FBF4E6; stroke: #E0C18A; }
.wp-link { stroke: #A8B6C8; stroke-width: 1.3; stroke-dasharray: 4 4; }
.wp-cov { fill: url(#ufCovIn); stroke: rgba(0,111,255,.28); stroke-width: 1; }
.wp-cov-out { fill: url(#ufCovOut); stroke: rgba(39,194,129,.35); }
.wp-cov-det { fill: url(#ufCovDet); stroke: rgba(224,168,58,.4); }
.wp-cov-now-g { fill: url(#ufCovOut); stroke: rgba(39,194,129,.4); }
.wp-cov-now-y { fill: url(#ufCovDet); stroke: rgba(224,168,58,.45); }
.wp-cov-now-r { fill: url(#ufCovRed); stroke: rgba(229,72,77,.4); }
.wp-ap { fill: #fff; opacity: 1; stroke: var(--uf-blue); stroke-width: 2; }
.wp-ap-out { stroke: var(--uf-green); }
.wp-ap-det { stroke: #E0A83A; }
.wp-ap-now-g { stroke: var(--uf-green); } .wp-ap-now-y { stroke: #E0A83A; } .wp-ap-now-r { stroke: #E5484D; }
.wp-ap-core { fill: var(--uf-blue); }
.wp-zone { stroke: var(--uf-blue); stroke-width: 1.4; stroke-dasharray: 3 3; }
.wp-zone-label, .wp-rack-label, .wp-storey { fill: var(--uf-ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.wp-zone-label { font: 800 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.wp-rack { fill: var(--uf-ink); }
.wp-rack-ring { stroke: var(--uf-ink); stroke-width: 1.4; }
.wp-rack-label { font: 800 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.wp-storey { font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--uf-muted); }
.wp-spine { stroke: rgba(0,111,255,.45); }
/* results panel */
.wp-out { padding: 22px 24px 26px; }
.wp-headline { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 4px; font: 800 clamp(24px, 2.6vw, 30px)/1.1 var(--sans); }
.wp-headline b { font: 800 clamp(40px, 4.4vw, 54px)/1 var(--sans); color: var(--uf-blue); letter-spacing: -.02em; }
.wp-rule { font-size: 13.5px; color: var(--uf-ink-2); }
.wp-kit-row { border-radius: 12px; padding: 12px 14px; }
.wp-qty { color: var(--uf-blue); background: var(--uf-blue-t); border-radius: 8px; padding: 6px 8px; min-width: 34px; text-align: center; font-size: 13px; }
.wp-why { border-left-color: rgba(0,111,255,.35); }
.wp-notes li::before { background: var(--uf-blue); border-radius: 50%; width: 6px; height: 6px; top: 10px; }
.wp-summary { background: #F3F7FE; border: 1px solid #DCE7FA; color: var(--uf-ink); }
/* form: pill groups generated from short selects, sliders with the blue badge */
.wp-segsel { margin-top: 8px; }
.wp-segsel button { flex: 1 1 auto; white-space: nowrap; }
.wp-field select.wp-seg-hidden { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; margin: 0; padding: 0; border: 0; }
.wp-field { position: relative; }
.wp-label b { display: inline-block; min-width: 2.6em; text-align: center; background: var(--uf-blue); color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 12px; margin-left: 6px; }
.wp-field input[type="number"] { border: 1px solid var(--uf-line); border-radius: 10px; padding: 10px 12px; font: 600 14px/1.3 var(--sans); color: var(--uf-ink); background: #fff; }
.wp-field input[type="number"]:focus { outline: none; border-color: var(--uf-blue); box-shadow: 0 0 0 3px var(--uf-blue-t); }
.wp-field select { border: 1px solid var(--uf-line); border-radius: 10px; padding: 10px 12px; font: 600 14px/1.3 var(--sans); color: var(--uf-ink); background: #fff; }
.wp-hint { color: var(--uf-muted); }
.cx .wp-chip { border-color: var(--uf-line); color: var(--uf-ink-2); background: #fff; }
.cx .wp-chip:hover { border-color: var(--uf-blue); color: var(--uf-blue); }
.cx .wp-chip.on { background: var(--uf-blue); border-color: var(--uf-blue); color: #fff; }
.wp-lv select { border-color: var(--uf-line); border-radius: 8px; }
/* walk test */
.wp-walk { background: var(--uf-bg); }
.wt-panel { background: #fff; border: 1px solid var(--uf-line); border-radius: 16px; box-shadow: var(--uf-shadow); padding: 22px 24px; }
.wt-bar { background: var(--uf-line-2); } .wt-bar i { background: var(--uf-blue); }
.wt-meter { background: var(--uf-line-2); }
.wt-g i { background: var(--uf-green); } .wt-g .wt-pct, .wt-row.wt-g .wt-pct { color: var(--uf-green); }
.wt-y i { background: #E0A83A; } .wt-y .wt-pct, .wt-row.wt-y .wt-pct { color: #E0A83A; }
.wt-r i { background: #E5484D; } .wt-r .wt-pct, .wt-row.wt-r .wt-pct { color: #E5484D; }
/* ===== WiFi Planner — realism pass (Sep 27): decks with thickness, lot, drive, roofed outbuilding ===== */
.wp-lot { fill: #EEF3EA; stroke: #D6DFD0; stroke-width: 1; }
.wp-lot-det { fill: #EEF3EA; }
.wp-drive { fill: #E3E7ED; stroke: none; }
.wp-face { fill: #D5DEEA; stroke: #B9C6D8; stroke-width: 1; }
.wp-face-r { fill: #C7D2E1; }
.wp-face-det { fill: #EADDC2; stroke: #E0C18A; }
.wp-face-r.wp-face-det { fill: #E2D1B0; }
.wp-slab-upper { fill: rgba(240,244,250,.94); }
.wp-post { stroke: #C4CEDC; stroke-width: 1.2; }
.wp-wall { stroke: #CBD5E3; stroke-width: 1; stroke-dasharray: 2 3; }
.wp-wall-face { fill: #F6EEDC; stroke: #E0C18A; stroke-width: 1; }
.wp-wall-face-r { fill: #EFE3C8; }
.wp-roof { fill: #C9CFD8; stroke: #AEB8C6; stroke-width: 1; }
.wp-roof-r { fill: #B8C0CB; }
.wp-mast { stroke: #7E8A99; stroke-width: 1.2; }
.wp-cov-edge { fill: none; stroke: rgba(0,111,255,.22); stroke-width: 1; stroke-dasharray: 3 4; }
.wp-cov-edge-out { stroke: rgba(39,194,129,.3); } .wp-cov-edge-det { stroke: rgba(224,168,58,.35); }
.wp-cov-edge-now-g { stroke: rgba(39,194,129,.3); } .wp-cov-edge-now-y { stroke: rgba(224,168,58,.35); } .wp-cov-edge-now-r { stroke: rgba(229,72,77,.35); }
.wp-cov { stroke: none; }
.wp-ap { filter: drop-shadow(0 1px 1.5px rgba(16,35,60,.25)); }
/* ===== WiFi Planner — realism pass 2 + level focus ===== */
.wp-slab-upper { fill: rgba(240,244,250,.62); }
.wp-face { fill: rgba(213,222,234,.9); } .wp-face-r { fill: rgba(199,210,225,.9); }
.wp-garage { fill: #B7C1CF; stroke: #97A4B6; stroke-width: .8; }
.wp-tree { fill: #9CC49A; } .wp-tree-hi { fill: #B9D9B4; } .wp-tree-shadow { fill: rgba(60,80,60,.10); }
.wp-feed { stroke: var(--uf-blue); stroke-width: 1.4; stroke-dasharray: 5 3; opacity: .7; }
.wp-feed-label { fill: var(--uf-blue); font: 800 9px var(--sans); letter-spacing: .1em; text-transform: uppercase; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.wp-scale { stroke: var(--uf-muted); stroke-width: 1.2; }
.wp-scale-label { fill: var(--uf-muted); font: 700 9px var(--sans); letter-spacing: .08em; }
.wp-lvsel { margin: 0 6px 8px; display: inline-flex; }
.wp-lvsel button { padding: 6px 12px; font-size: 12px; }
.wp-lv-g { transition: opacity .25s ease; }
svg[data-focus] .wp-lv-g { opacity: .14; }
svg[data-focus="1"] .wp-lv-g[data-lv="1"], svg[data-focus="2"] .wp-lv-g[data-lv="2"], svg[data-focus="3"] .wp-lv-g[data-lv="3"], svg[data-focus="4"] .wp-lv-g[data-lv="4"] { opacity: 1; }
/* ===== WiFi Planner — house shapes ===== */
.wp-walk { fill: #E7EAEF; }
.wp-door { fill: #6F7F93; stroke: #55647a; stroke-width: .6; }
.wp-entry-label { fill: var(--uf-muted); font: 800 8.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.wp-wall-solid { stroke: #AEB9C9; stroke-dasharray: none; stroke-width: 1.4; }
.wp-tree, .wp-tree-hi, .wp-tree-shadow { display: none; }
/* ---------- Josh.ai System Designer (jd-*) — reuses bc-* tool styles ---------- */
.jd-seg3 button, .jd-seg4 button, .jd-seg5 button { flex: 1; }
.jd-seg4, .jd-seg5 { flex-wrap: wrap; }
.jd-seg5 button { flex: 1 1 30%; }
.jd-music { margin-top: 14px; }
.jd-talks li.jd-ok::marker { content: "✓ "; color: var(--uf-green); }
.jd-talks li.jd-via::marker { content: "→ "; color: var(--uf-blue-d); }
.jd-talks li.jd-via { color: var(--ink-soft); }
@media (max-width: 560px) { .jd-seg4 button { flex: 1 1 45%; } }
.sc-headline .jd-labor-line { margin-top: 8px; font-size: 13.5px; color: #C9DAFF; }
.sc-headline .jd-labor-line strong { color: #fff; font-weight: 700; }
.jd-est { font: 600 10.5px/1 var(--sans); color: var(--uf-muted); font-style: normal; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; }
.bc-row.jd-labor { background: #F8FAFC; margin: 6px -8px 0; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.bc-row strong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--uf-line); }
.bc-row strong a:hover { color: var(--uf-blue-d); border-color: var(--uf-blue-d); }
.jd-plan { margin-top: 14px; }
.bc-stats strong.jd-remotes { font-size: 13px; line-height: 1.3; }