/* Message of the Day banner. Slots in as document.body's first child, so it
   pushes everything (header, page) down a row. Pinned (not fixed) — once
   dismissed it just removes itself, no scroll-tracking lifecycle.

   Three tones: info (cyan, the brand accent), warn (amber), success (green).
   Color comes from the level class; sizing/typography is shared. The dismiss
   X is a plain button styled to look like a close affordance.

   Lives in its own stylesheet because the master style.css has a pre-existing
   unclosed brace far above, which makes the parser silently swallow anything
   appended at the end. Loading these rules from a separate file sidesteps
   that bug entirely. */
.motd-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  font: 500 14px/1.4 'Inter', system-ui, sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.motd-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.motd-banner__link {
  flex: 0 0 auto;
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
}
.motd-banner__link:hover { opacity: 0.85; }

.motd-banner__dismiss {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 4px;
}
.motd-banner__dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.motd-banner--info {
  background: linear-gradient(180deg, rgba(86, 194, 255, 0.18), rgba(86, 194, 255, 0.10));
  color: #d6ecfb;
  border-bottom-color: rgba(86, 194, 255, 0.30);
}
.motd-banner--warn {
  background: linear-gradient(180deg, rgba(255, 176, 64, 0.20), rgba(255, 176, 64, 0.10));
  color: #ffe2b0;
  border-bottom-color: rgba(255, 176, 64, 0.34);
}
.motd-banner--success {
  background: linear-gradient(180deg, rgba(80, 200, 120, 0.20), rgba(80, 200, 120, 0.10));
  color: #c5f1d3;
  border-bottom-color: rgba(80, 200, 120, 0.34);
}

#admin-motd-status.is-error { color: #ff8a8a; }
#admin-motd-text {
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

/* SEO hero. Renders above the SPA so Google sees real H1+intro matching
   the URL before any JS executes. The text content is filled server-side
   in app/seo.py with route-specific copy. Visible to users as a small
   branded subhead — JS hides it once the user navigates off the landing
   page so it doesn't compete with in-tab UI. Lives in motd.css to dodge
   the same style.css brace-imbalance issue noted above. */
.seo-hero {
  max-width: 1200px;
  margin: 12px auto 4px;
  padding: 0 24px;
}
.seo-hero__title {
  margin: 0 0 4px;
  font: 700 1.05rem/1.3 'Rajdhani', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #d6ecfb;
  text-transform: uppercase;
}
.seo-hero__intro {
  margin: 0;
  font: 400 0.85rem/1.45 'Inter', system-ui, sans-serif;
  color: rgba(170, 179, 194, 0.85);
  max-width: 780px;
}
.seo-hero[hidden] { display: none !important; }
@media (max-width: 720px) {
  .seo-hero { padding: 0 16px; }
  .seo-hero__title { font-size: 0.95rem; }
  .seo-hero__intro { font-size: 0.8rem; }
}

/* Boot-loading indicator. Centered on screen, visible from first paint,
   removed by main.js once its module graph has resolved. Cures the "stuck
   page" feel that the SEO hero introduced for visitors who hit the slow
   end of the JS module cascade (HTTP/1 6-connection limit on dev, mostly
   amortized by HTTP/2 multiplexing in prod but still noticeable on cold
   loads). */
.boot-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  z-index: 50;
}
.boot-loading-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-top-color: #56c2ff;
  border-radius: 50%;
  animation: boot-loading-spin 0.8s linear infinite;
}
@keyframes boot-loading-spin {
  to { transform: rotate(360deg); }
}
.boot-loading-text {
  margin: 0;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  color: rgba(170, 179, 194, 0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}