/* Sign-in-only token overrides. Values are the live app.celeste7.ai/login computed tokens (apps/web/src/styles/tokens.css),
   the font stack is the app's system stack. Scoped to this file on purpose: the shared /tokens.css (Eloquia, the ais
   palette) is unchanged, so every signed-in page looks exactly as before. */
:root, [data-theme="dark"] {
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'SF Mono', ui-monospace, 'Fira Code', monospace;
  --surface-base: #0c0b0a;  --surface: #181614;
  --border-sub: rgba(255,255,255,0.09); --border-top: rgba(255,255,255,0.13); --border-faint: rgba(255,255,255,0.05); --border-chrome: rgba(255,255,255,0.10);
  --glass-bg: rgba(16,14,12,0.65);
  --txt: rgba(255,255,255,0.92); --txt2: rgba(255,255,255,0.70); --txt3: rgba(255,255,255,0.55); --txt-ghost: rgba(255,255,255,0.40); --txt-meta: var(--txt3);
  --mark: #5AABCC; --teal: #3A7C9D; --teal-bg: rgba(58,124,157,0.12); --mark-hover: rgba(58,124,157,0.22); --focus-ring: var(--mark);
  --red: #CD7462;
}
[data-theme="light"] {
  --surface-base: #FFFFFF;  --surface: #F5F5F3;
  --border-sub: rgba(0,0,0,0.14); --border-top: rgba(0,0,0,0.14); --border-faint: rgba(0,0,0,0.09); --border-chrome: rgba(0,0,0,0.14);
  --glass-bg: hsla(0,0%,97%,0.85);
  --txt: rgba(0,0,0,0.87); --txt2: rgba(0,0,0,0.65); --txt3: rgba(0,0,0,0.58); --txt-ghost: rgba(0,0,0,0.45); --txt-meta: var(--txt3);
  --mark: #276F94; --teal: #276F94; --teal-bg: rgba(43,127,163,0.08); --mark-hover: rgba(43,127,163,0.16); --focus-ring: var(--mark);
  --red: #AF4935;
}
:root {
  --font-size-heading: 18px; --font-size-body: 14px; --font-size-label: 13px; --font-size-caption: 12px; --font-size-overline: 11px;
  --duration-hover: 60ms; --duration-fast: 120ms;
}

/* Self-contained: middleware.js lets only tokens.css, theme-toggle.js, login.css, login-page.js and /fonts/ through before sign-in, so shell.css cannot load here. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; }
body { margin: 0; min-height: 100vh; background: var(--surface-base); color: var(--txt); font-family: var(--font-sans); font-size: var(--font-size-label); line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; display: flex; flex-direction: column; position: relative; }
h1, p { margin: 0; }
button, input { font-family: var(--font-sans); font-size: 100%; line-height: inherit; }
[hidden] { display: none !important; }
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-md); }

.topbar { height: 48px; flex-shrink: 0; display: flex; align-items: center; padding: 0 20px; gap: 8px; border-bottom: 1px solid var(--border-faint); background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar-mark { font-size: var(--font-size-overline); font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--mark); }
.topbar-spacer { flex: 1; }
.theme-btn { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; color: var(--txt-meta); transition: background var(--duration-hover); }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 24px; }
.login-auth-card { width: 100%; max-width: 384px; background: var(--surface); border-top: 1px solid var(--border-top); border-right: 1px solid var(--border-sub); border-bottom: 1px solid var(--border-faint); border-left: 1px solid var(--border-sub); border-radius: var(--radius-lg); box-shadow: 0 20px 80px rgba(0,0,0,0.60), 0 4px 20px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; position: relative; z-index: 1; }
.login-auth-header { padding: 32px 32px 0; text-align: center; }
.eyebrow { font-size: var(--font-size-overline); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mark); margin-bottom: 4px; }
.login-auth-header h1 { font-size: var(--font-size-heading); font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.subtitle { font-size: var(--font-size-label); color: var(--txt-meta); }
.login-auth-form { padding: 24px 32px 32px; }
.field { margin-bottom: 16px; }
label { display: block; font-size: var(--font-size-overline); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; }
.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.label-row label { margin-bottom: 0; }
.forgot-link { background: none; border: none; padding: 0; line-height: 1.5; font-size: var(--font-size-caption); color: var(--mark); cursor: pointer; text-decoration: none; transition: opacity var(--duration-hover); }
.forgot-link:hover { opacity: 0.7; }
.input-wrap { position: relative; }
.login-field-input { width: 100%; height: 44px; padding: 0 14px; background: var(--surface-base); border: 1px solid var(--border-sub); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--font-size-label); color: var(--txt); outline: none; transition: border-color var(--duration-fast); opacity: 1; }
.login-field-input::placeholder { color: var(--txt3); opacity: 1; }
.login-field-input.has-toggle { padding-right: 40px; }
.login-field-input.is-error { border-color: var(--red); }
.login-field-input:focus { border-color: var(--teal); }
.login-field-input:disabled { opacity: 0.5; }
.pw-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--txt-meta); }
.field-error { font-size: var(--font-size-caption); color: var(--red); margin-top: 4px; }
.submit-btn { width: 100%; height: 44px; border-radius: var(--radius-md); border: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--font-size-label); font-weight: 500; background: var(--teal-bg); color: var(--mark); transition: background var(--duration-hover); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; }
.submit-btn:hover:not(:disabled) { background: rgba(58,124,157,0.18); }
.submit-btn:active:not(:disabled) { background: rgba(58,124,157,0.24); }
.submit-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.footer-text { margin-top: 24px; font-size: var(--font-size-caption); color: var(--txt-meta); text-align: center; }

/* Loading glyph: port of Cloud_PMS SealMark state="sealing" at tier="button" (20px) + globals.css .seal-arc */
.loading-glyph { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.seal-arc { fill: none; stroke: var(--mark); stroke-width: 3; stroke-linecap: round; transform-origin: center; transform: rotate(-90deg); animation: seal-arc 1.8s linear infinite; }
@keyframes seal-arc { 0% { stroke-dasharray: 0 88; } 50% { stroke-dasharray: 44 44; } 100% { stroke-dasharray: 88 0; opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .seal-arc { animation: none; stroke-dasharray: none; } }

/* Contact-administrator panel (replaces the app's Reset password panel: no reset exists on this site) */
.panel { padding: 32px; }
.panel-title { font-size: var(--font-size-body); font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.panel-text { font-size: var(--font-size-label); color: var(--txt2); margin-bottom: 20px; line-height: 1.5; }
.panel-back { display: block; width: 100%; font-size: var(--font-size-label); color: var(--txt-meta); background: none; border: none; padding: 0; cursor: pointer; text-align: center; line-height: 1.5; }

@media (max-width: 480px) {
  .login-auth-card { max-width: 100%; border-radius: 0; }
  .login-auth-form { padding: 24px 20px 20px; }
  .login-auth-header { padding: 32px 20px 0; }
}