/* Customer BroadbandHub. BroadbandHub's own palette (the same values as Forge's css/broadband.css), as tokens. */
/* Inter (SIL Open Font License, fonts/Inter-OFL.txt), served from this site: Forge's pages load it from Google */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Three looks, picked in the account menu (Appearance) and kept per browser (js/theme.js sets <html data-theme>):
   BroadbandHub's own navy (the default), Forge's dark, and light. Every page colour comes from these tokens. */
:root{
  --bb-bg:rgb(12,18,29);--bb-surface:rgb(17,24,39);--bb-raise:rgb(24,33,51);--bb-border:rgb(31,41,55);
  --bb-text:rgb(229,231,235);--bb-muted:rgb(156,163,175);--bb-bright:rgb(249,250,251);--bb-link:rgb(59,130,246);
  --bb-link-soft:rgba(59,130,246,.18);--bb-red:rgb(239,68,68);--bb-red-soft:rgba(239,68,68,.15);
  --bb-green:rgb(34,197,94);--bb-green-soft:rgba(34,197,94,.15);--bb-amber:rgb(245,158,11);--bb-amber-soft:rgba(245,158,11,.15);
  --bb-yellow-t:rgb(251,191,36);--bb-yellow-t2:rgb(250,204,21);   /* Crown Castle pill, FRN Pending */
  --bb-purple:rgb(168,85,247);
  --bb-blue-t:rgb(96,165,250);--bb-green-t:rgb(74,222,128);--bb-green-t2:rgb(134,239,172);--bb-red-t:rgb(248,113,113);
  --bb-orange-t:rgb(251,146,60);--bb-teal-t:rgb(94,234,212);--bb-slate:rgb(148,163,184);--bb-slate2:rgb(100,116,139);
  --bb-overlay:rgba(17,24,39,.94);--bb-scheme:dark;
  --bb-r:8px;
  /* navigation type (Darin, 2026-10-16): the map's rail and panel labels (css/map.css takes --fm-mono from here), used for
     every piece of navigation on the site: the bar's pages, the program switch, the account menu, tabs, segments and
     section nav. One definition: the .navtype rule near the end of this file. */
  --bb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bb-nav-font:400 10.5px/20px var(--bb-mono);--bb-nav-track:.08em;  /* items (the rail's buttons): links, tabs, menu items */
  --bb-nav-head-track:.13em;                                          /* section labels over a group of nav links */
  /* the top bar is "elsewhere in BroadbandHub" (Darin, 10/16/2026): a darker header band with a solid rule under it, set
     apart from the record band (.recband, "inside this record") that sticks just under it. --bbh-bar-h: the bar's height. */
  --bb-bar-bg:rgb(5,9,16);--bb-bar-rule:rgb(55,65,81);--bbh-bar-h:60px;
  color-scheme:dark;
}
:root[data-theme="dark"]{
  --bb-bg:#131210;--bb-surface:#1e1c19;--bb-raise:#2a2723;--bb-border:#3a3631;
  --bb-text:#e8e0d0;--bb-muted:#aaa397;--bb-bright:#f5efe4;--bb-link:#6ea8fe;--bb-link-soft:rgba(110,168,254,.16);
  --bb-overlay:rgba(30,28,25,.95);--bb-slate:#a39b8f;--bb-slate2:#8d877d;
  --bb-bar-bg:#0a0908;--bb-bar-rule:#4d483f;
}
:root[data-theme="light"]{
  --bb-bg:#ffffff;--bb-surface:#f6f7f9;--bb-raise:#eceff3;--bb-border:#dfe3e8;
  --bb-text:#1f2937;--bb-muted:#5b6472;--bb-bright:#0f172a;--bb-link:#2563eb;--bb-link-soft:rgba(37,99,235,.12);
  --bb-red:#dc2626;--bb-red-soft:rgba(220,38,38,.10);--bb-green:#16a34a;--bb-green-soft:rgba(22,163,74,.12);
  --bb-amber:#b45309;--bb-amber-soft:rgba(180,83,9,.12);--bb-purple:#7c3aed;
  --bb-yellow-t:#854d0e;--bb-yellow-t2:#854d0e;   /* readable yellow text on white (6.4:1) */
  --bb-blue-t:#1d4ed8;--bb-green-t:#15803d;--bb-green-t2:#166534;--bb-red-t:#b91c1c;--bb-orange-t:#c2410c;
  --bb-teal-t:#0f766e;--bb-slate:#64748b;--bb-slate2:#475569;--bb-overlay:rgba(255,255,255,.97);--bb-scheme:light;
  --bb-bar-bg:#e8ebf0;--bb-bar-rule:#a9b1bc;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
/* a page brought back with Back stays hidden until the session is checked again (js/bbh.js recheck) */
html.bbh-recheck body{visibility:hidden}
body{background:var(--bb-bg);color:var(--bb-text);font:16px/24px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--bb-link)}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* the top bar (Mason, 2026-10-15, layout A): one bar on every signed-in page. The BroadbandHub name, the program
   switch, the pages, one Search box (it also takes FRNs) and the account menu under your initials. bbh.js topBar adds
   the name and the menu to the page's own bar (#bb .bar, class bbh-bar); the admin page has no bar of its own, so its
   empty <header id="top"> becomes one. Every colour comes from the theme tokens, so all three looks follow. */
