@tailwind components;
@tailwind utilities;

/* Build (no package.json — this is the whole toolchain):
     npx tailwindcss@3 -c tailwind.ui.config.js -i css/ui-tw-input.css        -o css/ui-tw.css --minify
   Then bump the ?v= on the three <link>s in _site_shell.html, dashboard.html
   and team_analytics.html. */

/* Restyles the real planner's composer panel (#missionSettings) and left rail
   (#missionRail) in place — same ids/classes/DOM planner-ui.js and main.js
   already bind to, only the look changes. Scoped to [data-composer-layout=
   "cards"] / #missionRail, which only the planner route renders, so the
   marketing-page hero simulator (same classes, no composer-layout attribute)
   is untouched.

   corePlugins.preflight is off (this file loads on top of the live site's
   own stylesheet, not a blank page), which also drops Tailwind's usual
   `border-style: solid` reset. Every element below that needs a visible
   border sets its own width + style explicitly via `border` — a bare
   `border-white/10` only sets color and stays invisible without it. */
@layer components {
    body.planner-body .planner-nav-wrapper {
        box-shadow: none;
    }

    #missionSettings[data-composer-layout="cards"] {
        @apply bg-panel shadow-2xl shadow-black/50 backdrop-blur-2xl;
        border: 0 !important;
        border-left: 1px solid rgb(255 255 255 / 0.1) !important;
        color: #e8eaf0;
        container-type: inline-size;
        container-name: mp-composer;
    }

    #missionSettings[data-composer-layout="cards"] .mp-desktop-panel-head {
        @apply bg-transparent;
        border: 0 !important;
    }
    #missionSettings[data-composer-layout="cards"] .ops-panel-title {
        @apply block text-[15px] leading-5 tracking-tight text-ink-fg font-semibold;
    }
    #missionSettings[data-composer-layout="cards"] .mp-panel-scroll {
        padding-bottom: 14px;
    }
    #missionSettings[data-composer-layout="cards"] .mp-panel-toggle {
        @apply text-ink-dim hover:bg-white/5 hover:text-ink-fg rounded-lg transition;
    }

    #missionSettings[data-composer-layout="cards"] .mp-composer-card {
        @apply bg-white/[0.06] border border-solid border-white/10 rounded-xl;
        position: relative;
        gap: 0;
        margin: 8px 10px 0;
        padding: 0 12px 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    #missionSettings[data-composer-layout="cards"] .mp-aircraft-row {
        gap: 4px;
        padding: 6px 12px 8px;
    }
    /* Issue 6: was `uppercase tracking-wide`, which put AIRCRAFT/SURVEY/TERRAIN
       in a third casing convention alongside "Customize survey" (title case)
       and "Side Overlap" etc (title case) — dropped so all composer labels
       read in the same normal case. */
    #missionSettings[data-composer-layout="cards"] .mp-section-title,
    #missionSettings[data-composer-layout="cards"] #aircraftLabel {
        @apply text-ink-2 font-semibold text-[11px] leading-4 normal-case tracking-normal;
    }

    #missionSettings[data-composer-layout="cards"] .mp-drone-select,
    #missionSettings[data-composer-layout="cards"] .mp-contour-select {
        @apply bg-ink border border-solid border-white/30 text-ink-fg rounded-lg focus:border-amber/70;
    }

    /* Every select in the composer (Aircraft, Capture mode, Contour interval/
       colour) is progressively enhanced by JS into a custom trigger button +
       listbox popover — the real <select> above is hidden (`aria-hidden`,
       `tabindex="-1"`) and invisible, so styling it alone (as above) does
       nothing visible. This is the widget that's actually on screen. */
    #missionSettings[data-composer-layout="cards"] .mp-style-select-trigger {
        @apply h-10 px-3 text-[13px] leading-[18px] font-semibold bg-ink border border-solid border-white/30 text-ink-fg rounded-lg hover:border-white/40 focus-visible:border-amber/70 transition;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-trigger[aria-expanded="true"] {
        @apply border-amber/60;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-chevron {
        @apply border-white/40;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-menu {
        @apply bg-panel border border-solid border-white/10 rounded-lg shadow-2xl shadow-black/50;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-card:has(.mp-style-select.is-open),
    #missionSettings[data-composer-layout="cards"] .mp-style-select.is-open {
        z-index: 40;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option {
        @apply text-[13px] leading-[18px] font-semibold text-ink-fg;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option:hover,
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option:focus-visible {
        @apply bg-white/[0.08] text-ink-fg;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option.is-selected {
        @apply bg-amber/10 text-amber;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option[disabled] {
        @apply text-ink-dim;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select-option small {
        @apply text-ink-dim;
    }

    /* Mission stats tiles */
    #missionSettings[data-composer-layout="cards"] .mp-stat {
        @apply bg-white/[0.07] rounded-lg;
    }
    #missionSettings[data-composer-layout="cards"] .mp-stat-primary {
        @apply bg-amber/10;
    }
    #missionSettings[data-composer-layout="cards"] .mp-stat-val {
        @apply text-ink-fg font-bold;
    }
    #missionSettings[data-composer-layout="cards"] .mp-stat-primary .mp-stat-val {
        @apply text-amber;
    }
    #missionSettings[data-composer-layout="cards"] .mp-stat-lbl,
    #missionSettings[data-composer-layout="cards"] .mp-stat-group-title {
        @apply text-ink-2;
    }
    #missionSettings[data-composer-layout="cards"] .mp-stats-toggle {
        @apply text-ink-dim hover:text-ink-fg transition;
    }

    /* Accordion headers */
    #missionSettings[data-composer-layout="cards"] .mp-accordion-head {
        @apply hover:bg-white/[0.06] transition;
        min-height: 44px;
        width: calc(100% + 24px);
        margin-inline: -12px;
        padding-inline: 12px;
        border-radius: 11px;
    }
    #missionSettings[data-composer-layout="cards"] .mp-accordion-summary {
        @apply text-ink-dim text-[11px] leading-4;
    }
    #missionSettings[data-composer-layout="cards"] .mp-accordion-chevron {
        @apply text-ink-dim transition-transform;
    }
    #missionSettings[data-composer-layout="cards"] .mp-accordion-body {
        gap: 10px;
        padding: 6px 0 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional {
        padding-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-card:has(> .mp-accordion-head[aria-expanded="false"]) {
        padding-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional .mp-accordion-body {
        gap: 0;
        padding: 0 0 8px;
    }
    /* Safety's body holds plain label+select fields, not the split-toggle
       rows the shared "optional" gap:0 above is tuned for — those rows draw
       their own spacing, but fields need it back or they read as fused to
       the next field's label. */
    #missionSettings[data-composer-layout="cards"] #settingsSafetyBody {
        gap: 10px;
    }
    /* Issue 2: no open-state override here on purpose. The chevron is a
       border-fold trick (base CSS: two borders + `transform: translateY(-2px)
       rotate(45deg)` closed, `translateY(2px) rotate(225deg)` open) — with
       corePlugins.preflight off, Tailwind's `rotate-90` utility depends on
       `--tw-translate-x`/`--tw-rotate`/etc custom properties that preflight
       normally initializes on `*`. Unset, the whole `transform` shorthand
       computes as invalid and resolves to `none`, which killed the fold and
       drew a corner bracket instead of a caret. Removing the override lets
       the base rule's own (valid, already-correct) transform run unmolested. */

    /* Field rows / static values */
    #missionSettings[data-composer-layout="cards"] .mp-field label,
    #missionSettings[data-composer-layout="cards"] .mp-field > span:first-child,
    #missionSettings[data-composer-layout="cards"] .mp-ctrl > .mp-lbl,
    #missionSettings[data-composer-layout="cards"] .mp-split-field > span:first-child,
    #missionSettings[data-composer-layout="cards"] .mp-split-toggle > span {
        @apply text-ink-2 font-medium text-[11px];
        line-height: 16px;
        letter-spacing: 0;
        text-transform: none;
    }
    #missionSettings[data-composer-layout="cards"] .mp-field,
    #missionSettings[data-composer-layout="cards"] .mp-lbl,
    #missionSettings[data-composer-layout="cards"] .mp-marker-setting-label,
    #missionSettings[data-composer-layout="cards"] .mp-stat-lbl {
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
    }
    #missionSettings[data-composer-layout="cards"] .mp-static-value {
        @apply flex items-center gap-2 min-h-10 px-3 bg-ink border border-solid border-white/10 rounded-lg;
    }
    #missionSettings[data-composer-layout="cards"] .mp-static-value small {
        @apply text-[10px] leading-4 font-medium text-ink-dim;
    }
    #missionSettings[data-composer-layout="cards"] #mappingStyleValue {
        @apply text-[13px] leading-[18px] text-ink-fg font-semibold;
    }

    /* Spin inputs (side overlap, speed, altitude, margin, direction…) */
    #missionSettings[data-composer-layout="cards"] .mp-spin-wrap {
        @apply bg-ink border border-solid border-white/30 rounded-lg;
        position: relative;
        width: 82px;
        height: 32px;
        display: block;
        justify-self: start;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-wrap:focus-within {
        @apply border-amber/60;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin {
        @apply text-[13px] leading-[18px] bg-transparent text-ink-fg font-medium;
        width: 100%;
        height: 32px;
        padding: 3px 40px 3px 8px;
        text-align: left;
        appearance: textfield;
        -moz-appearance: textfield;
    }
    #missionSettings[data-composer-layout="cards"] .mp-unit {
        @apply text-[10px] leading-4 text-ink-dim;
        position: absolute;
        top: 50%;
        right: 22px;
        width: auto;
        pointer-events: none;
        transform: translateY(-50%);
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin::-webkit-inner-spin-button,
    #missionSettings[data-composer-layout="cards"] .mp-spin::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-step {
        @apply text-ink-dim hover:bg-white/5 hover:text-amber transition;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    /* Ghost steppers: faint at rest (so the reserved column doesn't read as a
       blank gap), full strength on hover/focus. */
    #missionSettings[data-composer-layout="cards"] .mp-spin-stepper {
        @apply opacity-60 transition-opacity;
        position: absolute;
        inset: 0 0 0 auto;
        width: 24px;
        display: grid;
        grid-template-rows: 1fr 1fr;
        overflow: hidden;
        border-left: 1px solid rgba(255,255,255,.06);
        border-radius: 0 7px 7px 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-wrap:hover .mp-spin-stepper,
    #missionSettings[data-composer-layout="cards"] .mp-spin-wrap:focus-within .mp-spin-stepper {
        @apply opacity-100;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-step:first-child {
        border-bottom: 1px solid rgba(255,255,255,.05);
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-step::before {
        content: "";
        width: 0;
        height: 0;
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-step[data-dir="1"]::before {
        border-bottom: 4px solid currentColor;
    }
    #missionSettings[data-composer-layout="cards"] .mp-spin-step[data-dir="-1"]::before {
        border-top: 4px solid currentColor;
    }

    /* Segmented Auto/Manual */
    #missionSettings[data-composer-layout="cards"] .mp-seg {
        @apply bg-ink rounded-lg;
    }
    #missionSettings[data-composer-layout="cards"] .mp-seg-btn {
        @apply text-[11px] leading-4 font-semibold text-ink-dim rounded-md transition;
    }
    #missionSettings[data-composer-layout="cards"] .mp-seg-btn[aria-pressed="true"] {
        @apply bg-amber text-ink;
    }

    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl {
        min-height: 60px;
        gap: 6px;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-lbl {
        white-space: nowrap;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-spin-wrap {
        height: 38px;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-spin {
        height: 38px;
        padding: 3px 30px 3px 8px;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-unit {
        right: auto;
        left: calc(12px + var(--value-ch, 2) * .62em);
    }
    /* Exact values keep the compact two-column controls readable. The hidden
       range inputs remain in the DOM because main.js uses them for value sync. */
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl:not(.mp-ctrl-direction):not(.mp-ctrl-seg) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "label" "value" !important;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl:not(.mp-ctrl-direction):not(.mp-ctrl-seg) > .mp-spin-wrap {
        grid-area: value;
        width: 100% !important;
        min-width: 0;
        justify-self: stretch;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction,
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-seg {
        @apply gap-x-3;
        grid-column: 1 / -1;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        grid-template-areas: "label auto" !important;
        row-gap: 8px;
        min-height: 0;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction .mp-seg-btn,
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-seg .mp-seg-btn {
        @apply px-1.5 text-[11px] leading-4 text-center;
        min-width: 56px;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction > .mp-seg,
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-seg > .mp-seg {
        grid-area: auto;
        justify-self: end;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction.is-auto > .mp-spin-wrap {
        display: none;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction:not(.is-auto) {
        grid-template-columns: minmax(0, 1fr) 82px max-content !important;
        grid-template-areas: "label value auto" !important;
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction:not(.is-auto) > .mp-spin-wrap {
        grid-area: value;
        width: 82px !important;
    }
    /* Below this the panel is too narrow for label + 82px spinner + seg
       control on one line (clamp floor is 248px, and the homepage demo pins
       the panel at 240px) — the label truncates to nothing. Give the degree
       spinner its own full-width line instead, matching the Auto-mode row
       shape above it. */
    @container mp-composer (max-width: 300px) {
        #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction:not(.is-auto) {
            grid-template-columns: max-content minmax(0, 1fr) !important;
            grid-template-areas:
                "label auto"
                "value value" !important;
        }
        #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-ctrl-direction:not(.is-auto) > .mp-spin-wrap {
            width: 100% !important;
            justify-self: stretch;
        }
    }

    /* Reverse-route row. Issue 8 (nesting pass): this used to carry its own
       4-side border box, making it a third bordered box floating inside the
       card alongside the presets and split sub-body. Dropped to a plain row —
       the card's own border is enough framing — keeping only the hover tint
       so it still reads as interactive. */
    #missionSettings[data-composer-layout="cards"] .mp-route-action {
        @apply hover:bg-white/[0.06] rounded-lg transition;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        min-height: 40px;
        margin-top: 0;
        padding: 8px 4px;
        border-top: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-route-action-copy strong {
        @apply text-[11px] leading-4 text-ink-fg font-semibold;
    }
    #missionSettings[data-composer-layout="cards"] .mp-route-action-icon {
        @apply text-ink-dim;
        width: 20px;
        height: 20px;
    }

    #missionSettings[data-composer-layout="cards"] .mp-mapping-style-field,
    #missionSettings[data-composer-layout="cards"] #contourBody .mp-split-field {
        min-height: 48px;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-items: stretch;
        gap: 6px;
        border-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-modes {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-mode {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 10px;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-mode:has(> .mp-ctrl[hidden]):not(:has(> .mp-ctrl:not([hidden]))) {
        grid-template-columns: minmax(0, 1fr);
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-modes:has(#corridorWidthControl[hidden]):has(#frontOverlapControl[hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="flight"] .mp-survey-mode > .mp-ctrl {
        min-height: 0;
        padding: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-style-select,
    #missionSettings[data-composer-layout="cards"] .mp-style-select-trigger,
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="drone"] .mp-drone-select-wrap,
    #missionSettings[data-composer-layout="cards"] [data-settings-accordion="drone"] .mp-drone-select,
    #missionSettings[data-composer-layout="cards"] #contourBody select,
    #missionSettings[data-composer-layout="cards"] #contourBody .mp-drone-select-wrap {
        width: 100% !important;
        min-width: 0;
    }
    #missionSettings[data-composer-layout="cards"] #contourBody:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    #missionSettings[data-composer-layout="cards"] #terrainFollowBody .mp-split-field {
        grid-template-columns: minmax(0, 1fr) 82px;
    }
    #missionSettings[data-composer-layout="cards"] #contourBody:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    #missionSettings[data-composer-layout="cards"] #terrainFollowBody .mp-split-field {
        grid-template-columns: minmax(0, 1fr) 82px;
    }

    /* Revealed fields remain visibly attached to the switch that owns them. */
    #missionSettings[data-composer-layout="cards"] .mp-survey-split {
        @apply border-t border-r-0 border-b-0 border-l-0 border-solid border-white/10;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 4px 4px;
        border-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle > span {
        grid-column: 1;
        grid-row: 1;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle > input {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 4px 4px;
        border-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle > span {
        grid-column: 1;
        grid-row: 1;
    }
    #missionSettings[data-composer-layout="cards"] .mp-survey-split > .mp-split-toggle > input {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    #missionSettings[data-composer-layout="cards"] .mp-split-body {
        @apply border-0 pl-0 ml-0;
        gap: 0;
        margin-top: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-split-toggle:has(> input:checked) + .mp-split-body:not([hidden]) {
        margin: 0 0 8px 8px !important;
        padding: 2px 0 4px 12px !important;
        border-left: 2px solid rgb(240 165 0 / 0.45) !important;
    }
    #missionSettings[data-composer-layout="cards"] .mp-split-toggle:has(+ .mp-split-body) > input:checked + span {
        color: #F0A500 !important;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional .mp-split-toggle {
        min-height: 44px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: center;
        gap: 10px;
        padding: 4px 0;
        border-bottom: 0;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional .mp-split-toggle > span {
        grid-column: 1;
        grid-row: 1;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional .mp-split-toggle > input {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    #missionSettings[data-composer-layout="cards"] .mp-composer-optional .mp-split-field {
        min-height: 44px;
    }
    #missionSettings[data-composer-layout="cards"] .mp-split-body .mp-split-field > .mp-spin-wrap {
        flex: 0 0 82px;
        width: 82px !important;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-items: stretch;
        gap: 5px;
        min-width: 0;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-field > .mp-spin-wrap {
        width: 100% !important;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-warning {
        grid-column: 1 / -1;
        margin: 0;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-items: stretch;
        gap: 5px;
        min-width: 0;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-field > .mp-spin-wrap {
        width: 100% !important;
    }
    #missionSettings[data-composer-layout="cards"] #splitBody .mp-split-warning {
        grid-column: 1 / -1;
        margin: 0;
    }

    /* Issue 4: role=switch toggles (#terrainFollowToggle, #contourToggle,
       #splitToggle, #reverseRouteBtn) are all `.mp-split-toggle input`. Base
       CSS's checked state is `radial-gradient(dot), var(--blue)` — override
       just the solid-color layer to amber, keep the same dot gradient. */
    #missionSettings[data-composer-layout="cards"] .mp-split-toggle input:checked {
        background: radial-gradient(circle at 29px 50%, #fff 0 7px, transparent 7.5px), #F0A500 !important;
        border-color: transparent !important;
    }

}

/* ---------------------------------------------------------------------
   Left rail (#missionRail) — same dark/amber system as the composer, so
   the two panels read as one product instead of two different apps. */
@layer components {
    #missionRail {
        @apply bg-panel shadow-2xl shadow-black/50 backdrop-blur-2xl;
        border: 0 !important;
        border-right: 1px solid rgb(255 255 255 / 0.1) !important;
    }
    #missionRail .ops-panel-title {
        @apply text-ink-fg font-semibold;
    }
    #missionRail .ui-search {
        @apply bg-ink border border-solid border-white/10 rounded-lg;
    }
    #missionRail .ui-search input {
        @apply text-ink-fg placeholder:text-ink-dim;
    }
    #missionRail .ui-search svg {
        @apply text-ink-dim;
    }
    #missionRail .ui-back {
        @apply text-ink-dim hover:text-ink-fg transition;
    }
    #missionRail .ops-rail-toggle {
        @apply text-ink-dim hover:bg-white/5 hover:text-ink-fg rounded-lg transition;
    }

    #missionRail #btnNewMissionRail {
        @apply bg-amber text-ink border-0 hover:bg-amber-h transition;
    }
    #missionRail .ops-select-btn {
        @apply text-ink-dim border border-solid border-white/10 hover:bg-white/5 hover:text-ink-fg transition;
    }

    #missionRail .ops-mission-list {
        @apply gap-2.5;
    }
    #missionRail .ops-mission-card {
        @apply bg-white/[0.06] border border-solid border-white/10 rounded-xl mb-2.5 transition;
    }
    #missionRail .ops-mission-card:hover {
        @apply bg-white/[0.09];
    }
    #missionRail .ops-mission-card.active {
        @apply border-amber/40 bg-amber/[0.06];
    }
    #missionRail .ui-thumb {
        @apply text-ink-dim;
    }
    #missionRail .ops-mission-card.active .ui-thumb {
        @apply text-amber;
    }
    #missionRail .ops-mission-name {
        @apply text-ink-fg font-medium;
    }
    #missionRail .ops-mission-meta,
    #missionRail .ops-mission-stats {
        @apply text-ink-dim;
    }
    #missionRail .ops-mission-active-name input {
        @apply bg-transparent text-ink-fg font-semibold;
    }
    #missionRail #btnRenameMission,
    #missionRail .ops-mission-delete {
        @apply text-ink-dim hover:text-ink-fg transition;
    }
    #missionRail .ops-mission-delete:hover {
        @apply hover:text-red-400;
    }

    /* "Live estimate" vitals card */
    #missionRail .ui-vitals {
        @apply bg-white/[0.07] border border-solid border-white/10 rounded-xl;
    }
    #missionRail .ui-vitals-scope {
        @apply text-ink-fg font-semibold;
    }
    #missionRail .ui-vitals-const {
        @apply text-ink-dim;
    }
    #missionRail .ui-vital dd {
        @apply text-ink-fg font-bold;
    }
    #missionRail .ui-vital dt {
        @apply text-ink-dim;
    }

    #missionRail .ops-flight-nav {
        @apply gap-2;
    }
    #missionRail .ops-flight-nav button {
        @apply bg-white/[0.06] border border-solid border-white/10 rounded-lg transition;
    }
    #missionRail .ops-flight-nav button[aria-pressed="true"] {
        @apply border-amber/50 bg-amber/10;
    }
    #missionRail .ops-flight-nav-name {
        @apply text-ink-fg;
    }
    #missionRail .ops-flight-nav-meta {
        @apply text-ink-dim;
    }

    #missionRail .ops-mission-actions {
        @apply gap-2;
    }
    #missionRail .ops-mission-action {
        @apply bg-white/[0.06] border border-solid border-white/10 text-ink-fg rounded-lg hover:bg-white/[0.1] transition;
    }

    #missionRail .planner-validation {
        @apply bg-white/[0.07] border border-solid border-white/10 text-ink-2 rounded-lg;
    }
    #missionRail .planner-validation.is-blocked {
        @apply text-ink-dim;
    }
    #missionRail .planner-validation:not(.is-blocked) {
        @apply border-amber/40 text-amber;
    }

    /* Chrome the first colour pass skipped. Each of these still carried the
       old blue accent (or the site's default surface), which read as a second
       product next to the amber composer. */
    #missionRail .ops-panel-head {
        @apply bg-white/[0.03];
        border: 0 !important;
    }
    #missionRail .ui-search:focus-within {
        @apply border-amber/60;
    }
    /* Thumbnails are drawn as an inline <svg> path, so fill/stroke are set on
       the path itself rather than through a text colour. */
    #missionRail .ui-thumb path {
        fill: rgba(240,165,0,.16);
        stroke: #F0A500;
    }
    #missionRail .ui-thumb.is-empty path {
        fill: none;
        stroke: #667086;
    }
    #missionRail .ui-back:hover {
        @apply bg-white/5;
    }
    #missionRail .ui-back:focus-visible,
    #missionRail .ui-search input:focus-visible {
        @apply outline-amber/70;
    }
    #missionRail .ops-mission-check {
        @apply accent-amber;
    }
    #missionRail .ops-select-btn:hover {
        @apply border-white/20 bg-white/5 text-ink-fg;
    }
    #missionRail .ops-select-btn.is-active {
        @apply border-amber/60 bg-amber/10 text-amber;
    }

    #missionRail .ops-select-bar {
        @apply bg-panel border border-r-0 border-b-0 border-l-0 border-solid border-white/10;
    }
    #missionRail .ops-select-bar button {
        @apply text-ink-2 border border-solid border-white/15 rounded-lg hover:bg-white/5 hover:text-ink-fg transition;
    }
    #missionRail .ops-select-bar button.is-danger {
        @apply border-red-400/40 text-red-400;
    }
    #missionRail .ops-select-bar button.is-danger:hover {
        @apply bg-red-400/10 text-red-300;
    }
}

