/* Unit-operator PWA (/unit/*) — mobile-first shell, bottom tab bar, sheets.
   Tokens only (no hex literals); logical properties for RTL parity. */

/* ── app shell ─────────────────────────────────────────────────────────── */

.ms-unit-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: var(--ms-font-ui);
}

.ms-unit-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── bottom navigation ─────────────────────────────────────────────────── */

.ms-unit-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block-start: 1px solid var(--ms-panel-border);
    background: var(--ms-panel);
    padding-block-end: env(safe-area-inset-bottom, 0);
    flex-shrink: 0;
}

.ms-unit-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-block: 8px 6px;
    color: var(--ms-text-mute);
    text-decoration: none;
    font-size: 0.7rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ms-unit-tab.active {
    color: var(--ms-accent);
}

.ms-unit-tab-icon {
    position: relative;
    display: inline-flex;
}

.ms-unit-badge {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-end: -8px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 8px;
    background: var(--ms-alert);
    color: var(--ms-bg);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ── generic screen scaffolding ────────────────────────────────────────── */

.ms-unit-screen {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
    margin-inline: auto;
}

.ms-unit-header h1 {
    font-size: 1.15rem;
    margin: 0;
    color: var(--ms-text);
}

.ms-unit-sub {
    color: var(--ms-text-dim);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.ms-unit-card {
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-unit-card-title {
    font-size: 0.95rem;
    margin: 0;
    color: var(--ms-text);
}

.ms-unit-empty {
    text-align: center;
    color: var(--ms-text-dim);
    padding-block: 32px;
    font-size: 0.9rem;
}

.ms-unit-empty span {
    font-size: 2rem;
    display: block;
    margin-block-end: 8px;
}

/* ── form fields (touch-sized) ─────────────────────────────────────────── */

.ms-unit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ms-text-dim);
}

.ms-unit-field input:not([type="range"]),
.ms-unit-field select,
.ms-unit-field textarea {
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    border-radius: 10px;
    color: var(--ms-text);
    padding: 12px;
    font-size: 1rem;
    font-family: inherit;
    min-height: 48px;
}

.ms-unit-field input:focus,
.ms-unit-field select:focus,
.ms-unit-field textarea:focus {
    outline: 2px solid var(--ms-accent);
    outline-offset: 1px;
}

/* Plain accent-colored range inputs — no directional gradient backgrounds,
   which mirror incorrectly under RTL (the #234 slider trap). */
.ms-unit-slider input[type="range"] {
    width: 100%;
    height: 32px;
    accent-color: var(--ms-accent);
    touch-action: pan-y;
}

.ms-unit-slider strong {
    color: var(--ms-accent);
    font-variant-numeric: tabular-nums;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.ms-unit-btn {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--ms-panel-border);
    background: var(--ms-bg2);
    color: var(--ms-text);
    font-size: 1rem;
    font-weight: 600;
    padding-inline: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ms-unit-btn:disabled {
    opacity: 0.55;
}

.ms-unit-btn-primary {
    background: var(--ms-accent);
    border-color: var(--ms-accent);
    color: var(--ms-bg);
}

.ms-unit-btn-ok {
    background: var(--ms-ok);
    border-color: var(--ms-ok);
    color: var(--ms-bg);
}

.ms-unit-btn-danger {
    background: var(--ms-alert);
    border-color: var(--ms-alert);
    color: var(--ms-bg);
}

.ms-unit-btn-ghost {
    background: transparent;
    color: var(--ms-text-dim);
    width: 100%;
}

.ms-unit-error {
    color: var(--ms-alert);
    font-size: 0.85rem;
}

/* ── login extras ──────────────────────────────────────────────────────── */

.ms-unit-login-hint {
    color: var(--ms-text-mute);
    font-size: 0.78rem;
    text-align: center;
    margin-block-start: 10px;
}

/* ── map screen ────────────────────────────────────────────────────────── */

.ms-unit-map-screen {
    position: relative;
    height: 100%;
}

.ms-unit-map {
    position: absolute;
    inset: 0;
}

/* Stacked top overlay: mission banner, then the weather chip. The container
   is click-through; only its children take taps. */
.ms-unit-map-top {
    position: absolute;
    inset-block-start: 10px;
    inset-inline: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.ms-unit-map-top > * {
    pointer-events: auto;
}

.ms-unit-mission-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ms-panel);
    border: 1px solid var(--ms-warn);
    border-inline-start: 4px solid var(--ms-warn);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--ms-text);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: ms-unit-banner-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes ms-unit-banner-in {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-mission-banner { animation: none; }
}

.ms-unit-mission-banner-eta {
    color: var(--ms-accent) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ms-unit-mission-banner.ms-unit-prio-critical {
    border-color: var(--ms-alert);
    border-inline-start-color: var(--ms-alert);
}

.ms-unit-mission-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ms-unit-mission-banner-text span {
    color: var(--ms-text-dim);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-unit-mission-banner-status {
    font-size: 0.75rem;
    color: var(--ms-warn);
    font-weight: 700;
    white-space: nowrap;
}

.ms-unit-map-fabs {
    position: absolute;
    inset-block-end: 18px;
    inset-inline-end: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.ms-unit-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--ms-panel-border);
    background: var(--ms-panel);
    color: var(--ms-accent);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
}

.ms-unit-fab-sos {
    background: var(--ms-alert);
    border-color: var(--ms-alert);
    color: var(--ms-bg);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.ms-unit-gps-chip {
    position: absolute;
    inset-block-end: 18px;
    inset-inline-start: 14px;
    z-index: 5;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
    color: var(--ms-text-dim);
}

.ms-unit-gps-error {
    color: var(--ms-alert);
    border-color: var(--ms-alert);
}

/* own-position marker (DOM marker; --heading set from JS) */
.ms-unit-own-marker {
    /* MUST stay absolute: MapLibre positions markers with position:absolute +
       a transform. Overriding this with position:relative left the own dot
       mis-placed / invisible on iOS Safari (canvas layers were fine, only the
       DOM marker broke). The absolute children below anchor to this box. */
    position: absolute;
    width: 30px;
    height: 30px;
}

.ms-unit-own-dot {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--ms-nato-friend, var(--ms-own));
    /* Thick white ring + double shadow = the unmistakable Google-Maps blue
       dot, readable on any satellite imagery. */
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 14px var(--ms-nato-friend, var(--ms-own));
}

.ms-unit-own-heading {
    position: absolute;
    inset: -7px;
    transform: rotate(var(--heading, 0deg));
}

.ms-unit-own-heading::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    border-inline: 5px solid transparent;
    border-block-end: 9px solid var(--ms-nato-friend, var(--ms-own));
}

.ms-unit-own-marker.no-heading .ms-unit-own-heading {
    display: none;
}

/* Breathing ring under the own dot — "this is you, alive". Switches to the
   alert palette while a distress call is fresh (.sos via setSosActive). */
.ms-unit-own-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--ms-nato-friend, var(--ms-own));
    opacity: 0;
    animation: ms-unit-own-pulse 2.4s ease-out infinite;
}

