/* Drawing-sheet theme, lifted from the approved rack-plan sheet
   (www/rackplan-reference.html). Light by default, with a dark theme for the
   screen only (Chris, 2026-10-08: glare late at night). The dark block sits in
   @media screen, so a printed or PDF'd sheet is always the light drawing.
   /theme.js decides the theme before first paint -- the viewer's own choice,
   else the system's -- and always writes data-theme, which is why there is
   one dark block here rather than a prefers-color-scheme copy as well. */
:root{
  /* ground — a cool drawing-sheet gradient warming toward the foot of the page */
  --bg-1:#C6D5E4;
  --bg-2:#E2E9F0;
  --bg-3:#F2E7D6;
  --bg:#E2E9F0;

  --panel:#FFFFFF;
  --panel2:#F2F5F9;
  --sheet:rgba(255,255,255,.64);
  --sheet2:rgba(238,243,249,.76);
  --sheet3:rgba(255,255,255,.34);
  --recess:#DBE1E8;
  --ink:#111519;
  --line:#111519;
  --muted:#59636F;
  --edge:rgba(17,21,25,.20);

  /* receive leg — the diversity pair */
  --legA:#AE680B;
  --legB:#2B5E93;
  --legA-soft:rgba(174,104,11,.12);
  --legB-soft:rgba(43,94,147,.11);
  /* transmit leg — outbound IEM RF, carried on the RF Venue green */
  --legT:#4A6B21;
  --legT-soft:rgba(74,107,33,.13);
  /* wireless PA leg -- RF PA transmitters to remote speakers. Blue, apart from
     the amber and green legs for a red-green colorblind reader (validated
     2026-10-22) */
  --legP:#0072B2;
  --legP-soft:rgba(0,114,178,.11);

  --accent:#2F6FB0;
  /* RF Venue green — wireless-system-builder/imports/ui/AppTheme.js:11 */
  --brand:#79AD36;
  --brand-ink:#4A6B21;   /* darkened for heading text: 5.4:1 on the header band */
  --spare:#8792A0;
  --spare-soft:rgba(135,146,160,.14);

  --face:#1B2025;
  --face-ink:#C9CFD7;
  --face-line:#3A424B;
  /* the architectural products are matte white; everything else on the sheet
     is the dark --face, so the finish gets its own token rather than a flag */
  --face-white:#F7F8F9;

  /* colours that used to be written in place, given names so the dark theme
     can reach them */
  --err:#A5301F;
  --err-ink:#8E2517;
  --err-soft:rgba(165,48,31,.07);
  --ok-soft:rgba(121,173,54,.13);
  --caution:#F5D400;          /* the Beta badge; also the scan threshold */
  --caution-ink:#1B2025;
  --scan:#6B4FBB;             /* the scan trace and its controls */
  --tip-bg:#111519;           /* dark tooltips, in both themes */
  --tip-ink:#FFFFFF;
  --halo:#FFFFFF;             /* knock-out stroke behind chart labels and markers */
  --shadow:rgba(14,26,42,.55);
  --shadow-soft:rgba(14,26,42,.10);
  --box:rgba(255,255,255,.55);    /* translucent boxes in the drawings */
  --box2:rgba(255,255,255,.72);
  --field-edge:rgba(17,21,25,.42);
  --glow-1:rgba(255,255,255,.95);
  --glow-2:rgba(120,158,196,.50);
  --glow-3:rgba(206,170,116,.40);
  --tb-1:rgba(255,255,255,.88);
  --tb-2:rgba(255,255,255,.72);
  --tb-3:rgba(233,240,248,.66);
  --logo-filter:invert(1);    /* the logo file is white-on-transparent */
  /* solid buttons and chips with white text. Not redefined for dark: they are
     mid-tone already, and white on them holds in both themes, where the text
     tokens they used to borrow (--brand-ink, --legB) go light in the dark. */
  /* the frequency chart (wizard.js FC) */
  --fc-s1:#0072B2; --fc-s2:#E69F00; --fc-s3:#009E73; --fc-s4:#8A939C;   /* systems on the chart */
  --fc-mic:#79AD36;
  --fc-iem:#4A6B21;
  --fc-scan-fill:rgba(107,79,187,.16);
  --fc-tv:rgba(47,111,176,.15);
  --fc-tv-edge:rgba(47,111,176,.35);
  --fc-grid:rgba(17,21,25,.08);
  --fc-band:rgba(17,21,25,.035);
  --fc-zoom:rgba(43,94,147,.14);
  --fc-outside:rgba(17,21,25,.07);   /* a wide scan, outside the plan's range */
  --levelup-edge:rgba(47,111,176,.55);
  --levelup-bg:rgba(47,111,176,.06);
  --fill-brand:#4A6B21;
  --fill-blue:#2B5E93;
  --fill-accent:#2F6FB0;
  --fill-iem:#4A6B21;
  --fill-pa:#0072B2;

  --sans:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* Light theme on screen: paper rather than a light box (Chris, 2026-10-08:
   toggling to light "practically lights the room"). Off-white panels, a
   deeper ground, the top-left white glow mostly gone -- about 6% dimmer
   overall, most of it from the large near-white areas. Screen only: the
   values above stay what prints, so a PDF is crisp white on paper. */
@media screen{
:root:not([data-theme="dark"]){
  --bg-1:#AEBCCB;
  --bg-2:#C8D1DA;
  --bg-3:#D8CEBF;
  --bg:#C8D1DA;
  --panel:#F1F2EF;
  --panel2:#E6EAEE;
  --sheet:rgba(238,240,237,.86);
  --sheet2:rgba(222,229,236,.90);
  --sheet3:rgba(238,240,237,.5);
  --recess:#D3D9E0;
  --glow-1:rgba(255,255,255,.28);
  --glow-2:rgba(120,158,196,.42);
  --glow-3:rgba(206,170,116,.32);
  --tb-1:rgba(238,240,237,.94);
  --tb-2:rgba(234,237,235,.90);
  --tb-3:rgba(222,230,238,.88);
  --halo:#F1F2EF;
  --box:rgba(241,242,239,.6);
  --box2:rgba(241,242,239,.8);
}
}

/* Dark theme -- screen only, so printing always gives the light drawing.
   Solid --fill-* colours are deliberately absent: they hold white text in both.
   The chart's mic/in-ear/scan trio was re-validated against the dark panel
   (dataviz validate_palette, --mode dark --surface #1c2025, all pairs: pass).
   Two plain greens cannot be told apart inside the dark lightness band, so the
   in-ear green leans teal here; the marker shapes still differ as well. */
@media screen{
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-1:#0E1216;
  --bg-2:#14181D;
  --bg-3:#1A1815;
  --bg:#14181D;
  --panel:#1C2025;
  --panel2:#22272E;
  --sheet:rgba(28,32,37,.84);
  --sheet2:rgba(36,41,48,.92);
  --sheet3:rgba(28,32,37,.5);
  --recess:#101318;
  --ink:#E7E9EC;
  --line:#6B7480;
  --muted:#A0A7B0;
  --edge:rgba(255,255,255,.16);
  --legA:#E0A04A;
  --legB:#7FB0E0;
  --legA-soft:rgba(224,160,74,.15);
  --legB-soft:rgba(127,176,224,.14);
  --legT:#9BCB5C;
  --legT-soft:rgba(155,203,92,.15);
  --legP:#5A9BDD;
  --legP-soft:rgba(90,155,221,.15);
  --accent:#6FA8DC;
  --brand-ink:#9BCB5C;
  --spare:#7D8794;
  --spare-soft:rgba(125,135,148,.16);
  --face:#262B31;
  --face-line:#4A535E;
  --face-white:#D5D9DE;
  --err:#F08A7A;
  --err-ink:#F5A799;
  --err-soft:rgba(240,138,122,.11);
  --ok-soft:rgba(121,173,54,.16);
  --scan:#8C74DC;
  --tip-bg:#2C333B;
  --halo:#1C2025;
  --shadow:rgba(0,0,0,.7);
  --shadow-soft:rgba(0,0,0,.3);
  --box:rgba(28,32,37,.72);
  --box2:rgba(28,32,37,.88);
  --field-edge:rgba(255,255,255,.32);
  --glow-1:rgba(70,92,116,.22);
  --glow-2:rgba(47,84,128,.24);
  --glow-3:rgba(120,95,60,.12);
  --tb-1:rgba(34,39,46,.94);
  --tb-2:rgba(28,32,37,.9);
  --tb-3:rgba(30,37,46,.86);
  --logo-filter:none;
  --levelup-edge:rgba(111,168,220,.55);
  --levelup-bg:rgba(111,168,220,.07);
  --fc-s1:#3A84CC; --fc-s2:#BF8218; --fc-s3:#1F9A76; --fc-s4:#8A939C;
  --fc-mic:#79A62B;
  --fc-iem:#1C8367;
  --fc-scan-fill:rgba(140,116,220,.20);
  --fc-tv:rgba(111,168,220,.13);
  --fc-tv-edge:rgba(111,168,220,.38);
  --fc-grid:rgba(255,255,255,.08);
  --fc-band:rgba(255,255,255,.035);
  --fc-zoom:rgba(127,176,224,.16);
  --fc-outside:rgba(255,255,255,.05);
}
/* a user's own logo is usually dark artwork for a white page: give it one */
:root[data-theme="dark"] .tb-by-logo{background:#fff;padding:3px 6px;border-radius:3px}
}

/* light/dark switch, after PA Switch's: sun, track, moon. /theme.js puts it
   under the RF Venue logo on every page. Not printed. */
.theme-switch{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:0;cursor:pointer;padding:2px 0;color:var(--ink);margin-top:6px}
.theme-switch .ts-ico{font-size:14px;line-height:1;opacity:.38;transition:opacity .15s}
.theme-switch[aria-checked="false"] .ts-sun,
.theme-switch[aria-checked="true"] .ts-moon{opacity:1}
.ts-track{position:relative;width:38px;height:20px;border-radius:10px;
  background:var(--recess);border:2px solid var(--line)}
.ts-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink);transition:left .15s ease}
.theme-switch[aria-checked="true"] .ts-knob{left:20px}
.theme-switch:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .ts-knob,.theme-switch .ts-ico{transition:none} }
@media print{ .theme-switch{display:none} }

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 4% -12%, var(--glow-1), transparent 60%),
    radial-gradient(900px 780px at 100% 0%, var(--glow-2), transparent 62%),
    radial-gradient(820px 700px at 62% 110%, var(--glow-3), transparent 64%),
    linear-gradient(164deg, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.sheet{max-width:1080px;margin:0 auto;padding:44px 24px 88px}
.doc{box-shadow:0 28px 64px -30px var(--shadow), 0 2px 10px var(--shadow-soft)}

/* ---- title block ---- */
.titleblock{
  border:3px solid var(--line);border-bottom-color:var(--brand);
  background:linear-gradient(118deg, var(--tb-1) 0%, var(--tb-2) 55%, var(--tb-3) 100%);
}
/* title text left, brand stack right, both in flow -- the header is then as
   tall as its tallest column and no taller, with no reserved-height guess */
.tb-name{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:6px 24px;padding:16px 24px 24px;
}
.tb-logo{width:auto;display:block;filter:var(--logo-filter)}
h1{
  grid-column:1;grid-row:1;
  font-family:var(--cond);font-weight:700;
  font-size:clamp(30px,5vw,46px);line-height:1.02;margin:0;
  letter-spacing:-.005em;text-wrap:balance;
}
.tb-meta{
  grid-column:1/-1;grid-row:4;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 28px;flex-wrap:wrap;
  margin-top:6px;padding-top:9px;border-top:2px solid var(--edge);
}
.tb-for{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tb-spec:empty{display:none}
.tb-spec{
  grid-column:1;grid-row:3;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.02em;
  color:var(--muted);margin-top:1px;max-width:62ch;text-wrap:pretty;
}
/* the count reads as the title's subtitle; the address supports it rather than
   competing with it, so it drops a size and sits on its own line */
.tb-spec .tb-count{display:block}
.tb-spec .tb-where{display:block;font-size:14.5px;font-weight:500;margin-top:3px}

.tb-for .k,.tb-by .k{
  font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.tb-by{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tb-by .v{font-family:var(--cond);font-weight:700;font-size:15px}
.tb-by .org{font-family:var(--cond);font-weight:600;font-size:14.5px}
.tb-by .sep{color:var(--spare);font-size:14px}
/* A user's own logo, in place of their company name. It fills the strip
   between the grey rule above and the sheet's green edge below, with a few
   pixels clear of each (Chris, 2026-10-01: 26px read as too small), but the
   negative margins keep the row -- and so the header -- the height the text
   gives it: the logo grows into space that was already there. */
.tb-by-logo{height:47px;max-width:220px;width:auto;object-fit:contain;
  align-self:flex-start;margin:-3px 0 -18px}
.tb-by-logo[hidden]{display:none}
.tb-by a{color:var(--accent);font-size:14px;text-decoration:none}
.tb-by a:hover{text-decoration:underline}
.tb-by a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-for .v{font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:.01em}

/* ---- sections ---- */
section{
  border:3px solid var(--line);border-top:0;border-bottom-color:var(--brand);
  background:var(--sheet);
}
.sec-head{
  background:var(--sheet2);border-bottom:3px solid var(--brand);
  padding:9px 24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
}
.sec-head h2{
  font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.11em;
  text-transform:uppercase;margin:0;color:var(--brand-ink);
}
.sec-head .note{color:var(--muted);font-size:13px}
.sec-body{padding:24px}
.sec-body > p{max-width:68ch}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ---- figures ---- */
figure{margin:0}
.figwrap{overflow-x:auto;background:var(--sheet3);padding:8px 0 10px}
svg.dwg{display:block;width:100%;min-width:640px;max-width:100%;height:auto;color:var(--ink)}
.dwg text{font-family:var(--cond);font-weight:600;fill:currentColor}
.dwg .t-mono{font-family:var(--mono);font-weight:500}
.dwg .t-mute{fill:var(--muted);font-weight:600}
.dwg .t-face{fill:var(--face-ink)}
.dwg .t-small{font-size:10.5px;letter-spacing:.06em}
/* the frequency-plan spectrum is read for its numbers: bigger than the rack
   drawings' small text, and full ink rather than muted */
.dwg .t-spec{font-size:13px;letter-spacing:.03em}

/* ---- leg legend ---- */
.legend{
  display:flex;flex-wrap:wrap;gap:7px 24px;margin-top:15px;
  font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--muted);
}
.legdot{display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:baseline;background:var(--legA)}
.legdot.b{background:var(--legB)}
.legdot.t{background:var(--legT)}
.legdot.p{background:var(--legP)}
.legdot.occ{
  background:var(--recess);
  background-image:repeating-linear-gradient(45deg,var(--muted) 0 1px,transparent 1px 3px);
  outline:1px solid var(--edge);outline-offset:-1px;
}
.legdot.open{background:var(--panel);outline:1px solid var(--edge);outline-offset:-1px}


/* ---- tables ---- */
.tablewrap{overflow-x:auto;border:2px solid var(--edge)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:14px}
caption{text-align:left;font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 8px}
/* A table on this sheet used to be one weight of grey throughout: grey head,
   grey group bands, grey body. Nothing told the eye where to land. The fix is
   hierarchy rather than decoration -- the head and the group bands take real
   ink, the payload column (frequency, price) takes ink and weight, and the
   supporting columns keep the muted tone they had. The leg colors are the
   ones already used in the drawings, so the table and the figures agree. */
th{
  background:var(--sheet2);text-align:left;font-family:var(--cond);font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);
  padding:10px 14px;border-bottom:2px solid var(--line);white-space:nowrap;
}
td{padding:9px 14px;border-bottom:1px solid var(--edge);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--legB-soft)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* the payload: the number the reader came for */
td.num{color:var(--ink);font-weight:500}
td.mono{font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--muted)}
td.vnd,th.vnd{white-space:nowrap;color:var(--muted)}
tr.total td{background:var(--sheet2);font-weight:700;color:var(--ink);
  border-top:2px solid var(--line)}
.incl{display:block;margin-top:5px;font-family:var(--cond);font-weight:500;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* group bands: a colored rail in the leg color, and ink instead of grey */
tbody tr.grp td{
  background:var(--sheet2);font-family:var(--cond);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);
  padding:8px 14px 8px 12px;border-left:5px solid var(--muted);
  border-top:1px solid var(--edge);
}
tbody tr.grp.mic td{border-left-color:var(--legA);background:var(--legA-soft)}
tbody tr.grp.iem td{border-left-color:var(--legT);background:var(--legT-soft)}
tbody tr.grp.pa td{border-left-color:var(--legP);background:var(--legP-soft)}
tbody tr.grp:hover td{background:var(--sheet2)}
tbody tr.grp.mic:hover td{background:var(--legA-soft)}
tbody tr.grp.iem:hover td{background:var(--legT-soft)}

/* ---- video guides, after PA Switch's help cards ---- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.guide-card{
  display:flex;flex-direction:column;border:2px solid var(--line);
  background:var(--panel);text-decoration:none;color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.guide-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,26,42,.22)}
.guide-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.thumb{
  position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  border-bottom:2px solid var(--line);
}
.guide-card:nth-child(3n+1) .thumb{background:linear-gradient(135deg,#4A6B21,#22300E)}
.guide-card:nth-child(3n+2) .thumb{background:linear-gradient(135deg,#2B4257,#161F29)}
.guide-card:nth-child(3n+3) .thumb{background:linear-gradient(135deg,#3D4A57,#232A32)}
/* a playlist video's own thumbnail (lib/youtube.py); the gradients above stay
   for the fixed cards. The image goes in the style attribute, so only its
   sizing is set here -- the shorthand above would reset it otherwise. */
.guides .guide-card .thumb.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.play{
  width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.94);color:#16202C;
  display:flex;align-items:center;justify-content:center;font-size:18px;padding-left:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.35);transition:transform .15s ease;
}
.guide-card:hover .play{transform:scale(1.08)}
.guide-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:5px}
.gc-tag{
  font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-ink);
}
.guide-title{font-weight:600;font-size:15.5px;line-height:1.3}
.guide-desc{font-size:13px;color:var(--muted);line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .guide-card,.play{transition:none}
  .guide-card:hover,.guide-card:hover .play{transform:none}
}

