/* ==========================================================================
   Citizens for Responsible AI — base + components
   Load order: fonts.css → tokens.css → crai.css
   Class prefix: crai- (safe to drop into an existing app).
   State classes .is-hover / .is-focus / .is-active exist only so the style
   guide can show states statically; real pages get them from :hover etc.
   ========================================================================== */

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crai-paper);
  color: var(--crai-ink);
  font-family: var(--crai-font-sans);
  font-size: var(--crai-size-body);
  line-height: var(--crai-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
h1, h2, h3 { font-family: var(--crai-font-display); font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--crai-size-display-xl); line-height: var(--crai-leading-tight); letter-spacing: var(--crai-tracking-display); }
h2 { font-size: var(--crai-size-display-l); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--crai-size-display-m); line-height: var(--crai-leading-snug); letter-spacing: -0.01em; }
h4 { font-size: var(--crai-size-title); line-height: 1.3; font-weight: 700; }
p { text-wrap: pretty; }
a { color: var(--crai-evergreen); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--crai-marigold-soft); color: var(--crai-ink); }
:focus-visible { outline: 2px solid var(--crai-focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }

@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; }
}

/* ---------- Type helpers --------------------------------------------------- */
.crai-display-xl { font-family: var(--crai-font-display); font-weight: 500; font-size: var(--crai-size-display-xl); line-height: var(--crai-leading-tight); letter-spacing: var(--crai-tracking-display); text-wrap: balance; }
.crai-display-l  { font-family: var(--crai-font-display); font-weight: 500; font-size: var(--crai-size-display-l); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.crai-display-m  { font-family: var(--crai-font-display); font-weight: 500; font-size: var(--crai-size-display-m); line-height: var(--crai-leading-snug); letter-spacing: -0.01em; text-wrap: balance; }
.crai-lede { font-size: var(--crai-size-lede); line-height: 1.55; color: var(--crai-muted); max-width: 36em; }
.crai-small { font-size: var(--crai-size-body-s); line-height: 1.5; }
.crai-caption { font-size: var(--crai-size-caption); line-height: 1.45; color: var(--crai-muted); }
.crai-eyebrow { font-family: var(--crai-font-sans); font-size: var(--crai-size-eyebrow); font-weight: 700; line-height: 1.4; letter-spacing: var(--crai-tracking-eyebrow); text-transform: uppercase; color: var(--crai-muted); }
.crai-muted { color: var(--crai-muted); }

/* Marker highlight: marigold band under a phrase. Ink text only. */
.crai-hl { box-shadow: inset 0 -0.26em 0 var(--crai-marigold); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* On evergreen, switch to an underline so the text keeps its contrast. */
.crai-band .crai-hl, .crai-hl--underline { box-shadow: none; text-decoration: underline; text-decoration-color: var(--crai-marigold); text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }

/* ---------- Layout --------------------------------------------------------- */
.crai-container { width: 100%; max-width: calc(var(--crai-container) + 2 * var(--crai-gutter)); margin-inline: auto; padding-inline: var(--crai-gutter); }
.crai-stack { display: flex; flex-direction: column; gap: var(--crai-gap, var(--crai-space-6)); }
.crai-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crai-gap, var(--crai-space-4)); }
.crai-section { padding-block: clamp(48px, 7vw, 96px); }
.crai-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; }
.crai-skip { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--crai-radius-m); background: var(--crai-evergreen); color: var(--crai-on-evergreen); font-weight: 700; text-decoration: none; }
.crai-skip:focus { top: 12px; }

/* ---------- Logo ----------------------------------------------------------- */
/* Markup: <a class="crai-logo" href="/"><svg class="crai-logo__mark" …/><span class="crai-logo__text"><span>Citizens <span class="crai-logo__for">for</span></span><span>Responsible AI</span></span></a>
   Proportions are tied to font-size: mark height 2.39em, gap 0.586em. Set font-size to scale the lockup. */
.crai-logo { display: inline-flex; align-items: center; gap: 0.586em; font-size: 19px; color: var(--crai-ink); text-decoration: none; }
.crai-logo__mark { height: 2.39em; width: auto; flex: none; color: var(--crai-evergreen); }
.crai-logo__text { display: flex; flex-direction: column; font-family: var(--crai-font-sans); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; }
.crai-logo__for { font-weight: 400; }
.crai-logo--reversed, .crai-logo--reversed .crai-logo__mark { color: var(--crai-on-evergreen); }
.crai-logo--sm { font-size: 15px; }

