/* WUSA brand layer—a thin skin over Pico (navy, chartreuse, red). */

:root {
  --wusa-navy: #0b2545;
  --wusa-navy-2: #13315c;
  --wusa-chartreuse: #b4d335;
  --wusa-red: #c8102e;
}

/* Map Pico's primary onto WUSA navy; links and buttons follow.

   THE SELECTOR IS THE WHOLE POINT, and it has to match Pico's own. This block
   used to sit on a bare `:root` with a comment claiming that loading after
   pico.min.css was enough to win. It isn't, and load order never entered into
   it: Pico declares these on `:root:not([data-theme=dark]),[data-theme=light]`,
   which is specificity 0,2,0 against a plain `:root`'s 0,1,0. So from the first
   commit until 2026-08-31 the light theme quietly served Pico's stock blue and
   nothing here applied. Don't "simplify" this back to `:root`.

   The dark block below gets away with `[data-theme="dark"]` because that ties
   Pico's own dark selector on specificity and wins on order.

   And it is the whole FAMILY, not just `--pico-primary`. That one colors link
   text; buttons fill from `--pico-primary-background` and underlines from
   `--pico-primary-underline`. Mapping only the first is what makes a navy link
   sit next to a Pico-blue button. */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: var(--wusa-navy);
  --pico-primary-background: var(--wusa-navy);
  --pico-primary-border: var(--wusa-navy);
  --pico-primary-underline: rgba(11, 37, 69, 0.5);
  --pico-primary-hover: var(--wusa-navy-2);
  --pico-primary-hover-background: var(--wusa-navy-2);
  --pico-primary-hover-border: var(--wusa-navy-2);
  --pico-primary-hover-underline: var(--wusa-navy-2);
  --pico-primary-focus: rgba(11, 37, 69, 0.25);
  --pico-primary-inverse: #fff;
}

/* Dark theme: navy is too dark to read on a dark background, so links and primary
   buttons take a lighter blue. Driven by the toggle's data-theme, with a system
   fallback for when JS hasn't set it. Navy-bg badges get a lighter fill too.

   `[data-theme="dark"]` ties Pico's own dark selector on specificity and wins on
   order, so this block—unlike the light one above—always did apply. What it
   MISSED was the same thing: only `--pico-primary` was mapped, so links took the
   light blue while buttons kept filling from Pico's `--pico-primary-background`
   (a teal `#0172ad`) and the two never matched. The giveaway was already sitting
   here—`--pico-primary-inverse: #0b2545` is dark text, which is only legible on
   a LIGHT fill. That was the intent all along; it just had nothing to act on. */
[data-theme="dark"] {
  --pico-primary: #8ab4f8;
  --pico-primary-background: #8ab4f8;
  --pico-primary-border: #8ab4f8;
  --pico-primary-underline: rgba(138, 180, 248, 0.5);
  --pico-primary-hover: #a9c7fb;
  --pico-primary-hover-background: #a9c7fb;
  --pico-primary-hover-border: #a9c7fb;
  --pico-primary-hover-underline: #a9c7fb;
  --pico-primary-focus: rgba(138, 180, 248, 0.3);
  --pico-primary-inverse: #0b2545;
}
[data-theme="dark"] .wusa-badge--volunteer {
  background: #1f3a63;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-primary: #8ab4f8;
    --pico-primary-background: #8ab4f8;
    --pico-primary-border: #8ab4f8;
    --pico-primary-underline: rgba(138, 180, 248, 0.5);
    --pico-primary-hover: #a9c7fb;
    --pico-primary-hover-background: #a9c7fb;
    --pico-primary-hover-border: #a9c7fb;
    --pico-primary-hover-underline: #a9c7fb;
    --pico-primary-focus: rgba(138, 180, 248, 0.3);
    --pico-primary-inverse: #0b2545;
  }
}

/* Site header: navy bar with the logo and chartreuse underline. */
.wusa-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--wusa-navy);
  border-bottom: 4px solid var(--wusa-chartreuse);
}

.wusa-header a.wusa-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.wusa-header img {
  height: 36px;
  width: auto;
}

.wusa-header .wusa-spacer {
  flex: 1;
}

.wusa-header .wusa-user {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.wusa-header a {
  color: #fff;
}

.wusa-theme-toggle {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  width: auto;
  margin: 0;
  padding: 0.2rem 0.4rem;
  font-size: 1.15rem;
  line-height: 1;
}
.wusa-theme-toggle:hover {
  opacity: 0.8;
}

/* Index rows: title + access badge on the left, the short URL + actions on the
   right of the same line (wraps below on narrow screens); usage graph beneath. */
.wusa-links {
  list-style: none;
  padding-left: 0;
}

.wusa-links li {
  list-style: none;
  margin-bottom: 1.75rem;
}
.wusa-links li::marker {
  content: "";
}

.wusa-link-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.9rem;
}