@keyframes ms-unit-own-pulse {
    0%   { transform: scale(0.55); opacity: 0.85; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.ms-unit-own-marker.sos .ms-unit-own-dot {
    background: var(--ms-alert);
    box-shadow: 0 0 12px var(--ms-alert);
}

.ms-unit-own-marker.sos .ms-unit-own-pulse {
    border-color: var(--ms-alert);
    animation-duration: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-own-pulse { animation: none; }
}

/* Before the first GPS fix the marker sits on the unit's last known /
   profile position — dim it so "where the system thinks you are" and
   "where GPS says you are" are visually distinct. */
.ms-unit-own-marker.no-fix { opacity: 0.55; }
.ms-unit-own-marker.no-fix .ms-unit-own-dot { box-shadow: none; }

/* ── code login ───────────────────────────────────────────────────────── */

/* The base .ms-login-screen is a centring flex ROW (single card). The unit
   login stacks two children (code card + password fallback) — column keeps
   the fallback under the card instead of floating beside it. */
.ms-login-screen.ms-unit-login {
    flex-direction: column;
}

.ms-unit-code-input {
    font-family: var(--ms-font-mono);
    font-size: 1.25rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
}

.ms-unit-login-fallback {
    position: relative;
    z-index: 1;
    margin-block-start: 14px;
    text-align: center;
}

.ms-unit-login-fallback > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 0.8rem;
    color: var(--ms-text-dim);
    padding: 6px 10px;
    -webkit-tap-highlight-color: transparent;
}

.ms-unit-login-fallback > summary::-webkit-details-marker { display: none; }
.ms-unit-login-fallback > summary:hover { color: var(--ms-text); }

.ms-unit-login-fallback[open] > .ms-login-card {
    margin-block-start: 8px;
}

/* ── missions ──────────────────────────────────────────────────────────── */

.ms-unit-mission {
    border-inline-start: 4px solid var(--ms-warn);
}

.ms-unit-mission.ms-unit-prio-critical {
    border-inline-start-color: var(--ms-alert);
}

.ms-unit-mission.is-closed {
    opacity: 0.6;
    border-inline-start-color: var(--ms-panel-border);
}

.ms-unit-mission-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ms-unit-mission-status {
    color: var(--ms-warn);
    font-size: 0.78rem;
    font-weight: 700;
}

.ms-unit-mission-objective {
    margin: 0;
    color: var(--ms-text-dim);
    font-size: 0.85rem;
}

.ms-unit-mission-meta {
    color: var(--ms-text-mute);
    font-size: 0.75rem;
    display: flex;
    gap: 4px;
}

.ms-unit-mission-notes {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ms-text-dim);
    border-inline-start: 2px solid var(--ms-panel-border);
    padding-inline-start: 8px;
}

