/* Shared components of the access, account, email-verification, password and privacy pages.
   Loaded after access.css (tokens, form card, inputs, .primary) and before global-nav.css.
   Mobile first: the base rules target phones, min-width queries widen the layout. */
:root {
  /* Error text: the same red as the idea form's field errors. Orange fills that carry white text
     (step badges, the "!" badge, the error toast) all use --orange-fill (#c4471c). */
  --danger: #a13e34;
  --success: #1f7a55;
  --info-bg: #f3f6f9;
}

body { font-size: 16px; line-height: 1.5; }

/* Elements toggled with the hidden attribute (several of them set an explicit display). */
.access-card [hidden],
.access-intro [hidden],
.auth-toast[hidden],
.privacy-shell [hidden] { display: none !important; }

/* One focus ring on every page: 3px solid orange, 2px away from the element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #f2673a;
  outline-offset: 2px;
}

/* Hero tagline and workshop chip: uppercase one-liners wrap into balanced lines, and the tagline
   breaks only between its three parts (never inside "Role-based"). */
.access-intro footer,
.workshop-chip { text-wrap: balance; }
.access-intro footer span { white-space: nowrap; }

/* ---------------------------------------------------------------- buttons and links */
.primary:disabled,
.secondary:disabled,
.link-button:disabled { opacity: .6; cursor: progress; }

a.primary { text-decoration: none; }

.secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid #c9d1da;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: 700 15px/1.25 Geist, "Segoe UI", Aptos, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.secondary:hover { border-color: var(--orange); color: var(--orange-text); }

.link-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 6px 0;
  border: 0;
  color: #3f4c5e;
  background: none;
  font: 700 15px/1.4 Geist, "Segoe UI", Aptos, sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover { color: var(--orange-text); }

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  margin-top: 12px;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.auth-actions .primary { margin-top: 0; }