/* Collapsed-rail dock — it is the mission overview in its collapsed state, so
   it follows the rail's colours, not the old blue ones. */
@layer components {
    .ui-left-dock .ui-dock {
        @apply bg-ink;
        border: 0 !important;
        border-right: 1px solid rgb(255 255 255 / 0.1) !important;
    }
    .ui-left-dock .ui-dock > button:hover {
        @apply bg-white/5 text-ink-fg;
    }
    .ui-left-dock .ui-dock > button[aria-pressed="true"] {
        @apply border-amber/50 bg-amber/10 text-amber;
    }
    .ui-left-dock .ui-dock > button:focus-visible {
        @apply outline-amber/70;
    }
    .ui-left-dock .ui-dock hr {
        @apply border border-r-0 border-b-0 border-l-0 border-solid border-white/10;
    }
}

/* Header — Analytics only renders on the planner route; .btn-ghost is scoped
   via body class since the marketing header reuses it for "Sign in". */
@layer components {
    body.planner-body .nav-actions > .btn-ghost {
        @apply border border-solid border-white/15 text-ink-fg hover:bg-white/5 transition;
    }
    /* Account avatar still carried the old blue accent tint. */
    body.planner-body .planner-menu-trigger {
        @apply !bg-amber/10 !text-amber !border !border-solid !border-amber/20;
    }
    body.planner-body .planner-menu-trigger:hover {
        @apply !bg-amber/15;
    }
}

