/**
 * MilitarySci — Equipment Presentation Layer v5.0
 * One visual language per equipment family.
 *
 * Shared primitives:  .msi-eq-*
 * Family styles:      .msi-mode-aviation / land_systems / missile_systems /
 *                     sensor_intelligence / defense_system /
 *                     electronic_intelligence / naval / industrial /
 *                     autonomous_systems / orbital_intelligence
 *
 * Contract: every family has (a) a distinct hero composition, (b) a distinct
 * information hierarchy, (c) family-tinted data accents — never just a color
 * swap. Consumes --ms-* tokens only.
 */

/* ============================================================
   SHARED EQUIPMENT PRIMITIVES
   ============================================================ */

/* Instrument metric — label + mono value + proportional bar */
.msi-eq-metric { display: grid; gap: 6px; }
.msi-eq-metric__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--ms-space-3);
}
.msi-eq-metric__label {
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
}
.msi-eq-metric__value {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h3);
        font-weight: 600;
        color: var(--ms-color-text);
        line-height: 1;
        direction: ltr;
        unicode-bidi: embed;
}
.msi-eq-metric__value .msi-unit {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
        margin-inline-start: 3px;
}
.msi-eq-metric__bar {
        block-size: 4px;
        border-radius: var(--ms-radius-pill);
        background: var(--ms-color-neutral-1);
        overflow: hidden;
        position: relative;
}
.msi-eq-metric__fill {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--bar-fill, 0%);
        background: linear-gradient(90deg, color-mix(in srgb, var(--bar-tint, var(--ms-color-accent)) 55%, transparent), var(--bar-tint, var(--ms-color-accent)));
        border-radius: inherit;
        transition: inline-size var(--ms-dur-slower) var(--ms-ease-swing);
}
/* Animate fill when the metric scrolls into view (msi-equipment.js). */
.msi-eq-metric.is-armed .msi-eq-metric__fill { inline-size: 0%; }
.msi-eq-metric.is-measured .msi-eq-metric__fill { inline-size: var(--bar-fill, 0%); }

/* Definition list — technical data rows */
.msi-eq-dl { display: grid; gap: 0; }
.msi-eq-dl__row {
        display: grid;
        grid-template-columns: minmax(130px, 200px) 1fr;
        gap: var(--ms-space-4);
        padding: 9px var(--ms-space-3);
        border-block-end: 1px solid var(--ms-color-hairline);
        font-size: var(--ms-fs-small);
}
.msi-eq-dl__row:last-child { border-block-end: none; }
.msi-eq-dl dt { color: var(--ms-color-text-tertiary); }
.msi-eq-dl dd {
        color: var(--ms-color-text);
        font-weight: 500;
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        flex-wrap: wrap;
        margin: 0;
}
.msi-eq-dl dd a { color: var(--ms-color-cobalt); }
.msi-eq-dl dd a:hover { color: var(--ms-color-accent); }
.msi-eq-dl--grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 var(--ms-space-6); }
.msi-eq-dl--wide .msi-eq-dl__row { grid-template-columns: minmax(150px, 240px) 1fr; padding-block: 11px; }

/* Relationship rail — horizontal contextual links */
.msi-eq-rail {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-2);
}
.msi-eq-rail__item {
        display: inline-flex;
        align-items: center;
        gap: var(--ms-space-2);
        padding: 8px 14px;
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-pill);
        font-size: var(--ms-fs-small);
        transition: all var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-eq-rail__item:hover {
        border-color: var(--ms-color-accent-line);
        background: var(--ms-color-accent-softer);
        transform: translateY(-1px);
}
.msi-eq-rail__rel {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
}
.msi-eq-rail__name { font-weight: 600; color: var(--ms-color-text-secondary); }
.msi-eq-rail__item:hover .msi-eq-rail__name { color: var(--ms-color-accent); }
.msi-eq-rail__arrow { color: var(--ms-color-text-quaternary); }
.msi-eq-rail__empty {
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-quaternary);
        padding: var(--ms-space-3) 0;
}

/* Family hero base */
.msi-eq-hero {
        position: relative;
        overflow: hidden;
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-eq-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-8);
}

/* Kicker chip row (shared with entities) */
.msi-mode-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        text-transform: uppercase;
        color: var(--ms-family-accent, var(--ms-color-accent));
        direction: ltr;
        unicode-bidi: embed;
}
.msi-mode-kicker::before {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        background: var(--ms-family-accent, var(--ms-color-accent));
        border-radius: 2px;
        rotate: 45deg;
}

