/* Design tools — Switchboard Designer (switchboard-designer.html) and
   LED Driver Calculator (led-driver-calculator.html). Logic lives in js/designer.js. */
:root{
  --ink:#0e1726; --ink-2:#1b2740; --paper:#fff; --paper-2:#f6f8fb; --paper-3:#eef2f7;
  --border:#e2e8f2; --text:#1c2634; --text-dim:#55617a; --text-mute:#8a94a8;
  --amber:#f5a623; --amber-2:#ff7a1a; --brand:#1f6feb;
  --ok:#1a8a4a; --ok-bg:#e6f5ec; --warn:#b4790f; --warn-bg:#fbf0dc; --crit:#c0392b; --crit-bg:#fbe7e3;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Sora',var(--font);
  --radius:16px; --radius-sm:10px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font);background:var(--paper-2);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.02em;margin:0 0 .4em;}
.wrap{max-width:1120px;margin:0 auto;padding:34px 24px 60px;}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-2);}
.proto-tag{font-family:var(--font);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--amber);color:#1c1200;padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:8px;}
.lede{color:var(--text-dim);max-width:70ch;font-size:1.02rem;}
.lede a,.crosslink a,.about-tool a{color:var(--brand);font-weight:600;}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px -18px rgba(14,23,38,.25);}
.pad{padding:22px 24px;}

/* ---- site header / footer ---- */
.tool-header{background:var(--ink);color:#fff;}
.tool-header-in{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.tool-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1rem;}
.tool-brand img{display:block;}
.tool-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto;}
.tool-nav a{color:#cfd7e6;text-decoration:none;font-size:.9rem;font-weight:600;}
.tool-nav a:hover{color:#fff;}
.tool-nav a.btn{color:#1c1200;}
.tool-footer{border-top:1px solid var(--border);background:var(--paper);}
.tool-footer-in{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:.84rem;color:var(--text-dim);}
.tool-footer a{color:var(--text-dim);}
.crosslink{margin:10px 0 0;color:var(--text-dim);font-size:.92rem;}

/* ---- step 0: choose path ---- */
.chooser{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;}
.choose-btn{text-align:left;cursor:pointer;border:1px solid var(--border);background:var(--paper);border-radius:var(--radius);padding:24px;transition:.16s;font-family:var(--font);}
.choose-btn:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:0 16px 34px -20px rgba(245,166,35,.6);}
.choose-btn .ic{font-size:1.7rem;}
.choose-btn h3{margin:.5em 0 .2em;}
.choose-btn p{margin:0;color:var(--text-dim);font-size:.92rem;}

/* ---- quick input ---- */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;margin-top:6px;}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);margin-bottom:5px;}
.field input[type=number]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:1rem;}
.fsel{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:1rem;background:#fff;}
#led-vdrop td,#led-vdrop th,#led-ctrl td,#led-ctrl th{padding:8px 12px;border-bottom:1px solid var(--border);font-size:.85rem;text-align:left;}
.cards{display:grid;gap:12px;}
.stat4{grid-template-columns:repeat(4,1fr);margin-top:14px;}
.statcard{padding:14px 16px;}
.statcard .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);}
.statcard .v{font-size:.95rem;margin-top:4px;}
.field .hint{font-size:.74rem;color:var(--text-mute);margin-top:3px;}
.checks{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;}
.checks label{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--text-dim);}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:.18s;text-decoration:none;}
.btn-amber{background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#1c1200;}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(245,166,35,.6);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-dim);}
.btn-sm{padding:6px 14px;font-size:.82rem;}
.btn:disabled{opacity:.6;cursor:default;transform:none;}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center;}