#bb .bar.bbh-bar,#top.bbh-bar{height:var(--bbh-bar-h);display:flex;align-items:center;gap:14px;padding:0 24px;background:var(--bb-bar-bg);
  border-bottom:1px solid var(--bb-bar-rule);position:sticky;top:0;z-index:40;font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.bbh-brand{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none;color:var(--bb-bright);margin-right:2px}
/* the broadbandhub.us logo (img/bbh-logo.png, 547 x 72, white on transparent): a mask filled with the look's brightest text
   colour, so it is white on BroadbandHub / Dark and near-black on Light */
.bbh-logo{display:block;height:24px;aspect-ratio:547/72;background:var(--bb-bright);
  -webkit-mask:url(/img/bbh-logo.png) no-repeat center/contain;mask:url(/img/bbh-logo.png) no-repeat center/contain}
#bb .bar.bbh-bar .prog{height:30px;padding:0 10px;border:1px solid var(--bb-border);border-radius:8px;background:var(--bb-surface);
  font-size:13px;font-weight:600;gap:6px}
#bb .bar.bbh-bar .sep{height:22px;flex:none}
#bb .bar.bbh-bar nav,#top.bbh-bar nav{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#bb .bar.bbh-bar nav::-webkit-scrollbar,#top.bbh-bar nav::-webkit-scrollbar{display:none}
#bb .bar.bbh-bar nav a,#top.bbh-bar nav a{color:var(--bb-muted);padding:5px 9px;   /* type: the .navtype rule (end of file); a step quieter than the record's tabs */
  border-radius:999px;text-decoration:none;white-space:nowrap;flex:none}
