/* Shared UnGovr Oversight member header: brand, one find control, two named
   links, a More panel. One stylesheet serves all five members; the member's
   primary hue arrives as --hue on .ovr-bar.
   Status color here is factual, never alarm: --hue = on record, neutral grey =
   none on record. */
:root {
  --ovr-bg: #faf8f3;
  --ovr-elev: #ffffff;
  --ovr-mute: #ede9df;
  --ovr-border: #d4cebe;
  --ovr-text: #1f2937;
  --ovr-text-mute: #5f6776;
  --ovr-gold: #a98637;
  --ovr-grey: #8a8a8a;
}

/* bar ----------------------------------------------------------------------
   Sticky: on a 3,000-county site the find control is the primary navigation,
   so it stays reachable without a trip back to the top. */
.ovr-bar{
  background:var(--hue); color:var(--ovr-bg); position:sticky; top:0; z-index:20;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
}
.ovr-bar__row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:26px; min-height:56px; padding:0 22px;
}

/* Skip-link / anchor occlusion under the sticky bar -------------------------
   The bar is sticky, so the browser's native "scroll target into view"
   behavior -- both "Skip to main content" and any #hash landing -- would
   otherwise put the target flush with the viewport top, behind the bar.
   The bar's real height isn't one number: it's taller on a page with the
   crumb row ([data-ovr-crumb], set by the partial) than without one, and the
   crumb's own height moves with webfont metrics and breadcrumb wrapping, so
   no single static number is ever right for every page. Two static tiers
   (crumb vs. no crumb) cover scripting off; oversight-find.js measures the
   bar's actual rendered height once it runs and republishes it as
   --ovr-bar-h, which both tiers below pick up and which is exact for every
   page regardless of crumb presence, wrapping, or breakpoint. */
.ovr-bar ~ main{ scroll-margin-top: var(--ovr-bar-h, 56px); }
.ovr-bar[data-ovr-crumb] ~ main{ scroll-margin-top: var(--ovr-bar-h, 84px); }

/* brand ------------------------------------------------------------------- */
.ovr-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-width:0;
}
.ovr-brand__badge{
  width:26px; height:26px; border-radius:5px; background:var(--ovr-bg); color:var(--hue);
  display:grid; place-items:center; flex:none;
}
.ovr-brand__badge svg{ width:16px; height:16px; }
.ovr-brand__name{
  font-family:'Fraunces','Newsreader',Georgia,serif; font-size:17px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap;
}
.ovr-brand__name em{ font-style:normal; opacity:.74; }
.ovr-brand__kicker{
  font-size:9px; text-transform:uppercase; letter-spacing:.15em; opacity:.6;
  white-space:nowrap; padding-left:9px; margin-left:2px; border-left:1px solid rgba(250,248,243,.26);
}
@media (max-width:1180px){ .ovr-brand__kicker{ display:none; } }

/* find control ------------------------------------------------------------ */
.ovr-find{ position:relative; justify-self:center; width:100%; max-width:440px; }
.ovr-find__box{
  display:flex; align-items:center; gap:9px; height:34px; padding:0 5px 0 12px;
  background:rgba(250,248,243,.12); border:1px solid rgba(250,248,243,.28);
  border-radius:17px; transition:background .15s ease, border-color .15s ease;
}
.ovr-find__box:hover{ background:rgba(250,248,243,.18); }
.ovr-find.is-open .ovr-find__box,
.ovr-find__box:focus-within{
  background:var(--ovr-bg); border-color:var(--ovr-gold);
  box-shadow:0 0 0 3px rgba(169,134,55,.34);
}
.ovr-find__glyph{ width:14px; height:14px; flex:none; opacity:.72; }
.ovr-find.is-open .ovr-find__glyph,
.ovr-find__box:focus-within .ovr-find__glyph{ color:var(--ovr-text-mute); opacity:1; }
.ovr-find__input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:inherit;
  font:inherit; font-size:12.5px; letter-spacing:.01em;
}
.ovr-find__input::placeholder{ color:rgba(250,248,243,.62); }
.ovr-find.is-open .ovr-find__input,
.ovr-find__box:focus-within .ovr-find__input{ color:var(--ovr-text); }
.ovr-find.is-open .ovr-find__input::placeholder,
.ovr-find__box:focus-within .ovr-find__input::placeholder{ color:var(--ovr-text-mute); }
.ovr-find__geo{
  flex:none; width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(250,248,243,.16); color:inherit; display:grid; place-items:center;
  transition:background .15s ease, color .15s ease;
}
/* The markup ships this button `hidden` until oversight-find.js confirms
   navigator.geolocation actually exists. Equal-specificity cascade: this
   class's own `display:grid` above loads after the UA stylesheet's
   `[hidden]{display:none}`, so without this rule the class wins and the
   button shows regardless of the attribute. */
