/* The two pieces of chrome the web build adds: the boot screen and the start
 * dialog. Both use the palette tokens from style.css, so they follow the
 * theme like everything else. */

.boot {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
}
.boot[hidden] { display: none; }
.boot-card { text-align: center; padding: 24px 28px; max-width: 420px; }
.boot-brand { font-weight: 800; letter-spacing: 4px; font-size: 30px; }
.boot-sub {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}
.boot-spinner { display: flex; gap: 6px; justify-content: center; margin: 22px 0 14px; }
.boot-spinner b {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: bootPulse 1.2s ease-in-out infinite;
}
.boot-spinner b:nth-child(2) { animation-delay: 0.15s; }
.boot-spinner b:nth-child(3) { animation-delay: 0.3s; }
@keyframes bootPulse { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } }
.boot-step { font-size: 15px; font-weight: 700; }
.boot-detail { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 16px; }
.boot-retry, #boot-retry { margin-top: 14px; }

dialog.web-start { max-width: 520px; }
.web-start h2 { margin-bottom: 6px; }
.web-start .form-grid { margin-top: 12px; }
.web-key-row { margin-top: 12px; }
.web-key-row > label { display: block; font-size: 12px; margin-bottom: 4px; }
.web-key-row > input {
  width: 100%; font: inherit; font-size: 13px; font-family: "Consolas", monospace;
  border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px;
  background: var(--card); color: var(--ink);
}
.web-key-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px; flex-wrap: wrap;
}
.web-key-note a { color: var(--accent); font-size: 11px; }
.web-start .small { line-height: 1.45; margin: 8px 0 0; }