/* ==========================================================================
   NCRC — CRA rulemaking state impact hex map
   All rules are scoped under #ncrc-hexmap so this can be pasted inline on
   ncrc.org without colliding with the Astra theme.
   ========================================================================== */

#ncrc-hexmap{
  /* Brand tokens (from the NCRC design system) */
  --nx-cyan:#2FADE3; --nx-cyan-50:#E8F7FC; --nx-cyan-600:#1F97CC;
  --nx-red:#E82E2E; --nx-black:#000; --nx-blue:#034EA0;
  --nx-n0:#FFFFFF; --nx-n50:#F6F6F7; --nx-n100:#EEEEEE; --nx-n200:#DFE0E3;
  --nx-n300:#C4C5CC; --nx-n400:#A0A2AC; --nx-n500:#818390; --nx-n600:#5F6069;
  --nx-n700:#3F4046; --nx-n800:#24252A; --nx-n900:#0D0E10;
  /* 5-bin sequential ramp, single hue, built around brand red #E82E2E */
  --nx-b1:#FDE7E7; --nx-b2:#F7B3B3; --nx-b3:#EF7373; --nx-b4:#E82E2E; --nx-b5:#96110F;
  /* Brand spec: Helvetica Neue Condensed + Extended for headlines and display
     type. See fonts/README.md for how the three families resolve. */
  --nx-display:'NCRC Condensed','Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --nx-display-ex:'NCRC Extended','NCRC Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --nx-body:'NCRC Text','Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;

  box-sizing:border-box;
  font-family:var(--nx-body);
  color:var(--nx-black);
  background:var(--nx-n0);
  font-size:16px;
  line-height:1.45;
  max-width:1200px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
#ncrc-hexmap *,#ncrc-hexmap *::before,#ncrc-hexmap *::after{box-sizing:inherit;}
#ncrc-hexmap button{font-family:inherit;}
#ncrc-hexmap [hidden]{display:none!important;}
#ncrc-hexmap :focus-visible{outline:3px solid var(--nx-cyan);outline-offset:2px;}

/* ---------- controls ---------- */
#ncrc-hexmap .nx-controls{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 20px;
  padding-bottom:12px;border-bottom:2px solid var(--nx-black);margin-bottom:14px;
}
#ncrc-hexmap .nx-ctrl{display:flex;flex-direction:column;gap:5px;min-width:0;}
#ncrc-hexmap .nx-ctrl-label{
  font-family:var(--nx-display-ex);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nx-n600);
}
#ncrc-hexmap .nx-seg{display:inline-flex;border:1.5px solid var(--nx-black);border-radius:2px;overflow:hidden;}
#ncrc-hexmap .nx-chips{display:flex;flex-wrap:wrap;gap:6px;}
#ncrc-hexmap .nx-chips button{
  appearance:none;background:var(--nx-n0);border:1.5px solid var(--nx-black);border-radius:2px;
  color:var(--nx-n900);font-weight:600;font-size:13.5px;padding:6px 11px;cursor:pointer;
  transition:background .15s ease-out,color .15s ease-out;
}
#ncrc-hexmap .nx-chips button:hover{background:var(--nx-cyan-50);}
#ncrc-hexmap .nx-chips button[aria-pressed="true"]{background:var(--nx-black);color:#fff;}
#ncrc-hexmap select.nx-select{
  font-family:inherit;font-size:14px;font-weight:600;padding:7px 8px;border:1.5px solid var(--nx-black);
  border-radius:2px;background:var(--nx-n0);color:var(--nx-n900);max-width:100%;
}
#ncrc-hexmap .nx-metric-select{display:none;}
#ncrc-hexmap.nx-narrow .nx-metric-select{display:block;}
#ncrc-hexmap.nx-narrow .nx-chips{display:none;}
#ncrc-hexmap .nx-seg button{
  appearance:none;border:0;border-right:1.5px solid var(--nx-black);background:var(--nx-n0);
  color:var(--nx-n900);font-weight:600;font-size:13.5px;padding:7px 11px;cursor:pointer;
  transition:background .15s ease-out,color .15s ease-out;
}
#ncrc-hexmap .nx-seg button:last-child{border-right:0;}
#ncrc-hexmap .nx-seg button:hover:not(:disabled):not([aria-disabled="true"]){background:var(--nx-cyan-50);}
#ncrc-hexmap .nx-seg button[aria-pressed="true"]{background:var(--nx-black);color:#fff;}
/* aria-disabled gets the same greyed, not-allowed treatment as :disabled --
   the button stays focusable so it can explain itself, but must not look
   usable. See the aria-disabled comment in hexmap.js. */