footer.appfoot{
  border:3px solid var(--line);border-top:0;background:var(--sheet2);
  padding:13px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.foot-help{
  font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;padding:5px 4px;
}
.foot-help:hover{text-decoration:underline}
.foot-help:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@page{ size: Letter; margin: 12mm; }
@media print{
  /* the screen's tinted ground printed as a band under every page (2026-10-21) */
  html,body{background:#fff !important}
  /* the chart's title, the chart and the static drawing stay on one page */
  .fig-head{break-after:avoid}
  .fchart,.fc-plot,.fchart-static,.offer,.tv-chose{break-inside:avoid}
  .scan-ctl .scan-note,.scan-note{display:none !important}
  /* the equipment list may run onto the next page between rows, headings
     repeated, rather than leave half of page 1 empty */
  .tablewrap:has(table.eq-list){break-inside:auto}
  table.eq-list thead{display:table-header-group}
  table.eq-list tr{break-inside:avoid}
  body{background-attachment:scroll}
  .sheet{max-width:none;padding:0}
  .doc{box-shadow:none}
  figure,.tablewrap,footer.appfoot,.guide-card{break-inside:avoid}
  .sec-body{padding:18px}
  .sec-head{break-after:avoid}
  svg.dwg{min-width:0}
  .figwrap,.tablewrap{overflow:visible}
  table{min-width:0}
}

@media (max-width:820px){
  .sec-body{padding:18px}
}

/* a requested model that placed no frequencies at all -- named rather than
   left out, so "it did not appear" is never the whole story the sheet tells */
tr.none td{
  background:var(--err-soft);
  border-left:4px solid var(--err);
  font-size:13px;padding:9px 12px;
}

/* ---- optional spectrum scan ----
   Sits above the DTV chart on the same frequency scale. Nothing is uploaded;
   the file is read in the browser and the trace is context for the reader. */
.scan{margin:0 0 18px}
/* Sits on the right of the Frequency plan header. margin-left:auto pushes it
   there without the header needing to become a grid. */
.scan-ctl{margin-left:auto;display:inline-flex;flex-wrap:wrap;align-items:baseline;
  gap:9px 12px}
.scan-ctl .scan-note{flex:0 0 auto}
@media (max-width:720px){ .scan-ctl{margin-left:0;flex-basis:100%} }
.scan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  padding:9px 12px;background:var(--panel2);border:2px solid var(--edge)}
.scan-t{font-family:var(--cond);font-weight:700;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
/* Deliberately quiet. A small share of customers ever upload a scan, and a
   filled blue button in the section header made it look like a step. */
.scan-pick{font-family:var(--cond);font-weight:700;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--legB);
  background:none;border:1px solid var(--legB);
  padding:4px 9px;cursor:pointer;white-space:nowrap}
.scan-pick:hover{color:#fff;background:var(--fill-blue)}
.scan-note{font-size:12.5px;color:var(--muted);display:inline-flex;
  align-items:center;gap:5px}
/* The affordance for the tooltip. Plain text gives no sign it has anything
   to say, so the help sits behind a mark that looks clickable. */
.scan-i{font-family:var(--cond);font-weight:700;font-size:10px;line-height:1;
  width:15px;height:15px;border-radius:50%;border:1px solid var(--muted);
  background:none;color:var(--muted);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;position:relative}
.scan-i:hover,.scan-i:focus-visible{color:var(--legB);border-color:var(--legB);
  outline:none}
/* The tip itself. A native title waits about a second before it shows, which
   reads as the control doing nothing; this appears on hover and on focus. */
.scan-i::after{
  content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);
  width:250px;padding:9px 11px;background:var(--tip-bg);color:var(--tip-ink);
  font-family:var(--sans);font-weight:400;font-size:12.5px;line-height:1.45;
  letter-spacing:0;text-align:left;text-transform:none;
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:30;
  box-shadow:0 8px 20px -8px rgba(14,26,42,.6)}
.scan-i:hover::after,.scan-i:focus-visible::after{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){ .scan-i::after{transition:none} }
.scan-clear{font-family:var(--cond);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;background:none;color:var(--muted);
  border:2px solid var(--edge);padding:5px 10px;cursor:pointer}
.scan-clear:hover{color:var(--ink)}
.scan-fig{margin:0}
/* ---- the interactive spectrum chart (wizard.js, "the chart") ---- */
.fchart{margin:0 0 6px}
.fchart.is-live + .fchart-static{display:none}
.fc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 18px;margin:0 0 10px}
.fc-chips,.fc-zooms{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fc-chip,.fc-z,.fc-reset{font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.02em;background:var(--panel);color:var(--ink);cursor:pointer;
  border:1.5px solid var(--edge);padding:5px 10px;display:inline-flex;align-items:center;gap:7px}
.fc-chip[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.fc-chip:hover,.fc-z:hover,.fc-reset:hover:not(:disabled){border-color:var(--legB)}
.fc-reset:disabled{opacity:.4;cursor:default}
.fc-zl{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-right:2px}
.fc-sw{display:inline-block;width:11px;height:11px}
/* the scan's own chips sit in a holder that should not break the row's spacing */
#fc-scan-chip{display:contents}
.fc-plot{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:crosshair;background:var(--panel);border:1px solid var(--edge);padding:6px 4px 2px}
.fc-plot svg{display:block;max-width:100%;height:auto}
.fc-t{font-family:var(--cond);font-weight:600;font-size:12.5px;fill:var(--ink)}
.fc-mono{font-family:var(--mono);font-weight:500;font-size:12px}
.fc-halo{paint-order:stroke;stroke:var(--halo);stroke-width:4px}
.fc-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);
  border:1.5px solid var(--line);padding:8px 11px;font-size:13px;line-height:1.55;
  box-shadow:0 10px 24px -12px rgba(14,26,42,.55);max-width:320px}