/* ---- switchboard ---- */
.ctrl-card{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--paper);overflow:hidden;}
.ctrl-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;background:var(--paper-3);border-bottom:1px solid var(--border);}
.ctrl-head h3{margin:0;font-size:1.05rem;}
.ctrl-head select{max-width:100%;}
.ordercode{font-family:'Inter';font-weight:700;font-size:.82rem;letter-spacing:.03em;background:var(--ink);color:#fff;padding:4px 10px;border-radius:999px;}
select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:.9rem;background:#fff;}
.spacer{flex:1;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

table.lines{width:100%;border-collapse:collapse;min-width:620px;}
table.lines th,table.lines td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:.88rem;text-align:left;vertical-align:middle;}
table.lines th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);font-weight:700;background:var(--paper-2);}
/* devices: tidy grid — label left, control right; same columns on every line */
.devs{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:6px 22px;max-width:470px;}
.dev{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;font-size:.84rem;}
.dev .nm{color:var(--text);white-space:nowrap;}
.dev .nm small{font-size:.7rem;color:var(--text-mute);}
.dev-check{width:16px;height:16px;margin:0 36px 0 0;accent-color:var(--brand);}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.stepper button{width:24px;height:24px;border:none;background:var(--paper-2);cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);}
.stepper button:hover{background:var(--amber);}
.stepper input{width:40px;border:none;outline:none;text-align:center;font-family:var(--font);font-weight:600;font-size:.85rem;font-variant-numeric:tabular-nums;padding:2px 0;background:#fff;-moz-appearance:textfield;appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.usage{font-variant-numeric:tabular-nums;font-weight:700;font-size:.82rem;white-space:nowrap;}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;}
.uwrap{display:inline-flex;align-items:center;}
.ucell{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;white-space:nowrap;color:var(--text-dim);}
.ucell.addr{width:98px;}
.ucell .pill{width:52px;min-width:52px;box-sizing:border-box;text-align:center;padding:2px 0;font-variant-numeric:tabular-nums;}
.pill.ok{background:var(--ok-bg);color:var(--ok);}
.pill.warn{background:var(--warn-bg);color:var(--warn);}
.pill.crit{background:var(--crit-bg);color:var(--crit);}
.io-row{display:flex;gap:12px 22px;flex-wrap:wrap;padding:12px 18px;background:var(--paper-2);border-bottom:1px solid var(--border);align-items:center;}
.io-row .field{display:flex;align-items:center;gap:8px;}
.io-row label{margin:0;}
.io-row .field input[type=number]{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-family:var(--font);font-size:.9rem;}
.help{font-size:.78rem;color:var(--brand);font-weight:600;}

/* ---- switchboard result layout: toolbar + main column + sticky sidebar ---- */
.wrap,.tool-header-in,.tool-footer-in{max-width:1320px;}
.models{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--border);}
.model{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--paper-2);border-radius:var(--radius-sm);}
.model strong{font-size:.9rem;color:var(--ink);}
.model span{font-size:.82rem;color:var(--text-dim);}
.models p{grid-column:1/-1;margin:0;font-size:.85rem;color:var(--text-dim);}
.models a{color:var(--brand);font-weight:600;}
.result-bar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:14px 18px;}
.result-title h2{font-size:1.4rem;margin:0;}
.result-title span{font-size:.82rem;color:var(--text-mute);}
.result-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;}
.inline-field{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);}
.proj{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:.85rem;width:230px;max-width:100%;}
.result-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;margin-top:18px;}
.result-main .ctrl-card:first-child{margin-top:0;}
.result-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;display:grid;gap:14px;padding-bottom:2px;}
.result-side .bom{margin-top:0;}
.result-side .bom h3{margin:0 0 12px;font-size:1.05rem;}
.result-side .bom table{border:none;border-radius:0;}
.result-side .bom th,.result-side .bom td{padding:9px 6px;font-size:.86rem;}
.result-side .msgs{margin-top:0;}
.bom-note{font-size:.78rem;color:var(--text-mute);margin:10px 0 0;}
.side-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
details.send{margin-top:0;}
details.send summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:700;color:var(--ink);list-style:none;}
details.send summary::-webkit-details-marker{display:none;}
details.send summary::after{content:'＋';float:right;color:var(--text-mute);}
details.send[open] summary::after{content:'－';}
details.send form{padding:0 20px 18px;}
.send-grid.one{grid-template-columns:1fr;}
.terms{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:10px 22px;margin:0;max-width:980px;}
.terms dt{font-weight:700;color:var(--ink);font-size:.92rem;}
.terms dd{margin:0;color:var(--text-dim);font-size:.92rem;}
.terms a{color:var(--brand);font-weight:600;}
.result-main,.result-side{min-width:0;}
@media(max-width:1260px){.result-grid{grid-template-columns:minmax(0,1fr);}.result-side{position:static;max-height:none;overflow:visible;}}
@media(max-width:700px){.models{grid-template-columns:1fr;}.terms{grid-template-columns:1fr;gap:4px;}.terms dd{margin-bottom:10px;}.result-actions{margin-left:0;}}

