/* ============================================================================
 * Noritz Commercial Sizing Calculator — Concept 2 "Engineer's Console"
 * ----------------------------------------------------------------------------
 * Technical dashboard: sticky dark control panel (LEFT) + live white spec
 * readout (RIGHT). Every rule is scoped under #csc2-root so nothing leaks into
 * the host Statamic site.
 * ========================================================================== */

#csc2-root{
  --red:#D2332A;--red-hover:#C92731;--red-active:#A81E26;--brand-red:#EF3340;
  --ink:#231F20;--ink2:#3D3D3D;--muted:#686868;--muted2:#888888;
  --border:#E5E5E5;--border2:#C7C7C7;--surface:#FFFFFF;--surface2:#FAFAFA;--surface3:#F4F4F4;
  --dark:#0F0E0E;--ok:#239C56;
  --dpanel:#231F20;--dborder:#2E2E2E;--dtext:rgba(255,255,255,.75);
  font-family:'Roboto',system-ui,-apple-system,sans-serif;
  color:var(--ink);line-height:1.5;box-sizing:border-box;
  display:block;width:100%;
}
#csc2-root *,#csc2-root *::before,#csc2-root *::after{box-sizing:border-box;}
#csc2-root .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* ---- layout ------------------------------------------------------------- */
#csc2-root .csc2-shell{
  display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;
  align-items:stretch;max-width:1220px;margin:0 auto;padding:8px 0;
}

/* ================= LEFT: dark control panel ============================== */
#csc2-root .csc2-panel{
  position:sticky;top:20px;background:var(--dpanel);color:#fff;
  border-radius:14px;padding:22px 20px 24px;
  box-shadow:0 12px 40px rgba(15,14,14,.28);
}
#csc2-root .csc2-panel-head{
  display:flex;align-items:center;gap:10px;margin:0 0 4px;
}
#csc2-root .csc2-panel-head .dot{
  width:9px;height:9px;border-radius:50%;background:var(--brand-red);
  box-shadow:0 0 0 4px rgba(239,51,64,.18);flex:none;
}
#csc2-root .csc2-panel h2{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.02em;margin:0;color:#fff;text-transform:uppercase;
}
#csc2-root .csc2-panel .csc2-sub{
  color:var(--dtext);font-size:12px;margin:2px 0 18px;
}

#csc2-root .csc2-seclabel{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-red);
  margin:20px 0 10px;display:flex;align-items:center;gap:8px;
}
#csc2-root .csc2-seclabel::after{
  content:"";height:1px;flex:1;background:var(--dborder);
}
#csc2-root .csc2-seclabel:first-of-type{margin-top:6px;}

#csc2-root .csc2-field{margin-bottom:12px;}
#csc2-root .csc2-field > label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dtext);margin-bottom:6px;
}
#csc2-root .csc2-field.two{display:grid;grid-template-columns:1fr 100px;gap:8px;align-items:end;}
#csc2-root .csc2-field.two[hidden]{display:none;}

#csc2-root select,
#csc2-root input[type=text],
#csc2-root input[type=number]{
  width:100%;font-family:inherit;font-size:14px;color:#fff;
  background:#1A1718;border:1px solid var(--dborder);border-radius:8px;
  padding:9px 11px;-webkit-appearance:none;appearance:none;
}
#csc2-root select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888888' d='M6 8 0 0h12z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;cursor:pointer;
}
#csc2-root select:focus,
#csc2-root input:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(210,51,42,.28);
}
#csc2-root input::placeholder{color:var(--muted2);}
#csc2-root option{color:#111;}

/* segmented control */
#csc2-root .csc2-seg{
  display:flex;background:#1A1718;border:1px solid var(--dborder);
  border-radius:8px;padding:3px;gap:3px;
}
#csc2-root .csc2-seg button{
  flex:1;font-family:inherit;font-size:12px;font-weight:600;color:var(--dtext);
  background:transparent;border:none;border-radius:6px;padding:7px 4px;cursor:pointer;
  letter-spacing:.01em;transition:background .12s,color .12s;
}
#csc2-root .csc2-seg button:hover{color:#fff;}
#csc2-root .csc2-seg button.is-active{background:var(--red);color:#fff;}

/* temp steppers */
#csc2-root .csc2-stepper{
  display:flex;align-items:center;background:#1A1718;border:1px solid var(--dborder);
  border-radius:8px;overflow:hidden;
}
#csc2-root .csc2-stepper button{
  width:34px;flex:none;background:transparent;border:none;color:#fff;font-size:18px;
  line-height:1;cursor:pointer;padding:9px 0;font-weight:700;
}
#csc2-root .csc2-stepper button:hover{background:#2A2626;}
#csc2-root .csc2-stepper input{
  border:none;border-radius:0;text-align:center;padding:9px 2px;background:transparent;
  box-shadow:none;
}
#csc2-root .csc2-stepper input:focus{box-shadow:none;}
#csc2-root .csc2-unit{
  font-size:11px;color:var(--muted2);padding:0 10px;flex:none;
}