#bb .bar.bbh-bar nav a:hover,#top.bbh-bar nav a:hover,#bb .bar.bbh-bar nav a:focus-visible,#top.bbh-bar nav a:focus-visible{background:var(--bb-surface);color:var(--bb-text)}
#bb .bar.bbh-bar nav a.on,#top.bbh-bar nav a.on{background:var(--bb-surface);color:var(--bb-bright)}
#bb .bar.bbh-bar .find{margin-left:auto;flex:0 1 300px;width:auto;min-width:170px;height:34px;padding:0 10px;border-radius:9px}
#bb .bar.bbh-bar .find.frn{display:none}
/* the pages scroll sideways when the window is too narrow for all of them; a fade at the edge shows there's more */
#bb .bar.bbh-bar nav.clip,#top.bbh-bar nav.clip{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
#bb .bar.bbh-bar nav.clip-l,#top.bbh-bar nav.clip-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
#bb .bar.bbh-bar nav.clip-l:not(.clip),#top.bbh-bar nav.clip-l:not(.clip){-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);
  mask-image:linear-gradient(to right,transparent,#000 36px)}
@media (max-width:1360px){#bb .bar.bbh-bar .find{flex-basis:220px}}
#top.bbh-bar .bbh-grow{flex:1}
#bb .toc{top:76px}
/* Help and how-tos (Darin's ?, #527), just left of your initials */
.bbh-help{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--bb-border);background:var(--bb-surface);
  color:var(--bb-muted);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;text-decoration:none}
.bbh-help:hover,.bbh-help.on,.bbh-help:focus-visible{color:var(--bb-bright);border-color:var(--bb-muted);outline:none}
#top.bbh-bar .bbh-grow + .bbh-help{margin-left:0}
/* the account menu under your initials */
.bbh-user{position:relative;flex:none;display:flex;align-items:center}
.bbh-user .user-btn{display:flex;align-items:center;gap:4px;padding:2px;border:0;border-radius:999px;background:none;cursor:pointer}
.bbh-user .user-btn:focus-visible{outline:2px solid var(--bb-link);outline-offset:2px}
.bbh-user .avatar{width:30px;height:30px;border-radius:50%;background:#d9305d;color:#fff;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.bbh-user .chev{font-size:10px;color:var(--bb-muted);transition:transform .2s}
.bbh-user.open .chev{transform:rotate(180deg)}
.bbh-user .fmenu{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:1002;width:272px;padding:6px;
  background:var(--bb-surface);border:1px solid var(--bb-border);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  font-size:13px;line-height:18px}
.bbh-user.open .fmenu{display:block}
/* name, e-mail and org shown in full: long ones wrap (an e-mail breaks anywhere) instead of being cut off */
.bbh-user .pm-head{display:flex;align-items:flex-start;gap:10px;padding:8px 10px}
.bbh-user .pm-head .avatar{flex:none}
.bbh-user .pm-head .pm-who{min-width:0;flex:1}
.bbh-user .pm-head .nm{font-weight:600;color:var(--bb-bright);overflow-wrap:anywhere}
.bbh-user .pm-head .rl{font-size:11px;color:var(--bb-muted);overflow-wrap:anywhere}
.bbh-user .pm-head .org{margin-top:2px;font-size:11px;color:var(--bb-muted);overflow-wrap:anywhere}
.bbh-user .fmenu-sep{height:1px;background:var(--bb-border);margin:5px 4px}
.bbh-user .fmenu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:13px;
  font-weight:500;color:var(--bb-text);text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap}
.bbh-user .fmenu-item:hover,.bbh-user .fmenu-item:focus-visible{background:var(--bb-raise);outline:none}
.bbh-user .fmenu-item.active{color:var(--bb-link);background:var(--bb-link-soft)}
.bbh-user .fmenu-item .ic{width:16px;height:16px;color:var(--bb-muted);flex:none;display:inline-flex;align-items:center;justify-content:center}
.bbh-user .fmenu-item .ic svg{width:15px;height:15px}
.bbh-user .fmenu-item.active .ic{color:var(--bb-link)}
/* an OTG admin viewing the site as an org (bbh.js viewingBar), right under the bar */
.viewing-bar{display:flex;align-items:center;gap:12px;padding:8px 24px;background:rgba(245,158,11,.14);border-bottom:1px solid rgba(245,158,11,.45);
  color:#fde68a;font:13px/1.4 Inter,"Helvetica Neue",Arial,sans-serif}
.viewing-bar b{color:#fff}
.viewing-bar .btn{margin-left:auto;flex:none}

body:not(.bb) .wrap{max-width:1180px;margin:0 auto;padding:32px 24px 64px}
body:not(.bb) h1{margin:0 0 4px;font-size:24px;line-height:32px;color:var(--bb-bright)}
body:not(.bb) h2{margin:32px 0 12px;font-size:18px;line-height:28px;color:var(--bb-bright)}
body:not(.bb) .sub{margin:0;color:var(--bb-muted)}
.muted{color:var(--bb-muted)}
.small{font-size:13px;line-height:20px}

/* buttons and inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--bb-border);border-radius:6px;background:var(--bb-raise);color:var(--bb-text);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--bb-muted)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--bb-link);border-color:var(--bb-link);color:var(--bb-bright)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{height:28px;padding:0 10px;font-size:13px}
.btn.danger{color:var(--bb-red)}
.btn.link{border:0;background:transparent;color:var(--bb-link);padding:0 4px}
body:not(.bb) input[type=text],input[type=email],input[type=search],select{height:36px;padding:0 10px;border:1px solid var(--bb-border);border-radius:6px;background:var(--bb-bg);color:var(--bb-text);font-size:14px;width:100%}
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--bb-link);outline-offset:1px}
body:not(.bb) label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--bb-muted)}
body:not(.bb) label.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--bb-text);cursor:pointer}
body:not(.bb) .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
body:not(.bb) .row > .grow{flex:1;min-width:180px}

/* cards, tables, pills */
body:not(.bb) .card{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);padding:20px}
body:not(.bb) .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:24px}
body:not(.bb) .tile{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);padding:16px}
body:not(.bb) .tile h3{margin:0 0 4px;font-size:16px;color:var(--bb-bright)}
body:not(.bb) .table-wrap{overflow-x:auto;border:1px solid var(--bb-border);border-radius:var(--bb-r)}
body:not(.bb) table{width:100%;border-collapse:collapse;font-size:14px}
body:not(.bb) th{text-align:left;font-weight:600;color:var(--bb-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--bb-border);background:var(--bb-surface);white-space:nowrap}
body:not(.bb) td{padding:10px 12px;border-bottom:1px solid var(--bb-border);vertical-align:top}
body:not(.bb) tr:last-child td{border-bottom:0}
body:not(.bb) td.num{font-variant-numeric:tabular-nums;text-align:right}
body:not(.bb) td.actions{white-space:nowrap;text-align:right}
body:not(.bb) .pill{display:inline-block;padding:0 8px;border-radius:9999px;font-size:12px;line-height:20px;font-weight:600;background:var(--bb-raise);color:var(--bb-muted);margin:0 4px 2px 0}
body:not(.bb) .pill.on{background:var(--bb-green-soft);color:var(--bb-green)}
body:not(.bb) .pill.off{background:var(--bb-red-soft);color:var(--bb-red)}
body:not(.bb) .pill.blue{background:var(--bb-link-soft);color:var(--bb-link)}
body:not(.bb) .pill.amber{background:var(--bb-amber-soft);color:var(--bb-amber)}

