/**
 * MilitarySci — Exhibitions Presentation Layer v5.0
 * -------------------------------------------------
 * Enqueued AFTER exhibitions.css (dependency: msi-exhibitions) so it
 * overrides/extends the legacy exhibition rules. Two opposed identities:
 *
 *   .msi-ex-series   — GLOBAL / INSTITUTIONAL: the exhibition brand as an
 *                      institution. Wide amber-washed identity band, large
 *                      display title, organizer chip, recurrence strip,
 *                      cumulative statistics band, horizontal editions
 *                      timeline rail, sponsor wall.
 *
 *   .msi-ex-edition  — OPERATIONAL / COMMAND: one live event run by a
 *                      command cell. Cobalt-washed command hero, dates +
 *                      countdown row, KPI statstrip, halls/zones cards,
 *                      sessions timeline, exhibitor directory, and the
 *                      interactive floorplan (.msi-fl-*).
 *
 * Contract (mirrors equipment.css / modes-v5.css quality bar):
 *   — every identity composes a DISTINCT hero, never a bare color swap;
 *   — consumes --ms-* tokens ONLY, logical properties ONLY;
 *   — mono data is direction:ltr + unicode-bidi:embed ([data-mono] base);
 *   — motion via var(--ms-dur-*) / var(--ms-ease-*);
 *   — responsive collapses at 900 / 640.
 */

/* ============================================================
   0. IDENTITY ACCENTS
   Series = institutional amber · Edition = operational cobalt.
   ============================================================ */
.msi-ex-series  { --ms-family-accent: var(--ms-color-amber);  --ms-family-accent-soft: var(--ms-color-amber-soft); }
.msi-ex-edition { --ms-family-accent: var(--ms-color-cobalt); --ms-family-accent-soft: var(--ms-color-cobalt-soft); }

/* ============================================================
   1. SERIES — GLOBAL / INSTITUTIONAL HERO (.msi-ex-series)
   ============================================================ */
/* Specificity note: presentation.css is enqueued AFTER this sheet, so its
   `.msi-mode-* .msi-series-hero*` rules (0,2,0) win same-specificity ties.
   The conflicting v5 selectors below are prefixed with `.msi-presentation`
   (always present on the presentation <article>) to reach (0,3,0). */
