/* The sign-in and loading screens.
   Kept apart from styles.css so the dashboard's stylesheet stays byte-identical
   to the one on the shared drive — it is copied across unchanged, and anything
   added to it would have to be re-added every time it is refreshed. */

/* `hidden` has to actually hide.
   The attribute works through a UA rule of the very lowest priority, so ANY
   author rule setting `display` beats it. Two do: styles.css has
   `#app { display: flex }` and the shell screens below are grids. Without this
   line the sign-in card stays on screen after a successful sign-in and the
   dashboard renders invisibly underneath it — which looks exactly like
   nothing happening. */
[hidden] { display: none !important; }

.shell-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg, #0f1115);
  z-index: 50;
}

.boot-msg { text-align: center; max-width: 34rem; }
.boot-logo, .signin-logo { width: 132px; height: auto; margin: 0 auto 22px; display: block; opacity: .95; }
.boot-title { font: 600 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg, #e6edf3); }
.boot-detail { margin-top: 10px; font: 13px/1.6 system-ui, sans-serif; color: var(--muted, #9aa1ac); }
.boot-mark { font-size: 34px; margin-bottom: 12px; }

.boot-spinner {
  width: 22px; height: 22px; margin: 0 auto 16px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--accent, #a78bfa);
  border-radius: 50%;
  animation: shell-spin .7s linear infinite;
}
@keyframes shell-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spinner { animation: none; } }

.signin-card {
  width: 100%; max-width: 21rem;
  display: grid; gap: 14px;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg, #e6edf3);
}
.signin-card h1 { margin: 0; font-size: 1.3rem; text-align: center; letter-spacing: -.01em; }
.signin-sub { margin: -6px 0 6px; text-align: center; color: var(--muted, #9aa1ac); font-size: .875rem; }
.signin-card label { display: grid; gap: 5px; font-size: .8125rem; color: var(--muted, #9aa1ac); }
.signin-card input {
  font: inherit; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--line, #2a2f38);
  background: var(--card, #161a20); color: var(--fg, #e6edf3);
}
.signin-card input:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 1px; }
.signin-card button {
  font: 600 inherit; margin-top: 4px; padding: .6rem 1rem;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent, #a78bfa); color: #14121c;
}
.signin-card button:disabled { opacity: .6; cursor: default; }
.signin-error {
  margin: 2px 0 0; font-size: .8125rem; line-height: 1.5;
  color: #f87171; border: 1px solid currentColor; border-radius: 8px;
  padding: .55rem .7rem; background: rgba(248,113,113,.08);
}

/* The second way in. Deliberately quieter than the password button: most
   people have a password, and this is the route for somebody signing in for
   the first time, who has never been given one. */
.signin-alt {
  background: transparent !important;
  color: var(--muted, #9aa1ac) !important;
  border: 1px solid var(--line, #2a2f38) !important;
  font-weight: 400 !important;
}
.signin-alt:hover { color: var(--fg, #e6edf3) !important; }
.signin-note {
  margin: 2px 0 0; font-size: .8125rem; line-height: 1.5;
  color: var(--ok, #4ade80); border: 1px solid currentColor; border-radius: 8px;
  padding: .55rem .7rem; background: rgba(74,222,128,.08);
}

/* A quieter third rung below the two buttons: still a control, but plainly not
   the thing most people came here to press. */
.signin-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted, #9aa1ac) !important;
  font-weight: 400 !important;
  font-size: .8125rem !important;
  padding: .25rem !important;
  text-decoration: underline;
}
.signin-link:hover { color: var(--fg, #e6edf3) !important; }

.signin-or {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted, #9aa1ac); font-size: .75rem; margin: .25rem 0;
}
.signin-or::before, .signin-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line, #2a2f38);
}