#ncrc-hexmap .nx-seg button:disabled,
#ncrc-hexmap .nx-seg button[aria-disabled="true"]{
  color:var(--nx-n400);cursor:not-allowed;background:var(--nx-n50);
}
#ncrc-hexmap .nx-seg.nx-sm button{font-size:12.5px;padding:6px 10px;}
#ncrc-hexmap .nx-spacer{flex:1 1 auto;}
#ncrc-hexmap .nx-linkbtn{
  appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;
  font-weight:600;font-size:13.5px;color:var(--nx-blue);text-decoration:underline;
  text-underline-offset:3px;
}
#ncrc-hexmap .nx-linkbtn:hover{color:var(--nx-black);}

/* ---------- stage: map + side column + drawer ---------- */
#ncrc-hexmap .nx-stage{display:flex;gap:24px;align-items:flex-start;position:relative;}
#ncrc-hexmap .nx-mapwrap{flex:1 1 auto;min-width:0;}
#ncrc-hexmap .nx-side{flex:0 0 320px;}

#ncrc-hexmap .nx-metric-title{
  font-family:var(--nx-display);font-weight:700;font-size:17px;line-height:1.15;
  margin:0 0 2px;
}
/* The subline carries the explanatory copy for the metric, so it runs to a
   couple of sentences. max-width keeps it to a readable measure instead of one
   long line across a wide embed; the narrow rule trims type and leading so the
   extra wrapping costs the map as little vertical space as possible. */
#ncrc-hexmap .nx-metric-sub{font-size:13px;color:var(--nx-n600);margin:0 0 8px;max-width:104ch;}
#ncrc-hexmap.nx-narrow .nx-metric-sub{font-size:12px;line-height:1.4;margin:0 0 6px;}

#ncrc-hexmap svg.nx-map{width:100%;max-width:720px;height:auto;display:block;overflow:visible;}
#ncrc-hexmap .nx-hex{
  stroke:var(--nx-n900);stroke-width:1;
  transition:opacity .15s ease-out,stroke-width .12s ease-out;
}
#ncrc-hexmap .nx-cell{cursor:pointer;}
#ncrc-hexmap .nx-cell:hover .nx-hex{stroke-width:2.5;}
#ncrc-hexmap .nx-cell:focus{outline:none;}
#ncrc-hexmap .nx-cell:focus-visible .nx-hex{stroke:var(--nx-cyan);stroke-width:3.5;}
#ncrc-hexmap .nx-lab{
  font-family:var(--nx-display);font-weight:700;font-size:12.5px;text-anchor:middle;
  pointer-events:none;letter-spacing:.01em;
}
#ncrc-hexmap .nx-lab.nx-on-dark{fill:#fff;}
#ncrc-hexmap .nx-lab.nx-on-light{fill:var(--nx-n900);}
#ncrc-hexmap .nx-smallbase{pointer-events:none;}
#ncrc-hexmap.nx-has-sel .nx-cell:not(.nx-sel){opacity:.2;}
#ncrc-hexmap.nx-has-sel .nx-cell:not(.nx-sel):hover{opacity:.55;}
#ncrc-hexmap .nx-cell.nx-sel .nx-hex{stroke-width:3.5;}
#ncrc-hexmap .nx-strip-label{
  font-family:var(--nx-display-ex);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--nx-n500);
}
#ncrc-hexmap .nx-strip-line{stroke:var(--nx-n300);stroke-width:1;stroke-dasharray:3 3;}

