/* PRAGMA — Visual identity
 * Direction: Engineering Console. Crisp, dense, technical.
 * Type system: IBM Plex Sans (body), IBM Plex Mono (data + UI chrome).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500&display=swap');

:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F6F7F9;
  --bg-soft-2: #ECEEF2;
  --ink:       #0F1419;
  --ink-2:     #2A3140;
  --ink-soft:  #5B6675;
  --ink-faint: #8B95A6;
  --line:      #E1E4EA;
  --line-soft: #EDEFF3;
  --accent:    #0050E0;
  --accent-2:  #003BB8;
  --accent-bg: #EDF2FE;
  --green:     #137A3F;
  --green-bg:  #E4F4EB;
  --amber:     #B07A1B;
  --amber-bg:  #FBF3DF;
  --red:       #B3261E;
  --red-bg:    #FBEAEA;
  --demo:      #6D3BD1;
  --demo-ink:  #4C249B;
  --demo-bg:   #F2ECFC;
  --demo-line: #D9C9F5;
}

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

html {
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: 'kern', 'liga', 'tnum';
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

code, .mono, kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-feature-settings: 'tnum', 'ss01';
}

a { color: var(--accent); text-decoration: none; }
a:hover {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ─── Top bar ─────────────────────────────────────────────── */
.topbar {
  background: var(--ink);
  color: #cdd6e3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  padding: 0.45rem clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.topbar .left { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.topbar .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2BD46B;
  box-shadow: 0 0 8px rgba(43, 212, 107, 0.6);
}
.topbar .pulse { animation: c-pulse 2s ease-in-out infinite; }
@keyframes c-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.topbar .sep { opacity: 0.5; }
.topbar .right { color: var(--ink-faint); }
.topbar .right strong, .topbar .right .val {
  color: #cdd6e3;
  font-weight: 400;
}

/* ─── Masthead ────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--line);
  padding: 1.2rem clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: var(--bg);
  flex-wrap: wrap;
}

.brand {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand .prompt { color: var(--accent); font-weight: 500; }
.brand .slash  { color: var(--ink-faint); font-weight: 400; }
.brand .v {
  color: var(--ink-faint);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand:hover .prompt { color: var(--accent-2); }

.masthead nav {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.masthead nav a, .masthead nav button {
  color: var(--ink-soft);
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  border-radius: 2px;
  letter-spacing: -0.01em;
  transition: background .15s, color .15s;
  font: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}
.masthead nav a:hover, .masthead nav button:hover {
  color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
}
.masthead nav a.active { color: var(--accent); }
.masthead nav a.signin,
.masthead nav .signin {
  border: 1px solid var(--line);
  margin-left: 0.4rem;
  color: var(--ink);
}
.masthead nav .signin:hover { border-color: var(--ink); }
.masthead nav form { display: inline-flex; }
.masthead nav .who {
  color: var(--ink);
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  background: var(--bg-soft);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.masthead nav .who::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--green);
}

/* ─── Profile prompt banner ──────────────────────────────── */
.profile-prompt {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
  padding: 0.65rem clamp(1.4rem, 3vw, 2.4rem);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.profile-prompt::before {
  content: 'tip';
  background: var(--accent);
  color: #fff;
  padding: 0.1em 0.5em;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  font-weight: 500;
}
.profile-prompt a { color: var(--accent); font-weight: 500; }

/* ─── Messages framework ─────────────────────────────────── */
.messages {
  list-style: none;
  padding: 0;
  margin: 1.2rem auto 0;
  max-width: 1280px;
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
  padding-right: clamp(1.4rem, 3vw, 2.4rem);
}
.messages li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  border-radius: 3px;
  font-size: 0.92rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
}
.messages li::before {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  flex-shrink: 0;
}
.messages li.success {
  background: var(--green-bg);
  border-color: #B7DDC5;
  color: #0e5a2e;
}
.messages li.success::before {
  content: '✓ ok';
  background: var(--green);
  color: #fff;
}
.messages li.error {
  background: var(--red-bg);
  border-color: #ECC4C4;
  color: #82181a;
}
.messages li.error::before {
  content: '× err';
  background: var(--red);
  color: #fff;
}
.messages li.warning {
  background: var(--amber-bg);
  border-color: #E8D49A;
  color: #6a4a0e;
}
.messages li.warning::before {
  content: '! warn';
  background: var(--amber);
  color: #fff;
}
.messages li.info::before,
.messages li.debug::before {
  content: '· info';
  background: var(--accent);
  color: #fff;
}

/* ─── Page container ──────────────────────────────────────── */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem clamp(1.4rem, 3vw, 2.4rem) 4rem;
  width: 100%;
  flex: 1;
}

