/* ── Meeting mode — the tiled rig (M2) ───────────────────────────────────────
 * A MODE of the board, never a destination: the rig mounts inside `.experiment-host`
 * as a sibling of the host bar, and the live experiment stage is REPARENTED into the
 * presenter section rather than re-mounted. So everything here has to be able to
 * disappear again without leaving a mark — no rule below touches `.experiment-host`,
 * `#experiment-stage` or anything else it does not own.
 *
 * Structure comes from `js/shared/mcs/meeting/rig/**`. The GRID ITSELF IS NOT HERE:
 * `grid-template-areas`/`-rows` are computed from the section descriptor and written
 * inline by `gridTemplate.js`, because the descriptor is data and a stylesheet cannot
 * be. What lives here is everything that is the same whatever the descriptor says.
 *
 * Theming: Inspector's own tokens (`css/main.css`), like every sibling stylesheet, so
 * the rig tracks the app rather than carrying a second palette. Note that daigrammar's
 * canvas stamps its OWN theme class on its host — a borrowed daigram keeps its own
 * light/dark, which is correct: it is the same board you were just looking at.
 */

/* ── the rig root ────────────────────────────────────────────────────────────
 * `min-height: 0` is load-bearing, not defensive: a grid item inside a flex column
 * defaults to `min-height: auto`, so a tall filmstrip would push the rig past the host
 * instead of the rows sharing what there is. */
.mtg-rig {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: var(--spacing-sm);
}

/* ── sections ────────────────────────────────────────────────────────────────
 * RULE 2: an empty section takes no space but is NOT removed. The zero height is the
 * inline `grid-template-rows` track; this only stops its (nonexistent) content from
 * spilling out of a zero-height box. `display: none` would delete the row and make the
 * grid re-flow on every join and leave, which is the jank the story rules out. */
.mtg-section {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.mtg-section--empty {
    padding: 0;
    border: none;
}

/* `policy: 'stage'` — 0..n presenters side by side, letterboxed. */
.mtg-section--stage {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

/* `policy: 'strip'` — a row of cameras, cropped to fill. */
.mtg-section--strip {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
    overflow-x: auto;
}
.mtg-section--strip .mtg-tile {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* RULE 3: zero presenters → the only growing section FILLS the rig, and a strip that
 * fills is a gallery rather than a very tall row. This is the ordinary all-cameras
 * standup, and it is the one place `--fills` changes anything visually. */
.mtg-section--strip.mtg-section--fills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    overflow: auto;
}
.mtg-section--strip.mtg-section--fills .mtg-tile {
    height: auto;
    aspect-ratio: auto;
}

/* `policy: 'chips'` — everybody publishing nothing, as monograms. */
.mtg-section--chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

/* ── the borrowed experiment stage ───────────────────────────────────────────
 * The SAME node that was in `#experiment-stage`, moved. `:empty` keeps the slot from
 * claiming a share of the presenter row when nothing has been lent to it — the slot
 * always exists, because the loan can arrive after the rig is built. */
.mtg-stage {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}
.mtg-stage:empty {
    display: none;
}
.mtg-stage > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── tiles ───────────────────────────────────────────────────────────────────
 * The canvas is always present and always sized; only its opacity tracks liveness, so
 * a track arriving does not resize anything and the backing store never re-allocates
 * for a purely visual change (each re-allocation costs a cleared frame — canvasBacking.js). */
.mtg-tile {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.mtg-tile__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.mtg-tile--live .mtg-tile__video {
    opacity: 1;
}
.mtg-tile__monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-subtle);
    color: var(--shade-white);
    font-size: var(--font-size-h4);
    font-weight: 600;
    user-select: none;
}
.mtg-tile--live .mtg-tile__monogram {
    display: none;
}
.mtg-tile__name {
    position: absolute;
    left: var(--spacing-xs);
    bottom: var(--spacing-xs);
    max-width: calc(100% - var(--spacing-sm));
    padding: 1px 6px;
    border-radius: var(--border-radius-sm);
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    font-size: var(--font-size-ui-sm);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.mtg-tile__name:empty {
    display: none;
}
.mtg-tile--self {
    border-color: var(--border-strong);
}

/* THE SPEAKING RING. An inset shadow rather than a border so lighting up cannot change
 * the tile's box and re-lay-out the strip mid-sentence. Dormant until the media session
 * exposes `onSpeaking` — see rig/speaking.js. */
.mtg-tile--speaking {
    box-shadow: inset 0 0 0 2px var(--accent-confirm);
}
.mtg-tile--muted .mtg-tile__name::after {
    content: ' (muted)';
    color: var(--text-muted);
}

/* ── chips ───────────────────────────────────────────────────────────────────
 * The monogram and its colour are presence's own (`monogram()`, `colorForClientId()`),
 * so a person reads the same here as in the who's-here zone in the host bar. */
.mtg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 180px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-ui-sm);
}
.mtg-chip__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-subtle);
    color: var(--shade-white);
    font-size: var(--font-size-ui-xs);
    font-weight: 600;
}
.mtg-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mtg-chip__name:empty {
    display: none;
}
.mtg-chip--speaking {
    border-color: var(--accent-confirm);
}
.mtg-chip--self {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ── controls ────────────────────────────────────────────────────────────────
 * Floating chrome over the grid, the way daigrammar's view-actions zone floats over its
 * canvas — deliberately NOT a grid row, so the rows stay the descriptor's and nobody
 * else's. */
.mtg-controls {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-md);
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}
.mtg-btn {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font: inherit;
    font-size: var(--font-size-ui-sm);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.mtg-btn:hover:not(:disabled) {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.mtg-btn:disabled {
    color: var(--text-disabled);
    cursor: default;
}
.mtg-btn:focus-visible {
    outline: 2px solid var(--interactive-focus);
    outline-offset: 1px;
}
.mtg-btn--on {
    color: var(--text-primary);
    border-color: var(--accent-main);
}
.mtg-btn--leave {
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

/* A REJECTION IS RENDERED, NEVER INFERRED — every intent that fails leaves its
 * `.message` here rather than a button that silently did nothing. */
.mtg-notice {
    color: var(--accent-caution);
    font-size: var(--font-size-ui-sm);
    max-width: 320px;
}
.mtg-notice:empty {
    display: none;
}