/* ==========================================================================
   Machine Assurance Institute - Open Source the Vote
   Design system: "The Bitwise Seal"

   Signature detail: the chamfer. Every corner in this interface is a straight
   45-degree cut, never a radius. It is derived from the mark and is the one
   treatment that recurs on every surface.

   Distinct from the AI Security Foundation: different accent hue (signal
   amber rather than AISF's cool palette), different display face (Oxanium
   rather than Inter), and chamfered rather than rounded geometry.
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* fonts - self-hosted, no third-party origin, so the CSP stays closed    */
/* --------------------------------------------------------------------- */

/* Oxanium is a variable font: one latin subset file covers the whole weight
   range, so this is a single request. Self-hosted rather than loaded from
   fonts.gstatic.com, which is what lets the CSP forbid every external origin. */
@font-face {
  font-family: "Oxanium";
  src: url("/assets/fonts/oxanium.woff2") format("woff2-variations"),
       url("/assets/fonts/oxanium.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- primitives ---- */
  --gray-050: #f9f9fb;
  --gray-100: #eeeff2;
  --gray-200: #d5d7de;
  --gray-400: #9a9db0;
  --gray-600: #6b6d78;
  --gray-700: #4b4d57;
  --gray-800: #2a2c33;
  --gray-900: #18191c;
  --gray-950: #0d0e11;

  --amber-300: #ffdd78;
  --amber-500: #ffb800;
  --amber-600: #e6a200;
  --amber-900: #3a2c00;

  --red-400: #ff7a7a;
  --green-400: #4fe08b;
  --blue-400: #579fff;

  /* ---- semantic ---- */
  --bg-page: var(--gray-950);
  --bg-surface: var(--gray-900);
  --bg-elevated: #1f2126;
  --bg-inset: #0a0b0d;

  --text-primary: var(--gray-100);      /* 15.7:1 on --bg-page */
  --text-secondary: var(--gray-400);    /*  7.4:1 on --bg-page */
  --text-tertiary: var(--gray-600);
  --text-inverse: var(--gray-950);

  --border: var(--gray-800);
  --border-strong: var(--gray-700);

  --accent: var(--amber-500);
  --accent-hover: var(--amber-300);
  --accent-active: var(--amber-600);
  --accent-dim: var(--amber-900);

  --error: var(--red-400);
  --success: var(--green-400);
  --info: var(--blue-400);

  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--amber-500);

  /* ---- type ---- */
  --font-display: "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 220ms;

  /* ---- chamfer ---- */
  --chamfer: 10px;
  --chamfer-sm: 6px;

  color-scheme: dark;
}

/* The signature detail. Top-right and bottom-left cut on the diagonal. */
.chamfer {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer))
  );
}
.chamfer-sm {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-sm)) 0,
    100% var(--chamfer-sm),
    100% 100%,
    var(--chamfer-sm) 100%,
    0 calc(100% - var(--chamfer-sm))
  );
}

/* --------------------------------------------------------------------- */
/* reset                                                                  */
/* --------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* A faint engineered grid. Purely decorative, zero network cost. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--gray-900) 1px, transparent 1px),
    linear-gradient(90deg, var(--gray-900) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 184, 0, 0.35);
  transition: color var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std);
}
a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--text-inverse);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- */
/* layout                                                                 */
/* --------------------------------------------------------------------- */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header {
  position: relative;
  z-index: 2;
  padding: 26px 0 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
}
.brand:hover { border-bottom: 0; }

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--accent);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.brand-sub {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* --------------------------------------------------------------------- */
/* hero                                                                   */
/* --------------------------------------------------------------------- */

.hero { padding: 52px 0 40px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(255, 184, 0, 0.28);
  padding: 6px 12px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2rem, 7.5vw, 3.1rem);
  margin-bottom: 18px;
}

.lede {
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 60ch;
}

.pillars {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 36px 0 0;
}
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar { background: var(--bg-surface); padding: 18px 18px 20px; }
.pillar-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
.pillar p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }

.note {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--bg-surface);
  border-left: 2px solid var(--accent);
  font-size: 13.5px;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------- */
/* form                                                                   */
/* --------------------------------------------------------------------- */

