/* ===========================================================================
   DebateNow — "Bright modern SaaS" design system (v2)
   White, airy surfaces and generous whitespace; one electric-blue accent;
   near-black navy for dark cards and the footer. Large rounded corners, soft
   subtle shadows, hairline borders, pill buttons. DM Sans throughout.
   Mirrors public/assets/landing.css. Legacy class names are kept so every
   existing view restyles in place; the old "Debate Society" identity is gone.
   =========================================================================== */

:root {
  --nav-h: 72px;

  /* white surfaces + soft tints (was warm "paper") */
  --paper:    #ffffff;   /* primary surface */
  --paper-2:  #f3f5fa;   /* light wells / mist */
  --paper-3:  #eef1f8;   /* hover wash */
  --ink:      #0c1020;   /* near-black navy text */
  --ink-2:    #2a3048;   /* secondary text */
  --muted:    #565d72;   /* meta text — AA on white (~6.2:1) */
  --faint:    #61687d;   /* tertiary meta — AA on white AND paper-2 (>=4.5:1) */

  /* electric-blue accent + debate sides */
  --accent:       #2b5cff;  /* electric royal accent */
  --accent-ink:   #1c43d8;  /* darker for text-on-white / pressed (~6.7:1) */
  --accent-wash:  #e7edff;
  --pro:          #1c43d8;  /* Pro side — blue family */
  --pro-wash:     #e7edff;
  --con:          #c81e4a;  /* Con side — rose */
  --con-wash:     #ffe4ea;

  /* hairline rules */
  --rule:        rgba(12, 16, 32, 0.10);
  --rule-2:      rgba(12, 16, 32, 0.16);
  --rule-strong: rgba(12, 16, 32, 0.24);

  --danger:  #c81e4a;
  --success: #1f9d61;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* DM Sans everywhere — the legacy "serif" role now also resolves to DM Sans */
  --serif: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --navy:      #0d1330;   /* dark card background */
  --navy-2:    #131a3d;
  --shadow-card: 0 1px 2px rgba(12,16,32,.04), 0 18px 40px -24px rgba(12,16,32,.22);
  --shadow-soft: 0 1px 2px rgba(12,16,32,.04), 0 10px 30px -20px rgba(12,16,32,.16);

  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- layout shell ----- */
.site { display: flex; flex-direction: column; min-height: 100vh; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

main.content { flex: 1 0 auto; padding: clamp(34px, 6vh, 68px) 0 80px; }

/* ----- masthead nav — a two-tier editorial nameplate + section rule ----- */
.nav {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
.nav-bar-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.brand .mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
}
.brand .mark svg { width: 18px; height: 18px; }
.brand .word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.brand .word b { color: var(--accent-ink); font-weight: 600; }

.nav-dateline {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted);
}

/* tier 2 — the section rule (now sections only; account moved up to tier 1) */
.nav-sections { border-top: 1px solid var(--rule); }
.nav-sections-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px 30px;
  min-height: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.nav-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Account cluster — top-right of the nameplate row. */
.nav-account {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin-left: auto;
}
.nav-logout { display: block; margin: 0; }

/* Go Pro — a direct text link that sits beside the avatar. */
.nav-gopro {
  font-weight: 600;
  color: var(--ink-2, var(--muted));
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}
.nav-gopro:hover { color: var(--ink); }
.nav-pro-tag { text-decoration: none; line-height: 0; }

/* User avatar + dropdown (a no-JS <details> menu). */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 3px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  border: 1px solid transparent;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:hover { border-color: var(--rule-strong, var(--rule)); }
.user-menu[open] > .user-menu-trigger { border-color: var(--rule-strong, var(--rule)); background: var(--surface-2, transparent); }
.user-avatar {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
}
.user-avatar-lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 18px; }
.user-menu-caret { width: 12px; height: 12px; color: var(--muted); }
.user-menu[open] > .user-menu-trigger .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--rule-strong, var(--rule));
  border-radius: 16px;
  box-shadow: var(--shadow-pop, 0 18px 46px rgba(12, 16, 32, 0.16));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu-id {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  margin-bottom: 4px;
  border-radius: 11px;
  text-decoration: none;
  color: var(--ink);
}
.user-menu-id:hover { background: var(--surface-2, rgba(12,16,32,0.04)); }
.user-menu-id-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-menu-handle { font-weight: 600; font-size: 15px; }
.user-menu-sub { font-size: 12.5px; color: var(--muted); }
.user-menu-panel::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
  margin: 2px 4px 6px;
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.14s ease;
}
.user-menu-item:hover { background: var(--surface-2, rgba(12,16,32,0.05)); }
.user-menu-item.is-active { color: var(--accent-ink); }
.user-menu-signout { color: var(--danger, #c81e4a); }
.user-menu-item--mobile { display: none; }

.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 0;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 9px;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { right: 0; background: var(--ink); }
.nav-link-pro { padding-top: 0; padding-bottom: 0; }
.nav-link-pro::after { display: none; }

/* ----- masthead notification bell ----- */
.nav-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: var(--ink-2);
  transition: color 0.18s ease;
}
.nav-bell:hover,
.nav-bell.is-active { color: var(--ink); }
.nav-bell-icon { width: 19px; height: 19px; display: block; }
.nav-bell-badge {
  position: absolute;
  top: -3px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--paper);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 9px;
}

/* hamburger disclosure — hidden until the menu collapses */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s ease;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle-box { position: relative; width: 18px; height: 12px; }
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.nav-toggle-bar { top: 5px; }
.nav-toggle-bar::before { content: ""; top: -5px; }
.nav-toggle-bar::after { content: ""; top: 5px; }
.nav[data-open] .nav-toggle-bar { background: transparent; }
.nav[data-open] .nav-toggle-bar::before { transform: translateY(5px) rotate(45deg); }
.nav[data-open] .nav-toggle-bar::after { transform: translateY(-5px) rotate(-45deg); }

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

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

/* kept name for compatibility: now the ink-blue secondary solid */
.btn-violet { background: var(--pro); color: var(--paper); }
.btn-violet:hover { background: #16293f; }

.btn-ghost {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-3); }

/* a restrained destructive action — outlined vermilion, fills on hover */
.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: var(--paper); }

.btn-block { width: 100%; }
.btn-lg { min-height: 50px; padding: 14px 28px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 9px 16px; font-size: 13.5px; }

/* an underline text-link / tertiary action */
.link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.25s ease, color 0.2s ease;
}
.link:hover { color: var(--accent-ink); background-size: 0% 1.5px; }

/* ----- tags / labels (editorial, not pills) ----- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.pill .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.pill.pro {
  padding: 4px 8px;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  letter-spacing: 0.1em;
}

/* eyebrow / kicker */
.kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

/* ----- cards / panels ----- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
}

/* a quiet logged-out / aside note card, shared across pages */
.card-note { max-width: 620px; margin-top: 8px; }
.card-note p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0; }

/* ----- flash messages ----- */
.flash-area { margin-bottom: 26px; display: grid; gap: 12px; }
.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 14.5px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-left-width: 3px;
}
.flash::before {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The badge word comes from the view via data-label so it localizes with the
   page (24 locales) instead of being hardcoded English in CSS. */
.flash.success { border-left-color: var(--success); color: var(--ink); }
.flash.success::before { content: attr(data-label); color: var(--success); }
.flash.error { border-left-color: var(--danger); color: var(--ink); }
.flash.error::before { content: attr(data-label); color: var(--danger); }

/* ----- forms ----- */
.auth-wrap { max-width: 460px; margin: clamp(8px, 3vh, 28px) auto; }
.auth-wrap-wide { max-width: 660px; }
.auth-wrap h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 10px;
}
.auth-wrap .sub { color: var(--muted); margin-bottom: 28px; font-size: 16px; }

.field { margin-bottom: 20px; }
/* Direct children only: nested control-labels (e.g. the language chips) must
   not inherit the uppercase form-label treatment. */
.field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { min-height: auto; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.field .hint { font-size: 13px; color: var(--muted); margin-top: 7px; }
.field .err { font-size: 13px; color: var(--danger); margin-top: 7px; font-weight: 600; }
.time-input { margin-bottom: 8px; }

.form-foot { margin-top: 24px; color: var(--muted); font-size: 15px; }
.form-foot a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.form-foot a:hover { color: var(--accent-ink); }

/* ----- page heading ----- */
.page-head { margin-bottom: 32px; }
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.0;
  text-wrap: balance;
}
.page-head .lead {
  color: var(--muted);
  font-size: 17px;
  margin-top: 14px;
  max-width: 60ch;
  line-height: 1.55;
}
.accent-text { color: var(--accent-ink); font-style: italic; }

.page-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ----- footer ----- */
.site-foot {
  flex-shrink: 0;
  padding: 30px 0;
  border-top: 1px solid var(--rule-strong);
  color: var(--muted);
  font-size: 13px;
}
.site-foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.site-foot .foot-brand { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.site-foot a {
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  font-weight: 600;
}
.site-foot a:hover { color: var(--accent-ink); }
/* Quiet PWA install affordance — styled to read as one of the footer links.
   Hidden until the browser fires `beforeinstallprompt` (see layout script). */
.foot-install {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  font-weight: 600;
}
.foot-install:hover { color: var(--ink); }
.foot-install[hidden] { display: none; }
/* Language switcher (EN · NL) — sits with the footer as one of its quiet links. */
.foot-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-foot .foot-lang-link { color: var(--muted); }
.site-foot .foot-lang-link.is-current { color: var(--ink); cursor: default; }
.foot-lang-sep { color: var(--rule-strong); }

/* Language dropdown — used once the UI ships more than four languages. */
.foot-lang-menu { position: relative; font-size: 13px; }
.foot-lang-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius-pill);
  transition: border-color .16s ease, color .16s ease;
}
.foot-lang-menu > summary::-webkit-details-marker { display: none; }
.foot-lang-menu > summary:hover { color: var(--ink); border-color: var(--rule-2); }
.foot-lang-menu .globe { font-size: 14px; }
.foot-lang-menu ul {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 40;
  margin: 0; padding: 6px; list-style: none;
  min-width: 180px; max-height: 320px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  columns: 1;
}
.foot-lang-menu ul a {
  display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none;
}
.foot-lang-menu ul a:hover { background: var(--paper-2); color: var(--ink); }
.foot-lang-menu ul a.is-current { color: var(--accent-ink); font-weight: 600; }
/* In the app footer the trigger sits near the container's left edge, so a
   right-anchored menu opens off-screen — anchor left and cap to the viewport. */
.site-foot .foot-lang-menu ul { left: 0; right: auto; max-width: calc(100vw - 40px); }
@media (max-width: 640px) {
  .foot-lang-menu ul { left: 0; right: auto; max-width: calc(100vw - 40px); min-width: min(240px, calc(100vw - 40px)); }
}
.site-foot .foot-lang-menu > summary { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.2); }
.site-foot .foot-lang-menu > summary:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ===========================================================================
   Legal — Terms + Privacy, set as a single readable editorial column
   =========================================================================== */
.legal {
  max-width: 70ch;
  margin: 0 auto;
  padding-bottom: 24px;
}
.legal-head { margin-bottom: 36px; }
.legal-head h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 62px);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.0;
  margin-top: 4px;
}
.legal-dateline {
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.legal-head .lead {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
  margin-top: 20px;
}
.legal-body h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 26px);
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.15;
  margin: 38px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.legal-body h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.legal-body p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 1.25em;
  list-style: none;
}
.legal-body li {
  position: relative;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 10px;
  padding-left: 0.2em;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: -0.95em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--accent-ink); }
.legal-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