.ovr-find__geo[hidden]{ display:none; }
.ovr-find__geo svg{ width:13px; height:13px; }
.ovr-find__geo:hover{ background:var(--ovr-gold); color:var(--ovr-bg); }
.ovr-find.is-open .ovr-find__geo,
.ovr-find__box:focus-within .ovr-find__geo{ background:var(--ovr-mute); color:var(--hue); }
.ovr-find.is-open .ovr-find__geo:hover,
.ovr-find__box:focus-within .ovr-find__geo:hover{ background:var(--ovr-gold); color:var(--ovr-bg); }

/* the panel — the signature: a reference volume's index page, in miniature */
.ovr-panel{
  position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
  width:min(580px,94vw); background:var(--ovr-elev); color:var(--ovr-text);
  border:1px solid var(--ovr-border); border-radius:9px; overflow:hidden;
  box-shadow:0 18px 44px -12px rgba(31,41,55,.34); display:none; z-index:40;
  font-family:'IBM Plex Mono',ui-monospace,monospace; text-align:left;
}
.ovr-find.is-open .ovr-panel{ display:block; }
/* CSS-only fallback so the panel still opens on focus if scripting is
   unavailable or hasn't run yet. oversight-find.js marks <html class="ovr-js">
   as its first action, which turns this rule off, so a running script owns
   open/close entirely instead of fighting it. */
html:not(.ovr-js) .ovr-find:focus-within .ovr-panel{ display:block; }
.ovr-panel__head{
  padding:13px 16px 11px; border-bottom:1px solid var(--ovr-border); background:var(--ovr-bg);
  font-family:'Fraunces','Newsreader',Georgia,serif; font-size:15px; font-weight:500; color:var(--ovr-text);
}
.ovr-panel__head b{ color:var(--hue); font-weight:600; font-variant-numeric:tabular-nums; }
.ovr-panel__body{ max-height:min(52vh,340px); overflow-y:auto; padding:11px 16px 13px; }
.ovr-panel__foot{
  padding:9px 16px; border-top:1px solid var(--ovr-border); background:var(--ovr-mute);
  font-size:10.5px; color:var(--ovr-text-mute); letter-spacing:.05em;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.ovr-panel__foot b{ color:var(--ovr-text); font-weight:600; font-variant-numeric:tabular-nums; }

/* the gazetteer index: name … leader dots … right-aligned count */
.ovr-index{ list-style:none; margin:0; padding:0; columns:3; column-gap:26px; }
.ovr-index--2{ columns:2; }
.ovr-index--1{ columns:1; }
@media (max-width:640px){ .ovr-index{ columns:2; } }
.ovr-index li{ break-inside:avoid; }
.ovr-index a{
  display:flex; align-items:baseline; gap:0; text-decoration:none; color:var(--ovr-text);
  font-size:11.5px; padding:3.5px 5px; border-radius:4px; line-height:1.35;
}
.ovr-index a:hover,.ovr-index a:focus-visible,.ovr-index a.is-cursor{
  background:var(--ovr-mute); outline:none; color:var(--hue);
}
.ovr-index__n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovr-index__lead{
  flex:1 1 auto; margin:0 5px; min-width:9px;
  border-bottom:1px dotted var(--ovr-border); transform:translateY(-3px);
}
.ovr-index__c{
  color:var(--ovr-text-mute); font-variant-numeric:tabular-nums; font-size:11px; white-space:nowrap;
}
.ovr-index a:hover .ovr-index__c{ color:var(--hue); }
/* status token — the family palette exactly: member hue = on record, neutral
   grey = none on record. Never a red or warning tier. */
.ovr-dot{
  width:6px; height:6px; border-radius:50%; flex:none; margin-right:7px;
  transform:translateY(-1px);
}
.ovr-dot--on{ background:var(--hue); }
.ovr-dot--off{ background:var(--ovr-grey); }
.ovr-group{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ovr-text-mute);
  padding:9px 5px 5px; border-bottom:1px solid var(--ovr-border); margin-bottom:6px;
  column-span:all;
}
.ovr-group:first-child{ padding-top:0; }
.ovr-panel__all{
  display:block; margin-top:9px; padding:9px 5px 0; border-top:1px solid var(--ovr-border);
  font-size:11.5px; color:var(--hue); text-decoration:none; column-span:all;
}
.ovr-panel__all:hover{ text-decoration:underline; }
.ovr-panel__all b{ font-weight:600; }
.ovr-empty{ padding:16px 5px; font-size:11.5px; color:var(--ovr-text-mute); }

