/* Control Room — zone grid + asset card (Phase 3)
/* --------------------------------------------------------------------------
/* Replaces the collapsible kanban on section_detail with a content-adaptive
/* grid of zones. Each .zone is a grid child holding its own .zone-head atom
/* and a vertical stack of .zone-card children. Unused on routes / execute
/* pages — those still use .card-columns until Phase 5.
/* --------------------------------------------------------------------------- */

@layer components {

    /* Grid of zones — auto-fit so 2 zones fill the width, 8 zones wrap. */
    .zone-grid {
        --zone-min: 22ch;
        --zone-gap: 1.25rem;

        align-items: start;
        display: grid;
        gap: var(--zone-gap);
        grid-template-columns: repeat(auto-fit, minmax(var(--zone-min), 1fr));
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block: var(--block-space);
        padding-inline: var(--main-padding);
        text-align: start;
    }

    /* Zone wrapper — head + card stack + optional add CTA. */
    .zone {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        min-inline-size: 0;
    }

    .zone__cards {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Layout-only — typography + border come from .btn--subtle--dashed.
       Zone add CTA stretches full-width across its zone cell. */
    .zone__add {
        justify-content: center;
        padding-block: 0.4rem;
    }

    /* Empty-zone CTA: taller, stacked "Empty" muted prelude above the action. */
    .zone__add--empty {
        flex-direction: column;
        gap: 0.35rem;
        padding-block: 1.25rem;
    }

    .zone__add-muted {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 400;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    /* Asset card on the zone grid — Control Room language.
       Background tint picks the matching --surface-* token per state;
       border softens with --card-color; 3px left inset stripe is the
       same --card-color so cards read in a glance. */
    .zone-card {
        background: var(--surface);
        border: 1px solid var(--rule);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        color: var(--ink);
        display: grid;
        gap: 0.45rem;
        padding: 0.7rem 0.85rem 0.7rem 1rem;
        position: relative;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .zone-card[data-state="warning"] {
        background: var(--surface-warn);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-warning));
    }

    .zone-card[data-state="critical"] {
        background: var(--surface-crit);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-critical));
    }

    @media (any-hover: hover) {
        .zone-card:hover {
            border-color: var(--primary);
            box-shadow: inset 3px 0 0 var(--card-color), 0 0 0 1px var(--primary);
        }
    }

    /* Invisible link sits over the full card; screen-readers get the text. */
    .zone-card__link {
        inset: 0;
        position: absolute;
    }

    .zone-card__header {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.6ch;
    }

    .zone-card__iso,
    .zone-card__type {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .zone-card__header .status-chip {
        margin-inline-start: auto;
    }

    .zone-card__title {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin: 0;
    }

    .zone-card__meta {
        color: var(--ink-soft);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .zone-card__alarm {
        color: var(--status-warn-fg);
        font-weight: 700;
    }

    .zone-card[data-state="critical"] .zone-card__alarm {
        color: var(--status-crit-fg);
    }

    .zone-card__updated {
        color: var(--ink-faint);
        margin-inline-start: auto;
    }
}