/* Family accent utilities — each mode sets --ms-family-accent on <article> */
.msi-mode-aviation            { --ms-family-accent: var(--ms-color-cobalt); }
.msi-mode-land_systems        { --ms-family-accent: var(--ms-color-amber); }
.msi-mode-missile_systems     { --ms-family-accent: var(--ms-color-crimson); }
.msi-mode-sensor_intelligence { --ms-family-accent: var(--ms-color-teal); }
.msi-mode-defense_system      { --ms-family-accent: var(--ms-color-teal); }
.msi-mode-electronic_intelligence { --ms-family-accent: var(--ms-color-violet); }
.msi-mode-naval               { --ms-family-accent: var(--ms-color-cobalt); }
.msi-mode-industrial          { --ms-family-accent: var(--ms-color-amber); }
.msi-mode-autonomous_systems  { --ms-family-accent: var(--ms-color-green); }
.msi-mode-orbital_intelligence{ --ms-family-accent: var(--ms-color-violet); }

/* ============================================================
   AVIATION — full-bleed hero, instrument envelope
   ============================================================ */
.msi-av-hero {
        position: relative;
        overflow: hidden;
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-av-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;
}
.msi-av-hero__media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center 38%;
}
.msi-av-hero__scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
                linear-gradient(to top, var(--ms-color-bg) 4%, color-mix(in srgb, var(--ms-color-bg) 72%, transparent) 42%, color-mix(in srgb, var(--ms-color-bg) 30%, transparent) 100%),
                linear-gradient(to inline-start, color-mix(in srgb, var(--ms-color-bg) 78%, transparent), transparent 55%);
}
[data-theme="light"] .msi-av-hero__scrim {
        background:
                linear-gradient(to top, var(--ms-color-bg) 8%, color-mix(in srgb, var(--ms-color-bg) 78%, transparent) 46%, color-mix(in srgb, var(--ms-color-bg) 38%, transparent) 100%),
                linear-gradient(to inline-start, color-mix(in srgb, var(--ms-color-bg) 82%, transparent), transparent 55%);
}
.msi-av-hero:not(.msi-av-hero--media) {
        background:
                radial-gradient(90% 120% at 85% 10%, var(--ms-atmo-cobalt), transparent 55%),
                var(--ms-color-bg-secondary);
}
.msi-av-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-9);
}
.msi-av-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-hero);
        font-weight: 700;
        line-height: 1.06;
        margin-block: var(--ms-space-3) var(--ms-space-3);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--ms-space-3);
}
.msi-av-hero__title small {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h4);
        font-weight: 500;
        color: var(--ms-color-text-tertiary);
}
.msi-av-hero__excerpt {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.1);
        max-inline-size: 66ch;
}
.msi-av-hero__strip {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        margin-block-start: var(--ms-space-5);
        max-inline-size: 760px;
        backdrop-filter: blur(8px);
}
.msi-av-hero__stripcell {
        flex: 1 1 130px;
        display: grid;
        gap: 3px;
        padding: var(--ms-space-3) var(--ms-space-4);
        background: color-mix(in srgb, var(--ms-color-surface) 82%, transparent);
}
.msi-av-hero__stripcell span {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-tertiary);
}
.msi-av-hero__stripcell strong {
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text);
        font-weight: 600;
}
a.msi-av-hero__stripcell strong { color: var(--ms-color-cobalt); }
a.msi-av-hero__stripcell:hover { background: var(--ms-color-surface-hi); }

/* Envelope grid */
.msi-av-envelope__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--ms-space-5) var(--ms-space-7);
        padding: var(--ms-space-6);
        background:
                linear-gradient(var(--ms-atmo-grid) 1px, transparent 1px) 0 0 / 32px 32px,
                var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        border-inline-start: 3px solid var(--ms-family-accent, var(--ms-color-cobalt));
}

/* Avionics grid */
.msi-av-avio {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1px;
        background: var(--ms-color-hairline);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
}
.msi-av-avio__cell {
        background: var(--ms-color-surface);
        padding: var(--ms-space-4);
        display: grid;
        gap: 5px;
        transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-av-avio__cell:hover { background: var(--ms-color-surface-hi); }
.msi-av-avio__key {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-tertiary);
}
.msi-av-avio__val {
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text);
        font-weight: 600;
}