.fc-tip[hidden]{display:none}
.fc-dot{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:0}
.fc-help{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
@media print{ .fc-plot{border:0;padding:0} .fc-tip{display:none} }

/* using the scan: threshold, what it catches, and the button */
.scan-use{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:6px 0 18px;padding:10px 14px;background:var(--panel2);border:1px solid var(--edge)}
.scan-use[hidden]{display:none}
.scan-thr{font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.scan-unit{text-transform:none;letter-spacing:0;font-family:var(--mono);font-weight:500;
  font-size:13px;color:var(--muted)}
/* the threshold's (i) sits at the left of its panel: open the tip rightwards */
.scan-i-r::after{right:auto;left:0}
/* the threshold box wears the threshold's yellow, like its line and blocks */
.scan-thr input{border-left:5px solid var(--caution)!important;}
.scan-thr input{width:70px;font-family:var(--mono);font-size:14px;padding:4px 6px;
  border:2px solid var(--edge);background:var(--panel)}
.scan-count{font-size:13px;color:var(--ink)}
.scan-cook{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.scan-cook[hidden]{display:none}
.scan-cook .chef{height:46px}
.scan-cook.err{color:var(--err);font-weight:500}
.scan-go:disabled{opacity:.55;cursor:default}
/* built: grey and quiet until the scan or threshold changes */
.scan-go.is-built{background:var(--panel);color:var(--muted);border:1.5px solid var(--edge);opacity:1}
.scan-go.is-built:hover{filter:none}
.scan-done{color:var(--brand-ink);font-weight:600;font-size:13.5px}
/* the frequencies the last scan build moved, highlighted for a moment */
tr.fp-changed td{animation:fp-flash 5s ease-out}
@keyframes fp-flash{0%,45%{background:rgba(121,173,54,.32)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){ tr.fp-changed td{animation:none;background:rgba(121,173,54,.18)} }
/* the sheet stays while a scan re-coordination cooks, dimmed so it is clearly
   the old plan; the scan panel with RF Chef stays bright */
#results.is-cooking .fchart,#results.is-cooking .fp-tables,
#results.is-cooking .fig-head{opacity:.4;transition:opacity .2s;pointer-events:none}
.scan-go{margin-left:auto;font-family:var(--cond);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--brand);color:var(--ink);
  border:0;padding:9px 16px;cursor:pointer}
.scan-go:hover{filter:brightness(1.1)}
/* recorder playback: view one recording at a time; coordination stays on the
   peak hold */
.scan-play{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding-top:10px;border-top:1px solid var(--edge)}
.scan-play[hidden]{display:none}
.sp-seg{display:inline-flex}
.sp-seg button,.sp-btn{font-family:var(--cond);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--panel);color:var(--ink);border:1.5px solid var(--edge);
  padding:6px 11px;cursor:pointer}
.sp-seg button + button{margin-left:-1.5px}
.sp-seg button[aria-pressed="true"]{background:var(--scan);border-color:var(--scan);color:#fff}
.sp-btn:disabled{opacity:.4;cursor:default}
.sp-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;
  padding:0;color:var(--scan);border-color:var(--scan)}
.sp-icon:hover{background:var(--scan);color:#fff}
.sp-ico{width:14px;height:14px;display:block}
.sp-range{flex:1 1 240px;accent-color:var(--scan)}
.sp-when{font-family:var(--mono);font-size:12.5px;min-width:230px}
@media print{ .scan-pick,.scan-clear,.scan-i{display:none} }

/* ---- helpful docs ----
   The same idea as the video cards but for things you download, so they are
   rows rather than tiles: an icon that says what kind of document it is, the
   product it belongs to, and the part number to quote. Flat and bordered like
   the rest of the sheet -- no radius, no lift on hover.
   Named doclink, not doc: .doc is already the sheet's own wrapper, and
   taking that name turned the whole document into a flex row. */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.doclink{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:2px solid var(--edge);background:var(--panel);text-decoration:none;
  color:var(--ink);transition:border-color .12s ease,background .12s ease}
.doclink:hover{border-color:var(--brand);background:var(--panel2)}
.doclink:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.doclink-ico{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;background:var(--recess);color:var(--brand-ink)}
.doclink-ico svg{width:19px;height:19px}
.doclink-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.doclink-title{font-family:var(--cond);font-weight:700;font-size:14.5px;line-height:1.25}
.doclink-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* a product's documents as links within its row (lib/hubdb.py) */
.docrow{align-items:flex-start}
.docrow:hover{border-color:var(--edge);background:var(--panel)}
.docrow-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:3px 0 2px}
.docrow-links a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.docrow-links a:hover{text-decoration:underline;text-underline-offset:3px}
.docrow-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{ .doclink{break-inside:avoid} }

/* ---- talk to RF Venue ----
   A mailto, not a form: the sheet already knows what a form would ask. Prints
   with the sheet, because the PDF is what actually gets emailed around -- so
   the address is real text beside the button, not only a link target. */
.ask{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:flex-start;
  justify-content:space-between}
.ask-say{flex:1 1 340px;min-width:0}
.ask-h{font-family:var(--cond);font-weight:700;font-size:21px;margin-bottom:6px}
.ask-say p{margin:0 0 6px;font-size:15px;color:var(--muted);max-width:56ch}
.ask-ctx{font-size:13.5px !important}
.ask-do{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ask-btn{display:inline-block;font-family:var(--cond);font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--fill-brand);color:#fff;text-decoration:none;padding:12px 20px}
.ask-btn:hover{filter:brightness(1.12)}
.ask-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ask-addr{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ask-nps{display:flex;flex-direction:column;gap:3px;margin-top:6px;
  padding-top:9px;border-top:2px solid var(--edge);max-width:30ch}
.ask-nps b{font-family:var(--cond);font-weight:700;font-size:23px;
  letter-spacing:.01em;color:var(--brand-ink)}
.ask-nps span{font-size:12.5px;color:var(--muted);line-height:1.35}
.ask-nps a{color:var(--brand-ink);font-weight:600}
.ask-nps a:hover{text-decoration:none}
@media print{ .ask-btn{background:none;color:var(--ink);border:2px solid var(--line);padding:8px 14px} }
/* sign up and level up (was Where to Buy): set aside from the equipment list in
   a dashed box on a faint blue tint -- on a drawing a dashed line reads as
   "not part of the build" (Chris, 2026-10-08, option A of three). One centered button, outlined in
   the UI blue on white with an arrow for the new tab -- the build's own actions
   are solid, so this reads as an opt-in rather than the next step. The note is
   body ink, a touch larger than a caption, so the invitation is read. Plain
   outbound link; the PDF gets the address spelled out, because a printed
   button goes nowhere. */
/* the guide offer, its own block between sections (lib/sheet.py render) */
.offer{padding:24px;border:3px solid var(--line);border-top:0;border-bottom-color:var(--brand);background:var(--sheet)}
@media (max-width:640px){ .offer{padding:18px} }
.offer .levelup{margin:0}
.levelup{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:30px 0 4px;padding:22px 24px;text-align:center;
  border:2px dashed var(--levelup-edge);background:var(--levelup-bg);border-radius:6px}
/* the question the guide answers, over its button (Chris, 2026-10-09) */
.levelup-h{margin:0;font-family:var(--cond);font-weight:700;font-size:21px;
  line-height:1.2;color:var(--ink);text-wrap:balance}
.levelup-note{margin:0;max-width:60ch;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink)}
.levelup-btn{display:inline-block;font-family:var(--cond);font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  background:var(--panel);color:var(--accent);border:2px solid var(--accent);
  text-decoration:none;padding:10px 22px;border-radius:4px}
.levelup-btn span{letter-spacing:0;margin-left:2px}
.levelup-btn:hover{background:var(--fill-accent);border-color:var(--fill-accent);color:#fff}
.levelup-btn:focus-visible{outline:3px solid var(--line);outline-offset:2px}
@media print{
  .levelup{background:none}
  .levelup-btn{background:none;color:var(--ink);border:2px solid var(--line);padding:8px 14px}
  .levelup-btn span{display:none}
  .levelup-btn::after{content:" \2014  " attr(data-print);text-transform:none;letter-spacing:0;font-weight:400}
}

/* internal reference, linked under the mark; hidden in print -- a customer PDF
   should not carry a link to our own documentation */
.tb-doclink{display:block;margin-top:7px;text-align:right;
  font-family:var(--cond);font-weight:700;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand-ink);text-decoration:none}
.tb-doclink:hover{text-decoration:underline}
@media print{ .tb-doclink{display:none} }

/* ---- editable channel names ----
   The affordance has to be visible without being loud: the cell looks like a
   cell until you approach it, then it looks like a field. */
td.slot{cursor:text;border-bottom:1px solid var(--edge);
  width:1%;min-width:3.5em;white-space:nowrap}
td.slot:hover{background:var(--legA-soft);box-shadow:inset 0 -1px 0 var(--legA)}
td.slot:focus{outline:none;background:var(--panel);
  box-shadow:inset 0 0 0 2px var(--accent)}
/* The edit prompt: quiet, on one row per table, and never on paper. */
td.cue{white-space:nowrap;padding-left:14px;text-align:left}
.slot-cue{font-family:var(--cond);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.75}
tbody tr:hover .slot-cue{opacity:1;color:var(--legB)}
/* Said once above the tables, since the per-row cue alone went unnoticed */
/* .sec-body > p caps paragraphs at 68ch; this callout spans the tables
   (Chris, 2026-10-20), and sits clear of the first one */
.sec-body > p.rename-hint{max-width:none;margin:18px 0 16px}
.rename-hint{margin:18px 0 16px;padding:9px 14px;font-size:14px;max-width:none;
  background:var(--levelup-bg);border-left:4px solid var(--fill-accent)}
.rename-hint .rh-ic{color:var(--accent);font-size:15px}
.rename-hint .rh-k{font-family:var(--mono);font-size:12.5px;padding:0 4px;
  border-bottom:1px dashed var(--accent);white-space:nowrap}
/* the plan's own contents, screen only (lib/sheet.py render) */
.jump{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:10px 28px;
  border-bottom:1px solid var(--edge);font-family:var(--cond);font-weight:700;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase}
.jump-t{color:var(--muted)}
.jump a{color:var(--accent);text-decoration:none}
.jump a:hover{text-decoration:underline}
@media (max-width:640px){ .jump{padding:8px 16px} }
@media print{ .jump{display:none} }
/* Nothing on a printed plan should suggest it is still editable. */
@media print{
  td.slot:hover,td.slot:focus{background:none;box-shadow:none}
  /* Nothing that only makes sense on screen goes on the printed plan. */
  .no-print,td.cue{display:none}
}

/* A subheading for the figure it sits above. It used to live inside the SVG at
   10px, which made the chart's own title read as part of the drawing. */
.fig-head{
  font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.06em;
  color:var(--brand-ink);margin:0 0 10px;
}


/* ---- phones (Chris, 2026-10-12: 60% of visitors since launch, and the
   drawings, equipment list and frequency tables ran off the side) ---------- */
@media screen and (max-width:640px){
  .sheet{padding:14px 8px 18px}
  /* HubSpot's script adds full-width markers a few pixels wider than a phone;
     nothing of ours is, so the page never scrolls sideways */
  html,body{overflow-x:clip}
  /* a drawing fits the screen, whole; a tap opens it full size (wizard.js) */
  svg.dwg{min-width:0}
  .figwrap{overflow:hidden;cursor:zoom-in;position:relative}
  .figwrap::after{content:"Tap to enlarge";position:absolute;right:8px;bottom:6px;
    font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);background:var(--panel);
    padding:2px 6px;border:1px solid var(--edge)}
  /* frequency tables: channel and frequency always on screen */
  .fp-mic table,.fp-iem table{min-width:0}
  /* the "Click or Tab to edit" prompt goes, its cell stays: removing the
     cell would leave the rows a column short of their header */
  .fp-mic td.cue,.fp-iem td.cue{padding:0;width:0}
  .fp-mic .slot-cue,.fp-iem .slot-cue{display:none}
  /* the equipment list as stacked rows: part number, item, then qty and price */
  table.eq-list{min-width:0}
  table.eq-list thead{display:none}
  table.eq-list tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;
    padding:10px 12px;border-bottom:1px solid var(--edge)}
  table.eq-list tbody td{padding:0;border:0}
  table.eq-list tr.grp{padding:7px 12px}
  table.eq-list tr.grp td{grid-column:1/-1}
  table.eq-list td.mono{grid-column:1/-1;font-size:11.5px;margin-bottom:2px}
  table.eq-list tr:not(.grp):not(.tot) > td:nth-child(2){grid-column:1/-1}
  table.eq-list tr:not(.grp):not(.tot) > td:nth-child(3){grid-column:1;margin-top:6px;
    text-align:left;color:var(--muted)}
  table.eq-list tr:not(.grp):not(.tot) > td:nth-child(3)::before{content:"Qty "}
  table.eq-list tr:not(.grp):not(.tot) > td:nth-child(4){grid-column:2;margin-top:6px;font-weight:600}
  table.eq-list tr.tot > td:nth-child(1),table.eq-list tr.tot > td:nth-child(3){display:none}
  table.eq-list tr.tot > td:nth-child(2){grid-column:1}
  table.eq-list tr.tot > td:nth-child(4){grid-column:2}
}

/* a drawing opened full size on a phone */
.dwg-view{position:fixed;inset:0;z-index:80;background:var(--panel);display:flex;flex-direction:column}
.dwg-view[hidden]{display:none}
.dwg-view-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:2px solid var(--line)}
.dwg-view-bar b{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.dwg-view-bar button{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 14px;border:2px solid var(--line);background:var(--panel);color:var(--ink)}
.dwg-view-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px}
.dwg-view-body svg.dwg{min-width:900px;width:900px;max-width:none}

/* TV channels the user chose to use for wireless -- printed too */
.tv-chose{margin:0 0 14px;padding:11px 14px;font-size:14px;max-width:none;
  background:var(--levelup-bg);border-left:4px solid var(--caution)}
.sec-body > p.tv-chose{max-width:none}

/* the threshold, explained once, the first time a scan is loaded (wizard.js thrHelp) */
.thr-help{margin:10px 0 4px;padding:10px 14px;font-size:14px;background:var(--levelup-bg);
  border-left:4px solid var(--caution)}
.thr-help ul{margin:6px 0;padding-left:20px}
.thr-help li{margin:2px 0}
.thr-ok{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--edge);color:var(--accent);padding:3px 10px;cursor:pointer;margin-left:6px}
.thr-ok:hover{border-color:var(--accent)}
@media print{ .thr-help{display:none} }