/* ── Status filter tabs (double as live counters) ─────────────────────────── */
.seg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.seg-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--panel);
  color: var(--muted); font-size: 13px; font-weight: 500;
  transition: border-color .12s, color .12s, background .12s;
}
.seg-tab:hover { border-color: var(--border-bright); color: var(--text); text-decoration: none; }
.seg-count {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 3px;
  background: var(--panel-3); color: var(--muted-2);
}
.seg-tab.is-active {
  border-color: var(--accent); color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.seg-tab.is-active .seg-count { background: var(--accent); color: var(--on-accent); }
/* СЗЧ always draws the eye; flagged red when it is the active view. */
.seg-tab.t-awol .seg-count { color: var(--danger); }
.seg-tab.t-awol.is-active {
  border-color: var(--danger); color: var(--text-strong);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.seg-tab.t-awol.is-active .seg-count { background: var(--danger); color: var(--on-accent); }

/* ── List table ───────────────────────────────────────────────────────────── */
/* A status-keyed spine on the first cell reads state down the column at a glance. */
.movements-table td:first-child { border-left: 3px solid transparent; }
.movements-table tr[data-status="planned"]    td:first-child { border-left-color: var(--warn); }
.movements-table tr[data-status="in_transit"] td:first-child { border-left-color: var(--info); }
.movements-table tr[data-status="arrived"]    td:first-child { border-left-color: var(--ok); }
.movements-table tr[data-status="awol"]       td:first-child { border-left-color: var(--danger); }
.mono-link { font-family: var(--font-mono); color: var(--signal-2); font-size: 12.5px; }
.m-person { color: var(--text); }
.m-person:hover { color: var(--accent-2); }
.m-rank { color: var(--muted); font-size: 12px; }
.m-callsign { color: var(--accent-2); }
.m-route { display: inline-flex; align-items: center; gap: 6px; }
.m-to { color: var(--accent-2); }
.m-first { color: var(--warn); }
.m-szch { color: var(--danger); font-weight: 700; }
.m-arrow { color: var(--muted-2); }
.empty-row { text-align: center; padding: 28px 14px; }

/* ── Detail: person header ────────────────────────────────────────────────── */
.mv-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.mv-head-main { min-width: 0; }
.mv-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.mv-track { color: var(--signal-2); font-size: 13px; letter-spacing: .5px; }
.mv-person { margin: 0; font-size: 20px; line-height: 1.2; }
.mv-person a { color: var(--text-strong); }
.mv-person-rank { color: var(--muted); font-weight: 500; font-size: 15px; }
.mv-person-callsign { color: var(--accent-2); }
.mv-head-meta { color: var(--muted); font-size: 13px; margin-top: 5px; font-family: var(--font-mono); }

/* ── Detail: route ────────────────────────────────────────────────────────── */
.mv-route {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; margin: 4px 0 4px;
}
.mv-route-arrow { color: var(--muted-2); }

/* ── Detail: lifecycle stepper ────────────────────────────────────────────── */
.mv-steps { list-style: none; display: flex; padding: 0; margin: 18px 0 4px; }
.mv-step {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 6px; padding-top: 4px;
}
/* Connector to the previous node, sitting behind the dots. */
.mv-step::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.mv-step:first-child::before { display: none; }
.mv-step-dot {
  position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border-bright); background: var(--panel);
}
.mv-step-label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .4px; color: var(--muted);
}
.mv-step-time { font-size: 11px; color: var(--muted-2); }

.mv-step.tone-planned    { --step: var(--warn); }
.mv-step.tone-in_transit { --step: var(--info); }
.mv-step.tone-arrived    { --step: var(--ok); }
.mv-step.tone-szch       { --step: var(--danger); }

.mv-step.is-done .mv-step-dot,
.mv-step.is-current .mv-step-dot { background: var(--step); border-color: var(--step); }
.mv-step.is-done .mv-step-label,
.mv-step.is-current .mv-step-label { color: var(--text); }
.mv-step.is-current .mv-step-dot { outline: 2px solid var(--step); outline-offset: 2px; }
.mv-step.is-done::before,
.mv-step.is-current::before { background: color-mix(in srgb, var(--step) 55%, var(--border)); }
.mv-step.is-skipped .mv-step-dot { border-style: dashed; background: var(--panel); }

/* ── Detail: status controls ──────────────────────────────────────────────── */
.mv-actions, .mv-terminal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.mv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mv-actions form { display: inline; margin: 0; }
.mv-actions-label { color: var(--muted); font-size: 12px; font-family: var(--font-mono); margin-right: 4px; }
.mv-terminal { font-size: 13px; }

/* ── Form: segmented status + disabled destination ────────────────────────── */
.status-seg { margin-bottom: 2px; }
.field.is-disabled { opacity: .45; pointer-events: none; }