.ms-unit-mission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-unit-mission-actions .ms-unit-btn {
    flex: 1 1 30%;
    min-height: 44px;
    font-size: 0.85rem;
}

/* ── chat ──────────────────────────────────────────────────────────────── */

.ms-unit-chat {
    height: 100%;
    padding-block-end: 0;
    gap: 8px;
}

.ms-unit-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ms-unit-help-btn {
    min-height: 40px;
    font-size: 0.82rem;
}

.ms-unit-help-confirm {
    background: color-mix(in srgb, var(--ms-ok) 15%, transparent);
    border: 1px solid var(--ms-ok);
    color: var(--ms-ok-bright, var(--ms-ok));
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
}

.ms-unit-chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 4px;
}

.ms-unit-msg {
    max-width: 82%;
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ms-unit-msg.from-me {
    align-self: flex-end;
    background: color-mix(in srgb, var(--ms-accent) 22%, var(--ms-panel));
    border: 1px solid color-mix(in srgb, var(--ms-accent) 40%, transparent);
    border-end-end-radius: 4px;
}

.ms-unit-msg.from-cc {
    align-self: flex-start;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-end-start-radius: 4px;
}

.ms-unit-msg-sender {
    font-size: 0.7rem;
    color: var(--ms-accent);
    font-weight: 700;
    margin-block-end: 2px;
}

.ms-unit-msg-photo {
    max-width: 100%;
    border-radius: 10px;
    margin-block-end: 4px;
    display: block;
}

.ms-unit-msg-time {
    font-size: 0.65rem;
    color: var(--ms-text-mute);
    text-align: end;
    margin-block-start: 2px;
}

.ms-unit-chat-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 8px;
    border-block-start: 1px solid var(--ms-panel-border);
    background: var(--ms-bg);
    position: sticky;
    inset-block-end: 0;
}

.ms-unit-chat-input {
    flex: 1;
    min-height: 46px;
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    border-radius: 999px;
    padding-inline: 16px;
    color: var(--ms-text);
    font-size: 1rem;
    font-family: inherit;
}

.ms-unit-chat-input:focus {
    outline: 2px solid var(--ms-accent);
}

.ms-unit-send-btn,
.ms-unit-attach-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.ms-unit-send-btn {
    background: var(--ms-accent);
    border: none;
    color: var(--ms-bg);
}

.ms-unit-send-btn:disabled {
    opacity: 0.45;
}

/* RTL: the send arrow must point toward the start of the conversation flow. */
[dir="rtl"] .ms-unit-send-btn svg {
    transform: scaleX(-1);
}

