/* PerilIntel — the sign-in, access-refused and no-users pages (Direction A,
   "Night operations", after Main.dc.html). Builds on the tokens in pi.css.
   Layout at 1440 x 900: 96 px gutters, brand + feed pill at 40 px, a 470 px left
   column, the WHOLE dot world on the right (review round 4: the Americas-to-Africa
   crop left Asia and the Pacific — where most M4.5+ earthquakes are — off screen, so
   the "live planet" looked nearly empty), the feed strip and the footer line at the
   bottom. At <= 760 px the whole world is a band under the brand row and everything
   stacks. */

.si-body { background: var(--bg); overflow-x: hidden; }

.si-stage {
  --gut: 96px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 40px var(--gut) 24px;
  background:
    radial-gradient(720px 500px at 72% 42%, rgba(52, 227, 232, .075), rgba(52, 227, 232, 0) 70%),
    var(--bg);
}

/* ---- the dot world (canvas drawn by PI.dots in signin.js) ------------------------------
   The grid spans 360 deg x 144 deg (84N..60S), so a 5:2 box is filled exactly. At 1440 px
   the box is 1538 px wide and starts 497 px in, which puts the Americas, the Atlantic,
   Europe and Africa (170W..50E) where the mockup has them; the rest is clipped. */
.si-world {
  position: absolute;
  z-index: -2;
  left: max(34.5vw, calc(var(--gut) + 390px));
  top: 48.8%;
  width: 106.8vw;
  aspect-ratio: 5 / 2;
  transform: translateY(-50%);
  pointer-events: none;
}
.si-world canvas { display: block; width: 100%; height: 100%; }
/* Wide screens: the whole planet, from just right of the form to the right edge (the
   projection is "contain", so a box clamped by the screen's height stays centred).
   From 901 px (review round 5: at 1024 x 768 only the Americas showed); below that the
   world is a band above the form, as on a phone. */
@media (min-width: 1100px) {
  .si-world {
    left: calc(var(--gut) + 440px); right: 24px;
    width: auto;
    top: 49%;
    max-height: calc(100vh - 250px);
  }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .si-world { left: calc(var(--gut) + 440px); right: 24px; width: auto; top: 49%; max-height: calc(100vh - 250px); }
}
.si-fade {
  position: absolute;
  z-index: -1;
  left: 0; top: 0; bottom: 0;
  width: max(50vw, calc(var(--gut) + 560px));
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 62%, rgba(5, 8, 15, 0) 100%);
  pointer-events: none;
}
@media (min-width: 901px) {
  /* the fade now only keeps the form's own column quiet: it ends where the world begins
     (signin.js reads --si-fade-solid to know which markers it covers) */
  .si-fade { --si-fade-solid: .86; width: calc(var(--gut) + 470px); background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 86%, rgba(5, 8, 15, 0) 100%); }
}

/* ---- top row: brand + feed pill ----------------------------------------------------------- */
.si-top { display: flex; align-items: center; gap: 16px; min-height: 30px; }
.si-brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; }
.si-brand .si-mark { width: 28px; height: 28px; flex-shrink: 0; }
.si-brand span { font: 600 21px/1 var(--cond); letter-spacing: .01em; color: var(--text); }

.si-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--dim);
  font: 500 11.5px/1 var(--mono); letter-spacing: .1em; white-space: nowrap;
}
/* review round 10: the probe says what it counts, above the count. Two lines, so it is not
   the same shape as the signed-in header's one-line pill either — they count different feeds. */
.si-pill-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.si-pill-scope { font: 500 9px/1 var(--mono); letter-spacing: .15em; opacity: .62; }
.si-pill .si-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .8; }
.si-pill[data-state="live"] { color: var(--accent); border-color: rgba(52, 227, 232, .32); }
.si-pill[data-state="live"] .si-dot { opacity: 1; animation: pi-beat 2.4s ease-in-out infinite; }
.si-pill[data-state="partial"] { color: var(--review); border-color: rgba(240, 180, 41, .45); }
.si-pill[data-state="partial"] .si-dot { opacity: 1; }