.form-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 26px 22px;
  margin-bottom: 18px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  /* Wraps rather than overflowing at 320px and at 200% zoom. */
  flex-wrap: wrap;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.section-head h2 {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.section-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.req { color: var(--accent); }
.opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  color: var(--text-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  padding: 11px 13px;
  transition: border-color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
  appearance: none;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

input:hover, select:hover, textarea:hover { border-color: var(--gray-600); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: #0c0d0f;
}
input::placeholder, textarea::placeholder { color: var(--gray-700); }

.help { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.err {
  font-size: 12.5px;
  color: var(--error);
  margin-top: 6px;
  display: none;
}
.field.invalid .err { display: block; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--error); }

/* involvement checkbox grid */
.group { margin-bottom: 22px; }
.group:last-child { margin-bottom: 0; }
.group-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.options { display: grid; gap: 8px; }
@media (min-width: 560px) {
  .options { grid-template-columns: 1fr 1fr; }
}

.opt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
  min-height: 44px;
}
.opt-item:hover { border-color: var(--gray-600); }
.opt-item input { margin: 0; }
.opt-item span { font-size: 13.5px; line-height: 1.4; color: var(--text-primary); }
.opt-item:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 184, 0, 0.07);
}
.opt-item:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* custom checkbox / radio - chamfered, never rounded */
input[type="checkbox"] {
  appearance: none;
  /* 24px is the WCAG 2.2 AA minimum target size (2.5.8). This form is filled
     one-handed on a phone, so the target is the real constraint, not the ink. */
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 5px;
  height: 12px;
  border: solid var(--text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.consent:last-of-type { border-bottom: 0; }
.consent label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
  cursor: pointer;
  line-height: 1.5;
}
.consent.invalid label { color: var(--error); }

/* honeypot - removed from layout and from the accessibility tree */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------- */
/* verification                                                           */
/* --------------------------------------------------------------------- */

.verify-row { display: flex; gap: 8px; align-items: stretch; }
.verify-row input { flex: 1; min-width: 0; }

.code-input {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 12px 8px !important;
}

.status {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-top: 9px;
  padding: 9px 12px;
}
.status.show { display: flex; }
/* State is carried by a glyph and a border as well as by hue, so it survives
   color blindness, a monochrome display, and forced-colors mode. */
.status::before {
  font-family: var(--font-mono);
  font-weight: 700;
  flex: none;
}
.status.ok {
  color: var(--success);
  background: rgba(79, 224, 139, 0.08);
  border-left: 2px solid var(--success);
}
.status.ok::before { content: "\2713"; }
.status.bad {
  color: var(--error);
  background: rgba(255, 122, 122, 0.08);
  border-left: 2px solid var(--error);
}
.status.bad::before { content: "\26A0"; }
.status.info {
  color: var(--info);
  background: rgba(87, 159, 255, 0.08);
  border-left: 2px solid var(--info);
}
.status.info::before { content: "\2139"; }

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success);
}

/* --------------------------------------------------------------------- */
/* buttons                                                                */
/* --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 13px 22px;
  min-height: 46px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-inverse);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-std),
    transform var(--t-fast) var(--ease-out);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn:hover:not(:disabled) { background: var(--accent-hover); }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { background: var(--gray-800); color: var(--gray-600); cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-submit { width: 100%; font-size: 15px; padding: 17px 24px; min-height: 56px; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: none;
}
.is-busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------- */
/* misc                                                                   */
/* --------------------------------------------------------------------- */

.pow-meter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 12px;
}
.pow-bar {
  flex: 1;
  height: 2px;
  background: var(--gray-800);
  overflow: hidden;
}
.pow-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--t-base) var(--ease-out);
}

#turnstile-host { margin: 18px 0 4px; min-height: 65px; }

.success-panel { display: none; padding: 44px 22px; text-align: center; }
.success-panel.show { display: block; }
.success-mark { width: 56px; height: 56px; color: var(--success); margin: 0 auto 20px; }
.success-panel h2 { font-size: 1.6rem; margin-bottom: 12px; }
.success-panel p { color: var(--text-secondary); max-width: 46ch; margin: 0 auto 18px; }
.reference {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 11px 18px;
  letter-spacing: 0.06em;
}

.faq { margin-top: 40px; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 18px;
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin-top: 10px; font-size: 13.5px; color: var(--text-secondary); }

.site-footer {
  margin-top: 56px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.site-footer p { margin-bottom: 9px; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.site-footer a { color: var(--text-secondary); border-bottom-color: var(--border-strong); }

/* legal pages */
.doc { padding: 34px 0 20px; }
.doc h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: 10px; }
.doc .updated { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 30px; }
.doc h2 {
  font-size: 1.15rem;
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc h3 { font-size: 1rem; margin: 22px 0 8px; color: var(--accent); }
.doc p, .doc li { color: var(--text-secondary); font-size: 14.5px; margin-bottom: 12px; }
.doc ul { padding-left: 20px; margin-bottom: 16px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--text-primary); }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13.5px; }
.doc th, .doc td {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.doc th { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; }
.doc-scroll { overflow-x: auto; }

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

.tbc {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px dashed rgba(255, 184, 0, 0.45);
  padding: 1px 6px;
  font-size: 0.92em;
  white-space: nowrap;
}

/* Utility classes replacing what would otherwise be inline style attributes.
   The CSP forbids inline styles, so every rule must live in a stylesheet. */
.code-block { margin-top: 14px; }
.spaced { margin-top: 12px; }
.spaced-lg { margin-top: 18px; }
.fine-print { margin-top: 18px; font-size: 13px; }
.faq-title {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.back-link { margin-top: 36px; }

/* --------------------------------------------------------------------- */
/* code of conduct — read, not signed                                     */
/* --------------------------------------------------------------------- */

.conduct-note {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.conduct-head {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.conduct-note p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.conduct-note ul {
  margin: 12px 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}
.conduct-note li {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.conduct-note li::marker { color: var(--accent); }
.conduct-foot { margin-top: 12px; font-size: 13px; }
.conduct-foot strong { color: var(--text-primary); }