/* ══════════════════════════════════════════════════════════════════════════
   The two doors — what `/login` and `/register` need on top of the gate
   ══════════════════════════════════════════════════════════════════════════

   `dashboard.css` already draws `.gate` as an overlay above the centre. These
   pages have no centre behind them, so this turns that overlay into a page:
   it stays put, it fills the screen, and it carries a way back to the site.

   Everything else — the card, the fields, the button, the error — is inherited
   unchanged, deliberately. A sign-in page that does not look like the product
   it opens is the moment somebody checks the address bar.
   ══════════════════════════════════════════════════════════════════════════ */

.auth-body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg, #0a0c14);
}

/* The gate is `position: fixed` for its overlay job. Here it IS the page, so
   it becomes flow content — otherwise a long register form cannot scroll on a
   short screen, and the confirm field ends up under the fold with no way to
   reach it. */
.gate.auth-standalone {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 5rem 1.25rem 3rem;
  box-sizing: border-box;
}

.gate.auth-standalone .gate-card { margin: 0; }
.gate.auth-standalone .gate-card.wide { max-width: 27rem; }

/* Home, top right. Deliberately outside the card: it is a way off this page,
   not one of its controls, and putting it among the fields makes it look like
   one more step in signing in. */
.auth-home {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted, #93a0b5);
  font: 500 0.82rem/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.auth-home:hover {
  color: var(--text, #e8edf5);
  border-color: var(--line-2, rgba(255, 255, 255, 0.22));
  background: rgba(255, 255, 255, 0.06);
}
.auth-home i { font-size: 0.78rem; }

@media (max-width: 34rem) {
  .auth-home { top: 0.9rem; right: 0.9rem; padding: 0.45rem 0.7rem; }
  .auth-home span { display: none; }
}

/* The other door. Every sign-in page needs a way to the register page and the
   reverse, or the only route between them is the address bar. */
.auth-alt {
  margin: 1.1rem 0 0;
  text-align: center;
  font: 400 0.85rem/1.5 'Inter', system-ui, sans-serif;
  color: var(--muted, #93a0b5);
}
.auth-alt a { color: var(--accent, #6366f1); text-decoration: none; font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }

.auth-fine {
  margin: 0.85rem 0 0;
  text-align: center;
  font: 400 0.74rem/1.55 'Inter', system-ui, sans-serif;
  color: var(--faint, #5d6a7f);
}
.auth-fine a { color: var(--faint, #5d6a7f); text-decoration: underline; }
.auth-fine a:hover { color: var(--muted, #93a0b5); }

/* The password-match note. Reserves its own line so the button does not jump
   the moment a second password is typed. */
.match {
  display: block;
  min-height: 1.1em;
  margin-top: 0.4rem;
  font: 500 0.76rem/1.1 'Inter', system-ui, sans-serif;
}
.match.good { color: var(--lime, #84cc16); }
.match.bad  { color: var(--rose, #f43f5e); }

/* `hidden` on a flex/grid child does not hide it. The gate error is styled by
   dashboard.css and this page sets `hidden` on it, so say so explicitly. */
.gate-error[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   The landing — `/` for a signed-in customer
   ══════════════════════════════════════════════════════════════════════════

   Same stylesheet as the two doors on purpose: it is the same visit. Somebody
   registers, the form is replaced by this page, and a change of typeface at
   that exact moment is where a person checks the address bar.

   **Self-contained, unlike `.gate` above.** The gate classes were drawn by
   `dashboard.css`, which went with `troy/frontend/` on 2026-08-21 — so nothing
   in this deployment defines them any more and the doors are unstyled. That is
   a separate hole and it is not fixed here; what is done here is not to dig
   another one. Every class below is defined in this file, and every colour has
   its literal fallback in the `var()`, so the page is correct with no token
   file at all.
   ══════════════════════════════════════════════════════════════════════════ */

.account {
  box-sizing: border-box;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  font: 400 0.95rem/1.6 'Inter', system-ui, sans-serif;
  color: var(--text, #e8edf5);
}

.account-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.12));
}

.account-brand { display: flex; align-items: center; gap: 0.75rem; }

.account-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 1rem;
}

.account-name {
  font: 800 1.05rem/1.1 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.06em;
}
.account-name span:last-child { color: var(--accent-soft, #a5b4fc); }
.account-sub {
  margin-top: 0.15rem;
  font: 400 0.8rem/1.2 'Inter', system-ui, sans-serif;
  color: var(--muted, #93a0b5);
}

.account-session { display: flex; align-items: center; gap: 0.85rem; }
.account-user {
  font-size: 0.85rem;
  color: var(--muted, #93a0b5);
  overflow-wrap: anywhere;
}

/* One alert line for a failure that stops the whole page loading. Anything a
   single panel can report, that panel reports itself, beside the thing it is
   about — a page-level banner saying "billing is down" would sit above three
   panels that are perfectly fine. */
.account-alert {
  margin: 1.25rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--rose, #f43f5e);
  background: rgba(244, 63, 94, 0.08);
  color: var(--rose, #f43f5e);
  font-size: 0.88rem;
}
.account-alert[hidden] { display: none; }

.panel {
  margin-top: 1.6rem;
  padding: 1.25rem 1.35rem 1.4rem;
  border-radius: 0.9rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.025);
}

.panel-head {
  margin: 0 0 0.9rem;
  font: 600 0.78rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #93a0b5);
}

.facts { margin: 0; display: grid; gap: 0.8rem; }
.fact { display: grid; gap: 0.15rem; }
.fact dt {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--faint, #5d6a7f);
}
.fact dd { margin: 0; overflow-wrap: anywhere; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.muted { color: var(--muted, #93a0b5); margin: 0 0 0.8rem; }
.muted:last-child { margin-bottom: 0; }
.small { font-size: 0.8rem; }
.bad { color: var(--rose, #f43f5e); font-size: 0.85rem; margin: 0.8rem 0 0; }
.warn { color: var(--amber, #f59e0b); font-size: 0.87rem; margin: 0 0 0.8rem; }

.plan-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.plan-list li { margin-bottom: 0.25rem; }

/* One button shape for every control on this page, because there is at most
   one per panel and a hierarchy of three weights would be inventing importance
   the page does not have. */
.go {
  display: inline-block;
  padding: 0.6rem 1.05rem;
  border: 0;
  border-radius: 0.55rem;
  background: var(--accent, #6366f1);
  color: #fff;
  font: 600 0.87rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.go:hover { filter: brightness(1.08); }
.go:disabled { opacity: 0.55; cursor: default; }

.quiet, .account-quiet {
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--muted, #93a0b5);
  font: 500 0.82rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.quiet:hover, .account-quiet:hover { color: var(--text, #e8edf5); }

.reveal { display: grid; gap: 0.75rem; max-width: 22rem; }
.reveal .field { display: grid; gap: 0.35rem; }
.reveal .field span { font-size: 0.8rem; color: var(--muted, #93a0b5); }
.reveal input {
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.25);
  color: var(--text, #e8edf5);
  font: 400 0.9rem/1.2 'Inter', system-ui, sans-serif;
}
.reveal .go { justify-self: start; }

.keybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}
/* The key is long and has no spaces in it, so it must be allowed to break
   anywhere or it pushes the panel wider than the phone it is being read on. */
.key {
  flex: 1 1 16rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.3);
  overflow-wrap: anywhere;
}

.destinations { display: grid; gap: 0.6rem; }
.destination {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  text-decoration: none;
  color: inherit;
}
.destination:hover { border-color: var(--accent, #6366f1); }
.destination-label { font-weight: 600; font-size: 0.9rem; }
.destination-note { font-size: 0.8rem; color: var(--muted, #93a0b5); }

.account-foot {
  margin-top: 2rem;
  font-size: 0.83rem;
}
.account-foot a { color: var(--muted, #93a0b5); text-decoration: none; }
.account-foot a:hover { color: var(--text, #e8edf5); text-decoration: underline; }