/* ─── Hero (landing) ──────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3.5rem;
}
.hero .breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
}
.hero .breadcrumb .arrow { color: var(--accent); margin: 0 0.4em; }
.hero h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 1.4rem;
  max-width: 18ch;
}
.hero h1 .term {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 0.05em 0.3em;
  font-weight: 500;
  font-size: 0.92em;
  border-radius: 3px;
  color: var(--accent);
}
.hero .lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.hero .lede strong { color: var(--ink); font-weight: 500; }

.principles-box {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem 1.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  font-family: 'IBM Plex Mono', monospace;
}
.principles-box h4 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
  font-weight: 500;
}
.principles-box ul { list-style: none; display: grid; gap: 0.5rem; }
.principles-box li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--ink);
}
.principles-box li::before {
  content: '→';
  color: var(--accent);
  font-weight: 500;
  flex-shrink: 0;
}

/* ─── Section heads ──────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.section-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-left: auto;
}
.section-head .meta strong { color: var(--ink); font-weight: 500; }

/* ─── Status brackets ────────────────────────────────────── */
.status-br {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.status-br.open {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid #B7DDC5;
}
.status-br.open::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  background: var(--green);
  border-radius: 50%;
  animation: c-pulse 2s ease-in-out infinite;
}
.status-br.closed {
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.status-br.closed::before {
  content: '×';
  font-size: 1.1em;
  line-height: 0.6;
  color: var(--ink-faint);
}

/* ─── Demo ballots (illustrative only — reserved violet, never amber) ─── */
.status-br.demo {
  color: var(--demo-ink);
  background: var(--demo-bg);
  border: 1px solid var(--demo-line);
}
.status-br.demo::before { content: '◆'; font-size: 0.7em; color: var(--demo); }

/* card + table-row left edge so a demo reads at a glance in a list */
.active-row.demo { border-left: 3px solid var(--demo); padding-left: 1.3rem; }
.ballot-table tr.demo td:first-child { box-shadow: inset 3px 0 0 var(--demo); }
.ballot-table .stcol .status-br { margin: 0 0.3rem 0.2rem 0; }

/* detail-page banner — the "loud" surface, detail only */
.demo-banner {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--demo-bg);
  border: 1px solid var(--demo-line);
  border-left: 3px solid var(--demo);
  border-radius: 3px;
  padding: 0.95rem 1.15rem;
  margin-bottom: 1.6rem;
}
.demo-banner .mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: var(--demo);
  padding: 0.3em 0.6em;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.demo-banner .msg { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
.demo-banner .msg strong { color: var(--demo-ink); }

/* ─── Active ballot row ──────────────────────────────────── */
.active-row {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  gap: 2.5rem;
  align-items: center;
  padding: 1.6rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4rem;
  position: relative;
}
.active-row::before {
  content: 'active';
  position: absolute;
  top: -0.75rem;
  left: 0;
  background: var(--ink);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  font-weight: 500;
}
.active-row + .active-row { margin-top: -3rem; }
.active-row + .active-row::before { content: 'also open'; }

.active-row .doc-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.active-row .doc-block .doc-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.active-row .body h3 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.active-row .body h3 a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s;
}
.active-row .body h3 a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}
.active-row .body .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.active-row .body .meta span strong {
  color: var(--ink);
  font-weight: 500;
}
.active-row .cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}
.active-row .cta .countdown {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.active-row .cta .countdown strong {
  color: var(--accent);
  font-weight: 500;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.3rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}
.btn::before {
  content: '$';
  color: var(--accent);
  font-weight: 600;
}
.btn:hover::before { color: #B6CCFF; }
.btn.primary::before { content: '▸'; color: #6BE69F; }
.btn.primary:hover::before { color: #fff; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.ghost:hover {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--ink);
}
.btn.ghost::before { color: var(--accent); }
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Closed ballots table ───────────────────────────────── */
.ballot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
}
.ballot-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-weight: 500;
  text-align: left;
  padding: 0.7rem 0.8rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.ballot-table td {
  padding: 0.85rem 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.ballot-table tr:hover td { background: var(--bg-soft); }
.ballot-table .doc {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--accent);
  font-size: 0.88rem;
  width: 7rem;
}
.ballot-table .title { color: var(--ink); font-weight: 500; }
.ballot-table .title a { color: var(--ink); text-decoration: none; }
.ballot-table .title a:hover { color: var(--accent); text-decoration: underline; }
.ballot-table .date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
  width: 8rem;
}
.ballot-table .respondents {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--ink);
  text-align: right;
  width: 7rem;
  font-weight: 500;
}
.ballot-table .respondents .lbl {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  font-weight: 400;
}
.ballot-table .stcol { width: 6.5rem; }

