/* Everyone in the call: each person's picture, how the stage lays them out, and the call small in
   the corner of another page. */

/* ---------- A person's picture ---------- */

.pod-tile {
    position: relative;
    display: grid;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-muted);
    aspect-ratio: 16 / 9;
    isolation: isolate;
}

.pod-feed {
    display: block;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pod-feed[hidden] {
    display: none;
}

/* Your own picture is mirrored, as in a mirror. */
.pod-feed--mirror {
    scale: -1 1;
}

/* A ring that lights while someone is talking. It sits inside the picture, so nothing shifts. It
   switches without fading: it changes with every pause in speech, and a fade that often keeps the
   page drawing frames for the whole call. */
.pod-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--space-1) solid var(--color-success);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.pod-tile[data-speaking]::after {
    opacity: 1;
}

.pod-tile.is-away > * {
    opacity: var(--opacity-disabled);
}

.pod-tile-initial {
    display: grid;
    grid-area: 1 / 1;
    place-self: center;
    place-items: center;
    width: 28%;
    max-width: calc(var(--space-24) * 2);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.pod-tile-initial[hidden],
.pod-tile-status[hidden],
.pod-tile-muted[hidden],
.pod-tile-tags:empty {
    display: none;
}

.pod-tile-plate,
.pod-tile-status {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: calc(100% - var(--space-8));
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    box-shadow: var(--shadow-surface);
}

.pod-tile-plate {
    inset: auto auto var(--space-4) var(--space-4);
}

.pod-tile-status {
    inset: var(--space-4) auto auto var(--space-4);
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
}

.pod-tile-name {
    overflow: hidden;
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
}

.pod-tile-tags {
    color: var(--color-text-muted);
}

.pod-tile-muted {
    display: inline-grid;
    color: var(--color-danger-text);
}

.pod-tile-muted svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

/* ---------- Where each recording is: a chip in the corner of its picture ---------- */

.pod-arrive {
    position: absolute;
    inset: auto var(--space-4) var(--space-4) auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    cursor: pointer;
}

.pod-arrive[hidden] {
    display: none;
}

.pod-arrive svg {
    flex: none;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

.pod-arrive.is-behind > svg {
    color: var(--color-text-muted);
}

.pod-arrive.is-here {
    padding: var(--space-1);
    color: var(--color-success);
}

.pod-arrive:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
}

.pod-pie-ring {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
}

.pod-pie-fill {
    fill: none;
    stroke: var(--color-success);
    stroke-width: 6;
}

.pod-arrive-pop[popover] {
    position-area: block-start span-inline-start;
    width: min(calc(100vw - var(--space-8)), 34ch);
    margin-block-end: var(--space-3);
    transform-origin: 100% 100%;
}

.pod-arrive-pop p {
    margin: 0;
}

.pod-arrive-pop > * + * {
    margin-block-start: var(--space-4);
}

.pod-arrive-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* A determinate bar for something on its way. */
.pod-bar {
    display: block;
    overflow: hidden;
    height: var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
}

.pod-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--color-text);
    transform-origin: left center;
    scale: var(--value, 0) 1;
}

@media (prefers-reduced-motion: no-preference) {
    .pod-bar > span {
        transition: scale var(--duration-move) var(--ease-settle);
    }
}

/* ---------- Pin: on a picture while the pointer is over it, or it has focus, or always where
   there's no pointer to hover with. Pinned, it stays in sight to unpin. ---------- */

.pod-stage-item {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
}

.pod-pin {
    position: absolute;
    inset: var(--space-4) var(--space-4) auto auto;
    display: grid;
    place-items: center;
    width: calc(var(--space-12) + var(--space-2));
    height: calc(var(--space-12) + var(--space-2));
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.pod-pin[hidden] {
    display: none;
}

.pod-pin svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

.pod-pin:hover {
    color: var(--color-text);
}

.pod-pin:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
}

.pod-pin[aria-pressed="true"] {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
}

@media (hover: hover) {
    .pod-pin:not([aria-pressed="true"]) {
        opacity: 0;
    }

    .pod-stage-item:hover > .pod-pin,
    .pod-pin:focus-visible {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pod-pin {
        transition: opacity var(--duration-fast) var(--ease-standard);
    }
}

/* ---------- The stage ---------- */

/* The stage fills the box its page gives it, and sizes everyone to fit: no one is ever scrolled
   out of sight. Each picture is as large as the count allows, cropped toward portrait (no taller
   than 3:4) rather than shrunk to keep 16:9. The rows follow the box's shape, whichever gives
   each picture more: three people go three across in a wide box, two over one in a squarer one,
   and one above another in a tall one; a row that isn't full sits in the middle. */
.pod-stage {
    --stage-gap: var(--space-4);
    position: relative;
    container-type: size;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--stage-gap);
    min-height: 0;
}

/* Two across in one row unless the count or the box's shape says otherwise. Kept at low
   specificity so the rules for each count win. */
.pod-stage > .pod-stage-item {
    --cols: 2;
    --rows: 1;
}

.pod-stage:not(.pod-stage--spot) > .pod-stage-item:not(.is-self) {
    --cell-w: calc((100cqw - var(--stage-gap) * (var(--cols) - 1)) / var(--cols));
    --cell-h: calc((100cqh - var(--stage-gap) * (var(--rows) - 1)) / var(--rows));
    flex: none;
    grid-template-rows: minmax(0, 1fr);
    width: min(var(--cell-w), var(--cell-h) * 16 / 9);
    height: min(var(--cell-h), var(--cell-w) * 4 / 3);
}