/* fixtures list (in left panel) */
#csc2-root .csc2-fixtures{margin-top:4px;}
#csc2-root .csc2-fix-row{
  display:grid;grid-template-columns:1fr 66px;gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--dborder);
}
#csc2-root .csc2-fix-row:last-child{border-bottom:none;}
#csc2-root .csc2-fix-name{font-size:12.5px;color:#fff;}
#csc2-root .csc2-fix-hwfu{font-size:10.5px;color:var(--muted2);}
#csc2-root .csc2-fix-row input{padding:6px 8px;font-size:13px;text-align:center;}

/* status lines inside panel */
#csc2-root .csc2-status{
  font-size:12px;color:var(--dtext);padding:12px 12px;border:1px dashed var(--dborder);
  border-radius:8px;display:flex;align-items:center;gap:9px;
}
#csc2-root .csc2-status.err{color:#FF9A93;border-color:#5A2A2A;background:rgba(210,51,42,.08);border-style:solid;}
#csc2-root .csc2-spin{
  width:14px;height:14px;border-radius:50%;border:2px solid var(--dborder);
  border-top-color:var(--brand-red);animation:csc2-spin .7s linear infinite;flex:none;
}
@keyframes csc2-spin{to{transform:rotate(360deg);}}

/* calculate button */
#csc2-root .csc2-calc{
  width:100%;margin-top:20px;font-family:'Titillium Web',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.02em;color:#fff;background:var(--red);border:none;
  border-radius:17px;padding:14px 20px;cursor:pointer;
  box-shadow:0 6px 18px rgba(210,51,42,.34);transition:background .12s,transform .05s;
}
#csc2-root .csc2-calc:hover:not(:disabled){background:var(--red-hover);}
#csc2-root .csc2-calc:active:not(:disabled){background:var(--red-active);transform:translateY(1px);}
#csc2-root .csc2-calc:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}

/* ================= RIGHT: white spec readout ============================= */
#csc2-root .csc2-readout{min-width:0;}

/* live metrics header */
#csc2-root .csc2-live{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;
  position:sticky;top:20px;z-index:5;
}
#csc2-root .csc2-live-tag{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
#csc2-root .csc2-live-tag .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  animation:csc2-pulse 1.6s ease-in-out infinite;
}
@keyframes csc2-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

#csc2-root .csc2-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
#csc2-root .csc2-metric{
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:14px 15px;
}
#csc2-root .csc2-metric.primary{background:var(--ink);border-color:var(--ink);}
#csc2-root .csc2-metric .k{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
#csc2-root .csc2-metric.primary .k{color:rgba(255,255,255,.6);}
#csc2-root .csc2-metric .v{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:30px;line-height:1;
  color:var(--ink);letter-spacing:-.01em;
}
#csc2-root .csc2-metric.primary .v{color:#fff;}
#csc2-root .csc2-metric .u{font-size:13px;color:var(--muted2);font-weight:600;margin-left:3px;}
#csc2-root .csc2-metric.primary .u{color:rgba(255,255,255,.55);}
#csc2-root .csc2-metric .v.placeholder{font-size:15px;color:var(--muted2);font-weight:600;font-family:'Roboto',sans-serif;}

/* results wrap */
#csc2-root .csc2-results{margin-top:24px;}
#csc2-root .csc2-results[hidden]{display:none;}

/* summary spec sheet */
#csc2-root .csc2-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;margin-bottom:24px;
}
#csc2-root .csc2-card-head{
  background:var(--ink);color:#fff;padding:16px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
#csc2-root .csc2-card-head h3{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:18px;margin:0;
  letter-spacing:.01em;
}
#csc2-root .csc2-card-head .tag{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
#csc2-root .csc2-card-body{padding:20px 22px;}

#csc2-root .csc2-specgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:18px;
}
#csc2-root .csc2-specgrid .cell{padding:12px 15px;border-right:1px solid var(--border);}
#csc2-root .csc2-specgrid .cell:last-child{border-right:none;}
#csc2-root .csc2-specgrid .cell .k{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
#csc2-root .csc2-specgrid .cell .v{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:20px;color:var(--ink);
}

/* fixtures table */
#csc2-root table.csc2-tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
#csc2-root table.csc2-tbl th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:8px 12px;
  border-bottom:2px solid var(--border2);
}
#csc2-root table.csc2-tbl td{
  padding:9px 12px;border-bottom:1px solid var(--border);color:var(--ink2);
}
#csc2-root table.csc2-tbl th.r,#csc2-root table.csc2-tbl td.r{text-align:right;}
#csc2-root table.csc2-tbl tfoot td{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:15px;color:var(--ink);
  border-top:2px solid var(--ink);border-bottom:none;background:var(--surface2);
}
#csc2-root table.csc2-tbl tfoot td.peak{color:var(--red);}

