/* G.U.A.R.D.I.A.N / Crimson Core. Scoped to #boot; never styles auth or health UI. */
#boot.guardian-boot {
  --guardian-red: #ff405c;
  --guardian-dim: #7c2838;
  --guardian-text: #f4f6f8;
  --guardian-muted: #a7a3ac;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  background: radial-gradient(ellipse at 50% 48%, #210d17 0, #100c12 27%, #08090c 67%);
  color: var(--guardian-text);
  isolation: isolate;
  text-align: center;
}
#boot[hidden] { display: none !important; }
#boot .guardian-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(28px, env(safe-area-inset-top)) max(36px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(36px, env(safe-area-inset-left));
}
#boot .guardian-mast, #boot .guardian-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .15em;
  color: #91828b;
}
#boot .guardian-monogram { display: flex; align-items: center; gap: 14px; font: 800 26px/1 system-ui, sans-serif; color: var(--guardian-red); }
#boot .guardian-monogram span { border-left: 1px solid #56303d; padding-left: 14px; color: #d6ced5; font: 500 11px/1 ui-monospace, monospace; letter-spacing: .24em; }
#boot .guardian-edition { font-size: 9px; }
#boot .guardian-stage { margin: auto; padding: 35px 0 40px; width: min(100%, 640px); }
#boot .guardian-eyebrow { color: var(--guardian-muted); font: 500 10px/1.6 ui-monospace, monospace; letter-spacing: .3em; margin: 0 0 18px; }
#boot .guardian-core { position: relative; width: min(100%, 500px, 58svh); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
#boot .guardian-visual, #boot .guardian-hud, #boot .guardian-halo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#boot .guardian-halo { opacity: .75; }
#boot .guardian-hud { overflow: visible; }
#boot .guardian-track { stroke: #5a2939; stroke-width: .8; opacity: .55; }
#boot .guardian-brackets { stroke: #573341; stroke-width: 1; opacity: .7; }
#boot .guardian-arc { stroke: var(--guardian-red); stroke-width: 2; }
#boot .guardian-arc-muted { opacity: .7; }
#boot .guardian-arc-bright { stroke: #ff8fa2; stroke-width: 5; }
#boot .guardian-marker { fill: #ffc4cf; }
#boot .guardian-ticks { stroke: #b6455c; stroke-width: 5; opacity: .7; }
#boot .guardian-major-ticks { stroke: #ff8499; stroke-width: 10; }
#boot .guardian-segments { stroke: #dc354f; stroke-width: 10; opacity: .52; }
#boot .guardian-segment-edge { stroke: #ff8499; stroke-width: 1; opacity: .8; }
#boot .guardian-calibration { stroke: #cc465d; stroke-width: 5; opacity: .72; }
#boot .guardian-calibration-bright { stroke: #ffafbd; stroke-width: 5; }
#boot .guardian-core-aura { stroke: #ff405c; stroke-width: 13; opacity: .05; }
#boot .guardian-core-line { stroke: #f34b64; stroke-width: 1.3; opacity: .7; }
#boot .guardian-core-highlight { stroke: #ff7088; stroke-width: 3; }
#boot .guardian-inner-track { stroke: #442332; stroke-width: .7; }
#boot .guardian-axis { stroke: #d75670; stroke-width: 2; }
#boot .guardian-core-cross { stroke: #a94c62; stroke-width: 1; opacity: .55; }
#boot .guardian-identity { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; gap: 11px; }
#boot .guardian-core-label { font: 500 8px/1.5 ui-monospace, monospace; font-size: clamp(6px, 1.6cqw, 8px); letter-spacing: .24em; color: #a28c99; }
#boot .guardian-identity h1 { font: 650 22px/1.5 system-ui, sans-serif; font-size: clamp(12px, 4.4cqw, 22px); letter-spacing: .11em; color: #fff1f4; margin: 0; text-shadow: 0 0 18px #ff405c35; }
#boot .guardian-subbrand { color: #ff7f96; font: 500 9px/1.5 ui-monospace, monospace; font-size: clamp(7px, 1.8cqw, 9px); letter-spacing: .35em; }
#boot .guardian-status { display: flex; gap: 11px; align-items: center; justify-content: center; margin: 27px 0 8px; }
#boot .guardian-status p { color: #e6d9e0; margin: 0; font-size: 14px; line-height: 1.8; }
#boot .guardian-indicator { background: #ff536b; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 8px #ff405c50; }
#boot .guardian-caption { color: var(--guardian-muted); font-size: 12px; margin: 0; }
#boot .guardian-footer { border-top: 1px solid #2e1b25; padding-top: 17px; font-size: 8px; letter-spacing: .1em; flex-wrap: wrap; }
#boot .guardian-divider { margin: 0 12px; color: var(--guardian-red); }
/* Static fallback is the default. Motion is opt-in ONLY while the isolated controller is alive. */
#boot .guardian-orbit { transform-origin: 250px 250px; }
#boot [data-motion="running"] .guardian-orbit { animation: guardian-orbit 36s linear infinite; }
#boot [data-motion="running"] .guardian-orbit-ticks { animation-duration: 65s; animation-direction: reverse; }
#boot [data-motion="running"] .guardian-orbit-segments { animation-duration: 29s; animation-direction: reverse; }
#boot [data-motion="running"] .guardian-orbit-calibration { animation-duration: 45s; }
#boot [data-motion="running"] .guardian-orbit-inner { animation-duration: 22s; }
#boot [data-motion="running"] .guardian-core-aura { animation: guardian-breathe 4s ease-in-out infinite alternate; }
#boot [data-motion="running"] .guardian-visual { animation: guardian-assemble .7s ease-out both; }
#boot [data-motion="paused"] .guardian-orbit, #boot [data-motion="paused"] .guardian-core-aura { animation-play-state: paused; }
@keyframes guardian-orbit { to { transform: rotate(360deg); } }
@keyframes guardian-breathe { to { opacity: .12; } }
@keyframes guardian-assemble { from { opacity: .5; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 600px) {
  #boot .guardian-shell { padding: max(22px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
  #boot .guardian-edition { font-size: 7px; letter-spacing: .07em; }
  #boot .guardian-core { width: min(100%, 420px, 54svh); }
  #boot .guardian-eyebrow { font-size: 8px; letter-spacing: .2em; margin-bottom: 20px; }
  #boot .guardian-status p { font-size: 13px; }
  #boot .guardian-caption { font-size: 11px; }
  #boot .guardian-identity { gap: 8px; }
  #boot .guardian-footer { font-size: 7px; gap: 9px; }
  #boot .guardian-divider { margin: 0 6px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #boot .guardian-stage { padding: 14px 0; }
  #boot .guardian-core { width: min(38svh, 240px); }
  #boot .guardian-eyebrow { margin-bottom: 7px; }
  #boot .guardian-status { margin-top: 10px; }
  #boot .guardian-identity h1 { font-size: 9px; letter-spacing: .03em; }
  #boot .guardian-core-label { display: none; }
  #boot .guardian-subbrand { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {html:not([data-motion-explicit="true"]) #boot .guardian-visual,html:not([data-motion-explicit="true"]) #boot .guardian-orbit,html:not([data-motion-explicit="true"]) #boot .guardian-core-aura{ animation: none !important; transform: none !important; }html:not([data-motion-explicit="true"]) #boot .guardian-halo{ display: none; }
}
@media (forced-colors: active) {
  #boot.guardian-boot { background: Canvas; color: CanvasText; }
  #boot .guardian-visual { display: none; }
  #boot .guardian-identity h1, #boot .guardian-status p, #boot .guardian-caption { color: CanvasText; text-shadow: none; }
}