/* ---------- legend ---------- */
#ncrc-hexmap .nx-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;
  font-size:12.5px;color:var(--nx-n700);
}
#ncrc-hexmap .nx-bins{display:flex;align-items:stretch;}
#ncrc-hexmap .nx-bin{min-width:68px;text-align:center;}
#ncrc-hexmap .nx-bin i{display:block;height:12px;border:1px solid var(--nx-n900);border-right:0;}
#ncrc-hexmap .nx-bin:last-child i{border-right:1px solid var(--nx-n900);}
#ncrc-hexmap .nx-bin span{display:block;font-size:11px;color:var(--nx-n600);padding-top:3px;white-space:nowrap;}
#ncrc-hexmap .nx-keys{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;}
#ncrc-hexmap .nx-key{display:inline-flex;align-items:center;gap:6px;}
#ncrc-hexmap .nx-key i{width:13px;height:13px;border:1px solid var(--nx-n900);display:inline-block;}
#ncrc-hexmap .nx-key .nx-dotkey{
  width:13px;height:13px;border:0;position:relative;display:inline-block;
}
#ncrc-hexmap .nx-key .nx-dotkey::after{
  content:"";position:absolute;left:3px;top:4px;width:6px;height:6px;border-radius:50%;
  background:var(--nx-n0);border:1.4px solid var(--nx-n900);
}

/* ---------- side column (national) ---------- */
#ncrc-hexmap .nx-card{border:1px solid var(--nx-n200);border-radius:4px;background:var(--nx-n50);padding:14px 16px;}
#ncrc-hexmap .nx-card h3,#ncrc-hexmap .nx-drawer h3{
  font-family:var(--nx-display-ex);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 10px;color:var(--nx-n700);
}
#ncrc-hexmap .nx-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--nx-n200);}
#ncrc-hexmap .nx-stat:last-child{border-bottom:0;}
#ncrc-hexmap .nx-stat .nx-k{font-size:13px;color:var(--nx-n700);}
#ncrc-hexmap .nx-stat .nx-v{font-family:var(--nx-display);font-weight:700;font-size:19px;white-space:nowrap;}
#ncrc-hexmap .nx-hint{font-size:12.5px;color:var(--nx-n600);margin:10px 0 0;}

/* ---------- drawer ---------- */
#ncrc-hexmap .nx-drawer{
  position:absolute;top:0;right:0;width:344px;
  background:var(--nx-n0);border:1.5px solid var(--nx-black);border-radius:2px;
  box-shadow:-6px 0 24px rgba(13,14,16,.14);
  padding:16px 18px 18px;
  transform:translateX(calc(100% + 30px));opacity:0;visibility:hidden;
  transition:transform .2s ease-out,opacity .2s ease-out,visibility .2s;
  z-index:5;
}
#ncrc-hexmap.nx-has-sel .nx-drawer{transform:translateX(0);opacity:1;visibility:visible;}
#ncrc-hexmap .nx-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  border-bottom:2px solid var(--nx-black);padding-bottom:8px;margin-bottom:10px;}
#ncrc-hexmap .nx-drawer h2{
  font-family:var(--nx-display);font-weight:800;font-size:24px;line-height:1.05;margin:0;
}
#ncrc-hexmap .nx-tag{
  display:inline-block;font-family:var(--nx-display-ex);font-weight:700;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--nx-n100);color:var(--nx-n700);
  padding:2px 7px;border-radius:999px;margin-top:5px;
}
#ncrc-hexmap .nx-rank{
  font-size:12.5px;color:var(--nx-n700);background:var(--nx-cyan-50);
  border-left:3px solid var(--nx-cyan);padding:7px 9px;margin:0 0 10px;
}
#ncrc-hexmap .nx-rank b{font-family:var(--nx-display);font-size:16px;}
#ncrc-hexmap .nx-mrow{padding:7px 0;border-bottom:1px solid var(--nx-n200);}
#ncrc-hexmap .nx-mrow.nx-active{background:var(--nx-n50);
  box-shadow:-8px 0 0 var(--nx-n50),8px 0 0 var(--nx-n50);}
