/* Signal Atlas public entry: an open stage and a quiet floating sign-in surface. */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-canvas); color: var(--ink-1); overflow-x: clip; position: relative; isolation: isolate; }
.auth::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 20% 60%, var(--accent-soft), transparent 55%); }
:root[data-theme="dark"] .auth::before { background: none; }
.auth-top, .auth-main, .auth-foot { width: min(1380px, calc(100% - 96px)); margin-inline: auto; }
.auth-top { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-1); font-size: 24px; font-weight: 600; letter-spacing: -.05em; }
.auth-brand img { width: 35px; height: 35px; }
.auth-brand .brand-word { font-size: inherit; letter-spacing: inherit; }
.auth-brand:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; border-radius: var(--r-sm); }
.auth-preferences { display: flex; align-items: center; gap: 18px; }
.auth-accent { height: 36px; background: var(--surface-1); }
.auth-preferences .theme-seg { background: var(--nav-hover); border-color: var(--line-1); }
.auth-preferences .theme-seg-btn { color: var(--ink-3); width: 36px; height: 36px; }
:root[data-theme] .auth-preferences .theme-seg-btn.is-on { background: var(--accent); color: var(--ink-on-accent); box-shadow: none; }
.auth-preferences .theme-seg-btn:hover:not(.is-on) { color: var(--ink-1); background: var(--nav-hover); }
.auth-main { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(360px,.9fr); gap: clamp(30px,5vw,80px); align-items: center; flex: 1; padding-block: 25px 40px; }
.auth-identity { position: relative; min-width: 0; min-height: 680px; display: flex; flex-direction: column; isolation: isolate; }
.auth-story { position: relative; z-index: 2; pointer-events: none; padding-top: 14px; }
.auth-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: 500 10px/1.5 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 24px; }
.auth-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.auth-headline { color: var(--ink-1); font-size: clamp(40px,4.5vw,60px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.auth-headline span { color: var(--accent-text); }
.auth-description { max-width: 38ch; color: var(--ink-3); font-size: 15px; line-height: 1.8; margin-top: 28px; }
.access-sculpture { position: absolute; width: calc(100% + 80px); height: 340px; left: -40px; bottom: 62px; pointer-events: none; }
.access-sculpture svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-scene-footer { margin-top: auto; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; border-top: 1px solid var(--line-1); color: var(--ink-3); font: 9px/1.5 var(--font-mono); letter-spacing: .1em; }
.auth-entry { min-width: 0; max-width: 460px; width: 100%; margin-inline-start: auto; padding: 34px 40px 24px; border: 1px solid var(--line-1); border-radius: 26px; background: var(--surface-1); color: var(--ink-1); box-shadow: var(--frame-shadow); }
.auth-entry-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 28px; color: var(--ink-3); font: 500 10px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.auth-entry-label .icon { color: var(--accent-text); }
.auth-card h1 { font-size: 38px; font-weight: 600; line-height: 1.12; letter-spacing: -.055em; margin-bottom: 12px; }
.auth-card .lead { color: var(--ink-3); font-size: 14px; line-height: 1.7; margin-bottom: 30px; }
.auth-card form { display: flex; flex-direction: column; gap: 20px; }
.auth-card .input { min-height: 48px; padding-inline: 14px; background: var(--surface-input); }
.auth-card .input-wrap.has-addon .input { padding-inline-end: 42px; }
.auth-card .check-row { margin-block: 0 2px; font-size: 13px; }
.auth-card .btn-lg { min-height: 48px; justify-content: space-between; padding-inline: 18px; }
.auth-card .callout { margin-bottom: 20px; }
.auth-card .page-back { margin-bottom: 20px; }
.auth-alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: 13px; }
.auth-alt a { color: var(--accent-text); font-weight: 500; }
.auth-instance { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--ink-3); }
.auth-instance .host, .auth-instance .conn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.auth-instance .host .mono { font-size: 10px; overflow-wrap: anywhere; }
.auth-instance .is-secure { color: var(--ok-text); }
.auth-instance .is-plain { color: var(--warn-text); }
.auth-foot { display: flex; justify-content: space-between; gap: 16px; min-height: 62px; align-items: center; border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: 11px; }
@media (max-width:1100px) {
  .auth-top,.auth-main,.auth-foot { width: calc(100% - 56px); }
  .auth-main { gap: 32px; grid-template-columns: minmax(0,1fr) minmax(330px,.9fr); }
  .auth-headline { font-size: 48px; } .auth-entry { padding-inline: 28px; }
  .auth-identity { min-height: 650px; }
  .access-sculpture { width: calc(100% + 70px); left: -35px; height: 300px; bottom: 65px; }
}
@media (max-width:760px) {
  .auth-top,.auth-main,.auth-foot { width: min(520px,calc(100% - 32px)); }
  .auth-top { min-height: 76px; gap: 12px; flex-wrap: wrap; padding-block: 12px; }
  .auth-brand { font-size: 20px; gap: 8px; } .auth-brand img { width: 28px; height: 28px; }
  .auth-preferences { gap: 8px; }
  .auth-preferences { margin-inline-start: auto; }
  .auth-accent .accent-picker-label, .auth-accent .accent-picker-caret { display: none; }
  .auth-accent { min-width: 34px; padding-inline: 9px; }
  .auth-preferences .theme-seg-btn { width: 30px; min-width: 30px; height: 34px; }
  .auth-main { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 28px; align-items: stretch; }
  .auth-identity { min-height: 0; overflow: hidden; }
  .auth-story { padding: 0; } .auth-eyebrow { margin-bottom: 14px; font-size: 8px; letter-spacing: .1em; }
  .auth-headline { font-size: clamp(34px,8vw,44px); } .auth-description { display: none; }
  .access-sculpture { position: relative; width: calc(100% + 40px); height: 200px; margin-inline: -20px; left: auto; bottom: auto; }
  .auth-scene-footer { padding-block: 8px; font-size: 8px; gap: 8px; }
  .auth-entry { max-width: none; padding: 26px 26px 20px; border-radius: 22px; }
  .auth-entry-label { padding-bottom: 19px; font-size: 9px; }
  .auth-card h1 { font-size: 32px; } .auth-card .lead { margin-bottom: 24px; }
  .auth-card .input { font-size: 16px; }
  .auth-foot { min-height: 58px; font-size: 10px; } .auth-foot > span:last-child { display: none; }
}
@media (max-width:380px) { .auth-top,.auth-main,.auth-foot { width: calc(100% - 24px); } .auth-top { flex-wrap: wrap; padding-block: 16px; } .auth-preferences { margin-inline-start: auto; } .auth-entry { padding-inline: 22px; } }
.nf-code { font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-3); }
.nf-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: var(--tracking-title); }
.nf-text { max-width: 44ch; color: var(--ink-2); }
/* Finite opening composition. The skip link is always live. */
.welcome { position: fixed; inset: 0; z-index: 30; height: 100vh; height: 100dvh; background: var(--surface-canvas); color: var(--ink-1); overflow: hidden; isolation: isolate; }
.welcome:focus { outline: none; }
.welcome::before { content: ''; position: absolute; inset: 32px; border: 1px solid var(--line-1); pointer-events: none; }
.welcome-coordinate { position: absolute; left: 64px; top: 60px; font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--ink-3); }
.welcome-orbit { position: absolute; width: min(72vw, 760px); aspect-ratio: 1; top: 47%; left: 50%; border: 1px solid var(--line-1); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.welcome-orbit::before { content: ''; position: absolute; inset: 12%; border: 1px solid var(--accent-line); border-radius: 50%; transform: rotateX(58deg) rotateZ(-30deg); }
.welcome-orbit::after { content: ''; position: absolute; inset: -10%; border: 1px dashed var(--line-1); border-radius: 50%; }
.welcome-signature { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 30px; width: max-content; }
.welcome-mark { display: block; flex: none; width: 132px; height: 132px; overflow: visible; transform-origin: 50% 50%; }
.welcome-feathers { fill: var(--accent-text); }
.welcome-head { fill: var(--brand-sage); }
.welcome-eye { fill: var(--ink-1); }
.welcome h1 { color: var(--ink-1); margin: 0; padding: 4px 5px 8px 0; font-size: 82px; line-height: 1.12; font-weight: 400; letter-spacing: -.06em; white-space: nowrap; }
.welcome-caption { position: absolute; top: calc(47% + 110px); width: 100%; text-align: center; font: 10px/1.5 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.welcome-skip { position: absolute; bottom: max(56px, env(safe-area-inset-bottom)); right: max(60px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; font-size: 13px; color: var(--ink-1); background: var(--surface-canvas); border: 1px solid var(--accent-line); border-radius: var(--r); }
.welcome-skip:hover { background: var(--surface-2); border-color: var(--accent-text); }
.welcome-skip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.welcome-skip kbd { font: 10px/1.5 var(--font-mono); text-transform: uppercase; margin-left: 8px; color: var(--ink-3); background: none; box-shadow: none; }
@media (max-width: 800px) { .welcome-signature { gap: 20px; } .welcome-mark { width: 106px; height: 106px; } .welcome h1 { font-size: 62px; } }
@media (max-width: 560px) {
  .welcome::before { inset: 16px; }
  .welcome-coordinate { left: 32px; top: 36px; font-size: 9px; }
  .welcome-signature { gap: 12px; }
  .welcome-mark { width: 64px; height: 64px; }
  .welcome h1 { font-size: 40px; letter-spacing: -.055em; padding-bottom: 5px; }
  .welcome-caption { top: calc(47% + 80px); font-size: 8px; letter-spacing: .08em; }
  .welcome-orbit { width: 90vw; }
  .welcome-skip { right: 32px; bottom: max(36px, env(safe-area-inset-bottom)); }
  .welcome-skip kbd { display: none; }
}
@media (max-width: 340px), (max-height: 420px) { .welcome-mark { width: 52px; height: 52px; } .welcome h1 { font-size: 34px; } .welcome-skip { bottom: 24px; } .welcome-caption { top: calc(47% + 66px); } }
@media (forced-colors: active) {
  .auth-instrument, .welcome-orbit { display: none; }
  .auth-identity, .welcome { background: Canvas; color: CanvasText; }
  .auth-brand, .auth-headline, .auth-headline span, .auth-description, .auth-eyebrow, .auth-capabilities, .welcome h1, .welcome-coordinate, .welcome-caption, .welcome-skip { color: CanvasText; }
}