body:not(.bb) .note{margin-top:12px;padding:10px 12px;border-radius:6px;font-size:14px;background:var(--bb-raise)}
body:not(.bb) .note.err{background:var(--bb-red-soft);color:var(--bb-red)}
body:not(.bb) .note.ok{background:var(--bb-green-soft);color:var(--bb-green)}

/* sign-in */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px}
.signin .card{width:100%;max-width:400px;padding:28px}
.signin .bbh-brand{margin-bottom:24px}
.signin .bbh-logo{height:28px}
.signin form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.code-input{letter-spacing:.4em;font-size:22px!important;height:48px!important;text-align:center;font-variant-numeric:tabular-nums}

/* admin editor */
body:not(.bb) .editor{margin-top:12px;display:flex;flex-direction:column;gap:14px}
body:not(.bb) .checks{display:flex;flex-wrap:wrap;gap:8px 18px}
body:not(.bb) .split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body:not(.bb) .tabs{display:flex;gap:4px;border-bottom:1px solid var(--bb-border);margin-top:24px}
body:not(.bb) .tabs button{border:0;background:transparent;color:var(--bb-muted);font-size:15px;font-weight:500;padding:8px 12px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer}
body:not(.bb) .tabs button[aria-selected=true]{color:var(--bb-bright);border-bottom-color:var(--bb-link)}

@media (max-width:720px){
  .wrap{padding:24px 16px 48px}
  .split{grid-template-columns:1fr}
}

#member-editor,#org-editor{margin-top:16px}

/* pages with BroadbandHub's list / record look (body.bb, css/broadband.css) */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.bb{display:flex;flex-direction:column;min-height:100vh}
body:not(.bb) a.tile.link{display:block;color:inherit;text-decoration:none}
body:not(.bb) a.tile.link:hover{border-color:var(--bb-link)}

/* "Powered by OTG Forge" at the very bottom of every signed-in page (js/bbh.js poweredBy) */
.bbh-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-top:1px solid var(--bb-border);
  color:var(--bb-muted);font-size:12px;line-height:16px;letter-spacing:.02em;background:var(--bb-bg)}
.bbh-foot .otg{display:inline-block;width:31px;height:18px;background:currentColor;
  -webkit-mask:url(/img/otg-logo.png) center/contain no-repeat;mask:url(/img/otg-logo.png) center/contain no-repeat}
.bbh-foot .forge{font-size:11px;font-weight:800;letter-spacing:.18em;margin-left:-2px}

/* "How to use this page" (js/bbh.js howTo): pinned bottom-right, clear of the "Powered by" line (which gets room under it
   when the page is scrolled to the end); on the map it is the top of the zoom-button stack */
.bbh-howto{position:fixed;right:16px;bottom:48px;z-index:40;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px solid var(--bb-border);border-radius:15px;background:var(--bb-surface);color:var(--bb-muted);font-size:12px;line-height:16px;
  font-weight:500;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px color-mix(in srgb,var(--bb-bg) 70%,transparent)}
.bbh-howto .ic{display:inline-flex;width:14px;height:14px}
.bbh-howto .ic svg{width:14px;height:14px}
.bbh-howto:hover{color:var(--bb-text);border-color:var(--bb-link)}
.bbh-howto:focus-visible{outline:2px solid var(--bb-link);outline-offset:2px;color:var(--bb-text)}
body.bbh-howto-on .bbh-foot{margin-top:48px}
#fmap .bbh-howto-ctrl{background:none;border:0;box-shadow:none}
.bbh-howto.in-map{position:static;box-shadow:none}
@media (max-width:600px){.bbh-howto{right:12px;height:28px;padding:0 10px}}
@media print{.bbh-howto{display:none}}