#ncrc-hexmap .nx-mrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
#ncrc-hexmap .nx-mrow-lab{font-size:12.5px;color:var(--nx-n700);line-height:1.3;}
#ncrc-hexmap .nx-mrow-val{font-family:var(--nx-display);font-weight:700;font-size:17px;white-space:nowrap;}
#ncrc-hexmap .nx-mrow-of{font-size:12px;color:var(--nx-n600);margin-top:1px;}
#ncrc-hexmap .nx-track{position:relative;height:7px;background:var(--nx-n100);margin-top:6px;border-radius:1px;}
#ncrc-hexmap .nx-fill{position:absolute;left:0;top:0;bottom:0;background:var(--nx-red);border-radius:1px;}
#ncrc-hexmap .nx-natmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--nx-n900);}
#ncrc-hexmap .nx-natlab{font-size:11.5px;color:var(--nx-n600);margin-top:4px;}
#ncrc-hexmap .nx-flag{font-size:11.5px;color:var(--nx-n700);margin-top:5px;
  border-left:2px solid var(--nx-n300);padding-left:7px;}
/* narrow: the panel slides open in normal flow directly under the map, so it
   works both inside an auto-height iframe and pasted inline on the page. */
#ncrc-hexmap.nx-narrow .nx-stage{flex-wrap:wrap;}
#ncrc-hexmap.nx-narrow .nx-mapwrap{flex:1 1 100%;order:1;}
#ncrc-hexmap.nx-narrow .nx-drawer{
  position:static;width:auto;flex:1 1 100%;order:2;
  transform:none;opacity:0;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;
  border-width:0;box-shadow:none;margin-top:0;
  transition:max-height .22s ease-out,opacity .18s ease-out,margin-top .22s ease-out;
}
#ncrc-hexmap.nx-narrow.nx-has-sel .nx-drawer{
  opacity:1;max-height:2400px;visibility:visible;border-width:1.5px;
  padding-top:16px;padding-bottom:18px;margin-top:16px;
}
#ncrc-hexmap.nx-narrow .nx-side{order:3;flex:1 1 100%;margin-top:16px;}

/* ---------- table view ---------- */
#ncrc-hexmap .nx-tablewrap{overflow-x:auto;border:1px solid var(--nx-n200);}
/* The 54-row table is the worst offender: unbounded it grew the document by about
   1,350px, roughly tripling the iframe. --nx-view-h is the map's own height,
   published by publishViewHeight() in hexmap.js, so switching views leaves the
   embed the same size instead of jumping. Both axes scroll here, and thead is
   already sticky, so the columns stay readable on the way down. */
#ncrc-hexmap #nx-table-view .nx-tablewrap{
  max-height:var(--nx-view-h, 520px);overflow:auto;
}
#ncrc-hexmap table{border-collapse:collapse;width:100%;font-size:13px;}
#ncrc-hexmap caption{text-align:left;font-size:12.5px;color:var(--nx-n600);padding:8px 10px;}
#ncrc-hexmap th,#ncrc-hexmap td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--nx-n200);white-space:nowrap;}
#ncrc-hexmap th:first-child,#ncrc-hexmap td:first-child{text-align:left;}
#ncrc-hexmap thead th{
  position:sticky;top:0;background:var(--nx-n900);color:#fff;font-family:var(--nx-display-ex);
  font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
}
#ncrc-hexmap thead th button{
  appearance:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;
}
#ncrc-hexmap thead th button:hover{text-decoration:underline;}
#ncrc-hexmap tbody tr:hover{background:var(--nx-cyan-50);}
#ncrc-hexmap tbody th{font-weight:600;font-family:var(--nx-body);text-transform:none;letter-spacing:0;
  position:static;background:none;color:inherit;font-size:13px;}