/* actions ----------------------------------------------------------------- */
.ovr-acts{ display:flex; align-items:center; gap:16px; position:relative; }
.ovr-act{
  color:inherit; text-decoration:none; font-size:12.5px; opacity:.86; white-space:nowrap;
  background:none; border:0; cursor:pointer; font-family:inherit; padding:0;
  display:inline-flex; align-items:center; gap:5px;
}
.ovr-act:hover,.ovr-act:focus-visible{ opacity:1; text-decoration:underline; outline:none; }
.ovr-act__chev{ width:9px; height:9px; transition:transform .16s ease; }
.ovr-act[aria-expanded="true"] .ovr-act__chev{ transform:rotate(180deg); }
.ovr-act[aria-expanded="true"]{ opacity:1; }

.ovr-more{
  position:absolute; top:calc(100% + 13px); right:0; width:min(520px,94vw);
  background:var(--ovr-elev); border:1px solid var(--ovr-border); border-radius:9px;
  box-shadow:0 18px 44px -12px rgba(31,41,55,.34); padding:18px 20px 16px;
  display:none; z-index:40; color:var(--ovr-text); text-align:left;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 22px;
}
.ovr-more.is-open{ display:grid; }
/* CSS-only fallback so the panel still opens on focus if scripting is
   unavailable or hasn't run yet, mirroring the Find panel's fallback above.
   Scoped to html:not(.ovr-js) for the same reason: once oversight-find.js
   is running, JS owns open/close entirely instead of fighting this rule.
   Unscoped, this was the fifth instance of the no-JS-degradation defect
   class on this plan: a second click on More removes .is-open and sets
   aria-expanded="false", but the button still holds :focus, so the panel
   stayed visually open (measured display:grid) while assistive tech was
   told it had collapsed. Scoped to the whole .ovr-acts wrapper via
   :focus-within (not just the button) so Tabbing from the button into the
   panel's own links keeps it open, instead of collapsing on the very next
   Tab and stranding a no-JS keyboard user unable to reach any More link. */
html:not(.ovr-js) .ovr-acts:focus-within .ovr-more,
html:not(.ovr-js) .ovr-more:hover{ display:grid; }
.ovr-more--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px){ .ovr-more,.ovr-more--2{ grid-template-columns:1fr; } }
.ovr-more h3{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ovr-gold);
  margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--ovr-border);
}
.ovr-more ul{ list-style:none; margin:0; padding:0; }
.ovr-more li + li{ margin-top:4px; }
.ovr-more a{
  font-family:'Newsreader',Georgia,serif; font-size:14px; color:var(--ovr-text);
  text-decoration:none; display:block; padding:2px 0;
}
.ovr-more a:hover,.ovr-more a:focus-visible{ color:var(--hue); text-decoration:underline; outline:none; }