/* ===========================================================================
   The Field Guide — an editorial index + premium per-article reading layout
   =========================================================================== */

/* ----- Index ----- */
.guide-index { max-width: 760px; margin: 0 auto; padding-bottom: 24px; }
.guide-index-head { margin-bottom: 30px; }
.guide-index-head h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 62px);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.0;
  margin-top: 4px;
}
.guide-standfirst {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
  margin-top: 18px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--ink);
  max-width: 60ch;
}

.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list-item { border-bottom: 1px solid var(--rule); }
.guide-list-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 22px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.16s ease, padding-left 0.16s ease;
}
.guide-list-link:hover { background: var(--paper-3); padding-left: 12px; }
.guide-list-num {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.guide-list-text { display: block; }
.guide-list-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 25px);
  letter-spacing: -0.012em;
  font-weight: 600;
  line-height: 1.18;
}
.guide-list-dek {
  display: block;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin-top: 5px;
}
.guide-list-arrow {
  color: var(--faint);
  font-size: 18px;
  align-self: center;
  transition: transform 0.16s ease, color 0.16s ease;
}
.guide-list-link:hover .guide-list-arrow { color: var(--accent-ink); transform: translateX(3px); }
.guide-index-foot { margin-top: 30px; color: var(--muted); font-size: 15.5px; }
.guide-index-foot .link, .guide-back .link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.guide-index-foot .link:hover, .guide-back .link:hover { color: var(--accent-ink); }

/* ----- Article ----- */
.guide-article { max-width: 70ch; margin: 0 auto; padding-bottom: 24px; }
.guide-article-head { margin-bottom: 30px; }
.guide-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.guide-eyebrow a { color: var(--accent-ink); text-decoration: none; }
.guide-eyebrow a:hover { color: var(--ink); }
.guide-eyebrow-sep { color: var(--rule-strong); }
.guide-article-head h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5.5vw, 56px);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.guide-dek {
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.55;
  margin-top: 16px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--ink);
}

.guide-body h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 25px);
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.15;
  margin: 34px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.guide-body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.guide-body ul { margin: 0 0 18px; padding-left: 1.25em; list-style: none; }
.guide-body li {
  position: relative;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 10px;
  padding-left: 0.2em;
}
.guide-body li::before {
  content: "";
  position: absolute;
  left: -0.95em;
  top: 0.66em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-body a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.guide-body a:hover { color: var(--accent-ink); }

/* "Try it" callout */
.guide-tryit {
  margin: 34px 0 0;
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.guide-tryit-label {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  margin-bottom: 8px;
}
.guide-tryit p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }

/* Related-articles footer */
.guide-related { margin-top: 44px; padding-top: 22px; border-top: 2px solid var(--ink); }
.guide-related-head {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 16px;
}
.guide-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guide-related-list a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.guide-related-list a:hover { border-color: var(--ink); background: var(--paper-3); }
.guide-related-title {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}
.guide-related-dek { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.guide-back { margin-top: 30px; font-size: 15.5px; }

.page-head-aside { margin-top: 12px; color: var(--muted); font-size: 15px; }
.page-head-aside .link, .welcome-guide-link a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.page-head-aside .link:hover, .welcome-guide-link a:hover { color: var(--accent-ink); }
.welcome-guide-link { margin-top: 18px; color: var(--muted); font-size: 15px; text-align: center; }

/* ===========================================================================
   Board — an op-ed index of debates
   =========================================================================== */
.board-section { margin-bottom: 48px; }
.section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-title .count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-left: auto;
}

/* the listing: a single editorial column with hairline dividers */
.card-grid {
  display: flex;
  flex-direction: column;
}
.card-grid > * { border-top: 1px solid var(--rule); }
.card-grid > *:first-child { border-top: none; }

.empty-state {
  border-top: 1px solid var(--rule);
  padding: 26px 2px;
  color: var(--muted);
  font-size: 16px;
  font-style: italic;
  font-family: var(--serif);
}
.empty-state a {
  font-style: normal;
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ----- notification inbox — op-ed index of recent events ----- */
.notif-markall { margin: 0; }
.notif-list { list-style: none; border-top: 1px solid var(--rule-strong); }
.notif-item { border-bottom: 1px solid var(--rule); }
.notif-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 2px;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.18s ease, background 0.18s ease;
}
.notif-line:hover { color: var(--ink); background: var(--paper-3); }
.notif-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule-2);
}
.notif-item.is-unread .notif-dot { background: var(--accent); border-color: var(--accent); }
.notif-text {
  flex: 1 1 auto;
  font-size: 16px;
  font-family: var(--serif);
  line-height: 1.4;
}
.notif-item.is-unread .notif-text { color: var(--ink); font-weight: 500; }
.notif-time {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----- challenge card -> index row ----- */
.challenge-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 28px;
  align-items: start;
  padding: 24px 2px 26px 22px;
  transition: background 0.18s ease;
}
.challenge-card::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  background: var(--rule-2);
  transition: background 0.18s ease;
}
.challenge-card:hover { background: linear-gradient(90deg, var(--paper-3), transparent 60%); }
.challenge-card:hover::before { background: var(--accent); }
a.challenge-card { display: block; text-decoration: none; }
a.challenge-card .cc-topic { margin: 0; }

.cc-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.cc-sides { display: inline-flex; align-items: center; gap: 9px; }
.cc-vs {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 600;
  font-style: italic;
  font-family: var(--serif);
}
.side-pill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 9px;
  border-radius: 2px;
  border: 1px solid;
}
.side-pro { color: var(--pro); border-color: var(--pro); background: var(--pro-wash); }
.side-con { color: var(--con); border-color: var(--con); background: var(--con-wash); }

.status-pill {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.status-pill::before { content: "— "; color: var(--faint); }
.status-pill.status-open { color: var(--accent-ink); }
.status-pill.status-pending { color: var(--muted); }
.status-pill.status-scheduled { color: var(--pro); }

.cc-topic {
  grid-column: 1;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cc-topic a { text-decoration: none; }
.cc-topic a:hover { color: var(--accent-ink); }

.cc-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.cc-label {
  color: var(--faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-right: 6px;
}
.cc-handle {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 2px;
}
.cc-handle:hover { text-decoration-color: var(--accent); color: var(--accent-ink); }
.cc-when { grid-column: 1; font-size: 14px; color: var(--ink-2); margin-top: 4px; }

.cc-actions {
  grid-column: 2;
  grid-row: 2 / 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* Editorial "Add to calendar" link: a quiet underlined link, no glow/pill. */
.cc-cal-link {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cc-cal-link:hover { color: var(--ink); }
.share-cal { margin-top: 12px; text-align: center; }

.cc-accept { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cc-time-label {
  display: block;
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.cc-accept select {
  min-width: 210px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.cc-accept select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ----- profile / me ----- */
.optional { color: var(--faint); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; }
.me-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.me-stats {
  display: flex;
  gap: 0;
  margin: 24px 0 4px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.me-stat {
  padding: 16px 26px 16px 0;
  margin-right: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--rule);
}
.me-stat:last-child { border-right: none; }
a.me-stat { text-decoration: none; transition: background 0.16s ease; }
a.me-stat:hover .me-stat-num { color: var(--accent-ink); }
.me-stat-num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.me-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.me-pro-note {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--pro);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--pro-wash);
  color: var(--ink-2);
  font-size: 14.5px;
}
.me-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* ----- account settings ----- */
.account-section { margin-top: 22px; }
.account-section + .section-rule { margin-top: 38px; }
.account-lead { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.account-lead a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.account-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.account-row-label {
  flex: 0 0 130px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.account-row-value { color: var(--ink); font-size: 15.5px; }
.account-immutable { color: var(--faint); font-size: 13px; font-style: italic; }
/* Button rows sit clear of the divider above them — no control butting a rule. */
.account-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.account-actions .account-lead { margin: 0; }

/* danger zone — a clearly-marked but unflashy destructive section */
.section-rule.danger-rule {
  color: var(--danger);
  border-bottom: 1px solid var(--danger);
}
.danger-zone { border-left: 2px solid var(--danger); padding-left: 18px; }
.danger-confirm { color: var(--danger); font-weight: 600; }

/* ----- masthead: collapse the section rule into a disclosure panel ----- */
@media (max-width: 880px) {
  .nav-dateline { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Tier 2 collapses behind the hamburger — sections only now. */
  .nav-sections {
    display: none;
    border-top: 1px solid var(--rule-strong);
  }
  .nav[data-open] .nav-sections { display: block; }

  .nav-sections-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 18px;
  }
  .nav-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-primary .nav-link {
    padding: 14px 0;
    font-size: 17px;
    border-top: 1px solid var(--rule);
  }
  .nav-primary .nav-link:first-child { border-top: none; }
  .nav-link::after { display: none; }
  .nav-primary .nav-link.is-active { color: var(--accent-ink); }

  /* Account cluster stays in the top bar as compact icons; the inline Go Pro
     and New debate collapse into the avatar dropdown (shown as --mobile items). */
  .nav-account { gap: 10px; }
  .nav-gopro,
  .nav-pro-tag,
  .nav-new-debate { display: none; }
  .user-menu-panel { min-width: 214px; }
  .user-menu-item--mobile { display: block; }
}

/* ----- responsive ----- */
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  body { font-size: 16px; }
  .brand .word { font-size: 21px; }
  .challenge-card { grid-template-columns: 1fr; padding-right: 0; }
  .cc-actions { grid-column: 1; grid-row: auto; align-items: stretch; margin-top: 8px; }
  .cc-accept { align-items: stretch; }
  .cc-accept select { min-width: 0; width: 100%; }
  .cc-actions .btn { width: 100%; }
}

/* ===========================================================================
   Debate room + spectator room
   =========================================================================== */
.debate-room { max-width: 780px; margin: 0 auto; }
.dr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.dr-myside { color: var(--muted); font-size: 14px; }
.dr-myside .side-pill { margin-left: 6px; }
.dr-topic {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 46px); letter-spacing: -0.02em;
  font-weight: 600; line-height: 1.08; margin-bottom: 26px;
  overflow-wrap: break-word;
}
.dr-sides { display: flex; align-items: stretch; gap: 16px; margin-bottom: 28px; }
.dr-side {
  flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--rule-2);
}
.dr-side.is-me { border-color: var(--accent); border-left-width: 3px; }
.dr-side .cc-handle { font-size: 15px; }

.dr-reminder { text-align: center; padding: 36px 28px; }
.dr-reminder h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 12px; }
.dr-reminder .lead { margin: 0 auto 24px; max-width: 520px; color: var(--muted); }
.dr-reminder .hint { margin-top: 16px; }

.dr-stage { text-align: center; padding: 20px 0; }
.dr-ring {
  width: 220px; height: 220px; margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--paper) 0 78%, transparent 80% 100%),
    conic-gradient(var(--accent) 0deg, var(--pro) 220deg, var(--rule) 220deg);
  border: 1px solid var(--rule-2);
}
.dr-count { font-family: var(--serif); font-size: 66px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.dr-phase-sub { font-size: 11px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.14em; }
.dr-phase-label { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.dr-turn { font-size: 15.5px; color: var(--muted); min-height: 22px; }
.dr-turn.is-my-turn { color: var(--accent-ink); font-weight: 600; }
.dr-mic {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 9px 16px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--rule-2);
  font-size: 14px; color: var(--muted);
}
.dr-mic-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); transition: background 0.2s; }
.dr-mic-dot.is-live { background: var(--success); }

.dr-ended { margin-top: 8px; }
.dr-ended-banner { text-align: center; margin-bottom: 18px; }
.dr-ended-banner h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 8px; }

