/* =========================================================
   GUARDIANOS V21 — SIMULATION READABILITY
   Move the operational interface away from micro-type.
========================================================= */

/* Base HUD cards */
.hud-card {
  width: 280px;
  padding: 20px 21px;
}

.hud-kicker {
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .12em;
}

.hud-card > strong,
.card-row + strong {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.25;
}

.hud-card > span,
.hud-card > small {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.live-indicator,
.online-indicator {
  font-size: 9px;
  line-height: 1.3;
}

/* Alert */
.alert-card {
  width: 275px;
}

.alert-card > strong {
  font-size: 16px;
}

.alert-card > span,
.alert-card > small {
  font-size: 11px;
}

/* CCTV */
.cctv-card {
  width: 300px;
}

.cctv-viewport {
  height: 104px;
}

.micro-status span,
.micro-status strong {
  font-size: 9px;
}

.cctv-card > small {
  font-size: 10.5px;
}

/* Askari */
.askari-card {
  width: 320px;
}

.askari-heading strong {
  font-size: 15px;
}

.askari-heading small,
.askari-confidence small,
.askari-recommendation span {
  font-size: 9px;
}

.askari-summary,
.askari-card p {
  font-size: 11px;
  line-height: 1.6;
}

.askari-confidence strong,
.askari-recommendation strong {
  font-size: 12px;
  line-height: 1.45;
}

/* Command */
.command-card {
  width: 315px;
}

.command-topline small,
.command-card > small {
  font-size: 9px;
}

.command-actions-list span {
  font-size: 9px;
}

.command-actions-list p {
  font-size: 11px;
  line-height: 1.4;
}

.command-authorized {
  padding: 11px 12px;
  font-size: 9px;
}

/* =========================================================
   OFFICER SIMULATION CARD — FIX ALIGNMENT
========================================================= */

.officer-card {
  width: 285px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top top"
    "name name"
    "task task"
    "distance distance"
    "ack ack";
  column-gap: 16px;
  row-gap: 0;
}

.officer-card .card-row {
  grid-area: top;
  width: 100%;
  gap: 14px;
  align-items: center;
}

.officer-card .card-row .hud-kicker {
  min-width: 0;
}

.officer-card .online-indicator {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid rgba(62,208,154,.14);
  border-radius: 999px;
  background: rgba(62,208,154,.055);
}

.officer-card > strong {
  grid-area: name;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.2;
}

.officer-card > #officerTask {
  grid-area: task;
  margin-top: 7px;
  min-height: 34px;
  font-size: 11px;
  line-height: 1.55;
  color: #7899aa;
}

.officer-distance {
  grid-area: distance;
  margin-top: 16px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(92,188,246,.08);
  border-radius: 9px;
  background: rgba(5,22,33,.48);
}

.officer-distance small {
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .08em;
}

.officer-distance b {
  font-size: 12px;
  line-height: 1.3;
}

.acknowledged {
  grid-area: ack;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(62,208,154,.13);
  border-radius: 8px;
  background: rgba(62,208,154,.055);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

/* Response */
.response-card {
  width: 250px;
}

.response-state {
  font-size: 10px;
}

.response-metrics {
  gap: 12px;
}

.response-metrics span {
  padding: 12px;
}

.response-metrics small {
  font-size: 8.5px;
}

.response-metrics b {
  font-size: 12px;
}

/* Client notification */
.client-notification {
  width: 335px;
  padding: 18px;
}

.client-notification small {
  font-size: 9px;
}

.client-notification strong {
  font-size: 14px;
}

.client-notification p {
  font-size: 10.5px;
  line-height: 1.55;
}

.client-notification span {
  font-size: 9px;
}

/* Contained state */
.contained-panel small {
  font-size: 9px;
}

.contained-panel strong {
  font-size: 17px;
}

.contained-panel p {
  font-size: 11px;
}

/* Simulation narrative */
.simulation-narrative {
  padding: 13px 16px;
}

.simulation-narrative small {
  font-size: 7.5px;
}

.simulation-narrative strong {
  font-size: 12px;
  line-height: 1.35;
}

.simulation-narrative span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.5;
}

/* Controls */
.sim-control {
  min-width: 145px;
  min-height: 52px;
  padding: 0 13px;
}

.sim-control-icon {
  width: 29px;
  height: 29px;
  font-size: 11px;
}

.sim-control small,
.simulation-clock small {
  font-size: 7px;
}

.sim-control strong {
  margin-top: 4px;
  font-size: 9px;
}

.simulation-clock {
  min-width: 98px;
}

.simulation-clock strong {
  font-size: 10px;
}

/* Progress */
.incident-progress {
  padding: 12px 18px;
  gap: 11px;
}

.incident-progress span {
  font-size: 8px;
}

/* Event console */
.event-console-head span,
.event-console-head strong {
  font-size: 8.5px;
}

.event-entry time {
  font-size: 8px;
}

.event-entry span {
  font-size: 9.5px;
  line-height: 1.45;
}

/* Nodes */
.node-label small,
.node-quickview small {
  font-size: 8px;
}

.node-label strong {
  font-size: 10px;
}

.node-quickview b {
  font-size: 10px;
}

/* Status strip */
.system-strip small {
  font-size: 8px;
}

.system-strip strong {
  font-size: 10px;
}

/* Medium widths: preserve larger fonts while avoiding collisions */
@media (max-width: 1180px) and (min-width: 781px) {
  .hud-card {
    padding: 18px;
  }

  .officer-card {
    width: 270px;
  }

  .askari-card {
    width: 295px;
  }

  .command-card {
    width: 292px;
  }

  .cctv-card {
    width: 280px;
  }
}

/* Mobile: readable single-card mode */
@media (max-width: 780px) {
  .hud-card {
    padding: 18px !important;
  }

  .hud-kicker {
    font-size: 9px;
  }

  .hud-card > strong,
  .card-row + strong {
    font-size: 16px;
  }

  .hud-card > span,
  .hud-card > small {
    font-size: 10.5px;
  }

  .officer-card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "top top"
      "name name"
      "task task"
      "distance distance"
      "ack ack" !important;
  }

  .officer-card > #officerTask {
    font-size: 10.5px;
  }

  .simulation-narrative strong {
    font-size: 11.5px;
  }

  .simulation-narrative span {
    font-size: 9.5px;
  }

  .sim-control {
    min-width: 138px;
  }

  .sim-control small {
    font-size: 7px;
  }

  .sim-control strong {
    font-size: 9px;
  }
}

/* Small phones should still never drop back into unreadable 5px labels. */
@media (max-width: 480px) {
  .simulation-narrative span {
    font-size: 9px;
  }

  .incident-progress span {
    font-size: 7.5px;
  }

  .client-notification p {
    font-size: 10px;
  }
}