.pod-stage:not(.pod-stage--spot) > .pod-stage-item:not(.is-self) .pod-tile {
    height: 100%;
    aspect-ratio: auto;
}

.pod-stage[data-count="1"] > .pod-stage-item {
    --cols: 1;
}

.pod-stage[data-count="3"] > .pod-stage-item,
.pod-stage[data-count="5"] > .pod-stage-item,
.pod-stage[data-count="6"] > .pod-stage-item {
    --cols: 3;
}

.pod-stage[data-count="4"] > .pod-stage-item,
.pod-stage[data-count="5"] > .pod-stage-item,
.pod-stage[data-count="6"] > .pod-stage-item {
    --rows: 2;
}

@container (max-aspect-ratio: 23 / 20) {
    .pod-stage[data-count="2"] > .pod-stage-item {
        --cols: 1;
        --rows: 2;
    }
}

@container (max-aspect-ratio: 17 / 10) {
    .pod-stage[data-count="3"] > .pod-stage-item {
        --cols: 2;
        --rows: 2;
    }
}

@container (max-aspect-ratio: 4 / 5) {
    .pod-stage[data-count="3"] > .pod-stage-item {
        --cols: 1;
        --rows: 3;
    }
}

@container (min-aspect-ratio: 3 / 1) {
    .pod-stage[data-count="4"] > .pod-stage-item {
        --cols: 4;
        --rows: 1;
    }
}

@container (max-aspect-ratio: 1 / 1) {
    .pod-stage[data-count="5"] > .pod-stage-item,
    .pod-stage[data-count="6"] > .pod-stage-item {
        --cols: 2;
        --rows: 3;
    }
}

@media (min-width: 900px) and (min-height: 541px) {
    .pod-stage {
        --stage-gap: var(--space-6);
    }
}

/* Everyone else large, and you small over the corner, the way a call shows you to yourself. */
.pod-stage > .pod-stage-item.is-self {
    position: absolute;
    inset: auto 0 0 auto;
    width: min(28cqw, calc(var(--space-24) * 5));
}

.pod-stage-item.is-self .pod-tile {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
}

.pod-stage-item.is-self .pod-tile-plate {
    inset: auto auto var(--space-2) var(--space-2);
    padding: 0 var(--space-3);
}

/* Speaker and pinned: one person large, and everyone else in a strip: under them, or beside
   them when the box is much wider than it's tall (a phone on its side). --strip is how many are
   in the strip. */
.pod-stage-frame {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--stage-gap);
    min-width: 0;
    height: 100%;
}

.pod-stage-spot {
    container-type: size;
    display: grid;
    flex: 1;
    place-items: center;
    min-width: 0;
    min-height: 0;
}

.pod-stage-spot > .pod-stage-item {
    grid-template-rows: minmax(0, 1fr);
    width: min(100cqw, 100cqh * 16 / 9);
    height: min(100cqh, 100cqw * 3 / 4);
}

.pod-stage-spot .pod-tile {
    height: 100%;
    aspect-ratio: auto;
}

.pod-stage-spot .pod-tile-plate {
    inset: auto auto var(--space-6) var(--space-6);
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
}

.pod-stage-strip {
    display: flex;
    flex: none;
    justify-content: center;
    gap: var(--space-4);
}

.pod-stage-strip > .pod-stage-item {
    width: min(calc(var(--space-24) * 4), calc((100cqw - var(--space-4) * (var(--strip) - 1)) / var(--strip)), 24cqh * 16 / 9);
}

@container (min-aspect-ratio: 2 / 1) {
    .pod-stage-frame {
        flex-direction: row;
    }

    .pod-stage-strip {
        flex-direction: column;
    }

    .pod-stage-strip > .pod-stage-item {
        width: min(26cqw, calc((100cqh - var(--space-4) * (var(--strip) - 1)) / var(--strip) * 16 / 9));
    }
}

.pod-stage-strip .pod-tile-tags,
.pod-stage-strip .pod-arrive-text {
    display: none;
}

.pod-stage-strip .pod-pin {
    inset: var(--space-2) var(--space-2) auto auto;
    width: var(--space-12);
    height: var(--space-12);
}

/* ---------- The call, small, on another page ---------- */

.pod-mini {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-elevated);
}

.pod-mini-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.pod-mini-tiles:is([data-count="1"]) {
    grid-template-columns: minmax(0, 1fr);
}

.pod-mini-tiles:is([data-count="3"], [data-count="5"], [data-count="6"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pod-mini-tiles:is([data-count="5"], [data-count="6"]) .pod-tile-plate,
.pod-mini .pod-tile-status,
.pod-mini .pod-tile-tags,
.pod-mini .pod-pin,
.pod-mini .pod-arrive-text {
    display: none;
}

.pod-mini .pod-tile {
    border-radius: var(--radius-md);
}

.pod-mini .pod-tile-plate {
    inset: auto auto var(--space-2) var(--space-2);
    padding: 0 var(--space-3);
}

.pod-mini .pod-arrive {
    inset: auto var(--space-2) var(--space-2) auto;
}

.pod-mini-foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pod-mini-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pod-mini-back {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: calc(var(--space-16) + var(--space-2));
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: start;
    cursor: pointer;
}

.pod-mini-back:hover {
    background-color: var(--color-surface-muted);
}

.pod-mini-back:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: calc(var(--focus-ring-offset) * -1);
}

.pod-mini-back > [hidden] {
    display: none;
}

.pod-mini-go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.pod-mini-go svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
}

/* A phone: everyone in one row, so the call takes as little of the page as it can. */
@media (max-width: 520px) {
    .pod-mini .pod-mini-tiles {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
    }

    .pod-mini .pod-tile-plate {
        display: none;
    }
}