/* Shared styling for the Comms / RF calculators (PW_RF). */
.awrap { display:flex; flex-direction:column; gap:24px; margin-top:-34px; position:relative; z-index:5; }
.awrap .card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; }
.awrap .card > .ch { padding:15px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.awrap .card > .ch h2 { font-size:17px; letter-spacing:-.01em; color:var(--navy-900); }
.awrap .card > .ch .hint { font-size:12.5px; color:var(--ink-faint); }
/* gold step badge — the "1, 2, 3" flow markers in each section header */
.awrap .card > .ch .step { font-family:var(--mono); font-size:11px; font-weight:700; color:#fff;
  background:var(--gold); width:22px; height:22px; border-radius:99px; display:grid; place-items:center; flex:none; }
.awrap .card > .cb { padding:18px 22px 20px; }
.awrap .grid { display:grid; gap:14px 18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
/* Opt-in two-column calculator layout: an Inputs card on the left and a Results
   card on the right. Collapses to a single column (inputs then results) on
   mobile/narrow. Use `.subh` for labelled groups inside each card. */
.awrap .two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.awrap .two > .card { margin:0; }
.awrap .subh { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin:22px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line-soft); }
.awrap .cb > .subh:first-child { margin-top:0; }
@media (max-width:760px){ .awrap .two { grid-template-columns:1fr; gap:26px; } }
/* headerless result readout: a clean label / value / note list, no navy header
   bar, no zebra, full width of its card. */
.awrap table.rt.nohd { display:table; width:100%; overflow:visible; }
.awrap table.rt.nohd tbody tr:nth-child(even) { background:transparent; }
.awrap table.rt.nohd td { padding:9px 16px 9px 0; border-bottom:1px solid var(--line-soft); }
.awrap table.rt.nohd td.v { text-align:right; padding-right:22px; }
.awrap table.rt.nohd td.b { padding-right:0; white-space:normal; }
.awrap table.rt.nohd tr:last-child td { border-bottom:0; }
/* narrow screens: let the value + note wrap so the readout never exceeds its card
   (the card clips overflow, which was cutting the note column off on mobile) */
@media (max-width:760px){
  .awrap table.rt.nohd td.k { overflow-wrap:anywhere; }
  .awrap table.rt.nohd td.v { white-space:normal; overflow-wrap:anywhere; padding-right:12px; }
  .awrap table.rt.nohd td.b { overflow-wrap:anywhere; }
}
.awrap .fld { display:flex; flex-direction:column; gap:5px; }
.awrap .fld label { font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.awrap .fld input, .awrap .fld select { font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; outline:none; width:100%; box-sizing:border-box;
  font-variant-numeric:tabular-nums; }
.awrap .fld input:focus, .awrap .fld select:focus { border-color:var(--gold); }
.awrap .fld .sub { font-size:11px; color:var(--ink-faint); }
/* Frequency-card inputs: they sit UNDER the band row, so they read as "what the
   band you picked works out to" rather than as the first thing you fill in.
   Flex, not the auto-fit grid, because a lone frequency box in a 1fr grid track
   stretched the full width of the card and looked like a form field for a
   paragraph. Each input takes a sensible width and stops. */
.awrap .cb > .moderow:first-child, .awrap .cb > .bandrow:first-child { margin-top:0; }
.awrap .fgrid { display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:16px; align-items:start; }
.awrap .fgrid > .fld { flex:0 1 190px; }
.awrap .fgrid > .fld.wide { flex:0 1 290px; }   /* the material names are long */
@media (max-width:560px){ .awrap .fgrid > .fld, .awrap .fgrid > .fld.wide { flex:1 1 100%; } }
/* Coax and Harmonics never write a wavelength line; now that it is the last
   thing in the card, an empty one would leave a band of dead space. */
.awrap #wl:empty { display:none; }
.awrap .bandrow { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.awrap .bandrow button { font-family:var(--mono); font-size:11px; color:var(--navy-900); background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:4px 11px; cursor:pointer; }
.awrap .bandrow button:hover { border-color:var(--gold); }
.awrap table.rt { width:-moz-fit-content; width:fit-content; max-width:100%; border-collapse:collapse; margin-top:6px;
  font-size:14px; font-variant-numeric:tabular-nums; display:block; overflow-x:auto; }
.awrap table.rt th { text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--navy-900); padding:7px 11px; white-space:nowrap; }
.awrap table.rt td { padding:7px 11px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.awrap table.rt tr:last-child td { border-bottom:0; }
.awrap table.rt td.k { color:var(--ink-soft); }
.awrap table.rt td.v { font-weight:700; color:var(--navy-900); white-space:nowrap; }
/* The note column wraps. It used to be nowrap, which kept short notes tidy on
   one line but meant a genuinely long note (the open/short Z0 procedure on the
   TLT tool) ran off the side and scrolled the table instead of wrapping. The
   table is width:fit-content, max-width:100%, so a table whose notes all fit
   still sits at its natural width and nothing wraps that did not have to —
   only the oversized ones now break. Mobile already did this below 620px. */
.awrap table.rt td.b { color:var(--ink-faint); white-space:normal; max-width:72ch; line-height:1.5; }
.awrap table.rt tbody tr:nth-child(even) { background:var(--paper); }
/* Narrow screens: stack each row instead of scrolling a three-column table
   sideways. Every one of these tables is label / value / note, so the label
   becomes the eyebrow, the value the headline and the note the caption — which
   reads better than three 100px columns and, more to the point, fits. */
@media (max-width:620px){
  .awrap table.rt:not(.nohd),
  .awrap table.rt:not(.nohd) thead,
  .awrap table.rt:not(.nohd) tbody,
  .awrap table.rt:not(.nohd) tr,
  .awrap table.rt:not(.nohd) td { display:block; width:auto; max-width:100%; }
  .awrap table.rt:not(.nohd) { overflow-x:visible; }
  .awrap table.rt:not(.nohd) thead { display:none; }
  .awrap table.rt:not(.nohd) tbody tr { background:none; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .awrap table.rt:not(.nohd) tbody tr:last-child { border-bottom:0; }
  .awrap table.rt:not(.nohd) td { border:0; padding:1px 0; white-space:normal; overflow-wrap:anywhere; }
  .awrap table.rt:not(.nohd) td.k { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-faint); }
  .awrap table.rt:not(.nohd) td.v { font-size:15.5px; }
  .awrap table.rt:not(.nohd) td.b { font-size:12px; color:var(--ink-faint); line-height:1.5; }
  .awrap table.rt:not(.nohd) td:empty { display:none; }
}
.awrap ol.steps { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:11px; }
.awrap ol.steps li { font-size:14px; line-height:1.55; color:var(--ink-soft); padding-left:4px; }
.awrap ol.steps li::marker { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--gold-600); }
.awrap ol.steps li b { color:var(--navy-900); }
.awrap .note { font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin-top:14px; padding:11px 13px;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:10px; }
.awrap .note b { color:var(--navy-900); }
/* a plain note that IS the body of its own card doesn't need a second inner box
   (warnings keep their highlighted box) */
.awrap .cb > .note:not(.warn) { margin-top:0; padding:0; background:none; border:0; font-size:13px; line-height:1.62; }
.awrap .warn { background:rgba(201,151,0,.09); border-color:rgba(201,151,0,.35); }
.awrap .seg { display:inline-flex; align-self:flex-start; max-width:100%; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.awrap .seg button { font-family:var(--mono); font-size:11px; padding:6px 12px; background:#fff; border:0; cursor:pointer; color:var(--ink-soft); }
.awrap .seg button.on { background:var(--navy-900); color:#fff; font-weight:700; }
.awrap .seg button + button { border-left:1px solid var(--line); }

.awrap .rfdiag { width:100%; max-width:640px; height:auto; display:block; margin:0 auto; }
.awrap .diagwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Mobile: a 640-unit drawing squeezed into a 360px screen scales its labels down
   to about 5px, which is not readable and not buildable. Hold the drawing near
   its native size and let the wrapper scroll sideways instead — the geometry
   scales uniformly, so nothing can collide. The two smallest label classes get a
   bump on top; they out-specify the SVG's own <style> block, which sits later in
   the document and would otherwise win. */
@media (max-width:760px){
  /* Fit the width. Holding the drawing at 700px and letting the box scroll made
     the labels legible but meant every diagram sat wider than the phone, which
     is worse — you cannot see the shape you are building. It fits now, and the
     Expand button below opens it big enough to read and build from. */
  .awrap .rfdiag { width:100%; max-width:100%; }
  .awrap .rfdiag .ms { font-size:9.6px; }
  .awrap .rfdiag .vs { font-size:10.6px; }
  .awrap .rfdiag .mut { font-size:11px; }
}
/* Full-screen drawing. The SVG is cloned in at a size that makes the smallest
   label readable and panned, rather than squeezed to fit — this is the mode you
   use standing at the bench with the wire in your hand. */
.awrap .diagwrap { position:relative; }
/* the button is anchored to a wrapper outside the element the tools rewrite */
.awrap .pw-diagouter { position:relative; }
.pw-diagbtn { display:none; position:absolute; top:0; right:0; z-index:3; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 9px; cursor:pointer; }
.pw-diagbtn:hover { border-color:var(--gold); color:var(--navy-900); }
.pw-diagbtn svg { width:13px; height:13px; }
@media (max-width:760px){ .pw-diagbtn { display:inline-flex; } .awrap .pw-diagouter { padding-top:34px; } }
.pw-diagfs { position:fixed; inset:0; z-index:1300; background:#fff; overflow:auto; -webkit-overflow-scrolling:touch;
  display:block; padding:56px 12px 24px; box-sizing:border-box; }
.pw-diagfs svg { width:940px; max-width:none; height:auto; display:block; }
.pw-diagfs .pw-diagclose { position:fixed; top:10px; right:12px; z-index:2; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--navy-900); border:0; border-radius:8px;
  padding:9px 14px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.pw-diagfs .pw-diaghint { position:fixed; top:16px; left:14px; z-index:2; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.05em; color:var(--ink-faint); }
body.pw-diaglock { overflow:hidden; }

.awrap .moderow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:14px; }
.awrap .moderow .mlbl { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:3px; }
.awrap .moderow button { font-family:var(--mono); font-size:11px; color:var(--navy-900); background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:4px 13px; cursor:pointer; }
.awrap .moderow button:hover { border-color:var(--gold); }
.awrap .moderow button.on { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.awrap .moderow .msub { flex:1 1 100%; font-size:11px; color:var(--ink-faint); }
.awrap .bandrow button.on { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.awrap .bandrow button[disabled] { opacity:.34; cursor:not-allowed; }
.awrap .bandrow button[disabled]:hover { border-color:var(--line); }