/* ---------- footer ---------- */
/* The credit must not move when the note expands, so the footer row is
   top-aligned. It was centred by a second .nx-foot rule further down, which
   pushed the logo down by half of whatever the note grew by. There is exactly one
   .nx-foot declaration now — keep it that way. */
#ncrc-hexmap .nx-foot{
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;justify-content:space-between;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--nx-n200);
}
#ncrc-hexmap .nx-source{font-size:12px;line-height:1.5;color:var(--nx-n600);max-width:78ch;margin:0;}
#ncrc-hexmap .nx-credit{flex:0 0 auto;}
#ncrc-hexmap .nx-credit img{display:block;width:auto;height:42px;max-width:230px;}
#ncrc-hexmap.nx-narrow .nx-credit img{height:34px;}
#ncrc-hexmap .nx-sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

@media (prefers-reduced-motion:reduce){
  #ncrc-hexmap .nx-drawer,#ncrc-hexmap .nx-hex,#ncrc-hexmap .nx-cell{transition:none;}
}

/* ==========================================================================
   Collapsible sections — the map ships compact; readers open what they want.
   ========================================================================== */
#ncrc-hexmap .nx-fold{border:1px solid var(--nx-n200);border-radius:4px;background:var(--nx-n50);}
#ncrc-hexmap .nx-fold + .nx-fold{margin-top:10px;}
#ncrc-hexmap .nx-fold-btn{
  appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:11px 14px;cursor:pointer;text-align:left;
  font-family:var(--nx-display-ex);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nx-n700);
}
#ncrc-hexmap .nx-fold-btn:hover{color:var(--nx-black);}
#ncrc-hexmap .nx-fold-btn .nx-chev{
  flex:0 0 auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s ease-out;margin-bottom:3px;
}
#ncrc-hexmap .nx-fold-btn[aria-expanded="true"] .nx-chev{transform:rotate(-135deg);margin-bottom:-2px;}
#ncrc-hexmap .nx-fold-body{padding:0 14px 12px;}
#ncrc-hexmap .nx-fold-sum{
  font-family:var(--nx-body);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:12px;color:var(--nx-n500);
}

/* Per-metric rows in the panel collapse to headline + value; the metric the map
   is currently showing opens by default. */
#ncrc-hexmap .nx-mrow-btn{
  appearance:none;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:inherit;
}
#ncrc-hexmap .nx-mrow-btn:hover .nx-mrow-lab{color:var(--nx-black);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;}
#ncrc-hexmap .nx-mrow-detail[hidden]{display:none;}
#ncrc-hexmap .nx-mrow-lab{display:flex;align-items:center;gap:6px;}
#ncrc-hexmap .nx-mrow-lab .nx-chev{
  flex:0 0 auto;width:7px;height:7px;border-right:1.8px solid var(--nx-n500);
  border-bottom:1.8px solid var(--nx-n500);transform:rotate(45deg);transition:transform .22s ease-out;
  margin-bottom:2px;
}
#ncrc-hexmap .nx-mrow-btn[aria-expanded="true"] .nx-chev{transform:rotate(-135deg);margin-bottom:-2px;}

/* Methodology + source fold at the foot of the graphic */
#ncrc-hexmap .nx-footfold{flex:1 1 420px;min-width:0;}
#ncrc-hexmap .nx-footfold .nx-fold{background:none;border:0;}
/* This button hugs its label instead of filling the column, so the chevron sits
   beside the words rather than at the far right edge of a 420px button. */