/* light look */
:root[data-theme="light"] .viewing-bar{color:#92400e;background:#fef3c7;border-bottom-color:#f59e0b}
:root[data-theme="light"] .viewing-bar b{color:#78350f}

/* Appearance in the account menu (Forge's theme switch, with BroadbandHub's own look in the middle) */
.bbh-user .theme-row{display:flex;align-items:center;gap:9px;padding:5px 10px}
.bbh-user .theme-row .tl{font-size:13px;font-weight:500;flex:1;color:inherit}
.bbh-user .theme-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--bb-border);border-radius:999px}
.bbh-user .theme-seg button{height:22px;min-width:26px;padding:0 7px;border:0;background:none;border-radius:999px;cursor:pointer;color:var(--bb-muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.bbh-user .theme-seg button svg{width:13px;height:13px}
.bbh-user .theme-seg button.on{background:var(--bb-raise);color:var(--bb-link)}
/* the daily e-mail switch under Appearance (fiber orgs) */
.bbh-user .digest-row{cursor:pointer}
.bbh-user .digest-box{width:16px;height:16px;margin:0;accent-color:var(--bb-link);cursor:pointer}
.bbh-user .digest-hint{padding:0 10px 6px;font-size:11px;line-height:15px;color:var(--bb-muted);white-space:normal}

/* phones: the bar wraps into three rows: the name, program and your initials; Search across the width; then the pages,
   scrolling sideways (these rules outrank css/broadband.css, which hides Search on phones) */
@media (max-width:760px){
  #bb .bar.bbh-bar,#top.bbh-bar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 16px;overflow:visible;position:static}
  #bb .bar.bbh-bar .sep,#top.bbh-bar .bbh-grow{display:none}
  .bbh-brand{order:1} .bbh-logo{height:20px} #bb .bar.bbh-bar .prog{order:2} .bbh-help{order:3;margin-left:auto} .bbh-user{order:3}
  #bb .bar.bbh-bar .find,#bb .bar.bbh-bar .find:not(.frn){display:flex;order:4;flex:1 1 100%;width:100%;margin-left:0}
  #bb .bar.bbh-bar nav,#top.bbh-bar nav{order:5;flex:1 1 100%;margin:0 -16px;padding:0 16px}
  .bbh-user .fmenu{width:min(300px,calc(100vw - 32px))}
  .viewing-bar{padding:8px 16px;flex-wrap:wrap}
}

/* admin → Usage & health: the headline numbers */
body:not(.bb) .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
body:not(.bb) .kpi{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
body:not(.bb) .kpi b{font-size:24px;line-height:30px;color:var(--bb-bright);font-variant-numeric:tabular-nums}
body:not(.bb) .kpi span{font-size:12px;color:var(--bb-muted)}
body:not(.bb) td.num,body:not(.bb) th.num{text-align:right;font-variant-numeric:tabular-nums}
body:not(.bb) #tab-health .table-wrap + .table-wrap{margin-top:12px}
body:not(.bb) .hint{color:var(--bb-muted);font-size:13px;margin:8px 0}

/* help (Darin, 2026-10-15): Help and how-tos in the account menu (js/bbh.js topBar), the folded "New user best practices"
   panel (BBH.tips: Dashboard and help.html), the guides and the feedback form on help.html, and the admin's messages */
.bbh-tips{margin:14px 0 4px;border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);font-size:13px;line-height:20px}
.bbh-tips summary{cursor:pointer;padding:8px 12px;color:var(--bb-text);font-weight:600}
.bbh-tips ul{margin:0;padding:0 16px 10px 32px;color:var(--bb-muted)}
.bbh-tips li{margin:2px 0}
.bbh-tips b{color:var(--bb-text);font-weight:600}
.bbh-tips a,#bb .help a{color:var(--bb-link)}
#bb .help{max-width:980px}
/* the "/" in the search box is a keyboard hint (Press / to search), not a button; a click focuses the box */
#bb .find kbd{cursor:text;user-select:none}
/* the Search's consultants and service providers each sit under a plain heading (sentence case: caps are for navigation) */
#bb .find-group{margin:6px 0 2px;padding:8px 8px 2px;border-top:1px solid var(--bb-border);font:600 12px Inter,sans-serif;color:var(--bb-muted)}
#bb .find-pop .find-group:first-child{margin-top:0;border-top:0}
/* a long firm or provider name wraps instead of hiding its CRN / SPIN */
#bb .find-item[data-kind^="consultant"] .find-label,#bb .find-item[data-kind="provider"] .find-label{white-space:normal}
#bb .help kbd{padding:0 5px;border:1px solid var(--bb-border);border-radius:4px;font:inherit;font-size:12px;background:var(--bb-raise)}
#bb .help-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px;margin:20px 0 24px}
#bb .help-toc h2{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bb-muted);font-weight:600}
#bb .help-toc a{display:block;padding:2px 0;font-size:13px;text-decoration:none}
#bb .help-toc a:hover{text-decoration:underline}
#bb .guide{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);margin:0 0 10px;scroll-margin-top:70px}
#bb .guide summary{cursor:pointer;padding:12px 16px;font-size:15px;font-weight:600;color:var(--bb-text)}
#bb .guide[open] summary{border-bottom:1px solid var(--bb-border)}
#bb .guide dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:0;padding:14px 16px;font-size:14px;line-height:22px}
#bb .guide dt{color:var(--bb-muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
#bb .guide dd{margin:0;color:var(--bb-text)}
#bb .guide dd + dd{grid-column:2}
#bb .guide ol,#bb .guide ul{margin:0;padding-left:20px}
#bb .guide li{margin:2px 0}
#bb .guide .tagdefs{list-style:none;padding:0}
#bb .guide .tagdefs li{margin:0 0 8px}
#bb .ask{margin-top:28px;padding:16px;border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);scroll-margin-top:70px}
#bb .ask h2{margin:0 0 4px;font-size:18px;line-height:28px;color:var(--bb-text)}
#bb .ask-kind{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 10px;padding:0;border:0;font-size:14px}
#bb .ask-kind label{display:flex;align-items:center;gap:6px;cursor:pointer}
#bb .ask textarea{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--bb-border);border-radius:6px;
  background:var(--bb-bg);color:var(--bb-text);font:inherit;font-size:14px;line-height:22px;resize:vertical}
#bb .ask textarea:focus{outline:2px solid var(--bb-link);outline-offset:1px}
#bb .ask-foot{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12px;color:var(--bb-muted)}
#bb .ask-n{margin-left:auto}
#bb .ask-msg{margin:8px 0 0;font-size:13px;min-height:20px;color:var(--bb-muted)}
#bb .ask-msg.ok{color:var(--bb-green)}
#bb .ask-msg.err{color:var(--bb-red)}
@media (max-width:640px){
  #bb .guide dl{grid-template-columns:1fr;gap:2px}
  #bb .guide dd{margin-bottom:8px}
  #bb .guide dd + dd{grid-column:1}
}
body:not(.bb) td.fb-text{white-space:pre-wrap;min-width:220px}

/* Admin → Usage & health → Daily e-mail: the preview (the e-mail itself is always light) */
.dg-frame{display:block;width:100%;height:760px;margin-top:12px;border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-bg)}

