/* Visual variables are generated from the shared DS by prepare_web_branding.py. */
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
body { font-family: var(--boot-font-family), system-ui, sans-serif; }
.app-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 100%; min-height: 100svh; overflow-y: auto;
  padding: var(--boot-space-xl) var(--boot-space-lg);
  background: radial-gradient(ellipse at 50% 35%, var(--boot-glow), transparent 65%), var(--boot-background);
  color: var(--boot-foreground); text-align: center; opacity: 1;
  transition: opacity var(--boot-motion) ease;
}
.loading-content { width: 100%; max-width: calc(var(--boot-space-xxl) * 10); margin: auto 0; }
.brand-name { margin: 0 0 var(--boot-space-xl); color: var(--boot-primary); font-size: calc(var(--boot-space) * .75); font-weight: 600; letter-spacing: .28em; }
.brand-mark {
  display: grid; place-items: center; width: calc(var(--boot-space-xxl) * 2); aspect-ratio: 1;
  margin: 0 auto var(--boot-space-xl); border-radius: 50%; background: var(--boot-logo-background);
  box-shadow: 0 0 0 var(--boot-space-sm) var(--boot-glow);
}
.brand-logo { display: block; width: var(--boot-space-xxl); height: var(--boot-space-xxl); animation: brand-turn var(--boot-spin) linear infinite; }
h1 { margin: 0; font-size: clamp(calc(var(--boot-space) * 1.75), 5vw, calc(var(--boot-space) * 2.75)); line-height: 1.16; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.headline-dot { color: var(--boot-primary); }
.loading-description { margin: var(--boot-space-lg) 0 0; color: var(--boot-secondary); font-size: var(--boot-space); line-height: 1.65; }
.loading-status { display: flex; align-items: center; justify-content: center; gap: var(--boot-space-sm); margin-top: var(--boot-space-xl); }
.loading-status p { margin: 0; color: var(--boot-secondary); font-size: calc(var(--boot-space) * .75); line-height: 1.6; }
.status-dot { width: var(--boot-space-sm); height: var(--boot-space-sm); flex-shrink: 0; border-radius: 50%; background: var(--boot-primary); animation: status-breathe var(--boot-spin) ease-in-out infinite; }
.loading-footer { margin: var(--boot-space-xl) 0 0; color: var(--boot-secondary); font-size: calc(var(--boot-space) * .75); line-height: 1.6; }
#loading-retry { margin-top: var(--boot-space); padding: var(--boot-space-sm) var(--boot-space-lg); border: var(--boot-border) solid var(--boot-primary); border-radius: var(--boot-radius); background: var(--boot-container); color: var(--boot-on-container); font: inherit; cursor: pointer; min-height: calc(var(--boot-space-xl) + var(--boot-space)); }
#loading-retry:hover { background: var(--boot-background); }
#loading-retry:focus-visible { outline: var(--boot-border) solid var(--boot-foreground); outline-offset: var(--boot-space-xs); }
.app-loading.is-ready { opacity: 0; pointer-events: none; }
.app-loading.has-error .brand-logo, .app-loading.has-error .status-dot { animation-play-state: paused; }
[hidden] { display: none !important; }
@keyframes brand-turn { to { transform: rotate(1turn); } }
@keyframes status-breathe { 50% { opacity: var(--boot-state-alpha); } }
@media (max-height: 36rem) { .app-loading { justify-content: flex-start; } .loading-content { margin: 0; } .brand-mark { width: calc(var(--boot-space-xxl) + var(--boot-space-xl)); } }
@media (prefers-reduced-motion: reduce) { .brand-logo, .status-dot { animation: none; } .app-loading { transition: none; } }