/* ============================================================================
   NxtAtlas AI — atlas-utility.css

   The three pages nobody opens on purpose:

     404.html      a link that went nowhere
     legacy.html   the password sign-in, used when the normal one cannot run
     status.html   the health board, opened when something feels wrong

   All three are data-motion="app". They carry no reveals, no parallax, no
   entrance choreography — somebody arriving here is trying to find out what
   happened, and a page that animates itself in front of them is in the way.

   Loaded after css/atlas.css. Nothing here edits the shared sheets.
   ============================================================================ */


/* ============================================================================
   PART 1 — THE PASSWORD SIGN-IN  (legacy.html)

   Read this before touching a colour in this part.

   legacy.html is the door that has to open when the front one is stuck:
   Google Identity Services blocked, scripted out, or simply unsupported by
   the browser in front of it. So it is written to survive a browser that
   understands almost nothing modern:

     * no custom properties — a browser without var() would drop every
       colour declaration and paint default black-on-white through our
       layout; every colour and length below is therefore a literal
     * no flexbox, no grid — the card is centred with margin:auto and
       padding, which has worked since the last century
     * no :has(), no clamp(), no dvh, no logical properties, no color-mix
     * transform and animation appear only where their absence costs
       nothing (the shake on a wrong password)

   HARD-CODED COLOUR IS CORRECT HERE, and only here. The token layer is the
   very thing that may not arrive, so this page commits to one look — the
   site's ink and brass — in every browser and both system themes, rather
   than risk a theme it cannot read.

   Everything after the PART 2 marker is token-based and belongs to the other
   two pages. An old browser drops those rules on the floor; because none of
   them match anything in legacy.html, the page is unaffected.
   ============================================================================ */

html.lg-html {
  background-color: #0a0b0d;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  color-scheme: dark;                 /* modern browsers: dark form controls */
}

