/*
 * STT Workspace — Staging-only auth surface isolation.
 *
 * Production assets (pwa.css, login-mobile-v15.css, app.css, final.css, ...)
 * already own the visual styling of both:
 *   - the anonymous login page (.login-page-v13 .auth-shell, .auth-copy, .auth-card, ...)
 *   - the authenticated Workspace (.app-shell, .sidebar, .topbar, .project-panel, ...)
 *
 * This file is loaded LAST and only does two things:
 *   1. Defines --stt-* design tokens used by production assets.
 *   2. Controls visibility of .app-shell vs #login-overlay based on the
 *      <body class="login-body"> flag, which the Worker SSR sets/unsets.
 *
 * If the design tokens already exist (production provides them), this file
 * is a no-op. Any rules that *visually* restyle production elements have
 * been removed — production's CSS must own the look.
 *
 * HARD RULE: Do NOT add rules here that style .app-shell, .sidebar, .topbar,
 * .project-panel, .auth-shell, .auth-copy, .auth-card, etc. Those belong to
 * production's CSS, and overriding them here will create visual drift.
 *
 * Build 2026.09.20.1: added font-variant-emoji: text to force monochrome
 * icon rendering on iOS Safari (stops ◉/▦/◇ from rendering as color emoji).
 */

:root {
  --stt-paper: #f7f5f1;
  --stt-ink: #282c29;
  --stt-muted: #6e746e;
  --stt-line: #e8e5de;
  --stt-accent: #e16f4e;
  --stt-accent-deep: #cc5d3e;
  --stt-side: #1f2421;
  --stt-side-line: rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --stt-paper: #14181a;
    --stt-ink: #f0ede4;
    --stt-muted: #b0b4ad;
    --stt-line: #2a2f2c;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--stt-paper);
  color: var(--stt-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ────────────────────────────────────────────────────────────────────
 * Authenticated state
 *   When the Worker SSR strips "login-body" from <body>, the production
 *   pwa.css rule body:not(.login-body) .app-shell { display: grid } kicks
 *   in and reveals the Workspace. We just need to:
 *     - hide the auth overlay (it lives inside <body>, not inside .app-shell)
 *     - ensure the desktop sidebar/two-column grid is what production wants
 * ──────────────────────────────────────────────────────────────────── */

body:not(.login-body) #login-overlay {
  display: none !important;
}

/* The .app-shell display rules come from pwa.css (authenticated state)
 * and from auth-shell-v13.css (anonymous state). We don't redefine them. */

/* ────────────────────────────────────────────────────────────────────
 * Anonymous state
 *   When <body class="login-body">, the Worker SSR shows #login-overlay
 *   and hides .app-shell. Production's login-mobile-v15.css + pwa.css own
 *   the actual visual styling of the .login-page-v13 surface.
 *   This file just ensures the #login-overlay is visible and centered.
 * ──────────────────────────────────────────────────────────────────── */

#login-overlay {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
}

/* Staging-only: hide .app-shell in anonymous state. Production's login.php
 * doesn't even render .app-shell, so this rule is purely a safety net
 * for our unified HTML. The static index.html ships .app-shell,
 * .mobile-app-header, .mobile-bottom-nav, .mobile-sidebar-backdrop,
 * .pwa-sidebar-install with `hidden` already; the SSR (index-html.ts)
 * double-enforces that for anonymous and removes it for authenticated.
 * The rules below are an additional belt-and-braces that survives any
 * JS-hide leak and any CSS cache miss in production pwa.css itself.
 */
body.login-body .app-shell,
body.login-body .mobile-app-header,
body.login-body .mobile-bottom-nav,
body.login-body .mobile-sidebar-backdrop,
body.login-body .pwa-sidebar-install {
  display: none !important;
}

/* Authenticated: hide the login overlay. The SSR removes `hidden` from
 * the authenticated chrome and adds `hidden` to #login-overlay, but we
 * also belt-and-braces this with a CSS rule so any external CSS cache
 * miss (e.g. production pwa.css without the `body:not(.login-body)`
 * rule) cannot reveal the login UI on top of the Workspace.
 */
body:not(.login-body) #login-overlay {
  display: none !important;
}

/* Body background in anonymous state matches production's .login-page-v13 */
body.login-body {
  background: #111713;
}