.msi-ex-series.msi-presentation .msi-ex-series__hero {
        display: block; /* own the flow: centered inner, media below the band */
        position: relative;
        overflow: hidden;
        padding-block: var(--ms-space-9) var(--ms-space-8);
        border-block-end: 1px solid var(--ms-color-border);
        background:
                radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--ms-family-accent) 9%, transparent), transparent 55%),
                linear-gradient(var(--ms-atmo-grid) 1px, transparent 1px) 0 0 / 56px 56px,
                var(--ms-color-bg-secondary);
}
.msi-ex-series .msi-ex-series__hero::after {
        /* Precision framing line under the band. */
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        block-size: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-family-accent) 45%, transparent), transparent);
}
.msi-ex-series.msi-presentation .msi-ex-series__inner {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--ms-space-5);
        width: min(var(--ms-container), 100% - 2 * var(--ms-space-5));
        margin-inline: auto;
}
.msi-ex-series .msi-ex-series__statusstrip {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--ms-space-3);
        color: var(--ms-color-text-secondary);
        font-size: var(--ms-fs-small);
}
.msi-ex-series.msi-presentation .msi-ex-series__recurrence {
        display: inline-flex;
        align-items: center;
        gap: var(--ms-space-2);
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-tiny);
        text-transform: uppercase;
        color: var(--ms-family-accent);
        padding: 5px 12px;
        border: 1px solid color-mix(in srgb, var(--ms-family-accent) 35%, transparent);
        border-radius: var(--ms-radius-pill);
        background: var(--ms-family-accent-soft);
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ex-series.msi-presentation .msi-ex-series__display {
        margin: 0;
        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);
        text-wrap: balance;
}
.msi-ex-series.msi-presentation .msi-ex-series__brand {
        margin: 0;
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-small);
        text-transform: uppercase;
        color: var(--ms-family-accent);
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ex-series .msi-ex-series__excerpt {
        margin: 0;
        max-inline-size: 68ch;
        color: var(--ms-color-text-secondary);
        line-height: var(--ms-lh-body);
}
/* Organizer chip — the institutional voice of the page. */
.msi-ex-series .msi-ex-series__orgchip {
        display: inline-flex;
        align-items: center;
        gap: var(--ms-space-2);
        padding: 7px 14px;
        background: var(--ms-color-surface-raised);
        border: 1px solid color-mix(in srgb, var(--ms-family-accent) 30%, var(--ms-color-border));
        border-radius: var(--ms-radius-pill);
        box-shadow: var(--ms-shadow-1);
}
.msi-ex-series .msi-ex-series__orgchip a {
        color: var(--ms-color-text);
        font-weight: 600;
        text-decoration: none;
}
.msi-ex-series .msi-ex-series__orgchip a:hover { color: var(--ms-family-accent); }
/* Identity strip — key/value facts under the title. */
.msi-ex-series.msi-presentation .msi-ex-series__identitystrip {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-3) var(--ms-space-7);
        padding-block-start: var(--ms-space-2);
}
.msi-ex-series .msi-ex-series__identitystrip > div {
        display: grid;
        gap: 2px;
        padding-inline-start: var(--ms-space-3);
        border-inline-start: 2px solid var(--ms-color-border-strong);
}
.msi-ex-series.msi-presentation .msi-series-hero__key {
        font-size: var(--ms-fs-micro);
        text-transform: uppercase;
        color: var(--ms-color-text-tertiary);
}
.msi-ex-series.msi-presentation .msi-series-hero__val {
        font-size: var(--ms-fs-small);
        font-weight: 500;
        color: var(--ms-color-text);
}
.msi-ex-series .msi-series-hero__val a { color: var(--ms-color-text); text-decoration: none; }
.msi-ex-series .msi-series-hero__val a:hover { color: var(--ms-family-accent); }
.msi-ex-series.msi-presentation .msi-series-hero__media {
        position: relative;
        z-index: 1;
        width: min(var(--ms-container), 100% - 2 * var(--ms-space-5));
        margin-inline: auto;
        margin-block-start: var(--ms-space-6);
}
.msi-ex-series.msi-presentation .msi-series-hero__media img {
        display: block;
        inline-size: 100%;
        object-fit: cover;
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        box-shadow: var(--ms-shadow-2);
}

/* ------------------------------------------------------------
   1a. Cumulative statistics band — the institution in numbers.
   ------------------------------------------------------------ */