.empty-state {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 1.4rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.empty-state::before {
  content: '// ';
  color: var(--ink-faint);
}

/* ─── Ballot detail head ─────────────────────────────────── */
.crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { margin: 0 0.4em; color: var(--ink-faint); }
.crumb .here { color: var(--ink); }

.detail-head {
  border-top: 2px solid var(--ink);
  padding-top: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
}
.detail-head .tab {
  position: absolute;
  top: -0.75rem;
  left: 0;
  background: var(--ink);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.2em 0.6em;
  font-weight: 500;
}
.detail-head .toprow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.detail-head .when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.detail-head .when strong { color: var(--ink); font-weight: 500; }
.detail-head h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 1.4rem;
  max-width: 28ch;
}

/* ─── Metadata strip ─────────────────────────────────────── */
.meta-table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  margin-bottom: 3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
}
.meta-table tr + tr { border-top: 1px solid var(--line); }
.meta-table th, .meta-table td {
  padding: 0.6rem 1rem;
  text-align: left;
  vertical-align: top;
}
.meta-table th {
  background: var(--bg-soft);
  width: 12rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-weight: 500;
  border-right: 1px solid var(--line);
}
.meta-table td { color: var(--ink); }
.meta-table td .note { color: var(--ink-faint); margin-left: 0.4em; }

/* ─── Your-vote panel ────────────────────────────────────── */
.your-vote {
  border: 1px solid var(--green);
  background: var(--green-bg);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
  position: relative;
}
.your-vote::before {
  content: 'your vote · recorded';
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: var(--green);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  font-weight: 500;
  border-radius: 2px;
}
.your-vote h2 { display: none; }
.your-vote dl { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.your-vote dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e5a2e;
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.your-vote dd {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

/* ─── Question card ──────────────────────────────────────── */
.question {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  padding: 2.4rem;
  margin-bottom: 2rem;
}
.question .qhead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.question .q-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  padding: 0.2em 0.5em;
  background: var(--bg-soft);
  border-radius: 2px;
}
.question .qhead .req {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  color: var(--amber);
  margin-left: auto;
  letter-spacing: 0.04em;
}
.question h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.question .description {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 2rem;
  max-width: 68ch;
}
.question .description p + p { margin-top: 0.85rem; }
.question .description code,
.question .description tt {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--accent-bg);
  color: var(--accent);
  padding: 0.05em 0.35em;
  font-size: 0.9em;
  border-radius: 2px;
}
.question .description ul,
.question .description ol { margin: 0.8rem 0 0.8rem 1.4rem; }
.question .description li { margin-bottom: 0.3rem; }
.question .description a { color: var(--accent); }
.question .description blockquote {
  border-left: 2px solid var(--line);
  padding-left: 1rem;
  color: var(--ink-soft);
  margin: 0.8rem 0;
}

.field-errors {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--red);
  background: var(--red-bg);
  color: #82181a;
  font-size: 0.88rem;
  font-family: 'IBM Plex Mono', monospace;
  border-radius: 0 2px 2px 0;
}
.field-errors li { display: flex; gap: 0.5rem; }
.field-errors li::before { content: '×'; color: var(--red); font-weight: 600; }

/* ─── Options (radio + checkbox) ─────────────────────────── */
.options { display: grid; gap: 0.4rem; max-width: 48rem; }
.option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  background: var(--bg);
  transition: border-color .12s, background .12s;
}
.option:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
}
.option input[type="radio"],
.option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1em;
  height: 1.1em;
  border: 1.5px solid var(--ink-faint);
  flex-shrink: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
  background: var(--bg);
}
.option input[type="radio"] { border-radius: 50%; }
.option input[type="checkbox"] { border-radius: 2px; }
.option:hover input { border-color: var(--ink); }
.option input:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: 50%;
}
.option input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  color: #fff;
  line-height: 1;
}
.option .label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.option .key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  padding: 0.15em 0.5em;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-soft);
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.submit-row small {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ─── Results ─────────────────────────────────────────────── */
.results-question {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.4rem;
  margin-bottom: 2rem;
  background: var(--bg);
}
.results-question .qhead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.results-question .q-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  padding: 0.2em 0.5em;
  background: var(--bg-soft);
  border-radius: 2px;
}
.results-question h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.results-question h2 code {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 0.05em 0.3em;
  font-size: 0.92em;
  border-radius: 2px;
}
.results-question .description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  max-width: 68ch;
}