/* admin → Usage & health: a long table's "Show all (N)" / "Show fewer" (js/admin.js table) */
body:not(.bb) .more-row{padding:8px 12px;border-top:1px solid var(--bb-border)}
body:not(.bb) .linkish{background:none;border:0;padding:0;color:var(--bb-link);font-size:13px;cursor:pointer}
body:not(.bb) .linkish:hover{text-decoration:underline}
body:not(.bb) tr[hidden]{display:none}

/* My dashboard (my.html, js/page-my.js; Darin, 2026-10-15): the admin KPI tiles' look, clickable into the lists; panels
   of short tables; a by-state heat list (a cell's wash deepens with its share of the column's largest value); and, for
   flagged executives only, OTG's sales indicators */
#bb .my{max-width:1320px}
#bb .my h2{margin:0;font-size:16px;line-height:24px;font-weight:700;color:var(--bb-text)}
#bb .my h3{margin:14px 0 6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-muted)}
#bb .my h3:first-child{margin-top:0}
#bb .my-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
#bb .my-kpi{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-surface);padding:12px 14px;display:flex;
  flex-direction:column;gap:2px;color:inherit;text-decoration:none;min-width:0}
#bb a.my-kpi:hover,#bb a.my-kpi:focus-visible{border-color:var(--bb-link)}
#bb .my-kpi b{font-size:24px;line-height:30px;color:var(--bb-bright);font-variant-numeric:tabular-nums;font-weight:700}
#bb .my-kpi .k{font-size:13px;line-height:18px;color:var(--bb-text);font-weight:600}
#bb .my-kpi .d{font-size:12px;line-height:16px;color:var(--bb-muted)}
#bb .my-kpi.hot{box-shadow:inset 3px 0 0 var(--bb-green)}
#bb .my-panel{border:1px solid var(--bb-border);border-radius:var(--bb-r);background:var(--bb-bg);padding:14px 16px;margin:0 0 16px;min-width:0}
#bb .my-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
#bb .my-ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
#bb .my-more{margin-left:auto;font-size:13px;color:var(--bb-link)}
#bb .my-note{margin:0 0 10px;font-size:13px;line-height:20px;color:var(--bb-muted)}
#bb .my-ph .my-note{margin:0}
#bb .my td.n,#bb .my th.n{text-align:right;font-variant-numeric:tabular-nums}
#bb .my td.wrap-ok{white-space:normal;min-width:200px}
#bb .my td.empty{color:var(--bb-muted);white-space:normal}
#bb .my-heat th{cursor:pointer;user-select:none}
#bb .my-heat th[aria-sort]{color:var(--bb-text)}
#bb .my-heat td.n a{color:inherit;text-decoration:none}
#bb .my-heat td.h1{background:color-mix(in srgb,var(--bb-link) 10%,transparent)}
#bb .my-heat td.h2{background:color-mix(in srgb,var(--bb-link) 20%,transparent)}
#bb .my-heat td.h3{background:color-mix(in srgb,var(--bb-link) 32%,transparent)}
#bb .my-heat td.h4{background:color-mix(in srgb,var(--bb-link) 46%,transparent);color:var(--bb-bright)}
#bb .my-heat tfoot td{font-weight:700;border-top:1px solid var(--bb-border);background:var(--bb-surface)}
#bb .my-exec{margin:8px 0 16px;padding:16px;border:1px solid var(--bb-amber);border-radius:var(--bb-r);background:var(--bb-surface)}
#bb .my-exec .my-panel{background:var(--bb-bg)}
#bb .my-badge{font-size:12px;font-weight:600;line-height:20px;padding:0 8px;border-radius:9999px;color:var(--bb-amber);background:var(--bb-amber-soft)}
#bb .my .asof{margin:8px 0 0;font-size:12px;color:var(--bb-muted)}
/* the exec section's tabs (Sales indicators · ERY Tracker) and the read-only ERY Tracker (bbh/ery_ro.js) */
#bb .my-tabs{margin:4px 0 14px}
#bb #exec-ery{min-width:0}
#bb #exec-ery .ery{margin-top:0;min-width:0;max-width:100%}
#bb .ery-ro{font-size:12px;font-weight:600;line-height:22px;padding:0 10px;border-radius:9999px;color:var(--bb-amber);background:var(--bb-amber-soft);white-space:nowrap}
#bb .ery-asof{color:var(--bb-muted);font-size:12px}
#bb .ery-t td{cursor:default}
@media (max-width:900px){#bb .my-two{grid-template-columns:1fr}}
@media (max-width:640px){#bb .wrap.my{padding:16px}#bb .my-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #bb .my-exec{padding:12px}#bb .ery-find{flex:1 1 100%}#bb .ery-find input{width:100%}#bb .ery-sp{display:none}}

/* navigation type (Darin, 2026-10-16): the map's rail / panel label style (css/map.css .fm-rail button, .fm-ptitle,
   .msec) on all of the site's navigation, so the style means "this takes you somewhere". Navigation only: titles,
   tables, body copy, action buttons, form fields and data keep Inter. The selectors outrank css/broadband.css (which
   scripts/port_pages.py writes, so it isn't edited here); colours, current-page / selected marks and hover stay as they were. */
.navtype,
#bb .bar.bbh-bar nav a,#top.bbh-bar nav a,body.bb #bb .bar.bbh-bar .prog,body .progmenu a,
.bbh-user .fmenu-item,.bbh-user .theme-row .tl,
body.bb #bb .tabs button,body.bb #bb .tabs a,body:not(.bb) .tabs button,
body.bb #bb .dash-seg .chip,body.bb #bb .toc a,#bb .help-toc a{
  font:var(--bb-nav-font);letter-spacing:var(--bb-nav-track);text-transform:uppercase}
/* a plural after a number stays small in nav ("FORM 470s", not "470S"): js/bbh.js smallPlurals wraps the s */
.nt-w,.nt-s,#bb .bar nav a .nt-w,#bb .bar nav a .nt-s,#bb .bar nav span.nt-w,#bb .bar nav span.nt-s,#top.bbh-bar nav a .nt-s{display:inline;padding:0;margin:0;border:0;border-radius:0;
  background:none;font:inherit;letter-spacing:inherit;color:inherit;line-height:inherit;flex:none;text-transform:inherit}