/* ---------- Header ----------------------------------------------------------- */
.crai-header { position: relative; z-index: 10; background: var(--crai-paper); border-bottom: 1px solid var(--crai-line); }
.crai-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--crai-space-6); min-height: 84px; }
.crai-nav { display: flex; align-items: center; gap: var(--crai-space-8); }
.crai-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--crai-tap); color: var(--crai-ink); font-weight: 500; text-decoration: none; }
.crai-nav__link:hover { text-decoration: underline; }
.crai-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--crai-marigold); text-underline-offset: 0.35em; }
.crai-menu-button { display: none; align-items: center; justify-content: center; width: var(--crai-tap); height: var(--crai-tap); margin-right: -10px; padding: 0; border: 0; border-radius: var(--crai-radius-m); background: transparent; color: var(--crai-ink); cursor: pointer; }
@media (max-width: 767px) {
  .crai-header__inner { min-height: 64px; }
  .crai-header .crai-logo { font-size: 15px; }
  .crai-menu-button { display: inline-flex; }
  .crai-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--crai-gutter) 20px; background: var(--crai-paper); border-bottom: 1px solid var(--crai-line); }
  .crai-nav[data-open="true"] { display: flex; }
  .crai-nav__link { min-height: 52px; border-bottom: 1px solid var(--crai-line); }
  .crai-nav .crai-btn { margin-top: 16px; }
}

/* ---------- Buttons -------------------------------------------------------- */
.crai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: var(--crai-radius-m);
  font-family: var(--crai-font-sans); font-size: var(--crai-size-button); font-weight: 700; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--crai-dur-fast) var(--crai-ease), border-color var(--crai-dur-fast) var(--crai-ease), color var(--crai-dur-fast) var(--crai-ease);
}
.crai-btn:focus-visible, .crai-btn.is-focus { outline: 2px solid var(--crai-focus); outline-offset: 2px; }
.crai-btn--primary { background: var(--crai-evergreen); color: var(--crai-on-evergreen); }
.crai-btn--primary:hover, .crai-btn--primary.is-hover { background: var(--crai-evergreen-hover); }
.crai-btn--primary:active, .crai-btn--primary.is-active { background: var(--crai-evergreen-active); }
.crai-btn--secondary { background: transparent; color: var(--crai-evergreen); border-color: var(--crai-evergreen); }
.crai-btn--secondary:hover, .crai-btn--secondary.is-hover { background: var(--crai-mist); }
.crai-btn--secondary:active, .crai-btn--secondary.is-active { background: var(--crai-wash); }
.crai-btn--accent { background: var(--crai-marigold); color: var(--crai-ink); }
.crai-btn--accent:hover, .crai-btn--accent.is-hover { background: var(--crai-marigold-hover); }
.crai-btn--quiet { min-height: var(--crai-tap); padding: 0 8px; background: transparent; color: var(--crai-evergreen); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.crai-btn--quiet:hover, .crai-btn--quiet.is-hover { text-decoration-thickness: 2px; }
.crai-btn--sm { min-height: var(--crai-tap); padding: 0 18px; font-size: var(--crai-size-body-s); }
.crai-btn--block { width: 100%; }
.crai-btn:disabled, .crai-btn[aria-disabled="true"] { background: var(--crai-disabled-bg); border-color: transparent; color: var(--crai-disabled-text); cursor: not-allowed; }
.crai-btn[aria-busy="true"] { cursor: progress; }
.crai-btn__icon { width: 18px; height: 18px; flex: none; }

/* ---------- Pill ----------------------------------------------------------- */
.crai-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: var(--crai-radius-pill); background: var(--crai-mist); color: var(--crai-evergreen); font-size: var(--crai-size-body-s); font-weight: 600; line-height: 1.2; }
.crai-pill__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--crai-marigold); box-shadow: 0 0 0 1.5px var(--crai-evergreen); }