/* ---- left column: copy + form ------------------------------------------------------------- */
.si-main { width: 470px; max-width: 100%; margin: clamp(28px, 8.4vh, 76px) 0 28px; display: flex; flex-direction: column; }
/* With a message showing, the column moves up so the feed strip still fits a 900 px screen. */
.si-stage:has(.err) .si-main { margin-top: clamp(20px, 4.4vh, 40px); }
.si-eyebrow { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .22em; color: var(--accent); }
.si-main h1, .si-box h1 {
  margin: 0; font: 600 54px/1 var(--cond); letter-spacing: -.012em; color: var(--text-hi); text-wrap: balance;
}
.si-sub { margin: 16px 0 0; max-width: 440px; font: 400 16px/1.55 var(--sans); color: var(--dim); text-wrap: pretty; }

.si-card {
  margin-top: 30px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(10, 17, 32, .74);
  border: 1px solid rgba(120, 165, 230, .2);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.si-field { display: flex; flex-direction: column; gap: 8px; }
.si-field label { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.si-input {
  width: 100%; height: 48px; padding: 0 14px;
  background: rgba(5, 8, 15, .8);
  border: 1px solid var(--line-2); border-radius: var(--r-control);
  color: var(--text); font: 400 15px/1.2 var(--sans);
  transition: border-color .12s, box-shadow .12s;
}
.si-input:hover { border-color: rgba(120, 165, 230, .42); }
.si-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 227, 232, .16); }
.si-input:-webkit-autofill,
.si-input:-webkit-autofill:hover,
.si-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #0a1120 inset;
  caret-color: var(--text);
}
.si-pw { position: relative; }
.si-pw .si-input { padding-right: 50px; }
.si-toggle {
  position: absolute; right: 2px; top: 2px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--dim);
}
.si-toggle:hover { color: var(--text); }
.si-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.si-toggle .si-slash { display: none; }
.si-toggle[aria-pressed="true"] { color: var(--accent); }
.si-toggle[aria-pressed="true"] .si-slash { display: inline; }

/* The error: text only (tests read it with /class="err">([^<]*)</); the mark is CSS. */
.si-card .err {
  position: relative;
  margin: 0; padding: 11px 12px 11px 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 107, .45);
  background: rgba(255, 107, 107, .08);
  color: var(--text);
  font: 400 13.5px/1.45 var(--sans);
  overflow-wrap: anywhere;
}
.si-card .err::before {
  content: "!";
  position: absolute; left: 12px; top: 11px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--refer); color: var(--refer-ink);
  font: 700 11px/1 var(--mono);
}
.si-card .err[data-tone="warn"] { border-color: rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .08); }
.si-card .err[data-tone="warn"]::before { background: var(--review); color: var(--review-ink); }

.si-submit {
  height: 50px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r-control);
  font: 600 15.5px/1 var(--sans);
  box-shadow: 0 0 32px rgba(52, 227, 232, .28);
  transition: background .12s, box-shadow .12s;
}
.si-submit:hover { background: var(--accent-hi); box-shadow: 0 0 40px rgba(52, 227, 232, .36); }
.si-submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.si-submit[disabled] { cursor: progress; opacity: .8; }
.si-help { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--faint); }
.si-coverage { margin: 14px 0 0; font: 400 11px/1.5 var(--mono); letter-spacing: 0; color: var(--faint); }

