/* ============================================================
   watchtower.css: /watchtower/, the Justice League terminal.
   Sister page to /citadel/, /power-battery/ and the rest:
   monitor glass over the curve of the earth. Every room on the
   site is a station on the big board, the founding seven are
   on the wall, and the page ends with the signal going up.

   THE EARTH IS DRAWN, NOT PHOTOGRAPHED. It is three radial
   gradients: the ocean, the day side's atmosphere, and the
   terminator line between day and night. Nothing here loads a
   picture, as on every other interface.
   ============================================================ */

/* these pages load no shared stylesheet, so they carry their own reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
html.smooth { scroll-behavior: smooth; }   /* added after load, so back/forward restoration is not animated */

.wt {
  --iw-a: #5f9fe0;   /* the shared world button, interface-world.css */
  --iw-bg: #070c18;
  --disp:  "Bebas Neue", "Barlow Condensed", system-ui, sans-serif;
  --body:  "Barlow Condensed", system-ui, sans-serif;
  --sans:  "Barlow Condensed", system-ui, sans-serif;  /* interface-world.css reads this */
  --mono:  "JetBrains Mono", ui-monospace, monospace;
  --void:   #070c18;
  --void-2: #03060e;
  --blue:   #5f9fe0;
  --alert:  #e04a3a;
  --cream:  #eaf2fb;
  --dim:    #b2c2d6;
  --mute:   #8496ab;
  --line:   rgba(95, 159, 224, 0.22);
  --ease:   cubic-bezier(.16, 1, .3, 1);

  background: var(--void);
  color: var(--cream);
  font-family: var(--body);
  font-size: 1.08rem;
  min-height: 100vh;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* ───────────── the view ───────────── */
.wt-view { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wt-view > span { position: absolute; inset: 0; }
.wt-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 14% 16%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.1px 1.1px at 29% 58%, rgba(255, 255, 255, .65), transparent),
    radial-gradient(1.6px 1.6px at 44% 27%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1px 1px at 57% 70%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.5px 1.5px at 71% 19%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.1px 1.1px at 83% 54%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.3px 1.3px at 91% 33%, rgba(255, 255, 255, .72), transparent),
    radial-gradient(1px 1px at 36% 86%, rgba(255, 255, 255, .5), transparent);
  background-repeat: repeat;
  background-size: 580px 580px;
}
/* the earth, filling the bottom of the window: ocean, limb and atmosphere */
.wt-earth {
  background:
    radial-gradient(120% 78% at 50% 148%, rgba(120, 190, 255, .22) 56%, transparent 60%),
    radial-gradient(118% 76% at 50% 150%, #16407a 52%, #0c2450 57%, transparent 61%),
    radial-gradient(116% 74% at 50% 152%, #1f6b4f 46%, transparent 52%);
}
/* the terminator: the line where the day side ends */
.wt-term {
  background: radial-gradient(118% 76% at 24% 150%, rgba(255, 220, 160, .14) 40%, transparent 58%);
}
/* the station's own glass: the grid, and the dark at the edges */
.wt-glass {
  background-image:
    linear-gradient(rgba(95, 159, 224, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 159, 224, .055) 1px, transparent 1px),
    radial-gradient(120% 92% at 50% 44%, transparent 44%, rgba(0, 0, 0, .74));
  background-size: 58px 58px, 58px 58px, 100% 100%;
}

.wt-blocks { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────────── the header ───────────── */
.wt-top {
  position: sticky; top: 0; z-index: 7;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem clamp(0.9rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(3, 6, 14, .95), rgba(3, 6, 14, .68));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
}
.wt-exit {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.78rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim);
  background: rgba(95, 159, 224, .07);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.wt-exit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-exit:hover, .wt-exit:focus-visible { color: var(--blue); border-color: var(--blue); background: rgba(95, 159, 224, .16); }
.wt-top-mid { color: var(--mute); flex: 1 1 auto; min-width: 0; }
.wt-top-r { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--mute); }
/* the status light, which goes red when the signal is up */
.wt-stat { display: inline-flex; align-items: center; gap: 0.38rem; color: var(--dim); }
.wt-stat i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4fd07f; box-shadow: 0 0 8px rgba(79, 208, 127, .9);
  animation: wt-blink 3.2s ease-in-out infinite;
}
.wt-stat.is-alert { color: #ff9a8a; }
.wt-stat.is-alert i { background: var(--alert); box-shadow: 0 0 10px rgba(224, 74, 58, .95); animation-duration: .9s; }
@keyframes wt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ───────────── the layout ───────────── */
.wt-main {
  position: relative; z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3rem) clamp(0.9rem, 3vw, 2rem) 0;
  display: grid; gap: clamp(2.2rem, 5vw, 3.6rem);
}

/* ───────────── the hero ───────────── */
.wt-hero { display: grid; gap: clamp(1.4rem, 4vw, 2.4rem); align-items: start; }
@media (min-width: 940px) { .wt-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.wt-kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.5rem;
}
.wt-title {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 0.96;
  letter-spacing: 0.02em; color: var(--cream);
  text-shadow: 0 0 34px rgba(95, 159, 224, .4);
  margin-bottom: 0.7rem;
}
.wt-sub { font-size: 1.08rem; line-height: 1.55; color: var(--dim); margin-bottom: 1.3rem; max-width: 60ch; }
.wt-hero-meta dl { display: grid; gap: 0.42rem; }
.wt-hero-meta > dl > div {
  display: grid; grid-template-columns: 9.6rem 1fr; gap: 0.6rem; align-items: baseline;
  padding-bottom: 0.4rem; border-bottom: 1px solid rgba(95, 159, 224, .13);
}
.wt-hero-meta > dl > div:last-child { border-bottom: 0; }
.wt-hero-meta dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
}
.wt-hero-meta dd { font-size: 1.02rem; color: var(--cream); }

