/* ==========================================================================
   WGO Validation — design system
   CSS custom properties, themes, accessible components.

   Dyslexia-friendly mode uses a legible system-sans stack plus generous
   spacing. An OpenDyslexic webfont could be self-hosted later under
   static/vendor/ and added as the first font in the --font-dyslexic stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES — light theme (default)
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette — spec §13.1 */
  --bg:           #F5F2F7;
  --surface:      #fff;
  --ink:          #2A2730;
  --muted:        #5B5560;
  --line:         #E2DCE8;
  --primary:      #63357C;
  --primary-ink:  #fff;
  --accent:       #E56726;
  --accent-ink:   #2A2730;
  --accent-text:  #A8460E;
  --focus:        #E56726;

  /* Status colours — spec §13.1 */
  --status-green-bg:    #E1F3E8;
  --status-green-ink:   #13643D;
  --status-amber-bg:    #FBEFD6;
  --status-amber-ink:   #7A4B00;
  --status-red-bg:      #FBE4E0;
  --status-red-ink:     #9B2316;

  /* Typography */
  --font-body:    "Calibri", "Carlito", system-ui, -apple-system, sans-serif;
  --font-dyslexic: "Arial", "Helvetica Neue", "Verdana", "Trebuchet MS",
                   system-ui, -apple-system, sans-serif;

  /* Spacing and sizing */
  --radius:       0.375rem;
  --radius-pill:  2em;
  --shadow-card:  0 1px 4px rgba(0,0,0,.08);
}

/* --------------------------------------------------------------------------
   2. DARK THEME — explicit data-theme="dark"
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --bg:           #181520;
  --surface:      #241F2E;
  --ink:          #ECE6F2;
  --muted:        #B3A9BE;
  --line:         #39324A;
  --primary:      #C9A0E0;
  --primary-ink:  #1B1620;
  --accent:       #F0A06A;
  --accent-ink:   #1B1620;
  --accent-text:  #F0A06A;
  --focus:        #F0A06A;

  --status-green-bg:  #1A3D28;
  --status-green-ink: #72DFA0;
  --status-amber-bg:  #3D2E00;
  --status-amber-ink: #F0C96A;
  --status-red-bg:    #3D1510;
  --status-red-ink:   #F09090;

  --shadow-card:  0 1px 6px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   3. HIGH-CONTRAST THEME — data-theme="contrast"
   Targets ≥7:1 for all text.
   -------------------------------------------------------------------------- */

[data-theme="contrast"] {
  --bg:           #000;
  --surface:      #000;
  --ink:          #fff;
  --muted:        #fff;
  --line:         #fff;
  --primary:      #fff;
  --primary-ink:  #000;
  --accent:       #ff0;
  --accent-ink:   #000;
  --accent-text:  #ff0;
  --focus:        #ff0;

  --status-green-bg:  #000;
  --status-green-ink: #00ff88;
  --status-amber-bg:  #000;
  --status-amber-ink: #ff0;
  --status-red-bg:    #000;
  --status-red-ink:   #ff6060;

  --shadow-card:  none;
}

/* --------------------------------------------------------------------------
   3a. DYSLEXIA-FRIENDLY THEME — data-theme="dyslexia"
   Cream (non-white) background with dark warm-grey (non-black) text, per
   Scope / British Dyslexia Association guidance: reduce the glare of pure
   white/black while keeping strong contrast. A flat single-colour surface
   (no patterns); status/verdict still pair colour with icon + label, so the
   "don't rely on colour alone" rule holds. All text/bg pairs ≥ WCAG AA
   (mirrored in tests/test_contrast.py CREAM).
   -------------------------------------------------------------------------- */