.respondent-bar {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.respondent-bar .stat strong { color: var(--ink); font-weight: 500; }
.respondent-bar .stat.right { margin-left: auto; color: var(--ink-faint); }

.tally { display: grid; gap: 0.3rem; }
.tally-row {
  display: grid;
  grid-template-columns: 14rem 1fr 6rem 4rem;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  font-family: 'IBM Plex Mono', monospace;
}
.tally-row .label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}
.tally-row.winning .label::before {
  content: '✓ ';
  color: var(--green);
  font-weight: 700;
}
.tally-row .bar {
  height: 0.8rem;
  background: var(--bg-soft);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.tally-row .bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
}
.tally-row.winning .bar-fill { background: var(--ink); }
.tally-row.losing .bar-fill { background: var(--ink-faint); }
.tally-row .count {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: right;
}
.tally-row .pct {
  font-size: 0.92rem;
  font-weight: 500;
  text-align: right;
  color: var(--ink);
}
.tally-row.winning .pct { color: var(--accent); }

.results-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--bg-soft);
  border-left: 2px solid var(--amber);
  border-radius: 0 2px 2px 0;
}
.results-note::before { content: '// '; color: var(--amber); }

/* ─── Live results (open ballot, voter has voted) ────────── */
/* Fence the live tally off from the voting form above it: a heavy rule break
 * carrying an "unsealed" tab — same section-marker idiom as .active-row — so
 * the two regions never visually bleed together. */
.live-results {
  position: relative;
  margin-top: 4.5rem;
  padding-top: 2.6rem;
  border-top: 2px solid var(--ink);
}
.live-results::before {
  content: 'unsealed';
  position: absolute;
  top: -0.75rem;
  left: 0;
  background: var(--amber);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  font-weight: 500;
  border-radius: 2px;
}
.section-head.live { margin-bottom: 1.8rem; }
.section-head.live h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.live-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--amber);
  animation: c-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─── Sliced results ─────────────────────────────────────── */