#ncrc-hexmap .nx-footfold .nx-fold-btn{
  padding:0 0 4px;font-size:11px;width:auto;justify-content:flex-start;
  align-items:center;gap:7px;
}
#ncrc-hexmap .nx-footfold .nx-fold-btn .nx-chev{
  width:7px;height:7px;border-right-width:1.8px;border-bottom-width:1.8px;
  margin-bottom:2px;
}
#ncrc-hexmap .nx-footfold .nx-fold-btn[aria-expanded="true"] .nx-chev{
  margin-bottom:-1px;
}
#ncrc-hexmap .nx-footfold .nx-fold-body{padding:0;}
#ncrc-hexmap .nx-clear{
  appearance:none;background:var(--nx-n0);border:1.5px solid var(--nx-n300);border-radius:2px;
  padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer;color:var(--nx-n700);
}
#ncrc-hexmap .nx-clear:hover{border-color:var(--nx-black);color:var(--nx-black);}
#ncrc-hexmap .nx-loading{font-size:13px;color:var(--nx-n600);padding:24px 0;}
#ncrc-hexmap .nx-error{
  font-size:13px;color:var(--nx-n900);background:#FDE7E7;border-left:3px solid var(--nx-red);
  padding:10px 12px;margin:12px 0;
}

/* Panel-header tool group. Three construction notes, each one the reason a rule
   is written the way it is:
   * the children carry NO border-radius, so overflow:hidden on the group is what
     rounds the end caps — give a child its own radius and the caps double up;
   * the dividers are `+` selectors, so removing a button cannot leave a dangling
     border. The roster gate removes two of the three, and the close button then
     renders correctly alone as a single rounded cell;
   * every icon has a square 16x16 viewBox, which makes centring a property of the
     box rather than of each glyph's ink. */
#ncrc-hexmap .nx-tools{
  display:inline-flex;align-items:stretch;flex:0 0 auto;
  border:1.5px solid var(--nx-n300);border-radius:8px;overflow:hidden;
  background:var(--nx-n0);
}
#ncrc-hexmap .nx-tool{
  appearance:none;background:none;border:0;padding:0;margin:0;
  width:34px;height:31px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--nx-n600);
  transition:background-color .15s ease-out,color .15s ease-out;
}
#ncrc-hexmap .nx-tool + .nx-tool{border-left:1.5px solid var(--nx-n200);}
#ncrc-hexmap .nx-tool:hover{background:var(--nx-n100);color:var(--nx-black);}
#ncrc-hexmap .nx-tool:focus-visible{outline:3px solid var(--nx-cyan);outline-offset:-3px;}
#ncrc-hexmap .nx-tool[aria-pressed="true"]{background:var(--nx-n900);color:var(--nx-n0);}
#ncrc-hexmap .nx-tool[aria-pressed="true"]:hover{background:var(--nx-n800);}
#ncrc-hexmap .nx-tool[disabled]{color:var(--nx-n300);cursor:not-allowed;background:var(--nx-n50);}
#ncrc-hexmap .nx-tool svg{width:15px;height:15px;display:block;fill:currentColor;}
#ncrc-hexmap.nx-narrow .nx-tool{width:38px;height:34px;}
/* The download is an anchor so the browser handles the file; it must not pick up
   link underlining or colour from the page. */
#ncrc-hexmap a.nx-tool{text-decoration:none;}

/* The state roster view. Reuses .nx-tablewrap rather than adding a second table
   treatment; only the compact sizing is new. */
#ncrc-hexmap .nx-roster-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:2px solid var(--nx-black);padding-bottom:8px;margin:0 0 12px;
}
#ncrc-hexmap #nx-roster-title{
  font-family:var(--nx-display);font-weight:800;font-size:20px;line-height:1.1;margin:0;
}
#ncrc-hexmap .nx-roster-sub{font-size:12.5px;color:var(--nx-n600);margin:3px 0 0;}
/* Narrow: the roster header is chrome competing with the list for the same height
   budget, and at 360px its wrapped subline alone cost more than the panel. Trim the
   type and let the actions wrap under the heading instead of squeezing beside it. */