.msi-ex-series .msi-ex-series__statsband {
        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-lg);
        overflow: hidden;
}
.msi-ex-series .msi-ex-series__stat {
        position: relative;
        display: grid;
        gap: 4px;
        padding: var(--ms-space-5);
        background: var(--ms-color-surface);
        transition: background var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ex-series .msi-ex-series__stat::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 3px;
        block-size: 100%;
        background: color-mix(in srgb, var(--ms-family-accent) 55%, transparent);
        opacity: 0;
        transition: opacity var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ex-series .msi-ex-series__stat:hover { background: var(--ms-color-surface-hi); }
.msi-ex-series .msi-ex-series__stat:hover::before { opacity: 1; }
.msi-ex-series .msi-ex-series__statnum {
        font-family: var(--ms-font-mono);
        font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
        font-weight: 600;
        line-height: 1;
        color: var(--ms-family-accent);
        direction: ltr;
        unicode-bidi: embed;
        font-variant-numeric: tabular-nums;
}
.msi-ex-series .msi-ex-series__statlabel {
        font-size: var(--ms-fs-tiny);
        text-transform: uppercase;
        color: var(--ms-color-text-tertiary);
}

/* ------------------------------------------------------------
   1b. Editions timeline rail — horizontal scroll-snap.
   ------------------------------------------------------------ */
.msi-ex-series .msi-ex-series__rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(280px, 340px);
        gap: var(--ms-space-4);
        overflow: hidden auto;
        overflow-clip-margin: var(--ms-space-2);
        padding-block-end: var(--ms-space-3);
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: var(--ms-space-2);
        scrollbar-width: thin;
        scrollbar-color: var(--ms-color-neutral-3) transparent;
}
.msi-ex-series .msi-ex-series__rail > * {
        scroll-snap-align: start;
}
.msi-ex-series .msi-ex-series__rail .msi-rowcard {
        position: relative;
        border-inline-start: 3px solid var(--ms-color-border-strong);
        transition: border-color var(--ms-dur-base) var(--ms-ease-out), transform var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ex-series .msi-ex-series__rail .msi-rowcard:hover {
        border-inline-start-color: var(--ms-family-accent);
        transform: translateY(-2px);
}
.msi-ex-series .msi-ex-series__railyear {
        position: absolute;
        inset-block-end: var(--ms-space-2);
        inset-inline-end: var(--ms-space-3);
        font-family: var(--ms-font-mono);
        font-size: 1.7rem;
        font-weight: 600;
        line-height: 1;
        color: color-mix(in srgb, var(--ms-family-accent) 22%, transparent);
        direction: ltr;
        unicode-bidi: embed;
        pointer-events: none;
}
/* Upcoming edition spotlight — the only moment of urgency on the page. */
.msi-ex-series .msi-series-upcoming {
        border-inline-start: 3px solid var(--ms-family-accent);
        background:
                linear-gradient(120deg, var(--ms-family-accent-soft), transparent 55%),
                var(--ms-color-surface);
}

/* ------------------------------------------------------------
   1c. Sponsor wall — the institutional partner grid.
   ------------------------------------------------------------ */
.msi-ex-series .msi-ex-series__wall {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--ms-space-4);
}
.msi-ex-series .msi-ex-series__sponsor {
        display: grid;
        gap: 6px;
        justify-items: center;
        text-align: center;
        padding: var(--ms-space-5) var(--ms-space-4);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        filter: grayscale(0.35);
        transition:
                filter var(--ms-dur-base) var(--ms-ease-out),
                border-color var(--ms-dur-base) var(--ms-ease-out),
                box-shadow var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ex-series .msi-ex-series__sponsor:hover {
        filter: none;
        border-color: color-mix(in srgb, var(--ms-family-accent) 45%, var(--ms-color-border));
        box-shadow: var(--ms-shadow-2);
}
.msi-ex-series .msi-ex-series__sponsorname {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-h4);
        font-weight: 600;
        color: var(--ms-color-text-secondary);
}
.msi-ex-series .msi-ex-series__sponsor:hover .msi-ex-series__sponsorname { color: var(--ms-color-text); }
.msi-ex-series .msi-ex-series__sponsormeta {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-tertiary);
}
.msi-ex-series .msi-ex-series__sponsor a { text-decoration: none; }

/* ============================================================
   2. EDITION — OPERATIONAL / COMMAND HERO (.msi-ex-edition)
   ============================================================ */
.msi-ex-edition.msi-presentation .msi-ex-edition__hero {
        position: relative;
        overflow: hidden;
        padding-block: var(--ms-space-8);
        border-block-end: 1px solid var(--ms-color-border);
        background:
                linear-gradient(180deg, color-mix(in srgb, var(--ms-family-accent) 8%, transparent), transparent 62%),
                linear-gradient(var(--ms-atmo-grid-strong) 1px, transparent 1px) 0 0 / 40px 40px,
                var(--ms-color-bg-deep);
}
.msi-ex-edition .msi-ex-edition__hero::before {
        /* Sweep — a single restrained operational scanline. */
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: 2px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-family-accent) 55%, transparent), transparent);
}
.msi-ex-edition .msi-ex-edition__inner {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--ms-space-4);
        width: min(var(--ms-container), 100% - 2 * var(--ms-space-5));
        margin-inline: auto;
}
.msi-ex-edition.msi-presentation .msi-ex-edition__title {
        margin: 0;
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-display);
        font-weight: 700;
        line-height: var(--ms-lh-tight);
        color: var(--ms-color-text);
}
.msi-ex-edition .msi-ex-edition__venuestrip {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--ms-space-2) var(--ms-space-3);
        color: var(--ms-color-text-secondary);
        font-size: var(--ms-fs-small);
}
.msi-ex-edition .msi-ex-edition__venuestrip > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
}
.msi-ex-edition .msi-ex-edition__venuestrip .msi-icon,
.msi-ex-edition .msi-ex-edition__venuestrip svg { color: var(--ms-family-accent); }
.msi-ex-edition .msi-ex-edition__venuestrip strong { color: var(--ms-color-text); font-weight: 600; }
.msi-ex-edition .msi-ex-edition__countrow {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--ms-space-3);
        padding-block-start: var(--ms-space-2);
}
/* Countdown — kept amber: time pressure is a status signal, not a mode accent. */
.msi-ex-edition .msi-countdown__unit {
        background: var(--ms-color-surface-raised);
        border-color: var(--ms-color-border-strong);
        box-shadow: var(--ms-shadow-1);
        min-width: 74px;
}
.msi-ex-edition .msi-ex-edition__actions { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); }

