/* Family styles for sensor-intelligence — populated by its presentation template contract. */

/* ============================================================
   SENSOR INTELLIGENCE — identity hero + coverage scope
   Consumes --ms-* tokens only; logical properties only.
   ============================================================ */

.msi-sn-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-9);
        display: grid;
        gap: var(--ms-space-4);
        justify-items: start;
}

.msi-sn-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-hero);
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -.015em;
        margin-block: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--ms-space-3);
}
.msi-sn-hero__title small {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h4);
        font-weight: 500;
        color: var(--ms-color-text-tertiary);
        letter-spacing: .02em;
}

.msi-sn-hero__excerpt {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.1);
        max-inline-size: 62ch;
}

/* ============================================================
   SCOPE — radar dial × detection/tracking capability grid
   ============================================================ */
.msi-sn-scope {
        border-inline-start: 3px solid var(--ms-family-accent, var(--ms-color-teal));
}

/* Dial: telemetry core dot keyed to the family accent */
.msi-sn-scope__dial { position: relative; }
.msi-sn-scope__dial::after {
        content: "";
        position: absolute;
        inset-block-start: calc(50% - 3px);
        inset-inline-start: calc(50% - 3px);
        inline-size: 6px;
        block-size: 6px;
        border-radius: 50%;
        background: var(--ms-family-accent, var(--ms-color-teal));
        box-shadow: 0 0 12px var(--ms-color-teal-soft);
}

.msi-sn-scope__metrics {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--ms-space-5) var(--ms-space-7);
        align-content: center;
}

.msi-sn-scope__caption {
        grid-column: 1 / -1;
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
        direction: ltr;
        unicode-bidi: embed;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
        .msi-sn-hero__inner { padding-block: var(--ms-space-7); }
        .msi-sn-hero__title { font-size: var(--ms-fs-display); }
        .msi-sn-scope__dial { inline-size: 160px; block-size: 160px; }
        .msi-sn-scope__metrics { gap: var(--ms-space-4) var(--ms-space-5); }
}

@media (max-width: 640px) {
        .msi-sn-hero__inner { padding-block: var(--ms-space-6); }
        .msi-sn-scope { padding: var(--ms-space-5); }
        .msi-sn-scope__dial { inline-size: 140px; block-size: 140px; }
        .msi-sn-scope__metrics { grid-template-columns: 1fr; }
}