#ncrc-hexmap.nx-narrow .nx-roster-head{flex-wrap:wrap;gap:8px;padding-bottom:6px;margin-bottom:8px;}
#ncrc-hexmap.nx-narrow #nx-roster-title{font-size:17px;}
#ncrc-hexmap.nx-narrow .nx-roster-sub{font-size:11.5px;line-height:1.35;}
#ncrc-hexmap.nx-narrow .nx-rtab{padding:6px 9px;}
/* The jurisdiction picker sits left of the tool group and shares its baseline. */
#ncrc-hexmap .nx-roster-actions{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;
  justify-content:flex-end;
}
#ncrc-hexmap #nx-roster-pick{font-size:13px;padding:6px 7px;max-width:15em;}
#ncrc-hexmap .nx-roster-status{font-size:12.5px;color:var(--nx-n600);margin:0;}
#ncrc-hexmap .nx-roster-err{color:var(--nx-n800);}
#ncrc-hexmap .nx-roster-h{
  font-family:var(--nx-display-ex);font-weight:700;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--nx-n600);margin:10px 0 5px;
}
#ncrc-hexmap .nx-roster-t{width:100%;border-collapse:collapse;font-size:12px;}
#ncrc-hexmap .nx-roster-t th,#ncrc-hexmap .nx-roster-t td{
  text-align:left;padding:4px 8px 4px 0;border-bottom:1px solid var(--nx-n200);
  vertical-align:top;font-weight:400;
}
#ncrc-hexmap .nx-roster-t thead th{
  font-family:var(--nx-display-ex);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nx-n600);border-bottom:1.5px solid var(--nx-n900);
}
#ncrc-hexmap .nx-roster-t tbody th{font-weight:600;color:var(--nx-n900);}
#ncrc-hexmap .nx-roster-more{font-size:11.5px;color:var(--nx-n600);margin:5px 0 0;font-style:italic;}

/* Loading a jurisdiction's lists. Reserves roughly the height the panel will take,
   so the arriving rows do not shove the rest of the page down -- inside an
   auto-height iframe that shows up as the whole embed twitching. */
#ncrc-hexmap .nx-rload{
  border:1px solid var(--nx-n200);padding:12px;
  min-height:calc(var(--nx-view-h, 520px) - 46px);   /* JS refines this */
}
#ncrc-hexmap .nx-rload-line{
  display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:12.5px;color:var(--nx-n600);
}
#ncrc-hexmap .nx-spinner{
  flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--nx-n200);border-top-color:var(--nx-n700);
  animation:nx-spin .7s linear infinite;
}
@keyframes nx-spin{to{transform:rotate(360deg);}}

#ncrc-hexmap .nx-skel{display:flex;flex-direction:column;gap:11px;}
#ncrc-hexmap .nx-skrow{display:flex;align-items:center;gap:12px;}
/* Two layers: a flat base so the bar is visible even if the gradient fails, and a
   moving highlight over it. background-size on a gradient is what makes the sweep
   travel -- animating background-position alone on a 100%-wide gradient does not
   move anything a reader can see. */
#ncrc-hexmap .nx-skbar{
  height:9px;border-radius:2px;background-color:var(--nx-n100);
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;background-size:60% 100%;
  animation:nx-shimmer 1.3s ease-in-out infinite;
}
@keyframes nx-shimmer{
  0%{background-position:-70% 0;}
  100%{background-position:170% 0;}
}
/* Uneven name lengths, so it reads as a list of banks rather than a bar chart. */
#ncrc-hexmap .nx-skname{flex:0 0 38%;}
#ncrc-hexmap .nx-skrow:nth-child(2) .nx-skname{flex-basis:27%;}
#ncrc-hexmap .nx-skrow:nth-child(3) .nx-skname{flex-basis:44%;}
#ncrc-hexmap .nx-skrow:nth-child(4) .nx-skname{flex-basis:31%;}
#ncrc-hexmap .nx-skrow:nth-child(5) .nx-skname{flex-basis:40%;}
#ncrc-hexmap .nx-skrow:nth-child(6) .nx-skname{flex-basis:24%;}
#ncrc-hexmap .nx-skrow:nth-child(7) .nx-skname{flex-basis:35%;}
#ncrc-hexmap .nx-skrow:nth-child(8) .nx-skname{flex-basis:29%;}
#ncrc-hexmap .nx-skcell{flex:1 1 auto;max-width:120px;}
/* Each row a little fainter than the last, so the list reads as trailing off rather
   than as eight identical placeholders. */