/* the roll call */
.wt-roll { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wt-member {
  display: grid; justify-items: center; gap: 0.18rem; text-align: center;
  padding: 0.85rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--m) 32%, transparent);
  border-radius: 10px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--m) 10%, transparent), rgba(0, 0, 0, .28));
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.wt-member:hover, .wt-member:focus-visible {
  border-color: var(--m);
  background: linear-gradient(170deg, color-mix(in srgb, var(--m) 20%, transparent), rgba(0, 0, 0, .28));
  transform: translateY(-3px);
}
.wt-m-disc {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--m) 50%, transparent);
  background: color-mix(in srgb, var(--m) 14%, transparent);
  color: var(--m);
  margin-bottom: 0.2rem;
}
.wt-m-disc svg { width: 26px; height: 26px; fill: currentColor; }
.wt-member b { font-family: var(--disp); font-weight: 400; font-size: 1.08rem; letter-spacing: 0.04em; color: var(--cream); }
.wt-member i { font-style: normal; font-size: 0.8rem; line-height: 1.3; color: var(--mute); }

/* ───────────── headings ───────────── */
.wt-h {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: 0.04em;
  color: var(--blue); margin-bottom: 1.1rem;
}
.wt-h--sm { font-size: clamp(1.25rem, 2.8vw, 1.6rem); }
.wt-h span {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
}
.wt-think { width: 22px; height: 22px; flex: 0 0 auto; }

/* ───────────── the big board ───────────── */
.wt-screens {
  display: grid; gap: clamp(0.7rem, 2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
}
.wt-screen { display: block; height: 100%; }
.wt-s-in {
  position: relative; display: flex; flex-direction: column; height: 100%;
  gap: 0.24rem; padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--m) 30%, transparent);
  border-radius: 8px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--m) 9%, transparent), rgba(0, 0, 0, .32));
  overflow: hidden;
  opacity: 0;
  animation: wt-on .45s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.05s);
  transition: border-color .22s var(--ease), background .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