/* ---- feed strip ----------------------------------------------------------------------------- */
.si-feeds {
  list-style: none; margin: auto 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.si-feed { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.si-feed[data-feed="fire"] { --peril: var(--fire); }
.si-feed[data-feed="flood"] { --peril: var(--flood); }
.si-feed[data-feed="warning"] { --peril: var(--warning); }
.si-feed[data-feed="quake"] { --peril: var(--quake); }
.si-feed-name { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--sans); color: var(--text); min-width: 0; }
.si-feed-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--noteval); opacity: .7; }
.si-feed[data-state="live"] .si-feed-dot { background: var(--peril); opacity: 1; animation: pi-beat 2.4s ease-in-out infinite; }
.si-feed[data-state="stale"] .si-feed-dot { background: var(--review); opacity: 1; }
.si-feed[data-state="down"] .si-feed-dot { background: var(--refer); opacity: 1; }
.si-feed-line { font: 400 12px/1.4 var(--mono); color: var(--faint); overflow-wrap: break-word; }
.si-feed[data-state="stale"] .si-feed-line { color: #b9a36a; }
.si-feed[data-state="down"] .si-feed-line { color: #c98a8a; }

/* ---- footer ----------------------------------------------------------------------------------- */
.si-foot {
  margin-top: 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font: 400 12px/1.45 var(--sans); color: var(--faint);
}
.si-asof { font: 400 11px/1.45 var(--mono); letter-spacing: .06em; white-space: nowrap; }

/* ---- access-refused / no-users: the same stage, one centred panel ---------------------------------- */
.si-plain::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(132, 164, 214, .2) 1.1px, transparent 1.4px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(640px 420px at 72% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(640px 420px at 72% 45%, #000 0%, transparent 75%);
}
.si-box {
  width: min(560px, 100%);
  margin: clamp(28px, 10vh, 96px) 0 40px;
  padding: 28px;
  background: rgba(10, 17, 32, .82);
  border: 1px solid rgba(120, 165, 230, .2);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.si-box-wide { width: min(640px, 100%); }
.si-box h1 { font-size: 40px; line-height: 1.05; }
.si-msg { margin: 16px 0 0; font: 400 16px/1.55 var(--sans); color: var(--text-2); overflow-wrap: anywhere; }
.si-msg::first-letter { text-transform: uppercase; }
.si-note { margin: 12px 0 0; font: 400 14px/1.55 var(--sans); color: var(--dim); }
.si-box code { font: 500 12.5px/1.4 var(--mono); color: var(--text); background: rgba(5, 8, 15, .8); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; }
.si-pre {
  margin: 12px 0 0; padding: 12px 14px; overflow-x: auto;
  background: rgba(5, 8, 15, .8); border: 1px solid var(--line-2); border-radius: 10px;
  font: 500 13px/1.5 var(--mono); color: var(--text-hi); white-space: pre-wrap; overflow-wrap: anywhere;
}
.si-btn {
  margin-top: 22px; height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-control);
  font: 600 15px/1 var(--sans);
  box-shadow: 0 0 28px rgba(52, 227, 232, .24);
}
.si-btn:hover { background: var(--accent-hi); color: var(--accent-ink); }
.si-btn svg { width: 18px; height: 18px; }
button.si-btn { border: 0; cursor: pointer; }
.si-exitform { margin: 0; }
.si-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font: 500 14px/1.3 var(--sans); color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.si-link:hover { color: var(--text); }
.si-plain .si-foot { margin-top: auto; }

/* ---- smaller desktops ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .si-stage { --gut: 56px; }
  .si-feeds { gap: 18px; }
}
/* Short laptop screens (1366 x 768, 1280 x 720): tighter, so the feed strip stays in view. */
@media (max-height: 800px) and (min-width: 761px) {
  .si-stage { padding-top: 28px; padding-bottom: 18px; }
  .si-main { margin-top: clamp(18px, 4.4vh, 40px); margin-bottom: 22px; }
  .si-stage:has(.err) .si-main { margin-top: 16px; }
  .si-eyebrow { margin-bottom: 14px; }
  .si-main h1 { font-size: 46px; }
  .si-sub { margin-top: 12px; font-size: 15px; }
  .si-card { margin-top: 20px; padding: 20px; gap: 12px; }
  .si-coverage { margin-top: 10px; }
  .si-foot { margin-top: 16px; }
}

/* ---- tablets and phones: the whole world as a band between the brand row and the headline -------
   (review round 5: at 768 x 1024 most of the dot world sat behind the form card) */
@media (min-width: 761px) and (max-width: 900px) {
  .si-stage { --si-w: min(calc(100vw - 2 * var(--gut)), 720px); }
  .si-world { left: 0; right: 0; top: 0; width: auto; height: calc(var(--si-w) * .4 + 100px); aspect-ratio: auto; transform: none; overflow: hidden; opacity: .95; }
  .si-world canvas { position: absolute; left: 50%; top: 84px; width: var(--si-w); height: auto; aspect-ratio: 5 / 2; transform: translateX(-50%); }
  .si-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 15, 0) 88%, var(--bg) 100%); }
  .si-fade { display: none; }
  .si-main { width: min(560px, 100%); margin: 72px 0 32px; padding-top: calc(var(--si-w) * .4 - 40px); }
  .si-stage:has(.err) .si-main { margin-top: 72px; }
  .si-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}
