/* Wizard chrome, in the drawing-sheet language. Form controls the sheet never
   needed -- everything else comes from sheet.css. */
.sec-body{padding:20px 24px}
.field-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:5px;flex:1 1 220px}
.fld.sm{flex:0 0 140px}
/* the optional logo under Company: a quiet link until there is one */
/* hangs below the Company input rather than adding to its height, which would
   lift the Company label above its neighbours' (the row aligns to the bottom) */
.fld.has-logo-pick{position:relative}
/* room for it under the row, so it never lands on the field below on a phone */
.field-row:has(.has-logo-pick){padding-bottom:22px}
.logo-pick{position:absolute;top:100%;left:0;margin-top:5px;
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo-add,.logo-rm{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;color:var(--accent)}
.logo-rm{color:var(--muted)}
.logo-add:hover,.logo-rm:hover{text-decoration:underline}
.logo-add[hidden],.logo-rm[hidden],.logo-thumb[hidden],.logo-msg[hidden]{display:none}
.logo-thumb{height:22px;max-width:72px;object-fit:contain;border:1px solid var(--edge);
  background:#fff;padding:1px 3px;cursor:pointer}   /* a logo on white, as it will print */
.logo-thumb:hover,.logo-thumb:focus-visible{border-color:var(--accent);outline:none}
.logo-msg{position:absolute;top:100%;left:0;margin-top:30px;font-size:12px;color:var(--err);width:220px}
.lbl{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
     text-transform:uppercase;color:var(--muted)}
.fld input{font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--panel);border:2px solid var(--edge);border-radius:0;
  padding:8px 10px;width:100%}
.fld input:focus{outline:none;border-color:var(--accent)}
table.eq{width:100%;border-collapse:collapse;font-size:14px}
/* On a phone the nine columns are wider than the screen: the table scrolls
   sideways inside its own box instead of pushing the page (2026-10-15). */
.eq-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* the suggestion stays on screen while the table scrolls under it */
@media (max-width:640px){
  .swap-in{position:sticky;left:10px;width:calc(100vw - 92px)}
}
table.eq th{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);text-align:left;
  padding:6px 10px;border-bottom:2px solid var(--edge)}
table.eq td{padding:7px 10px;border-bottom:1px solid var(--edge)}
table.eq .num{text-align:right}
table.eq input[type=number]{width:66px;font-family:var(--mono);font-size:14px;
  text-align:right;background:var(--panel);border:2px solid var(--edge);padding:4px 6px}
table.eq input[type=number]:focus{outline:none;border-color:var(--accent)}
table.eq tr.off{opacity:.45}
.role{display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:baseline}
.role.mic{background:var(--legA)} .role.iem{background:var(--legT)} .role.pa{background:var(--legP)}
.mono{font-family:var(--mono)}

.actions{margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.chk{font-size:14px;display:flex;align-items:center;gap:8px;color:var(--muted)}
button.go{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--fill-brand);color:#fff;border:0;
  padding:11px 20px;cursor:pointer}
button.go:hover{background:var(--fill-iem);filter:brightness(1.15)}
/* Tabbing out of Add More lands here, so arriving has to be obvious. The ring
   sits outside the button rather than replacing its fill, which would make a
   focused button look like a hovered one. */
button.go:focus-visible{outline:3px solid var(--accent);outline-offset:3px;
  background:var(--legT);box-shadow:0 0 0 6px rgba(47,111,176,.18)}
button.go[disabled]{opacity:.5;cursor:default}
.status{font-family:var(--mono);font-size:12.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:11px}
/* RF Chef, for the few seconds the calculators are thinking. Decoration only:
   he is aria-hidden, he never appears on an error, and he leaves with the
   status line the moment the sheet arrives.

   He does not move. A loop pulls the eye at exactly the moment the customer
   should be watching for their results, and an easter egg that waves at you
   is not one -- better to be half-noticed and grinned at later. The only
   motion left is a soft arrival, which is quieter than appearing in one
   frame, not louder. */
.chef{height:66px;width:auto;flex:0 0 auto;
  animation:chef-in 420ms ease-out both}
@keyframes chef-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .chef{animation:none} }
@media print{ .chef{display:none} }
.status.err{color:var(--err)}