/* ---- parts list ---- */
.bom{margin-top:26px;}
.bom table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.bom th,.bom td{padding:11px 16px;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem;}
.bom th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);background:var(--paper-2);}
.bom td.qty{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;width:90px;}
.bom td a{color:var(--brand);font-weight:600;}
.bom tr.sub td{background:var(--paper-2);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute);}
.msgs{margin-top:16px;display:grid;gap:8px;}
.msg{padding:10px 14px;border-radius:10px;font-size:.86rem;border-left:4px solid;}
.msg.warn{background:var(--warn-bg);border-color:var(--warn);color:#7a5308;}
.msg.crit{background:var(--crit-bg);border-color:var(--crit);color:#8a251b;}
.msg.info{background:#eaf1ff;border-color:var(--brand);color:#1a3f8f;}
.assume{margin-top:30px;font-size:.8rem;color:var(--text-mute);border-top:1px dashed var(--border);padding-top:14px;}
.assume b{color:var(--text-dim);}

/* ---- send this design to us ---- */
.send{margin-top:26px;}
.send h3{margin-bottom:4px;}
.send p{color:var(--text-dim);font-size:.9rem;margin:0 0 14px;}
.send-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;}
.send-grid .full{grid-column:1/-1;}
.send input[type=text],.send input[type=email],.send textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.95rem;}
.send textarea{min-height:80px;resize:vertical;}
.send-note{font-size:.85rem;color:var(--text-dim);}
.hp{position:absolute;left:-9999px;}

/* ---- about the tool (readable explanation) ---- */
.about-tool{margin-top:40px;}
.about-tool h2{font-size:1.3rem;}
.about-tool p,.about-tool li{color:var(--text-dim);font-size:.95rem;max-width:80ch;}
.about-tool ul{padding-left:1.2em;}

.hide{display:none;}
.print-only{display:none;}
@media(max-width:900px){.stat4{grid-template-columns:1fr 1fr;}}
@media(max-width:780px){.qgrid{grid-template-columns:1fr 1fr;}.chooser{grid-template-columns:1fr;}.send-grid{grid-template-columns:1fr;}}
@media(max-width:520px){.stat4{grid-template-columns:1fr;}.qgrid{grid-template-columns:1fr;}.wrap{padding:24px 16px 48px;}.tool-header-in,.tool-footer-in{padding-left:16px;padding-right:16px;}}
@media print{
  @page{ margin:14mm; }
  body{ background:#fff; }
  #intro,#step-choose,#step-input,#step-input-led,.tool-header,.send,.about-tool,.crosslink{ display:none !important; }
  .print-only{ display:flex !important; }
  .print-header{ justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:16px; }
  .print-header strong{ font-family:var(--display); font-size:1.15rem; color:var(--ink); }
  .btn,#proj-name,#proj-name-led,.help,.side-actions,.result-actions .btn{ display:none !important; }
  .result-grid{ display:block; }
  .result-side{ position:static; max-height:none; overflow:visible; display:block; }
  .result-side > *{ margin-top:18px; }
  .result-bar{ box-shadow:none; }
  .stepper button{ display:none !important; }
  .stepper{ border:none; }
  select{ -webkit-appearance:none; appearance:none; border:none; background:none; padding:0; color:var(--ink); font-weight:600; }
  .wrap{ padding:8px 0 0; max-width:none; }
  .table-scroll{ overflow:visible; }
  table.lines{ min-width:0; }
  .tool-footer{ border-top:2px solid var(--ink); background:none; }
  .tool-footer-in{ padding:10px 0 0; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .card,.ctrl-card,table,svg,.msg{ break-inside:avoid; page-break-inside:avoid; }
  section{ break-inside:avoid; }
}