.wusa-link-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
}

.wusa-link-title {
  font-weight: 600;
}

.wusa-link-title--locked {
  color: var(--pico-muted-color);
  font-weight: 500;
}

/* Access badges. Filled = you already have this level; outlined = a link to
   request it (the badge replaces the old lock + request pill). */
.wusa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  padding: 0.08rem 0.45rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.wusa-badge--public {
  background: var(--wusa-chartreuse);
  color: var(--wusa-navy);
}
.wusa-badge--volunteer {
  background: var(--wusa-navy);
  color: #fff;
}
.wusa-badge--board {
  background: #9a6b00;
  color: #fff;
}
.wusa-badge--background-checks {
  background: var(--wusa-red);
  color: #fff;
}

.wusa-link-title--pending {
  color: var(--pico-muted-color);
  font-weight: 500;
}

/* Season navigation for the usage graphs—only shown once >1 season has data. */
.wusa-season-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}
.wusa-season-nav a {
  text-decoration: none;
  font-weight: 700;
}
.wusa-season-current {
  min-width: 7rem;
  text-align: center;
}
.wusa-season-disabled {
  opacity: 0.3;
}

/* Understated per-link usage graph under the link—weekly opens this season,
   shown to everyone (transparency). Full-width line + a small count. */
.wusa-spark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  color: var(--pico-muted-color);
  opacity: 0.85;
}
.wusa-spark-svg {
  flex: 1;
  width: 100%;
  height: 24px;
  display: block;
}
.wusa-spark-n {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Vertical "went live" marker inside the usage graph—chartreuse so it reads on
   both the light and dark themes (navy vanished on dark). */
.wusa-spark-marker {
  stroke: var(--wusa-chartreuse);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.8;
}
.wusa-badge--pending {
  background: transparent;
  color: var(--pico-muted-color);
  border-color: var(--pico-muted-border-color, currentColor);
  border-style: dashed;
}

/* Advisory link-health marker: the automated checker saw the target change or
   stop responding. Outlined (like the request badge), red so it draws the eye
   without shouting; a normal-case label since it's a prose hint, not a category. */
.wusa-badge--health {
  background: transparent;
  color: var(--wusa-red);
  border-color: var(--wusa-red);
  border-style: dashed;
  text-transform: none;
  cursor: help;
}

/* A known issue — acknowledged by an admin, or manually flagged (e.g. an expired
   form the checker can't see). Still marked so members know what to expect, but
   muted rather than red: it reads as "handled," not "fresh alarm." */
.wusa-badge--health.wusa-badge--health-known {
  color: var(--pico-muted-color, #6c757d);
  border-color: var(--pico-muted-border-color, currentColor);
}

.wusa-badge--request {
  background: transparent;
}
.wusa-badge--request.wusa-badge--volunteer {
  color: var(--wusa-navy);
  border-color: var(--wusa-navy);
}
.wusa-badge--request.wusa-badge--board {
  color: #9a6b00;
  border-color: #9a6b00;
}
.wusa-badge--request.wusa-badge--background-checks {
  color: var(--wusa-red);
  border-color: var(--wusa-red);
}
.wusa-badge--request:hover {
  filter: brightness(0.92);
}

.wusa-share {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.wusa-url {
  font-size: 0.7rem;
  color: var(--pico-muted-color);
  background: var(--pico-code-background-color);
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
}

.wusa-copy.wusa-copy {
  /* icon-only button (GitHub-style); doubled selector beats Pico without !important */
  margin: 0;
  padding: 0.15rem 0.3rem;
  width: auto;
  line-height: 0;
  color: var(--pico-muted-color);
  background: transparent;
  border-color: transparent;
}

.wusa-copy.wusa-copy:hover {
  color: var(--wusa-navy);
}

.wusa-copy svg {
  display: block;
}

.wusa-copied.wusa-copied {
  color: var(--wusa-chartreuse);
}

/* Staff-only inline admin affordances (edit / delete) next to copy. */
.wusa-iconlink {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  padding: 0.15rem 0.3rem;
  color: var(--pico-muted-color);
}

.wusa-iconlink:hover {
  color: var(--wusa-navy);
}

.wusa-iconlink--danger:hover {
  color: var(--wusa-red);
}

.wusa-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.wusa-addlink {
  margin: 0;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  width: auto;
  white-space: nowrap;
}

.wusa-desc {
  display: block;
  color: var(--pico-muted-color);
  margin-top: 0.15rem;
  font-size: 0.82rem;
}

/* "PDF · 2.4 MB · updated Aug 5" under a hosted file. Quieter than the
   description: it's reference detail, not the reason to click. */
.wusa-filemeta {
  display: block;
  color: var(--pico-muted-color);
  margin-top: 0.15rem;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.wusa-status {
  border-left: 4px solid var(--wusa-chartreuse);
  padding-left: 0.75rem;
}

/* Footer: internal nav grouped left, parent-org attribution set apart right.
   Small and muted throughout; the org link is quieter still—a credit, not nav. */
.wusa-footer {
  margin-top: 2.5rem;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-muted-border-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
}
/* Group the nav items together at the left. Pico styles <nav> as a
   space-between flex row by default; override so the links cluster instead of
   spreading edge to edge. */
.wusa-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem;
}
.wusa-footer-sep {
  color: var(--pico-muted-border-color);
}
.wusa-version {
  white-space: nowrap;
}
/* The current page: plain bold text, not a link (you-are-here). */
.wusa-footer-here {
  font-weight: 600;
  color: var(--pico-color);
}
/* Attribution to the parent org—muted and undecorated until hover, so it
   reads as a credit rather than competing with the nav links beside it. */
.wusa-footer-org {
  font-size: 0.92em;
}
.wusa-footer-org a {
  color: var(--pico-muted-color);
  text-decoration: none;
}
.wusa-footer-org a:hover {
  text-decoration: underline;
}

/* Sign-in card, centered to match the rest of the brand. */
.wusa-signin {
  max-width: 28rem;
  margin: 2rem auto;
}

.wusa-signin-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  background: var(--wusa-navy);
  border-color: var(--wusa-navy);
  color: #fff;
}

.wusa-signin-btn:hover {
  background: var(--wusa-navy-2);
  border-color: var(--wusa-navy-2);
}

/* Flash messages (e.g. the link-suggestion confirmation). */
.wusa-messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.wusa-msg {
  padding: 0.5rem 0.8rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
}
.wusa-msg--success {
  background: var(--wusa-chartreuse);
  color: var(--wusa-navy);
}
.wusa-msg--error {
  background: var(--wusa-red);
  color: #fff;
}

/* "Suggest a link" disclosure at the foot of the index. */
.wusa-suggest {
  margin-top: 2rem;
}
.wusa-head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.wusa-addlink--ghost {
  background: transparent;
  color: var(--wusa-navy);
  border-color: var(--wusa-navy);
}
/* Navy on a dark background is unreadable—lighten the outline button + brighten
   icon hovers. Driven by data-theme (set by the toggle), with a no-JS system fallback. */
[data-theme="dark"] .wusa-addlink--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .wusa-copy.wusa-copy:hover,
[data-theme="dark"] .wusa-iconlink:hover {
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wusa-addlink--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
  }
}
.wusa-suggest-page {
  max-width: 32rem;
}
.wusa-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0;
}
.wusa-dialog-actions button,
.wusa-dialog-actions [role="button"] {
  width: auto;
  margin: 0;
}
.wusa-suggest summary {
  cursor: pointer;
  font-weight: 600;
}
/* Contact-form honeypot. Off-screen rather than display:none, which the cruder
   form-filling bots know to skip; aria-hidden and tabindex="-1" on the markup
   keep keyboard and screen-reader users from ever reaching it. */