/* ------------------------------------------------------------
   2a. KPI statstrip — the command cell's live indicators.
   ------------------------------------------------------------ */
.msi-ex-edition.msi-presentation .msi-ex-edition__kpi {
        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-lg);
        overflow: hidden;
}
.msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__cell {
        position: relative;
        display: grid;
        gap: 4px;
        background: var(--ms-color-surface);
        border: 0; /* hairline band: the 1px gap shows, cells stay clean */
        padding: var(--ms-space-4) var(--ms-space-5);
        transition: background var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__cell:hover { background: var(--ms-color-surface-hi); }
.msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__num {
        font-family: var(--ms-font-mono);
        font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem);
        font-weight: 600;
        line-height: 1;
        color: var(--ms-color-text);
        direction: ltr;
        unicode-bidi: embed;
        font-variant-numeric: tabular-nums;
}
.msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__cell::before {
        content: "";
        position: absolute;
        inset-block-start: var(--ms-space-4);
        inset-inline-start: 0;
        inline-size: 2px;
        block-size: calc(100% - 2 * var(--ms-space-4));
        background: color-mix(in srgb, var(--ms-family-accent) 55%, transparent);
}
.msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__label {
        font-size: var(--ms-fs-tiny);
        text-transform: uppercase;
        color: var(--ms-color-text-tertiary);
}

/* ------------------------------------------------------------
   2b. Halls / zones cards.
   ------------------------------------------------------------ */