/* ---- phones (D15): the world as a 200 px band behind the brand row -------------------------------- */
@media (max-width: 760px) {
  .si-stage { --gut: 16px; --si-w: min(calc(100vw - 24px), 520px); padding: 18px var(--gut) 20px; background: var(--bg); }
  /* The band is the WHOLE world (review round 4: it was a window onto North America
     only), between the brand row and the headline — not behind the copy. */
  .si-world {
    left: 0; right: 0; top: 0;
    width: auto;
    height: calc(var(--si-w) * .4 + 86px);
    aspect-ratio: auto;
    transform: none;
    overflow: hidden;
    opacity: .9;
  }
  .si-world canvas { position: absolute; left: 50%; top: 70px; width: var(--si-w); height: auto; aspect-ratio: 5 / 2; transform: translateX(-50%); }
  .si-world::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(240px 110px at 50% 62%, rgba(52, 227, 232, .08), rgba(52, 227, 232, 0) 70%),
      linear-gradient(180deg, rgba(5, 8, 15, 0) 88%, var(--bg) 100%);
  }
  .si-fade { display: none; }
  .si-top { min-height: 44px; }
  .si-brand span { font-size: 19px; }
  .si-pill { min-height: 32px; padding: 4px 10px; font-size: 11px; letter-spacing: .08em; }
  .si-pill-scope { font-size: 8.5px; letter-spacing: .12em; }
  /* the copy starts under the world band (the planet is not drawn behind the headline):
     the band's height is padding, so the margins below hold with or without a message */
  .si-main { width: 100%; margin: 64px 0 32px; padding-top: calc(var(--si-w) * .4 - 44px); }
  /* a message showing does not pull the copy up into the band, under the hazard pulses */
  .si-stage:has(.err) .si-main { margin-top: 64px; }
  .si-eyebrow { margin-bottom: 14px; }
  .si-main h1 { font-size: 36px; line-height: 1.04; }
  .si-sub { font-size: 15px; margin-top: 12px; }
  .si-card { margin-top: 24px; padding: 18px; border-radius: 14px; }
  .si-input { font-size: 16px; }         /* 16 px: no zoom-on-focus on phones */
  .si-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .si-foot { margin-top: 22px; }
  .si-box { padding: 20px; margin-top: 48px; }
  .si-box h1 { font-size: 32px; }
  .si-plain::before { -webkit-mask-image: radial-gradient(360px 260px at 70% 20%, #000 0%, transparent 75%); mask-image: radial-gradient(360px 260px at 70% 20%, #000 0%, transparent 75%); }
}
@media (max-width: 420px) {
  .si-feeds { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .si-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .si-asof { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .si-pill .si-dot, .si-feed-dot { animation: none !important; }
}