.demo-note a { color: inherit; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- form feedback */
.field-error {
  display: block;
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.field-error:empty { display: none; }

.check + .field-error { margin-top: 6px; }

input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px #a13e341a; }

/* Choice fields (organization): the same box as the text inputs (access.css) with a chevron.
   The placeholder choice ("Select your organization") is grey like an input placeholder. */
.access-card select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 46px 0 14px;
  border: 1px solid #c9d1da;
  border-radius: 10px;
  color: var(--ink);
  background: #fbfcfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23122238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  appearance: none;
  cursor: pointer;
}

.access-card select:focus { border-color: var(--orange); }
.access-card select:has(> option[value=""]:checked) { color: #6f7b8b; }
.access-card select option { color: var(--ink); }
.access-card select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px #a13e341a; }

/* Long placeholders (e.g. the access-code hint) end in an ellipsis instead of being cut on phones. */
.access-card input { text-overflow: ellipsis; }

input[readonly] { color: #4f5b6b; background: #f1f3f5; cursor: default; }
input[readonly]:focus { border-color: var(--line); box-shadow: none; }

.message { line-height: 1.5; }
/* Cloudflare Turnstile: shown only when the challenge needs an interaction (appearance: interaction-only). */
.turnstile-box { margin-top: 14px; }
.turnstile-box:empty { margin-top: 0; }
.message.is-success { color: var(--success); }

.message-actions { margin: 4px 0 6px; }

.form-notice {
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1px solid #f2b39d;
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  color: #7f341f;
  background: #fff3ed;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.form-notice.is-info {
  border-color: #c9d6e3;
  border-left-color: var(--ink);
  color: var(--ink);
  background: var(--info-bg);
}

.code-input { text-transform: uppercase; letter-spacing: .12em; }
.code-input::placeholder { text-transform: none; letter-spacing: 0; }

.code-status {
  min-height: 21px;
  margin: 8px 0 0;
  color: #4f5b6b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.code-status.is-ok { color: var(--success); font-weight: 700; }
.code-status.is-error { color: var(--danger); font-weight: 700; }
.code-status.is-pending { color: #4f5b6b; font-style: italic; }

.login-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
}

.login-options .link-button { margin-top: 14px; }

.auth-copy {
  max-width: 70ch;
  margin: 0 0 12px;
  color: #4f5b6b;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-line;
}

.auth-copy strong { color: var(--ink); overflow-wrap: anywhere; }
.auth-copy--muted { font-size: 15px; }

.auth-done > header > span { font-size: 20px; }

.verify-resend { margin-top: 18px; }

/* ---------------------------------------------------------------- loading / error / empty states */
.auth-state {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 44px 24px;
  border: 1px solid #12223818;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px #12223816;
  text-align: center;
}

.auth-state b { font: 400 26px/1.2 Georgia, serif; }
.auth-state p { max-width: 440px; margin: 0; color: #4f5b6b; font-size: 16px; line-height: 1.6; }
.auth-state--error b { color: var(--danger); }

.auth-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f2673a33;
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: auth-spin .9s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .auth-spinner { animation: none; }
}

.auth-empty {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed #c9d1da;
  border-radius: 12px;
  color: #4f5b6b;
  background: #fbfcfd;
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- non-form cards (same look as the form card) */
.auth-panel {
  padding: 26px 20px;
  border: 1px solid #12223818;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px #12223816;
}

.auth-panel > header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

.auth-panel > header > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--orange-fill);
  font-size: 14px;
  font-weight: 800;
}

.auth-panel > header small { color: var(--orange-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.auth-panel h2 { margin: 4px 0 0; font: 400 30px/1.15 Georgia, serif; }
.auth-panel.auth-done > header > span { background: var(--success); font-size: 20px; }
.auth-panel.auth-failed > header > span { background: var(--orange-fill); font-size: 20px; }

h2[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- toast */
.auth-toast-region {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 60;
  pointer-events: none;
}

.auth-toast {
  padding: 16px 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 18px 45px rgba(18, 34, 56, .3);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: auto;
}

.auth-toast.is-success { background: var(--success); }
.auth-toast.is-error { background: var(--orange-fill); }

/* ---------------------------------------------------------------- privacy notice */
.privacy-shell { width: calc(100% - 32px); margin: 0 auto; padding: 24px 0 8px; }

.privacy-hero {
  padding: 30px 22px;
  border-radius: 18px;
  color: #fff;
  background: radial-gradient(circle at 85% 12%, #f2673a2a, transparent 23rem), var(--ink);
}

.privacy-hero h1 { margin: 14px 0 16px; font: 400 40px/1.02 Georgia, serif; letter-spacing: -.03em; }
.privacy-hero h1 em { color: var(--orange); font-weight: 400; }
.privacy-hero p { max-width: 42em; margin: 0; color: #d3dbe4; font-size: 17px; line-height: 1.6; }
.privacy-hero .workshop-chip { margin-top: 20px; }

.privacy-draft {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid #f2b39d;
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  color: #7f341f;
  background: #fff3ed;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.privacy-card {
  margin-top: 16px;
  padding: 26px 20px;
  border: 1px solid #12223818;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px #12223816;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.privacy-card section + section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.privacy-card h2 { margin: 0 0 12px; font: 400 27px/1.2 Georgia, serif; }
.privacy-card h2 small { display: block; margin-bottom: 8px; color: var(--orange-text); font: 800 12px/1 Geist, "Segoe UI", Aptos, sans-serif; letter-spacing: .08em; }
.privacy-card p { max-width: 72ch; margin: 0 0 12px; color: #34414f; }
.privacy-card ul { max-width: 72ch; margin: 0 0 12px; padding-left: 22px; color: #34414f; }
.privacy-card li + li { margin-top: 8px; }
.privacy-card a { color: var(--ink); text-underline-offset: 3px; }
.privacy-card a:hover { color: var(--orange-text); }
.privacy-meta { color: #4f5b6b; font-size: 14px; }
.privacy-placeholder { padding: 1px 6px; border-radius: 5px; background: #fff3ed; color: #7f341f; font-weight: 700; }

@media (max-width: 560px) {
  form h2,
  .auth-panel h2 { font-size: 26px; }
}

/* Phones: the first form field must be on the first screen. The dark intro shrinks to the
   eyebrow and a 32px headline; the intro paragraph, the workshop chip and the tagline stay in
   the HTML but are not shown. The privacy notice keeps its intro paragraph (it is the start of
   the text people came to read) and only drops the chip. */
@media (max-width: 720px) {
  .access-intro { padding: 20px 16px 22px; }
  .access-intro > div { margin: 0; }
  .access-intro h1 { margin: 8px 0 0; font-size: 32px; line-height: 1.08; letter-spacing: -.02em; }
  .access-intro p,
  .access-intro .workshop-chip,
  .access-intro > .access-lower { display: none; }
  .access-card { padding: 20px 0 32px; }
  .access-card .tabs { margin-bottom: 12px; }
  .access-card form,
  .access-card .auth-panel { padding: 22px 18px 24px; }
  .access-card form > header,
  .access-card .auth-panel > header { margin-bottom: 16px; }

  /* Checkbox rows are finger-sized: the whole label toggles the box. */
  .access-card .check { min-height: 44px; margin-top: 10px; padding: 10px 0; }

  .privacy-shell { padding-top: 16px; }
  .privacy-hero { padding: 22px 18px 24px; }
  .privacy-hero h1 { margin: 8px 0 12px; font-size: 32px; line-height: 1.08; letter-spacing: -.02em; }
  .privacy-hero p { font-size: 16px; }
  .privacy-hero .workshop-chip { display: none; }
}

@media (min-width: 561px) {
  /* Same 34px as the form cards (access.css), so step badges and text line up from card to card. */
  .auth-panel { padding: 34px; }
  .auth-actions { flex-direction: row; flex-wrap: wrap; }
  .auth-actions .primary { width: auto; flex: 1 1 240px; }
  .auth-actions .secondary { flex: 0 1 auto; min-height: 54px; }
  .auth-toast-region { left: auto; right: 24px; bottom: 24px; width: min(420px, calc(100% - 48px)); }
  .privacy-shell { width: calc(100% - 48px); }
  .privacy-hero { padding: 42px 44px; }
  .privacy-hero h1 { font-size: 52px; }
  .privacy-card { padding: 40px 44px; }
}

@media (min-width: 1040px) {
  .privacy-shell { width: min(840px, calc(100% - 48px)); padding-top: 34px; }
}

@media print {
  .privacy-hero { color: var(--ink); background: none; }
  .privacy-card { box-shadow: none; }
}