.rating-form { max-width: 560px; margin: 0 auto; }
.rating-form textarea {
  width: 100%; resize: vertical;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.rating-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.dr-audience { color: var(--muted); font-size: 14px; }
.watch-room .dr-stage { text-align: left; }

@media (max-width: 640px) {
  .dr-sides { flex-direction: column; }
  .dr-ring { width: 184px; height: 184px; }
  .dr-count { font-size: 54px; }
}

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

/* ===========================================================================
   ITERATION 2 — bespoke pass in the house identity (superseded by the bright layers below)
   Debate room · spectator · profiles · Pro · public share · auth eyebrow.
   Ink-on-paper, Fraunces + Inter Tight, hairline rules, flat surfaces,
   one vermilion accent, ink-blue (Pro) vs vermilion (Con). No glow/glass.
   =========================================================================== */

/* ---- shared editorial eyebrow on auth + small pages ---- */
.auth-wrap .card { position: relative; }
.auth-wrap .card::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 3px; background: var(--accent);
}
.auth-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-ink); margin-bottom: 14px;
}
.auth-kicker::before { content: ""; width: 24px; height: 1.5px; background: var(--accent); }

/* ---- shared live badge (debate room + spectator) ---- */
.dr-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-ink);
}
.dr-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(226, 87, 31, 0.55);
  animation: dr-pulse 1.8s ease-out infinite;
}
@keyframes dr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(226, 87, 31, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(226, 87, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 87, 31, 0); }
}

/* ===========================================================================
   Debate room (override + extend the iteration-1 .dr-* rules)
   =========================================================================== */
.debate-room { max-width: 760px; }
.dr-head {
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.dr-myside { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.dr-myside .side-pill { margin-left: 8px; }

.dr-motion-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-ink); margin-bottom: 10px;
}
.dr-topic {
  font-size: clamp(30px, 5.2vw, 50px);
  line-height: 1.05; margin-bottom: 30px; text-wrap: balance;
}

/* sides — ink-blue Pro vs vermilion Con, as a single ruled trio */
.dr-sides {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 0; margin-bottom: 30px;
}
.dr-side {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 20px 20px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
}
.dr-sides .dr-side-pro { border-top: 3px solid var(--pro); }
.dr-sides .dr-side-con { border-top: 3px solid var(--con); }
.dr-side-tag {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--faint);
}
.dr-side .side-pill { align-self: flex-start; }
.dr-side .cc-handle { font-size: 16px; }
.dr-sides .dr-side.is-me { background: var(--paper-3); border-color: var(--rule-2); border-left-width: 1px; }
.dr-sides .dr-side-pro.is-me { border-top-color: var(--pro); box-shadow: inset 0 0 0 1px var(--pro); }
.dr-sides .dr-side-con.is-me { border-top-color: var(--con); box-shadow: inset 0 0 0 1px var(--con); }
.dr-side-you {
  margin-top: 2px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-ink);
}
.dr-sides .cc-vs {
  align-self: center; padding: 0 16px;
  font-size: 13px; font-style: italic; font-family: var(--serif); color: var(--faint);
}

/* civility note — an editorial house rule */
.dr-reminder { text-align: center; padding: clamp(30px, 5vw, 44px) clamp(22px, 4vw, 40px); }
.dr-reminder .dr-rule-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--muted); margin-bottom: 14px;
}
.dr-reminder h2 {
  font-size: clamp(24px, 3.6vw, 32px); letter-spacing: -0.015em; line-height: 1.08;
}
.dr-reminder h2 em { font-style: italic; color: var(--accent-ink); }
.dr-reminder .lead { margin: 14px auto 26px; }
.dr-reminder .hint { margin-top: 16px; color: var(--muted); }

/* the clock — confident editorial centerpiece */
.dr-stage { padding: 6px 0 10px; }
.dr-ring {
  position: relative;
  width: 234px; height: 234px; margin: 0 auto 24px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.dr-ring::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%; border: 1px solid var(--rule);
}
.dr-ring::after {
  content: ""; position: absolute; top: -2px; left: 50%;
  width: 3px; height: 16px; margin-left: -1.5px; background: var(--accent);
}
.dr-count {
  font-size: 72px; letter-spacing: -0.04em; line-height: 0.9;
}
.dr-phase-sub { margin-top: 8px; }
.dr-phase-label {
  font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.01em; margin-bottom: 6px;
}
.dr-turn { font-size: 15px; min-height: 22px; letter-spacing: 0.01em; }
.dr-turn.is-my-turn { color: var(--accent-ink); font-weight: 600; }
.dr-mic {
  margin-top: 18px; padding: 9px 18px;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600;
}
.dr-ended-banner { padding: clamp(26px, 4vw, 36px); }
.dr-ended-banner h2 { font-size: clamp(24px, 3.6vw, 30px); }

/* ===========================================================================
   Spectator room
   =========================================================================== */
.watch-room .dr-head { border-bottom: 2px solid var(--ink); }
.watch-room .dr-audience {
  color: var(--ink-2); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
}
.watch-room .dr-audience #watch-audience-count {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: 0;
}
.watch-room .dr-stage {
  text-align: left; padding: 0;
  border: 1px solid var(--rule-2); border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: 24px clamp(20px, 4vw, 30px);
}
.watch-room .dr-stage .dr-mic { margin-top: 0; }
.watch-room .dr-stage .hint { color: var(--muted); }
.watch-room .cc-actions { flex-direction: row; align-items: center; }

/* ===========================================================================
   Profile (public + me) — editorial dossier
   =========================================================================== */
.profile-card { position: relative; }
.profile-card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 3px; background: var(--accent);
}
.profile-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-ink); margin-bottom: 14px;
}
.me-head { align-items: center; gap: 12px; }
.me-head h1 {
  font-family: var(--serif); font-size: clamp(34px, 5.5vw, 52px);
  letter-spacing: -0.025em; font-weight: 600; line-height: 1; margin: 0;
}
.profile-name {
  color: var(--muted); margin: 6px 0 0; font-size: 17px;
  font-family: var(--serif); font-style: italic;
}
.profile-actions { margin: 20px 0 4px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-self-note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.profile-self-note a { color: var(--ink); font-weight: 600; }

.section-rule {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin: 30px 0 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.section-rule .count {
  margin-left: auto;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
}

/* average-ratings readout */
.avg-readout { margin-top: 2px; }
.avg-row {
  display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
  gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.avg-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
}
.avg-track {
  position: relative; height: 6px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
}
.avg-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); }
.avg-val {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; letter-spacing: -0.02em;
}
.avg-val.is-empty { color: var(--faint); }

/* honours — editorial distinctions, earned-prominent / locked-subtle */
.honours { margin-top: 2px; }
.honour {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.honour:last-child { border-bottom: none; }
.honour-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 3px;
  font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1;
}
.honour.is-earned .honour-seal { background: var(--accent); color: var(--paper); }
.honour.is-locked .honour-seal {
  background: var(--paper-2); color: var(--faint); border: 1px solid var(--rule-2);
}
.honour-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.honour-title {
  font-family: var(--serif); font-weight: 600; font-size: 16.5px;
  letter-spacing: -0.01em; color: var(--ink);
}
.honour.is-locked .honour-title { color: var(--muted); }
.honour-desc { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.honour.is-locked .honour-desc { color: var(--faint); }
.honour-progress {
  font-family: var(--serif); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: right;
}
.honour-progress .honour-unit {
  font-family: var(--sans); font-variant-numeric: normal;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint); display: block; margin-top: 1px;
}

/* interests as editorial tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  display: inline-flex; align-items: center;
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 2px; background: var(--paper);
}
.tag::before { content: "#"; color: var(--accent-ink); margin-right: 4px; font-weight: 700; }

/* ===========================================================================
   Pro paywall — editorial pricing
   =========================================================================== */
.pro-wrap { max-width: 940px; margin: 0 auto; }
.pro-hero { text-align: center; margin-bottom: 8px; }
.pro-hero .kicker { display: inline-block; margin-bottom: 16px; }
.pro-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.03em; line-height: 1; text-wrap: balance;
}
.pro-hero h1 em { font-style: italic; color: var(--accent-ink); }
.pro-hero .sub { color: var(--muted); max-width: 56ch; margin: 16px auto 0; font-size: 17px; line-height: 1.55; }

.pro-features {
  margin: clamp(28px, 5vw, 44px) 0;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.pro-features-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.pro-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.pro-feature {
  padding: 26px 26px 30px 0; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
.pro-feature:last-child { border-right: none; padding-right: 0; }
.pro-feature .ico {
  width: 30px; height: 30px; color: var(--accent-ink);
  display: grid; place-items: center;
}
.pro-feature .ico svg { width: 28px; height: 28px; }
.pro-feature h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.pro-feature p { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 32ch; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.plan {
  position: relative; padding: 28px;
  border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper);
  display: flex; flex-direction: column;
}
.plan.best { border-color: var(--ink); border-top: 3px solid var(--accent); }
.plan .tag-best {
  position: absolute; top: -11px; left: 26px;
  background: var(--accent); color: var(--paper);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 2px;
}
.plan .plan-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px;
}
.plan .price {
  font-family: var(--serif); font-size: 46px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.plan .per { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.plan .save { color: var(--success); font-size: 13px; font-weight: 600; margin-top: 6px; }
.plan form { margin-top: 22px; margin-bottom: 0; }
.pro-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 24px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.pro-foot.pro-legal { margin-top: 10px; }
.pro-legal a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.pro-legal a:hover { color: var(--accent-ink); }

.pro-status-card { text-align: center; position: relative; }
.pro-status-card .pill.pro { font-size: 13px; padding: 7px 14px; }
.pro-status-card h1 { font-family: var(--serif); margin-top: 18px; }

/* ===========================================================================
   Public share / challenge page
   =========================================================================== */
.share-card { position: relative; }
.share-card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 3px; background: var(--accent);
}
.share-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.share-kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-ink);
}
.share-topic {
  font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: -0.025em; font-weight: 600; line-height: 1.06;
  margin: 0 0 24px; text-wrap: balance; overflow-wrap: break-word;
}
.share-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; margin-bottom: 24px; }
.share-side {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 20px 16px; border: 1px solid var(--rule-2); background: var(--paper);
}
.share-side-pro { border-top: 3px solid var(--pro); }
.share-side-con { border-top: 3px solid var(--con); }
.share-side-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
}
.share-side-pro .share-side-tag { color: var(--pro); }
.share-side-con .share-side-tag { color: var(--con); }
.share-sides .cc-vs { align-self: center; padding: 0 14px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--faint); }
.share-meta { display: grid; gap: 6px; margin-bottom: 22px; }
.share-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.rematch {
  margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink);
}
.rematch-head { margin-bottom: 16px; }
.rematch-kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-ink);
}
.rematch-title {
  font-family: var(--serif); font-size: clamp(20px, 3vw, 27px);
  letter-spacing: -0.02em; font-weight: 600; line-height: 1.1; margin: 6px 0 6px;
}
.rematch-sub { color: var(--muted); font-size: 14.5px; margin: 0; }
.result-note {
  font-family: var(--serif); font-style: italic; color: var(--ink-2);
  font-size: 15.5px; margin-top: 6px;
}

@media (max-width: 720px) {
  .pro-feature-grid { grid-template-columns: 1fr; }
  .pro-feature { border-right: none; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .pro-feature:last-child { border-bottom: none; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dr-sides, .share-sides { grid-template-columns: 1fr; gap: 10px; }
  .dr-sides .cc-vs, .share-sides .cc-vs { padding: 4px 0; }
  .avg-row { grid-template-columns: 80px 1fr auto; gap: 12px; }
}

/* ===========================================================================
   Motions library + topic categories
   Same "Debate Society" identity: ink-on-paper, Fraunces headings, hairline
   rules, one vermilion accent. Categories as editorial filter chips; motions
   as an op-ed index. No glow, no glass, no rounded pills.
   =========================================================================== */

/* ---- category filter chips ---- */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.cat-filter-tight { margin: 16px 0 22px; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.cat-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-3); }
.cat-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cat-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
}
.cat-chip.is-active .cat-count { color: rgba(244, 239, 230, 0.62); }