.nt-s,#bb .bar nav a .nt-s,#bb .bar nav span.nt-s,#top.bbh-bar nav a .nt-s{text-transform:none}
/* section labels that head a group of nav links: the map's .msec / .fm-ptitle tracking */
.navtype-head,body.bb #bb .toc h4,#bb .help-toc h2{
  font:var(--bb-nav-font);letter-spacing:var(--bb-nav-head-track);text-transform:uppercase}
/* tabs (record pages, My 470s, the Dashboard, admin): a little more room now the type is smaller; hover and focus show */
body.bb #bb .tabs button,body.bb #bb .tabs a{padding:8px 12px}
body.bb #bb .tabs button:hover,body.bb #bb .tabs a:hover,body:not(.bb) .tabs button:hover{color:var(--bb-text)}
body.bb #bb .tabs button[aria-selected="true"],body.bb #bb .tabs a[aria-selected="true"],
body:not(.bb) .tabs button[aria-selected=true]{color:var(--bb-bright)}
body.bb #bb .tabs button:focus-visible,body.bb #bb .tabs a:focus-visible,body:not(.bb) .tabs button:focus-visible,
body.bb #bb .dash-seg .chip:focus-visible,body.bb #bb .toc a:focus-visible,#bb .help-toc a:focus-visible,body .progmenu a:focus-visible{
  outline:2px solid var(--bb-link);outline-offset:-2px;border-radius:4px}