[data-theme="dyslexia"] {
  --bg:           #EDE3C9;
  --surface:      #FBF3E0;
  --ink:          #332E24;
  --muted:        #5C5443;
  --line:         #E2D4B2;
  --primary:      #63357C;
  --primary-ink:  #fff;
  --accent:       #E56726;
  --accent-ink:   #2A2730;
  --accent-text:  #A8460E;
  --focus:        #A8460E;

  --status-green-bg:    #E1F3E8;
  --status-green-ink:   #13643D;
  --status-amber-bg:    #FBEFD6;
  --status-amber-ink:   #7A4B00;
  --status-red-bg:      #FBE4E0;
  --status-red-ink:     #9B2316;

  --shadow-card:  0 1px 4px rgba(74,58,30,.10);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3b. EXPLICIT LIGHT THEME — data-theme="light" overrides OS dark mode.
   Uses the same values as :root (light default) so the effect is that a
   user who set "light" always gets the light palette regardless of OS.
   -------------------------------------------------------------------------- */

[data-theme="light"] {
  --bg:           #F5F2F7;
  --surface:      #fff;
  --ink:          #2A2730;
  --muted:        #5B5560;
  --line:         #E2DCE8;
  --primary:      #63357C;
  --primary-ink:  #fff;
  --accent:       #E56726;
  --accent-ink:   #2A2730;
  --accent-text:  #A8460E;
  --focus:        #E56726;

  --status-green-bg:    #E1F3E8;
  --status-green-ink:   #13643D;
  --status-amber-bg:    #FBEFD6;
  --status-amber-ink:   #7A4B00;
  --status-red-bg:      #FBE4E0;
  --status-red-ink:     #9B2316;

  --shadow-card:  0 1px 4px rgba(0,0,0,.08);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   4. AUTO-DARK — honour prefers-color-scheme when no explicit data-theme
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #181520;
    --surface:      #241F2E;
    --ink:          #ECE6F2;
    --muted:        #B3A9BE;
    --line:         #39324A;
    --primary:      #C9A0E0;
    --primary-ink:  #1B1620;
    --accent:       #F0A06A;
    --accent-ink:   #1B1620;
    --accent-text:  #F0A06A;
    --focus:        #F0A06A;

    --status-green-bg:  #1A3D28;
    --status-green-ink: #72DFA0;
    --status-amber-bg:  #3D2E00;
    --status-amber-ink: #F0C96A;
    --status-red-bg:    #3D1510;
    --status-red-ink:   #F09090;

    --shadow-card:  0 1px 6px rgba(0,0,0,.35);
  }
}

/* --------------------------------------------------------------------------
   5. TEXT-SIZE SCALE
   -------------------------------------------------------------------------- */

:root[data-text="large"] {
  font-size: 118.75%; /* ~19px base; the whole UI is rem-based so it scales */
}

:root[data-text="largest"] {
  font-size: 137.5%; /* 22px base. Media queries don't scale with it (rem in a
                        media query is the browser's 16px), so Largest has its
                        own reflow bands — see 5a. */
}

[data-text="normal"],
:root {
  font-size: 100%; /* 16px browser default */
}

/* --------------------------------------------------------------------------
   6. DYSLEXIA-FRIENDLY MODE
   OpenDyslexic webfont could be self-hosted later under static/vendor/ and
   prepended to --font-dyslexic.
   -------------------------------------------------------------------------- */

[data-font="dyslexic"] body,
[data-font="dyslexic"] input,
[data-font="dyslexic"] button,
[data-font="dyslexic"] textarea,
[data-font="dyslexic"] select {
  font-family: var(--font-dyslexic);
  letter-spacing: 0.05em;
  word-spacing: 0.12em;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   8. BASE / RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY PRIMITIVES
   -------------------------------------------------------------------------- */

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: bold;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* Visible focus outline on all interactive elements */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Remove default outline; rely entirely on :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen-reader only utility */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   10. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p {
  margin: 0 0 1rem;
}

a {
  color: var(--primary);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   11. BRAND HEADER
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--primary);
  color: var(--primary-ink);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
}

.site-header__brand {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--primary-ink);
  text-decoration: none;
}

.site-header__brand:hover {
  text-decoration: underline;
  color: var(--primary-ink);
}

/* Reviewer header — email + controls */
.reviewer-header {
  background: var(--primary);
  color: var(--primary-ink);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  flex-wrap: wrap;
}

.reviewer-header__brand {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--primary-ink);
  text-decoration: none;
}

.reviewer-header__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.reviewer-header__email {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* Admin header */
.admin-header {
  background: var(--primary);
  color: var(--primary-ink);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  flex-wrap: wrap;
}

.admin-header__brand-link {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--primary-ink);
  text-decoration: none;
}

