/* ATC dashboard — the High-Aerospace material recipes (Helium design spec §2–§7)
   on top of tokens.css. Colors only ever come from var(); no hex here. */

/* ── fonts (self-hosted, OFL; same files as Helium) ─────────────────────── */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/dm-sans.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/dm-sans-italic.woff2") format("woff2"); }
@font-face { font-family: "Lekton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lekton-400.woff2") format("woff2"); }
@font-face { font-family: "Lekton"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lekton-700.woff2") format("woff2"); }

/* ── base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not(.dark) { color-scheme: light; } }
html.light { color-scheme: light; }
html, body { margin: 0; min-height: 100vh; }
body {
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-size: var(--font-size-md);
  line-height: 1.55;
  transition: background 0.5s, color 0.3s;
}
[hidden] { display: none !important; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }

/* ── layout ─────────────────────────────────────────────────────────────── */
header, main, footer { max-width: 920px; margin: auto; padding-left: var(--space-6); padding-right: var(--space-6); }
header { min-height: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
main { padding-top: var(--space-5); padding-bottom: 72px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-6); border-top: 1px solid var(--hairline); font-size: var(--font-size-xs); color: var(--ink-3); }
#account { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--ink-2); }
#owner-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── type roles (spec §2) ───────────────────────────────────────────────── */
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wordmark { font-weight: 400; letter-spacing: 2.5px; text-transform: lowercase; color: var(--ink); font-size: var(--font-size-md); }
.wordmark:hover { text-decoration: none; color: var(--ink); }
.tagline { font-size: var(--font-size-xs); font-weight: 300; color: var(--ink-3); }
.intro { max-width: 620px; margin-bottom: var(--space-6); }
/* Section and card headers are lowercase like the wordmark; the hero and the sign-in door keep their case (owner decision 2026-09-16). */
h1 { max-width: 18ch; text-wrap: balance; font-size: var(--font-size-hero); font-weight: 300; letter-spacing: -1px; line-height: 1.2; margin: 0; }
h1 em { font-style: italic; font-weight: 400; color: var(--accent-bright); }
.lede { font-size: var(--font-size-md); color: var(--ink-2); max-width: 58ch; line-height: 1.75; margin: 0; }
h2, h3, p { margin-top: 0; overflow-wrap: anywhere; }
h2 { font-size: var(--font-size-lg); font-weight: 400; margin-bottom: var(--space-2); text-transform: lowercase; }
h3 { font-size: var(--font-size-md); font-weight: 400; margin-bottom: var(--space-2); text-transform: lowercase; }
p { font-size: var(--font-size-sm); color: var(--ink-2); margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }
.eyebrow, .key-label {
  font-size: var(--font-size-label); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}
.key-label { margin-top: var(--space-4); margin-bottom: var(--space-1); }
.key-label code { text-transform: none; letter-spacing: 0; font-size: var(--font-size-sm); color: var(--ink-2); }
.fine { font-size: var(--font-size-xs); line-height: 1.6; color: var(--ink-3); margin-top: var(--space-4); }
.muted { font-size: var(--font-size-xs); color: var(--ink-3); font-family: var(--font-family-num); }
/* every numeral, identifier, fingerprint and code run takes the numeral face with tabular figures */
code, pre, .fingerprint, .num, .vault-token, .share-link { font-family: var(--font-family-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
code { font-size: var(--font-size-sm); color: var(--ink-2); overflow-wrap: anywhere; user-select: all; }
.fingerprint { display: block; font-size: var(--font-size-sm); line-height: 1.9; color: var(--ink-2); letter-spacing: 0; overflow-wrap: anywhere; user-select: all; }

/* ── the slab (spec §3): flat modules; only the focal panel floats ───────── */
.panel, .card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-r);
  box-shadow: inset 0 1px 0 var(--edge-light);
  padding: var(--space-5);
}
.panel { margin-bottom: var(--space-5); }
.panel.attention { background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow), inset 0 1px 0 var(--edge-light); }
.attention h2 { font-size: var(--font-size-xl); font-weight: 300; letter-spacing: -0.5px; }
.attention .fingerprint { margin-bottom: var(--space-4); }
.panel > div > p { margin-bottom: var(--space-5); }
#auth { max-width: 570px; }
#auth h2 { text-transform: none; }
.glow-line { height: 1px; border: none; margin: 0 0 var(--space-5); background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.empty { padding: var(--space-5); border: 1px dashed var(--hairline-2); border-radius: var(--radius-r); }
.empty p { max-width: 520px; margin-bottom: 0; }
.footnote { margin-top: var(--space-6); max-width: 700px; padding-left: var(--space-4); border-left: 1px solid var(--hairline-2); }
.footnote h3 { font-size: var(--font-size-sm); color: var(--ink-2); }
.footnote p { font-size: var(--font-size-xs); line-height: 1.7; color: var(--ink-3); }

/* ── sections, cards, chips ─────────────────────────────────────────────── */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
.section-heading h2 { margin: 0; letter-spacing: -0.2px; }
.stack { display: grid; gap: var(--space-3); }
.card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.card-heading > div { min-width: 0; }
.card h3 { margin-bottom: 2px; }
.card .sub { font-size: var(--font-size-sm); margin-bottom: 0; }
/* status chip: a borderless tint of its own color with an annunciator LED (spec §4) */
.status { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: var(--font-size-xs); color: var(--pos); background: color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius-r); padding: 2px 8px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px color-mix(in srgb, currentColor 45%, transparent); }
.status.pending { color: var(--caution); }
.status.revoked { color: var(--ink-3); }
.status.revoked::before { opacity: 0.35; box-shadow: none; }
.actions, .flow-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.flow-actions { margin-top: var(--space-2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--font-size-sm); color: var(--ink-2); line-height: 1.55; max-width: 620px; margin: var(--space-4) 0; }
.check input { width: 16px; height: 16px; padding: 0; margin-top: 2px; flex: none; accent-color: var(--accent); }
.notice { border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); color: var(--ink); margin-bottom: var(--space-5); }
.notice.error { border-left-color: var(--alert); color: var(--alert); }