/* ---------- Forms ---------------------------------------------------------- */
.crai-field { display: flex; flex-direction: column; gap: 8px; }
.crai-label { font-size: var(--crai-size-body-s); font-weight: 600; color: var(--crai-ink); }
.crai-label__hint { font-weight: 400; color: var(--crai-muted); }
.crai-input, .crai-select, .crai-textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--crai-border); border-radius: var(--crai-radius-m);
  background: var(--crai-surface); color: var(--crai-ink);
  font-family: var(--crai-font-sans); font-size: var(--crai-size-body); line-height: 1.4;
  transition: border-color var(--crai-dur-fast) var(--crai-ease);
}
.crai-input::placeholder, .crai-textarea::placeholder { color: var(--crai-placeholder); opacity: 1; }
.crai-input:hover, .crai-select:hover, .crai-textarea:hover, .crai-input.is-hover { border-color: var(--crai-ink); }
.crai-input:focus-visible, .crai-select:focus-visible, .crai-textarea:focus-visible, .crai-input.is-focus { outline: 2px solid var(--crai-focus); outline-offset: 2px; border-color: var(--crai-evergreen); }
.crai-input:disabled, .crai-textarea:disabled { background: var(--crai-disabled-bg); border-color: var(--crai-disabled-bg); color: var(--crai-disabled-text); cursor: not-allowed; }
.crai-select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%2313241C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5 7 9.5 11 5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.crai-textarea { min-height: 160px; resize: vertical; }
.crai-help { font-size: 14px; line-height: 1.45; color: var(--crai-muted); }
.crai-field--error .crai-input, .crai-field--error .crai-textarea, .crai-field--error .crai-select { border-color: var(--crai-error); }
.crai-field--error .crai-input:focus-visible, .crai-field--error .crai-textarea:focus-visible { outline-color: var(--crai-error); }
.crai-error-text { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--crai-error); }
.crai-error-text svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.crai-counter { align-self: flex-end; font-size: var(--crai-size-caption); color: var(--crai-muted); font-variant-numeric: tabular-nums; }
.crai-counter[data-over="true"] { color: var(--crai-error); font-weight: 700; }

/* Checkbox: a real <input type="checkbox"> inside a <label class="crai-check"> */
.crai-check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--crai-tap); padding-block: 10px; cursor: pointer; font-size: var(--crai-size-body-s); line-height: 1.45; }
.crai-check input { appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--crai-border); border-radius: var(--crai-radius-s); background: var(--crai-surface); cursor: pointer; }
.crai-check input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--crai-on-evergreen); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); opacity: 0; }
.crai-check input:checked { background: var(--crai-evergreen); border-color: var(--crai-evergreen); }
.crai-check input:checked::after { opacity: 1; }
.crai-check input:focus-visible { outline: 2px solid var(--crai-focus); outline-offset: 2px; }

/* Message editor: the draft reads like a letter */
.crai-editor { min-height: 320px; padding: 24px 28px; font-family: var(--crai-font-display); font-size: 1.1875rem; line-height: 1.6; }

/* ---------- Cards ---------------------------------------------------------- */
.crai-card { display: flex; flex-direction: column; gap: var(--crai-space-5); padding: var(--crai-space-8); background: var(--crai-surface); border: 1px solid var(--crai-line); border-radius: var(--crai-radius-l); box-shadow: var(--crai-shadow-card); }
.crai-card--flat { box-shadow: none; }
.crai-card__title { font-family: var(--crai-font-display); font-weight: 500; font-size: var(--crai-size-display-m); line-height: var(--crai-leading-snug); letter-spacing: -0.01em; text-wrap: balance; }
.crai-card__foot { padding-top: var(--crai-space-4); border-top: 1px solid var(--crai-line); }
@media (max-width: 767px) { .crai-card { padding: var(--crai-space-5); gap: var(--crai-space-4); } }

/* Representative card. Party is shown as neutral text: never color-code parties. */
.crai-rep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--crai-space-4); padding: var(--crai-space-4) var(--crai-space-5); background: var(--crai-surface); border: 1px solid var(--crai-line); border-radius: var(--crai-radius-l); }
.crai-rep__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--crai-mist); color: var(--crai-evergreen); font-weight: 700; font-size: 16px; overflow: hidden; }
.crai-rep__avatar img { width: 100%; height: 100%; object-fit: cover; }
.crai-rep__name { font-weight: 700; font-size: var(--crai-size-body); line-height: 1.3; }
.crai-rep__meta { font-size: 14px; line-height: 1.4; color: var(--crai-muted); }
.crai-rep .crai-check { align-items: center; justify-content: center; min-width: var(--crai-tap); padding-block: 0; }

/* ---------- Steps and progress --------------------------------------------- */
.crai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--crai-space-5); }
.crai-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--crai-space-12); }
@media (max-width: 767px) { .crai-steps--row { grid-template-columns: 1fr; gap: var(--crai-space-4); } }
.crai-step { display: flex; align-items: flex-start; gap: var(--crai-space-4); }
.crai-step__num { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--crai-marigold); color: var(--crai-ink); font-size: 16px; font-weight: 800; }
.crai-step__title { display: block; font-size: var(--crai-size-title); font-weight: 700; line-height: 1.3; }
.crai-step__text { display: block; margin-top: 4px; font-size: var(--crai-size-body-s); line-height: 1.45; color: var(--crai-muted); }
.crai-band .crai-step__text { color: var(--crai-on-evergreen-muted); }