.admin-header__brand-link:hover {
  text-decoration: underline;
}

.admin-header__badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.admin-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.admin-nav__link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: var(--primary-ink);
  text-decoration: none;
  border-radius: var(--radius);
  min-height: 2.75rem;
  line-height: 1.75rem;
}

.admin-nav__link:hover,
.admin-nav__link--active {
  background: rgba(255,255,255,.15);
}

.admin-nav__link--future {
  opacity: 0.65;
}

.admin-header__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-header__user-id {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   12. BUTTONS
   -------------------------------------------------------------------------- */

.btn,
button[type="submit"],
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;        /* ≥44px tap target */
  padding: 0.5rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

/* Primary button */
.btn,
.btn--primary,
button[type="submit"]:not(.btn--ghost):not(.btn--sm) {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.btn:hover,
.btn--primary:hover,
button[type="submit"]:not(.btn--ghost):not(.btn--sm):hover {
  filter: brightness(1.12);
}

/* Ghost / secondary button */
.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn--ghost:hover {
  background: var(--primary);
  color: var(--primary-ink);
}

/* Small inline buttons (nav, header controls) */
.btn--sm {
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Signout / admin signout buttons */
.admin-header__signout-btn,
.reviewer-signout-btn {
  background: transparent;
  color: var(--primary-ink);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.25rem;
  transition: background 0.15s;
}

.admin-header__signout-btn:hover,
.reviewer-signout-btn:hover {
  background: rgba(255,255,255,.2);
}

/* Display options placeholder button */
.display-options-btn {
  background: transparent;
  color: var(--primary-ink);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.display-options-btn:hover {
  background: rgba(255,255,255,.2);
}

/* --------------------------------------------------------------------------
   13. FORMS / INPUTS
   -------------------------------------------------------------------------- */

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--primary);
}

/* --------------------------------------------------------------------------
   14. TWO-COLUMN REVIEW LAYOUT
   Mobile-first: single column; ≥720px side-by-side.
   -------------------------------------------------------------------------- */

.review-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100vh - 3rem);
}

@media (min-width: 45rem) {
  .review-layout {
    grid-template-columns: 14rem 1fr;
  }
}

/* Sidebar */
.review-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1rem;
}

