/* WDMA GLOBAL OPERATIONS COMMAND — access gate, takeover bulletins and the
   exercise outbreak view. Loads after styles.css and reuses its tokens. */

/* ------------------------------------------------------------ access gate -- */

body.is-locked { overflow: hidden; }
body.is-locked .cmdbar,
body.is-locked .shell,
body.is-locked .classbar--foot { display: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #050706;
  color: #e8ece9;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: var(--mono);
}

.gate[hidden] { display: none; }

.gate__box {
  width: min(460px, 100%);
  border: 1px solid #2b3431;
  background: #0b0f0e;
}

.gate__top {
  background: var(--class-bg);
  color: var(--class-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 5px 8px;
}

.gate__body { padding: 22px 22px 20px; }

.gate__seal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e2523;
  margin-bottom: 16px;
}

.gate__seal svg { width: 26px; height: 26px; color: #3987e5; flex: none; }
.gate__name { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.gate__unit { font-size: 9px; letter-spacing: 0.14em; color: #6b7873; }

.gate__warn {
  border: 1px solid #3a2e12;
  border-left: 2px solid var(--status-warning);
  background: #14120a;
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.5;
  color: #c9bb92;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.gate__field { margin-bottom: 12px; }

.gate__label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #6b7873;
  margin-bottom: 5px;
}

.gate__input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #2b3431;
  border-radius: 2px;
  background: #050706;
  color: #e8ece9;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.gate__input:focus { outline: 1px solid #3987e5; outline-offset: 0; border-color: #3987e5; }

.gate__submit {
  width: 100%;
  height: 36px;
  margin-top: 6px;
  border: 1px solid #3987e5;
  border-radius: 2px;
  background: #10243c;
  color: #e8ece9;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.gate__submit:hover { background: #16304f; }
.gate__submit:disabled { opacity: 0.5; cursor: default; }

.gate__log {
  margin-top: 14px;
  min-height: 76px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #6b7873;
}

.gate__log b { color: #0ca30c; font-weight: 700; }
.gate__log i { color: var(--status-critical); font-style: normal; }

.gate__foot {
  border-top: 1px solid #1e2523;
  padding: 8px 22px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #4d5754;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- bulletins -- */

.bulletin {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(4, 5, 5, 0.96);
  font-family: var(--mono);
  color: #fff;
}

.bulletin[hidden] { display: none; }

.bulletin__bar {
  height: 16px;
  background-image: repeating-linear-gradient(
    45deg, currentColor 0 14px, transparent 14px 28px);
  color: var(--status-critical);
  opacity: 0.9;
}

.bulletin--warning .bulletin__bar { color: var(--status-warning); }
.bulletin--good .bulletin__bar { color: var(--status-good); }
.bulletin--info .bulletin__bar { color: var(--series-1); }

.bulletin__mid {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  min-height: 0;
}

.bulletin__inner { max-width: 1000px; }

.bulletin__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding: 4px 12px;
  border: 1px solid currentColor;
  color: var(--status-critical);
  margin-bottom: 22px;
}

.bulletin--warning .bulletin__tag { color: var(--status-warning); }
.bulletin--good .bulletin__tag { color: var(--status-good); }
.bulletin--info .bulletin__tag { color: var(--series-1); }

.bulletin__title {
  font-size: clamp(26px, 5.2vw, 62px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.12;
  margin: 0 0 20px;
  text-wrap: balance;
}

.bulletin__lines {
  font-size: clamp(11px, 1.4vw, 15px);
  line-height: 2;
  letter-spacing: 0.1em;
  color: #b8c0bc;
}

.bulletin__lines div + div { margin-top: 2px; }

.bulletin__meta {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6b7873;
}

.bulletin__dismiss {
  margin-top: 18px;
  height: 32px;
  padding: 0 20px;
  border: 1px solid #4d5754;
  border-radius: 2px;
  background: transparent;
  color: #e8ece9;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.bulletin__dismiss:hover { border-color: #e8ece9; }

.bulletin__archive {
  margin: 22px auto 0;
  width: min(520px, 90%);
}

.bulletin__track { height: 6px; background: #241416; }
.bulletin__fill { height: 100%; width: 0; background: var(--status-critical); }

.bulletin__pct {
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #b8c0bc;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .bulletin--critical { animation: bl-flash 1.4s ease-in-out infinite; }
  @keyframes bl-flash {
    0%, 100% { background: rgba(4, 5, 5, 0.96); }
    50% { background: rgba(38, 8, 8, 0.96); }
  }
}

/* -------------------------------------------------------- outbreak view --- */

/* Once the outbreak starts the terminal is black and stays black, whatever the
   OS or the stored theme said. These sit on <body>, so they win over the
   :root theme scopes for everything inside it. */
body.is-outbreak {
  --plane: #000000;
  --surface-1: #050505;
  --surface-2: #0b0b0b;
  --surface-3: #131313;
  --line: #1b1b1b;
  --line-strong: #2a2a2a;
  --grid: #161616;
  --axis: #2a2a2a;
  --text-primary: #e9e9e9;
  --text-secondary: #9a9a9a;
  --text-muted: #6e6e6e;
  --class-bg: #d03b3b;
  --class-fg: #ffffff;
  color-scheme: dark;
  background: #000000;
}

body.is-outbreak .sec,
body.is-outbreak .link { display: none; }

#outbreak { display: none; margin-top: 14px; }
body.is-outbreak #outbreak { display: block; }

.ob-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--status-critical);
}

.ob-head__title {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--status-critical);
}

.ob-head__meta {
  margin-left: auto;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
}

.ob-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: start;
}

/* nation board */

.nations { display: flex; flex-direction: column; }

.nation {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 4px 9px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}

.nation:last-child { border-bottom: 0; }
.nation__code { color: var(--series-1); }
.nation__name { font-family: var(--font); font-size: 12px; color: var(--text-primary); }

.nation__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.nation__glyph { font-size: 9px; }
.nation__bar { grid-column: 2 / -1; height: 4px; background: var(--surface-3); }
.nation__fill { height: 100%; width: 0; transition: width 0.5s linear; }

.tone-good { color: var(--status-good); }
.tone-warning { color: var(--status-warning); }
.tone-serious { color: var(--status-serious); }
.tone-critical { color: var(--status-critical); }
.tone-dark { color: var(--text-muted); }

.fill-good { background: var(--status-good); }
.fill-warning { background: var(--status-warning); }
.fill-serious { background: var(--status-serious); }
.fill-critical { background: var(--status-critical); }
.fill-dark { background: var(--text-muted); }

/* signals feed */

.feed {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  max-height: 520px;
  overflow: hidden;
}

.sig {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

.sig:first-child { border-bottom: 0; }

.sig__hd {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.sig__prec { font-weight: 700; font-size: 9px; letter-spacing: 0.12em; }
.sig__fm { color: var(--series-1); }
.sig__dtg { margin-left: auto; color: var(--text-muted); font-size: 10px; }
.sig__body { color: var(--text-secondary); }

@media (prefers-reduced-motion: no-preference) {
  .sig--new { animation: sig-in 0.35s ease-out; }
  @keyframes sig-in { from { opacity: 0; transform: translateY(-4px); } }
}

/* command column */

.gauge { margin-bottom: 11px; }

.gauge__hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.gauge__v {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.gauge__track { height: 5px; background: var(--surface-3); }
.gauge__fill { height: 100%; transition: width 0.4s linear; }

.acts { display: flex; flex-direction: column; gap: 6px; }

.act {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
}

.act:hover:not(:disabled) { border-color: var(--series-1); background: var(--surface-3); }
.act:disabled { opacity: 0.42; cursor: default; }
.act__key { color: var(--series-1); font-weight: 700; }
.act__cost { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.act__brief { grid-column: 2 / -1; font-size: 10px; color: var(--text-muted); letter-spacing: 0; }

.ob-note {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* end state */

.ob-end {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--status-good);
  background: var(--surface-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.ob-end--bad { border-left-color: var(--status-critical); }

.ob-end__t { font-weight: 700; font-size: 12px; margin-bottom: 6px; }

.restart {
  margin-top: 10px;
  height: 30px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.restart:hover { border-color: var(--series-1); }

@media (max-width: 1480px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-grid > :last-child { grid-column: auto; }
}

/* ------------------------------------------------- coalition node status -- */

.ob-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.nodegroup { margin-bottom: 10px; }

.nodegroup__hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 11px;
}

.nodegroup__code { color: var(--series-1); letter-spacing: 0.08em; }
.nodegroup__n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.nodegroup__track { height: 5px; background: var(--surface-3); }
.nodegroup__fill { height: 100%; transition: width 0.4s linear; }

.lost {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}

.lost:last-child { border-bottom: 0; }
.lost__hd { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lost__node { color: var(--status-critical); flex: none; font-weight: 700; }

.lost__name {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lost__relay { margin-top: 1px; color: var(--text-muted); font-size: 10px; }

/* ------------------------------------------------------ 전지구 감시 레이더 -- */

.radar {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 1;
  /* 주사선이 회전하면 사각 경계 상자가 √2 배로 커집니다. 잘라내지 않으면
     좁은 화면에서 가로로 넘칩니다. */
  overflow: hidden;
}

/* 주사선은 원뿔 그라디언트를 돌려서 만듭니다 — 잔광이 뒤로 끌립니다. */
.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(12, 163, 12, 0.34) 0deg,
    rgba(12, 163, 12, 0.14) 24deg,
    rgba(12, 163, 12, 0.03) 70deg,
    transparent 120deg 360deg);
  animation: radar-sweep 4s linear infinite;
}

.radar__scope { position: relative; display: block; width: 100%; height: auto; }

.radar__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.radar__tick { stroke: var(--line-strong); stroke-width: 1; }
.radar__home { fill: var(--status-good); }

.radar__scale,
.radar__card {
  font-family: var(--mono);
  fill: var(--text-muted);
  font-size: 8px;
  text-anchor: middle;
}

.radar__card { font-size: 9px; fill: var(--text-secondary); }

.blip { animation: blip-paint 4s linear infinite; }
.blip__dot { stroke: #000; stroke-width: 1; }

.blip__label {
  font-family: var(--mono);
  font-size: 8px;
  fill: var(--text-secondary);
}

@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes blip-paint {
  0% { opacity: 1; }
  55% { opacity: 0.55; }
  100% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .radar__sweep { animation: none; opacity: 0.25; }
  .blip { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------- 파견 현황 -- */

.deploys { display: flex; flex-direction: column; }

.deploy {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}

.deploy:last-child { border-bottom: 0; }
.deploy__hd { display: flex; gap: 8px; align-items: baseline; }
.deploy__unit { color: var(--text-primary); font-weight: 700; }
.deploy__state { margin-left: auto; flex: none; font-size: 10px; letter-spacing: 0.08em; }
.deploy__dest { margin-top: 2px; color: var(--series-1); font-size: 10px; }
.deploy__size { color: var(--text-muted); font-size: 10px; }