.crai-progress { display: flex; flex-direction: column; gap: 10px; }
.crai-progress__label { font-size: var(--crai-size-body-s); color: var(--crai-muted); }
.crai-progress__label strong { color: var(--crai-ink); }
.crai-progress__bars { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.crai-progress__bars li { height: 6px; border-radius: 3px; background: var(--crai-line); }
.crai-progress__bars li[data-state="done"], .crai-progress__bars li[aria-current="step"] { background: var(--crai-evergreen); }

/* ---------- Alerts --------------------------------------------------------- */
.crai-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--crai-radius-m); background: var(--crai-info-bg); color: var(--crai-ink); font-size: var(--crai-size-body-s); line-height: 1.5; }
.crai-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--crai-evergreen); }
.crai-alert__title { display: block; font-weight: 700; }
.crai-alert--success { background: var(--crai-success-bg); }
.crai-alert--warning { background: var(--crai-warning-bg); color: var(--crai-warning-text); }
.crai-alert--warning svg { color: var(--crai-warning-text); }
.crai-alert--error { background: var(--crai-error-bg); }
.crai-alert--error svg, .crai-alert--error .crai-alert__title { color: var(--crai-error); }

/* ---------- Band (dark section) -------------------------------------------- */
.crai-band { background: var(--crai-evergreen); color: var(--crai-on-evergreen); }
.crai-band p { color: var(--crai-on-evergreen-muted); }
.crai-band a:not(.crai-btn) { color: var(--crai-on-evergreen); }
.crai-band :focus-visible, .crai-band .crai-btn:focus-visible { outline-color: var(--crai-focus-on-dark); }
.crai-band .crai-btn--primary { background: var(--crai-on-evergreen); color: var(--crai-evergreen); }
.crai-band .crai-btn--primary:hover { background: var(--crai-mist); }
.crai-band .crai-btn--secondary { color: var(--crai-on-evergreen); border-color: var(--crai-on-evergreen); }
.crai-band .crai-btn--secondary:hover { background: rgba(246, 245, 239, 0.12); }

/* ---------- Footer --------------------------------------------------------- */
.crai-footer { padding-block: var(--crai-space-6); border-top: 1px solid var(--crai-line); font-size: 14px; color: var(--crai-muted); }
.crai-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--crai-space-4) var(--crai-space-8); }
.crai-footer__links { display: flex; flex-wrap: wrap; gap: var(--crai-space-2) var(--crai-space-6); list-style: none; margin: 0; padding: 0; }
.crai-footer a { color: var(--crai-muted); }
.crai-disclaimer { font-size: var(--crai-size-caption); line-height: 1.45; color: var(--crai-muted); }

/* ---------- Loading -------------------------------------------------------- */
/* The spinner is the C of the mark, turning. Pair it with visible text. */
.crai-spinner { display: inline-block; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 4px solid var(--crai-evergreen); border-right-color: transparent; animation: crai-spin 0.9s linear infinite; }
.crai-spinner--sm { width: 18px; height: 18px; border-width: 3px; }
.crai-btn--primary .crai-spinner { border-color: var(--crai-on-evergreen); border-right-color: transparent; }
.crai-loading { display: flex; flex-direction: column; align-items: center; gap: var(--crai-space-4); padding: var(--crai-space-12) var(--crai-space-6); color: var(--crai-muted); text-align: center; }
@keyframes crai-spin { to { transform: rotate(360deg); } }

/* ---------- Letter preview ------------------------------------------------- */
.crai-letter { padding: var(--crai-space-8) clamp(20px, 4vw, 40px); background: var(--crai-surface); border: 1px solid var(--crai-line); border-radius: var(--crai-radius-l); font-family: var(--crai-font-display); font-size: 1.1875rem; line-height: 1.6; }
.crai-letter p + p { margin-top: 1em; }

/* ---------- Prose (About, Privacy & data, Issue & sources) ----------------- */
.crai-prose { max-width: var(--crai-measure); font-size: 1.125rem; line-height: 1.7; }
.crai-prose > * + * { margin-top: 1.1em; }
.crai-prose h2 { margin-top: 2em; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.crai-prose h3 { margin-top: 1.6em; font-size: 1.5rem; }
.crai-prose h2 + *, .crai-prose h3 + * { margin-top: 0.5em; }
.crai-prose ul, .crai-prose ol { padding-left: 1.3em; }
.crai-prose li + li { margin-top: 0.4em; }
.crai-prose li::marker { color: var(--crai-evergreen); }
.crai-prose blockquote { font-family: var(--crai-font-display); font-size: 1.375rem; font-style: italic; line-height: 1.45; }
.crai-prose blockquote::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--crai-marigold); }
.crai-sources { font-size: var(--crai-size-body-s); line-height: 1.55; color: var(--crai-muted); }
.crai-sources a { overflow-wrap: anywhere; }