/* ==========================================================================
   U01 Utility templates — page styles
   404, thank-you, cookie consent states, HCP gate states, legal page.
   ========================================================================== */

/* ── Page rhythm & header (slightly tighter than the other kit pages) ───── */

.utility-main { --kit-main-gap: clamp(56px, 7vw, 88px); }

.utility-header { gap: 20px; }

.utility-header__title { font-size: clamp(44px, 1.4rem + 5vw, 96px); }
.utility-header__title .serif-accent { letter-spacing: inherit; }

.utility-header__lead {
  max-width: 640px;
  font-size: 19px;
  line-height: 1.55;
}

.utility-section { gap: 14px; }

.utility-section__label {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

/* ── 01 · 404 ───────────────────────────────────────────────────────────── */

.not-found {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 440px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-50);
  overflow: hidden;
}

.not-found__ring {
  position: absolute;
  top: 50%;
  border-radius: 50%;
}
.not-found__ring--outer {
  right: -80px;
  width: 460px;
  height: 460px;
  margin-top: -230px;
  border: 1px solid var(--ink-a10);
}
.not-found__ring--inner {
  right: -10px;
  width: 320px;
  height: 320px;
  margin-top: -160px;
  border: 1px dashed var(--ink-a20);
}

.not-found__content {
  position: relative;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 5vw, 64px);
}

.not-found__code {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-600);
}

.not-found__title {
  font: 500 clamp(40px, 1.4rem + 3vw, 72px)/1 'Geist', sans-serif;
  letter-spacing: -.04em;
}
.not-found__title em { font: italic 400 1.08em 'Instrument Serif', serif; }

.not-found__text {
  font: 400 17px/1.55 'Geist', sans-serif;
  color: var(--graphite-750);
}

.not-found__search {
  max-width: 480px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
}
.not-found__search:focus-within { border-color: var(--graphite-900); }

.not-found__search-icon {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--graphite-600);
  border-radius: 50%;
}

.not-found__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: 400 16px/1 'Geist', sans-serif;
}

.not-found__search-btn {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--graphite-900);
  color: var(--graphite-50);
  font: 500 14px/1 'Geist', sans-serif;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 500 15px/1 'Geist', sans-serif;
}

/* ── 02 · Thank-you ─────────────────────────────────────────────────────── */

.thank-you {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.thank-you__main {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.thank-you__check {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font: 600 22px/1 'Geist', sans-serif;
}

.thank-you__title {
  font: 500 clamp(32px, 1.3rem + 2vw, 52px)/1.05 'Geist', sans-serif;
  letter-spacing: -.03em;
}

.thank-you__text {
  font: 400 17px/1.55 'Geist', sans-serif;
  color: var(--graphite-750);
}

.thank-you__ref {
  font: 400 13px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.next-steps {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-steps__item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-a10);
}

.next-steps__num {
  font: 500 12px/1.6 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.next-steps__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.next-steps__title { font: 500 16px/1.3 'Geist', sans-serif; }

.next-steps__text {
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 03 · Cookie consent ────────────────────────────────────────────────── */

.consent-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

/* Segmented state switch (role="radiogroup") */
.state-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
}

.state-switch__option {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  font: 500 13px/1 'Geist', sans-serif;
  cursor: pointer;
}
.state-switch__option[aria-checked="true"] {
  background: var(--graphite-900);
  color: var(--graphite-50);
}

/* Hatched "page behind the banner" */
.consent-stage {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: repeating-linear-gradient(135deg, var(--graphite-100) 0 12px, #E6E9E4 12px 24px);
  overflow: hidden;
}

.consent-banner {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius-l);
  background: rgba(245, 246, 243, .94);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px -16px rgba(10, 18, 22, .3);
}

.consent-banner__title { font: 500 17px/1.3 'Geist', sans-serif; }

.consent-banner__text {
  font: 400 15px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* Reject and Accept carry equal weight (K01 · principle 10) */
.consent-banner__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.consent-banner__btn {
  padding: 1px 6px;
  font-size: 15px;
}
.consent-banner__btn--prefs { background: var(--graphite-0); }

.consent-prefs {
  width: min(640px, 100%);
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  box-shadow: 0 18px 40px -16px rgba(10, 18, 22, .3);
}

.consent-prefs__title {
  padding-bottom: 8px;
  font: 500 19px/1.3 'Geist', sans-serif;
}

.consent-category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-a08);
}

.consent-category__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.consent-category__name { font: 500 15px/1.3 'Geist', sans-serif; }

.consent-category__desc {
  font: 400 13px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* Toggle switch (role="switch"); the essential category is disabled + on */
.consent-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--graphite-300);
  cursor: pointer;
}
.consent-switch[aria-checked="true"] { background: var(--scrub-600); }
.consent-switch:disabled { background: var(--graphite-400); }

.consent-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--graphite-0);
  box-shadow: 0 1px 2px rgba(10, 18, 22, .3);
  transition: left 200ms var(--ease-systole);
}
.consent-switch[aria-checked="true"] .consent-switch__knob { left: 21px; }

.consent-prefs__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
}

.consent-prefs__btn {
  height: 44px;
  padding: 0 18px;
  background: var(--graphite-0);
  font-size: 14px;
}
.consent-prefs__btn--save {
  border: 0;
  background: var(--graphite-900);
}

.consent-saved {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--graphite-900);
  color: var(--graphite-50);
  font: 500 14px/1 'Geist', sans-serif;
}

.consent-saved__check { color: var(--scrub-300); }

.consent-saved__change {
  margin-left: 8px;
  border: 0;
  background: none;
  color: var(--mist-300);
  font: 500 13px/1 'Geist', sans-serif;
  text-decoration: underline;
  cursor: pointer;
}

/* ── 04 · HCP gate states ───────────────────────────────────────────────── */

.gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.gate-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.gate-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font: 500 12px/1 'Geist', sans-serif;
}
.gate-card__badge--default    { background: var(--status-medium-bg);  color: var(--status-medium-fg); }
.gate-card__badge--remembered { background: var(--status-success-bg); color: var(--status-success-fg); }
.gate-card__badge--declined   { background: var(--status-low-bg);     color: var(--status-low-fg); }

.gate-card__title { font: 500 17px/1.3 'Geist', sans-serif; }

.gate-card__text {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}

.gate-card__tech {
  margin-top: auto;
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── 05 · Legal page ────────────────────────────────────────────────────── */

.legal-page {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.legal-toc {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px;
  border-right: 1px solid var(--ink-a08);
}

.legal-toc__label {
  padding-bottom: 10px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.legal-toc__link,
.legal-toc__link:hover {
  min-height: 36px;
  display: flex;
  align-items: center;
  font: 400 14px/1.3 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}

/* max-width in ch of the 16px body font */
.legal-article {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 4vw, 48px);
}

.legal-article__meta {
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.legal-article__title {
  margin: 0;
  font: 500 clamp(30px, 1.3rem + 1.6vw, 44px)/1.1 'Geist', sans-serif;
  letter-spacing: -.025em;
}

.legal-article__summary {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-m);
  background: var(--graphite-50);
  font: 400 15px/1.6 'Geist', sans-serif;
}
.legal-article__summary b { font-weight: 500; }

.legal-article__heading {
  margin: 8px 0 0;
  font: 500 20px/1.3 'Geist', sans-serif;
}

.legal-article__text {
  margin: 0;
  font: 400 16px/1.7 'Geist', sans-serif;
  color: var(--graphite-750);
}

.legal-article__footer {
  font: 400 13px/1.5 'Geist', sans-serif;
  color: var(--graphite-500);
}

.utility-pager { padding-top: 16px; }