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

/* ============================================================
   ELECTRONIC INTELLIGENCE — hero composition + spectrum band
   Loads after equipment.css; refines the .msi-ew-* stubs.
   ============================================================ */

/* ----- 1. Hero — spectrum-tinted identity composition ----- */
.msi-ew-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-9);
}
.msi-ew-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-hero);
        font-weight: 700;
        line-height: var(--ms-lh-tight);
        color: var(--ms-color-text);
        margin-block: var(--ms-space-3) var(--ms-space-2);
}
.msi-ew-hero__designation {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h4);
        font-weight: 500;
        color: var(--ms-family-accent, var(--ms-color-violet));
        direction: ltr;
        unicode-bidi: embed;
        margin-block: 0 var(--ms-space-3);
}
.msi-ew-hero__excerpt {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.1);
        line-height: var(--ms-lh-body);
        max-inline-size: 62ch;
        margin-block: 0;
}
.msi-ew-hero .msi-entityhero__actions { margin-block-start: var(--ms-space-5); }

/* ----- 2. Spectrum band — coverage readout + window glow ----- */
.msi-ew-bandwrap { display: grid; gap: var(--ms-space-3); }
.msi-ew-readout {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: var(--ms-space-2) var(--ms-space-4);
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-secondary);
}
.msi-ew-readout__num {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h2);
        font-weight: 600;
        color: var(--ms-family-accent, var(--ms-color-violet));
        direction: ltr;
        unicode-bidi: embed;
        font-variant-numeric: tabular-nums;
        margin-inline-start: var(--ms-space-2);
        transition: color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ew-readout:hover .msi-ew-readout__num { color: var(--ms-color-violet); }
.msi-ew-readout__sep {
        flex: 1 1 48px;
        align-self: center;
        block-size: 1px;
        background: linear-gradient(to inline-end, var(--ms-color-violet-soft), var(--ms-color-border));
}

/* Window — static 60% coverage viewport glowing over the band. */
.msi-ew-band__window {
        inline-size: 60%;
        inset-inline-start: 8%;
        background:
                linear-gradient(to top, color-mix(in srgb, var(--ms-color-violet) 14%, transparent), transparent 65%),
                color-mix(in srgb, var(--ms-color-violet) 22%, transparent);
        border-inline: 2px solid var(--ms-color-violet);
        box-shadow:
                0 0 28px var(--ms-color-violet-soft),
                inset 0 0 18px color-mix(in srgb, var(--ms-color-violet) 20%, transparent);
        transition: background-color var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ew-band__window::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 18%;
        background: linear-gradient(to inline-end, color-mix(in srgb, var(--ms-color-violet) 16%, transparent), transparent);
}

/* Ticks — mono GHz ruler with per-tick index lines. */
.msi-ew-band__ticks span {
        display: grid;
        justify-items: center;
        gap: 3px;
        font-variant-numeric: tabular-nums;
}
.msi-ew-band__ticks span::before {
        content: "";
        inline-size: 1px;
        block-size: 7px;
        background: var(--ms-color-border-strong);
}

/* ----- 3. Spectrum remainder panel ----- */
.msi-ew-spectrumrest { margin-block-start: var(--ms-space-4); border-radius: var(--ms-radius-lg); }

/* ----- 4. Unit cards — ESM/ECM with violet edge on hover ----- */
.msi-ew-unit {
        border-inline-start: 3px solid transparent;
        transition:
                background-color var(--ms-dur-fast) var(--ms-ease-out),
                border-inline-start-color var(--ms-dur-fast) var(--ms-ease-out),
                box-shadow var(--ms-dur-base) var(--ms-ease-out),
                transform var(--ms-dur-base) var(--ms-ease-swing);
}
.msi-ew-unit__tag {
        font-size: var(--ms-fs-h4);
        padding-block-end: var(--ms-space-2);
        border-block-end: 1px solid var(--ms-color-hairline);
}
.msi-ew-unit__desc {
        margin: 0;
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-secondary);
        line-height: var(--ms-lh-body);
}
.msi-ew-unit:hover {
        background: var(--ms-color-surface-raised);
        border-inline-start-color: var(--ms-color-violet);
        box-shadow: var(--ms-shadow-2);
        transform: translateY(-2px);
}
.msi-ew-unit:hover .msi-ew-unit__tag { color: var(--ms-color-violet); }

/* ----- 5. Responsive ----- */
@media (max-width: 900px) {
        .msi-ew-hero__inner { padding-block: var(--ms-space-7); }
        .msi-ew-hero__title { font-size: var(--ms-fs-display); }
        .msi-ew-band { block-size: 72px; }
}
@media (max-width: 640px) {
        .msi-ew-hero__inner { padding-block: var(--ms-space-6); }
        .msi-ew-hero__title { font-size: var(--ms-fs-h1); }
        .msi-ew-hero__designation { font-size: var(--ms-fs-small); }
        .msi-ew-band { block-size: 60px; }
        .msi-ew-band__window { inline-size: 68%; inset-inline-start: 6%; }
        .msi-ew-band__ticks { font-size: var(--ms-fs-micro); }
        .msi-ew-readout__num { font-size: var(--ms-fs-h3); }
        .msi-ew-units { grid-template-columns: 1fr; }
}