/* CircuitCalcs — shared calculator page styling.
   The calculator is the page: controls first, result immediately under them,
   method and governing-status notes collapsed below. Flat, thin-stroked,
   engineering-drawing register — no gradients, no glass, no glow. */

:root { --line:#d8dee6; --panel:#f5f7fa; --dim:#5a6572; --accent:#0b5cad;
        --ok:#10693a; --bad:#a3241c; --warn:#8a5a00; --copper:#b45309; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; color:#1a2330; }
.wrap { max-width:760px; margin:0 auto; padding:14px 16px 40px; }
header.site { display:flex; align-items:baseline; gap:12px; }
header.site a { color:inherit; text-decoration:none; font-weight:700; font-size:18px; }
header.site nav { font-size:14px; }
header.site nav a { color:var(--accent); font-weight:400; }
h1 { font-size:22px; margin:12px 0 2px; }
.sub { margin:0 0 12px; color:var(--dim); font-size:14.5px; }

.modes { display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; }
.mode { font-size:13.5px; padding:6px 12px; border:1px solid var(--line);
        border-radius:999px; text-decoration:none; color:var(--accent); background:#fff; }
.mode.is-current { background:var(--accent); color:#fff; border-color:var(--accent);
                   font-weight:600; }

.calc { border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--panel); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 12px; }
.field { display:flex; flex-direction:column; gap:3px; min-width:0; }
.field label { font-weight:600; font-size:13.5px; }
.field .hint { font-size:12px; color:var(--dim); }
input, select { font:inherit; padding:7px 8px; border:1px solid var(--line);
                border-radius:6px; background:#fff; width:100%; min-width:0; }
input:focus, select:focus, button:focus, a:focus, summary:focus {
  outline:3px solid var(--accent); outline-offset:1px; }
input[aria-invalid="true"] { border-color:var(--bad); }

fieldset.rows { border:0; padding:0; margin:14px 0 0; }
fieldset.rows legend { font-weight:600; font-size:13.5px; padding:0; margin-bottom:6px; }
.row { display:grid; grid-template-columns:1fr 84px 1fr auto; gap:8px; margin-bottom:8px;
       align-items:end; }
.row .field label { font-size:12px; font-weight:500; color:var(--dim); }
.row button.rm { padding:7px 10px; border:1px solid var(--line); background:#fff;
                 border-radius:6px; cursor:pointer; font:inherit; line-height:1; }
button.add { font:inherit; padding:7px 12px; border:1px dashed var(--line);
             background:#fff; border-radius:6px; cursor:pointer; }

#result { margin-top:14px; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
          background:#fff; min-height:64px; }
#result .headline { font-size:18px; font-weight:700; margin:0; }
#result .verdict-ok { color:var(--ok); } #result .verdict-bad { color:var(--bad); }
#result .detail { margin:6px 0 0; font-size:14px; color:var(--dim); }
#result .advisory { margin:8px 0 0; font-size:13.5px; color:var(--warn); }
#result .pending { color:var(--dim); font-style:italic; }
#result .err { color:var(--bad); }
details.steps { margin-top:10px; }
details.steps summary { cursor:pointer; font-size:13.5px; font-weight:600; color:var(--dim); }
details.steps ol { margin:6px 0 0; padding-left:20px; font-size:13.5px; color:var(--dim); }

.bar-wrap { margin:10px 0 0; }
.bar { width:100%; height:26px; display:block; }
figure.xsec { margin:12px 0 0; display:flex; gap:14px; align-items:flex-start; }
.xsec-omitted { font-size:11.5px; color:var(--dim); margin:0; }
.xsec-svg { width:132px; height:132px; flex:0 0 132px; }
figure.xsec figcaption { font-size:11.5px; line-height:1.45; color:var(--dim); margin:0; }

details.more { margin-top:20px; border-top:1px solid var(--line); padding-top:10px; }
details.more summary { cursor:pointer; font-weight:600; font-size:14.5px; }
details.more p { font-size:14.5px; }
.govstatus { margin-top:14px; font-size:12.5px; color:var(--dim); line-height:1.5; }
footer.site { margin-top:24px; font-size:12.5px; color:var(--dim); }
footer.site a { color:var(--accent); }

@media (max-width:430px) {
  .row { grid-template-columns:1fr 70px 1fr auto; gap:6px; }
  figure.xsec { flex-direction:column; gap:8px; }
  .xsec-svg { width:118px; height:118px; flex:none; align-self:center; }
}