/* Signal Observatory entry screen, shared by Jinja and React.
   Focused cascade stays outside the form and never receives pointer input. */
.cw-entry {
  box-sizing: border-box;
  --entry-bg: #050812;
  --entry-panel: #0d111f;
  --entry-cyan: #26caee;
  --entry-magenta: #d043a1;
  --entry-mono: "Share Tech Mono", ui-monospace, monospace;
  --entry-display: "Nunito Sans", ui-rounded, system-ui, sans-serif;
  --entry-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 48px 40px;
  background: var(--entry-bg);
  color: #fff;
  font: 1rem/1.6 var(--entry-body);
}
.cw-entry *, .cw-entry *::before, .cw-entry *::after { box-sizing: border-box; }
.cw-entry-atmosphere {
  --entry-axis: calc(50% + 270px);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 100% 40%, rgba(208,67,161,.14), transparent 48%);
}
.cw-entry-atmosphere picture, .cw-entry-atmosphere img {
  display: block;
  width: 100%;
  height: 100%;
}
.cw-entry-atmosphere picture {
  --entry-source: calc(var(--entry-axis) - 1%);
  mask-image:
    radial-gradient(ellipse 12% 34% at var(--entry-source) 0%, rgba(0,0,0,.12) 35%, #000 100%),
    linear-gradient(90deg, transparent calc(var(--entry-source) - 2%), #000 calc(var(--entry-source) - .5%),
      #000 calc(var(--entry-source) + .5%), transparent calc(var(--entry-source) + 2%));
  mask-composite: add;
}
.cw-entry-atmosphere img { object-fit: cover; object-position: var(--entry-picture-position, 68.5%) center; opacity: .68; }
.cw-entry-beam {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .96;
  pointer-events: none;
}
.cw-entry-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #050812, rgba(5,8,18,.78) 35%, transparent 70%),
    linear-gradient(transparent 75%, #050812);
}
.cw-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 100px;
  width: min(1040px, 100%);
  margin: auto;
  align-items: center;
}
.cw-entry-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  font: 800 1.375rem/1.25 var(--entry-display);
  letter-spacing: .02em;
}
.cw-entry-brand svg { width: 42px; height: 42px; flex: none; }
.cw-entry-brand > span > span { color: var(--entry-cyan); }
.cw-entry-brand small {
  display: block;
  margin-top: 5px;
  color: var(--entry-cyan);
  font: .875rem/1.3 var(--entry-mono);
  letter-spacing: .18em;
}
.cw-entry-kicker {
  margin: 0 0 16px;
  color: var(--entry-cyan);
  font: .8125rem/1.5 var(--entry-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cw-entry-kicker::before { content: "// "; }
.cw-entry h1 {
  margin: 0;
  color: #fff;
  font: 800 clamp(2rem, 4vw, 3.25rem)/1.12 var(--entry-display);
  letter-spacing: -.025em;
}
.cw-entry-lead { margin: 18px 0 28px; color: rgba(255,255,255,.78); font-size: 1rem; }
.cw-entry-form {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(38,202,238,.5);
  border-radius: 2px;
  background: var(--entry-panel);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 24px rgba(38,202,238,.06);
}
.cw-entry-form::before, .cw-entry-form::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: solid var(--entry-cyan);
  pointer-events: none;
}
.cw-entry-form::before { left: -2px; top: -2px; border-width: 2px 0 0 2px; }
.cw-entry-form::after { right: -2px; bottom: -2px; border-width: 0 2px 2px 0; }
.cw-entry-form label { display: block; margin: 0 0 10px; color: #fff; font: .875rem/1.5 var(--entry-mono); }
.cw-entry-form input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(38,202,238,.65);
  border-radius: 2px;
  background: var(--entry-bg);
  color: #fff;
  font: 1rem/1.5 var(--entry-body);
}
.cw-entry-form button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid var(--entry-cyan);
  border-radius: 2px;
  background: var(--entry-bg);
  color: var(--entry-cyan);
  cursor: pointer;
  font: .875rem/1.5 var(--entry-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color 180ms, box-shadow 180ms, background-color 180ms;
}
.cw-entry-form button::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(#26caee,#26caee) left top/8px 2px no-repeat,
    linear-gradient(#26caee,#26caee) left top/2px 8px no-repeat,
    linear-gradient(#26caee,#26caee) right top/8px 2px no-repeat,
    linear-gradient(#26caee,#26caee) right top/2px 8px no-repeat,
    linear-gradient(#26caee,#26caee) left bottom/8px 2px no-repeat,
    linear-gradient(#26caee,#26caee) left bottom/2px 8px no-repeat,
    linear-gradient(#26caee,#26caee) right bottom/8px 2px no-repeat,
    linear-gradient(#26caee,#26caee) right bottom/2px 8px no-repeat;
}
.cw-entry-form button:hover, .cw-entry-form button:focus-visible {
  color: #fff;
  background: rgba(38,202,238,.08);
  box-shadow: 0 0 18px rgba(38,202,238,.3), inset 0 0 16px rgba(38,202,238,.12);
}
.cw-entry :is(a, input, button):focus-visible { outline: 3px solid var(--entry-cyan); outline-offset: 5px; }
.cw-entry-error { margin: 18px 0 0; color: #f080cf; font-size: 1rem; }
.cw-entry-visual { text-align: center; pointer-events: none; }
.cw-entry-orbit {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: min(380px, 100%);
  margin: auto;
}
.cw-entry-orbit::before, .cw-entry-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 95%;
  aspect-ratio: 1;
  border: 1px dashed rgba(38,202,238,.5);
}
.cw-entry-orbit::after { width: 80%; border-style: solid; box-shadow: 0 0 32px rgba(38,202,238,.12); }
.cw-entry-diamond {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid rgba(38,202,238,.8);
  border-radius: 6px;
  background: rgba(5,8,18,.55);
  transform: rotate(45deg);
}
.cw-entry-diamond svg { width: 100%; height: 100%; transform: rotate(-45deg); }
.cw-entry-caption {
  position: relative;
  max-width: 26ch;
  margin: 24px auto 0;
  padding: 8px 12px;
  background: var(--entry-bg);
  color: rgba(255,255,255,.86);
  font-size: 1rem;
}
@media (max-width: 760px) {
  .cw-entry { padding: 32px 22px; }
  .cw-entry-layout { max-width: 440px; grid-template-columns: 1fr; gap: 28px; }
  .cw-entry-brand { margin-bottom: 32px; font-size: 1.25rem; }
  .cw-entry-form { padding: 24px; }
  .cw-entry-orbit { width: 220px; }
  .cw-entry-atmosphere { --entry-axis: 50%; top: auto; height: 440px; }
  .cw-entry-atmosphere img { opacity: .48; }
  .cw-entry-atmosphere::after { background: linear-gradient(#050812, transparent 32%, transparent 85%, #050812); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-entry-beam { display: none; }
  .cw-entry-form button { transition: none; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .cw-entry-atmosphere, .cw-entry-orbit::before, .cw-entry-orbit::after { display: none; }
  .cw-entry-lead, .cw-entry-caption { color: #fff; }
  .cw-entry-form, .cw-entry-diamond { box-shadow: none; background: var(--entry-bg); }
  .cw-entry-form button, .cw-entry-form button:is(:hover, :focus-visible) { box-shadow: none; transition: none; }
  .cw-entry-form, .cw-entry-form input { border-color: var(--entry-cyan); }
}
@media (forced-colors: active) {
  .cw-entry-brand svg, .cw-entry-diamond svg { forced-color-adjust: none; }
}
@media print {
  .cw-entry-atmosphere { display: none; }
}