/* Smart Start Wiring — the interface is deliberately achromatic so that wire
   colours are the only saturated thing on screen. Red always means "that's the
   wire", never "that's a button". */

:root{
  --paper:#EFF1EF; --surface:#FFFFFF; --surface-2:#F7F8F7; --surface-3:#E7EAE8;
  --ink:#161819; --ink-2:#3D4245; --muted:#6E7579;
  --rule:#D7DBD8; --rule-strong:#BAC1BD;
  --accent:#1B4965; --accent-soft:#E2EBF1;
  --ok:#2F6B45; --ok-soft:#E2EFE7;
  --warn:#8A5D0B; --warn-soft:#F5EDDA;
  --bad:#9E3232; --bad-soft:#F6E5E5;
  --ring:rgba(22,24,25,.16);
  --tblhead:#CFE6F5; --tblhead-ink:#0F3A52;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101315; --surface:#191D20; --surface-2:#20262A; --surface-3:#272E32;
    --ink:#E9ECEB; --ink-2:#C2C9C8; --muted:#8B9497;
    --rule:#2A3134; --rule-strong:#3B4448;
    --accent:#84B9DA; --accent-soft:#152D3B;
    --ok:#7FC79B; --ok-soft:#152C21;
    --warn:#DEB165; --warn-soft:#2C2515;
    --bad:#E28C8C; --bad-soft:#31191B;
    --ring:rgba(233,236,235,.22);
    --tblhead:#1D3B4D; --tblhead-ink:#BEDCEE;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:640; letter-spacing:-.022em; line-height:1.22; text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
[hidden]{display:none!important}

.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.small{font-size:13.5px; color:var(--muted); line-height:1.5}
.stack{display:flex; flex-direction:column; gap:16px}
.spread{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ── app bar ─────────────────────────────────────────────────────────── */
.appbar{background:var(--surface-2); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:20}
.appbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; font-weight:640; letter-spacing:-.02em}
.brand .glyph{
  width:24px; height:24px; border-radius:4px; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:700; flex:none;
}
.navbtns{display:flex; align-items:center; gap:6px}

/* ── controls ────────────────────────────────────────────────────────── */
.btn{
  padding:9px 15px; border-radius:6px; cursor:pointer; font-size:14.5px; font-weight:560;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink);
  display:inline-flex; align-items:center; gap:7px; min-height:40px;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink)}
.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--ink-2); border-color:var(--ink-2)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3); border-color:transparent; color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:progress}

input[type=text],input[type=email],select{
  width:100%; padding:11px 13px; border:1px solid var(--rule-strong); border-radius:6px;
  background:var(--surface); color:var(--ink); min-height:44px;
}
label.field{display:flex; flex-direction:column; gap:6px}
label.field span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

.searchbox{display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1.5px solid var(--rule-strong); border-radius:8px; padding:0 14px}
.searchbox:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.searchbox input{border:0; background:transparent; padding:13px 0; min-height:48px; font-size:16px}
.searchbox input:focus{outline:none}
.searchbox .count{font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; flex:none}

.chips{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.chip{
  font-family:var(--mono); font-size:11.5px; padding:6px 12px; border-radius:20px; cursor:pointer;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink-2); min-height:34px;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}

.badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; padding:3px 8px; border-radius:3px; white-space:nowrap; display:inline-block;
}
.b-ok{background:var(--ok-soft); color:var(--ok)}
.b-warn{background:var(--warn-soft); color:var(--warn)}
.b-bad{background:var(--bad-soft); color:var(--bad)}
.b-neutral{background:var(--surface-3); color:var(--muted)}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:18px}
.notice{border-radius:6px; padding:11px 14px; font-size:14px}
.notice-bad{background:var(--bad-soft); color:var(--bad)}
.notice-ok{background:var(--ok-soft); color:var(--ok)}
.notice-warn{background:var(--warn-soft); color:var(--warn)}

/* ── sign in ─────────────────────────────────────────────────────────── */
.signin{max-width:400px; margin:12vh auto; display:flex; flex-direction:column; gap:18px}