/* Operators */
.msi-av-operators { display: flex; flex-wrap: wrap; gap: var(--ms-space-2); }

/* ============================================================
   LAND SYSTEMS — vertical dossier, armor/mobility/armament triad
   ============================================================ */
.msi-ls-hero {
        position: relative;
        background:
                linear-gradient(160deg, color-mix(in srgb, var(--ms-color-amber) 9%, transparent), transparent 45%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
        overflow: hidden;
}
.msi-ls-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: var(--ms-space-7);
        align-items: center;
}
.msi-ls-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-display);
        font-weight: 700;
        line-height: 1.1;
        margin-block: var(--ms-space-3);
}
.msi-ls-hero__media {
        position: relative;
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
        border: 1px solid var(--ms-color-border-strong);
        box-shadow: var(--ms-shadow-2);
        aspect-ratio: 4 / 3;
}
.msi-ls-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Armor / mobility / armament triad — three vertical data columns */
.msi-ls-triad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
}
.msi-ls-triad__col {
        background: var(--ms-color-surface);
        padding: var(--ms-space-5);
        display: grid;
        gap: var(--ms-space-4);
        align-content: start;
}
.msi-ls-triad__head {
        display: flex;
        align-items: center;
        gap: var(--ms-space-2);
        font-size: var(--ms-fs-small);
        font-weight: 700;
        color: var(--ms-family-accent, var(--ms-color-amber));
}
.msi-ls-triad__head svg { inline-size: 16px; block-size: 16px; }

/* ============================================================
   MISSILE SYSTEMS — guidance → range → warhead cascade
   ============================================================ */
.msi-ms-hero {
        background:
                radial-gradient(70% 100% at 15% 0%, color-mix(in srgb, var(--ms-color-crimson) 10%, transparent), transparent 55%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-ms-cascade {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--ms-space-4);
        position: relative;
}
.msi-ms-cascade__step {
        position: relative;
        padding: var(--ms-space-5);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        display: grid;
        gap: var(--ms-space-3);
        align-content: start;
}
.msi-ms-cascade__step::after {
        content: "←";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: -14px;
        transform: translateY(-50%);
        color: var(--ms-color-text-quaternary);
        font-size: 1.1rem;
        z-index: 2;
}
html[dir="ltr"] .msi-ms-cascade__step::after { content: "→"; }
.msi-ms-cascade__step:first-child::after { display: none; }
.msi-ms-cascade__label {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        text-transform: uppercase;
        color: var(--ms-family-accent, var(--ms-color-crimson));
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ms-cascade__value {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h3);
        font-weight: 600;
        color: var(--ms-color-text);
        direction: ltr;
        unicode-bidi: embed;
        overflow-wrap: anywhere;
}
.msi-ms-cascade__value .msi-unit { font-size: var(--ms-fs-small); color: var(--ms-color-text-tertiary); }

/* ============================================================
   SENSOR INTELLIGENCE — coverage dial + detection rows
   ============================================================ */
.msi-sn-hero {
        background:
                radial-gradient(60% 90% at 80% 20%, var(--ms-atmo-cobalt), transparent 55%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-sn-scope {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--ms-space-7);
        align-items: center;
        padding: var(--ms-space-6);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
}
.msi-sn-scope__dial {
        inline-size: 200px;
        block-size: 200px;
        justify-self: center;
}
.msi-sn-specs { display: grid; gap: var(--ms-space-4); }

/* ============================================================
   ELECTRONIC INTELLIGENCE — spectrum band visualization
   ============================================================ */
.msi-ew-hero {
        background:
                radial-gradient(70% 100% at 50% 0%, var(--ms-color-violet-soft), transparent 60%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-ew-band {
        position: relative;
        block-size: 84px;
        border-radius: var(--ms-radius-lg);
        border: 1px solid var(--ms-color-border);
        background: linear-gradient(90deg,
                color-mix(in srgb, var(--ms-color-cobalt) 22%, transparent),
                color-mix(in srgb, var(--ms-color-teal) 22%, transparent) 35%,
                color-mix(in srgb, var(--ms-color-amber) 22%, transparent) 65%,
                color-mix(in srgb, var(--ms-color-crimson) 22%, transparent));
        overflow: hidden;
}
.msi-ew-band__window {
        position: absolute;
        inset-block: 0;
        background: color-mix(in srgb, var(--ms-color-violet) 30%, transparent);
        border-inline: 2px solid var(--ms-color-violet);
        box-shadow: 0 0 24px var(--ms-color-violet-soft);
}
.msi-ew-band__ticks {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: var(--ms-space-2);
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-tertiary);
        direction: ltr;
}
.msi-ew-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ms-space-4); }
.msi-ew-unit {
        padding: var(--ms-space-5);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        display: grid;
        gap: var(--ms-space-2);
        align-content: start;
}
.msi-ew-unit__tag {
        font-family: var(--ms-font-mono);
        font-weight: 700;
        color: var(--ms-family-accent, var(--ms-color-violet));
}

/* ============================================================
   NAVAL — horizontal waterline composition
   ============================================================ */
.msi-nv-hero {
        position: relative;
        border-block-end: 1px solid var(--ms-color-border);
        overflow: hidden;
        background: var(--ms-color-bg-secondary);
}
.msi-nv-hero__media {
        position: relative;
        min-block-size: 340px;
        max-block-size: 480px;
        block-size: 44vh;
}
.msi-nv-hero__media img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
}
/* Waterline gradient — nautical depth */
.msi-nv-hero__scrim {
        position: absolute;
        inset: 0;
        background:
                linear-gradient(to top, var(--ms-color-bg) 6%, transparent 55%),
                linear-gradient(to bottom, color-mix(in srgb, var(--ms-color-cobalt) 14%, transparent), transparent 35%);
}
.msi-nv-hero__inner {
        position: relative;
        z-index: 2;
        margin-block-start: calc(-1 * var(--ms-space-8));
        padding-block-end: var(--ms-space-6);
}
.msi-nv-waterline {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        margin-block-start: var(--ms-space-5);
}
.msi-nv-waterline__cell {
        flex: 1 1 120px;
        display: grid;
        gap: 3px;
        padding: var(--ms-space-3) var(--ms-space-4);
        background: color-mix(in srgb, var(--ms-color-surface) 88%, transparent);
        backdrop-filter: blur(6px);
}
.msi-nv-waterline__cell span { font-size: var(--ms-fs-micro); color: var(--ms-color-text-tertiary); }
.msi-nv-waterline__cell strong {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h4);
        color: var(--ms-color-text);
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: embed;
}
.msi-nv-waterline__cell strong .msi-unit { font-size: var(--ms-fs-micro); color: var(--ms-color-text-tertiary); }

