/* Host-specific overrides for the web app only.

   The real theme is _content/EagleStrike.Ui/eaglestrike.css, shared with the phone app.
   Anything added here applies to the browser and not to mobile — so it should be rare,
   and it should be something genuinely browser-only. Everything in this file qualifies:
   both blocks below are about a Blazor Server circuit, which the phone does not have.

   This file also gives the project a wwwroot, which MapStaticAssets expects to find. */

/* ---------- losing the circuit ----------

   Blazor Server holds a live connection per visitor, so a dropped connection is an
   ordinary event: App Service restarts on a deploy, idle sites unload, laptops sleep and
   phones go through tunnels. The framework's own dialog for it is a white card with pale
   grey text — over this app that reads as the page having broken, which is the opposite of
   what it means.

   blazor.web.js finds #components-reconnect-modal (see App.razor) and toggles one class on
   it per state. Everything here is driven off those classes:

     components-reconnect-show      trying to get back, the ordinary case
     components-reconnect-failed    an attempt failed; another is scheduled
     components-reconnect-rejected  the server will not have us back; only a reload will do
     components-reconnect-hide      connected again

   Only the lines for the current state are shown, so the dialog says one thing at a time
   rather than three things with two of them crossed out. */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 15, 25, 0.72);
    backdrop-filter: blur(6px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

.es-reconnect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(380px, 100%);
    padding: 26px 24px;
    border-radius: 20px;
    background: var(--es-surface, #142235);
    border: 1px solid var(--es-line, rgba(255, 255, 255, 0.12));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    color: var(--es-fg, #eaf1fb);
    font: 400 15px/1.45 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
}

.es-reconnect__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(var(--es-over-rgb, 255, 255, 255), 0.12);
    border-top-color: var(--es-blue, #5aa8ff);
    animation: es-reconnect-spin 900ms linear infinite;
}

@keyframes es-reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Still spinning would be a lie once we have stopped trying. */
.components-reconnect-rejected .es-reconnect__spinner {
    animation: none;
    border-top-color: var(--es-red, #ff6b6b);
    border-color: rgba(255, 107, 107, 0.35);
    border-top-color: var(--es-red, #ff6b6b);
}

@media (prefers-reduced-motion: reduce) {
    .es-reconnect__spinner { animation: none; }
}

.es-reconnect__line {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.es-reconnect__note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--es-mute, #8ba3c0);
}

.es-reconnect__act {
    margin-top: 6px;
}

/* One state at a time. Hidden by default, then shown by the state the modal is in. */
.es-reconnect__line--trying,
.es-reconnect__line--failed,
.es-reconnect__line--rejected { display: none; }

.components-reconnect-show .es-reconnect__line--trying,
.components-reconnect-failed .es-reconnect__line--failed,
.components-reconnect-rejected .es-reconnect__line--rejected { display: block; }

/* ---------- an unhandled error ----------

   #blazor-error-ui lives in EagleStrike.Ui's eaglestrike.css, so the phone app — which does
   not load this file — hides it too. */

/* ---------- /terms and /privacy ----------

   A reading column, not the 1080px sale grid: long prose wants about 70 characters a line.
   Colours and type come from the sale floor's tokens, so light and dark both follow. */

.ea-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 0 24px;
  line-height: 1.65;
  font-size: 15.5px;
}

.ea-legal__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; }

.ea-legal__updated { margin: 8px 0 26px; font-size: 13px; color: var(--ea-mute); }

.ea-legal__intro { margin: 0 0 14px; font-size: 16.5px; }

.ea-legal__section {
  margin-top: 18px;
  padding: 22px 24px;
  background: var(--ea-panel);
  border-radius: var(--ea-r-lg);
  box-shadow: var(--ea-shadow-2);
}

.ea-legal__heading { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }

.ea-legal__section p { margin: 0 0 10px; }

.ea-legal__section ul { margin: 4px 0 0; padding-left: 20px; }

.ea-legal__section li { margin-bottom: 8px; }

.ea-legal__section li::marker { color: var(--ea-gold); }

.ea-legal__also { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 14px; }

.ea-legal__also a { color: var(--ea-gold); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .ea-legal__title { font-size: 25px; }
  .ea-legal__section { padding: 18px 16px; }
}