/* Identity portal — the Node's own surface.
 *
 * Constraints this file works under, not preferences:
 *   · the document must be legible with this stylesheet absent (it 404s until the file layer
 *     ships), so nothing structural depends on CSS — this only makes it pleasant
 *   · no web fonts: the portal has no CORS and loads nothing cross-origin
 *   · reduced motion and visible focus are SPD conformance obligations, not niceties
 *   · both themes: a person's OS preference decides, and neither is an afterthought
 */

:root {
  color-scheme: light dark;

  /* A neutral with a slight cool bias, so it reads as chosen rather than inherited. */
  --ink:        #16191d;
  --ink-soft:   #4a525c;
  --ground:     #f7f8fa;
  --surface:    #ffffff;
  --line:       #d9dde3;

  /* One accent, spent in one place: the primary action. */
  --accent:     #1d4ed8;
  --accent-ink: #ffffff;

  /* Semantic, and deliberately separate from the accent. */
  --warn:       #8a5a00;
  --warn-bg:    #fdf6e7;
  --stop:       #a11a2b;
  --stop-bg:    #fdeef0;
  --ok:         #1c6b45;

  --radius: 6px;
  --gap: 1rem;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #e8eaee;
    --ink-soft: #a2abb7;
    --ground:   #14171b;
    --surface:  #1c2026;
    --line:     #2f353d;
    --accent:   #7aa2ff;
    --accent-ink: #0d1117;
    --warn:     #e8c07a; --warn-bg: #2a2317;
    --stop:     #f2919d; --stop-bg: #2c1a1e;
    --ok:       #79d3a6;
  }
}
/* The viewer's explicit choice must win over the OS in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eaee; --ink-soft: #a2abb7; --ground: #14171b; --surface: #1c2026;
  --line: #2f353d; --accent: #7aa2ff; --accent-ink: #0d1117;
  --warn: #e8c07a; --warn-bg: #2a2317; --stop: #f2919d; --stop-bg: #2c1a1e; --ok: #79d3a6;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #16191d; --ink-soft: #4a525c; --ground: #f7f8fa; --surface: #ffffff;
  --line: #d9dde3; --accent: #1d4ed8; --accent-ink: #ffffff;
  --warn: #8a5a00; --warn-bg: #fdf6e7; --stop: #a11a2b; --stop-bg: #fdeef0; --ok: #1c6b45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Node branding: the Node owns this slot, and it is never filled by a caller ---- */
.node-brand {
  padding: 0.85rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand-name {
  font-weight: 620;
  letter-spacing: 0.01em;
}

/* ---- the one column of content ---- */
main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  line-height: 1.2;
  font-weight: 640;
  text-wrap: balance;
  text-transform: capitalize;
}

/* ---- the single status or error region: where assistive technology is told to look ---- */
.notice {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}
.notice.error {
  border-left-color: var(--stop);
  background: var(--stop-bg);
  color: var(--stop);
}
.notice[data-state="success"] { border-left-color: var(--ok); color: var(--ok); }
.notice[data-state="rate_limited"],
.notice[data-state="expired"] { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* ---- lifecycle, read from the axes; `unknown` must LOOK unknown, not negative ---- */
.lifecycle {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1rem;
}
.lifecycle dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: 0.35rem 1rem;
}
.lifecycle dt { color: var(--ink-soft); text-transform: capitalize; }
.lifecycle dd { margin: 0; font-variant-numeric: tabular-nums; }
.lifecycle dd:not([data-axis]) { color: var(--ink); }
/* An unmeasured axis is stated as unmeasured — never styled as a negative answer. */
.lifecycle dd { color: var(--ink); }
.lifecycle dd:is([data-axis]) { color: var(--ink); }

/* ---- forms: native, and submittable with no script ---- */
form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
label { color: var(--ink-soft); }
input[type="text"], input[type="password"], input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
button[type="submit"] {
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
button[type="submit"]:hover { filter: brightness(1.06); }

/* Focus must be visible for a keyboard user — an SPD obligation. */
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.onward a, footer a { color: var(--accent); }

footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
footer p { margin: 0; }

/* The notification host is an integration point; it occupies nothing until something mounts. */
#jns-notification-host:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}