/* ---- category tag on a challenge row ---- */
.cc-cat {
  grid-column: 1;
  justify-self: start;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  text-decoration: none;
}
.cc-cat:hover { color: var(--ink); }

/* ---- the motions index ---- */
.motion-list { display: flex; flex-direction: column; }
.motion-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 28px;
  padding: 24px 2px 26px 22px;
  border-top: 1px solid var(--rule);
  transition: background 0.18s ease;
}
.motion-row:first-child { border-top: none; }
.motion-row::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  background: var(--rule-2);
  transition: background 0.18s ease;
}
.motion-row:hover { background: linear-gradient(90deg, var(--paper-3), transparent 60%); }
.motion-row:hover::before { background: var(--accent); }

.motion-body { min-width: 0; }
.motion-cat {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  margin-bottom: 7px;
}
.motion-text {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.motion-actions { justify-self: end; }

/* ---- "stuck for a topic?" affordance on the create form ---- */
.form-pick {
  margin: -6px 0 22px;
  padding: 13px 16px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--ink-2);
}
.pick-eyebrow {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

@media (max-width: 720px) {
  .motion-row { grid-template-columns: 1fr; padding-right: 0; }
  .motion-actions { justify-self: stretch; }
  .motion-actions .btn { width: 100%; }
}

/* ===========================================================================
   The Standings — an editorial league table
   =========================================================================== */
.standings {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.standings thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0 18px 12px 0;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.standings tbody td {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.standings tbody tr { transition: background 0.16s ease; }
.standings tbody tr:hover { background: var(--paper-3); }

.standings .st-rank {
  width: 1%;
  padding-left: 6px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.standings thead .st-rank {
  font-family: var(--sans);
  font-size: 11px;
  padding-left: 6px;
  color: var(--muted);
}
/* The podium — top three carry the accent. */
.standings tbody tr:nth-child(1) .st-rank,
.standings tbody tr:nth-child(2) .st-rank,
.standings tbody tr:nth-child(3) .st-rank { color: var(--accent-ink); }

.st-debater { width: 100%; }
.st-debater .cc-handle { font-size: 16px; }
.st-pro {
  margin-left: 9px;
  font-size: 9.5px;
  padding: 2px 6px;
  vertical-align: middle;
}
.st-name {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

.standings .st-num {
  text-align: left;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.standings thead .st-num {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}

.st-rating { white-space: nowrap; }
.st-track {
  display: inline-block;
  position: relative;
  width: 84px; height: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 13px;
}
.st-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); }
.st-val {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.st-val-max { color: var(--muted); font-size: 13px; font-weight: 500; }
.st-rating-empty {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--faint);
}

@media (max-width: 640px) {
  .standings .st-track { display: none; }
  .standings tbody td,
  .standings thead th { padding-right: 11px; }
  .standings .st-rank { font-size: 19px; }
}

/* ===========================================================================
   The Record — an editorial archive of concluded debates
   =========================================================================== */
.record-list { display: flex; flex-direction: column; }
.record-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px 32px;
  padding: 26px 2px 28px 22px;
  border-top: 1px solid var(--rule);
  transition: background 0.18s ease;
}
.record-row:first-child { border-top: none; }
.record-row::before {
  content: "";
  position: absolute;
  left: 0; top: 26px; bottom: 28px;
  width: 3px;
  background: var(--rule-2);
  transition: background 0.18s ease;
}
.record-row:hover { background: linear-gradient(90deg, var(--paper-3), transparent 62%); }
.record-row:hover::before { background: var(--accent); }

.record-body { min-width: 0; }
.record-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  text-decoration: none;
  margin-bottom: 8px;
}
.record-cat:hover { color: var(--ink); }
.record-motion {
  display: block;
  font-family: var(--serif);
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.16;
  text-wrap: balance;
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: transparent;
}
.record-motion:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

/* the peer verdict — Pro (ink-blue) vs Con (vermilion), tabular figures */
.record-verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.rv-side {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.rv-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1;
  position: relative;
  top: -1px;
}
.rv-pro { color: var(--pro); }
.rv-con { color: var(--con); }
.rv-handle {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rv-handle:hover { border-bottom-color: currentColor; }
.rv-handle-empty { color: var(--faint); border: none; }
.rv-score {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.rv-vs {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--faint);
}
/* a quiet mark for the better-rated side — not a "winner" shout */
.rv-side.is-higher .rv-score {
  color: var(--ink);
  position: relative;
}
.rv-side.is-higher .rv-score::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 2px;
  background: currentColor;
  opacity: 0.55;
}

/* "You" marker on the profile's own recent-debates rows — the viewer's side,
   read as the debater rather than a link (so no hover underline). */
.rv-you { color: var(--ink); border-bottom: none; }
.profile-debates { margin-top: 6px; }
.profile-topics { margin-top: 14px; }

.record-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  white-space: nowrap;
}
.record-date {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.record-read {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.record-read:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* pager */
.record-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.record-pager-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
}
.record-pager-link:hover { color: var(--accent-ink); }
.record-pager-link.is-disabled { color: var(--faint); pointer-events: none; }
.record-pager-at {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .record-row { grid-template-columns: 1fr; gap: 12px; }
  .record-aside {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
  }
}

/* ===========================================================================
   Solo Practice drill — one rep, out loud. Editorial, on the clock.
   =========================================================================== */
.practice {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* the motion, set big like a headline */
.practice-motion { min-width: 0; }
.practice-motion-meta {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.practice-motion-meta .kicker { margin-bottom: 0; }
.practice-side-readout {
  margin-left: auto;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted);
}
.practice[data-side="for"] .practice-side-readout { color: var(--pro); }
.practice[data-side="against"] .practice-side-readout { color: var(--accent-ink); }
.practice-motion-text {
  font-family: var(--serif);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ink);
}

/* side picker — two squared-off editorial choices, not pills */
.practice-sides { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.practice-side-btn {
  appearance: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 11px 18px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.practice-side-btn:hover { border-color: var(--ink); color: var(--ink); }
.practice-side-btn[data-pick="for"].is-active {
  background: var(--pro); border-color: var(--pro); color: var(--paper);
}
.practice-side-btn[data-pick="against"].is-active {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
}
.practice-side-hint { font-size: 13.5px; color: var(--muted); }

/* PREP scaffold — a quiet editorial aside */
.practice-scaffold {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px 24px 10px;
}
.practice-scaffold-label {
  display: block;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-ink); margin-bottom: 14px;
}
.practice-prep { list-style: none; counter-reset: prep; }
.practice-prep li {
  counter-increment: prep;
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 4px 14px;
  padding: 12px 0; border-top: 1px solid var(--rule);
}
.practice-prep li:first-child { border-top: none; }
.practice-prep li::before {
  content: counter(prep);
  grid-row: span 2;
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
  align-self: center;
}
.practice-prep b { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.practice-prep span { grid-column: 2; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* the clock — same vocabulary as the debate room, spanning the grid */
.practice-stage {
  grid-column: 1 / -1;
  text-align: center;
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(26px, 4vh, 40px);
  margin-top: 8px;
}
.practice-ring {
  position: relative;
  width: 226px; height: 226px; margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  --p: 1;
}
.practice-ring::before {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%; border: 1px solid var(--rule);
}
/* progress drain — informative, conic fill behind the inner hairline */
.practice-ring::after {
  content: ""; position: absolute; inset: 11px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-wash) calc(var(--p) * 360deg), transparent 0);
  opacity: 0; transition: opacity 0.3s ease;
}
.practice-ring.is-running::after { opacity: 1; }
.practice-count {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 600;
  font-size: 70px; letter-spacing: -0.04em; line-height: 0.9;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.practice-caption {
  max-width: 46ch; margin: 0 auto;
  color: var(--muted); font-size: 16px; line-height: 1.5;
}
.practice-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 26px;
}

/* record + playback — optional, understated */
.practice-record { margin-top: 22px; }
.practice-record-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.practice-record-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.practice-record-toggle em { color: var(--muted); font-style: italic; }
.practice-playback { display: block; margin: 16px auto 0; max-width: 360px; width: 100%; }
.practice-playback[hidden] { display: none; }

/* "Go again?" panel */
.practice-done {
  grid-column: 1 / -1;
  text-align: center;
  border-top: 1px solid var(--rule-strong);
  margin-top: clamp(26px, 4vh, 40px);
  padding-top: clamp(26px, 4vh, 40px);
}
.practice-done .kicker { margin-bottom: 10px; }
.practice-done-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1;
}
.practice-done-sub { color: var(--muted); margin: 12px 0 0; font-size: 16px; }
.practice-done .practice-controls { margin-top: 24px; }
.practice-cta { margin-top: 22px; font-size: 15px; color: var(--ink-2); }

@media (max-width: 860px) {
  .practice { grid-template-columns: 1fr; gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-ring::after { transition: none; }
}

/* ===========================================================================
   Motion of the day — editorial module (landing / board)
   =========================================================================== */
.motd {
  border-top: 1px solid var(--rule-strong);
  margin-top: clamp(20px, 4vh, 48px);
}
.motd-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 0 16px;
}
.motd-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.motd-head .motd-date {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--muted); font-variant-numeric: tabular-nums;
}
.motd-card {
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
  padding: 26px 0 4px;
}
.motd-card .motd-cat {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--accent-ink);
}
.motd-card .motd-text {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.02em;
  margin-top: 10px; max-width: 24ch; text-wrap: balance; overflow-wrap: break-word;
}
.motd-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 640px) {
  .motd-card { grid-template-columns: 1fr; align-items: start; }
}

/* ===========================================================================
   Practice streak — the daily-habit reward. Editorial: tabular figures, a
   hairline rule, serif numeral. No glow, no pill.
   =========================================================================== */

/* The streak block on /me (own profile). */
.streak-block {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 24px 0 4px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.streak-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.streak-num {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.streak-unit {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.streak-copy { display: flex; flex-direction: column; gap: 5px; }
.streak-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
}
.streak-line { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 46ch; }
.streak-line a { color: var(--accent-ink); }

/* The streak readout in the practice "Go again?" panel. */
.practice-streak {
  margin: 18px auto 0;
  max-width: 42ch;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.practice-streak[hidden] { display: none; }
.practice-streak-cta {
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
}
.practice-streak-cta a { color: var(--accent-ink); }

/* The small board-header streak chip (logged-in only). */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.streak-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.streak-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.streak-chip-num {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (max-width: 540px) {
  .streak-block { gap: 16px; }
  .streak-num { font-size: 38px; }
}

/* ===========================================================================
   Welcome — first-run onboarding (the guided start)
   A short editorial flow: pick a beat, learn the moves, take one rep. Same
   ink-on-paper identity — hairline rules, serif heads, vermilion CTAs.
   =========================================================================== */
.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;
}

.welcome { max-width: 720px; margin: clamp(4px, 2vh, 22px) auto 0; }

/* progress header */
.welcome-head { margin-bottom: 30px; }
.welcome-head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.welcome-head .kicker { margin-bottom: 0; }
.welcome-skip { margin: 0; }
.welcome-skip-btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); padding: 4px 0;
  transition: color 0.18s ease;
}
.welcome-skip-btn:hover { color: var(--accent-ink); }

.welcome-progress {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.welcome-progress-label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  white-space: nowrap;
}
.welcome-progress-bar { display: flex; gap: 6px; flex: 1; }
.welcome-seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--rule);
  transition: background 0.3s ease;
}
.welcome-seg.is-on { background: var(--accent); }

