/* =====================================================================
   Mentra Estimator — stylesheet

   Design notes (why things are the way they are):
     TYPE   System UI face, not Arial. Body 15px. Nothing under 11.5px.
     COLOUR Muted grey is #57627d — anything lighter fails contrast on white.
            A SELECTED option chip is a tinted fill + blue border + blue price,
            never solid blue with white text: that buried the price and shouted
            louder than the project total.
     DEPTH  Cards carry a soft shadow. The right rail carries the strongest one,
            because it holds the answer. Total and the recurring line sit in
            tinted blocks rather than being two more rows in a list.
     TOUCH  Qty buttons 32px, larger toggle, focus rings on everything.
   ===================================================================== */

:root{
  --navy:#1b3157; --blue:#2E5496; --blue-600:#3a6bb5; --blue-050:#eef4fc;
  --sky:#e7effa; --bg:#eef1f7; --card:#fff;
  --line:#e0e6f0; --line-2:#c8d3e6;
  --ink:#111827; --ink-2:#3a4560; --muted:#57627d; --faint:#8b95ab;
  --good:#0f6b39; --good-bg:#eaf6ef;
  --warn:#a92e26; --warn-bg:#fdeeed; --warn-line:#f0c4c0;
  --amber:#8a6100; --amber-bg:#fff6e4; --amber-line:#f2d9a4;
  --sh-1:0 1px 2px rgba(16,30,58,.05), 0 2px 8px rgba(16,30,58,.05);
  --sh-2:0 2px 4px rgba(16,30,58,.06), 0 8px 24px rgba(16,30,58,.08);
  --r:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;
     font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:6px}