.ms-unit-attach-btn {
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    color: var(--ms-text-dim);
}

.ms-unit-attach-btn input[type="file"] {
    display: none;
}

/* ── profile ───────────────────────────────────────────────────────────── */

.ms-unit-profile-id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ms-unit-profile-id > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ms-unit-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ms-accent) 25%, var(--ms-bg2));
    color: var(--ms-accent);
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
}

.ms-unit-profile-type {
    color: var(--ms-text-dim);
    font-size: 0.8rem;
}

.ms-unit-edit-link {
    color: var(--ms-accent);
    font-size: 0.8rem;
    text-decoration: none;
}

.ms-unit-profile-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ms-text-dim);
    font-size: 0.8rem;
}

.ms-unit-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ms-text-mute);
}

.ms-unit-status-dot.st-patrol { background: var(--ms-ok); }
.ms-unit-status-dot.st-intercepting { background: var(--ms-warn); }
.ms-unit-status-dot.st-standby,
.ms-unit-status-dot.st-returning { background: var(--ms-accent); }
.ms-unit-status-dot.st-offline { background: var(--ms-text-mute); }

/* ── Avatar upload + ranking (customer ask 2026-06-12) ── */

.ms-unit-avatar-upload {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.ms-unit-avatar-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.ms-unit-avatar-upload img {

/* ════════════════════════════════════════════════════════════════════════
   #mobile-polish — wizard, SOS hold, weather chip, skeletons, pills,
   lightbox, offline chip. Tokens + logical properties only (RTL parity);
   every animation honors prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── onboarding wizard ─────────────────────────────────────────────────── */

.ms-unit-wiz-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ms-unit-wiz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ms-panel-border);
    transition: background 200ms ease, transform 200ms ease;
}

.ms-unit-wiz-dot.is-current {
    background: var(--ms-accent);
    transform: scale(1.35);
}

.ms-unit-wiz-dot.is-done {
    background: color-mix(in srgb, var(--ms-accent) 55%, var(--ms-panel-border));
}

.ms-unit-wiz-step {
    animation: ms-unit-step-in 280ms ease-out;
}

@keyframes ms-unit-step-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ms-unit-wiz-nav {
    display: flex;
    gap: 10px;
}

.ms-unit-wiz-nav .ms-unit-btn {
    flex: 1;
}

/* Craft-type cards — big touch targets, the selected one glows. */
.ms-unit-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ms-unit-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    min-height: 84px;
    border-radius: 12px;
    border: 1.5px solid var(--ms-panel-border);
    background: var(--ms-bg2);
    color: var(--ms-text-dim);
    font-size: 0.82rem;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 160ms ease, color 160ms ease,
                box-shadow 160ms ease, transform 160ms ease;
}

.ms-unit-type-card:active {
    transform: scale(0.97);
}

.ms-unit-type-card.is-selected {
    border-color: var(--ms-accent);
    color: var(--ms-accent);
    box-shadow: 0 0 0 1px var(--ms-accent),
                0 0 16px color-mix(in srgb, var(--ms-accent) 25%, transparent);
}

/* Fuel/battery level feedback — recolours track + value via accent-color
   (no directional gradients: the #234 RTL slider trap). */
.ms-unit-slider.lvl-low input[type="range"] { accent-color: var(--ms-alert); }
.ms-unit-slider.lvl-mid input[type="range"] { accent-color: var(--ms-warn); }
.ms-unit-slider.lvl-ok  input[type="range"] { accent-color: var(--ms-ok); }
.ms-unit-slider.lvl-low strong { color: var(--ms-alert); }
.ms-unit-slider.lvl-mid strong { color: var(--ms-warn); }
.ms-unit-slider.lvl-ok  strong { color: var(--ms-ok); }

/* Success beat — shield draws its check, rings burst once. */
.ms-unit-wiz-success {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-block: 48px 32px;
    text-align: center;
    color: var(--ms-text);
}

.ms-unit-wiz-success h2 {
    margin: 12px 0 0;
    font-size: 1.3rem;
}

.ms-unit-wiz-success p {
    margin: 0;
    color: var(--ms-text-dim);
    font-size: 0.9rem;
}