/* heading + lead */
.welcome-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5.4vw, 52px);
  letter-spacing: -0.025em; font-weight: 600; line-height: 1.02;
  text-wrap: balance;
}
.welcome-lead {
  color: var(--muted); font-size: 17px; line-height: 1.55;
  margin-top: 14px; max-width: 56ch;
}

/* ----- Step 1: interest chips ----- */
.welcome-chips {
  border: 0; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.welcome-chip { display: inline-flex; cursor: pointer; }
.welcome-chip input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.welcome-chip-face {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--paper); color: var(--ink-2);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: border-color 0.16s ease, color 0.16s ease,
    background 0.16s ease, transform 0.12s ease;
}
.welcome-chip-hash { color: var(--accent-ink); font-weight: 700; }
.welcome-chip:hover .welcome-chip-face {
  border-color: var(--ink); background: var(--paper-3);
}
.welcome-chip input:checked + .welcome-chip-face {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.welcome-chip input:checked + .welcome-chip-face .welcome-chip-hash {
  color: rgba(244, 239, 230, 0.72);
}
.welcome-chip input:focus-visible + .welcome-chip-face {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.welcome-chip:active .welcome-chip-face { transform: translateY(1px); }

/* ----- shared step footer ----- */
.welcome-actions {
  display: flex; align-items: center; gap: 22px;
  margin-top: 34px;
}
.welcome-link {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: color 0.18s ease;
}
.welcome-link:hover { color: var(--accent-ink); }

.welcome-foot { margin-top: 22px; font-size: 14px; color: var(--faint); }

/* ----- Step 2: how it works (numbered flow) ----- */
.welcome-flow {
  list-style: none; margin: 28px 0 8px; padding: 0;
}
.welcome-flow li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--rule);
}
.welcome-flow li:first-child { border-top: none; padding-top: 6px; }
.welcome-flow-num {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--accent-ink);
}
.welcome-flow h3 {
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em; margin-bottom: 3px;
}
.welcome-flow p { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* core moves */
.welcome-moves { margin-top: 4px; }
.welcome-move {
  display: flex; gap: 20px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.welcome-move:last-child { border-bottom: none; }
.welcome-move-num {
  flex: none; font-family: var(--serif);
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--rule-strong); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.welcome-move-body h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: -0.015em; margin-bottom: 8px;
}
.welcome-move-body p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.welcome-move-body b { color: var(--ink); font-weight: 600; }
.welcome-move-eg {
  margin-top: 12px; padding: 4px 0 4px 14px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--accent-ink) !important; font-size: 16px !important;
}

/* house rule */
.welcome-rule {
  margin-top: 26px; padding: 20px 22px;
  background: var(--accent-wash);
  border: 1px solid var(--accent); border-radius: var(--radius);
}
.welcome-rule-mark {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent-ink); margin-bottom: 7px;
}
.welcome-rule p {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  line-height: 1.35; color: var(--ink); letter-spacing: -0.01em;
}