/* On mobile, collapse sidebar above the card */
@media (max-width: 44.9rem) {
  .review-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

.sidebar-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.sidebar-progress {
  margin-bottom: 1.25rem;
}

.progress-label {
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.progress-bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  overflow: hidden;
}

.progress-bar::-webkit-progress-bar {
  background: var(--bg);
}

.progress-bar::-webkit-progress-value {
  background: var(--primary);
  border-radius: var(--radius-pill);
}

.progress-bar::-moz-progress-bar {
  background: var(--primary);
  border-radius: var(--radius-pill);
}

/* Filter links */
.sidebar-filters {
  margin-bottom: 1.25rem;
}

.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-item {
  margin-bottom: 0.125rem;
}

.filter-link {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  min-height: 2.75rem;
  line-height: 2rem;
  transition: background 0.12s;
}

.filter-link:hover,
.filter-link--active {
  background: var(--bg);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

/* Jump form */
.sidebar-jump {
  margin-bottom: 1rem;
}

.jump-form {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.jump-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  width: 100%;
}

.jump-input {
  flex: 1 1 8rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}

.jump-btn {
  padding: 0.375rem 0.75rem;
  background: var(--primary);
  color: var(--primary-ink);
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.75rem;
  white-space: nowrap;
}

.jump-btn:hover {
  filter: brightness(1.1);
}

/* Main review pane */
.review-main {
  padding: 1rem;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   15. CANDIDATE CARD
   -------------------------------------------------------------------------- */

.candidate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  max-width: 52rem;
}

.card-header {
  margin-bottom: 0.75rem;
}

.card-org-name {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.card-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.card-candidate-id {
  font-family: monospace;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   18. FACTS / KEY-VALUE LIST
   -------------------------------------------------------------------------- */

.card-facts {
  margin: 0 0 0.75rem;
  display: grid;
  gap: 0.25rem 0;
}

.card-fact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.125rem 0;
  border-bottom: 1px solid var(--line);
}

.card-fact:last-child {
  border-bottom: none;
}

.card-fact__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 6rem;
}

.card-fact__value {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}

.card-website-link {
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   19. DESCRIPTION + DISCLOSURE (<details>)
   -------------------------------------------------------------------------- */

.card-description {
  margin-bottom: 0.75rem;
}

.card-description__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▶";
  font-size: 0.75em;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details > *:not(summary) {
  padding: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Specific card detail sections */
.card-description__expander,
.card-source-listings {
  margin-top: 0;
}

.card-description__rest {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.card-source-listings__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-source-url {
  font-size: 0.875rem;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   20. VOTE FORM — large tap targets (≥44px)
   -------------------------------------------------------------------------- */

.card-vote {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.vote-form {
  max-width: 32rem;
}

.vote-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.vote-legend {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.25rem;
}

.vote-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.vote-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;     /* ≥44px tap target */
  padding: 0.375rem 0.875rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}

.vote-option:hover {
  border-color: var(--primary);
  background: var(--bg);
}

.vote-radio {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Highlight checked option */
.vote-option:has(.vote-radio:checked) {
  border-color: var(--primary);
  background: var(--bg);
}

.vote-notes {
  margin-bottom: 1rem;
}

.vote-notes__label {
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.vote-notes__textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

/* Feedback region */
.vote-feedback {
  min-height: 1.5rem;
  margin-bottom: 0.5rem;
}

.vote-error {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  margin: 0;
}

.vote-saved {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  margin: 0;
}

.vote-submit {
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  background: var(--primary);
  color: var(--primary-ink);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s;
}

.vote-submit:hover {
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   21. CARD NAVIGATION
   -------------------------------------------------------------------------- */

.card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.card-nav__prev,
.card-nav__next {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s;
}

.card-nav__prev:hover,
.card-nav__next:hover {
  background: var(--bg);
}

.card-nav__prev--inactive,
.card-nav__next--inactive {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
  cursor: default;
}

.card-nav__position {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   22. WARNING BANNER
   -------------------------------------------------------------------------- */

.warning-banner {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   23. EMPTY STATES
   -------------------------------------------------------------------------- */

.empty-state {
  color: var(--muted);
  font-size: 1.0625rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   24. ADMIN LAYOUT
   -------------------------------------------------------------------------- */

.admin-layout {
  min-height: 100vh;
  background: var(--bg);
}

.admin-main {
  padding: 1.5rem 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

.admin-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-section h1 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Dashboard links grid */
.dashboard-links__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.dashboard-links__link {
  display: block;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}

.dashboard-links__link:hover {
  border-color: var(--primary);
  background: var(--surface);
}

.dashboard-links__item--future .dashboard-links__link {
  opacity: 0.6;
}

.dashboard-links__title {
  display: block;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.dashboard-links__desc {
  font-size: 0.875rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   25. ADMIN REVIEWERS TABLE
   -------------------------------------------------------------------------- */

.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.admin-table th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
}

.admin-table tr:hover td {
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   26. ERROR PAGES
   -------------------------------------------------------------------------- */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
  text-align: center;
}

.error-page__code {
  font-size: 5rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.error-page__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.error-page__body {
  color: var(--muted);
  max-width: 36rem;
  margin-bottom: 1.5rem;
}

.error-page__link {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  min-height: 2.75rem;
  background: var(--primary);
  color: var(--primary-ink);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius);
  transition: filter 0.12s;
}

.error-page__link:hover {
  filter: brightness(1.1);
  text-decoration: none;
  color: var(--primary-ink);
}

/* --------------------------------------------------------------------------
   27. MESSAGE PAGE
   -------------------------------------------------------------------------- */

.message-section {
  max-width: 36rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   28. LOGIN PAGE
   -------------------------------------------------------------------------- */

.login-section {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.login-section h2 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.login-section .form-group {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   29. REFLOW — survive 200% zoom (layout already in rem units)
   Single-column breakpoint at <720px (45rem) already handled above.
   High-zoom: stack everything.
   -------------------------------------------------------------------------- */

@media (max-width: 29.99rem) {
  .vote-options {
    flex-direction: column;
  }

  .card-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviewer-header {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   30. SIDEBAR TOGGLE BAR
   -------------------------------------------------------------------------- */

.sidebar-toggle-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 2.75rem;   /* ≥44px tap target */
  padding: 0.25rem 0.75rem;
  transition: background 0.12s;
}

.sidebar-toggle:hover {
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   31. SIDEBAR COLLAPSED STATE
   -------------------------------------------------------------------------- */

/* When collapsed: shrink sidebar column to a slim rail. */
@media (min-width: 45rem) {
  .review-layout--sidebar-collapsed {
    grid-template-columns: 4rem 1fr;
  }
}

/* Slim rail — hide collapsible sections. */
.review-sidebar--collapsed .sidebar-collapsible {
  display: none;
}

/* On narrow viewports the sidebar becomes an overlay when open. */
@media (max-width: 44.9rem) {
  .review-sidebar {
    position: relative;
  }

  .review-sidebar--collapsed {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   32. DISPLAY PREFERENCES PANEL (<details>)
   -------------------------------------------------------------------------- */

/* The panel sits inside the reviewer header controls; style it inline. */
.prefs-panel {
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.prefs-panel > summary {
  /* Inherit header button style */
  background: transparent;
  color: var(--primary-ink);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  /* Override the global summary triangle — not needed here. */
}

.prefs-panel > summary::before {
  display: none;
}

.prefs-panel > summary::-webkit-details-marker {
  display: none;
}

.prefs-panel > summary:hover {
  background: rgba(255,255,255,.2);
}

/* Drop-down body */
.prefs-panel__body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 200;
  min-width: 18rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.75rem;
  /* Override the global "details > *:not(summary)" top-border rule. */
  border-top: 1px solid var(--line);
}

/* Narrow screens: the panel opens in the page flow on its own row, as the check
   pages' panel does. Absolutely positioned, its 18rem min-width ran off a 360px
   phone at Normal and every phone at Largest (text-size spec H3). */
@media (max-width: 41.24rem) {
  .prefs-panel[open] { flex-basis: 100%; }
  .prefs-panel__body {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
  }
}

.prefs-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prefs-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0;
}

.prefs-legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0.25rem;
}

.prefs-options {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.prefs-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;   /* ≥44px is the btn standard; labels can be slightly smaller but still comfortable */
  padding: 0.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.1s;
}

.prefs-option:hover {
  background: var(--bg);
}

.prefs-radio {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.prefs-save-btn {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--primary);
  color: var(--primary-ink);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s;
}

.prefs-save-btn:hover {
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   33. ACCESSIBILITY — login admin note
   -------------------------------------------------------------------------- */

.login-admin-note {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ==========================================================================
   34. ADMIN COMPONENTS
   All colours use var(--…) tokens so dark/contrast themes work automatically.
   No hard-coded colour values anywhere in this section.
   ========================================================================== */

/* --- 34a. Admin section modifiers & utilities ----------------------------- */

/* Section with a form inside — tighter top padding to align legend to h2 */
.admin-section--form {
  /* no additional override needed; inherits .admin-section padding */
}

/* Row of action links/buttons below a heading */
.admin-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* "← Back to …" link line */
.admin-section__back {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

/* --- 34b. Inline form (used inside table cells) --------------------------- */

.inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* --- 34c. Buttons — secondary, danger, success ---------------------------- */

/* Secondary — outlined primary colour; fills on hover */
.btn--secondary {
  background: var(--surface);
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn--secondary:hover {
  background: var(--primary);
  color: var(--primary-ink);
}

/* Danger — red-toned destructive action */
.btn--danger {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
  border: 2px solid var(--status-red-ink);
}

.btn--danger:hover {
  background: var(--status-red-ink);
  color: var(--surface);
}

/* Download — pairs with btn--secondary; aligns the download glyph */
.btn--download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn--download span {
  font-size: 1.05em;
  line-height: 1;
}

/* Success — green-toned positive action */
.btn--success {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
  border: 2px solid var(--status-green-ink);
}

.btn--success:hover {
  background: var(--status-green-ink);
  color: var(--surface);
}

/* --- 34d. Form components ------------------------------------------------- */

/* Generic field wrapper */
.form-field {
  margin-bottom: 1rem;
}

/* Field label */
.form-field__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--ink);
}

/* Inline "(optional)" marker */
.form-field__optional {
  font-weight: 400;
  color: var(--muted);
}

/* Hint text below a label or input */
.form-field__hint {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.125rem;
}

/* Text / email / search inputs (scoped; supplements global input rules) */
.form-field__input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 2.75rem;
  transition: border-color 0.15s;
}

.form-field__input:focus-visible {
  border-color: var(--primary);
}

/* Narrow number input variant */
.form-field__input--narrow {
  width: auto;
  max-width: 6rem;
}

/* Indented field (e.g. shown after a radio selection) */
.form-field--indented {
  margin-left: 1.75rem;
  margin-top: 0.5rem;
}

/* Textarea */
.form-field__textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
  transition: border-color 0.15s;
}

.form-field__textarea:focus-visible {
  border-color: var(--primary);
}

/* Select */
.form-field__select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 2.75rem;
  transition: border-color 0.15s;
}

.form-field__select:focus-visible {
  border-color: var(--primary);
}

/* Compact select for inline table rows */
.form-field__select--sm {
  width: auto;
  min-width: 10rem;
  min-height: 2.25rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Hint text paragraph inside a form section */
.form-hint {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Fieldset with visible border */
.form-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.form-fieldset__legend {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.25rem;
}

/* Checkbox / radio row */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 2.75rem;   /* ≥44 px tap target */
  padding: 0.375rem 0;
}

.form-check__input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.1875rem;
}

.form-check__label {
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--ink);
  line-height: 1.4;
}

/* Dimmer email hint inside a check label */
.form-check__email {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Row of action buttons at the bottom of a form */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Two-column tick-box grid for source selection (allocation Panels 1 & 2).
   Keeps a long source list tidy; collapses to one column on narrow screens. */
.source-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

@media (max-width: 520px) {
  .source-check-grid {
    grid-template-columns: 1fr;
  }
}

/* Select all / Clear controls above a checkbox grid */
.check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* --- 34e. Add-reviewer form (reviewer roster page) ----------------------- */

.add-reviewer-form__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.add-reviewer-form__legend {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.25rem;
}

/* --- 34f. Reviewer roster table ------------------------------------------ */

.reviewer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.reviewer-table th,
.reviewer-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.reviewer-table th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
}

.reviewer-table tr:hover td {
  background: var(--bg);
}

.reviewer-table__caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  caption-side: top;
  padding-bottom: 0.375rem;
}

.reviewer-table__row--inactive td {
  opacity: 0.65;
}

/* Utility paragraph when table is empty */
.reviewer-empty {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --- 34g. Status badges (reviewer roster, reports) ----------------------- */

/* Base badge */
.status-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
}

.status-badge--active {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
}

.status-badge--inactive {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

/* Hard mismatch (Yes/No conflict) */
.status-badge--hard {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
}

/* Soft mismatch (e.g. Yes/Unsure) */
.status-badge--soft {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

/* Review-status badges (Reports → candidates drill-down). Icon + label, so the
   meaning never rests on colour alone. */
.status-badge--agreement {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
}

.status-badge--hard_mismatch {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
}

.status-badge--soft_mismatch {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

.status-badge--single,
.status-badge--unreviewed {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}

.status-badge__icon {
  margin-right: 0.25rem;
  font-weight: 700;
}

/* --- 34h. Alert banners -------------------------------------------------- */

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.alert--info {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

.alert--preview {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
  border: 1px solid var(--status-green-ink);
}

.alert--warn {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
  border: 1px solid var(--status-amber-ink);
}

.alert--danger {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
  border: 1px solid var(--status-red-ink);
}

/* --- 34i. Summary tiles -------------------------------------------------- */

.summary-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.summary-tile {
  flex: 1 1 10rem;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.summary-tile__value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.summary-tile__label {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Green accent border — all good */
.summary-tile--ok {
  border-color: var(--status-green-ink);
}

/* Red accent border — attention needed */
.summary-tile--warn {
  border-color: var(--status-red-ink);
}

/* Clickable tile — drills into the candidate table. */
.summary-tile--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.summary-tile--link:hover,
.summary-tile--link:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

.summary-tiles__hint {
  margin: -0.5rem 0 1.5rem;
  font-size: 0.875rem;
}

/* --- Tabs (progressive enhancement) ------------------------------------- */
/* No-JS: tablist hidden, all panels visible (stacked). JS adds
   .tabs--enhanced, reveals the tablist and shows one panel at a time. */
.tabs__list {
  display: none;
}

.tabs--enhanced .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}

.tabs__tab {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
}

.tabs__tab:hover {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--line);
  margin-bottom: -1px;
  font-weight: 700;
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Class specificity beats .admin-section so a hidden panel really hides. */
.tabs--enhanced .tabs__panel[hidden] {
  display: none;
}

/* --- 34j. Mismatch type filter ------------------------------------------- */

.mismatch-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.mismatch-filter__label {
  font-size: 0.875rem;
  color: var(--muted);
}

.mismatch-filter__link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  min-height: 2.75rem;  /* ≥44 px */
  line-height: 2.25rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--primary);
  border: 1px solid var(--line);
  font-size: 0.9375rem;
  transition: background 0.12s, color 0.12s;
}

.mismatch-filter__link:hover {
  background: var(--bg);
  text-decoration: none;
}

.mismatch-filter__link--active {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* --- 34k. Verdict chips (mismatch table) --------------------------------- */

.verdict-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.verdict-chip {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

.verdict-chip--yes {
  background: var(--status-green-bg);
  color: var(--status-green-ink);
}

.verdict-chip--no {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
}

.verdict-chip--unsure {
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

/* --- 34l. Report table --------------------------------------------------- */

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.report-table th,
.report-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.report-table th {
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.report-table__caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  caption-side: top;
  padding-bottom: 0.375rem;
}

.report-table__row--inactive td {
  opacity: 0.65;
}

/* --- 34m. Notes list (inside mismatch details) --------------------------- */

.notes-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  font-size: 0.9375rem;
}

/* --- 34n. Muted utility class --------------------------------------------- */

.muted {
  color: var(--muted);
  font-size: 0.875rem;
}

/* --- 34o. Reviewer name/email text in tables ----------------------------- */

.reviewer-name {
  font-weight: 600;
  color: var(--ink);
}

.reviewer-email {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --- 34p. Candidate ID/name text in tables ------------------------------- */

.candidate-id {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--ink);
}

.candidate-name {
  font-size: 0.9375rem;
  color: var(--ink);
}

/* --- 34q. Coverage badge (allocation table) ------------------------------ */

.coverage-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.25rem;
  background: var(--status-amber-bg);
  color: var(--status-amber-ink);
}

.coverage-badge--0 {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
}

/* --- 34s. Reviewer chip (allocation table) ------------------------------- */

.reviewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
}

.reviewer-chip__email {
  color: var(--ink);
}

.reviewer-chip__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.reviewer-chip__remove-btn:hover {
  background: var(--status-red-bg);
  color: var(--status-red-ink);
}

/* --- 34t. Filter toolbar (allocation table) ------------------------------ */

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 10rem;
}

.filter-toolbar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 0;
}

/* --- 34u. Bulk action bar ------------------------------------------------ */

.bulk-action-bar {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--status-amber-bg);
  border: 1px solid var(--status-amber-ink);
  border-radius: var(--radius);
  color: var(--status-amber-ink);
}

/* --- 34v. Table wrapper (horizontal scroll) ------------------------------ */

.table-wrapper {
  overflow-x: auto;
  margin-bottom: 1rem;
}

/* --- 34w. Allocation table ----------------------------------------------- */

.allocation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.allocation-table th,
.allocation-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.allocation-table th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
}

.allocation-table tr:hover td {
  background: var(--bg);
}

.allocation-table__caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  caption-side: top;
  padding-bottom: 0.375rem;
}

.allocation-table__empty {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Ensure the add-reviewer cell doesn't stretch awkwardly */
.allocation-table__add {
  white-space: nowrap;
}

/* Inline form for add-reviewer row */
.add-reviewer-row-form {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- 34x. Admin nav wrapper (no extra rules needed beyond list/link) ----- */

.admin-nav {
  flex: 1;
}

/* --- 34y. Admin header signout form -------------------------------------- */

.admin-header__signout-form {
  display: inline;
}

/* --- 34z. Description block — heading + clamp/toggle (#19) --------------- */

.card-description__heading {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1rem 0 0.25rem;
}

.card-description__text {
  margin: 0;
  line-height: 1.55;
}

.card-description__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-description__text--expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.card-description__toggle {
  margin-top: 0.4rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.card-description__toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.card-description__toggle[aria-expanded="true"] .card-description__toggle-arrow {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Reviewer-view field-visibility settings (/admin/display)
   --------------------------------------------------------------------------- */
.display-settings__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.display-settings__legend {
  font-weight: 600;
  padding: 0 0.5rem;
}

.display-settings__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.display-settings__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Reviewer website panel (right of the candidate card)
   --------------------------------------------------------------------------- */
.review-main__split {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
.review-main__primary {
  flex: 1 1 24rem;
  min-width: 0;            /* let the card shrink instead of overflowing */
}
/* Secondary column: web-search button + website panel, stacked. Sits alongside
   the card on wide screens and wraps below it when narrow. */
.review-secondary {
  flex: 0 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* .btn.websearch-btn (0,2,0) must out-specify the base `a.btn` (0,1,1), which
   sets white-space:nowrap — otherwise a long org name spills out of the button. */
.btn.websearch-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  min-height: 2.75rem;
}
.website-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}
.website-panel__heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* Preview card (status = ok) — the whole card is a link */
.website-preview {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--bg);
  transition: background 0.12s;
}
.website-preview:hover { background: var(--surface); }
.website-preview__img {
  width: 100%;
  height: auto;
  max-height: 9rem;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
.website-preview__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.website-preview__favicon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
}
.website-preview__title { font-weight: 600; }
.website-preview__host { font-size: 0.8125rem; color: var(--primary); word-break: break-all; }
.website-preview__desc { font-size: 0.875rem; color: var(--muted); }
.website-preview__stamp { font-size: 0.6875rem; color: var(--muted); }

/* Holding card (no usable preview) */
.website-holding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.website-holding__msg { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* "Is this the correct site?" + supply box */
.website-check {
  border: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}
.website-check__legend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.25rem;
  width: 100%;
}
.website-check__option { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }

.website-supply { margin-top: 0.75rem; }
.website-supply__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.website-supply__input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  background: var(--bg);
  color: inherit;
}
.website-none { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.875rem; }

/* Website-feedback rollup: compact list of supplied URLs in the Reports table */
.website-url-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.website-url-list a { word-break: break-all; }


/* --------------------------------------------------------------------------
   5a. LARGEST TEXT — reflow bands and narrow-screen hardening
   rem in a media query is the
   browser's initial 16px, not the root size, so at Largest (22px) each
   breakpoint arrives late. These bands apply the existing narrow rules, and
   only those, across the extra widths where Largest is already that cramped.
   At the end of the file so the equal-specificity overrides win.
   -------------------------------------------------------------------------- */

/* Review layout: two columns only once the card gets its 24rem basis beside
   the 14rem sidebar — 56rem/896px (native breakpoint 45rem/720px). */
@media (min-width: 45rem) and (max-width: 55.99rem) {
  :root[data-text="largest"] .review-layout,
  :root[data-text="largest"] .review-layout--sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  :root[data-text="largest"] .review-sidebar {
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  :root[data-text="largest"] .review-sidebar--collapsed {
    display: none;
  }
}

/* Phone stacking up to 41.25rem/660px (native 30rem × 22/16). */
@media (min-width: 30rem) and (max-width: 41.24rem) {
  :root[data-text="largest"] .vote-options { flex-direction: column; }
  :root[data-text="largest"] .card-nav {
    flex-direction: column;
    align-items: flex-start;
  }
  :root[data-text="largest"] .reviewer-header {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* H1 (every text size): on narrow screens buttons wrap instead of running off
   the edge — base .btn is nowrap, right on a desktop and wrong on a phone. */
@media (max-width: 41.24rem) {
  .btn,
  button[type="submit"],
  a.btn,
  .vote-submit {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
}

/* Generated one-time sign-in link (admin Reviewers page). */
.admin-section--highlight {
  border: 2px solid var(--primary);
}

.generated-link-block__input {
  width: 100%;
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.generated-link-block__note {
  margin-top: 0.5rem;
  color: var(--muted);
}