/* ============================================================
   INDUSTRIAL — powerplant spec-sheet identity
   ============================================================ */
.msi-in-hero {
        background:
                linear-gradient(200deg, color-mix(in srgb, var(--ms-color-amber) 8%, transparent), transparent 50%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-in-power {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
}
.msi-in-power__cell {
        background: var(--ms-color-surface);
        padding: var(--ms-space-5);
        display: grid;
        gap: 4px;
        align-content: center;
        justify-items: start;
}
.msi-in-power__value {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h2);
        font-weight: 600;
        color: var(--ms-color-text);
        direction: ltr;
        unicode-bidi: embed;
        line-height: 1.1;
}
.msi-in-power__value .msi-unit { font-size: var(--ms-fs-small); color: var(--ms-color-text-tertiary); }
.msi-in-power__label { font-size: var(--ms-fs-tiny); color: var(--ms-color-text-tertiary); }

/* ============================================================
   AUTONOMOUS SYSTEMS — mission/autonomy/endurance identity
   ============================================================ */
.msi-au-hero {
        background:
                radial-gradient(75% 110% at 80% 0%, var(--ms-color-green-soft), transparent 55%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
}
.msi-au-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
}
.msi-au-stats__cell {
        background: var(--ms-color-surface);
        padding: var(--ms-space-5);
        display: grid;
        gap: 4px;
}
.msi-au-stats__value {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h2);
        font-weight: 600;
        color: var(--ms-color-text);
        direction: ltr;
        unicode-bidi: embed;
}
.msi-au-stats__value .msi-unit { font-size: var(--ms-fs-small); color: var(--ms-color-text-tertiary); }
.msi-au-stats__label { font-size: var(--ms-fs-tiny); color: var(--ms-color-text-tertiary); }
.msi-au-autonomy {
        display: flex;
        align-items: center;
        gap: var(--ms-space-3);
        padding: var(--ms-space-4) var(--ms-space-5);
        border: 1px solid color-mix(in srgb, var(--ms-color-green) 32%, transparent);
        background: var(--ms-color-green-soft);
        border-radius: var(--ms-radius-lg);
}
.msi-au-autonomy strong { color: var(--ms-color-success); }