body.lg-body {
  margin: 0;
  padding: 44px 18px 40px;
  background-color: #0a0b0d;
  color: #ece8e1;
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.lg-card,
.lg-input,
.lg-btn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.lg-card {
  max-width: 384px;
  margin: 0 auto;
  padding: 32px 26px 26px;
  background-color: #12141a;
  border: 1px solid #23262e;
  border-radius: 16px;
  text-align: center;
}

.lg-logo {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 12px;
}

/* the wordmark, with the crossbar-less first A picked out in brass */
.lg-wm {
  display: block;
  font-family: "Sora", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #ece8e1;
}
.lg-wm i { font-style: normal; color: #d1a05a; }

.lg-title {
  margin: 18px 0 0;
  font-family: "Sora", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #ece8e1;
}

.lg-sub {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #a5a099;
}

.lg-form { margin: 22px 0 0; text-align: left; }

.lg-field { position: relative; }

.lg-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 44px 0 14px;
  background-color: #0f1114;
  color: #ece8e1;
  border: 1px solid #2c3039;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;                    /* 16px keeps iOS from zooming on focus */
}
.lg-input:focus {
  border-color: #d1a05a;
  box-shadow: 0 0 0 3px rgba(209, 160, 90, 0.24);
}
/* each prefix needs its own rule: grouped, one unknown selector kills them all */
.lg-input::-webkit-input-placeholder { color: #78736b; }
.lg-input::-moz-placeholder          { color: #78736b; opacity: 1; }
.lg-input:-ms-input-placeholder      { color: #78736b; }
.lg-input::placeholder               { color: #78736b; }

/* the eye sits at a fixed offset inside a 48px field — no transform needed */
.lg-eye {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #8d8880;
  line-height: 0;
  cursor: pointer;
}
.lg-eye:hover { color: #ece8e1; background-color: #191c22; }
.lg-eye .eye-off { display: none; }
.lg-eye.is-shown .eye-on { display: none; }
.lg-eye.is-shown .eye-off { display: inline; }

.lg-error {
  min-height: 19px;
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #e5a3a3;
}

.lg-btn {
  display: block;
  width: 100%;
  height: 48px;
  margin: 12px 0 0;
  padding: 0 18px;
  background-color: #d1a05a;
  color: #14100a;
  border: 1px solid #d1a05a;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.lg-btn:hover { background-color: #e0b473; border-color: #e0b473; }
.lg-btn[disabled] { opacity: 0.62; cursor: default; }

.lg-hint {
  margin: 20px 0 0;
  padding: 13px 14px;
  background-color: #0f1114;
  border: 1px solid #23262e;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #a5a099;
  text-align: left;
}

/* Screen-reader-only, without clip-path: the 1px box and overflow:hidden do
   the hiding on their own in a browser that drops the modern property. */
.lg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}

.lg-foot { margin: 20px 0 0; font-size: 13px; color: #8d8880; }
.lg-foot a { color: #a5a099; text-decoration: none; }
.lg-foot a:hover { color: #d1a05a; text-decoration: underline; }

/* wrong password: the field shakes its head */
.lg-field.shake {
  -webkit-animation: lg-shake 200ms ease;
          animation: lg-shake 200ms ease;
}
@-webkit-keyframes lg-shake {
  0%, 100% { -webkit-transform: translateX(0); }
  20%      { -webkit-transform: translateX(-6px); }
  40%      { -webkit-transform: translateX(6px); }
  60%      { -webkit-transform: translateX(-4px); }
  80%      { -webkit-transform: translateX(4px); }
}
@keyframes lg-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-field.shake { -webkit-animation: none; animation: none; }
}


/* ============================================================================
   PART 2 — SHARED SHELL  (404.html + status.html)

   From here down everything is token-based, in both themes, as the brief
   requires. These two pages run in browsers that can run the application,
   so they are held to the same standard as the rest of it.
   ============================================================================ */

/* atlas.css currently declares --atlas-display / --atlas-body / --atlas-brass
   / --atlas-brass-soft inside its light-theme block only
   (`:root:not([data-theme]), :root[data-theme="light"]`), so in dark — and in
   every other saved theme — those four resolve to nothing and the properties
   using them fall back to whatever html inherited. Aliasing them here with a
   fallback keeps these pages correct either way, and the moment atlas.css
   declares them for all themes the token wins again with no change here.
   The fallbacks are font stacks and an existing colour token, never a new
   literal colour. */
:root {
  --au-display:    var(--atlas-display, "Sora", system-ui, -apple-system, sans-serif);
  --au-body:       var(--atlas-body, "Manrope", system-ui, -apple-system, sans-serif);
  --au-brass-soft: var(--atlas-brass-soft, var(--accent-soft));
}

/* styles.css locks the document into the chat app's own scroll container with
   an unlayered `html, body { height:100% }` + `body { overflow:hidden }`. A
   page that scrolls has to undo both. The class on <html> does it without JS;
   the :has() rule covers markup that only carries the body class. */
html.au-html,
html:has(> body.au-page) { height: auto; overflow: visible; }

body.au-page {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--au-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* one soft warm halo, fixed, static. No grain, no orbs, nothing rotating. */
body.au-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(80% 55% at 72% -6%, var(--accent-soft), transparent 64%);
}
body.au-page > * { position: relative; z-index: 1; }

.au-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.au-skip:focus {
  left: 14px;
  top: 14px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

/* ---------------------------------- header -------------------------------- */
.au-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(18px, 5vw, 44px);
}
.au-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.au-mark img { display: block; width: 30px; height: 30px; border-radius: 7px; }
/* .atlas-wm's own font-family comes from atlas.css via --atlas-display, which
   is absent outside the light theme; the alias keeps the wordmark in Sora. */
.au-page .atlas-wm { font-family: var(--au-display); }
.au-mark .atlas-wm { font-size: 12.5px; }
.au-mark:hover .atlas-wm { color: var(--accent); }

.au-head-nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 26px); }
.au-head-nav a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.24s ease;
}
.au-head-nav a:hover { color: var(--accent); }
.au-head-nav .au-btn { padding: 9px 18px; font-size: 13.5px; color: var(--text); }

/* on a phone the header keeps the mark and the one button */
@media (max-width: 620px) {
  .au-head-nav a:not(.au-btn) { display: none; }
}

/* ---------------------------------- main ---------------------------------- */
.au-main {
  flex: 1 1 auto;
  width: 100%;
  margin: 0 auto;
  padding: clamp(26px, 6vh, 64px) clamp(18px, 5vw, 44px) clamp(48px, 8vh, 80px);
}

.au-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.au-eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--au-brass-soft);
}

.au-lede {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.7;
  color: var(--text-muted);
}

/* --------------------------------- buttons -------------------------------- */
.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: var(--au-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}
.au-btn:hover { border-color: var(--au-brass-soft); color: var(--accent); }
.au-btn svg { flex: none; }

.au-btn-brass {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.au-btn-brass:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

.au-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------- footer --------------------------------- */
.au-foot { padding: 0 clamp(18px, 5vw, 44px) 30px; }
.au-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.au-foot-in p { margin: 0; }
.au-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.au-foot-nav a { color: var(--text-muted); text-decoration: none; }
.au-foot-nav a:hover { color: var(--accent); }


/* ============================================================================
   PART 3 — 404
   ============================================================================ */

.au-404-main { max-width: 780px; padding-top: clamp(36px, 11vh, 104px); }

/* Sora at 300, brass, the same treatment the site gives its figures */
.au-404-code {
  margin: 20px 0 0;
  font-family: var(--au-display);
  font-weight: 300;
  font-size: clamp(4.2rem, 15vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--accent);
}

.au-404-title {
  margin: 12px 0 0;
  font-family: var(--au-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text);
}

.au-404-main .au-lede { margin-top: 16px; }
.au-404-main .au-actions { margin-top: 30px; }

/* the three places worth going instead */
.au-404-elsewhere { margin-top: clamp(40px, 7vh, 64px); }
.au-404-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.au-404-list li { border-bottom: 1px solid var(--border); }
.au-404-list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 4px;
  text-decoration: none;
  color: var(--text);
  transition: color 0.24s ease, padding-left 0.24s ease;
}
.au-404-list a:hover { color: var(--accent); padding-left: 10px; }
.au-404-list b { font-weight: 500; font-size: 15px; }
.au-404-list span { font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 520px) {
  .au-404-list a { flex-direction: column; gap: 3px; }
}


/* ============================================================================
   PART 4 — STATUS

   Colour is never the only carrier of state: every dot is paired with a
   written label, and the badge changes shape as well as hue. The tint behind
   a badge or pill is currentColor at low opacity, so it follows whichever
   token the state resolved to and stays right in both themes without a
   single literal.
   ============================================================================ */

.au-status-main { max-width: 900px; }

.au-status [data-state="operational"] { --au-state: var(--success); }
.au-status [data-state="degraded"]    { --au-state: var(--accent); }
.au-status [data-state="down"]        { --au-state: var(--danger); }
.au-status [data-state="loading"]     { --au-state: var(--text-soft); }

/* ------------------------------ the verdict ------------------------------- */
.au-verdict {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 22px;
  padding: 22px clamp(18px, 3vw, 26px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
/* a second, state-coloured border laid over the neutral one at 40% */
.au-verdict::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--au-state, var(--border));
  opacity: 0.4;
  pointer-events: none;
}

.au-shield {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--au-state, var(--text-soft));
}
.au-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.13;
}
.au-shield svg { position: relative; }

.au-verdict-text { min-width: 0; }
.au-verdict h1 {
  margin: 0;
  font-family: var(--au-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.4vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
}
.au-verdict p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.au-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.au-meta-sep { color: var(--border-strong); }

.au-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--au-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.24s ease, border-color 0.24s ease;
}
.au-refresh:hover { color: var(--accent); border-color: var(--au-brass-soft); }
.au-refresh svg { flex: none; }
.au-refresh.is-spinning svg { animation: au-spin 0.75s linear infinite; }
.au-refresh.is-spinning { color: var(--accent); }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .au-refresh.is-spinning svg { animation: none; }
}