/* ---------------------------------------------------------------------
   Dashboard (/dashboard/) — same dark/amber system as the planner. This
   stylesheet now loads on the dashboard too, so its theming lives here
   rather than half here and half in styles.css. Layout, spacing and the
   grids all still come from styles.css; these rules only recolour. */
@layer components {
    /* Page ground sits above the panel colour, not below it, so the missions
       panel reads as raised. #0b0d12 (ink) was too dark for a full page. */
    body.dashboard-body {
        @apply bg-[#0f1218];
        background-image: radial-gradient(circle at 50% -20%, rgba(240,165,0,.09), transparent 38%);
    }
    body.dashboard-body .dashboard-nav-wrapper {
        @apply bg-[#0c0f14] border border-t-0 border-r-0 border-l-0 border-solid border-white/10;
    }

    /* .btn-primary is blue site-wide (marketing CTAs), so the amber is scoped
       to this page rather than changed at the source. */
    body.dashboard-body .btn-primary {
        @apply bg-amber text-ink border-0;
    }
    body.dashboard-body .btn-primary:hover {
        @apply bg-amber-h;
    }
    body.dashboard-body .btn-ghost {
        @apply border border-solid border-white/15 text-ink-2 hover:text-ink-fg hover:bg-white/5 transition;
    }

    /* Three levels of depth, each a step lighter than the one under it:
       page #0f1218 < panel #1a1f29 < inset controls #0f1319. A translucent
       panel over a lighter ground composited *darker* than the ground, which
       made the card read as a hole instead of a raised surface. */
    body.dashboard-body .missions-panel {
        @apply bg-[#1a1f29] border border-solid border-white/[0.09] rounded-2xl;
    }
    body.dashboard-body .missions-panel-heading {
        @apply border border-t-0 border-r-0 border-l-0 border-solid border-white/10;
    }
    /* The dashboard's controls sit in this band and the column header sits
       directly under it carrying its own rule, so the band gives its up --
       but only when that header is there. The empty state has none. */
    body.dashboard-body .missions-panel-bar:has(+ .mission-list) {
        border-bottom-width: 0;
    }
    body.dashboard-body .missions-panel-heading > span {
        @apply text-ink-dim;
    }
    body.dashboard-body .missions-search,
    body.dashboard-body .missions-sort {
        @apply bg-[#0f1319] border border-solid border-white/[0.09] text-ink-fg rounded-lg;
    }
    body.dashboard-body .missions-search::placeholder {
        @apply text-ink-dim;
    }
    body.dashboard-body .missions-search:focus,
    body.dashboard-body .missions-sort:focus {
        @apply border-amber/70;
    }

    body.dashboard-body .ops-select-btn {
        @apply bg-white/[0.04] text-ink-2 border border-solid border-white/10 transition;
    }
    body.dashboard-body .ops-select-btn:hover {
        @apply border-white/20 bg-white/5 text-ink-fg;
    }
    body.dashboard-body .ops-select-btn.is-active {
        @apply border-amber/60 bg-amber/10 text-amber;
    }
    body.dashboard-body .ops-mission-check {
        @apply accent-amber;
    }
    body.dashboard-body .ops-select-bar {
        @apply bg-transparent;
    }
    body.dashboard-body .ops-select-bar button {
        @apply text-ink-2 border border-solid border-white/15 rounded-lg hover:bg-white/5 hover:text-ink-fg transition;
    }
    body.dashboard-body .ops-select-bar button.is-danger {
        @apply border-red-400/40 text-red-400;
    }
    body.dashboard-body .ops-select-bar button.is-danger:hover {
        @apply bg-red-400/10 text-red-300;
    }

    body.dashboard-body .mission-list-head,
    body.dashboard-body .mission-list-row {
        @apply border border-t-0 border-r-0 border-l-0 border-solid border-white/10;
    }
    body.dashboard-body .mission-list-row:last-child {
        @apply border-b-0;
    }
    body.dashboard-body .mission-list-row:hover {
        @apply bg-white/[0.035];
    }
    /* Was the last blue thing on the page: a blue-tinted tile with a blue
       route path, next to an otherwise amber page. */
    body.dashboard-body .mission-list-icon {
        @apply bg-amber/[0.08] border border-solid border-amber/20 text-amber rounded-xl;
    }
    body.dashboard-body .mission-list-icon svg.mission-thumb-svg path {
        fill: rgba(240,165,0,.18);
        stroke: #F0A500;
    }
    body.dashboard-body .mission-list-icon.is-empty {
        @apply bg-white/[0.04] border-white/10 text-ink-dim;
    }
    body.dashboard-body .mission-list-icon.is-empty svg.mission-thumb-svg path {
        fill: none;
        stroke: #667086;
    }
    body.dashboard-body .mission-list-meta dt {
        @apply text-ink-dim;
    }
    body.dashboard-body .mission-list-meta dd {
        @apply text-ink-fg;
    }
    body.dashboard-body .mission-list-main p {
        @apply text-ink-2;
    }
    body.dashboard-body .mission-list-arrow {
        @apply text-ink-dim;
    }
    body.dashboard-body .mission-list-item:hover .mission-list-arrow {
        @apply text-amber;
    }
    body.dashboard-body .mission-rename-button {
        @apply text-ink-dim transition;
    }
    body.dashboard-body .mission-rename-button:hover,
    body.dashboard-body .mission-rename-button:focus-visible {
        @apply bg-white/5 border border-solid border-white/15 text-ink-fg;
    }
    body.dashboard-body .mission-list-delete:hover,
    body.dashboard-body .mission-list-delete:focus-visible {
        @apply border-red-400/40 text-red-400;
    }

    body.dashboard-body .missions-empty-state {
        @apply text-ink-2;
    }
    body.dashboard-body .missions-empty-icon {
        @apply bg-white/[0.04] border border-solid border-white/10 text-ink-dim rounded-xl;
    }

    .rename-mission-dialog {
        @apply bg-panel border border-solid border-white/10 text-ink-fg rounded-2xl shadow-2xl shadow-black/50;
    }
    body.dashboard-body .rename-mission-form input {
        @apply bg-ink border border-solid border-white/15 text-ink-fg rounded-lg;
    }
    body.dashboard-body .rename-mission-form input:focus {
        @apply border-amber/70;
    }
    body.dashboard-body .rename-mission-form label {
        @apply text-ink-2;
    }
}

/* ---------------------------------------------------------------------
   Team analytics (/team-analytics/) — the page already carries
   body.dashboard-body, so the ground, nav, buttons, .missions-panel and
   the empty state above already apply. Only the analytics-only selectors
   styles.css still colours are re-done here; its layout, spacing and
   grid rules stay where they are. */
@layer components {
    /* Metric tiles sit on the page ground, so they take the panel colour —
       same raised step as .missions-panel rather than the translucent
       rgba(19,22,30,.72) that composited darker than the ground. */
    body.dashboard-body .analytics-card {
        @apply bg-[#1a1f29] border border-solid border-white/[0.09] rounded-2xl;
    }
    body.dashboard-body .analytics-card span {
        @apply text-ink-dim;
    }
    body.dashboard-body .analytics-card strong {
        @apply text-ink-fg;
    }
    body.dashboard-body .analytics-card small {
        @apply text-ink-2;
    }

    body.dashboard-body .analytics-header label {
        @apply text-ink-dim;
    }
    /* Period picker is an inset control, matching .missions-sort. */
    body.dashboard-body .analytics-header select {
        @apply bg-[#0f1319] border border-solid border-white/[0.09] text-ink-fg rounded-lg;
    }
    body.dashboard-body .analytics-header select:focus {
        @apply border-amber/70;
    }

    /* The heading's caption is a grandchild here (h2 and span share a div),
       so .missions-panel-heading > span above doesn't reach it. */
    body.dashboard-body .analytics-shell .missions-panel-heading > div > span {
        @apply text-ink-dim;
    }
    body.dashboard-body .analytics-legend {
        @apply text-ink-2;
    }
    /* Two series on an amber page: amber for the primary one, ink-dim for
       the secondary — the old blue read as a leftover from the blue theme. */
    body.dashboard-body .analytics-key-registration,
    body.dashboard-body .analytics-bar-registration {
        @apply bg-amber;
    }
    body.dashboard-body .analytics-key-engaged,
    body.dashboard-body .analytics-bar-engaged {
        @apply bg-ink-dim;
    }
    /* Bridges the per-column gap into one continuous baseline — see the
       comment on .analytics-chart-bars in styles.css. */
    body.dashboard-body .analytics-chart-bars::after {
        @apply bg-white/10;
    }
    body.dashboard-body .analytics-chart-bars > div {
        @apply text-ink-2;
    }
    body.dashboard-body .analytics-chart-column small {
        @apply text-ink-dim;
    }

    /* Table lives flush inside the panel, so the wrap has to repeat the
       panel's bottom radius or the rows square off its corners. */
    body.dashboard-body .analytics-table-wrap {
        @apply rounded-b-2xl;
    }
    body.dashboard-body .analytics-table thead {
        @apply bg-white/[0.03];
    }
    body.dashboard-body .analytics-table th {
        @apply text-ink-dim border border-t-0 border-r-0 border-l-0 border-solid border-white/10;
    }
    body.dashboard-body .analytics-table td {
        @apply text-ink-fg border border-t-0 border-r-0 border-l-0 border-solid border-white/10;
    }
    body.dashboard-body .analytics-table tbody tr:last-child td {
        @apply border-b-0;
    }
    body.dashboard-body .analytics-table td:nth-child(3) {
        @apply text-ink-2;
    }
    body.dashboard-body .analytics-table a {
        @apply text-amber;
    }

    body.dashboard-body .analytics-badge {
        @apply bg-white/[0.04] border border-solid border-white/15 text-ink-2 rounded-full;
    }
    /* .analytics-badge-contact needs no rule of its own — the neutral base
       above is already the contact look; only demo gets the amber accent. */
    body.dashboard-body .analytics-badge-demo {
        @apply bg-amber/[0.08] border-amber/30 text-amber;
    }

    /* Retention. One accent carries the whole section: amber is "still with
       us", and every step away from it — funnel track, meter ground, the
       last-seen tail — is the same amber draining out rather than a second
       hue competing with it. */
    body.dashboard-body .analytics-return-rate {
        @apply text-ink-2;
    }
    body.dashboard-body .analytics-return-rate strong {
        @apply text-amber;
    }
    body.dashboard-body .analytics-funnel-track {
        @apply bg-white/[0.04];
    }
    body.dashboard-body .analytics-funnel-track i,
    body.dashboard-body .analytics-meter i {
        @apply bg-amber;
    }
    body.dashboard-body .analytics-funnel-label {
        @apply text-ink-fg;
    }
    body.dashboard-body .analytics-funnel-label small,
    body.dashboard-body .analytics-funnel-value,
    body.dashboard-body .analytics-note,
    body.dashboard-body .analytics-lastseen-key small {
        @apply text-ink-dim;
    }
    body.dashboard-body .analytics-funnel-value strong,
    body.dashboard-body .analytics-lastseen-key strong {
        @apply text-ink-fg;
    }
    body.dashboard-body .analytics-lastseen-key span {
        @apply text-ink-2;
    }
    body.dashboard-body .analytics-meter {
        @apply bg-white/[0.06];
    }
    /* Recency ramp: full amber for today, fading through to a cold grey for
       the accounts that never came back, so the size of the dormant tail is
       the first thing the eye lands on. */
    body.dashboard-body .analytics-lastseen-1 {
        @apply bg-amber;
    }
    body.dashboard-body .analytics-lastseen-2 {
        @apply bg-amber/70;
    }
    body.dashboard-body .analytics-lastseen-3 {
        @apply bg-amber/40;
    }
    body.dashboard-body .analytics-lastseen-4 {
        @apply bg-ink-dim;
    }
    body.dashboard-body .analytics-lastseen-5 {
        @apply bg-ink-dim/40;
    }

    body.dashboard-body .analytics-admin-link {
        @apply text-ink-2 transition hover:text-ink-fg;
    }

    /* Analytics nav link, when it's the current page: same amber-outline
       treatment used everywhere else on this page for "you are here". */
    body.dashboard-body .btn-ghost[aria-current="page"] {
        @apply border-amber/40 bg-amber/[0.08] text-ink-fg;
    }

    /* Planner simulation surface: the play/pause/stop/speed toolbar, the
       runtime timer, waypoint number badges, route endpoint labels, and the
       drone marker style picker. All plain box/typography/color — moved out
       of styles.css to use the same tokens as the rest of the UI.

       What's NOT here on purpose: the drone icon's SVG fill/stroke/filter
       rules and its @keyframes spin (styles.css, ~line 1262 on) stay put.
       Tailwind has no utility for SVG paint properties, so @apply would just
       wrap the identical raw CSS in this file for no gain — and those base
       classes are shared with the marketing homepage's hero drone demo
       (.homepage-map-drone), which this file is scoped to leave untouched.
       Same reasoning for the route-line active-glow and the turn-arrow
       marker (stroke/paint-order), and for the toolbar's own scattered
       responsive position overrides elsewhere in styles.css — every one of
       those has strictly higher selector specificity than the base rules
       below, so leaving them in place is cascade-safe regardless of which
       file loads second. */

    .leaflet-mission-label {
        @apply relative flex justify-center text-center uppercase whitespace-nowrap;
        color: #dce5ee;
        font: 800 11px/1 var(--font);
        letter-spacing: 0.04em;
    }
    .leaflet-mission-label span {
        @apply inline-flex items-center rounded-[7px];
        padding: 6px 9px;
        border: 1px solid rgba(220,229,238,0.28);
        background: rgba(5,12,20,0.94);
        box-shadow: 0 2px 8px rgba(0,0,0,0.55);
    }
    .leaflet-mission-label.is-start { color: #69b7ff; }
    .leaflet-mission-label.is-end { color: #ff8a78; }

    .route-sequence {
        @apply box-border rounded-[5px] text-white pointer-events-none whitespace-nowrap;
        width: 28px !important;
        min-width: 28px;
        height: 16px !important;
        padding: 0 4px;
        border: 1px solid rgba(111, 181, 255, 0.65);
        background: rgba(5, 12, 20, 0.9);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        font: 800 10px/14px var(--font);
        font-variant-numeric: tabular-nums;
        text-align: center !important;
    }
    .route-sequence.is-flight-coded {
        @apply flex flex-col items-center min-w-0 border-0 bg-transparent shadow-none;
        gap: 2px;
        height: auto !important;
        padding: 0;
        overflow: visible;
    }
    .route-sequence.is-flight-coded span {
        @apply box-border rounded-[5px];
        width: 28px;
        height: 16px;
        padding: 0 4px;
        border: 1px solid var(--flight-color);
        background: rgba(5, 12, 20, 0.9);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
        color: var(--flight-color);
    }

    .drone-style-popup .leaflet-popup-content-wrapper {
        @apply rounded-xl border border-white/[0.14];
        background: rgba(12,18,29,.96);
        box-shadow: 0 14px 36px rgba(0,0,0,.42);
        color: #f4f7fb;
    }
    .drone-style-popup .leaflet-popup-content { width: 132px !important; margin: 11px; }
    .drone-style-popup .leaflet-popup-tip { background: #111927; }
    .drone-style-picker { @apply grid gap-2; }
    .drone-style-picker > strong { @apply tracking-[.04em]; font: 800 10px var(--font); }
    .drone-style-picker > div { @apply grid gap-[6px]; grid-template-columns: repeat(5, 22px); }
    .drone-style-swatch {
        @apply rounded-full border-2 border-white/[0.35] cursor-pointer p-0;
        width: 22px;
        height: 22px;
        background: #59636b;
    }
    .drone-style-swatch:hover,
    .drone-style-swatch:focus-visible { @apply scale-[1.12] outline-none; }
    .drone-style-swatch.is-selected { @apply border-white; box-shadow: 0 0 0 2px #a695ff; }
    .drone-style-swatch.marker-hi-cyan { background: #00c6ed; }
    .drone-style-swatch.marker-hi-blue { background: #2478ff; }
    .drone-style-swatch.marker-hi-pink { background: #f40083; }
    .drone-style-swatch.marker-hi-red { background: #ff2b3d; }
    .drone-style-swatch.marker-hi-lime { background: #36e65f; }
    .drone-style-swatch.marker-hi-violet { background: #9657f5; }
    .drone-style-swatch.marker-hi-white { background: #f4f7fa; }
    .drone-style-swatch.marker-arrow {
        @apply rounded-[5px];
        background: #00d4ff;
        clip-path: polygon(10% 18%,90% 50%,10% 82%,28% 50%);
    }

    .ops-map-controls {
        @apply absolute flex flex-row items-center gap-1 rounded-lg;
        top: 16px;
        /* Center within the visible map between the mission rail and settings. */
        left: calc((100% + var(--planner-left-w) - var(--planner-panel-w)) / 2);
        transform: translateX(-50%);
        z-index: 12;
        padding: 4px 6px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(14, 17, 24, 0.88);
        box-shadow: 0 14px 34px rgba(0,0,0,0.35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        pointer-events: auto;
        transition: left 0.18s ease, top 0.18s ease;
    }
    .ops-map-btn {
        @apply inline-flex items-center justify-center w-8 h-8 rounded-[5px] bg-transparent cursor-pointer border-0;
        transition: background 0.12s, opacity 0.12s, transform 0.1s;
    }
    .ops-map-btn:hover { @apply bg-white/10; }
    .ops-map-btn:active { @apply scale-[0.92]; }
    .ops-map-btn:disabled { @apply cursor-not-allowed opacity-[0.42]; }
    .ops-map-btn-play span {
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid #6cc36c;
    }
    .ops-map-btn-pause { @apply gap-1; }
    .ops-map-btn-pause span { @apply bg-[#7fb3ff]; width: 4px; height: 14px; }
    .ops-map-btn-stop span { @apply bg-[#df6a6a]; width: 12px; height: 12px; }
    .ops-map-btn.is-active { @apply bg-white/[0.13]; }
    .ops-map-btn-speed {
        @apply w-auto;
        min-width: var(--control-sm);
        padding: 0 8px;
    }
    .ops-map-btn-speed span {
        @apply text-amber;
        font: 700 12px/1 'JetBrains Mono','Courier New',monospace;
        font-variant-numeric: tabular-nums;
    }
    .ops-map-btn-speed.is-boosted { @apply bg-amber/10; }
    .ops-map-btn:focus-visible { @apply outline outline-2 outline-offset-2 outline-[#7FB3E8]; }
    .ops-map-controls .ops-map-btn { @apply w-[30px] h-[30px]; }
    .ops-map-controls .ops-map-btn-speed { @apply w-auto; min-width: 30px; }

    .ops-runtime-timer {
        @apply grid text-center;
        min-width: 108px;
        padding: 0 9px 0 3px;
        border-right: 1px solid rgba(255,255,255,0.10);
    }
    .ops-runtime-timer strong {
        @apply text-amber;
        font: 700 13px/1.1 'JetBrains Mono','Courier New',monospace;
        font-variant-numeric: tabular-nums;
    }
    .ops-runtime-timer span { @apply sr-only; }
    .ops-runtime-timer.is-complete strong,
    .ops-runtime-timer.is-complete span { color: #78d58a; }
    .ops-runtime-buttons { @apply flex gap-0.5; }
}