/* Project Hikari — sign-in host stylesheet.
   Consumes design/tokens/tokens.json via the generated tokens.css. Never hard-code a brand
   value here; if a value is missing, add it to tokens.json and regenerate.
   See docs/architecture.md 24.2. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  /* void, not base: the sign-in host sits one step darker than the application. */
  background: var(--ph-surface-void);
  color: var(--ph-text-primary);
  font-family: var(--ph-font-ui);
  font-size: var(--ph-type-body-size);
  line-height: var(--ph-type-body-height);
  -webkit-font-smoothing: antialiased;
}

/* The single atmospheric device on this host: one contained warm pool behind the mark.
   Not a gradient wash, not a glow on every element. */
.signin {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ph-space-8) var(--ph-space-4);
  isolation: isolate;
}

.signin::before {
  content: "";
  position: absolute;
  inset-block-start: -14vh;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(620px, 120vw);
  block-size: 420px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgb(230 183 103 / 11%),
    rgb(230 183 103 / 0%) 68%
  );
}

.signin__panel {
  inline-size: 100%;
  max-inline-size: 380px;
  text-align: center;
}

.signin__mark {
  inline-size: 72px;
  block-size: auto;
  /* The supplied mark, used as supplied. Never a redrawn or simplified variant.
     See docs/architecture.md 20.4. */
}

.signin__wordmark {
  margin: var(--ph-space-4) 0 0;
  font-family: var(--ph-font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--ph-type-h1-size);
  line-height: var(--ph-type-h1-height);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-text-primary);
}

.signin__motto {
  margin: var(--ph-space-2) 0 0;
  font-size: var(--ph-type-small-size);
  line-height: var(--ph-type-small-height);
  color: var(--ph-gold-400);
  letter-spacing: 0.02em;
}

/* State block — the honest "not built yet" panel, and later the error surface. */
.signin__state {
  margin-block-start: var(--ph-space-8);
  padding: var(--ph-space-4);
  display: flex;
  gap: var(--ph-space-3);
  align-items: flex-start;
  text-align: start;
  background: var(--ph-surface-s1);
  border: 1px solid var(--ph-line-border);
  border-radius: var(--ph-radius-sm);
}

.signin__state-title {
  margin: 0;
  font-size: var(--ph-type-body-size);
  font-weight: 600;
  color: var(--ph-text-primary);
}

.signin__state-body {
  margin: var(--ph-space-1) 0 0;
  font-size: var(--ph-type-small-size);
  line-height: var(--ph-type-small-height);
  color: var(--ph-text-secondary);
}

.signin__mono {
  margin: var(--ph-space-2) 0 0;
  font-family: var(--ph-font-mono);
  font-size: var(--ph-type-mono-sm-size);
  color: var(--ph-text-muted);
  overflow-wrap: anywhere;
}

/* The broken-arc indicator. Budgeted use only: status and progression.
   See docs/architecture.md 23.1. */
.signin__ring {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.signin__ring--starting {
  /* A 40% arc: present, not yet complete. */
  border-block-start-color: var(--ph-status-offline);
  border-inline-end-color: var(--ph-status-offline);
  animation: signin-arc-spin 3s linear infinite;
}

.signin__ring--error {
  border-color: var(--ph-status-error);
  position: relative;
}

.signin__ring--error::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -2px;
  inline-size: 18px;
  block-size: 2px;
  background: var(--ph-status-error);
  rotate: -45deg;
}

@keyframes signin-arc-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.signin__facts {
  margin: var(--ph-space-6) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ph-space-1) var(--ph-space-4);
  text-align: start;
  font-size: var(--ph-type-small-size);
}

.signin__facts dt {
  color: var(--ph-text-muted);
}

.signin__facts dd {
  margin: 0;
  font-family: var(--ph-font-mono);
  font-size: var(--ph-type-mono-sm-size);
  color: var(--ph-text-secondary);
  overflow-wrap: anywhere;
}

.signin__foot {
  margin: var(--ph-space-12) 0 0;
  max-inline-size: 380px;
  text-align: center;
  font-size: var(--ph-type-small-size);
  color: var(--ph-text-muted);
}

/* Focus must be visible on every surface, including gold fills. */
:focus-visible {
  outline: var(--ph-focus-width) solid var(--ph-focus-color);
  outline-offset: var(--ph-focus-offset);
  border-radius: var(--ph-radius-xs);
}

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