.msi-ex-edition .msi-ex-edition__zones {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--ms-space-4);
}
.msi-ex-edition .msi-ex-edition__zone {
        position: relative;
        display: grid;
        gap: var(--ms-space-2);
        padding: var(--ms-space-4) var(--ms-space-5);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        border-inline-start: 3px solid var(--ms-family-accent);
        transition: transform var(--ms-dur-base) var(--ms-ease-out), box-shadow var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ex-edition .msi-ex-edition__zone:hover {
        transform: translateY(-2px);
        box-shadow: var(--ms-shadow-2);
}
.msi-ex-edition .msi-ex-edition__zonecode {
        justify-self: start;
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        color: var(--ms-family-accent);
        padding: 3px 10px;
        border: 1px solid color-mix(in srgb, var(--ms-family-accent) 35%, transparent);
        border-radius: var(--ms-radius-pill);
        background: var(--ms-family-accent-soft);
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ex-edition .msi-ex-edition__zonename {
        margin: 0;
        font-size: var(--ms-fs-h4);
        font-weight: 600;
        color: var(--ms-color-text);
}
.msi-ex-edition .msi-ex-edition__zonemeta {
        display: flex;
        gap: var(--ms-space-3);
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
}
.msi-ex-edition .msi-ex-edition__zonemeta [data-mono] { color: var(--ms-color-text-secondary); }

/* ------------------------------------------------------------
   2c. Sessions timeline.
   ------------------------------------------------------------ */
.msi-ex-edition .msi-ex-edition__timeline {
        display: grid;
        gap: var(--ms-space-3);
        position: relative;
}
.msi-ex-edition .msi-ex-edition__timeline .msi-session {
        position: relative;
        grid-template-columns: 96px 1fr auto;
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        padding: var(--ms-space-4) var(--ms-space-5);
        overflow: hidden;
        transition: border-color var(--ms-dur-fast) var(--ms-ease-out), background var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ex-edition .msi-ex-edition__timeline .msi-session:hover {
        border-color: color-mix(in srgb, var(--ms-family-accent) 40%, var(--ms-color-border));
        background: var(--ms-color-surface-raised);
}
.msi-ex-edition .msi-ex-edition__timeline .msi-session__time {
        color: var(--ms-family-accent);
        font-size: var(--ms-fs-h4);
        font-weight: 500;
        padding-inline-end: var(--ms-space-4);
        border-inline-end: 1px solid var(--ms-color-hairline);
        align-self: center;
}

/* ------------------------------------------------------------
   2d. Exhibitor directory grid.
   ------------------------------------------------------------ */
.msi-ex-edition .msi-ex-edition__dirgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--ms-space-4);
}
.msi-ex-edition .msi-ex-edition__dir {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--ms-space-2) var(--ms-space-3);
        align-items: center;
        padding: var(--ms-space-4);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        transition: border-color var(--ms-dur-fast) var(--ms-ease-out), background var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ex-edition .msi-ex-edition__dir:hover {
        border-color: color-mix(in srgb, var(--ms-family-accent) 40%, var(--ms-color-border));
        background: var(--ms-color-surface-raised);
}
.msi-ex-edition .msi-ex-edition__dirbooth {
        display: grid;
        place-items: center;
        min-inline-size: 52px;
        padding: 8px 10px;
        background: var(--ms-color-bg-deep);
        border: 1px solid var(--ms-color-border-strong);
        border-radius: var(--ms-radius-md);
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-small);
        font-weight: 600;
        color: var(--ms-family-accent);
        direction: ltr;
        unicode-bidi: embed;
}
.msi-ex-edition .msi-ex-edition__dirname {
        margin: 0;
        font-size: var(--ms-fs-h4);
        font-weight: 600;
        color: var(--ms-color-text);
        line-height: var(--ms-lh-tight);
}
.msi-ex-edition .msi-ex-edition__dirname a { color: inherit; text-decoration: none; }
.msi-ex-edition .msi-ex-edition__dirname a:hover { color: var(--ms-family-accent); }
.msi-ex-edition .msi-ex-edition__dirmeta {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-2) var(--ms-space-4);
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
}
.msi-ex-edition .msi-ex-edition__dirmeta [data-mono] { color: var(--ms-color-text-secondary); }

/* ============================================================
   3. FLOORPLAN EXPERIENCE (.msi-fl-*)
   Panel + canvas + inspector sidebar. SVG internals keep the
   msi-floorplan__* class contract rendered by msi-floorplan.js.
   ============================================================ */
.msi-fl-wrap {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--ms-space-4);
        align-items: stretch;
        padding: var(--ms-space-4);
        background: var(--ms-color-bg-secondary);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
        box-shadow: var(--ms-shadow-1);
}
/* Fullscreen floorplan mode (presentation.css ships a legacy 3-track
   `240px 1fr 280px` grid for this exact class pair at higher specificity
   than a bare .msi-fl-wrap). Re-assert the v5 canvas + inspector layout. */
.msi-ex-edition .msi-floorplan--fullscreen.msi-fl-wrap {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--ms-space-4);
        min-block-size: 600px;
}
/* The legacy fullscreen stage paints an opaque flat background over the
   v5 canvas atmosphere — keep the canvas visible. */
