/* Clean frequency pane (event Monitor → Clean frequency), js/clean-freq/pane.js.
   Was a <style> written into the pane host on every mount (audit N40, batch D2).
   Hashed by scripts/build.mjs last in ensure:, after views-settings: the old
   <style> sat in the body, after every sheet in head. The pane moves this link
   to the end of head in dev for the same reason.
   Values are unchanged from the inline block. Tokens are used where the token
   holds the same value (--fs-*, --r-sm/--r-md, --s*, --warn-soft). The --cf-*
   palette is a local alias layer; mapping it onto --ok/--warn/--danger/--accent/
   --text-2/--text-muted/--border changes colours and is a separate step.
   The 560px breakpoint stays a literal. Field chrome, help-dot focus rings and
   spacing follow the kit (R22, R29) since the merge with UI audit batch 3. */

.cf-pane{--cf-green:#46c46a;--cf-amber:#e6a43a;--cf-red:#e2574f;--cf-blue:#4a78ff;
  --cf-line:#1f1f1f;--cf-line2:#2a2a3e;--cf-dim:#8a8a92;--cf-dim2:#5a5a62;--cf-chip:#16161c;
  --cf-g:var(--cf-dim);
  color:#dcdce0;font-size:var(--fs-13)}
.cf-pane .cf-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--cf-line);background:#0b0b0e}
.cf-pane .cf-ctl{display:flex;align-items:center;gap:7px}
.cf-pane .cf-ctl label{color:var(--cf-dim);font-size:var(--fs-12)}
/* Box, border and focus ring: the platform field (base.css, components.css). */
.cf-pane select,.cf-pane .cf-range input{font-size:var(--fs-12)}
.cf-pane select{min-width:140px}
.cf-pane .cf-range{display:flex;align-items:center;gap:5px}
.cf-pane .cf-range input{width:62px}
.cf-pane .cf-range .cf-unit{color:var(--cf-dim2)}
.cf-pane #cf-spot{display:none}
.cf-pane #cf-spot.show{display:inline-block}
.cf-pane .cf-imbox{display:flex;align-items:center;gap:10px;padding:5px 10px;background:#101014;border:1px solid var(--cf-line);border-radius:8px}
.cf-pane .cf-imbox .cf-k{color:var(--cf-dim2);font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em}
.cf-pane .cf-im{display:flex;align-items:center;gap:5px;color:#dcdce0;font-size:var(--fs-12);user-select:none}
.cf-pane .cf-im input{accent-color:var(--cf-blue)}

.cf-pane .cf-msg{padding:var(--s2) 14px;font-size:var(--fs-12);color:var(--cf-dim)}
.cf-pane .cf-msg.err{color:#f3a39b}
.cf-pane .cf-rangeerr{color:#f3a39b;font-size:var(--fs-11-5);margin-left:var(--s1)}
.cf-pane .cf-phonenote{padding:6px 14px;font-size:var(--fs-11-5);color:#9cc0ff;background:#0e1420;border-bottom:1px solid var(--cf-line)}
.cf-pane .cf-results{padding:14px}
.cf-pane .cf-srcline{color:var(--cf-dim);font-size:var(--fs-12);margin-bottom:var(--s3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cf-pane .cf-srcpill{background:var(--cf-chip);border:1px solid var(--cf-line);border-radius:20px;padding:3px 10px;color:#bcdcff}
.cf-pane .cf-srcpill.warn{color:#e6c987;border-color:#4a3f1e}
.cf-pane .cf-best{display:flex;gap:18px;align-items:stretch;background:linear-gradient(90deg,rgba(70,196,106,.07),transparent);border:1px solid rgba(70,196,106,.3);border-radius:12px;padding:var(--s4) 18px;margin-bottom:var(--s4)}
.cf-pane .cf-best.is-unmeasured{background:#101014;border-color:var(--cf-line2)}
.cf-pane .cf-best.is-unmeasured .cf-best-sub{color:var(--cf-dim)}
.cf-pane .cf-best.is-unmeasured .cf-use{background:#15161d;border-color:var(--cf-line2);color:#cfe0ff}
.cf-pane .cf-grade{flex:none;width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-right:1px solid var(--cf-line)}
.cf-pane .cf-grade .cf-use{width:100%;padding:6px var(--s2);font-size:var(--fs-11-5)}
.cf-pane .cf-copy-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:9px;vertical-align:middle;border-radius:var(--r-sm);background:#15161d;border:1px solid var(--cf-line2);color:#cfe0ff;cursor:pointer;flex:none}
.cf-pane .cf-copy-ic:hover{background:#1c2030;border-color:#3a4566}
.cf-pane .cf-copy-ic.copied{background:#1f7a3a;border-color:#2c9a4c;color:#dffbe7}
.cf-pane .cf-grade .lg{font-size:48px;font-weight:800;line-height:1}
.cf-pane .cf-grade .score{font-size:var(--fs-11);color:var(--cf-dim2);margin-top:3px}
.cf-pane .cf-best-main{flex:1;min-width:0}
.cf-pane .cf-best-freq{font-size:30px;font-weight:750;color:#eef0f4;font-variant-numeric:tabular-nums;line-height:1}
.cf-pane .cf-best-freq .u{font-size:var(--fs-13);color:var(--cf-dim2);font-weight:400;margin-left:5px}
.cf-pane .cf-best-sub{margin-top:5px;color:#bfe9c8;font-size:var(--fs-13)}
.cf-pane .cf-best-why{margin-top:9px;color:var(--cf-dim);font-size:var(--fs-12-5)}
.cf-pane .cf-caveats{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.cf-pane .cf-cav{font-size:var(--fs-10-5);padding:2px var(--s2);border-radius:5px;background:#1a1a20;color:#a9a9b4;border:1px solid #26262e}
.cf-pane .cf-best-act{display:flex;flex-direction:column;gap:var(--s2);justify-content:center;flex:none}
.cf-pane .cf-use{background:#1f7a3a;border:1px solid #2c9a4c;color:#dffbe7;border-radius:7px;padding:7px 14px;font-weight:650;cursor:pointer;font-size:var(--fs-12)}
.cf-pane .cf-alt .cf-aend{display:flex;align-items:center;gap:10px}
.cf-pane .cf-use.cf-use-alt{padding:var(--s1) 10px;font-size:var(--fs-11)}
.cf-pane .cf-copy{background:#15161d;border:1px solid var(--cf-line2);color:#cfe0ff;border-radius:7px;padding:6px 14px;cursor:pointer;font-size:var(--fs-12)}
.cf-pane .cf-alts-h{color:var(--cf-dim2);font-size:var(--fs-10-5);text-transform:uppercase;letter-spacing:.05em;margin:var(--s1) var(--s1) 6px}
.cf-pane .cf-alt{display:grid;grid-template-columns:40px 120px 92px 1fr auto;gap:var(--s3);align-items:center;padding:9px var(--s3);border-bottom:1px solid #141414}
.cf-pane .cf-pillg{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#0a0a0a}
/* Grade colour: the pane sets .cf-g-<tone> (helpers.js gradeTone); was a style= per card and row.
   --cf-g has a pane-level default (above) so .cf-grade .lg and .cf-pillg resolve under .cf-pane
   even before a tone class is set. */
.cf-pane .cf-g-a{--cf-g:var(--cf-green)}
.cf-pane .cf-g-b{--cf-g:#7ec46a}
.cf-pane .cf-g-c{--cf-g:var(--cf-amber)}
.cf-pane .cf-g-d{--cf-g:#e07a3a}
.cf-pane .cf-g-f{--cf-g:var(--cf-red)}
.cf-pane .cf-g-none{--cf-g:var(--cf-dim)}
.cf-pane .cf-grade .lg{color:var(--cf-g)}
.cf-pane .cf-pillg{background:var(--cf-g)}
.cf-pane .cf-alt .cf-afreq{font-size:var(--fs-16);font-weight:650;color:#eaeaf0;font-variant-numeric:tabular-nums}
.cf-pane .cf-alt .cf-afreq .u{font-size:var(--fs-10);color:var(--cf-dim2);font-weight:400;margin-left:3px}
.cf-pane .cf-alt .cf-ahr{font-variant-numeric:tabular-nums;color:#dcdce0}
.cf-pane .cf-alt .cf-ahr .u{color:var(--cf-dim2);font-size:var(--fs-10)}
.cf-pane .cf-alt .cf-awhy{color:var(--cf-dim);font-size:var(--fs-12)}
.cf-pane .cf-alt .cf-ascore{font-size:var(--fs-10);color:var(--cf-dim2)}
.cf-pane .cf-showall{display:block;margin:var(--s3) auto 2px;color:#9ab8ff;background:none;border:none;font-size:var(--fs-12);cursor:pointer}
.cf-pane .cf-click{cursor:pointer}
.cf-pane .cf-selected{outline:2px solid var(--cf-blue);outline-offset:-2px;border-radius:8px}
/* R1 legal-here axis (2×2 badge + jurisdiction header + non-dismissable disclaimer) */
.cf-pane .cf-lg{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-9-5);font-weight:800;letter-spacing:.05em;padding:2px 6px;border-radius:5px;text-transform:uppercase;white-space:nowrap}
.cf-pane .cf-grade .cf-lg{margin-top:2px}
.cf-pane .cf-alt .cf-lg{flex:none}
.cf-pane .cf-lg.ok{background:rgba(70,196,106,.16);color:#7fe0a0;border:1px solid rgba(70,196,106,.4)}
.cf-pane .cf-lg.warn{background:var(--warn-soft);color:#f5c451;border:1px solid rgba(251,191,36,.4)}
.cf-pane .cf-lg.acc{background:rgba(94,106,210,.18);color:#9aa6ff;border:1px solid rgba(94,106,210,.45)}
.cf-pane .cf-lg.bad{background:rgba(248,113,113,.18);color:#ff9b8f;border:1px solid rgba(248,113,113,.5)}
.cf-pane .cf-lg.unk{background:rgba(148,163,184,.14);color:#aab4c4;border:1px solid rgba(148,163,184,.35)}
.cf-pane .cf-legal-head{margin:2px 0 14px;padding:9px var(--s3);border:1px solid rgba(94,106,210,.28);border-radius:var(--r-md);background:rgba(94,106,210,.06)}
.cf-pane .cf-legal-axis{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-12)}
.cf-pane .cf-lg-k{font-size:var(--fs-10);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-dim2)}
.cf-pane .cf-lg-juris{font-weight:700;color:#cdd3f5;background:rgba(94,106,210,.2);padding:1px 7px;border-radius:5px}
.cf-pane .cf-lg-juris.unk{color:#f5c451;background:rgba(251,191,36,.14)}
.cf-pane .cf-lg-prov{color:var(--cf-dim);font-size:var(--fs-11-5)}
.cf-pane .cf-legal-disc{margin-top:5px;font-size:var(--fs-11);color:#c9b98a;line-height:1.35}
.cf-pane .cf-risk{margin-top:9px;display:flex;flex-direction:column;gap:var(--s1)}
.cf-pane .cf-risk-row{display:flex;gap:var(--s2);align-items:baseline;font-size:var(--fs-12)}
.cf-pane .cf-risk-k{flex:none;width:46px;color:var(--cf-dim2);text-transform:uppercase;font-size:var(--fs-10);letter-spacing:.05em}
.cf-pane .cf-risk-bad{color:#f0b49b}
.cf-pane .cf-risk-ok{color:#9fd8ad}
.cf-pane .cf-risk-nm{color:var(--cf-dim)}
.cf-pane .cf-aggr{color:#e6c987;font-size:var(--fs-11)}
.cf-pane .cf-gear{background:#141418;color:#cfe0ff;border:1px solid var(--cf-line2);border-radius:7px;padding:0 10px;cursor:pointer;font-size:var(--fs-14)}
.cf-pane .cf-gear[aria-expanded="true"]{background:#1c3a8a;border-color:#264aa6}
.cf-pane .cf-settings{margin:0 14px var(--s3);padding:var(--s3) 14px;background:#0d0d12;border:1px solid var(--cf-line2);border-radius:10px}
.cf-pane .cf-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:start;gap:var(--s3) 18px}
.cf-pane .cf-set-f{display:flex;flex-direction:column;gap:5px}
.cf-pane .cf-set-labelrow{display:flex;align-items:center;gap:6px}
.cf-pane .cf-set-labelrow>label{color:#cfcfd6;font-size:var(--fs-12);line-height:1.25}
.cf-pane .cf-set-in{display:flex;align-items:center;gap:6px}
.cf-pane .cf-set-in input{width:64px;font-size:var(--fs-12)}
@supports (field-sizing: content){ .cf-pane .cf-set-in input{field-sizing:content;width:auto;min-width:4ch;max-width:9ch} }
.cf-pane .cf-set-u{color:var(--cf-dim2);font-size:var(--fs-10)}
.cf-pane .cf-set-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#26262e;color:#aab;border:1px solid #3a3a44;font-size:var(--fs-9);font-weight:700;cursor:pointer;user-select:none;flex:none}
.cf-pane .cf-set-help:hover,.cf-pane .cf-set-help:focus{background:#1c3a8a;color:#dce6ff;border-color:#264aa6}
.cf-pane .cf-set-help:focus-visible{outline:none;box-shadow:var(--ring)}
.cf-pane .cf-set-foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.cf-pane .cf-set-note{color:var(--cf-dim2);font-size:var(--fs-11);flex:1}
.cf-pane .cf-setpill{background:var(--cf-chip);border:1px solid #3a3320;border-radius:20px;padding:3px 10px;color:#e6c987}
/* The panel EXPANDS to fit its content (the page scrolls) — no height cap or
   internal scroll on the pane, the settings popover, or the results. */
.cf-pane{display:flex;flex-direction:column}
.cf-pane .cf-im-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#26262e;color:#aab;border:1px solid #3a3a44;font-size:var(--fs-9);font-weight:700;cursor:pointer;user-select:none;flex:none;margin-left:3px}
.cf-pane .cf-im-help:hover,.cf-pane .cf-im-help:focus{background:#1c3a8a;color:#dce6ff;border-color:#264aa6}
.cf-pane .cf-im-help:focus-visible{outline:none;box-shadow:var(--ring)}
.cf-tip{position:fixed;z-index:var(--z-tooltip);max-width:300px;background:#0b0b12;color:#dcdce0;border:1px solid #2a2a3e;border-radius:8px;padding:9px 11px;font-size:var(--fs-11-5);line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none}
.cf-pane .cf-howto{margin-top:var(--s3);border-top:1px solid var(--cf-line);padding-top:10px}
.cf-pane .cf-howto>summary{cursor:pointer;color:#9ab8ff;font-size:var(--fs-12);list-style:none;user-select:none}
.cf-pane .cf-howto>summary::-webkit-details-marker{display:none}
.cf-pane .cf-howto>summary::before{content:'▸ ';color:var(--cf-dim2)}
.cf-pane .cf-howto[open]>summary::before{content:'▾ '}
.cf-pane .cf-howto-body{margin-top:var(--s2);color:#bfbfc6;font-size:var(--fs-11-5);line-height:1.55}
.cf-pane .cf-howto-body p{margin:6px 0}
.cf-pane .cf-howto-body ul{margin:6px 0;padding-left:var(--s4)}
.cf-pane .cf-howto-body li{margin:3px 0}
.cf-pane .cf-formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-11);color:#cfe0ff;background:#0e1018;border:1px solid var(--cf-line);border-radius:var(--r-sm);padding:7px 9px;overflow-x:auto}
.cf-pane .cf-howto-warn{color:#e6c987}
.cf-pane .cf-srcpill.warn{cursor:help}
@media (max-width:560px){.cf-pane .cf-set-grid{grid-template-columns:minmax(0,1fr)}}