/* Kate Pincott — shared UI components.
   Linked by pages that use them; relies on the colour tokens from ds/theme.css
   and the per-page font tokens (--font-body, --font-mono).
   Change a component once here and it updates site-wide. */

/* ---- Segmented control -------------------------------------------------
   A connected pill for choosing one of a small set of options.
   Used by the archive sort toggle (.sort-toggle) and speaking filter (.filter);
   new controls can just use class="segmented".
   Body copy (NOT mono). Selected = black, hover = orange, focus = accent outline. */
.segmented,
.sort-toggle,
.filter{
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  background:var(--surface);
}
.segmented button,
.sort-toggle button,
.filter button{
  appearance:none;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--fg-mute);
  background:none;
  border:0;
  border-radius:999px;
  padding:8px 16px;
  min-height:38px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:color .16s ease, background-color .16s ease;
}
.segmented button:hover,
.sort-toggle button:hover,
.filter button:hover{color:var(--accent-text)}
.segmented button[aria-pressed="true"], .segmented button.on,
.sort-toggle button[aria-pressed="true"],
.filter button.on{color:var(--bg);background:var(--fg)}
/* Selected pill: on hover the FILL takes the (random) pastel, not the text —
   pastel text would vanish on the light fill. Dark text stays legible on the fill. */
.segmented button[aria-pressed="true"]:hover, .segmented button.on:hover,
.sort-toggle button[aria-pressed="true"]:hover,
.filter button.on:hover{color:var(--bg);background:var(--accent)}
.segmented button:focus-visible,
.sort-toggle button:focus-visible,
.filter button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.segmented .count,
.filter button .count{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--fg-mute); /* was opacity:.6 — failed AA contrast on both themes */
  font-variant-numeric:tabular-nums;
}
.segmented button[aria-pressed="true"] .count, .segmented button.on .count,
.sort-toggle button[aria-pressed="true"] .count,
.filter button.on .count{color:inherit}

/* Compact on phones so the control doesn't dominate the screen (it wrapped into
   a tall pill on mobile). Smaller type/padding/height; still comfortably tappable. */
@media (max-width: 600px){
  .segmented button,
  .sort-toggle button,
  .filter button{
    font-size:12px;
    padding:6px 12px;
    min-height:34px;
    gap:5px;
  }
  .segmented .count,
  .filter button .count{font-size:11px}
}

/* ---- Tags --------------------------------------------------------------
   Small categorical labels (topic chips). Body copy, sentence case, hairline
   pill — never mono. Used by archive case tags (.case-tags). */
.tags,
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tags span,
.case-tags span{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--fg-faint);
  border:1px solid var(--line);
  border-radius:5px;
  padding:3px 9px;
  line-height:1.3;
}