/* Conexus core page shell and form components (design PR15.2).
   Reads only --cnx-* tokens (theme.css). No inline-style hooks: everything a
   page needs is a class here, because the CSP forbids style="". */

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

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cnx-surface);
  color: var(--cnx-text);
  font-family: var(--cnx-font-text);
  font-weight: var(--cnx-text-weight);
  font-size: var(--cnx-fs-body);
  line-height: 1.5;
  caret-color: var(--cnx-primary);
  accent-color: var(--cnx-primary);
}

::selection { background: var(--cnx-selection); color: var(--cnx-text); }

:focus-visible {
  outline: var(--cnx-focus-ring-width) solid var(--cnx-focus-ring);
  outline-offset: var(--cnx-focus-ring-offset);
}

a {
  color: var(--cnx-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---- Shell ------------------------------------------------------------- */

.cnx-skip {
  position: absolute;
  left: var(--cnx-s-5);
  top: var(--cnx-s-2);
  padding: var(--cnx-s-2) var(--cnx-s-4);
  background: var(--cnx-surface);
  border: 1px solid var(--cnx-border-input);
  border-radius: var(--cnx-radius);
  transform: translateY(-300%);
}
.cnx-skip:focus { transform: none; }

.cnx-container {
  width: 100%;
  max-width: var(--cnx-container-width);
  margin-inline: auto;
  padding-inline: var(--cnx-s-5);
}

.cnx-header {
  border-bottom: 1px solid var(--cnx-border);
}
.cnx-header .cnx-container {
  display: flex;
  align-items: center;
  min-height: var(--cnx-header-height);
}

.cnx-brand {
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--cnx-text);
}

.cnx-main { flex: 1 0 auto; padding-block: var(--cnx-s-7) var(--cnx-s-8); }

.cnx-column { max-width: var(--cnx-column-width); }

.cnx-footer {
  border-top: 1px solid var(--cnx-border);
  padding-block: var(--cnx-s-5);
  font-size: var(--cnx-fs-small);
  color: var(--cnx-text-muted);
}
.cnx-footer p { margin: 0; }

/* ---- Typography -------------------------------------------------------- */

.cnx-title {
  margin: 0;
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: var(--cnx-fs-title);
  line-height: 1.15;
  text-wrap: balance;
}

/* The one yellow accent of the page (kit rule 2). */
.cnx-rule {
  width: var(--cnx-s-6);
  height: var(--cnx-s-1);
  margin: var(--cnx-s-3) 0 var(--cnx-s-4);
  background: var(--cnx-accent);
}

.cnx-lead {
  margin: 0;
  max-width: 65ch;
  color: var(--cnx-text-muted);
  text-wrap: pretty;
}

.cnx-lead + .cnx-hint { margin-top: var(--cnx-s-3); }

/* Plain running text under the title (the core has no card to put it in). */
.cnx-text {
  margin: var(--cnx-s-4) 0 0;
  max-width: 65ch;
  text-wrap: pretty;
}
.cnx-text--tight { margin-top: var(--cnx-s-3); }

.cnx-actions { margin-top: var(--cnx-s-5); }

[hidden] { display: none !important; }

.cnx-links {
  margin: var(--cnx-s-5) 0 0;
  font-size: var(--cnx-fs-small);
}
/* A link alone on its line is its own target: 24 px minimum (WCAG 2.5.8), the
   full touch size on a phone. */
.cnx-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cnx-s-6);
}

/* A one-time message (logged out, verification expired) above the form. Plain
   strong text on purpose: a bordered box here reads as one more input. */
.cnx-notice {
  margin: var(--cnx-s-5) 0 0;
  font-weight: var(--cnx-strong-weight);
  color: var(--cnx-text);
}

/* The same message as a confirmation (a reset finished): an icon next to the text,
   so it never relies on colour alone. */
.cnx-notice--success {
  display: flex;
  gap: var(--cnx-s-3);
  align-items: flex-start;
}
.cnx-notice--success .cnx-icon { color: var(--cnx-success); margin-top: 0.125rem; }

/* ---- Forms ------------------------------------------------------------- */

.cnx-form {
  display: grid;
  gap: var(--cnx-s-5);
  margin-top: var(--cnx-s-5);
}

.cnx-field label {
  display: block;
  margin-bottom: var(--cnx-s-1);
  font-weight: var(--cnx-strong-weight);
  font-size: var(--cnx-fs-small);
}

.cnx-input {
  display: block;
  width: 100%;
  min-height: var(--cnx-touch);
  padding: 0 var(--cnx-s-3);
  border: 1px solid var(--cnx-border-input);
  border-radius: var(--cnx-radius);
  background: var(--cnx-surface);
  color: var(--cnx-text);
  font: inherit;
  font-size: var(--cnx-fs-body);
  font-weight: 400;
}
.cnx-input[aria-invalid="true"] { border-color: var(--cnx-danger); }

/* A field with a button beside it (the show-password toggle). */
.cnx-input-group {
  display: flex;
  gap: var(--cnx-s-2);
  align-items: stretch;
}
.cnx-input-group .cnx-input { flex: 1; min-width: 0; }
.cnx-input-group .cnx-button { flex: none; min-width: 6rem; padding: 0 var(--cnx-s-4); }

.cnx-hint {
  margin: var(--cnx-s-1) 0 0;
  font-size: var(--cnx-fs-small);
  font-weight: 400;
  color: var(--cnx-text-muted);
}

.cnx-error {
  display: flex;
  gap: var(--cnx-s-2);
  align-items: flex-start;
  margin: var(--cnx-s-1) 0 0;
  font-size: var(--cnx-fs-small);
  font-weight: 400;
  color: var(--cnx-danger);
}