@keyframes wt-on { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* the scanline every monitor on this wall has */
.wt-s-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .14) 3px 4px);
}
.wt-screen:hover .wt-s-in, .wt-screen:focus-visible .wt-s-in {
  border-color: var(--m); transform: translateY(-4px);
  box-shadow: 0 0 26px color-mix(in srgb, var(--m) 24%, transparent);
}
.wt-screen:focus-visible { outline: none; }
.wt-s-top { display: flex; align-items: center; justify-content: space-between; }
.wt-k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--m) 70%, #fff);
}
/* the live dot on a monitor that is up */
.wt-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m); box-shadow: 0 0 7px var(--m);
  animation: wt-blink 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.17s);
}
.wt-ico {
  width: 28px; height: 28px; margin: 0.25rem 0 0.1rem;
  fill: none; stroke: var(--m); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.wt-n { font-family: var(--disp); font-weight: 400; font-size: 1.24rem; letter-spacing: 0.03em; color: var(--cream); }
.wt-real { font-family: var(--mono); font-size: 0.66rem; color: var(--mute); }
.wt-f { font-size: 0.97rem; line-height: 1.42; color: var(--dim); margin-top: 0.16rem; }
.wt-screen--own .wt-s-in { background: linear-gradient(170deg, color-mix(in srgb, var(--m) 18%, transparent), rgba(0, 0, 0, .32)); }
.wt-screen--calm .wt-k { color: #5fd9a0; }

/* ───────────── the teleporter ───────────── */
.wt-panel {
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(170deg, rgba(95, 159, 224, .05), rgba(0, 0, 0, .26));
}
.wt-pads { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.wt-pad {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center;
  padding: 0.52rem 0.7rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--p) 28%, transparent);
  background: color-mix(in srgb, var(--p) 6%, transparent);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.wt-pad b, .wt-pad i { grid-column: 2; }
.wt-pad:hover, .wt-pad:focus-visible {
  border-color: var(--p); background: color-mix(in srgb, var(--p) 15%, transparent);
  transform: translateY(-2px);
}
/* the pad itself: a ring of light on the floor, seen from above */
.wt-pad-ring {
  grid-row: span 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--p) 65%, transparent);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p) 45%, transparent), transparent 68%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--p) 30%, transparent);
}
.wt-pad b { font-family: var(--disp); font-weight: 400; font-size: 1.04rem; letter-spacing: 0.03em; color: var(--cream); }
.wt-pad i {
  /* 0.66rem is the site's smallest text, enforced by tools/check.py */
  font-style: normal; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.08em; color: color-mix(in srgb, var(--p) 62%, #fff);
}

/* ───────────── the signal ───────────── */
.wt-signal {
  justify-self: center;
  padding: 0.75rem 1.7rem; border-radius: 999px;
  border: 1px solid var(--blue); color: var(--blue);
  background: rgba(95, 159, 224, .1);
  font-family: var(--disp); font-weight: 400; font-size: 1.2rem;
  letter-spacing: 0.06em; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.wt-signal:hover, .wt-signal:focus-visible { background: var(--blue); color: #070c18; transform: translateY(-2px); }

.wt-done {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60% 46% at 50% 44%, rgba(95, 159, 224, .22), transparent 70%),
    rgba(3, 6, 14, .97);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
  text-align: center;
}
.wt.is-called .wt-done { opacity: 1; visibility: visible; }
.wt-done-orb { width: 96px; height: 96px; margin: 0 auto 1rem; }
.wt-done-k {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 0.4rem;
}
.wt-done-t {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 2.9rem); letter-spacing: 0.03em;
  color: var(--blue); text-shadow: 0 0 30px rgba(95, 159, 224, .5);
  margin-bottom: 1.2rem;
}
.wt-done a {
  display: inline-block; padding: 0.6rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--blue); color: var(--blue);
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.wt-done a:hover, .wt-done a:focus-visible { background: var(--blue); color: #070c18; }

/* ───────────── the world button at the foot ───────────── */
.wt-main > .iw--foot { justify-self: center; margin-bottom: 2rem; }

/* ───────────── narrow ───────────── */
/* The board reflows to one column and the roll call to two per row; nothing
   is dropped, which is the rule on this site. */
@media (max-width: 620px) {
  .wt-hero-meta > dl > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .wt-top-mid { display: none; }
  .wt-roll { grid-template-columns: 1fr 1fr; }
}

/* ───────────── reduced motion ───────────── */
/* The blink, the power-on and the lifts are decoration over a page that is
   already complete. Stopped, every monitor is simply up. */
@media (prefers-reduced-motion: reduce) {
  .wt-stat i, .wt-live { animation: none; }
  .wt-s-in { animation: none; opacity: 1; }
  .wt-screen:hover .wt-s-in, .wt-screen:focus-visible .wt-s-in { transform: none; }
  .wt-member:hover, .wt-pad:hover, .wt-signal:hover { transform: none; }
}