/* ----- Step 3: the rep ----- */
.welcome-rep {
  display: flex; align-items: stretch; gap: 0;
  margin-top: 30px;
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  overflow: hidden;
}
.welcome-rep-clock {
  flex: none; width: 180px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 28px 20px;
  background: var(--ink); color: var(--paper);
}
.welcome-rep-secs {
  font-family: var(--serif); font-size: 58px; font-weight: 600;
  line-height: 1; letter-spacing: -0.03em;
}
.welcome-rep-unit {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(244, 239, 230, 0.66);
  text-align: center;
}
.welcome-rep-copy { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.welcome-rep-copy .kicker { margin-bottom: 0; }
.welcome-rep-copy p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.welcome-rep-copy .btn { align-self: flex-start; margin-top: 4px; }

@media (max-width: 640px) {
  .welcome-title { font-size: clamp(28px, 8vw, 38px); }
  .welcome-move { gap: 14px; }
  .welcome-move-num { font-size: 20px; }
  .welcome-rep { flex-direction: column; }
  .welcome-rep-clock { width: 100%; flex-direction: row; gap: 14px; padding: 20px; }
  .welcome-rep-secs { font-size: 44px; }
  .welcome-rep-unit { text-align: left; }
  .welcome-actions { flex-wrap: wrap; gap: 16px; }
  .welcome-rep-copy .btn { align-self: stretch; text-align: center; justify-content: center; }
}

/* ===========================================================================
   ITERATION 3 — craft, motion & delight
   A restrained presentation/motion pass in the same "Debate Society" identity.
   Editorial motion only: measured fades/rises, a confident draining clock,
   hairline reveals. transform/opacity (+ one registered custom prop) only — no
   layout animation, no glow/glass/bounce. Every motion is governed by the
   global prefers-reduced-motion reset above (it zeroes all durations), so each
   effect resolves to its final, legible state instantly when motion is reduced.
   =========================================================================== */

/* shared editorial easing + reveal keyframes */
@keyframes i3-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes i3-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes i3-rule  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------------------
   Page entrance — a fast, once-only content reveal on key pages.
   Pure CSS (runs once on load); the reduced-motion reset makes it instant.
   --------------------------------------------------------------------------- */
.content .page-head        { animation: i3-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.content .board-section    { animation: i3-rise 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.content .board-section:nth-of-type(1) { animation-delay: 0.04s; }
.content .board-section:nth-of-type(2) { animation-delay: 0.10s; }
.content .board-section:nth-of-type(3) { animation-delay: 0.16s; }
.content .cat-filter,
.content .standings,
.content .motion-list,
.content .record-list,
.content .motd             { animation: i3-rise 0.52s 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.content .debate-room      { animation: i3-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------------------------------------------------------------------------
   Micro-interactions — subtle, consistent, GPU-friendly press/hover.
   --------------------------------------------------------------------------- */
.btn {
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.cat-chip:active,
.streak-chip:active { transform: translateY(1px); }
.streak-chip:hover  { transform: translateY(-1px); }
.cat-chip,
.streak-chip { transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------------------------------------------------------------------------
   Empty states — restrained, editorial; a hairline mark + the existing copy
   and its clear next action. Consistent across board/standings/record/motions.
   --------------------------------------------------------------------------- */
.empty-state {
  position: relative;
  padding: 28px 2px 26px 18px;
  animation: i3-fade 0.5s 0.06s ease both;
}
.empty-state::before {
  content: "";
  position: absolute; left: 0; top: 28px; bottom: 26px;
  width: 2px; background: var(--rule-2);
}

/* ---------------------------------------------------------------------------
   Hairline skeleton utility — available for any future async placeholder.
   (The list pages are server-rendered, so their "loading-in" is the entrance
   choreography above; this utility keeps a consistent placeholder treatment.)
   --------------------------------------------------------------------------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(23, 21, 17, 0.06), transparent);
  animation: i3-skeleton 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; }
@keyframes i3-skeleton { to { transform: translateX(100%); } }

/* ===========================================================================
   LIVE DEBATE — the signature moment (presentation only).
   Companion script public/assets/debate-room-fx.js reads the existing JS state
   (the seconds in #dr-count, the is-my-turn class on #dr-turn, the hidden state
   of the stage) and sets --p on the ring + .is-urgent / .is-speaking. It never
   touches anything debate-room.js depends on; if absent, the room is unchanged.
   =========================================================================== */

/* The clock — a smooth, accurate draining arc. The remaining fraction is held
   in --p (registered so it can transition smoothly between each 1s update). */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.dr-ring {
  --p: 1;
  --dr-arc: var(--ink-2);
  background:
    radial-gradient(closest-side, var(--paper) 0 calc(100% - 6px), transparent calc(100% - 6px) 100%),
    conic-gradient(var(--dr-arc) calc(var(--p) * 360deg), var(--rule) 0);
  transition: --p 0.95s linear;
}
/* the "round begins" reveal — the stage composes in, the clock settles */
.dr-stage:not([hidden])                  { animation: i3-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dr-stage:not([hidden]) .dr-ring         { animation: i3-ring-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dr-stage:not([hidden]) .dr-phase-label  { animation: i3-rise 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dr-stage:not([hidden]) .dr-turn         { animation: i3-fade 0.5s 0.20s ease both; }
.dr-stage:not([hidden]) .dr-mic          { animation: i3-fade 0.5s 0.26s ease both; }
@keyframes i3-ring-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* final ~10s — a calm, non-alarming emphasis: the arc warms to vermilion and
   the count breathes. Not a flash; a measured tightening. */
.dr-ring.is-urgent { --dr-arc: var(--accent); }
.dr-ring.is-urgent .dr-count {
  color: var(--accent-ink);
  animation: i3-count-breathe 1.6s ease-in-out infinite;
}
@keyframes i3-count-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* mic-live — a calm pulse on the live indicator (same technique as .dr-live-dot) */
.dr-mic-dot { position: relative; }
.dr-mic-dot.is-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(47, 107, 70, 0.5);
  animation: i3-mic-pulse 1.9s ease-out infinite;
}
@keyframes i3-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 107, 70, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(47, 107, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 107, 70, 0); }
}

/* turn-handover — when the active side changes, the speaking side cell is
   unmistakable: a colored inner rule, a quiet wash, and a "Speaking now" cue. */
.dr-side { transition: background 0.3s ease, box-shadow 0.3s ease; }
.dr-side-speaking {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  opacity: 0; transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dr-side-speaking-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: i3-fade 0.3s both;
}
.dr-side.is-speaking { background: var(--paper-3); }
.dr-side.is-speaking .dr-side-speaking { opacity: 1; transform: none; }
.dr-side-pro.is-speaking { box-shadow: inset 0 0 0 1px var(--pro); }
.dr-side-pro.is-speaking .dr-side-speaking { color: var(--pro); }
.dr-side-con.is-speaking { box-shadow: inset 0 0 0 1px var(--con); }
.dr-side-con.is-speaking .dr-side-speaking { color: var(--con); }

/* connection / edge states — present the existing JS state gracefully. While
   the start button is disabled (connecting), the hint shows a calm breathing
   cue; the spectator audio dot breathes while it connects. */
#dr-start:disabled { opacity: 0.62; cursor: progress; }
#dr-start:disabled + #dr-status { color: var(--ink-2); }
#dr-start:disabled + #dr-status::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: var(--accent);
  animation: i3-breathe 1.1s ease-in-out infinite;
}
.watch-room .dr-stage .dr-mic-dot { animation: i3-breathe 1.6s ease-in-out infinite; }
@keyframes i3-breathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }

/* pre-roll — the house-rule beat reads in, then the CTA settles */
.dr-reminder:not([hidden])           { animation: i3-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dr-reminder:not([hidden]) > *       { animation: i3-fade 0.55s ease both; }
.dr-reminder:not([hidden]) .dr-rule-label { animation-delay: 0.02s; }
.dr-reminder:not([hidden]) h2        { animation-delay: 0.10s; }
.dr-reminder:not([hidden]) .lead     { animation-delay: 0.20s; }
.dr-reminder:not([hidden]) #dr-start { animation-delay: 0.30s; }
.dr-reminder:not([hidden]) #dr-status{ animation-delay: 0.36s; }

/* post-debate — "that's a wrap" lands first, the rating form follows after a
   composed beat */
.dr-ended:not([hidden]) .dr-ended-banner { animation: i3-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dr-ended:not([hidden]) .rating-form     { animation: i3-rise 0.6s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------------------------------------------------------------------------
   Practice — a classy, editorial "Day N" acknowledgement (NOT confetti):
   a short ruled mark draws, then the streak line rises in.
   --------------------------------------------------------------------------- */
.practice-done:not([hidden])   { animation: i3-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.practice-streak:not([hidden]) {
  position: relative;
  animation: i3-rise 0.55s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.practice-streak:not([hidden])::before {
  content: ""; display: block;
  width: 34px; height: 2px; margin: 0 auto 12px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  animation: i3-rule 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* --------------------------------------------------------------------------
   User safety — report disclosure + block toggle + blocked list (guideline 1.2)
   Quiet, editorial affordances: a Report sits as a small underlined link that
   opens an inline reason form; Block is a restrained danger-tinted link.
   -------------------------------------------------------------------------- */
.profile-safety {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 2px;
  flex-wrap: wrap;
}
.profile-blocked-note { font-size: 14.5px; color: var(--muted); margin-right: 4px; }

.share-safety,
.dr-safety { margin-top: 22px; }
.dr-safety { text-align: center; }

.report-disclosure { display: inline-block; }
.report-trigger {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 3px;
  list-style: none;
}
.report-trigger::-webkit-details-marker { display: none; }
.report-trigger:hover { color: var(--ink); text-decoration-color: var(--ink); }
.report-trigger-danger { color: var(--danger); text-decoration-color: rgba(184, 65, 15, 0.4); }
.report-trigger-danger:hover { color: var(--danger); text-decoration-color: var(--danger); }
.profile-block-form { display: inline; margin: 0; }

.report-body {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-2);
  max-width: 460px;
}
.report-body .field { margin-bottom: 14px; }
.report-body .field:last-of-type { margin-bottom: 16px; }

.blocked-list { list-style: none; margin: 0; padding: 0; }
.blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.blocked-row:last-child { border-bottom: 0; }
.blocked-who { display: flex; flex-direction: column; gap: 2px; }
.blocked-name { font-size: 13px; color: var(--muted); }
.blocked-unblock { margin: 0; }

/* ---- Notification preferences (account page) ---- */
.notif-group-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
.notif-group-label:first-of-type { margin-top: 4px; }
.notif-group-aside { color: var(--faint); letter-spacing: 1px; }
.notif-toggle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
}
.notif-toggle:first-of-type { border-top: none; }
.notif-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.notif-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--rule-2);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.notif-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(23, 21, 17, 0.28);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.notif-toggle input:checked + .notif-toggle-track {
  background: var(--accent);
  border-color: var(--accent-ink);
}
.notif-toggle input:checked + .notif-toggle-track::after { transform: translateX(18px); }
.notif-toggle input:focus-visible + .notif-toggle-track {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.notif-toggle:active .notif-toggle-track::after { width: 23px; }
.notif-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.notif-toggle-title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.notif-toggle-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---- Browser push opt-in (this device) ---- */
.browser-push {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 2px;
}
.browser-push-text { display: flex; flex-direction: column; gap: 2px; }
.browser-push-status {
  font-size: 13px;
  color: var(--faint);
  line-height: 1.5;
  margin-top: 4px;
}
.browser-push-btn { flex: 0 0 auto; white-space: nowrap; margin-top: 2px; }
.browser-push[data-push-state="on"] .browser-push-status { color: var(--accent-ink); }
@media (max-width: 520px) {
  .browser-push { flex-direction: column; align-items: stretch; }
  .browser-push-btn { align-self: flex-start; }
}

/* ---- One-click unsubscribe confirmation / expired pages ---- */
.unsub-card { text-align: center; padding: 40px 36px; }
.unsub-title {
  font-family: var(--sans);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 16px;
}
.unsub-lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 auto 16px; max-width: 44ch; }
.unsub-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 auto 26px; max-width: 44ch; }
.unsub-note a, .unsub-lead a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.unsub-actions { margin-top: 6px; }

/* ===========================================================================
   ADMIN — the moderation back office. Utilitarian but on-identity: same ink,
   paper, rules and serif. A dark masthead band marks it unmistakably as the
   back office; a vermilion "Back office" badge so it is never the public site.
   =========================================================================== */
.admin-masthead {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  margin-bottom: 28px;
}
.admin-masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
}
.admin-brand { display: inline-flex; align-items: center; gap: 12px; }
.admin-badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 4px 9px;
  border-radius: 2px;
}
.admin-brand-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.admin-nav { display: inline-flex; align-items: center; gap: 18px; }
.admin-nav-link {
  font-size: 14px;
  color: rgba(244, 239, 230, 0.66);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.admin-nav-link:hover { color: var(--paper); }
.admin-nav-link.is-active { color: var(--paper); border-bottom-color: var(--accent); }
.admin-who { font-size: 13px; color: rgba(244, 239, 230, 0.5); }

.admin-page-head { margin-bottom: 26px; }
.admin-user-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* headline counters */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 38px;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
a.admin-stat:hover { border-color: var(--ink); background: var(--paper-3); }
.admin-stat-num { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; }
.admin-stat-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}
.admin-section-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.admin-count { font-family: var(--sans); font-size: 14px; color: var(--muted); font-weight: 500; }

/* tables */
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.admin-table tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.admin-table tbody tr:hover { background: var(--paper-3); }
.admin-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.admin-target-topic { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; max-width: 34ch; }
.admin-detail { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 46ch; }
.admin-note { color: var(--ink-2); font-size: 14px; max-width: 40ch; }
.admin-reason {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 2px 7px;
}

/* status + tags */
.admin-status {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--muted);
}
.admin-status-open { color: var(--accent-ink); background: var(--accent-wash); }
.admin-status-reviewed { color: var(--pro); background: var(--pro-wash); }
.admin-status-actioned { color: var(--success); background: #dcebe1; }
.admin-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.admin-tag-suspended { color: var(--paper); background: var(--danger); }
.admin-tag-admin { color: var(--paper); background: var(--pro); }

/* status filter chips */
.admin-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 7px 14px;
}
.admin-filter:hover { border-color: var(--ink); }
.admin-filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.admin-filter-count { font-weight: 700; font-size: 12.5px; opacity: 0.8; }

/* row actions */
.admin-actions-col { white-space: nowrap; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-inline-form { display: inline; margin: 0; }

/* user page */
.admin-controls { padding: 18px 20px; margin-bottom: 8px; }
.admin-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.admin-controls-row:first-child { border-top: none; padding-top: 0; }
.admin-control-note { font-size: 13.5px; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 18px; }
.admin-col { min-width: 0; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list-item { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.admin-list-item:last-child { border-bottom: none; }
.admin-chal-topic { font-size: 15px; color: var(--ink); }
.admin-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

@media (max-width: 760px) {
  .admin-stats { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; gap: 8px; }
  .admin-table { font-size: 14px; }
  .admin-table thead { display: none; }
  .admin-table tbody td { display: block; border-bottom: none; padding: 4px 0; }
  .admin-table tbody tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
}

/* ===========================================================================
   Audience engagement — verdict vote, reactions, and floor comments.
   Editorial identity: hairline rules, ink-blue Pro / vermilion Con, tabular
   figures, no glow or pills. Used on the live room, the spectator page, and the
   public Record.
   =========================================================================== */
.aud-vote {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.aud-vote-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.aud-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.aud-tally {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink-2);
}
.aud-tally-pro { color: var(--pro); }
.aud-tally-con { color: var(--con); }
.aud-tally-pro strong, .aud-tally-con strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
}
.aud-tally-sep { color: var(--faint); margin: 0 4px; }
.aud-tally-empty { color: var(--faint); font-style: italic; font-family: var(--serif); }

/* the proportion bar — Pro fill over a Con ground, hairline framed */
.aud-bar {
  position: relative;
  height: 6px;
  margin-top: 12px;
  background: var(--con);
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.aud-bar-pro {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--pro);
}

.aud-vote-form {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.aud-btn {
  flex: 1 1 0;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 11px 14px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.aud-btn-pro:hover { border-color: var(--pro); color: var(--pro); }
.aud-btn-con:hover { border-color: var(--con); color: var(--con); }
.aud-btn-pro.is-chosen { border-color: var(--pro); color: var(--paper); background: var(--pro); }
.aud-btn-con.is-chosen { border-color: var(--con); color: var(--paper); background: var(--con); }
.aud-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.aud-note a { color: var(--accent-ink); }

/* reactions — fixed editorial chips with counts */
.aud-reactions { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aud-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.aud-reaction-form { margin: 0; }
.aud-reaction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
button.aud-reaction:hover { border-color: var(--ink); color: var(--ink); }
.aud-reaction.is-mine { border-color: var(--accent); color: var(--accent-ink); }
.aud-reaction.is-static { cursor: default; }
.aud-reaction-count {
  font-family: var(--serif);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.aud-reaction.is-mine .aud-reaction-count { color: var(--accent-ink); }

/* floor comments */
.aud-comments { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aud-comment-form { margin-top: 12px; }
.aud-comment-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.aud-comment-form textarea:focus { outline: none; border-color: var(--ink); }
.aud-comment-form .btn { margin-top: 10px; }
.aud-empty {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--faint);
}
.aud-comment-list { list-style: none; margin: 16px 0 0; padding: 0; }
.aud-comment {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.aud-comment:first-child { border-top: 1px solid var(--rule-strong); }
.aud-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.aud-comment-when { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.aud-comment-body {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aud-comment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.aud-comment-del { display: inline-block; margin: 0; }

.dr-audience-vote, .watch-audience-vote { margin-top: 8px; }

/* ===========================================================================
   ITERATION 4 — "Bright modern SaaS" redesign (shared system + core pages)
   White airy surfaces, electric-blue accent, near-black navy cards/footer,
   large rounded corners, soft shadows, hairline borders, pill buttons, DM Sans.
   Mirrors public/assets/landing.css. These rules come last so they restyle the
   legacy editorial components in place without renaming a single class. The
   debate room / spectator / guide / practice / share / audience / admin / legal
   blocks above inherit the new tokens and are polished by a follow-up pass.
   =========================================================================== */

/* ---- masthead nav -------------------------------------------------------- */
.nav {
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand .mark { border-radius: 11px; }
.brand .word { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; }
.brand .word b { color: var(--accent); }
.nav-sections { border-top: 1px solid var(--rule); }

.nav-link {
  /* Ten sections have to share the rail now — slightly denser pills. */
  padding: 8px 11px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background 0.16s ease, color 0.16s ease;
}
.nav-link::after { display: none; }
.nav-link:hover { color: var(--ink); background: var(--paper-2); }
.nav-link.is-active { color: var(--accent-ink); background: var(--accent-wash); }
.nav-link.is-active::after { display: none; }
.nav-link-pro { padding: 4px; }

.nav-bell { color: var(--ink-2); border-radius: 50%; }
.nav-bell:hover, .nav-bell.is-active { color: var(--ink); background: var(--paper-2); }
.nav-bell-badge { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--paper); }

/* the dark "New debate" / sign-up CTA on the right */
.nav-account .btn.btn-primary { background: var(--ink); color: #fff; }
.nav-account .btn.btn-primary:hover { background: #05080f; box-shadow: var(--shadow-soft); }
.nav-account .btn.btn-primary::after { content: "\2197"; font-size: 0.95em; margin-left: 1px; }

.nav-toggle {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 13px;
}

/* ---- buttons (pills) ----------------------------------------------------- */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); box-shadow: 0 12px 26px -14px rgba(43, 92, 255, 0.6); }
.btn-violet { background: var(--ink); color: #fff; }
.btn-violet:hover { background: #05080f; }
.btn-ghost { background: var(--paper); border-color: var(--rule-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn-danger { background: var(--paper); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-lg { min-height: 52px; padding: 14px 28px; }

.link {
  background-image: linear-gradient(var(--accent), var(--accent));
  color: var(--accent-ink);
}
.link:hover { color: var(--accent-ink); background-size: 100% 1.5px; }

/* ---- pills / chips / eyebrows ------------------------------------------- */
.pill.pro {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border-color: transparent;
  color: var(--accent-ink);
  letter-spacing: 0.04em;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.accent-text { color: var(--accent); font-style: normal; }
.auth-kicker { letter-spacing: 0.16em; }

/* ---- cards / flash ------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.flash {
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  box-shadow: var(--shadow-soft);
}
.flash.success { border-left-color: var(--success); background: #effaf3; }
.flash.success::before { color: var(--success); }
.flash.error { border-left-color: var(--danger); background: #fdf0f3; }
.flash.error::before { color: var(--danger); }

/* ---- forms --------------------------------------------------------------- */
.field input,
.field select,
.field textarea {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field > label { color: var(--muted); }
.auth-wrap h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; }
.auth-wrap .sub { color: var(--muted); }
.form-foot a { text-decoration-color: var(--accent); }

/* ---- page heads + section headers --------------------------------------- */
.page-head h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }

.section-title,
.section-rule {
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-bottom: 13px;
}
.section-title .count,
.section-rule .count {
  margin-left: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ---- footer (navy, like the landing) ------------------------------------ */
.site-foot {
  margin-top: 56px;
  padding: 30px 0 34px;
  border-top: 0;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius) var(--radius) 0 0;
}
.site-foot .foot-brand { font-family: var(--sans); font-weight: 600; color: #fff; }
.site-foot a { color: rgba(255, 255, 255, 0.78); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.site-foot a:hover { color: #fff; }
.foot-install { color: rgba(255, 255, 255, 0.78); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.foot-install:hover { color: #fff; }
.site-foot .foot-lang-link { color: rgba(255, 255, 255, 0.6); }
.site-foot .foot-lang-link.is-current { color: #fff; }
.foot-lang-sep { color: rgba(255, 255, 255, 0.3); }

/* ---- board / list rows as soft white cards ------------------------------ */
.card-grid { gap: 14px; }
.card-grid > *,
.card-grid > *:first-child { border-top: 0; }

.challenge-card,
.motion-row,
.record-row {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
  border-top: 1px solid var(--rule);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
}
.motion-row:first-child,
.record-row:first-child { border-top: 1px solid var(--rule); }
.challenge-card::before,
.motion-row::before,
.record-row::before { display: none; }
.challenge-card:hover,
.motion-row:hover,
.record-row:hover {
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.motion-list,
.record-list { gap: 14px; }

.cc-topic, .motion-text, .record-motion, .notif-text { font-family: var(--sans); }
.cc-handle:hover, .cc-cat:hover, .motion-cat, .record-cat { color: var(--accent-ink); }

/* side + status pills as soft rounded chips */
.side-pill {
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.side-pro { color: var(--pro); background: var(--pro-wash); }
.side-con { color: var(--con); background: var(--con-wash); }
.status-pill {
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  letter-spacing: 0.06em;
}
.status-pill::before { content: none; }
.status-pill.status-open { color: var(--accent-ink); background: var(--accent-wash); }
.status-pill.status-scheduled { color: var(--pro); background: var(--pro-wash); }

/* empty states as soft panels */
.empty-state {
  border-top: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 15.5px;
  color: var(--muted);
}
.empty-state::before { display: none; }
.empty-state a { font-family: var(--sans); color: var(--accent-ink); text-decoration-color: var(--accent); }

/* ---- Motion of the day — a navy feature card ---------------------------- */
.motd {
  border-top: 0;
  margin-top: clamp(18px, 3vh, 36px);
  margin-bottom: clamp(34px, 5vh, 52px);
  padding: 6px 28px 26px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(43, 92, 255, 0.4) 0%, rgba(43, 92, 255, 0) 55%);
}
.motd-head h2 { font-family: var(--sans); color: #fff; }
.motd-head .motd-date { color: rgba(255, 255, 255, 0.6); }
.motd-card { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.motd-card .motd-cat { color: #8fb0ff; }
.motd-card .motd-text { font-family: var(--sans); color: #fff; }
.motd .btn-primary { background: #fff; color: var(--accent-ink); }
.motd .btn-primary:hover { background: #eef2ff; box-shadow: none; }

/* ---- notification inbox -------------------------------------------------- */
.notif-list { border-top: 0; display: grid; gap: 8px; }
.notif-item { border-bottom: 0; }
.notif-line { border-radius: var(--radius-sm); padding: 14px 16px; }
.notif-line:hover { background: var(--paper-2); }
.notif-item.is-unread .notif-line { background: var(--accent-wash); }
.notif-item.is-unread .notif-dot { background: var(--accent); border-color: var(--accent); }

/* ---- category filter chips ---------------------------------------------- */
.cat-chip { border-radius: var(--radius-pill); background: var(--paper); }
.cat-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-chip.is-active .cat-count { color: rgba(255, 255, 255, 0.6); }

/* ---- standings filters (period toggle + category chips) ----------------- */
.st-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 18px 0 22px;
}
.st-filters .st-cats { margin: 0; }
.st-period {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.st-period-opt {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.st-period-opt:hover { color: var(--ink); }
.st-period-opt.is-active {
  background: var(--paper);
  color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(12, 16, 32, 0.08), 0 0 0 1px var(--rule);
}
@media (max-width: 560px) {
  .st-filters { gap: 12px; }
  .st-period { width: 100%; justify-content: space-between; }
}

/* ---- standings — a clean table card ------------------------------------- */
.standings {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.standings thead th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: 15px 16px;
}
.standings tbody td { padding: 16px; border-bottom: 1px solid var(--rule); }
.standings tbody tr:last-child td { border-bottom: 0; }
.standings th:first-child, .standings td:first-child { padding-left: 22px; }
.standings th:last-child, .standings td:last-child { padding-right: 22px; }
.standings tbody tr:hover { background: var(--paper-2); }
.standings .st-rank, .standings .st-num, .st-val, .st-rating-empty { font-family: var(--sans); }
.st-track, .avg-track { border-radius: var(--radius-pill); }
.st-fill, .avg-fill { background: var(--accent); }

/* ---- record verdict ----------------------------------------------------- */
.rv-tag { border-radius: var(--radius-pill); }
.rv-score, .rv-vs { font-family: var(--sans); }
.record-pager { border-top: 1px solid var(--rule); }
.record-read { border-bottom-color: var(--rule-2); }
.record-read:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---- profile dossier ----------------------------------------------------- */
.profile-card::before, .auth-wrap .card::before { display: none; }
.me-head h1 { font-family: var(--sans); font-weight: 700; }
.profile-name { font-family: var(--sans); font-style: normal; color: var(--muted); }
.me-stats { border-top: 0; border-bottom: 0; gap: 12px; margin: 22px 0 6px; flex-wrap: wrap; }
.me-stat {
  padding: 15px 18px;
  margin-right: 0;
  border-right: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  min-width: 116px;
}
.me-stat:last-child { border-right: 0; }
a.me-stat:hover { background: var(--paper-3); }
a.me-stat:hover .me-stat-num { color: var(--accent-ink); }
.me-stat-num { font-family: var(--sans); font-weight: 700; }
.avg-val { font-family: var(--sans); font-weight: 700; }
.honour-seal { border-radius: var(--radius-sm); font-family: var(--sans); }
.honour-title, .honour-progress { font-family: var(--sans); }
.honour.is-earned .honour-seal { background: var(--accent); color: #fff; }
.tag {
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 6px 13px;
}
.tag::before { color: var(--accent-ink); }
.me-pro-note {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  border-left: 3px solid var(--pro);
  background: var(--pro-wash);
}

/* ---- account toggles ----------------------------------------------------- */
.notif-toggle-track { background: var(--paper-3); border-color: var(--rule-2); }
.notif-toggle input:checked + .notif-toggle-track { background: var(--accent); border-color: var(--accent); }
.notif-toggle-title { font-family: var(--sans); }
.account-immutable { font-style: normal; }

/* ---- Pro paywall --------------------------------------------------------- */
.pro-hero h1 { font-family: var(--sans); font-weight: 700; }
.pro-hero h1 em { font-style: normal; color: var(--accent); }
.pro-features { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pro-feature h3 { font-family: var(--sans); }
.pro-feature .ico { color: var(--accent); }
.plan {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.plan .price { font-family: var(--sans); font-weight: 700; }
.plan.best {
  border-color: transparent;
  border-top: 0;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-card);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(43, 92, 255, 0.35) 0%, rgba(43, 92, 255, 0) 55%);
}
.plan.best .plan-name { color: rgba(255, 255, 255, 0.66); }
.plan.best .price { color: #fff; }
.plan.best .per { color: rgba(255, 255, 255, 0.7); }
.plan.best .save { color: #8fb0ff; }
.plan.best .tag-best { background: var(--accent); color: #fff; border-radius: var(--radius-pill); }

/* ---- welcome onboarding -------------------------------------------------- */
.welcome-title { font-family: var(--sans); font-weight: 700; }
.welcome-chip-face { border-radius: var(--radius-pill); }
.welcome-move-body h3, .welcome-rep-secs { font-family: var(--sans); }
.welcome-rule { background: var(--accent-wash); border-color: transparent; border-radius: var(--radius); }
.welcome-rule p { font-family: var(--sans); }
.welcome-rep { border-radius: var(--radius); border-color: var(--rule); }
.welcome-rep-clock { background: var(--navy); }
.welcome-flow-num { border-color: var(--accent); color: var(--accent-ink); }

/* ---- streak chip --------------------------------------------------------- */
.streak-chip { background: var(--paper); border-color: var(--rule-2); }
.streak-chip-num { font-family: var(--sans); }

/* ---- mobile nav menu refinements ---------------------------------------- */
@media (max-width: 880px) {
  /* in the stacked disclosure panel the active item reads as accent text, not
     a full-bleed wash pill */
  .nav-link.is-active { background: transparent; color: var(--accent-ink); }
  .nav-account .btn.btn-primary::after { margin-left: auto; }
  /* stacked links carry border-top separators: the desktop pill radius would
     curve those borders into stray arcs — square them off */
  .nav-primary .nav-link,
  .nav-account .nav-link { border-radius: 0; }
}

/* ===========================================================================
   ITERATION 5 — "Bright modern SaaS" bespoke pass for the live arena + readers
   Debate room · spectator · audience engagement · guide · practice · share ·
   admin · legal. These come last and refine the editorial leftovers (heavy ink
   rules, squared seals, italic flourishes, flat-bordered cells) of the iteration
   1-3 blocks into the new system: white/airy surfaces, soft shadows, large radii,
   pill controls, electric-blue accent, ink-blue Pro vs rose Con. CSS only — every
   JS hook (#dr-*, #watch-*, .dr-side-pro/.dr-side-con, --p ring, .practice-*,
   data-* attrs) and lang() string is untouched.
   =========================================================================== */

/* ---- shared: soften the heavy 2px ink dividers to hairlines --------------- */
.dr-head,
.watch-room .dr-head,
.share-head,
.practice-motion-meta,
.legal-dateline,
.legal-foot,
.guide-standfirst,
.guide-dek,
.guide-related,
.rematch { border-color: var(--rule); }
.dr-head,
.watch-room .dr-head,
.share-head { border-bottom-width: 1px; }
.legal-dateline,
.guide-standfirst,
.guide-dek { border-bottom-width: 1px; }
.legal-foot,
.guide-related,
.rematch { border-top-width: 1px; }

/* ---- live debate room ----------------------------------------------------- */
.dr-live { color: var(--accent-ink); }
.dr-live-dot {
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(31, 157, 97, 0.5);
  animation: dr5-pulse 1.9s ease-out infinite;
}
@keyframes dr5-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 157, 97, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(31, 157, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 97, 0); }
}
.dr-motion-label,
.share-kicker,
.rematch-kicker { color: var(--accent-ink); }

/* the two sides — rounded soft cards, Pro (ink-blue) vs Con (rose) caps */
.dr-sides { gap: 14px; }
.dr-side {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px 20px;
}
.dr-sides .dr-side-pro { border-top: 3px solid var(--pro); }
.dr-sides .dr-side-con { border-top: 3px solid var(--con); }
.dr-sides .dr-side.is-me {
  background: var(--paper);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--accent-wash);
}
.dr-sides .cc-vs { font-style: normal; color: var(--faint); font-weight: 600; }

/* the countdown — a confident modern timer: a clean white disk with a draining
   electric-blue ring (rose in the final seconds). Drops the hard ink border,
   centre tick and inner hairline of the editorial clock. */
.dr-ring {
  border: none;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--rule);
  --dr-arc: var(--accent);
  background:
    radial-gradient(closest-side, var(--paper) 0 calc(100% - 7px), transparent calc(100% - 7px) 100%),
    conic-gradient(var(--dr-arc) calc(var(--p) * 360deg), var(--paper-3) 0);
}
.dr-ring::before,
.dr-ring::after { display: none; }
.dr-ring.is-urgent { --dr-arc: var(--con); }
.dr-ring.is-urgent .dr-count { color: var(--con); }
.dr-count { color: var(--ink); }
.dr-phase-label { color: var(--ink); }
.dr-mic {
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-2);
  background: var(--paper);
}

/* civility note + wrap banners are already .card (rounded, soft-shadow) */
.dr-reminder h2,
.dr-ended-banner h2 { color: var(--ink); letter-spacing: -0.02em; }

/* ---- spectator room ------------------------------------------------------- */
.watch-room .dr-stage {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.watch-room .dr-audience #watch-audience-count { color: var(--accent-ink); }

/* ---- audience engagement (vote · reactions · comments) -------------------- */
.aud-tally-pro { color: var(--pro); }
.aud-tally-con { color: var(--con); }
.aud-tally-empty { font-style: normal; color: var(--muted); }

/* verdict proportion bar — a rounded pill: Pro (ink-blue) fill over a Con (rose)
   ground, so the split itself reads at a glance */
.aud-bar {
  height: 10px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--con);
  margin-top: 14px;
  overflow: hidden;
}
.aud-bar-pro { background: var(--pro); }

/* vote buttons — pills with side-tinted active/hover */
.aud-vote-form { gap: 12px; }
.aud-btn {
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border-color: var(--rule);
}
.aud-btn-pro:hover { background: var(--pro-wash); border-color: var(--pro); color: var(--pro); }
.aud-btn-con:hover { background: var(--con-wash); border-color: var(--con); color: var(--con); }
.aud-btn-pro.is-chosen { background: var(--pro); border-color: var(--pro); color: #fff; }
.aud-btn-con.is-chosen { background: var(--con); border-color: var(--con); color: #fff; }
.aud-note a { color: var(--accent-ink); }

/* reactions — soft pill chips */
.aud-reaction {
  min-height: 40px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border-color: var(--rule);
  padding: 8px 14px;
}
button.aud-reaction:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--paper); }
.aud-reaction.is-mine { background: var(--accent-wash); border-color: transparent; }
.aud-reaction-count { color: var(--faint); }

/* floor comments — a clean thread */
.aud-comment-form textarea { border-radius: var(--radius-sm); }
.aud-comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.aud-empty { font-style: normal; color: var(--muted); }
.aud-comment { border-top-color: var(--rule); }
.aud-comment:first-child { border-top-color: var(--rule); }

/* ---- guide — clean modern reader ------------------------------------------ */
.guide-list-num { color: var(--accent-ink); }
.guide-tryit {
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.guide-tryit-label { color: var(--accent-ink); }
.guide-tryit p { color: var(--ink); }
.guide-related-list a {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, border-color 0.16s ease;
}
.guide-related-list a:hover {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* ---- practice — solo drill ------------------------------------------------ */
.practice[data-side="against"] .practice-side-readout { color: var(--con); }

/* side chooser — pills */
.practice-side-btn {
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  border-color: var(--rule);
  letter-spacing: 0.04em;
}
.practice-side-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--paper); }
.practice-side-btn[data-pick="for"].is-active {
  background: var(--pro); border-color: var(--pro); color: #fff;
}
.practice-side-btn[data-pick="against"].is-active {
  background: var(--con); border-color: var(--con); color: #fff;
}

/* PREP scaffold — a soft accent-washed aside */
.practice-scaffold {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.practice-scaffold-label { color: var(--accent-ink); }
.practice-prep li::before { color: var(--accent-ink); }

/* the rep clock — same confident modern timer vocabulary as the room: a clean
   white disk with a draining electric-blue ring over a soft track. */
.practice-ring {
  border: none;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--rule);
  background:
    radial-gradient(closest-side, var(--paper) 0 calc(100% - 7px), transparent calc(100% - 7px) 100%),
    conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--paper-3) 0);
  transition: --p 0.95s linear;
}
.practice-ring::before,
.practice-ring::after { display: none; }
.practice-count { color: var(--ink); }
.practice-stage,
.practice-done { border-top-color: var(--rule); }

/* ---- share / public challenge page ---------------------------------------- */
.share-card::before { display: none; }
.share-sides { gap: 14px; }
.share-side {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}
.share-side-pro { border-top: 3px solid var(--pro); }
.share-side-con { border-top: 3px solid var(--con); }
.share-side-pro .share-side-tag { color: var(--pro); }
.share-side-con .share-side-tag { color: var(--con); }
.share-sides .cc-vs { font-style: normal; color: var(--faint); font-weight: 600; }
.rematch-title { color: var(--ink); }
.result-note { font-style: normal; color: var(--muted); }

/* ---- admin — clean back-office dashboard ---------------------------------- */
.admin-badge { border-radius: var(--radius-sm); }
.admin-stat {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
a.admin-stat:hover {
  border-color: var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.admin-stat-num { color: var(--ink); }
.admin-section-head { border-bottom-color: var(--rule); }
.admin-table thead th { border-bottom-color: var(--rule-2); }
.admin-table tbody tr:hover { background: var(--paper-2); }
.admin-reason {
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border-color: transparent;
}
.admin-status,
.admin-tag { border-radius: var(--radius-pill); }
.admin-tag-suspended { background: var(--danger); }
.admin-tag-admin { background: var(--pro); }
.admin-filter { min-height: 40px; border-radius: var(--radius-pill); border-color: var(--rule-2); }
.admin-filter:hover { border-color: var(--accent); color: var(--accent-ink); }
.admin-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- legal — clean reading column ----------------------------------------- */
.legal-body a:hover,
.guide-body a:hover { color: var(--accent-ink); }


/* ===========================================================================
   Topic following — Follow / Following pill toggle, the /motions chooser, the
   board "For you" feed, the /account managed list. Bright v2: white pill cards,
   one electric-blue accent, rounded everything.
   =========================================================================== */
.topic-follow-panel { margin: 26px 0 36px; }
.topic-follow-head { margin-bottom: 14px; }
.topic-follow-lead { color: var(--muted); font-size: 14.5px; max-width: 62ch; margin-top: 4px; }

.topic-follow-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-follow-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  transition: border-color .16s ease, background .16s ease;
}
.topic-follow-item.is-following { border-color: var(--accent); background: var(--accent-wash); }
.topic-follow-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.topic-follow-form { margin: 0; display: inline-flex; }
.topic-follow {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.topic-follow:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  box-shadow: 0 12px 26px -14px rgba(43, 92, 255, 0.6);
}
.topic-follow.is-following {
  background: var(--paper);
  color: var(--accent-ink);
  border-color: var(--rule-2);
}
.topic-follow.is-following::before { content: "\2713"; font-weight: 800; }
.topic-follow.is-following:hover {
  background: var(--con-wash);
  border-color: var(--con);
  color: var(--con);
  box-shadow: none;
}

/* board "For you" feed */
.for-you-lead { color: var(--muted); font-size: 14.5px; margin: -6px 0 16px; }
.for-you-prompt a,
.for-you-section .empty-state a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.for-you-prompt a:hover,
.for-you-section .empty-state a:hover { text-decoration: underline; }

/* ---- debate-language picker (post form) + chips (display) --------------- */
.lang-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lang-opt {
  position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-size: 13.5px; line-height: 1; white-space: nowrap; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 11px 15px;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.lang-opt:hover { border-color: var(--rule-2); }
/* Native checkbox is visually hidden but stays focusable; the chip is the toggle. */
.lang-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lang-opt::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--rule-2); transition: background .14s ease, border-color .14s ease;
}
.lang-opt:has(input:checked) { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lang-opt:has(input:checked)::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.lang-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.lang-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 3px 9px;
}
.lang-chip .globe { opacity: .6; font-weight: 400; }
a.lang-chip { text-decoration: none; transition: border-color .14s ease, color .14s ease, background .14s ease; }
a.lang-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.cc-langs .globe { font-size: 12px; margin-right: 1px; }

.lang-filter-active {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin: 0 0 14px;
}
.lang-filter-active strong { color: var(--ink); }
.lang-filter-active .globe { opacity: .7; }
.lang-filter-clear { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.lang-filter-clear:hover { text-decoration: underline; }

/* ---- review-pass fixes (2026-07-02) -------------------------------------- */
/* Skip link: first tab stop, visually hidden until focused. */
.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 18px; border-radius: var(--radius-pill);
  transition: top 0.12s ease;
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--ink); outline-offset: 2px; }

/* Flash banners read better capped near content width than full-bleed. */
.flash-area { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Standings table scrolls inside its card on narrow screens instead of
   stretching the page. */
.standings-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 420px) {
  .standings thead th { padding-right: 12px; }
  .standings tbody td { padding: 13px 12px 13px 0; }
  .st-rank { font-size: 18px; }
  .st-num { font-size: 15px; }
  .st-val { font-size: 13px; }
}

/* Mobile tap targets: grow hit areas without moving layout. */
@media (max-width: 880px) {
  .cc-cat, .cc-handle { display: inline-block; padding: 8px 2px; margin: -8px -2px; }
  .site-foot .foot-links a, .foot-nav a { display: inline-block; padding: 9px 4px; margin: -9px -4px; }
}

/* Email-verification nudge: a slim, non-blocking banner above page content.
   Capped near content width like the flash area; sits quietly, never gates. */
.verify-nudge {
  max-width: 720px; margin: 0 auto 18px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 11px 16px; border: 1px solid #dfe4f4; border-radius: 12px;
  background: #f3f6ff; color: #2a3152; font-size: 14px; line-height: 1.4;
}
.verify-nudge-text { font-weight: 500; }
.verify-nudge-actions { display: inline-flex; align-items: center; gap: 4px; }
.verify-nudge-form { display: inline; margin: 0; }

/* Keep the signed-in masthead inside narrow phone viewports. The menu button
   retains its translated aria-label when its redundant visible label hides. */
@media (max-width: 420px) {
  .nav-toggle-text { display: none; }
  .nav-toggle { min-width: 44px; padding-inline: 12px; }
  .nav-bar-inner { gap: 8px; }
}
@media (max-width: 360px) {
  .brand .mark { display: none; }
}
.pro-status-card .btn { max-width: 100%; white-space: normal; }