/* PROVER - bright technical-illustration look, modelled on the SmartyMe reels Tyler sent 9/10:
   white ground, deep navy ink, saturated safety-orange accent, white callout pills on leader lines. */
:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#0f2557; --ink2:#3d5480; --mute:#6b7fa3;
  --line:#d7e0f0; --line2:#b9c8e2;
  --navy:#123a8f; --navy2:#1e56c8; --acc:#f5820b; --acc2:#ffb347;
  --ok:#12a150; --ok2:#3ddc84; --bad:#e02424; --warn:#f0a500;
  --steel:#8ea3c0; --copper:#c96a24; --water:#1e88e5;
  --radius:16px; --shadow:0 2px 0 rgba(18,58,143,.06), 0 8px 24px rgba(18,58,143,.10);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{padding:0 16px calc(28px + env(safe-area-inset-bottom));max-width:660px;margin:0 auto}

header.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px}
header.top h1{font-size:19px;margin:0;letter-spacing:-.01em;font-weight:800;color:var(--navy)}
header.top h1 span{color:var(--acc)}
.pill{font-size:12px;font-weight:700;color:var(--ink2);background:#fff;border:1.5px solid var(--line2);
  border-radius:999px;padding:5px 12px;box-shadow:0 1px 2px rgba(18,58,143,.08);white-space:nowrap}
.pill.ok{color:#0b6b36;border-color:#8fe0b4;background:#effaf4}
.pill.bad{color:#a41414;border-color:#ffb3b3;background:#fff0f0}

.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:14px 0;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.card h3{margin:16px 0 8px;font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.muted{color:var(--mute)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{flex:1 1 auto}

.btn{appearance:none;border:1.5px solid var(--line2);background:#fff;color:var(--navy);border-radius:12px;
  padding:13px 15px;font-size:15px;font-weight:700;cursor:pointer;touch-action:manipulation;
  box-shadow:0 2px 0 var(--line2);transition:transform .06s,box-shadow .06s,background .12s}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--line2)}
.btn-primary{background:var(--acc);color:#fff;border-color:#d96f00;box-shadow:0 3px 0 #b95c00}
.btn-primary:active{box-shadow:0 0 0 #b95c00}
.btn-ghost{background:transparent;box-shadow:none;border-style:dashed}
.btn.bad{color:var(--bad);border-color:#f3b0b0}
.btn.on{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 3px 0 #0b2a69}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none;transform:none}

.stat{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.stat:last-child{border-bottom:0}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.score{font-size:52px;font-weight:900;line-height:1;letter-spacing:-.03em}
.score.ok{color:var(--ok)}.score.bad{color:var(--bad)}

.tabs{display:flex;gap:8px;margin:10px 0 2px}
.tabs .btn{flex:1;padding:11px 6px;font-size:14px}
.tabs .btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}

select,input[type=number],input[type=text]{width:100%;font-size:16px;padding:12px;border-radius:12px;
  border:1.5px solid var(--line2);background:#fff;color:var(--ink);font-weight:600}
input[type=range]{width:100%;accent-color:var(--acc)}

canvas{width:100%;display:block;border-radius:14px;background:#fff;border:1.5px solid var(--line);
  touch-action:none;box-shadow:inset 0 1px 3px rgba(18,58,143,.06)}

/* fact card: the SmartyMe "callout" look */
.fact{border-left:5px solid var(--acc)}
.fact h2{color:var(--navy)}
.src{font-size:12px;color:var(--mute);margin-top:10px}

/* step strip, like the 1-2-3-4 panel row at the bottom of the microwave ad */
.steps{display:flex;gap:6px;margin:10px 0 4px}
.step{flex:1;text-align:center;font-size:11px;font-weight:800;color:var(--mute);
  border:1.5px solid var(--line);border-radius:10px;padding:8px 4px;background:#fff;line-height:1.25}
.step b{display:block;font-size:15px;color:var(--line2)}
.step.on{border-color:var(--acc);color:var(--acc);background:#fff8ef}
.step.on b{color:var(--acc)}
.step.done{border-color:var(--ok);color:var(--ok);background:#f0fbf5}
.step.done b{color:var(--ok)}

/* status line under the schematic */
.status{min-height:44px;margin:10px 0;padding:11px 13px;border-radius:12px;background:#fff;
  border:1.5px solid var(--line);font-size:14px;font-weight:600;color:var(--ink2)}
.status.bad{border-color:#f3b0b0;background:#fff5f5;color:#a41414}
.status.ok{border-color:#8fe0b4;background:#f1fbf6;color:#0b6b36}

.list{list-style:none;padding:0;margin:0}
.list li{padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;margin:7px 0;background:#fff}
.drag{cursor:grab;user-select:none}.drag.over{border-color:var(--acc)}

footer{color:var(--mute);font-size:12px;text-align:center;padding:20px 0}

/* gauge swatch on the wire-spool buttons */
/* cable cross-section: coloured jacket ring with the copper conductor to scale inside */
.swatch{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  margin-right:7px;vertical-align:-4px;border:1.5px solid rgba(15,37,87,.28);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.swatch i{display:block;border-radius:50%;background:linear-gradient(160deg,#f0a765,#b4611f);
  box-shadow:inset 0 1px 0 rgba(255,225,190,.9)}

/* coach: the one control you should touch next */
.btn.hint{border-color:var(--acc);color:var(--acc);box-shadow:0 3px 0 #d96f00;animation:hintpulse 1.15s ease-in-out infinite}
.btn.hint.btn-primary{color:#fff}
@keyframes hintpulse{0%,100%{transform:translateY(0);box-shadow:0 3px 0 #d96f00,0 0 0 0 rgba(245,130,11,.45)}
  50%{transform:translateY(-1px);box-shadow:0 4px 0 #d96f00,0 0 0 7px rgba(245,130,11,0)}}
.status.coach{border-color:var(--acc);background:#fff8ef;color:#8a4a00}
.status.coach b{color:var(--acc)}

@media (prefers-reduced-motion: reduce){ .btn{transition:none} .btn.hint{animation:none} }