.wusa-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wusa-suggest-blurb {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  margin: 0.6rem 0;
}

/* Narrow screens: stack the share row full-width under the title, and push the
   badges and the copy/edit/delete actions to the right edge (slug stays left). */
@media (max-width: 600px) {
  .wusa-share {
    flex: 1 1 100%;
  }
  /* Keep the access badge on the title's line: let the title take the room and
     wrap if long, instead of pushing the badge to its own line. */
  .wusa-link-head {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .wusa-link-head .wusa-link-title {
    flex: 1;
    min-width: 0;
  }
  .wusa-share .wusa-url {
    margin-right: auto;
  }
}

/* About page: a readable prose column, narrower than the index. */
.wusa-prose {
  max-width: 42rem;
}
.wusa-prose h2 {
  margin-top: 2rem;
  font-size: 1.15rem;
}
/* Give the lead "short version" line a little air under the H1 (hgroup packs
   title + subtitle tight by default). */
.wusa-prose hgroup > p {
  margin-top: 0.6rem;
}
.wusa-prose-count {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}
/* Editorial note: a boxed callout, set apart from the prose but NOT a quote —
   no blockquote bar. For the "how the access layer actually works" explainer. */
.wusa-note {
  background: var(--pico-code-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}
.wusa-faq dt {
  font-weight: 600;
  margin-top: 0.9rem;
}
.wusa-faq dd {
  margin: 0.2rem 0 0;
}

/* Access-request on-ramp: a stacked checkbox list, each a box + label with a
   gloss beneath. The disabled Volunteer box reads as "included, not a choice". */
.wusa-access-choices {
  margin-bottom: 1rem;
}
.wusa-access-choices legend {
  font-weight: 600;
}
.wusa-access-choices label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.wusa-access-choices input[type="checkbox"] {
  flex: none;
}
.wusa-access-choices .wusa-desc {
  margin-top: 0.1rem;
}

/* Section index for the link list. Sticky, because the index is long and the
   whole point of the anchors is getting back out of it.

   IT HAS TO LOOK LIKE NAVIGATION (Joel, 2026-08-31: "it doesn't quite read like
   nav to me"). Muted 0.8rem text at weight 400, floating on the page with only a
   hairline under it, is caption styling—it reads as a line of prose about the
   page rather than a control on it. Three things fix it and none is decoration:
   the bar gets its own surface so it's a discrete component, the items get
   weight and real hit padding so they're targets, and the section you're in is
   marked. Separators were the other candidate and lost: with a surface and a
   pill on hover, eighteen vertical ticks say nothing the container hasn't. */
.wusa-toc-dock {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Opaque, and the full width of the container, because the bar it holds is
     NOT: that one is a translucent tint with rounded corners, and a sticky
     element you can read the page through is worse than no bar at all. The dock
     is what content scrolls under; the bar just floats in it. */
  background: var(--pico-background-color);
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
}
.wusa-toc {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 10px;
  /* Tinted from the muted text color, not a Pico surface token: in the light
     theme `--pico-card-background-color` IS the page background, so a bar
     filled with it is a bar you can't see. */
  background: color-mix(in srgb, var(--pico-muted-color) 9%, transparent);
  font-size: 0.82rem;
  /* The scroll buttons inherit this—see the note on them below. */
  color: var(--pico-muted-color);
}
/* Sideways, never onto a second line: a wrapped index reads as a paragraph. */
.wusa-toc-links {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* The scroll buttons' animation. In CSS rather than a `behavior` option on
     the `scrollBy` call so the reduced-motion opt-out below can reach it—an
     option baked into the JS can't be overridden by a media query. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .wusa-toc-links {
    scroll-behavior: auto;
  }
}
.wusa-toc-links::-webkit-scrollbar {
  display: none;
}
/* A supporting cue for the buttons, not the affordance itself. On its own the
   fade is luck: it only reads when a label happens to straddle the edge, and
   with nineteen categories the odds that one does at YOUR window width are a
   coin flip—the bar looked complete at 1740px and truncated at 1200px. */
.wusa-toc--more .wusa-toc-links {
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.wusa-toc--less .wusa-toc-links {
  mask-image: linear-gradient(90deg, transparent, #000 18px);
}
.wusa-toc--less.wusa-toc--more .wusa-toc-links {
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
/* The scroll affordance. A button, because a fade is a hint and a hint that
   depends on where the text happens to land is not an affordance—and because
   sideways scrolling is a gesture plenty of people don't have. Added from JS
   and only when it can act: a dead control is worse than none, and the strip
   still scrolls natively with scripts off. */
.wusa-toc button.wusa-toc-scroll {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 7px;
  /* `transparent`/`inherit`, NOT `var(--pico-background-color)`: Pico re-scopes
     its color tokens ON the button element, so reading one here hands back the
     primary fill and you get a blue square. */
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}
.wusa-toc button.wusa-toc-scroll:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: currentColor;
}
.wusa-toc button.wusa-toc-scroll[hidden] {
  display: none;
}
.wusa-toc .wusa-toc-links a {
  color: var(--pico-muted-color);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  padding: 0.32rem 0.62rem;
  border-radius: 7px;
  line-height: 1.2;
}
.wusa-toc .wusa-toc-links a:hover {
  color: var(--pico-contrast);
  background: color-mix(in srgb, var(--pico-muted-color) 18%, transparent);
}
/* Where you are. Set from the scroll handler; with scripts off the bar is still
   a working index, just without the marker.

   A raised pill in the brand primary. Against a bar of muted gray on a gray
   surface, another gray is a shade, and a shade is not a marker—the eye has to
   find this one without hunting for it. */
.wusa-toc .wusa-toc-links a.wusa-here {
  color: var(--pico-primary);
  background: var(--pico-background-color);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px var(--pico-muted-border-color);
  font-weight: 600;
}

article.wusa-cat {
  scroll-margin-top: 3.25rem;
}
article.wusa-cat > header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
/* The permalink and the way back, right-aligned on the header's own row.
   Always present rather than hover-only: a control that appears on hover is a
   control a touch screen never has. Quiet enough to ignore, close enough to
   click. */
.wusa-anchors {
  margin-left: auto;
  display: flex;
  gap: 2px;
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
}
.wusa-anchors a {
  color: var(--pico-muted-color);
  text-decoration: none;
  padding: 0 0.4rem;
  border-radius: 6px;
  line-height: 1.6;
  opacity: 0.65;
}
.wusa-anchors a:hover {
  color: var(--pico-color);
  background: color-mix(in srgb, var(--pico-muted-color) 12%, transparent);
  opacity: 1;
}