/* ============================================================
   ORBITAL INTELLIGENCE — orbit ring identity
   ============================================================ */
.msi-ob-hero {
        background:
                radial-gradient(60% 90% at 75% 15%, var(--ms-color-violet-soft), transparent 55%),
                var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-border);
        overflow: hidden;
}
.msi-ob-orbit {
        position: relative;
        inline-size: 180px;
        block-size: 180px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
}
.msi-ob-orbit__ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px dashed color-mix(in srgb, var(--ms-color-violet) 45%, transparent);
        animation: ob-spin 26s linear infinite;
}
.msi-ob-orbit__ring::before {
        content: "";
        position: absolute;
        inset-block-start: -4px;
        inset-inline-start: calc(50% - 4px);
        inline-size: 8px;
        block-size: 8px;
        border-radius: 50%;
        background: var(--ms-color-violet);
        box-shadow: 0 0 12px var(--ms-color-violet-soft);
}
.msi-ob-orbit__core {
        inline-size: 74px;
        block-size: 74px;
        border-radius: 50%;
        background:
                radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--ms-color-cobalt) 40%, transparent), transparent 60%),
                var(--ms-color-surface-raised);
        border: 1px solid var(--ms-color-border-strong);
        display: grid;
        place-items: center;
        color: var(--ms-color-violet);
}
.msi-ob-orbit__core svg { inline-size: 30px; block-size: 30px; }
@keyframes ob-spin {
        to { transform: rotate(1turn); }
}
.msi-ob-params {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
}
.msi-ob-params__cell {
        background: var(--ms-color-surface);
        padding: var(--ms-space-4) var(--ms-space-5);
        display: grid;
        gap: 3px;
}
.msi-ob-params__value {
        font-family: var(--ms-font-mono);
        color: var(--ms-color-text);
        font-weight: 600;
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ob-params__label { font-size: var(--ms-fs-micro); color: var(--ms-color-text-tertiary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
        .msi-av-hero__inner,
        .msi-eq-hero__inner { padding-block: var(--ms-space-7); }
        .msi-av-hero__title { font-size: var(--ms-fs-display); }
        .msi-ls-hero__grid { grid-template-columns: 1fr; }
        .msi-ls-hero__media { order: -1; }
        .msi-ls-triad { grid-template-columns: 1fr; }
        .msi-sn-scope { grid-template-columns: 1fr; justify-items: center; }
        .msi-nv-hero__media { min-block-size: 240px; block-size: 34vh; }
}
@media (max-width: 640px) {
        .msi-eq-dl__row,
        .msi-eq-dl--wide .msi-eq-dl__row { grid-template-columns: 1fr; gap: 2px; }
        .msi-av-envelope__grid { grid-template-columns: 1fr; padding: var(--ms-space-5); }
        .msi-av-hero__strip { max-inline-size: none; }
        .msi-ms-cascade__step::after { display: none; }

        /* Collapsible technical sections (driven by msi-equipment.js) */
        .msi-sec.is-collapsed > .msi-sechead + *,
        .msi-sec.is-collapsed > .msi-sechead ~ *:not(.msi-sechead) { display: none; }
        .msi-sec.is-collapsed .msi-sechead { cursor: pointer; }
        .msi-sec.is-collapsed .msi-sechead__title::after {
                content: "+";
                font-family: var(--ms-font-mono);
                color: var(--ms-family-accent, var(--ms-color-accent));
                margin-inline-start: var(--ms-space-2);
        }
        .msi-sec:not(.is-collapsed) .msi-sechead[data-msi-collapse="1"] { cursor: pointer; }
        .msi-sec .msi-sechead[data-msi-collapse="1"] .msi-sechead__title::after {
                content: "−";
                font-family: var(--ms-font-mono);
                color: var(--ms-color-text-quaternary);
                margin-inline-start: var(--ms-space-2);
        }
        .msi-sec.is-collapsed .msi-sechead__title::after { content: "+"; }
}
