/* Sign-in — the front door to the ledger.
   Same materials as the console: warm ink on clean paper, hairline rules, one teal rail.
   The previous build layered two invisible textures (a 42px grid and radial washes at
   ~1% effective contrast) and floated the logo on a 5s loop. Decoration nobody can see is
   cost without benefit, and a bobbing mark on a sign-in screen reads as unserious. */

:root {
  color-scheme: light;
  --paper: #fcfbf9;
  --ground: #f2eee7;
  --raised: #ffffff;
  --ink: var(--brand-ink);
  --ink-soft: #6d6259;
  --ink-faint: #756a62;
  --rule: rgba(45, 34, 26, .11);
  --rule-strong: rgba(45, 34, 26, .2);
  --accent: var(--brand-teal);
  --accent-deep: var(--brand-teal-deep);
  --accent-pale: var(--brand-teal-pale);
  --alert: #a8482c;
  --r-sm: 6px;
  --r: 10px;
  --t-micro: .6875rem;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .875rem;
  --t-xl: 1.375rem;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  /* One quiet warm wash, top-left, well above the noise floor — unlike the previous
     stacked gradients this is actually visible. */
  background:
    radial-gradient(60rem 40rem at 8% -10%, rgba(15, 118, 110, .07), transparent 70%),
    var(--ground);
  font: var(--t-base)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.login-stage { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; }

.login-card {
  position: relative;
  width: min(100%, 396px);
  padding: 32px 30px;
  border: 1px solid var(--rule);
  /* The rail from the console's row margin, carried to the front door. */
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(45, 34, 26, .05), 0 14px 40px rgba(45, 34, 26, .07);
}

.login-stage-gradient { display: none; }

.login-head { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }

.brand-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: white;
  background: var(--accent);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: -.02em;
}

.admin-context { min-width: 0; }
.eyebrow { margin: 0; color: var(--ink-faint); font-size: var(--t-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow-subtitle { display: none; }

h1 { margin: 2px 0 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -.014em; line-height: 1.2; }

.intro { margin: 0 0 20px; color: var(--ink-soft); font-size: var(--t-sm); }

.invite-note {
  margin: 0 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent-deep);
  background: var(--accent-pale);
  font-size: var(--t-sm);
}

/* The Google button is the whole control; it does not need a labelled container around it. */
.google-shell { padding: 0; border: 0; background: none; }
.google-shell-kicker { display: none; }
.google-button { min-height: 40px; display: grid; place-items: center; }
.google-button > div { min-width: 100%; }

.login-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.login-status.is-error { color: var(--alert); }
/* Ready is the expected state: the button being there says it. Only trouble speaks up. */
.login-status.is-ready { display: none; }

.status-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: currentColor; }

.retry-button {
  width: 100%;
  height: 36px;
  margin-top: 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--raised);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
}
.retry-button:hover { border-color: var(--accent); color: var(--accent-deep); }

.privacy-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: var(--t-xs); line-height: 1.5; }
.privacy-link { color: var(--accent-deep); }

/* --- Design Studio hooks ------------------------------------------------------
   A published logo replaces the initials; a published backdrop photo covers the wash.
   Nothing published == nothing here paints (the anchors stay hidden / unset). */
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-mark img:not([hidden]) ~ [data-brand-initials] { display: none; }
.login-stage { background-size: cover; background-position: center; }

/* The studio's stand-in for Google's button (login.html?preview=1 only). Same footprint
   as the real control so spacing is judged honestly; it is not a button and does nothing.
   Its colours are Google's, not the theme's, exactly like the real button. */
.google-button-preview {
  width: min(338px, 100%);
  min-width: 240px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #3c4043;
  background: #ffffff;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: .25px;
}
.google-button-preview__mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(#ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 520px) {
  .login-stage { padding: 20px 14px; }
  .login-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}