.ms-unit-wiz-shield {
    color: var(--ms-ok);
    animation: ms-unit-shield-pop 480ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes ms-unit-shield-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.ms-unit-wiz-check {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: ms-unit-check-draw 400ms ease-out 320ms forwards;
}

@keyframes ms-unit-check-draw {
    to { stroke-dashoffset: 0; }
}

.ms-unit-wiz-burst {
    position: absolute;
    inset-block-start: 72px;
    inset-inline-start: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ms-unit-wiz-burst i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ms-accent);
    opacity: 0;
    animation: ms-unit-burst 900ms ease-out 350ms;
}

.ms-unit-wiz-burst i:nth-child(2n) { background: var(--ms-ok); }
.ms-unit-wiz-burst i:nth-child(3n) { background: var(--ms-warn); }
.ms-unit-wiz-burst i:nth-child(1) { --bx: -64px; --by: -30px; }
.ms-unit-wiz-burst i:nth-child(2) { --bx: -40px; --by: -58px; }
.ms-unit-wiz-burst i:nth-child(3) { --bx: -14px; --by: -72px; }
.ms-unit-wiz-burst i:nth-child(4) { --bx: 14px;  --by: -72px; }
.ms-unit-wiz-burst i:nth-child(5) { --bx: 40px;  --by: -58px; }
.ms-unit-wiz-burst i:nth-child(6) { --bx: 64px;  --by: -30px; }
.ms-unit-wiz-burst i:nth-child(7) { --bx: -54px; --by: 8px; }
.ms-unit-wiz-burst i:nth-child(8) { --bx: 54px;  --by: 8px; }

@keyframes ms-unit-burst {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-wiz-step,
    .ms-unit-wiz-shield { animation: none; }
    .ms-unit-wiz-check { animation-duration: 1ms; animation-delay: 0ms; }
    .ms-unit-wiz-burst i { animation: none; }
}

/* ── SOS hold-to-arm ───────────────────────────────────────────────────── */

.ms-unit-fab-sos {
    position: relative;
}

.ms-unit-fab-sos span {
    position: relative;
    z-index: 1;
}

.ms-unit-sos-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.ms-unit-avatar-cam {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    font-size: 12px;
    line-height: 1;
    background: var(--ms-panel-solid, var(--ms-panel));
    border: 1px solid var(--ms-panel-border);
    border-radius: 50%;
    padding: 2px;
    z-index: 1;
}

.ms-unit-rank-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
}
.ms-unit-rank-icon { font-size: 28px; line-height: 1; }
.ms-unit-rank-badge strong { display: block; font-size: 15px; }
.ms-unit-rank-badge span:not(.ms-unit-rank-icon) {
    color: var(--ms-text-dim);
    font-size: 12px;
}
.ms-unit-rank-badge.rank-commander { border-color: var(--ms-warn-strong, var(--ms-warn)); }
.ms-unit-rank-badge.rank-senior    { border-color: var(--ms-nato-friend, var(--ms-own)); }

.ms-unit-rank-stats {
    display: flex;
    gap: 14px;
    margin-block-start: 10px;
    font-size: 13px;
    color: var(--ms-text-dim);
}

.ms-unit-card-sub {
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-text-dim);
}

.ms-unit-leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-unit-leaderboard li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
}
.ms-unit-leaderboard li.me {
    background: var(--ms-panel);
    border: 1px solid var(--ms-nato-friend, var(--ms-own));
}
.ms-unit-lb-pos {
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: var(--ms-text-dim);
    font-variant-numeric: tabular-nums;
}
.ms-unit-lb-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ms-panel-border);
}
.ms-unit-lb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-unit-lb-rank { color: var(--ms-text-dim); font-size: 11px; }
.ms-unit-lb-pts { font-weight: 700; font-variant-numeric: tabular-nums; }

    transform: rotate(-90deg);
    pointer-events: none;
}

.ms-unit-sos-ring circle {
    fill: none;
    stroke: var(--ms-bg);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 154;
    stroke-dashoffset: 154;
}

/* The 3 s arm: the ring fills linearly while the finger stays down. */
.ms-unit-fab-sos.arming {
    transform: scale(1.06);
}