/* ── results ─────────────────────────────────────────────────────────── */
.results{display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.result{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:13px 16px; border:0; border-bottom:1px solid var(--rule);
  background:var(--surface); color:inherit; text-align:left; cursor:pointer; min-height:60px;
}
.result:last-child{border-bottom:none}
.result:hover{background:var(--surface-2)}
.r-title{font-weight:600; font-size:15.5px; letter-spacing:-.012em}
.r-meta{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:3px;
  display:flex; gap:10px; flex-wrap:wrap}
.empty{padding:26px 18px; background:var(--surface); text-align:left}

/* ── vehicle ─────────────────────────────────────────────────────────── */
.veh-head{display:flex; flex-direction:column; gap:11px; padding-bottom:16px; border-bottom:1px solid var(--rule)}
.veh-title{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.veh-title h2{font-size:clamp(20px,4.5vw,26px)}
.specs{display:flex; flex-wrap:wrap; gap:7px}
.spec{font-family:var(--mono); font-size:11.5px; padding:4px 9px; border-radius:4px;
  background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-2)}
.spec b{color:var(--ink)}

.primary-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wire-card{border:1px solid var(--rule-strong); border-radius:8px; background:var(--surface);
  padding:15px 16px; display:flex; flex-direction:column; gap:11px; min-width:0}
.wire-card.missing{border-style:dashed; background:var(--surface-2)}
.wc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.wc-name{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600}
.pol{font-family:var(--mono); font-size:16px; font-weight:700; width:24px; height:24px;
  display:grid; place-items:center; border-radius:4px; flex:none}
.pol-p{background:var(--bad-soft); color:var(--bad)}
.pol-n{background:var(--surface-3); color:var(--ink)}
.wc-colour{display:flex; align-items:center; gap:11px; min-width:0}
.wc-name-big{font-family:var(--mono); font-size:16px; font-weight:600; overflow-wrap:anywhere}
.wc-loc{font-size:13.5px; line-height:1.45; color:var(--ink-2); border-top:1px solid var(--rule); padding-top:10px}
.wc-loc em{font-style:normal; color:var(--muted)}

.swatch{width:38px; height:38px; border-radius:6px; flex:none; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:inset 0 0 0 1px var(--ring)}
.swatch i{display:block; flex:1; width:100%}
.swatch.sm{width:22px; height:22px; border-radius:4px}
.swatch.none{background:var(--surface-3); color:var(--muted); display:grid; place-items:center;
  font-family:var(--mono); font-size:14px; font-weight:600}
/* "Blue or White" — two candidate wires, drawn as two swatches, never as one
   split swatch (which would read as a tracer stripe). */
.either{display:inline-flex; align-items:center; gap:5px; flex:none}
.either-or{font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.qual{display:inline-block; margin-left:7px; padding:2px 7px; border-radius:4px;
  background:var(--warn-soft); color:var(--warn); font-family:var(--sans);
  font-size:11.5px; font-weight:600; vertical-align:1px}

details.secondary{border:1px solid var(--rule); border-radius:8px; background:var(--surface-2)}
details.secondary summary{cursor:pointer; padding:13px 16px; min-height:46px;
  font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; justify-content:space-between; gap:10px}
details.secondary summary::-webkit-details-marker{display:none}
details.secondary summary::after{content:"+"; font-size:16px; color:var(--muted)}
details.secondary[open] summary::after{content:"\2212"}
details.secondary .inner{padding:0 14px 14px}

.notes ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px;
  font-size:14.5px; line-height:1.55; color:var(--ink-2)}

/* ── tables ──────────────────────────────────────────────────────────── */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:8px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
thead th{background:var(--tblhead); color:var(--tblhead-ink); font-size:12.5px; font-weight:600;
  text-align:center; padding:11px 12px; white-space:nowrap; border-bottom:1px solid var(--rule)}
thead th:first-child, thead th:nth-child(2), thead th.l{text-align:left}
td{padding:11px 12px; border-bottom:1px solid var(--rule); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tr.key td{background:var(--surface-2)}
.c-item{font-weight:650; white-space:nowrap}
.c-col span{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:13.5px; font-weight:600}
.c-pol{text-align:center; font-family:var(--mono); font-size:15px; font-weight:700}
.c-loc{color:var(--ink-2); line-height:1.45; min-width:190px}
.c-note{color:var(--muted); font-size:13px}
.nil{color:var(--muted); font-style:italic}
.thumb{width:44px; height:33px; border-radius:4px; border:1px solid var(--rule); display:block;
  object-fit:cover; background:var(--surface-2); cursor:zoom-in}

.sheetbar{display:flex; gap:8px; flex-wrap:wrap}
.sheetbar .btn{text-decoration:none}
.editgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.wirerow{border:1px solid var(--rule); border-radius:8px; padding:12px; background:var(--surface-2);
  display:flex; flex-direction:column; gap:10px}
.wirerow-top{display:grid; gap:10px; align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.wirerow-top .btn{align-self:end}
textarea{width:100%; font:inherit; font-size:14.5px; padding:10px 12px; line-height:1.5;
  border:1px solid var(--rule-strong); border-radius:6px; background:var(--surface); color:var(--ink);
  resize:vertical}
.sharerow{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--surface-2)}
.sharerow b{font-weight:600; font-size:14.5px}
#shareOut input{flex:1; min-width:0}

/* Ctrl+P on the page is a fallback — the PDF is the real print artefact, so
   this only has to be sane, not pixel-perfect. */
@media print{
  .appbar,.sheetbar,#sendPanel,#backBtn,.chips,.searchbox,.viewer{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .wrap{max-width:none; padding:0}
  .card,.wire-card,.tw{border-color:#999; break-inside:avoid}
  details.secondary{border:0; background:none}
  details.secondary summary{display:none}
  details.secondary .inner{padding:0}
  thead th{background:#eee!important; color:#000!important}
  a[href]:after{content:""}
}

/* ── photo viewer ────────────────────────────────────────────────────── */
.viewer{position:fixed; inset:0; background:rgba(8,10,11,.92); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px}
.viewer img{max-width:100%; max-height:88vh; border-radius:6px}
.viewer .close{position:absolute; top:14px; right:14px}

/* ── admin ───────────────────────────────────────────────────────────── */
.statgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:14px 16px}
.stat b{display:block; font-family:var(--mono); font-size:24px; font-weight:600; margin-top:2px}

@media (max-width:560px){
  .appbar .wrap{min-height:52px}
  .brand span:not(.glyph){font-size:15px}
  .result{flex-direction:column; align-items:flex-start; gap:8px}
}

/* Touch: this gets used one-handed leaning into a footwell, so nothing
   tappable drops below 44px however small the screen is. */
@media (pointer:coarse){
  .chip{min-height:44px; padding:10px 14px}
  .btn{min-height:44px}
  details.secondary summary{min-height:52px}
  .thumb{width:56px; height:42px}
}