.slices-section {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line);
}
.slices-head {
  background: var(--ink);
  color: #cdd6e3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  padding: 0.85rem 1.1rem;
  border-radius: 2px;
  margin-bottom: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.6rem;
  letter-spacing: 0.01em;
}
.slices-head .kind {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.2em 0.55em;
  border-radius: 2px;
  color: #fff;
  font-weight: 500;
}
.slices-head .by { color: var(--ink-faint); }
.slices-head .by strong { color: #cdd6e3; font-weight: 500; }
.slices-head .prompt { color: #6BE69F; font-weight: 500; }
.slice-tabs { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.slice-tab {
  padding: 0.35rem 0.85rem;
  border: 1px solid #3a4250;
  color: #cdd6e3;
  text-decoration: none;
  border-radius: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  transition: background .15s, border-color .15s, color .15s;
}
.slice-tab:hover {
  border-color: #cdd6e3;
  color: #fff;
  background: #1d2531;
  text-decoration: none;
}
.slice-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.slice-tab.active:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
.slices-head .stats {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.slices-head .stats strong { color: #cdd6e3; font-weight: 500; }

.cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 0.8rem;
}
.cohort {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  padding: 1rem 1.2rem 1.1rem;
}
.cohort-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: 'IBM Plex Mono', monospace;
}
.cohort-head .name {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 500;
}
.cohort-head .name::before {
  content: '#';
  color: var(--ink-faint);
  margin-right: 0.05em;
  font-weight: 400;
}
.cohort-head .n {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}
.cohort-head .n strong { color: var(--ink); font-weight: 500; }
.cohort-tally { display: grid; gap: 0.3rem; }
.cohort-row {
  display: grid;
  grid-template-columns: 6rem 1fr 2.6rem;
  align-items: center;
  gap: 0.7rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  padding: 0.18rem 0;
}
.cohort-row .label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 500;
}
.cohort-row.winning .label::before {
  content: '✓ ';
  color: var(--green);
  font-weight: 700;
}
.cohort-row .bar {
  height: 0.55rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.cohort-row .bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
}
.cohort-row.winning .bar-fill { background: var(--ink); }
.cohort-row.losing .bar-fill { background: var(--ink-faint); }
.cohort-row .pct {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
}
.cohort-row.winning .pct { color: var(--accent); }

/* ─── Profile form ───────────────────────────────────────── */
.profile-form .field {
  margin-bottom: 1.6rem;
}
.profile-form label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.profile-form select,
.profile-form input[type="text"],
.profile-form input[type="email"] {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  max-width: 28rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.profile-form select:focus,
.profile-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.profile-form .help {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  max-width: 60ch;
}

/* ─── Sign-in page ───────────────────────────────────────── */
.signin-card {
  max-width: 30rem;
  margin: 1rem auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.4rem;
  background: var(--bg);
  position: relative;
}
.signin-card::before {
  content: 'sign in';
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  font-weight: 500;
  border-radius: 2px;
}
.signin-card h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.signin-card p {
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.signin-options { display: grid; gap: 0.7rem; }
.oauth-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.oauth-btn:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
  color: var(--ink);
}
.oauth-btn .label-tag {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signin-aux {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.signin-aux::before { content: '// '; color: var(--ink-faint); }

/* ─── Footer ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  margin-top: 5rem;
  padding: 2.5rem clamp(1.4rem, 3vw, 2.4rem);
  background: var(--bg-soft);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}
footer .colophon {
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 44ch;
}
footer .colophon strong { color: var(--ink); font-weight: 500; }
footer h4 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
  font-weight: 500;
}
footer ul { list-style: none; display: grid; gap: 0.35rem; }
footer a { color: var(--ink); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer .build-info {
  margin-top: 2rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  grid-column: 1 / -1;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
footer .build-info code { color: var(--ink); }

/* ─── Page-load reveal ───────────────────────────────────── */
@keyframes c-rise {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: none; }
}
main > * { animation: c-rise .4s ease-out both; }
main > *:nth-child(1) { animation-delay: 0.04s; }
main > *:nth-child(2) { animation-delay: 0.1s; }
main > *:nth-child(3) { animation-delay: 0.16s; }
main > *:nth-child(4) { animation-delay: 0.22s; }
main > *:nth-child(5) { animation-delay: 0.28s; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .active-row {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .active-row .cta {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .meta-table th { width: 8rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .masthead { flex-direction: column; align-items: flex-start; }
  .tally-row { grid-template-columns: 10rem 1fr 4rem; }
  .tally-row .count { display: none; }
  .cohort-row { grid-template-columns: 5rem 1fr 2.4rem; gap: 0.5rem; }
  .slices-head { font-size: 0.74rem; padding: 0.75rem 0.9rem; }
  .slices-head .stats { margin-left: 0; }
}

@media (max-width: 600px) {
  .ballot-table thead { display: none; }
  .ballot-table, .ballot-table tbody, .ballot-table tr, .ballot-table td { display: block; width: auto; }
  .ballot-table tr {
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0;
  }
  .ballot-table td { padding: 0.2rem 0.8rem; border: none; }
  .ballot-table .doc { font-size: 0.78rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ─── No Confidence question ─────────────────────────────── */
.question.no-confidence,
.results-question.no-confidence {
  border: 1px solid var(--red);
}
.q-num.nc {
  color: var(--red);
  background: var(--red-bg);
  letter-spacing: 0.14em;
  font-weight: 600;
}
.no-confidence .option.nc-option input:checked {
  border-color: var(--red);
  background: var(--red);
}
.nc-warning {
  margin-top: 1.2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #82181a;
  border-left: 2px solid var(--red);
  background: var(--red-bg);
  padding: 0.6rem 0.9rem;
  border-radius: 0 2px 2px 0;
  max-width: 48rem;
}
.tally-row.nc .bar-fill { background: var(--red); }
.tally-row.nc .count,
.tally-row.nc .pct { color: var(--red); }

/* A question locked because the voter selected No Confidence. */
.question.locked {
  opacity: 0.45;
  pointer-events: none;
}
.question.locked .option { cursor: not-allowed; }

/* A question whose voting an operator has disabled: shown but not answerable.
   The options are visibly muted (faded, dashed, no clickable affordance) so they
   don't read as selectable, while the question title and the disabled note stay
   fully legible. */
.question.disabled .options {
  pointer-events: none;
  opacity: 0.45;
}
.question.disabled .option,
.question.disabled .option:hover {
  cursor: not-allowed;
  background: var(--bg-soft);
  border-style: dashed;
  border-color: var(--line);
}
.question.disabled .option .label {
  color: var(--ink-faint);
  font-weight: 400;
}
.question.disabled .option .key {
  visibility: hidden;
}
.question.disabled .option input[type="radio"],
.question.disabled .option input[type="checkbox"] {
  border-color: var(--line);
  background: var(--bg-soft);
  cursor: not-allowed;
}
.disabled-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-left: auto;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.disabled-note {
  margin-top: 1.2rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-faint);
  border-left: 2px solid var(--ink-faint);
  background: var(--bg-soft);
  padding: 0.6rem 0.9rem;
  border-radius: 0 2px 2px 0;
  max-width: 48rem;
}