.ms-unit-fab-sos.arming .ms-unit-sos-ring circle {
    transition: stroke-dashoffset 3s linear;
    stroke-dashoffset: 0;
}

.ms-unit-sos-hint {
    position: absolute;
    inset-block-end: 84px;
    inset-inline: 24px;
    z-index: 6;
    text-align: center;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--ms-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    animation: ms-unit-banner-in 220ms ease-out;
}

/* Full-screen confirmation — covers everything for a beat. */
.ms-unit-sos-confirm {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--ms-alert) 18%, var(--ms-bg));
    color: var(--ms-alert);
    animation: ms-unit-sos-flash 360ms ease-out;
}

.ms-unit-sos-confirm svg {
    animation: ms-unit-shield-pop 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.ms-unit-sos-confirm strong {
    font-size: 1.5rem;
    letter-spacing: 0.08em;
}

.ms-unit-sos-confirm span {
    color: var(--ms-text);
    font-size: 0.9rem;
    max-width: 280px;
    text-align: center;
}

@keyframes ms-unit-sos-flash {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-sos-confirm,
    .ms-unit-sos-confirm svg { animation: none; }
}

/* ── weather chip + panel ──────────────────────────────────────────────── */

.ms-unit-wx {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ms-unit-wx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ms-text);
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ms-unit-wx.is-open .ms-unit-wx-chip {
    border-color: var(--ms-accent);
}

.ms-unit-wx-panel {
    min-width: 200px;
    background: var(--ms-panel);
    border: 1px solid var(--ms-panel-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    animation: ms-unit-banner-in 200ms ease-out;
}

.ms-unit-wx-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--ms-text-dim);
}

.ms-unit-wx-row strong {
    color: var(--ms-text);
    font-variant-numeric: tabular-nums;
}

/* ── offline chip (pure DOM, survives a dead circuit) ──────────────────── */

.ms-unit-offline {
    position: fixed;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 8px);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 200;
    background: var(--ms-panel);
    border: 1px solid var(--ms-warn);
    color: var(--ms-warn);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-family: var(--ms-font-ui);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

[dir="rtl"] .ms-unit-offline {
    translate: 50% 0;
}

/* ── segmented filter (missions) ───────────────────────────────────────── */

.ms-unit-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--ms-bg2);
    border: 1px solid var(--ms-panel-border);
    border-radius: 12px;
    padding: 4px;
}

.ms-unit-seg-btn {
    min-height: 38px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ms-text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 160ms ease, color 160ms ease;
}

.ms-unit-seg-btn.is-active {
    background: var(--ms-panel);
    color: var(--ms-accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ── mission status pills + update pulse ───────────────────────────────── */

.ms-unit-status-pill {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    background: color-mix(in srgb, var(--ms-warn) 16%, transparent);
    color: var(--ms-warn);
    border: 1px solid color-mix(in srgb, var(--ms-warn) 45%, transparent);
}

.ms-unit-status-pill.st-enroute,
.ms-unit-status-pill.st-onstation {
    background: color-mix(in srgb, var(--ms-accent) 16%, transparent);
    color: var(--ms-accent);
    border-color: color-mix(in srgb, var(--ms-accent) 45%, transparent);
}

.ms-unit-status-pill.st-completed {
    background: color-mix(in srgb, var(--ms-ok) 16%, transparent);
    color: var(--ms-ok);
    border-color: color-mix(in srgb, var(--ms-ok) 45%, transparent);
}

.ms-unit-status-pill.st-aborted {
    background: color-mix(in srgb, var(--ms-alert) 16%, transparent);
    color: var(--ms-alert);
    border-color: color-mix(in srgb, var(--ms-alert) 45%, transparent);
}

.ms-unit-mission.is-updated {
    animation: ms-unit-card-pulse 1.4s ease-out;
}

@keyframes ms-unit-card-pulse {
    0%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ms-accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-mission.is-updated { animation: none; }
}

/* ── skeleton loaders ──────────────────────────────────────────────────── */

.ms-unit-skeleton {
    pointer-events: none;
}

.ms-unit-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--ms-bg2) 25%,
        color-mix(in srgb, var(--ms-text-mute) 18%, var(--ms-bg2)) 42%,
        var(--ms-bg2) 60%);
    background-size: 220% 100%;
    animation: ms-unit-shimmer 1.4s linear infinite;
}