/* recommendation columns */
#csc2-root .csc2-recs-tag{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;
}
#csc2-root .csc2-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:18px;
}
#csc2-root .csc2-col{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
}
#csc2-root .csc2-col.tier-2{border-color:var(--red);box-shadow:0 8px 24px rgba(210,51,42,.14);}
#csc2-root .csc2-col-head{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;background:var(--surface2);
}
#csc2-root .csc2-badge{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--muted);
  border-radius:17px;padding:4px 12px;
}
#csc2-root .csc2-badge.t0{background:var(--muted);}
#csc2-root .csc2-badge.t1{background:var(--ink);}
#csc2-root .csc2-badge.t2{background:var(--red);}
#csc2-root .csc2-col-qty{font-size:11px;color:var(--muted);font-weight:600;}

#csc2-root .csc2-col-img{
  height:130px;display:flex;align-items:center;justify-content:center;
  padding:14px;background:var(--surface);border-bottom:1px solid var(--border);
}
#csc2-root .csc2-col-img img{max-height:100%;max-width:100%;object-fit:contain;}
#csc2-root .csc2-col-img .noimg{font-size:12px;color:var(--muted2);}

#csc2-root .csc2-col-model{padding:14px 16px 6px;}
#csc2-root .csc2-col-model .name{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:20px;color:var(--red);
  line-height:1.1;
}
#csc2-root .csc2-col-model .sub{font-size:11.5px;color:var(--muted);margin-top:3px;word-break:break-word;}

#csc2-root .csc2-col-spec{width:100%;border-collapse:collapse;font-size:12.5px;}
#csc2-root .csc2-col-spec tr{border-bottom:1px solid var(--border);}
#csc2-root .csc2-col-spec tr:last-child{border-bottom:none;}
#csc2-root .csc2-col-spec th{
  text-align:left;font-weight:600;color:var(--muted);padding:8px 16px;
  font-size:11px;white-space:nowrap;vertical-align:top;
}
#csc2-root .csc2-col-spec td{
  text-align:right;padding:8px 16px;color:var(--ink);font-weight:600;vertical-align:top;
}
#csc2-root .csc2-col-spec td.acc{text-align:left;font-weight:400;color:var(--ink2);font-size:11.5px;}

#csc2-root .csc2-col-foot{padding:14px 16px 16px;margin-top:auto;}
#csc2-root .csc2-report-btn{
  width:100%;font-family:'Titillium Web',sans-serif;font-weight:700;font-size:14px;
  color:#fff;background:var(--red);border:none;border-radius:17px;padding:11px 16px;cursor:pointer;
  transition:background .12s;
}
#csc2-root .csc2-report-btn:hover{background:var(--red-hover);}
#csc2-root .csc2-report-btn:active{background:var(--red-active);}

/* contact + errors */
#csc2-root .csc2-contact-wrap{text-align:center;margin-top:26px;}
#csc2-root .csc2-contact-btn{
  font-family:'Titillium Web',sans-serif;font-weight:700;font-size:16px;color:#fff;
  background:var(--red);border:none;border-radius:17px;padding:13px 34px;cursor:pointer;
  box-shadow:0 6px 18px rgba(210,51,42,.28);transition:background .12s;
}
#csc2-root .csc2-contact-btn:hover{background:var(--red-hover);}

#csc2-root .csc2-inline-err{
  background:#FDE6E7;color:var(--red-active);border-radius:8px;padding:12px 14px;
  font-size:14px;margin-top:16px;
}

#csc2-root .csc2-empty{
  color:var(--muted);font-size:14px;padding:22px 4px;text-align:center;
}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:900px){
  #csc2-root .csc2-shell{grid-template-columns:1fr;gap:22px;}
  #csc2-root .csc2-panel{position:static;top:auto;}
  #csc2-root .csc2-live{position:static;top:auto;}
  #csc2-root .csc2-metrics{grid-template-columns:repeat(2,1fr);}
  #csc2-root .csc2-specgrid{grid-template-columns:repeat(2,1fr);}
  #csc2-root .csc2-specgrid .cell:nth-child(2n){border-right:none;}
  #csc2-root .csc2-cols{grid-template-columns:1fr;}
}
@media(max-width:480px){
  #csc2-root .csc2-metrics{grid-template-columns:1fr;}
  #csc2-root .csc2-specgrid{grid-template-columns:1fr;}
  #csc2-root .csc2-specgrid .cell{border-right:none;}
}