/* Small pages — /login, /contact, and the custom 404 (concept language,
   2026-07-12). Linked in-body from their templates (same pattern as
   home.css / upload.css) so it lands after base.css in document order
   and wins equal-specificity overrides. All tokens (cherry oklch ramp,
   warm inks, fonts, radii) come from base.css :root. Every selector is
   scoped under .sp-stage so nothing leaks into other pages. */

.shell.sp-stage {
  /* match .shell's 1180 max so contact + 404 line up with every
     other page. `.narrow` opts back into the 560px single-CTA
     column for /login (a bounce landing, not a content page). */
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 28px 72px;
}
.shell.sp-stage.narrow { max-width: 560px; }

/* ───── Hero head: kicker + Display title + mono lede ───── */
.sp-stage .sp-head { margin-bottom: 32px; }
.sp-stage .sp-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-400);
  margin: 0 0 14px;
}
.sp-stage .sp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 52px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-800);
  margin: 0;
}
.sp-stage .sp-lede {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 56ch;
}
.sp-stage .sp-lede em {
  font-style: normal;
  color: var(--ink-700);
}
.sp-stage .sp-path,
.sp-stage .sp-lede code,
.sp-stage .sp-done-sub code {
  font-family: var(--font-mono);
  font-size: inherit;
  background: color-mix(in oklch, var(--red-400), transparent 85%);
  color: var(--red-400);
  padding: 1px 7px;
  border-radius: 4px;
  word-break: break-all;
}

/* ───── Alert banner (auth errors, form validation) ───── */
.sp-stage .sp-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid color-mix(in oklch, var(--red-500), transparent 40%);
  background: color-mix(in oklch, var(--red-500), transparent 90%);
  border-radius: var(--rad-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-800);
}
.sp-stage .sp-banner .ic {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: var(--red-400);
  flex: none;
}

/* ───── Card + labelled rows (red-upload form pattern) ───── */
.sp-stage .sp-card {
  border: 1px solid color-mix(in oklch, var(--ink-300), transparent 50%);
  border-radius: var(--rad-md);
  background: color-mix(in oklch, var(--ink-100), transparent 50%);
  padding: 4px 22px;
}
.sp-stage .sp-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink-300), transparent 60%);
  align-items: start;
}
.sp-stage .sp-row:last-child { border-bottom: 0; }
.sp-stage .sp-row .row-head { padding-top: 12px; }
.sp-stage .sp-row .row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.sp-stage .sp-row .row-label em {
  display: block;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: color-mix(in oklch, var(--ink-500), transparent 25%);
  margin-top: 3px;
}
.sp-stage .sp-row .row-body {
  display: flex; flex-direction: column; gap: 6px;
}
.sp-stage .sp-row input,
.sp-stage .sp-row select,
.sp-stage .sp-row textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--ink-50);
  color: var(--ink-800);
  border: 1px solid var(--ink-300);
  border-radius: var(--rad-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sp-stage .sp-row input:focus,
.sp-stage .sp-row select:focus,
.sp-stage .sp-row textarea:focus {
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--red-500), transparent 88%);
}
.sp-stage .sp-row textarea {
  resize: vertical;
  min-height: 200px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.sp-stage .sp-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

/* ───── Actions row + big auth CTA ───── */
.sp-stage .sp-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 24px;
}
.sp-stage .btn .arr { font-size: 14px; line-height: 1; }
.sp-stage .sp-cta {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  padding: 16px 22px;
  letter-spacing: 0.1em;
}
.sp-stage .sp-auth-card { padding: 22px; }
.sp-stage .sp-fineprint {
  margin: 18px 0 2px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in oklch, var(--red-500), transparent 60%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--ink-500);
}
.sp-stage .sp-fineprint strong {
  color: var(--ink-700);
  font-weight: 600;
}

/* ───── Post-submit confirmation card ───── */
.sp-stage .sp-done { padding: 32px 26px; }
.sp-stage .sp-done-check {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red-500);
  color: var(--ink-0);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sp-stage .sp-done-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-800);
  margin: 0 0 10px;
}
.sp-stage .sp-done-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-500);
  margin: 0;
  max-width: 52ch;
}
.sp-stage .sp-done .sp-actions { margin-top: 22px; }

/* ───── Mobile ───── */
@media (max-width: 640px) {
  .shell.sp-stage { padding: 40px 20px 56px; }
  .sp-stage .sp-card { padding: 2px 16px; }
  .sp-stage .sp-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .sp-stage .sp-row .row-head { padding-top: 0; }
}