/* -------------------------------- sections -------------------------------- */
.au-section { margin-top: clamp(30px, 5vh, 44px); }
.au-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.au-section-head h2 {
  margin: 0;
  font-family: var(--au-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.au-section-count { font-size: 12px; color: var(--text-muted); }

.au-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  overflow: hidden;
}
.au-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "dot text latency status";
  align-items: center;
  column-gap: 14px;
  padding: 12px clamp(14px, 2.4vw, 18px);
}
.au-row + .au-row { border-top: 1px solid var(--border); }

.au-row-dot {
  grid-area: dot;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--au-state, var(--text-soft));
}
.au-row-text { grid-area: text; min-width: 0; }
.au-row-name {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.au-row-detail {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.au-row-latency {
  grid-area: latency;
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.au-row-status {
  grid-area: status;
  position: relative;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--au-state, var(--text-soft));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.au-row-status::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.13;
}
.au-row-status span { position: relative; }

.au-rows-placeholder {
  padding: 16px clamp(14px, 2.4vw, 18px);
  font-size: 13.5px;
  color: var(--text-muted);
}

.au-note {
  margin: clamp(28px, 4vh, 40px) 0 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.au-noscript {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-elev);
  font-size: 13.5px;
  color: var(--text-muted);
}

/* Narrow: the row folds into two lines rather than squeezing four columns
   into 360px. Latency and state stay together under the name. */
@media (max-width: 620px) {
  .au-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "dot text    text"
      ".   latency status";
    row-gap: 7px;
  }
  .au-row-latency { justify-self: start; }
  .au-row-status { justify-self: start; }
}

@media (max-width: 480px) {
  .au-verdict { flex-direction: column; gap: 14px; }
  .au-actions .au-btn { flex: 1 1 auto; }
}