.msi-ex-edition.msi-mode-interactive-map .msi-floorplan__stage {
        background: transparent;
}
.msi-fl-canvas {
        position: relative;
        min-block-size: 460px;
        padding: var(--ms-space-3);
        background:
                linear-gradient(var(--ms-atmo-grid) 1px, transparent 1px) 0 0 / 36px 36px,
                radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ms-family-accent, var(--ms-color-cobalt)) 5%, transparent), transparent 55%),
                var(--ms-color-bg-deep);
        border: 1px solid var(--ms-color-hairline);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        display: grid;
        place-items: center;
}
.msi-fl-canvas .msi-floorplan__svg {
        width: 100%;
        height: auto;
        max-height: 620px;
        display: block;
}
/* Halls/zones rects — dashed operational outlines. */
.msi-fl-canvas .msi-floorplan__hall {
        fill: color-mix(in srgb, var(--ms-color-surface) 42%, transparent);
        stroke: var(--ms-color-border-strong);
        stroke-width: 1;
        stroke-dasharray: 5 4;
}
.msi-fl-canvas .msi-floorplan__label {
        font-family: var(--ms-font-mono);
        font-size: 10px;
        fill: var(--ms-color-text-tertiary);
        pointer-events: none;
        text-anchor: middle;
        direction: ltr;
        unicode-bidi: embed;
}
/* Booths — precision tiles with clear state grammar. */
.msi-fl-canvas .msi-floorplan__booth {
        fill: var(--ms-color-surface-raised);
        stroke: var(--ms-color-border-strong);
        stroke-width: 1;
        cursor: pointer;
        outline: none;
        transition:
                fill var(--ms-dur-fast) var(--ms-ease-out),
                stroke var(--ms-dur-fast) var(--ms-ease-out),
                stroke-width var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-fl-canvas .msi-floorplan__booth:hover,
.msi-fl-canvas .msi-floorplan__booth:focus-visible {
        fill: color-mix(in srgb, var(--ms-family-accent, var(--ms-color-cobalt)) 20%, var(--ms-color-surface-raised));
        stroke: var(--ms-family-accent, var(--ms-color-cobalt));
        stroke-width: 1.5;
}
.msi-fl-canvas .msi-floorplan__booth.is-highlighted {
        fill: color-mix(in srgb, var(--ms-color-teal) 26%, var(--ms-color-surface-raised));
        stroke: var(--ms-color-teal);
        stroke-width: 1.5;
}
.msi-fl-canvas .msi-floorplan__booth.is-selected {
        fill: color-mix(in srgb, var(--ms-color-amber) 30%, var(--ms-color-surface-raised));
        stroke: var(--ms-color-amber);
        stroke-width: 2;
}
.msi-fl-canvas .msi-floorplan__booth:focus-visible {
        stroke: var(--ms-color-text);
        stroke-width: 2;
}

/* Sidebar — search, legend chips, booth inspector. */
.msi-fl-sidebar {
        display: grid;
        gap: var(--ms-space-3);
        align-content: start;
        position: sticky;
        inset-block-start: calc(var(--ms-header-h) + 70px);
        max-block-size: calc(100vh - var(--ms-header-h) - 90px);
        overflow: hidden auto;
        scrollbar-width: thin;
        scrollbar-color: var(--ms-color-neutral-3) transparent;
}
.msi-fl-sidebar .msi-input {
        background: var(--ms-color-surface);
        border-color: var(--ms-color-border-strong);
}
.msi-fl-sidebar .msi-input:focus {
        border-color: var(--ms-family-accent, var(--ms-color-cobalt));
        box-shadow: 0 0 0 3px var(--ms-family-accent-soft, var(--ms-color-cobalt-soft));
}
.msi-fl-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-2);
}
.msi-fl-legend__chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 11px;
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-secondary);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-pill);
        transition: border-color var(--ms-dur-fast) var(--ms-ease-out), color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-fl-legend__chip:hover {
        border-color: var(--ms-color-border-strong);
        color: var(--ms-color-text);
}
.msi-fl-legend__chip i {
        inline-size: 10px;
        block-size: 10px;
        border-radius: 2px;
        background: var(--ms-color-surface-raised);
        border: 1px solid var(--ms-color-border-strong);
}
.msi-fl-legend__chip i.is-highlighted { background: var(--ms-color-teal-soft); border-color: var(--ms-color-teal); }
.msi-fl-legend__chip i.is-selected    { background: var(--ms-color-amber-soft); border-color: var(--ms-color-amber); }
.msi-fl-legend__chip--zone {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text);
        border-color: color-mix(in srgb, var(--ms-family-accent, var(--ms-color-cobalt)) 30%, var(--ms-color-border));
        background: var(--ms-family-accent-soft, var(--ms-color-cobalt-soft));
}
.msi-fl-legend__chip--zone b {
        font-weight: 600;
        color: var(--ms-family-accent, var(--ms-color-cobalt));
        direction: ltr;
        unicode-bidi: embed;
}
/* Booth inspector panel ([data-msi-floorplan-panel] content from JS). */
.msi-fl-inspector {
        display: grid;
        gap: var(--ms-space-3);
        align-content: start;
        min-block-size: 200px;
        padding: var(--ms-space-4);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
}
.msi-fl-inspector .msi-floorplan__empty {
        margin: 0;
        color: var(--ms-color-text-tertiary);
        font-size: var(--ms-fs-small);
        text-align: center;
        padding-block: var(--ms-space-5);
}
.msi-fl-inspector .msi-floorplan__boothinfo {
        display: grid;
        gap: var(--ms-space-2);
        justify-items: start;
}
.msi-fl-inspector .msi-floorplan__boothtitle {
        margin: 0;
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-h3);
        font-weight: 600;
        color: var(--ms-color-text);
}