.cnx-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cnx-alert {
  display: flex;
  gap: var(--cnx-s-3);
  align-items: flex-start;
  margin-top: var(--cnx-s-5);
  padding: var(--cnx-s-3) var(--cnx-s-4);
  border: 1px solid var(--cnx-danger);
  border-radius: var(--cnx-radius);
}
.cnx-alert .cnx-icon { color: var(--cnx-danger); margin-top: 0.125rem; }
.cnx-alert__title {
  margin: 0;
  font-weight: var(--cnx-strong-weight);
  color: var(--cnx-danger);
}
.cnx-alert ul { margin: var(--cnx-s-1) 0 0; padding-left: var(--cnx-s-4); }

.cnx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cnx-touch);
  padding: 0 var(--cnx-s-5);
  border: 1px solid var(--cnx-primary);
  border-radius: var(--cnx-radius);
  background: var(--cnx-primary);
  color: var(--cnx-on-primary);
  font: inherit;
  font-weight: var(--cnx-strong-weight);
  text-decoration: none;
  cursor: pointer;
}
a.cnx-button { color: var(--cnx-on-primary); }
.cnx-button:active { transform: scale(0.97); }
.cnx-button[aria-busy="true"] {
  background: var(--cnx-primary-busy);
  border-color: var(--cnx-primary-busy);
  cursor: progress;
}

/* Secondary action: same size and shape, outlined instead of filled. */
.cnx-button--secondary {
  background: var(--cnx-surface);
  color: var(--cnx-primary);
}
a.cnx-button--secondary { color: var(--cnx-primary); }
.cnx-button--secondary[aria-busy="true"] { color: var(--cnx-on-primary); }

.cnx-inline-form { display: inline; }

/* Revealed by forms.js when a request has not answered after 15 seconds. */
.cnx-stalled {
  display: grid;
  gap: var(--cnx-s-3);
  padding: var(--cnx-s-3) var(--cnx-s-4);
  border: 1px solid var(--cnx-border-input);
  border-radius: var(--cnx-radius);
}
.cnx-stalled p { margin: 0; }

@media (hover: hover) {
  .cnx-button:hover { background: var(--cnx-primary-hover); border-color: var(--cnx-primary-hover); }
  .cnx-button--secondary:hover {
    background: var(--cnx-surface);
    color: var(--cnx-primary-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cnx-button { transition: transform var(--cnx-motion-fast) var(--cnx-ease-out); }
}

.cnx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Enrollment (PR15.4) ------------------------------------------------ */

.cnx-step { margin-top: var(--cnx-s-6); }
.cnx-step:first-of-type { margin-top: var(--cnx-s-5); }
.cnx-step__title {
  margin: 0;
  font-family: var(--cnx-font-display);
  font-weight: var(--cnx-display-weight);
  font-size: 1.25rem;
  line-height: 1.25;
}

/* The QR sits on its own paper with the 4-module quiet zone built into the SVG. */
.cnx-qr-frame { margin-top: var(--cnx-s-4); }
.cnx-qr {
  display: block;
  width: 12.5rem;
  height: 12.5rem;
  border: 1px solid var(--cnx-border);
}
.cnx-qr-frame + .cnx-links { margin-top: var(--cnx-s-2); }
.cnx-qr__paper { fill: var(--cnx-qr-paper); }
.cnx-qr__ink { fill: var(--cnx-qr-ink); }

/* The manual-entry key: grouped by four, aligned digits, never translated. */
.cnx-secret {
  margin: var(--cnx-s-1) 0 0;
  font-size: 1.125rem;
  font-weight: var(--cnx-strong-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.cnx-resend { margin-top: var(--cnx-s-6); }
.cnx-resend .cnx-hint { margin-top: 0; }
.cnx-resend .cnx-form { margin-top: var(--cnx-s-3); }

/* A single note box (recovery codes warning). One container, no fill, no shadow. */
.cnx-callout {
  margin-top: var(--cnx-s-5);
  padding: var(--cnx-s-3) var(--cnx-s-4);
  border: 1px solid var(--cnx-border-input);
  border-radius: var(--cnx-radius);
}
.cnx-callout p { margin: 0; }
.cnx-callout p + p { margin-top: var(--cnx-s-1); }
.cnx-callout__title { font-weight: var(--cnx-strong-weight); }

.cnx-codes {
  margin: var(--cnx-s-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--cnx-s-2);
}
.cnx-code {
  padding: var(--cnx-s-2) 0;
  border-bottom: 1px solid var(--cnx-border);
  font-size: 1.125rem;
  font-weight: var(--cnx-strong-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  user-select: all;
}

.cnx-actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cnx-s-3);
}

@media print {
  .cnx-header, .cnx-footer, .cnx-skip, .cnx-actions { display: none !important; }
}

/* ---- Narrow screens ---------------------------------------------------- */

@media (max-width: 600px) {
  .cnx-main { padding-block: var(--cnx-s-6) var(--cnx-s-7); }
  .cnx-input, .cnx-button, .cnx-links a { min-height: var(--cnx-touch-mobile); }
  .cnx-form .cnx-button, .cnx-actions .cnx-button { width: 100%; }
  /* the toggle sits beside its field: it keeps its own width */
  .cnx-form .cnx-input-group .cnx-button { width: auto; }
  .cnx-qr { width: 11rem; height: 11rem; }
}

@media (min-width: 601px) {
  .cnx-container { padding-inline: var(--cnx-s-6); }
}