/* ── forms and recessed readouts (spec §4) ──────────────────────────────── */
label { display: block; font-size: var(--font-size-sm); color: var(--ink-2); margin: 0 0 var(--space-2); }
input, select {
  display: block; width: 100%;
  background: color-mix(in srgb, var(--field) 60%, var(--surface));
  border: 1px solid var(--hairline-2); border-radius: var(--radius-r);
  padding: 10px 12px; color: var(--ink); outline-offset: 3px;
}
input::placeholder { color: var(--ink-3); }
.or { border-top: 1px solid var(--hairline); margin-top: var(--space-5); padding-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--ink-2); }
.setup-instructions { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.setup-instructions .setup-instructions { margin-top: var(--space-4); padding-top: var(--space-3); }
.setup-instructions summary { cursor: pointer; color: var(--accent-bright); font-size: var(--font-size-sm); }
.setup-instructions > button { margin-top: var(--space-3); }
.setup-instructions pre, .vault-token, .share-link {
  background: color-mix(in srgb, var(--field) 60%, var(--surface));
  border: 1px solid var(--hairline); border-radius: var(--radius-r);
  padding: var(--space-3); margin: var(--space-4) 0;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
}
.setup-instructions pre { font-size: var(--font-size-sm); line-height: 1.65; color: var(--ink-2); }
.vault-token, .share-link { display: block; font-size: var(--font-size-sm); color: var(--ink); user-select: all; }
.agent-selection { margin-bottom: var(--space-4); }
.agent-selection select, .pairing select, #flow select { max-width: 100%; min-width: 0; }
.selected-agent, .credential-agent { font-size: var(--font-size-sm); color: var(--ink-2); overflow-wrap: anywhere; margin: var(--space-2) 0 0; }
.pairing { margin-top: var(--space-5); }
.pairing select { margin-bottom: var(--space-4); }
.share-invites { margin-bottom: var(--space-4); }
.unused-invites { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.unused-invite { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); }
.unused-invite .sub { font-size: var(--font-size-xs); margin: 0; }
.provision input { margin-bottom: var(--space-4); }
.provision button { width: auto; margin-top: var(--space-1); }
#credential .actions, #invite-link .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── command keys (spec §4): sentence case, no glow at rest ─────────────── */
button {
  font-family: var(--font-family-sans); font-weight: 500; font-size: var(--font-size-sm); letter-spacing: 0.01em;
  color: var(--on-accent); background: var(--accent);
  border: none; border-radius: var(--radius-r); padding: 8px 14px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
button:hover:not(:disabled) { background: var(--accent-bright); box-shadow: 0 0 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
html.light button:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); }
@media (prefers-color-scheme: light) { :root:not(.dark) button:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); } }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
button.secondary, button.danger { color: var(--accent-bright); background: transparent; border: 1px solid var(--hairline-2); box-shadow: none; }
button.secondary:hover:not(:disabled), button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-2) 80%, transparent); box-shadow: none; filter: none; }
button.danger { color: var(--alert); }
button.quiet { color: var(--ink-3); background: transparent; border: none; padding: 4px 0; box-shadow: none; }
button.quiet:hover:not(:disabled) { color: var(--ink); background: transparent; box-shadow: none; filter: none; }
form button { margin-top: var(--space-4); width: 100%; }

/* ── density ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  header, main, footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  header { min-height: 72px; padding-top: var(--space-4); padding-bottom: var(--space-3); gap: var(--space-3); }
  #account { margin-left: auto; }
  #owner-name { display: none; }
  main { padding-top: var(--space-4); }
  .intro { margin-bottom: var(--space-5); }
  h1 { font-size: 28px; }
  .panel, .card { padding: var(--space-4); }
  .or, .flow-actions { align-items: stretch; flex-direction: column; }
  footer { flex-direction: column; gap: var(--space-1); }
}