/* boot.css — the instant-paint shell shown before React mounts (login card,
   restore screen, progress bar). Loaded first so the first frame is already styled. */

/* Boot shell: the login card is the DEFAULT so a signed-out load paints it the
   moment the document parses (never a blank gap). The head config script
   (and a body backstop, in case the bundler's script reinjection reorders
   things) synchronously checks sessionStorage and marks <html> with EXACTLY
   one of two classes the instant it runs — .sts-restoring (a session exists:
   keep the neutral skeleton, keep the login card hidden, no flash) or
   .sts-fresh (no session: snap the skeleton away and the login card in
   immediately, no animation, no waiting). Whichever class lands first wins —
   the switch happens the moment JS resolves it, not on a fixed clock.
   The 500ms CSS timer below is only the LAST-RESORT fallback for the
   pathological case where neither script ever runs at all; in normal
   operation JS always preempts it, so a fresh (signed-out) load no longer
   pays that wait just to protect the signed-in-refresh case. */
@keyframes boot-reveal { to { opacity: 1; } }
@keyframes boot-hide { to { opacity: 0; visibility: hidden; } }
/* The skeleton is the DEFAULT paint: the .sts-restoring marker is added by a
   script, and the bundled build re-injects scripts after the DOM, so nothing
   class-driven can be trusted for the first frames. Both panels are therefore
   decided by CSS timing alone — the skeleton shows immediately and hides at
   500ms unless the marker landed (refresh), while the login card reveals at
   500ms unless it did. */
#boot-login { position: relative; }
/* ---- v2.0.2 RESTORE SCREEN -------------------------------------------------
   A refresh with a live session used to paint a cream v1 skeleton of the app
   chrome and then swap it for the real thing — the "dissolve and come back"
   the user reported. It is now a calm restore card built from the SAME
   vocabulary as the login and the app (paper backdrop, surface card, --r-lg
   corner, 3px accent rule, accent sweep bar), so a reload reads as one
   continuous screen. Colours are literal hex, not var(--…): this paints
   before React, so no token is defined yet — `boot-dark` on <html> carries
   the dark variant (set by the inline script below, same check as the app). */
#boot-restoring { display: block !important; position: absolute; inset: 0; background: #F4F6F8; opacity: 1; animation: boot-hide 1ms linear 500ms forwards; }
.boot-dark #boot-restoring { background: #0A0F15; }
.sts-restoring #boot-restoring { animation: none !important; opacity: 1 !important; visibility: visible !important; }
.sts-fresh #boot-restoring { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
.sts-fresh #boot-form { animation: none !important; opacity: 1 !important; }
@keyframes bskel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.bskel { background: linear-gradient(90deg,#E4E8ED,#F4F6F8,#E4E8ED); background-size: 200% 100%; border-radius: 8px; animation: bskel-shimmer 1.25s ease-in-out infinite; }
.boot-dark .bskel { background: linear-gradient(90deg,#1F2A36,#131C26,#1F2A36); background-size: 200% 100%; }
.sts-restoring #boot-login { background: #F4F6F8 !important; display: block !important; align-items: stretch; justify-content: flex-start; padding: 0 !important; min-height: 100vh; }
.boot-dark.sts-restoring #boot-login { background: #0A0F15 !important; }
/* ---- v2.0.9: a refresh shows NOTHING but the page's own background and the
   progress bar ---------------------------------------------------------------
   v2.0.7/.8 drew the app's furniture as placeholders while the bundle
   unpacked. The user's video showed that as an extra screen: "that first
   showing section need not come — while refreshing, the last section only
   need to come." So the restoring shell is now an EMPTY page in the app's
   paper colour; the only thing on screen is the 3px accent bar at the top,
   and the next thing the user sees is the real page with its data. Do not
   reintroduce skeleton blocks here. */
.boot-app { min-height: 100vh; background: #F4F6F8; }
.boot-dark .boot-app { background: #0A0F15; }
/* Progress bar — lives OUTSIDE #root, so React's mount cannot rip it out
   mid-animation; the boot script finishes and removes it. */
#boot-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: transparent; pointer-events: none; }
#boot-prog span { display: block; height: 100%; width: 30%; background: linear-gradient(90deg,#178A3A,#3BE074); box-shadow: 0 0 12px rgba(23,138,58,.45); animation: boot-sweep 1.05s cubic-bezier(.22,1,.36,1) infinite; }
#boot-prog.done span { width: 100%; animation: none; transition: width .22s ease; }
#boot-prog.done { opacity: 0; transition: opacity .3s ease .12s; }
@keyframes boot-sweep { 0% { transform: translateX(-105%); } 100% { transform: translateX(340%); } }
#boot-form { opacity: 0; animation: boot-reveal 1ms linear 500ms forwards; }
.sts-restoring #boot-form { display: none !important; animation: none !important; opacity: 0 !important; }
.sts-restoring #boot-restoring { display: block !important; }
.sts-fresh #boot-form { display: block !important; }
*, *::before, *::after { box-sizing: border-box; }