/* Approved wordmark ink doubles as the startup canvas; interface tokens are unchanged. */
.startup-screen {
  --startup-progress: 0%;
  --startup-muted: #0a6b61;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 1;
  transition: opacity 220ms ease-out;
  isolation: isolate;
}

.startup-screen__brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 360px);
  transform: translateY(-3svh);
}

.startup-screen__logo {
  display: block;
  width: min(76vw, 312px, 43svh);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.startup-screen__wordmark {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1690 / 315;
  overflow: hidden;
  background: var(--startup-muted);
  -webkit-mask: url('/brand/edaplaner-wordmark.svg') center / contain no-repeat;
  mask: url('/brand/edaplaner-wordmark.svg') center / contain no-repeat;
}

#startup-wordmark-fill {
  display: block;
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: inset(0 calc(100% - var(--startup-progress)) 0 0);
  transition: clip-path 260ms ease-out;
}

.startup-screen__feedback {
  position: absolute;
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
  left: 24px;
  right: 24px;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.startup-screen__status {
  /* Available to screen readers without adding a second visual progress indicator. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.startup-screen[data-delayed] .startup-screen__status {
  position: static;
  width: auto;
  height: auto;
  max-width: 320px;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font: 400 15px / 22px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.startup-screen[data-delayed] .startup-screen__brand { transform: translateY(calc(-3svh - 16px)); }

.startup-screen__retry {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid #ffffff66;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: 600 15px / 20px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}

.startup-screen__retry[hidden] { display: none; }
.startup-screen__retry:active { transform: scale(.98); }
.startup-screen__retry:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.startup-screen.is-leaving { opacity: 0; pointer-events: none; }
.startup-screen__noscript { position: absolute; bottom: 32px; left: 24px; right: 24px; text-align: center; }

@media (max-height: 500px) and (orientation: landscape) {
  .startup-screen__brand { gap: 16px; transform: none; }
  .startup-screen__logo { width: min(40svh, 180px); }
  .startup-screen__wordmark { width: 240px; }
  .startup-screen[data-delayed] .startup-screen__brand { gap: 12px; transform: translateY(-48px); }
  .startup-screen[data-delayed] .startup-screen__logo { width: 32svh; }
  .startup-screen[data-delayed] .startup-screen__wordmark { width: 220px; }
  .startup-screen__feedback { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .startup-screen, #startup-wordmark-fill, .startup-screen__retry { transition: none; }
}