#bb .bar.bbh-bar nav a:focus-visible,#top.bbh-bar nav a:focus-visible,body.bb #bb .bar.bbh-bar .prog:focus-visible{
  outline:2px solid var(--bb-link);outline-offset:-2px}
body.bb #bb .toc a{padding:1px 0}
#bb .help-toc a{padding:3px 0}
/* the account menu's current page (Help, Admin): the same blue, one step deeper, so the smaller label stays AA on its wash
   (link blue on the wash was 3.8:1 on BroadbandHub and 4.1:1 on Light; --bb-blue-t is 5.5 / 5.3, Dark 5.1) */
.bbh-user .fmenu-item.active,.bbh-user .fmenu-item.active .ic{color:var(--bb-blue-t)}

/* the record band (Darin, 10/16/2026): "inside this record". On every record page with tabs, js/bbh.js recordBand puts the
   record's short name ("KING CENTER CHARTER SCHOOL", "470 #270001861") in front of its tabs, in a framed band of the record's
   own surface colour. Once you scroll past the record's header it sticks just under the top bar (which is darker and quieter:
   "elsewhere in BroadbandHub"), so the record's tabs are never mistaken for the bar's lists. Under menus and popovers (z 19). */
body.bb #bb .recband{position:sticky;top:var(--bbh-bar-h);z-index:19;display:flex;align-items:stretch;min-width:0;
  margin:28px -24px 0;padding:0 24px;background:var(--bb-surface);border-top:1px solid var(--bb-border);border-bottom:1px solid var(--bb-border);
  box-shadow:0 6px 14px -12px rgba(0,0,0,.6)}
body.bb #bb .recband-name{flex:none;max-width:40%;align-self:center;margin-right:6px;padding-right:14px;border-right:1px solid var(--bb-border);
  font:var(--bb-nav-font);letter-spacing:var(--bb-nav-head-track);text-transform:uppercase;color:var(--bb-bright);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.bb #bb .recband .tabs{flex:1 1 auto;min-width:0;margin:0;border-bottom:0;overflow-x:auto;scrollbar-width:none}
body.bb #bb .recband .tabs::-webkit-scrollbar{display:none}
body.bb #bb .recband .tabs a,body.bb #bb .recband .tabs button{padding:9px 12px 7px;margin:0;border-bottom:2px solid transparent;white-space:nowrap;flex:none}
body.bb #bb .recband .tabs a[aria-selected="true"],body.bb #bb .recband .tabs button[aria-selected="true"]{color:var(--bb-bright);border-bottom-color:var(--bb-link)}
/* the record's "On this page" list and its section headings clear the bar and the stuck band */
body.bb.bbh-has-band #bb .toc{top:calc(var(--bbh-bar-h) + 56px)}
body.bb.bbh-has-band #bb .sec{scroll-margin-top:calc(var(--bbh-bar-h) + 52px)}
/* phones: the bar scrolls away (it is three rows), so the band sticks at the very top; the name is cut short and the
   tabs scroll sideways inside the band */
@media (max-width:760px){
  body.bb #bb .recband{top:0;margin:24px -16px 0;padding:0 16px}
  body.bb #bb .recband-name{max-width:42%;padding-right:10px;margin-right:2px}
  body.bb.bbh-has-band #bb .sec{scroll-margin-top:52px}
}
@media print{body.bb #bb .recband{position:static;box-shadow:none}}

/* "← Back to <record>" (js/bbh.js recordBack): on a list page, when you left a record by the top bar in the last
   30 minutes. Navigation, so it wears the nav lettering (.navtype). */
#bb .bbh-back{padding:14px 24px 0;margin-bottom:-10px}
#bb .bbh-back a{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 8px 2px 6px;margin-left:-6px;border-radius:6px;
  color:var(--bb-link);text-decoration:none;white-space:nowrap;overflow:hidden}
#bb .bbh-back a .bk-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
#bb .bbh-back a:hover{background:var(--bb-link-soft)}
#bb .bbh-back a:focus-visible{outline:2px solid var(--bb-link);outline-offset:1px}
@media (max-width:760px){#bb .bbh-back{padding:12px 16px 0}}
/* admin on a phone: a wide table scrolls inside its own box instead of pushing its column (and the page) past the
   screen edge; grid columns may shrink below their content (Darin, 10/16/2026) */
body:not(.bb) .split>*,body:not(.bb) .kpis>*{min-width:0}
body:not(.bb) .table-wrap{max-width:100%}