.seg button.on:hover{border-color:var(--accent)}
.ms-panel{min-width:220px;max-height:320px}
.ms-bar a:hover{text-decoration:underline}
.card h3 .seg{font-size:12px}
.subhead{margin:-4px 0 9px;font-size:12px;color:var(--mut)}
.chartbox{height:320px}
.chartbox.sm{height:260px}
#summary{margin:2px 2px;font-size:12.5px;color:var(--mut)}
#note{margin:2px 2px 8px;min-height:14px;font-size:12px;color:#8a6d1f}
.tblwrap{max-height:520px}
/* The phone height for the wide table. It sits HERE and not in the
   shared stylesheet's table block, because .tblwrap's max-height is per-page - index, agency
   and declinations 520px, civil 480px - and this stylesheet loads after
   shared/shared.css, so a media rule there at equal specificity would never win. */
@media(max-width:560px){.tblwrap{max-height:70vh}}
.ms-allrow{
    display:flex;align-items:center;gap:7px;margin-bottom:3px;padding:5px 6px;border-bottom:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ms-grp{
    display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px}
.ms-grp>label{
    display:flex;align-items:center;flex:1;min-width:0;gap:7px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ms-grp>.cv{
    width:22px;flex:none;border-radius:4px;text-align:center;font-size:12px;color:var(--mut);cursor:pointer;user-select:none}
.ms-grp>.cv:hover{
    background:var(--panel2);color:var(--ink)}
.ms-grp .cnt{
    font-size:11.5px;font-weight:400;white-space:nowrap;color:var(--mut)}
.ms-sub{
    margin:0 0 4px}
.ms-sub label{
    display:flex;align-items:center;gap:7px;padding:3px 6px 3px 28px;font-size:12.5px;color:#333;cursor:pointer;white-space:nowrap}
/* The auto-deselect note, under the group row that fired. NOT a .ms-list label -
   those are white-space:nowrap with no max-width on the panel, which is the mechanism
   that pushes this panel off a 390px viewport. This wraps and caps at 34ch, so it can
   never be what widens the panel. Colour is not a channel: the lead clause is --ink on
   --panel at 16.07:1, the body --mut at 5.29:1, the rule --ink at 16.07:1. It is not
   --line, which is 1.27:1 on --panel. */
.ms-note{margin:1px 6px 4px 28px;padding:4px 0 4px 8px;border-left:2px solid var(--ink);
  font-size:11.5px;line-height:1.35;color:var(--mut);white-space:normal;max-width:34ch}
.ms-note b{color:var(--ink);font-weight:600}
/* the persistent polite live region - created once, outside .ms-list, textContent only */
.ms-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The grouped picker's cell takes a full row below 760px. The category
   dropdown hangs 216px off a 390px viewport and 122px off 320px today, because
   .ms-list label is white-space:nowrap (shared.css:267) and .ms-panel has no max-width
   (:258), with the widest option label at 395px - so group and sub-category labels are
   cut off on a phone. Right-aligning the panel was measured and fails at 320 (left -70).
   THE MEDIA QUERY IS LOAD-BEARING and matches shell2.js's own min-width:760px: .dw-panel
   exists and is OPEN at desktop, so an unscoped rule would take a whole row there too and
   max-width:100% would SHRINK the 409px desktop panel. Proven identical at 1280.
   :has() degrades safely - an engine without it drops the rule and gets today's layout. */
@media(max-width:759px){
  .dw-panel .ctl:has(.ms-grouped){flex:1 1 100%}
  .ms-grouped .ms-panel{max-width:100%}
  .ms-grouped .ms-list label{white-space:normal}
}


/* ── THE HINT BUBBLE ─────────────────────────────────────────────────────────
   One component, three surfaces: this, index.html's program-category basis, and
   the topline's provisional mark. It opens FOUR ways - hover, focus,
   focus inside the bubble, and a click that PINS it - and the bubble is the
   button's aria-describedby target, so it is never [hidden] and never
   display:none and a screen-reader user has the sentence without opening it.

   .hint::after is TWO things at once. At rest it is the TARGET: a 16px glyph
   with a 26x26 hit area, at zero layout cost. While the bubble is open it also
   reaches DOWN to meet it, and that is the whole reason a link can live in
   here - without the reach, the pointer crosses 8.5px of dead ground between
   button and bubble, the bubble closes, and the link is unreachable by mouse.
   Measured with a scripted pointer walk: with the reach removed it breaks at step
   14 of the walk. :focus-within is the same fix for the keyboard.
   It is the BUTTON's pseudo-element and not the bubble's, which is what keeps
   the bubble the only thing carrying a z-index. An earlier draft put z-index:6
   on .hint and every OTHER field's glyph then ghosted through an open bubble -
   found by looking at a screenshot, not by any assertion.

   text-transform / letter-spacing / font-weight are RESETS, not taste. On Case
   Look-Up the bubble lives inside a .fld label, which is uppercase, 600 and
   letter-spaced; without these three the whole sentence and its link render in
   CAPITALS. Found by looking at a 1280px screenshot, not by counting
   selectors. Do not drop the three: nothing else resets the inherited label styling. */
.hint{position:relative}
.hinttip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;text-transform:none;letter-spacing:normal;font-weight:400}
.hint:hover~.hinttip,.hint:focus-visible~.hinttip,.hint[aria-expanded="true"]~.hinttip,.hinttip:hover,.hinttip:focus-within{
  top:calc(100% + 6px);left:0;right:0;bottom:auto;width:auto;height:auto;overflow:visible;clip-path:none;
  white-space:normal;margin:0;z-index:5;border-left:4px solid var(--ink);border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;border-radius:0 8px 8px 0;
  padding:9px 11px;font-size:12px;line-height:1.45;color:var(--ink);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.hint::after{content:"";position:absolute;inset:-5px}
.hint:hover::after,.hint:focus-visible::after,.hint[aria-expanded="true"]::after{bottom:-16px}
.hinttip a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.hinttip a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── the program-category basis affordance ───────────────────────────────────
   26x26 BOX here, where the topline's mark is also 26x26: .occbar is a flex row
   whose seg buttons are 37px tall, so the box costs nothing. Case Look-Up's
   16px glyph reaches 26x26 through ::after instead, because its label line box
   is 21px and a 26px box would break the filter grid's label alignment.
   The class is .occ-hint and not .hint because check 34 matches the UNION of a
   selector's declarations across every stylesheet: two .hint rules disagreeing
   on width would both pass, and the guide would stop describing either page. */
.occ-hint{width:26px;height:26px;padding:0;font-size:15px;color:var(--mut);background:var(--panel);
  border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1}
.occ-hint:hover{border-color:var(--ink);color:var(--ink)}
.occ-hint:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the BAR is the containing block, so the bubble is the bar's width wherever the
   bar is - including inside shell2.js's Filters drawer, which is where .occbar
   lives on every width. .dw-panel is overflow:visible, so nothing clips it. */
.occbar{position:relative}
.occbar .hinttip{max-width:640px}
.occbar .hinttip p{margin:0 0 7px}
.occbar .hinttip p:last-child{margin:0}