.ms-unit-skel-line.w-25 { width: 25%; }
.ms-unit-skel-line.w-40 { width: 40%; }
.ms-unit-skel-line.w-50 { width: 50%; }
.ms-unit-skel-line.w-60 { width: 60%; }
.ms-unit-skel-line.w-80 { width: 80%; }

.ms-unit-skel-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ms-bg2);
    animation: ms-unit-shimmer 1.4s linear infinite;
    margin-inline: auto;
}

.ms-unit-msg.ms-unit-skeleton {
    min-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@keyframes ms-unit-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-skel-line,
    .ms-unit-skel-avatar { animation: none; }
}

/* ── empty-state art ───────────────────────────────────────────────────── */

.ms-unit-empty-art {
    color: var(--ms-text-mute);
    margin-block-end: 6px;
}

.ms-unit-empty-wave {
    animation: ms-unit-empty-bob 3.2s ease-in-out infinite;
}

@keyframes ms-unit-empty-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-empty-wave { animation: none; }
}

/* ── chat: message entrance + lightbox ─────────────────────────────────── */

.ms-unit-msg {
    animation: ms-unit-msg-in 220ms ease-out;
}

@keyframes ms-unit-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ms-unit-msg { animation: none; }
}

.ms-unit-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.88);
    animation: ms-unit-sos-flash 180ms ease-out;
}

.ms-unit-lightbox img {
    max-width: 96vw;
    max-height: 88vh;
    border-radius: 10px;
    animation: ms-unit-lightbox-zoom 220ms ease-out;
}

@keyframes ms-unit-lightbox-zoom {
    from { transform: scale(0.92); }
    to   { transform: scale(1); }
}

.ms-unit-lightbox-close {
    position: absolute;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 14px);
    inset-inline-end: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--ms-panel-border);
    background: var(--ms-panel);
    color: var(--ms-text);
    font-size: 1rem;
}

/* ── profile hero + stats ──────────────────────────────────────────────── */

.ms-unit-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.ms-unit-avatar-lg {
    position: relative;
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

.ms-unit-avatar-dot {
    position: absolute;
    inset-block-end: 2px;
    inset-inline-end: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--ms-panel);
    background: var(--ms-text-mute);
}

.ms-unit-avatar-dot.st-patrol { background: var(--ms-ok); }
.ms-unit-avatar-dot.st-intercepting { background: var(--ms-warn); }
.ms-unit-avatar-dot.st-standby,
.ms-unit-avatar-dot.st-returning { background: var(--ms-accent); }
.ms-unit-avatar-dot.st-offline { background: var(--ms-text-mute); }

.ms-unit-profile-name {
    font-size: 1.1rem;
    margin-block-start: 6px;
}

.ms-unit-profile-hero .ms-unit-profile-meta {
    justify-content: center;
}

.ms-unit-stats {
    flex-direction: row;
    justify-content: space-around;
    gap: 4px;
}

.ms-unit-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.ms-unit-stat strong {
    font-size: 1.25rem;
    color: var(--ms-accent);
    font-variant-numeric: tabular-nums;
}

.ms-unit-stat span {
    font-size: 0.72rem;
    color: var(--ms-text-dim);
}

/* ── AIS mini-sheet (tap card on the unit map, customer 2026-06-12) ────────
   Rendered inside a MapLibre popup; the photo slot stays hidden until the
   lazy image actually loads, so photo-less small craft get a compact card. */
.ms-unit-ais-sheet {
    color: #0b1220;
    min-width: 160px;
    font-size: 13px;
    line-height: 1.4;
}
.ms-unit-ais-sheet .ms-unit-ais-photo {
    margin-bottom: 6px;
}
.ms-unit-ais-sheet .ms-unit-ais-photo img {
    display: block;
    width: 100%;
    max-height: 110px;
    object-fit: cover;
    border-radius: 6px;
}
.ms-unit-ais-meta {
    font-size: 11px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}


/* ── Mission accept / decline (customer 2026-06-13) ───────────────────────
   The accept button is THE action on a fresh assignment — full-width, big
   tap target. Decline opens a compact reason row beneath. */