/* ---------------- header ---------------- */
header{background:linear-gradient(180deg,#22406e,#1b3157);color:#fff;padding:14px 22px;
       display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:var(--sh-1)}
header h1{font-size:18px;margin:0;font-weight:650;letter-spacing:-.01em}
header .sub{font-size:12.5px;color:#c3d1e8}
header .spacer{flex:1}

/* ---------------- buttons ---------------- */
.btn{border:0;border-radius:9px;padding:10px 17px;font-size:13.5px;cursor:pointer;font-family:inherit;
     font-weight:600;line-height:1.2;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.20)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(27,49,87,.25)}
.btn-primary:hover{background:var(--blue-600)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-xs{padding:4px 10px;font-size:11.5px;border-radius:7px}
.btn-line{background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.btn-line:hover{background:#f6f8fc;border-color:#aebdd6}
.btn-danger{background:#fff;color:var(--warn);border:1px solid var(--warn-line)}
.btn-danger:hover{background:var(--warn-bg)}
.chip{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
      border-radius:20px;padding:4px 12px;font-size:12.5px;color:#fff;font-weight:600}

/* ---------------- tabs ---------------- */
.tabs{background:#fff;border-bottom:1px solid var(--line);padding:0 22px;display:flex;gap:2px;box-shadow:var(--sh-1)}
.tab{background:transparent;border:0;border-bottom:3px solid transparent;padding:13px 18px;font-size:14.5px;
     font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:.12s}
.tab:hover{color:var(--ink);background:#f7f9fd}
.tab.active{color:var(--navy);border-bottom-color:var(--blue);font-weight:700}

/* ---------------- layout ---------------- */
.wrap{max-width:1200px;margin:22px auto;padding:0 18px;display:grid;grid-template-columns:1fr 392px;gap:20px;align-items:start}
@media(max-width:960px){.wrap{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
      margin-bottom:18px;box-shadow:var(--sh-1)}
.step-label{font-size:12.5px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;
            margin-bottom:12px;display:flex;align-items:center;gap:9px}
.step-num{background:var(--blue);color:#fff;width:22px;height:22px;border-radius:50%;display:inline-flex;
          align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:0 0 auto}

/* ---------------- placeholder (Smart School) ---------------- */
.placeholder{text-align:center;padding:64px 24px}
.placeholder .ph-ico{font-size:54px}
.placeholder h2{margin:14px 0 8px;color:var(--navy);font-size:20px}
.placeholder p{max-width:520px;margin:0 auto;line-height:1.6;color:var(--muted)}

/* ---------------- room cards ---------------- */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
.rcard{border:1.5px solid var(--line);border-radius:12px;padding:15px 12px;cursor:pointer;text-align:center;
       background:#fff;transition:.14s}
.rcard:hover{border-color:var(--line-2);background:#f9fbfe;transform:translateY(-1px);box-shadow:var(--sh-1)}
.rcard.sel{border-color:var(--blue);background:var(--blue-050);box-shadow:0 0 0 3px rgba(46,84,150,.14)}
.rcard .ico{font-size:27px;line-height:1}
.rcard .rn{font-size:13.5px;font-weight:650;margin-top:8px;line-height:1.3;color:var(--ink)}
.rcard.sel .rn{color:var(--navy)}
.rcard .rd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.3}

/* ---------------- feature blocks ---------------- */
.feat{border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:12px;background:#fff;transition:.14s}
.feat:not(.off):hover{border-color:var(--line-2)}
.feat.off{background:#f6f8fc;border-style:dashed;border-color:var(--line-2)}
.feat.off .feat-name{color:var(--muted);font-weight:600}
.feat.auto{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,84,150,.07)}
.feat.auto.off{background:#f6f8fc;box-shadow:none;border-color:var(--line-2)}
.feat-head{display:flex;align-items:center;gap:13px}
.feat-ico{font-size:21px;width:28px;text-align:center;flex:0 0 auto}
.feat-name{font-weight:650;font-size:15px;color:var(--ink);letter-spacing:-.005em}
.feat-hint{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.feat-head .grow{flex:1;min-width:0}
/* the running price is what the eye hunts for — give it a pill */
.feat-price{font-size:13px;color:var(--navy);font-weight:700;white-space:nowrap;
            background:var(--blue-050);border:1px solid #d5e2f4;border-radius:7px;padding:4px 9px}

/* toggle */
.switch{position:relative;width:46px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#c3ccdd;border-radius:26px;transition:.18s;cursor:pointer}
.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;
               border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:var(--blue)}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switch input:focus-visible + .slider{outline:2px solid var(--blue-600);outline-offset:2px}

/* option chips — selected = tinted, NOT solid blue, so the price stays readable */
.opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px;padding-left:41px}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:10px 13px;cursor:pointer;
     font-size:13.5px;font-weight:600;color:var(--ink);transition:.12s;display:flex;flex-direction:column;
     line-height:1.3;max-width:252px;position:relative}
.opt:hover{border-color:var(--line-2);background:#f9fbfe}
.opt.sel{border-color:var(--blue);background:var(--blue-050);color:var(--navy);
         box-shadow:0 0 0 3px rgba(46,84,150,.12)}
.opt.sel:after{content:"✓";position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;
               background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:flex;
               align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.opt small{font-size:11.5px;font-weight:500;color:var(--muted);opacity:1;margin-top:3px}

/* itemised price for an option that pulls a required device in with it —
   gateway + UPS shown as separate lines and a total, so sales can answer
   "what am I paying for" without opening the price list */
.bd{display:block;margin-top:7px;border:1px solid var(--line);border-radius:7px;
    padding:6px 8px;background:#fff}
.opt.sel .bd{border-color:#cfdcf0}
.bd i{display:flex;justify-content:space-between;gap:10px;font-style:normal;
      font-size:11.5px;font-weight:500;color:var(--muted);padding:2px 0}
.bd i b{font-weight:700;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd i.sum{border-top:1px solid var(--line);margin-top:3px;padding-top:5px}
.bd i.sum span{font-weight:700;color:var(--ink-2)}
.bd i.sum b{font-size:13px;font-weight:800;color:var(--navy)}
.opt.sel .bd i.sum b{color:var(--blue)}
.opt.sel small{color:#4a628c}
/* "when to use" note under an option */
.opt .od{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted);opacity:1;
         margin-top:6px;line-height:1.4;white-space:normal}
.opt.sel .od{color:#4a628c}
/* single-option feature: shows the device, but it is not a choice */
.opt.only,.opt.sel.only{cursor:default;background:#f6f8fc;border-color:var(--line);color:var(--ink);box-shadow:none}
.opt.only:after{display:none}
.opt.sel.only small{color:var(--muted)}
/* ---- product shots (img/<MODEL>.jpg, pulled from the quotation) ----
   .noimg is added by the img onerror when a device has no picture: the model
   number shows instead. Eight devices are in that state on purpose — see
   deviceImg() in pricing.js. */
.dimg{display:block;width:100%;height:74px;border:1px solid var(--line);border-radius:8px;
      background:#fff;margin-bottom:8px;position:relative;overflow:hidden}
.dimg img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.dimg i{display:none}
.dimg.noimg{display:flex;align-items:center;justify-content:center;background:#f6f8fc;border-style:dashed}
.dimg.noimg i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.3px}
.opt.sel .dimg{border-color:#cfdcf0}
/* small, inline next to a name */
.dimg.sm{width:38px;height:38px;flex:0 0 auto;margin:0;border-radius:7px}
.dimg.sm.noimg i{font-size:8px;padding:0 2px;text-align:center;line-height:1.1}
.devcell{display:flex;align-items:center;gap:9px}

.star{color:#d99413;font-size:12px}
.opt.sel .star{color:#d99413}

/* ---- device tags: Wiring · Camera · No image · Battery · Outdoor ----
   Camera and Wiring are the two that change a deal, so they carry colour.
   Battery is reassurance, so it stays quiet. */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{font-style:normal;font-size:10.5px;font-weight:700;line-height:1;padding:3px 7px;
     border-radius:5px;border:1px solid;white-space:nowrap;cursor:help;letter-spacing:.2px}
.tag.wire{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
/* Two optical states, and they must never be mistaken for each other:
   green = a lens you cannot watch · solid red = a lens you can.
   Amber is already Wiring — reusing it here made "no feed" look like a
   warning when it is the reassuring one. */
.tag.nofeed{color:var(--good); background:var(--good-bg); border-color:#bfe0cd}
.tag.live  {color:#fff;        background:var(--warn);    border-color:var(--warn)}
.tag.batt{color:var(--muted);background:#f2f5fa;border-color:var(--line)}
.tag.out {color:var(--blue); background:var(--blue-050);border-color:#cfdcf0}
.tag.sim {color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.tag.disp{color:#fff; background:#5a4bd1; border-color:#5a4bd1}
/* on a selected chip the fills would fight the tint — go outline-only */
.opt.sel .tag{background:#fff}
/* ...but .live and .disp use white text, which vanishes on the white fill.
   Keep their filled look when selected so the tag reads the same either way. */
.opt.sel .tag.live{background:var(--warn);color:#fff;border-color:var(--warn)}
.opt.sel .tag.disp{background:#5a4bd1;color:#fff;border-color:#5a4bd1}

/* price on an option chip */
.oprice{margin-top:7px;font-size:13px;font-weight:800;color:var(--navy)}
.opt.sel .oprice{color:var(--blue)}
.oprice i{font-style:normal;font-weight:700;font-size:11.5px;margin-left:5px;padding:1px 5px;border-radius:5px}
.oprice i.up{color:var(--warn);background:var(--warn-bg)}
.oprice i.down{color:var(--good);background:var(--good-bg)}
.opt.sel .oprice i.up{color:var(--warn);background:#fff}
.opt.sel .oprice i.down{color:var(--good);background:#fff}

/* quantity — bigger targets */
.qty{display:flex;align-items:center;gap:9px;margin-top:12px;padding-left:41px;font-size:12.5px;color:var(--muted)}
.qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:#fff;cursor:pointer;
            font-size:17px;font-weight:700;color:var(--navy);line-height:1;transition:.12s}
.qty button:hover{background:var(--blue-050);border-color:var(--blue)}
.qty .n{min-width:30px;text-align:center;font-weight:700;color:var(--ink);font-size:15px}

/* ---------------- environment group (auto-pick) ---------------- */
.envgroup{border:1.5px solid #cfdcf0;border-radius:var(--r);padding:14px;margin-bottom:12px;background:#f5f9ff}
.envtitle{font-size:11.5px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;margin:2px 0 11px 4px}
.envgroup .feat{background:#fff}
.envgroup .feat.auto{border-color:var(--blue);background:#fff}
.feat.overridden{opacity:1;background:#eef2f8;border-style:dashed;border-color:var(--line-2)}
.feat.overridden .feat-name{color:var(--faint);text-decoration:line-through;text-decoration-color:#b6c0d3}
.feat.overridden .feat-hint{color:var(--faint)}
.ovr-badge{background:#fff;color:var(--blue);border:1px solid var(--blue);font-size:10.5px;font-weight:700;
           padding:3px 10px;border-radius:20px;letter-spacing:.4px;white-space:nowrap}

/* parameter chips */
.params{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;padding-left:41px}
.param{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font-size:13px;
       font-weight:600;cursor:pointer;color:var(--ink-2);transition:.12s;user-select:none;
       display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.param small{font-size:10px;font-weight:500;opacity:.7;margin-top:1px}
.param:hover{border-color:var(--line-2);background:#f9fbfe}
.param.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.param.sel small{opacity:.85}
/* a filter chip (not a measurement) — display requirement */
.param.req{border-style:dashed;border-color:#b9a9ec;color:#4a3aa8}
.param.req:hover{background:#f4f1fd;border-color:#8f79e0}
.param.req.sel{background:#5a4bd1;border-color:#5a4bd1;color:#fff;border-style:solid}
.brow{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600}
.resolved{margin:13px 0 0 41px;padding:11px 13px;background:#fff;border:1px solid #cfdcf0;
          border-left:3px solid var(--blue);border-radius:9px;font-size:13.5px}
.resolved b{color:var(--navy)}
.resolved.muted{border-left-color:var(--line-2);color:var(--muted)}
.rnote{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ---------------- right rail = the answer ---------------- */
.rail{position:sticky;top:18px}
.rail .card{box-shadow:var(--sh-2)}
.est{position:sticky;top:18px}
.big{font-size:36px;font-weight:800;color:var(--navy);line-height:1.05;letter-spacing:-.02em}
.big small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.usd{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.45}

.roomsbox{max-height:158px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:0 9px;background:#fcfdff}
/* room count on the left, Clear on the right — beside the list it clears */
.basketbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.lines{margin-top:12px}
.ln{display:grid;grid-template-columns:1fr 74px 92px;gap:8px;align-items:center;padding:8px 0;font-size:13.5px;
    border-bottom:1px solid #eef1f7}
.ln .lbl{color:var(--ink-2)}
.ln .inp{text-align:right;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ln .inp input{width:52px;padding:5px 6px;border:1.5px solid var(--line-2);border-radius:7px;text-align:right;
               font-family:inherit;font-size:13px;font-weight:700;color:var(--blue);margin-right:4px;background:#fff}
.ln .inp input:focus{border-color:var(--blue);background:var(--blue-050);outline:none}
.ln .val{font-weight:700;color:var(--ink);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
/* a sub-option of the line above it (VAT -> apply to subscription) */
.ln.subopt{display:block;padding:2px 0 8px;border-bottom:1px solid #eef1f7;cursor:pointer}
.ln.subopt .lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);padding-left:12px}
.ln.subopt:hover .lbl{color:var(--ink-2)}
.ln.subopt input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--blue);cursor:pointer;margin:0}
.ln.sub{border-bottom:2px solid var(--navy);margin-top:6px;padding-bottom:9px}
.ln.sub .lbl,.ln.sub .val{color:var(--navy);font-weight:800}
.ln.neg .val{color:var(--good)}
.ln.tot{border-bottom:0;border-top:0;margin-top:8px;padding:12px;background:var(--blue-050);border-radius:10px}
.ln.tot .lbl{color:var(--navy);font-weight:800;font-size:14px}
.ln.tot .val{color:var(--blue);font-weight:800;font-size:20px;letter-spacing:-.02em}
.ln.tot.recur{background:var(--good-bg);margin-top:8px}
.ln.tot.recur .lbl{color:var(--good);font-weight:700;font-size:13px}
.ln.tot.recur .val{color:var(--good);font-weight:800;font-size:15.5px}

/* device breakdown */
table.bd{margin-top:12px;font-size:13.5px}
table.bd td{padding:6px 0;border-bottom:1px solid #eef1f7;color:var(--muted)}
table.bd td.r{text-align:right;color:var(--ink);font-weight:700}
.recur{margin-top:10px;font-size:12.5px;color:var(--muted);background:var(--good-bg);border-radius:9px;padding:9px 11px}
.recur b{color:var(--good)}
.bom{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fcfdff}
.bom summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--blue)}
.bom table{margin-top:8px}

/* warnings */
.warnbox{margin-top:12px;padding:11px 13px;background:var(--warn-bg);border:1px solid var(--warn-line);
         border-left:3px solid var(--warn);border-radius:9px;font-size:12.5px;color:#7e211b;line-height:1.5}
.okbox{margin-top:12px;padding:10px 13px;background:var(--good-bg);border:1px solid #bfe0cd;
       border-left:3px solid var(--good);border-radius:9px;font-size:12.5px;color:#0f6b39;line-height:1.5}
/* amber variant of .warnbox — a heads-up (engineer used an older preset), not an error */
.warnbox.amber{background:var(--amber-bg);border-color:var(--amber-line);
       border-left-color:var(--amber);color:#7a5600}
/* the engineer's overall note, shown once at the top of a review */
.notebox{margin-top:12px;padding:10px 13px;background:var(--blue-050);border:1px solid #cfdcf0;
       border-left:3px solid var(--blue);border-radius:9px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.flag{color:var(--warn);font-size:12.5px;font-weight:700;margin-top:7px;line-height:1.4}

/* client-facing summary */
.summary{margin-top:12px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:#f9fbfe}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;font-size:13.5px;color:var(--muted)}
.srow small{font-size:11.5px}
.srow b{color:var(--navy);font-weight:800;white-space:nowrap}
.srow.big{font-size:15px}
.srow.big b{font-size:20px;color:var(--blue)}
.srow.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:9px}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.tot-row td{font-weight:800;color:var(--navy);border-top:2px solid var(--navy);border-bottom:0;font-size:15px}
.muted{color:var(--muted)}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.disclaim{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.45}

/* ---------------- modals ---------------- */
.modal-bg{position:fixed;inset:0;background:rgba(17,24,39,.55);display:none;align-items:flex-start;
          justify-content:center;padding:32px 12px;overflow:auto;z-index:50;backdrop-filter:blur(2px)}
.modal{background:#fff;border-radius:var(--r);max-width:900px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(10,20,40,.35)}
.modal h2{font-size:19px}
.ah{font-size:12.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;margin:20px 0 9px;font-weight:800}

/* admin tabs */
.atabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:16px 0 4px}
.atab{background:transparent;border:0;border-bottom:3px solid transparent;padding:11px 15px;font-size:13.5px;
      font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:.12s}
.atab:hover{color:var(--ink);background:#f7f9fd}
.atab.active{color:var(--navy);border-bottom-color:var(--blue);font-weight:700}

/* ---------------- subscription: cost x multiplier = price ---------------- */
.row3{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;gap:9px;align-items:center;margin:18px 0}
@media(max-width:700px){.row3{grid-template-columns:1fr}.row3 .op{display:none}}
.sbox{border:1.5px solid var(--line);border-radius:12px;padding:13px;background:#f9fbfe}
.sbox.ro{background:#f3f6fb}
.sbox.hero{background:var(--blue-050);border-width:2px;border-color:var(--blue);box-shadow:var(--sh-1)}
.sbox .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.sbox .big{font-size:28px;font-weight:800;color:var(--navy);line-height:1.05;margin-top:6px}
.sbox.hero .big{color:var(--blue)}
.sbox .u{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.sbox input{width:100%;padding:6px 9px;border:2px solid var(--blue);border-radius:9px;font-family:inherit;
            font-size:28px;font-weight:800;color:var(--blue);text-align:center;margin-top:4px;background:#fff}
.op{font-size:22px;font-weight:800;color:var(--faint);text-align:center}
.profit{color:var(--good);font-weight:800}
.loss{color:var(--warn);font-weight:800}
.warnrow{margin-top:12px;padding:10px 13px;border-radius:9px;font-size:12.5px;display:none;line-height:1.5}
.warnrow.bad{display:block;background:var(--warn-bg);border:1px solid var(--warn-line);border-left:3px solid var(--warn);color:#7e211b}
.warnrow.thin{display:block;background:var(--amber-bg);border:1px solid var(--amber-line);border-left:3px solid #d99413;color:var(--amber)}

.skpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:6px}
@media(max-width:700px){.skpis{grid-template-columns:1fr}}
.skpi{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff;box-shadow:var(--sh-1)}
.skpi .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.skpi .val{font-size:22px;font-weight:800;color:var(--navy);margin-top:4px;letter-spacing:-.02em}
.skpi .val small{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:0}
.skpi .u{font-size:11.5px;color:var(--muted);margin-top:4px}
.skpi.be{background:var(--amber-bg);border-color:var(--amber-line)}
.skpi.be .val{color:var(--amber)}
.tot-jod td{font-weight:800;color:var(--blue);background:var(--blue-050);border-bottom:0}

/* server location picker — deliberately prominent */
.locbox{margin-top:16px;border:2px solid var(--blue);border-radius:12px;padding:15px 16px;background:var(--blue-050)}
.loclbl{font-size:12.5px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px}
.locsel{width:100%;padding:11px 12px;border:1.5px solid var(--blue);border-radius:9px;background:#fff;
        font-family:inherit;font-size:16px;font-weight:700;color:var(--navy);cursor:pointer}
.locnote{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.locnote b{color:var(--navy)}

.subgrid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
@media(max-width:760px){.subgrid2{grid-template-columns:1fr}}
.beRow{background:var(--amber-bg)}
.beRow td{border-top:2px solid #d99413;border-bottom:2px solid #d99413;font-weight:800;color:var(--navy)}
.pos{color:var(--good);font-weight:700}
.neg{color:var(--warn);font-weight:700}

/* ---------------- forms ---------------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.grid4{grid-template-columns:repeat(2,1fr)}}
label.fld{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
select,input[type=text],input[type=number],input[type=password]{width:100%;padding:10px 11px;
        border:1.5px solid var(--line-2);border-radius:9px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
select:focus,input[type=text]:focus,input[type=number]:focus,input[type=password]:focus{
        border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(46,84,150,.12)}
::placeholder{color:var(--faint)}
.adminbar{background:var(--amber-bg);border-bottom:1px solid var(--amber-line);color:var(--amber);
          padding:8px 12px;font-size:12.5px;text-align:center;font-weight:600}
.adminbar a{color:var(--amber)}
.clientbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------------- export: [ what ] [ pdf | csv ] [ Export ] ---------------- */
.outbox{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f9fbfe}
.outlbl{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px}
.outrow{display:flex;align-items:center;gap:8px}
.outdoc{flex:1;min-width:0;padding:8px 10px;font-size:13px;font-weight:600;color:var(--ink)}
.outsel{width:82px;flex:0 0 auto;padding:8px;font-size:13px;font-weight:600;color:var(--ink)}
.outrow .btn{flex:0 0 auto;padding:9px 15px}
@media(max-width:420px){.outrow{flex-wrap:wrap}.outdoc{flex:1 0 100%}}

/* ================= ENGINEERING REVIEW (review.js) =================
   One feature per screen: how it is now, and what it BECOMES with the
   changes you've ticked. */
.rvtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 12px}
.rvwho{font-size:12.5px;color:var(--muted)}
.rvdots{display:flex;gap:4px;flex:1;justify-content:center}
.rvdot{width:26px;height:5px;border-radius:3px;background:var(--line-2);transition:.2s}
.rvdot.done{background:var(--good)}
.rvdot.part{background:#d99413}
.rvdot.at{background:var(--navy);transform:scaleY(1.8)}
.rvn{font-size:12.5px;color:var(--muted);white-space:nowrap}
.rvn b{color:var(--navy);font-size:14px}

.rvq{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-2)}
.rvh{padding:16px 18px 0;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rvh .ic{font-size:24px}
.rvh .tx{flex:1;min-width:0}
.rvh .cr{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.rvh .tt{font-size:19px;font-weight:650;color:var(--navy);letter-spacing:-.01em}
.rvh .ss{font-size:12.5px;color:var(--muted)}
.rvh .nch{font-size:11.5px;font-weight:800;color:var(--amber);background:var(--amber-bg);
  border:1px solid var(--amber-line);border-radius:6px;padding:4px 9px;white-space:nowrap}

.rvtwo{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 18px 2px}
@media(max-width:820px){.rvtwo{grid-template-columns:1fr}}
.rvp{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fcfdff}
.rvp.now{border:2px solid var(--blue);background:var(--blue-050)}
.rvp .ph{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:9px;display:flex;align-items:center;gap:6px}
.rvp .ph.a{color:var(--faint)}
.rvp .ph.b{color:var(--blue)}
.rvp .ph .live{font-size:8.5px;background:var(--blue);color:#fff;padding:1px 5px;border-radius:4px}
.rvopts{display:flex;flex-wrap:wrap;gap:7px}
/* feature-order review: a simple numbered list, moved rows highlighted */
.rvfo{margin:0;padding-left:24px}
.rvfo li{padding:3px 0;font-size:13px;color:var(--ink-2);line-height:1.35}
.rvfo li.moved{font-weight:700;color:var(--blue)}
.rvopt{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:7px;
  width:calc(50% - 4px);position:relative;transition:.14s}
.rvopt .dimg{height:44px;margin-bottom:5px}
.rvopt .t{font-size:11.5px;font-weight:650;line-height:1.25;display:block}
.rvopt .m{font-size:9.5px;color:var(--muted);display:block;margin-top:1px}
.rvopt .tags{margin-top:4px}
.rvopt .j{font-size:10.5px;font-weight:800;color:var(--navy);display:block;margin-top:4px}
.rvopt.star{border-color:var(--blue);background:var(--blue-050);box-shadow:0 0 0 2px rgba(46,84,150,.13)}
.rvopt.star:after{content:"★";position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  border-radius:50%;background:var(--blue);color:#fff;font-size:9px;display:flex;
  align-items:center;justify-content:center}
.rvopt.gone{opacity:.3;border-style:dashed}
.rvopt.gone .t{text-decoration:line-through}
.rvopt.fresh{border-color:var(--good);box-shadow:0 0 0 2px rgba(15,107,57,.12)}
.rvempty{padding:26px 0;text-align:center;color:var(--faint);font-size:13px}

/* a device spec, before vs after — .hot marks what actually moved */
.rvdev .dimg{height:60px;margin-bottom:9px}
.rvdm{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:7px}
.rvdrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:5px 7px;border-radius:5px;font-size:11.5px;color:var(--muted);border-bottom:1px solid #eef1f7}
.rvdrow:last-child{border-bottom:0}
.rvdrow b{color:var(--ink);font-weight:650;text-align:right;font-size:12px}
.rvdrow.hot{background:var(--amber-bg);border-bottom-color:var(--amber-line)}
.rvdrow.hot b{color:var(--amber);font-weight:800}
.rvdrow .tags{margin:0}
.tag.hot{box-shadow:0 0 0 2px var(--amber-line)}
.onoff{font-size:11px;font-weight:700;color:var(--muted);margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line)}
.onoff b.y{color:var(--blue)} .onoff b.n{color:var(--faint)}
.rvsingle{padding:16px 18px;font-size:13.5px;color:var(--ink-2)}
.rvsaid{margin:10px 18px 0;padding:10px 13px;background:#f9fbfe;border:1px solid var(--line);
  border-left:3px solid var(--blue);border-radius:0 9px 9px 0;font-size:12.5px;color:var(--ink-2)}
.rvsaid b{color:var(--navy)}

/* the change list — the tick is the whole point, so it shouts */
.rvlist{margin:14px 18px 0;border:2px solid var(--line-2);border-radius:11px;overflow:hidden}
.rvlh{background:var(--blue-050);border-bottom:2px solid var(--line-2);padding:9px 12px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rvlh .q{font-size:12.5px;font-weight:800;color:var(--navy)}
.rvlh .hintt{font-size:11px;color:var(--muted)}
.rvlh .sp{flex:1}
.rvlh button{background:#fff;border:1px solid var(--line-2);border-radius:6px;font-family:inherit;
  font-size:11px;font-weight:800;cursor:pointer;color:var(--blue);padding:4px 9px}
.rvlh button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.rvci{display:flex;align-items:center;gap:11px;padding:11px 12px;border-bottom:1px solid #eef1f7;
  cursor:pointer;background:#fff;transition:.1s;user-select:none}
.rvci:last-child{border-bottom:0}
.rvci:hover{background:var(--blue-050)}
.rvci .cb{width:22px;height:22px;border:2px solid var(--line-2);border-radius:6px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;
  font-weight:800;background:#fff;transition:.1s}
.rvci.on .cb{background:var(--good);border-color:var(--good)}
.rvci:hover .cb{border-color:var(--good)}
.rvci .k{font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:4px;border:1px solid;white-space:nowrap}
.rvci .d{flex:1;min-width:0;font-size:13px;color:var(--ink)}
.rvci .c{font-size:11px;color:var(--faint);white-space:nowrap}
.rvci .yn{font-size:9.5px;font-weight:800;letter-spacing:.4px;width:34px;text-align:right}
.rvci.on .yn{color:var(--good)}
.rvci.off{background:#fafbfd}
.rvci.off .d{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--muted)}
.rvci.off .yn{color:var(--faint)}

.rvacts{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:16px 18px 14px}
@media(max-width:640px){.rvacts{grid-template-columns:1fr}}
.rvbig{border:2px solid var(--line-2);background:#fff;border-radius:11px;padding:13px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink-2);transition:.12s}
.rvbig:hover{border-color:var(--navy);background:#f7f9fd}
.rvbig small{display:block;font-size:11px;font-weight:500;color:var(--faint);margin-top:2px}
.rvbig.go{border-color:var(--good);color:var(--good);background:var(--good-bg)}
.rvbig.go:hover{background:#dcefe4}
.rvbig.go small{color:var(--good);opacity:.8}
.rvnav{display:flex;justify-content:space-between;align-items:center;padding:0 18px 14px}
.rvlnk{background:0;border:0;font-family:inherit;font-size:12px;color:var(--faint);cursor:pointer}
.rvlnk:hover{color:var(--navy);text-decoration:underline}
.rvkbd{font-size:10.5px;color:var(--faint)}

.rvdone{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--sh-2)}
.rvdone h2{margin:0 0 3px;font-size:20px;color:var(--navy)}
.rvdone .lead{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.rvrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:6px;font-size:13px}
.rvrow.y{background:var(--good-bg);border-color:#bfe0cd}
.rvrow.p{background:var(--amber-bg);border-color:var(--amber-line)}
.rvrow .i{font-size:15px}
.rvrow .t{flex:1;min-width:0}
.rvrow .t b{color:var(--navy)}
.rvrow .t small{display:block;font-size:11px;color:var(--muted)}
.rvrow .ch{background:0;border:0;font-family:inherit;font-size:11.5px;color:var(--blue);
  cursor:pointer;font-weight:700}
.rvrow .ch:hover{text-decoration:underline}
.rvfin{font-size:11.5px;color:var(--muted);margin-top:11px;text-align:center;line-height:1.5}

/* ---------------- print ---------------- */
@media print{
  header,.tabs,.est .disclaim,.adminbar,#adminBtn,.no-print{display:none!important}
  body{background:#fff}
  .wrap{grid-template-columns:1fr}
  .card,.rail .card{box-shadow:none;border-color:#ccc}
  .bom[open] summary{display:none}
}