.prov{display:flex;gap:10px 26px;flex-wrap:wrap;padding:10px 24px;
  background:var(--panel2);border-bottom:3px solid var(--brand);
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.prov b{color:var(--brand-ink);font-weight:600}
.crowded{margin:0 0 16px;padding:10px 14px;border-left:4px solid var(--legA);
  background:var(--legA-soft);font-size:13.5px}
table.freq{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
table.freq th{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px;
  border-bottom:2px solid var(--edge)}
table.freq th.num,table.freq td.num{text-align:right}
table.freq td{padding:6px 10px;border-bottom:1px solid var(--edge);font-family:var(--mono)}
table.freq tr.grp td{background:var(--panel2);font-family:var(--cond);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot{padding:12px 24px;background:var(--sheet2);border:3px solid var(--line);
  border-top:0;font-size:12.5px;color:var(--muted)}
.shortfall{margin:0 0 16px;padding:12px 14px;border-left:4px solid var(--err);
  background:var(--err-soft);font-size:13.5px}
.shortfall b{color:var(--err-ink)}
section.diag{border-color:var(--spare)}
section.diag .sec-head{background:var(--spare-soft);border-bottom-color:var(--spare)}
section.diag .sec-head h2{color:var(--muted)}
.note-block{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.note-block code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.best{margin:0 0 14px;padding:11px 14px;background:var(--ok-soft);
  border-left:4px solid var(--brand);font-size:14px}
.best b{color:var(--brand-ink)}

/* ---- portable / install ----
   Two products per leg, one choice. Install swaps the stand-mounted pair for
   the architectural panels, which is a different drawing and a different BOM,
   so it is a segmented control rather than a checkbox. */
.mount-row{margin-top:14px;align-items:flex-end}
/* What are you planning? -- several can be on at once, so each button keeps
   its own border and the row may wrap on a phone */
.build-row{margin:0 0 16px;align-items:flex-end}
.build-row .fld.sm{flex:0 0 auto}
#build{max-width:100%}
.seg{display:flex;border:2px solid var(--edge);width:max-content}
.seg button{
  font-family:var(--cond);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--panel);color:var(--muted);
  border:0;padding:9px 16px;cursor:pointer;
}
.seg button + button{border-left:2px solid var(--edge)}
.seg button:hover{color:var(--ink)}
/* the blue leg, not the rust one -- there is no brand-approved blue on file
   here, so this is the sheet's own --legB until one is supplied */
.seg button.is-on{background:var(--fill-blue);color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.seg-note{font-size:13.5px;color:var(--muted);flex:1 1 260px;margin:0 0 9px}

/* ---- venue type-ahead ----
   Same combobox idiom as the equipment picker, two lines per row: the venue or
   street on top, the city tail beneath, so "Fenway Park" is picked by name. */
.loc-field{position:relative}
/* the optional names: a checkbox beside the address, the fields in a row of
   their own below it once ticked */
.who-toggle{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--muted);cursor:pointer;padding-bottom:10px;white-space:nowrap}
.who-toggle b{font-weight:600;color:var(--ink)}
.who-toggle input{width:16px;height:16px;margin:0;accent-color:var(--fill-accent);cursor:pointer}
.who-row{margin-top:14px}
.who-row[hidden]{display:none}
.drop.loc-drop{width:100%;max-width:560px}   /* beats .drop's 780px */
.loc-opt{display:flex;flex-direction:column;gap:2px;padding:7px 12px;cursor:pointer;
  border-bottom:1px solid var(--edge)}
.drop:not(.kb) .loc-opt:hover{background:var(--legA-soft)}
.loc-opt.is-active{background:var(--legA-soft);box-shadow:inset 3px 0 0 var(--brand)}
.loc-main{font-size:14px;font-weight:600}
.loc-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.loc-note{padding:7px 12px;font-size:12.5px;color:var(--muted);background:var(--panel2)}

/* ---- equipment picker ---- */
.picker{position:relative;max-width:560px}
.drop{position:absolute;z-index:20;left:0;top:100%;margin-top:4px;
  width:780px;max-width:min(96vw,980px);
  max-height:340px;overflow-y:auto;background:var(--panel);
  border:2px solid var(--line);box-shadow:0 14px 34px -14px rgba(14,26,42,.5)}
.o-brand{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);background:var(--panel2);
  padding:5px 12px;border-bottom:1px solid var(--edge);position:sticky;top:0}
.opt{display:flex;align-items:baseline;gap:10px;padding:7px 12px;cursor:pointer;
  border-bottom:1px solid var(--edge);font-size:13.5px}
.drop:not(.kb) .opt:hover{background:var(--legA-soft)}
.opt.is-dead{opacity:.55;cursor:not-allowed}
.drop:not(.kb) .opt.is-dead:hover{background:transparent}
.o-model{font-weight:600;min-width:104px}
.o-band{font-family:var(--mono);font-size:12.5px;min-width:56px;color:var(--muted)}
.o-tune{display:block;font-size:10.5px;line-height:1.2;color:var(--muted);opacity:.85;white-space:nowrap}
.fit-mhz{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.brand-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 4px}
.brand-chips[hidden]{display:none}
.bc-t{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-right:2px}
.bc{font:600 13px var(--sans,inherit);background:none;border:1px solid var(--edge);color:var(--ink);
  padding:3px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bc:hover{border-color:var(--accent);color:var(--accent)}
.bc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bc-n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.o-role{font-family:var(--cond);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  padding:1px 5px;color:#fff}
/* Same hues as the drawings' legs -- mic amber, in-ear green -- but pulled
   apart in lightness, because at equal darkness the two read as one color in
   a long list. Light amber with dark text against dark green with white. */
.o-role.mic{background:#F2A43A;color:#111519} .o-role.iem{background:var(--fill-iem)}
.o-role.pa{background:var(--fill-pa)}
/* Rack width, badged like MIC/IEM but in a slate family so it cannot be read
   as either. Same light-against-dark contrast that separates MIC from IEM.
   The slot keeps its width when a model has no sourced width, so the columns
   either side stay put. */
.o-rack-slot{min-width:44px;display:inline-flex}
.o-rack{font-family:var(--cond);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  padding:1px 5px}
.o-rack.full{background:#3E4C5E;color:#fff}
.o-rack.half{background:#C3DAEE;color:#111519}
.o-range{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:104px;white-space:nowrap}
.opt .clear{font-family:var(--mono);font-size:12px;color:var(--brand-ink);
  margin-left:auto;white-space:nowrap}
.opt .frag{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.opt .dead{font-size:12px;color:var(--err);margin-left:auto;white-space:nowrap}
.opt .ism{font-family:var(--mono);font-size:11px;color:var(--legA);
  border:1px solid var(--legA);padding:0 4px;white-space:nowrap}
/* what the Clear of local TV rating is, and is not -- a line, not a banner */
.fit-note{padding:6px 12px;font-size:11.5px;line-height:1.4;color:var(--muted);
  background:var(--panel2);border-bottom:1px solid var(--edge)}
.fit-note b{font-weight:600;color:var(--ink)}
.o-more{padding:7px 12px;font-size:12.5px;color:var(--muted);background:var(--panel2)}

/* ---- chosen lines ---- */
table.eq tr.is-dead{background:var(--err-soft)}
table.eq td.bad{color:var(--err);font-weight:600}
/* a better band for this address, under the line it is about */
table.eq tr.swap td{padding:6px 10px 10px;background:var(--levelup-bg);font-size:13.5px;
  border-bottom:1px solid var(--edge)}
table.eq tr.swap td:first-child{background:var(--levelup-bg)}
.swap-t{margin-right:10px}
.swap-btn{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;background:var(--fill-accent);color:#fff;
  border:2px solid var(--fill-accent);padding:4px 11px;cursor:pointer;white-space:nowrap}
.swap-btn:hover{background:var(--fill-blue);border-color:var(--fill-blue)}
.swap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.swap-offer{margin:10px 0 14px;padding:10px 14px;background:var(--levelup-bg);
  border-left:4px solid var(--fill-accent);font-size:14px}
.swap-offer p{margin:4px 0}
@media print{ .swap-offer{display:none} }
button.own{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;cursor:pointer;color:#fff;
  background:var(--fill-accent);border:0;min-width:52px}
button.own.is-own{background:var(--spare)}
button.rm{background:none;border:0;font-size:17px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px}
button.rm:hover{color:var(--err)}
.reranked{margin:0 0 16px;padding:11px 14px;background:var(--legB-soft);
  border-left:4px solid var(--legB);font-size:13.5px}
.chip-s{display:inline-block;background:var(--panel);border:1px solid var(--edge);
  padding:1px 7px;margin:0 4px;font-size:12.5px}
.chip-s b{font-family:var(--mono);font-size:11.5px;color:var(--brand-ink);margin-left:5px}
.opt.is-active{background:var(--legA-soft);box-shadow:inset 3px 0 0 var(--brand)}
.opt.is-active.is-dead{background:var(--err-soft)}

/* ---- folded steps ----
   Once the system is built the wizard is gone, not collapsed: the page should
   read as a finished document, and a stack of spent form headings does not.
   Everything folds behind one quiet disclosure bar carrying the summary. */
.sec-head .sum{display:none}
section.folded{display:none}

/* The document toolbar: fold control on the left, PDF on the right. It exists
   only once there is a document, which is also the only time either is useful.
   
   It is a band in the sheet frame, not a floating strip, so it carries the same
   borders every other block does -- 3px black sides, no top (the block above
   owns that edge), brand-colored bottom. Without the side borders the outer
   frame simply stopped for this row, and a bottom margin let the page ground
   show through as a pale gap. Padding matches .sec-head so the chevron and the
   button line up with the section headings above and below. */
.docbar{
  display:flex;align-items:center;gap:16px;
  padding:6px 24px;margin:0;
  background:var(--sheet2);
  border:3px solid var(--line);border-top:0;
  border-bottom:3px solid var(--brand);
}
/* display:flex would otherwise beat the hidden attribute's display:none */
.docbar[hidden]{display:none}

.unfold{
  display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0;
  text-align:left;background:none;border:0;
  padding:7px 0;cursor:pointer;color:var(--muted);font-family:var(--cond);
}

.pdf{
  flex:0 0 auto;font-family:var(--cond);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;
  background:none;border:2px solid var(--edge);color:var(--accent);
  padding:5px 13px;margin:0;cursor:pointer;
}
.pdf:hover{border-color:var(--accent)}
.pdf[hidden]{display:none}
a.pdf{text-decoration:none;display:inline-block}
.pdf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* above the ceiling the sheet stops drawing hardware, so say so before the
   build rather than after */
.capnote{
  margin:0 0 14px;padding:11px 14px;font-size:13.5px;
  background:var(--err-soft);border-left:4px solid var(--err);
}
.capnote[hidden]{display:none}
.unfold:hover{color:var(--accent)}
/* folded over a built plan, the toggle is the way back: a button, not a label
   (#17 -- a reader found only Start Over) */
.unfold.is-back .unfold-t{background:var(--fill-accent);color:#fff;padding:6px 13px;
  border:2px solid var(--fill-accent)}
.unfold.is-back:hover .unfold-t{background:var(--fill-blue);border-color:var(--fill-blue)}
.unfold.is-back .chev{display:none}
.back-edit-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:18px 0 0}
.back-edit-row span{font-size:13.5px;color:var(--muted)}
.back-edit{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;background:var(--fill-accent);color:#fff;
  border:2px solid var(--fill-accent);padding:6px 13px;cursor:pointer}
.back-edit:hover{background:var(--fill-blue);border-color:var(--fill-blue)}
.back-edit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{ .back-edit-row{display:none} }
.unfold:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.unfold .chev{font-size:11px;line-height:1;transition:transform .15s ease}
.unfold:hover .chev{transform:translateY(1px)}
.unfold-t{font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap}
.unfold-s{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the meta rule is a border on an otherwise empty strip until someone fills
   in a name, so the whole row goes rather than leaving a floating line */
.tb-meta.is-empty{display:none;border-top:0;padding-top:0;margin-top:0}

/* ---- Share: a button with the familiar box-and-arrow, and its menu ---- */
.share-btn,.share-open{display:inline-flex;align-items:center;gap:7px}
.share-ic{width:15px;height:15px;flex:none}
.share-open .share-ic{width:14px;height:14px}
.share-open[hidden]{display:none}
.share-menu{position:fixed;z-index:60;min-width:270px;background:var(--panel);
  border:2px solid var(--line);box-shadow:0 14px 34px -14px rgba(14,26,42,.55);padding:4px 0}
.share-menu[hidden]{display:none}
.share-menu [role=menuitem]{display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 14px;cursor:pointer;text-decoration:none;color:var(--ink);font:inherit}
.share-menu [role=menuitem]+[role=menuitem]{border-top:1px solid var(--edge)}
.share-menu [role=menuitem]:hover,.share-menu [role=menuitem]:focus-visible{
  background:var(--legB-soft);outline:none}
.share-menu [role=menuitem][disabled],.share-menu [aria-disabled]{opacity:.45;cursor:default}
.share-menu .sm-t{display:block;font-family:var(--cond);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.share-menu .sm-d{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
@media print{ .share-menu{display:none} }

/* On a phone the bar's buttons get their own line, under the edit toggle,
   instead of sliding over it. */
@media (max-width:640px){
  .docbar{flex-wrap:wrap;gap:6px 8px;padding:6px 12px}
  .unfold{flex-basis:100%}
  .unfold-s{display:none}
}

/* a printed or PDF'd sheet has no wizard to go back to */
@media print{ .docbar{display:none} }

/* Internal build marker. Deliberately loud -- nobody should mistake a PoC
   sheet for a quote. */
/* under the title, left edge flush with it -- still ahead of the spec line
   and the sheet proper, so the build marker is read before any of it */
.poc{grid-column:1;grid-row:2;justify-self:start;
  display:inline-block;background:var(--caution);color:var(--caution-ink);
  font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:3px 10px;margin:2px 0 0}

/* the logo alone now holds the right-hand column, in flow, so it adds its
   own height rather than needing one reserved for it -- and the meta rule
   lands below it, never across it */
.tb-brand{grid-column:2;grid-row:1/span 3;display:flex;
  flex-direction:column;align-items:flex-end;gap:5px}
.tb-brand .tb-logo{height:64px}
@media (max-width:820px){ .tb-brand .tb-logo{height:56px} }
@media (max-width:720px){ .tb-brand .tb-logo{height:48px} }
.o-brand-inline{font-family:var(--cond);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:96px}
.opt .gap{font-family:var(--mono);font-size:11px;color:var(--legA);
  border:1px solid var(--legA);padding:0 4px;white-space:nowrap}

/* Have/Add hidden behind SHOW_USE_COLUMN in wizard.js */
table.eq.hide-use th:first-child,
table.eq.hide-use td:first-child{display:none}

/* ---- bug reporting, for the testing round ----
   Deliberately a separate block: this is scaffolding, not product. */
/* Two corner buttons now, so the position lives on the container and the
   buttons only describe themselves. They stack on a narrow screen rather than
   squeezing, because a testing affordance that covers the page it is meant to
   report on is worse than no affordance. */
.corner{position:fixed;right:18px;bottom:18px;z-index:40;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.bug-open[hidden]{display:none}
.bug-open{font-family:var(--cond);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--panel);
  /* --edge is a 20% ink wash and read as disabled beside the green next to
     it; --line is the same ink the sheet frame uses, so the two buttons now
     carry the same visual weight and differ only in hue. */
  /* Between --edge (a 20% wash, which read as disabled) and --line (the full
     sheet-frame ink, which shouted). A 42% wash carries the same weight as
     the green beside it without competing with it. */
  color:var(--muted);border:2px solid var(--field-edge);padding:9px 14px;
  cursor:pointer;box-shadow:0 6px 18px -8px rgba(14,26,42,.5)}
.bug-open:hover{color:var(--ink);border-color:var(--legB)}
/* Feedback is the friendlier of the two, and the one we want used more, so it
   carries the green rather than sitting in the same grey as the bug button. */
.fb-open{color:var(--brand-ink);border-color:var(--brand)}
.fb-open:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.bug-dlg{border:3px solid var(--line);background:var(--panel);padding:0;
  width:min(520px,94vw);
  /* the screenshot field made this tall enough to overrun a laptop screen;
     a dialog that clips its own Send button is worse than one that scrolls */
  max-height:92vh;overflow-y:auto}
.bug-dlg::backdrop{background:rgba(14,26,42,.45)}
.bug-dlg form{padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.bug-dlg h2{font-family:var(--cond);font-weight:700;font-size:20px;margin:0}
.bug-note{font-size:13px;color:var(--muted);margin:0}
.bug-f{display:flex;flex-direction:column;gap:5px}
.bug-f > span{font-family:var(--cond);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.bug-f input,.bug-f textarea{font-family:var(--sans);font-size:14.5px;
  color:var(--ink);background:var(--panel);border:2px solid var(--edge);
  padding:8px 10px;width:100%;resize:vertical}
.bug-f input:focus,.bug-f textarea:focus{outline:none;border-color:var(--accent)}
/* Import to Wireless Workbench: the files, then the steps */
.wwb-files{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wwb-files a{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border:2px solid var(--edge);background:var(--panel2);color:var(--ink);
  font-size:14px;font-weight:600;text-decoration:none}
.wwb-files a:hover{border-color:var(--accent);color:var(--accent)}
.wwb-ic{font-weight:700;color:var(--accent)}
.wwb-wait{font-size:13.5px;color:var(--muted)}
.wwb-steps{margin:4px 0 0;padding-left:20px;font-size:13.5px;line-height:1.5}
.wwb-steps li{margin:0 0 4px}
.bug-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.bug-send,.bug-cancel{font-family:var(--cond);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;cursor:pointer;
  border:2px solid var(--edge);background:var(--panel);color:var(--muted)}
.bug-send{background:var(--fill-blue);border-color:var(--fill-blue);color:#fff}
.bug-send[disabled]{opacity:.55;cursor:default}
.bug-msg{font-size:13.5px;margin:0;padding:9px 11px;background:var(--panel2);
  border-left:4px solid var(--legB)}
.bug-msg.err{border-left-color:var(--err);color:var(--err)}
.bug-msg a{color:var(--legB);font-weight:600}
@media print{ .corner,.bug-dlg{display:none} }
.bug-why{color:var(--muted);font-size:12.5px}
.bug-shot{border:2px dashed var(--edge);background:var(--panel2);padding:14px;
  text-align:center;cursor:pointer;transition:border-color .12s}
.bug-shot:hover,.bug-shot:focus,.bug-shot.is-over{border-color:var(--legB);outline:none}
.bug-shot-ask{margin:0;font-size:13.5px;color:var(--ink)}
.bug-shot-ask span{display:block;margin-top:5px;font-size:12px;color:var(--muted);
  line-height:1.5}
.bug-shot-pick{font:inherit;color:var(--legB);background:none;border:0;padding:0;
  text-decoration:underline;cursor:pointer}
.bug-shot-has img{max-width:100%;max-height:190px;border:2px solid var(--edge);
  display:block;margin:0 auto}
.bug-shot-drop{margin-top:9px;font-family:var(--cond);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;
  border:2px solid var(--edge);padding:5px 10px;cursor:pointer}
.bug-shot-drop:hover{color:var(--err);border-color:var(--err)}

/* ---- manufacturer list, shown when the field is empty ----
   Deliberately plainer than a model row: a brand is one fact, and giving it
   the same six columns a model gets would make the two lists look like the
   same list with things missing. */
.o-head{font-family:var(--cond);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:8px 12px 6px;border-bottom:1px solid var(--edge);background:var(--panel2)}
.mfr{justify-content:space-between;padding:10px 12px}
.mfr-name{font-weight:600;font-size:14.5px;color:var(--ink)}
.mfr-n{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Two panes while the field is empty: brands on the left, the hovered brand's
   models on the right, each scrolling on its own. The drop itself stops
   scrolling in this mode, or the brand list would scroll the pane away with it.
   The highlighted brand keeps its highlight, so it is always clear whose
   models these are. On a phone there is no hover to open the pane with, so it
   is hidden and a tap on a brand filters the list the way it always has. */
/* wide enough for the six model columns beside the brand list */
.drop.mega{max-height:none;overflow:hidden;width:860px}
.mega-body{display:grid;grid-template-columns:230px 1fr;height:380px}
.mega-brands{overflow-y:auto;border-right:2px solid var(--line)}
.mega-fly{overflow-y:auto;background:var(--panel)}
.fly-top{position:sticky;top:0;z-index:1}
.fly-top .o-head{position:static}
.fly-head{position:sticky;top:0;z-index:1;text-transform:none;letter-spacing:.02em;
  font-size:12px;color:var(--ink)}
/* One grid for the column headings and every model row, so Model, Band and
   the rest line up down the whole pane -- under the product-line sections too,
   where the Name cell is left empty. Fixed tracks, not content-sized: each row
   is its own grid, and only fixed widths agree from row to row. */
.fly-cols,.fopt{display:grid;align-items:center;column-gap:10px;
  grid-template-columns:152px minmax(64px,1fr) 52px 38px 42px 142px}
.fly-cols{padding:5px 12px;background:var(--panel2);border-bottom:2px solid var(--line);
  font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.fopt .o-fam{min-width:0}
.fopt .o-model{min-width:0;overflow-wrap:anywhere}
.fopt .o-band{min-width:0}
.fopt .o-rack-slot{min-width:0}
/* the 900 MHz badge sits above the rating rather than pushing it off the row */
.o-spec{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:3px 6px;min-width:0}
.o-spec .fit,.o-spec .dead{margin-left:0}
/* product-line headings in the pane, and the "Best here" list above them */
.fam-head{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);padding:12px 12px 5px;
  border-bottom:1px solid var(--edge)}
/* A fixed column, clipped with an ellipsis: "Evolution Wireless Digital" at
   its natural width ran into the model name beside it. The full name is on
   hover. */
.o-fam{font-family:var(--cond);font-weight:600;font-size:12px;color:var(--muted);
  flex:0 0 132px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* [hidden] alone loses to .opt's display:flex, so folded rows need saying so */
.fopt[hidden]{display:none}
.fdead{font-size:12px;color:var(--muted);padding:6px 12px 6px 24px}
.drop:not(.kb) .fdead:hover{color:var(--ink)}

/* ---- fit rating: three steps and a word, on every row of both lists ----
   The word carries the meaning; the meter is there to be scanned. Filled
   steps take the tier's color, so a column of them reads at a glance. */
.fit{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;min-width:128px}
.meter{display:inline-flex;gap:2px}
.meter i{display:block;width:6px;height:12px;background:var(--recess)}
.fit-3 .meter i.on{background:var(--fill-brand)}
.fit-2 .meter i.on{background:var(--brand)}
.fit-1 .meter i.on{background:#D98E1F}
.fit-1{color:var(--muted)}
@media (max-width:700px){
  .mega-body{grid-template-columns:1fr;height:auto}
  .mega-brands{max-height:340px;border-right:0}
  .mega-fly{display:none}
}

/* ---- frequency plan: one table per model ---- */
.fp-tables{display:flex;flex-direction:column;gap:18px}
.fp-tables table{min-width:0}
.fp-tables th:first-child{color:var(--brand-ink)}
.fp-mic{border-left:5px solid var(--legA)}
.fp-iem{border-left:5px solid var(--legT)}
.fp-pa{border-left:5px solid var(--legP)}


/* Shares the corner buttons' shape but is an anchor, not a control. It is
   hidden in print along with the rest of .corner -- a printed plan has no use
   for a link. */
.doc-corner{text-decoration:none;display:inline-block}
.doc-corner:hover{color:var(--ink);border-color:var(--legB)}

/* "Add Another" — the keyboard's way back to the search field from a model
   row. Quiet by default so it does not compete with Build My System, but a
   real focus ring, because being tabbed to is the whole point of it. */
.addmore{font-family:var(--cond);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;background:none;
  color:var(--muted);border:1px solid var(--edge);padding:4px 8px;
  cursor:pointer;white-space:nowrap}
.addmore:hover{color:var(--brand-ink);border-color:var(--brand)}
.addmore:focus-visible{outline:3px solid var(--accent);outline-offset:2px;
  color:var(--brand-ink);border-color:var(--brand)}

/* Four fixed buttons fit a laptop and bury a phone: at 400px they wrap to two
   rows and sit on top of Step 2. The two links are navigation and both pages
   link to each other, so they stand down on a narrow screen; the two that a
   tester needs mid-test stay, smaller. */
@media (max-width:640px){
  .corner{left:12px;right:12px;bottom:12px;gap:6px}
  .doc-corner{display:none}
  .bug-open{font-size:10px;padding:7px 10px;letter-spacing:.1em}
}

/* The feedback dialog reuses the bug dialog's shell; only the context line and
   the address fallback are its own. */
.fb-ctx{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  color:var(--muted);background:var(--panel2);padding:9px 11px;
  white-space:pre-wrap;word-break:break-word;max-height:190px;overflow-y:auto}
.fb-to{font-family:var(--mono);font-size:12px;color:var(--ink);
  user-select:all;-webkit-user-select:all}

/* ---- first-visit welcome (index.html #hero) ---------------------------- */
.hero{border:3px solid var(--line);border-top:0;border-bottom-color:var(--brand);
  background:var(--sheet)}
.hero[hidden]{display:none}
.hero-in{padding:26px 24px 22px}
.hero-eyebrow{margin:0 0 6px;font-family:var(--cond);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink)}
.hero-h{margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(24px,3.4vw,32px);
  line-height:1.12;letter-spacing:0;text-transform:none;color:var(--ink);text-wrap:balance}
.hero-sub{margin:10px 0 0;max-width:none;font-size:16px;line-height:1.5;color:var(--ink)}
.hero-tiles{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hero-tiles li{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-tiles img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;
  border:2px solid var(--edge);background:var(--panel);margin-bottom:6px}
.hero-tiles b{font-family:var(--cond);font-weight:700;font-size:15px;line-height:1.2}
.hero-tiles span{font-size:13px;line-height:1.45;color:var(--muted)}
.hero-go{margin:18px 0 0;font-family:var(--cond);font-weight:700;font-size:14px;
  letter-spacing:.04em;color:var(--brand-ink)}
.hero-go span{display:inline-block;margin-right:4px}
@media (max-width:820px){ .hero-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* a phone: a compact 2x2 of pictures and titles, so Step 1 is not three
   screens down -- the descriptions are what goes */
@media (max-width:460px){
  .hero-in{padding:18px 16px 16px}
  .hero-sub{font-size:15px}
  .hero-tiles{gap:12px 10px;margin-top:16px}
  .hero-tiles img{aspect-ratio:4/3;margin-bottom:4px}
  .hero-tiles b{font-size:13.5px}
  .hero-tiles span{display:none}
  .hero-go{margin-top:14px}
}
@media print{ .hero{display:none} }


/* ---- phones: the pickers (Chris, 2026-10-12) ---------------------------- */
@media (max-width:640px){
  /* a list the width of the screen, less its margins, under its field */
  .drop,.drop.mega{width:auto;left:0;right:0;max-width:none}
  /* a model on two lines: brand, model and band; then type, range, rack and
     its Clear of local TV rating */
  .opt{flex-wrap:wrap;row-gap:5px;column-gap:8px;padding:9px 12px}
  .opt .o-model{flex:1 0 auto;min-width:0}
  .o-range{min-width:0}
  .opt .o-rack-slot{min-width:0}
  /* the corner buttons stand aside while a list is open over the page */
  body:has(.drop:not([hidden])) .corner{display:none}
  /* and on a phone they do not float over the plan at all: they sit at the
     foot of the page (Share is also at the top of the sheet) */
  .corner{position:static;justify-content:center;margin:0 8px 28px}
}

/* Advanced: a bar directly above the frequency tables (2026-10-21) */
.adv{margin:4px 0 14px;border:1px solid var(--edge);background:var(--panel)}
.adv-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 12px}
.adv-toggle{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;background:none;border:1px solid var(--accent);color:var(--accent);
  padding:4px 10px;cursor:pointer}
.adv-toggle[aria-expanded="true"]{background:var(--fill-accent);color:#fff;border-color:var(--fill-accent)}
.adv-what{font-size:13.5px;color:var(--muted)}
.adv-what[hidden],.adv-body[hidden]{display:none}
.adv-body{padding:0 12px 12px}
.adv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;
  padding:9px 14px;background:var(--levelup-bg);border-left:4px solid var(--fill-accent);font-size:14px}
.adv-t{color:var(--muted)}
.adv-all,td.adv-c button{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:3px 9px}
.adv-all{background:var(--fill-accent);color:#fff;border:2px solid var(--fill-accent)}
.adv-all:disabled{opacity:.5;cursor:default}
.adv-note{font-size:13.5px;color:var(--muted)}
td.adv-c{white-space:nowrap;text-align:right;width:1%}
td.adv-c button{background:none;border:1px solid var(--edge);color:var(--ink);margin-left:6px}
td.adv-c button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
td.adv-c button:disabled{opacity:.45;cursor:default}
td.adv-c .lk.on{background:var(--fill-accent);border-color:var(--fill-accent);color:#fff}
th.adv-c{width:1%}
.rc-s{display:none}
@media (max-width:640px){
  .rc-l{display:none} .rc-s{display:inline}
  td.adv-c{padding-left:4px;padding-right:6px}
  td.adv-c button{margin-left:3px;padding:3px 6px}
  .adv-on .fp-tables th{white-space:normal}
}
@media print{ .adv,td.adv-c,th.adv-c{display:none} }

/* Edit / Start over at the foot of the plan */
.back-edit-foot .start-again{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;background:none;border:2px solid var(--edge);color:var(--accent);padding:6px 13px;cursor:pointer}
.back-edit-foot .start-again:hover{border-color:var(--accent)}

/* Advanced -> TV channels at this address (2026-10-21) */
.tv-panel{margin:0}
.tv-panel[hidden]{display:none}
.tv-toggle{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  background:none;border:1px solid var(--edge);color:var(--accent);padding:5px 12px;cursor:pointer}
.tv-toggle:hover,.tv-toggle[aria-expanded="true"]{border-color:var(--accent)}
.tv-body{margin-top:10px;padding:12px 14px;background:var(--levelup-bg);border-left:4px solid var(--caution)}
.tv-body[hidden]{display:none}
.tv-note{margin:0 0 10px;font-size:14px;max-width:none;color:var(--ink)}
.tv-scroll{overflow-x:auto}
.tv-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;margin:4px 0 10px}
.tv-table th{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:6px 8px;border-bottom:2px solid var(--edge)}
.tv-table td{padding:6px 8px;border-bottom:1px solid var(--edge);vertical-align:middle}
.tv-table tr.is-open td{background:var(--legA-soft)}
.tv-table tr.is-fixed td{color:var(--muted)}
.tv-mi{color:var(--muted)}
.tv-sig{white-space:nowrap}
.tv-bar{display:inline-block;width:70px;height:8px;background:var(--edge);margin-right:8px;vertical-align:middle}
.tv-bar i{display:block;height:100%;background:var(--muted)}
td.tv-use,th.tv-use-h{text-align:center;width:1%;white-space:nowrap}
td.tv-use input{width:18px;height:18px;cursor:pointer}
.tv-bar{width:120px}
.tv-fixed{font-size:12.5px}
.tv-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px;font-size:14px}
.tv-apply{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fill-accent);color:#fff;border:2px solid var(--fill-accent);padding:4px 11px;cursor:pointer}
.tv-apply:disabled{opacity:.5;cursor:default}
.tv-msg{font-size:13.5px;color:var(--muted)}
.tv-link{font:inherit;font-weight:600;background:none;border:0;padding:0;color:var(--accent);
  text-decoration:underline;cursor:pointer}
@media print{ .tv-panel,.tv-link{display:none} }
/* the TV list fits a phone: channel, station, signal, tick -- MHz and miles go */
@media (max-width:640px){
  .tv-table{min-width:0}
  .tv-table th:nth-child(2),.tv-table td:nth-child(2),.tv-mi{display:none}
  .tv-table th,.tv-table td{padding:6px 5px}
  .tv-bar{width:48px;margin-right:0}
  .tv-table td{white-space:nowrap}
}

/* the build button at the foot of the TV list (2026-10-22) */
.tv-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 0}
.tv-go[hidden]{display:none}
.tv-build{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fill-accent);color:#fff;border:2px solid var(--fill-accent);padding:6px 13px;cursor:pointer}