.ms-unit-mission-acceptrow { display: flex; gap: 8px; }
.ms-unit-btn-accept {
    flex: 1 1 auto;
    font-size: 15px;
    padding-block: 12px;
}
.ms-unit-mission-declinebox {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.ms-unit-mission-declinebox input {
    flex: 1 1 auto;
    background: var(--ms-bg);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
}
.ms-unit-accept-confirm { color: var(--ms-ok, #34d399); }

/* ── Mobile boarding + capabilities + tree (military reporting) ───── */
.ms-unit-board-status { display: flex; flex-direction: column; gap: .25rem; border-inline-start: 4px solid var(--ms-panel-border); }
.ms-unit-board-status.out { border-inline-start-color: var(--ms-warn, #d8a200); }
.ms-unit-board-status.overdue { border-inline-start-color: var(--ms-alert, #e23b3b); }
.ms-unit-board-status.ashore { border-inline-start-color: var(--ms-ok, #3a9d5a); }
.ms-unit-board-boat { font-size: 1.15rem; font-weight: 700; }
.ms-unit-board-boat.sm { font-size: 1rem; }
.ms-unit-board-line { font-size: .9rem; }
.ms-unit-board-line.dim { color: var(--ms-text-dim); font-size: .82rem; }
.ms-unit-board-line.alert { color: var(--ms-alert, #e23b3b); font-weight: 600; }
.ms-unit-board-ok { color: var(--ms-ok, #3a9d5a); font-weight: 600; }
.ms-unit-board-cta { width: 100%; min-height: 52px; font-size: 1.05rem; }
.ms-unit-board-row { display: flex; flex-direction: column; gap: .25rem; }
.ms-unit-board-row.overdue { border-inline-start: 4px solid var(--ms-alert, #e23b3b); }
.ms-unit-board-actions { display: flex; gap: .6rem; margin-top: .5rem; }
.ms-unit-board-actions .ms-unit-btn { flex: 1; min-height: 48px; }

.ms-unit-slider { width: 100%; height: 40px; accent-color: var(--ms-accent); }

.ms-unit-caps-counter { align-items: center; text-align: center; }
.ms-unit-caps-big { font-size: 3rem; font-weight: 800; line-height: 1; }
.ms-unit-caps-of { font-size: 1.4rem; color: var(--ms-text-dim); font-weight: 500; }
.ms-unit-caps-readiness { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.ms-unit-caps-readiness .ms-unit-status-dot,
.ms-unit-status-dot.rd-operational { background: var(--ms-ok, #3a9d5a); }
.rd-operational .ms-unit-status-dot, .ms-unit-status-dot.rd-operational { background: var(--ms-ok, #3a9d5a); }
.rd-limited .ms-unit-status-dot, .ms-unit-status-dot.rd-limited { background: var(--ms-warn, #d8a200); }
.rd-standdown .ms-unit-status-dot, .ms-unit-status-dot.rd-standdown { background: var(--ms-alert, #e23b3b); }
.ms-unit-caps-equip { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--ms-panel-border); }
.ms-unit-caps-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.ms-unit-tree-list { padding: 0; }
.ms-unit-tree-row { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 48px;
    background: none; border: 0; border-bottom: 1px solid var(--ms-panel-border); color: inherit;
    text-align: start; padding: .5rem .75rem; cursor: pointer; }
.ms-unit-tree-row:active { background: var(--ms-panel-header); }
.ms-unit-tree-name { flex: 1; font-weight: 600; }

.ms-unit-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60;
    display: flex; align-items: flex-end; }
.ms-unit-sheet { width: 100%; background: var(--ms-panel); border-radius: 16px 16px 0 0; padding: 1rem 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 -6px 24px rgba(0,0,0,.35); }
.ms-unit-sheet-grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--ms-panel-border); margin-bottom: .25rem; }
.ms-unit-sheet-stats { display: flex; gap: 1.5rem; }
.ms-unit-sheet-stats .ms-unit-stat { display: flex; flex-direction: column; }
.ms-unit-sheet-stats .ms-unit-stat strong { font-size: 1.4rem; }