#ncrc-hexmap .nx-skrow:nth-child(n+5){opacity:.72;}
#ncrc-hexmap .nx-skrow:nth-child(n+7){opacity:.5;}

/* Motion is the nicety, never the message: with it off the skeleton is still a
   skeleton and the spinner is still a ring, both simply static. */
@media (prefers-reduced-motion:reduce){
  #ncrc-hexmap .nx-spinner{animation:none;border-top-color:var(--nx-n500);}
  #ncrc-hexmap .nx-skbar{animation:none;background-image:none;}
}

/* Tabs, so only one list is on screen at a time. Stacked, Louisiana ran to several
   screens and drove the iframe to a height no article body wants. */
#ncrc-hexmap .nx-rtabs{
  display:flex;gap:2px;border-bottom:1.5px solid var(--nx-n300);margin:0 0 10px;
}
#ncrc-hexmap .nx-rtab{
  appearance:none;background:none;border:0;border-bottom:2.5px solid transparent;
  margin-bottom:-1.5px;padding:7px 12px;cursor:pointer;
  font-family:var(--nx-display-ex);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nx-n600);
}
#ncrc-hexmap .nx-rtab:hover{color:var(--nx-black);background:var(--nx-n50);}
#ncrc-hexmap .nx-rtab:focus-visible{outline:3px solid var(--nx-cyan);outline-offset:-3px;}
#ncrc-hexmap .nx-rtab[aria-selected="true"]{
  color:var(--nx-n900);border-bottom-color:var(--nx-n900);
}
/* The panel is the ONE scroll container, both axes. Nesting a second scroller
   inside it (the table wrap has its own overflow-x) gives two scrollbars for one
   table, so the wrap is opened up inside a panel and the panel does all of it.
   min-width:0 is load-bearing: without it a wide table makes this flex child grow
   past .nx-mapwrap instead of scrolling, and the whole graphic overflows. */
#ncrc-hexmap .nx-rpanel{
  /* Same budget as the table, less the tab strip that sits above it, so all three
     views land on one height and the iframe stops resizing as a reader moves
     between them. */
  max-height:calc(var(--nx-view-h, 520px) - 46px);
  overflow:auto;min-width:0;max-width:100%;
  border:1px solid var(--nx-n200);
}
#ncrc-hexmap .nx-rpanel:focus-visible{outline:3px solid var(--nx-cyan);outline-offset:-3px;}
#ncrc-hexmap .nx-rpanel .nx-tablewrap{overflow:visible;border:0;}
#ncrc-hexmap .nx-rpanel .nx-roster-status,
#ncrc-hexmap .nx-rpanel .nx-roster-more{padding:10px 12px;}
/* Sticky headers, so the columns stay readable once the list is scrolling. The
   background is required: without it the rows show through as they pass under. */
#ncrc-hexmap .nx-rpanel .nx-roster-t thead th{
  position:sticky;top:0;z-index:1;background:var(--nx-n0);
  box-shadow:inset 0 -1.5px 0 var(--nx-n900);border-bottom:0;
}
#ncrc-hexmap .nx-rpanel .nx-roster-t th,
#ncrc-hexmap .nx-rpanel .nx-roster-t td{padding-left:12px;}
#ncrc-hexmap .nx-rpanel caption{
  position:sticky;left:0;padding:8px 12px;background:var(--nx-n50);
}