/* ============================================================
   4. RESPONSIVE — 900 / 640
   ============================================================ */
@media (max-width: 900px) {
        /* Floorplan: sidebar stacks below the canvas. */
        .msi-fl-wrap,
        .msi-ex-edition .msi-floorplan--fullscreen.msi-fl-wrap { grid-template-columns: 1fr; }
        .msi-fl-canvas { min-block-size: 340px; }
        .msi-fl-sidebar {
                position: static;
                inset-block-start: auto;
                max-block-size: none;
                overflow: visible;
        }
        /* Stats grids → 2 columns. */
        .msi-ex-series .msi-ex-series__statsband { grid-template-columns: repeat(2, 1fr); }
        .msi-ex-edition.msi-presentation .msi-ex-edition__kpi { grid-template-columns: repeat(2, 1fr); }
        .msi-ex-edition .msi-ex-edition__timeline .msi-session { grid-template-columns: 84px 1fr; }
        .msi-ex-edition .msi-ex-edition__timeline .msi-session .msi-btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
        .msi-ex-series.msi-presentation .msi-ex-series__hero { padding-block: var(--ms-space-7) var(--ms-space-6); }
        .msi-ex-edition.msi-presentation .msi-ex-edition__hero { padding-block: var(--ms-space-7); }
        .msi-ex-series .msi-ex-series__statsband { grid-template-columns: 1fr; }
        .msi-ex-edition.msi-presentation .msi-ex-edition__kpi { grid-template-columns: 1fr; }
        .msi-ex-series .msi-ex-series__wall,
        .msi-ex-edition .msi-ex-edition__zones,
        .msi-ex-edition .msi-ex-edition__dirgrid { grid-template-columns: 1fr; }
        /* Horizontal-scroll rails on the smallest screens. */
        .msi-ex-series .msi-ex-series__statsband,
        .msi-ex-edition.msi-presentation .msi-ex-edition__kpi {
                grid-template-columns: none;
                grid-auto-flow: column;
                grid-auto-columns: minmax(150px, 1fr);
                overflow: hidden auto;
                scroll-snap-type: inline mandatory;
        }
        .msi-ex-series .msi-ex-series__stat,
        .msi-ex-edition .msi-ex-edition__kpi .msi-cmd-statblock__cell { scroll-snap-align: start; }
        .msi-ex-edition .msi-ex-edition__timeline .msi-session { grid-template-columns: 1fr; }
        .msi-ex-edition .msi-ex-edition__timeline .msi-session__time {
                border-inline-end: none;
                padding-inline-end: 0;
        }
        .msi-fl-wrap { padding: var(--ms-space-3); }
        .msi-fl-canvas { min-block-size: 260px; padding: var(--ms-space-2); }
}