/* powered-by (footer) -------------------------------------------------------
   Sits beside the "operated by UnGovr" line in every member footer; no
   member footer carried this before, so this is an addition, not a move.
   Footer background varies by site -- sheriff/caoversight use
   a dark primary shade close in luminance to --hue itself, so drawing the
   mark straight in --hue against that background would nearly vanish. The
   mark instead sits on its own light chip (var(--ovr-bg)), the same
   contrast-by-construction trick .ovr-brand__badge uses in the bar, so one
   rule reads clearly on every member's footer regardless of that member's
   own background choice. */
.ovr-powered-by{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:inherit; opacity:.82; margin-top:.6em;
}
.ovr-powered-by:hover{ opacity:1; }
.ovr-powered-by__label{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase;
}
.ovr-powered-by__mark{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:34px; border-radius:5px; background:var(--ovr-bg);
}
.ovr-powered-by__mark::before{
  content:""; display:block; width:20.4px; height:23.3px; /* 206:235 lockup aspect */
  background-color:var(--hue);
  -webkit-mask:url(/static/ungovr-lockup.svg) center / contain no-repeat;
  mask:url(/static/ungovr-lockup.svg) center / contain no-repeat;
}

/* crumb --------------------------------------------------------------------*/
.ovr-crumb{
  background:var(--hue); color:rgba(250,248,243,.72); font-size:11px; letter-spacing:.05em;
  padding:0 22px 9px; margin-top:-3px;
}
.ovr-crumb a{ color:inherit; text-decoration:none; }
.ovr-crumb a:hover{ text-decoration:underline; color:var(--ovr-bg); }
.ovr-crumb b{ color:var(--ovr-bg); font-weight:500; }

/* mobile / responsive -------------------------------------------------------
   The design plates simulated this swap by hand-applying an .ovr-bar--sm
   class to a wide page. Production markup is one shape at every width, so
   here the swap is a real media query instead. */
.ovr-iconbtn{
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(250,248,243,.3);
  background:rgba(250,248,243,.1); color:inherit; place-items:center; cursor:pointer;
}
.ovr-iconbtn svg{ width:14px; height:14px; }

/* Desktop: named links show, the mobile glyph is hidden. */
.ovr-iconbtn { display: none; }

@media (max-width: 720px) {
  .ovr-bar__row { grid-template-columns: 1fr auto; grid-template-areas: "brand acts"; gap: 0 10px; min-height: 52px; padding: 0 14px; }
  .ovr-brand { grid-area: brand; }
  .ovr-acts  { grid-area: acts; gap: 12px; }
  .ovr-acts .ovr-act:not([data-ovr-more]) { display: none; }  /* named links */
  .ovr-brand__kicker { display: none; }
  .ovr-brand__name { font-size: 15px; }
  .ovr-iconbtn { display: grid; }
  .ovr-find { display: none; }
  .ovr-bar.is-searching .ovr-bar__row { grid-template-areas: "brand acts" "find find"; }
  .ovr-bar.is-searching .ovr-find { display: block; grid-area: find; max-width: none; padding: 0 0 11px; }
  .ovr-bar.is-searching .ovr-find__box { height: 38px; }

  /* No-JS fallback: with no script ever adding .is-searching, the icon
     glyph would gate the field forever and it would stay display:none with
     no way to reveal it -- the very thing full-text search reachability
     depends on. Reuses the identical "give find its own row" treatment
     .is-searching applies just above, scoped to no-JS instead of to the
     JS-toggled class; the glyph is hidden since it has nothing to do
     without a script to wire its click handler. */
  html:not(.ovr-js) .ovr-bar__row { grid-template-areas: "brand acts" "find find"; }
  html:not(.ovr-js) .ovr-find { display: block; grid-area: find; max-width: none; padding: 0 0 11px; }
  html:not(.ovr-js) .ovr-find__box { height: 38px; }
  html:not(.ovr-js) .ovr-iconbtn { display: none; }

  /* below the family breakpoint the panel and More panel take the bar's own
     edges, rather than centering on the (now hidden) find control */
  .ovr-panel { left: 0; right: 0; width: auto; max-width: none; transform: none; }
  .ovr-more { right: 0; left: auto; width: min(340px, calc(100vw - 34px)); padding: 14px 16px 12px; }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }