/* WUSA brand layer—a thin skin over Pico (navy, chartreuse, red).
   Loaded after pico.min.css so these variables win. */

: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. */
  --pico-primary: var(--wusa-navy);
  --pico-primary-hover: 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"] {
  --pico-primary: #8ab4f8;
  --pico-primary-hover: #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-hover: #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;
}

.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;
}
.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;
}