:root {
  color-scheme: dark;
  --ink: #0a0c0f;
  --surface: #12161b;
  --raised: #1a2027;
  --sunken: #0d1116;
  --line: #262e37;
  --line-soft: #1c232b;
  --text: #e6ecf2;
  --muted: #94a1ae;
  --faint: #66727f;
  --accent: #4fd1c5;
  --accent-ink: #04211f;
  --accent-soft: rgb(79 209 197 / 0.13);
  --accent-line: rgb(79 209 197 / 0.45);
  --warn: #efb45f;
  --danger: #ff7d6e;
  --danger-soft: rgb(255 125 110 / 0.1);
  --danger-line: rgb(255 125 110 / 0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--ink);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page {
  display: flex;
  min-height: 100dvh;
}

h1,
h2 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.15rem;
}

.lede {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ lobby */

.lobby {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6vh 1.2rem 3rem;
  background:
    radial-gradient(70rem 34rem at 50% -18rem, #16202a 0%, transparent 62%),
    var(--ink);
}

.lobby .card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
}

.brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.brand-name {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
}

.lobby .lede {
  margin: 0.35rem 0 1.3rem;
}

label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

input[type="text"],
select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text);
  font: inherit;
}

/* The lobby asks two questions now -- which room, and who you are -- and two
   boxes with no air between them read as one field split in half. The air is on
   the field rather than between an input and the next label because with
   signing in switched on the name field is not there at all, and a rule that
   measured from the input above would then be measuring from nothing. */
.lobby .field + .field {
  margin-top: 1rem;
}

/* Signing in replaces the name field with a sentence, so it sits where the
   field would have been and reads as part of the same question. */
.signed-in {
  margin: 0 0 1.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.signed-in strong {
  color: var(--text);
  font-weight: 600;
}

/* `hidden` is an attribute the browser honours with a user-agent rule, and
   every `display` in this file outranks a user-agent rule. Without this,
   hiding a `label` or a `.status` here does nothing at all -- which is a
   whole class of bug that only shows up as an element that will not go away. */
[hidden] {
  display: none !important;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

#join {
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  font-weight: 620;
  background: var(--accent);
  color: var(--accent-ink);
}

#join:not(:disabled):hover {
  filter: brightness(1.08);
}

.status {
  margin: 0.9rem 0 0;
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.status:empty {
  margin: 0;
  min-height: 0;
}

.alert {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.87rem;
}

/* ------------------------------------------------------------------- room */

.shell {
  flex: 1;
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  height: 100dvh;
}

.roster {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}

.roster-title {
  min-width: 0;
}

.roster-title h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.pill[data-state="connected"] {
  color: var(--accent);
  border-color: var(--accent-line);
}

.pill[data-state="lost"] {
  color: var(--danger);
  border-color: var(--danger-line);
}

.participants {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.participants li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.participants li[data-speaking="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.participants li[data-state="unknown"] .state,
.participants li[data-state="unknown"] .who {
  color: var(--muted);
}

.level {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f3841;
}

li[data-speaking="true"] .level {
  background: var(--accent);
  animation: pulse 1.1s ease-out infinite;
}

li[data-muted="true"] .level {
  background: var(--danger);
}

li[data-state="unknown"] .level {
  background: transparent;
  border: 1px dashed #4a5560;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(79 209 197 / 0.45);
  }
  100% {
    box-shadow: 0 0 0 8px rgb(79 209 197 / 0);
  }
}

.who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.you {
  color: var(--faint);
  font-size: 0.75rem;
  margin-left: 0.35rem;
}

.state {
  flex: none;
  font-size: 0.74rem;
  color: var(--muted);
}

li[data-muted="true"] .state {
  color: var(--danger);
}

li[data-speaking="true"] .state {
  color: var(--accent);
}

.heard {
  grid-column: 2 / -1;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
}

.foot {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  word-break: break-all;
}

.foot-notice {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.foot-notice:hover,
.foot-notice:focus-visible {
  color: var(--text);
}

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

.main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.share-view {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.share-stats {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  margin: 0;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(4 7 10 / 0.74);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.share-acts {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: flex;
  gap: 0.4rem;
}

.share-act {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(4 7 10 / 0.74);
  color: var(--text);
  font-size: 0.78rem;
}

.share-act:hover {
  border-color: #38424e;
}

.share-act[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-line);
}

.share-act .icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-frame {
  aspect-ratio: 16 / 9;
  max-height: 58dvh;
  background: #04070a;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
}

.share-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.share-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.share-who {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/*
 * Fullscreen takes the roster and the tiles away, and with them the only two
 * places the page showed who was talking and whether the link was up. This line
 * is inside the stage, which fullscreen keeps.
 */
.share-live {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  order: 1;
  flex-basis: 100%;
}

.share-speaking {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.share-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.share-tab {
  background: var(--raised);
  border-color: var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

.share-tab[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.cards {
  list-style: none;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 68rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
}

.cards[data-compact="true"] {
  margin: 0;
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.card-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}

.card-tile[data-speaking="true"] {
  outline-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.card-tile[data-state="unknown"] {
  border-style: dashed;
  border-color: #3a444f;
}

/*
 * The picture is the button and the caption underneath is not, so the ring a
 * keyboard user sees is drawn around the picture rather than around the tile.
 */
.card-press {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
}

.card-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.card-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-tile[data-video="true"] .avatar {
  display: none;
}

.card-tile[data-middle="true"] {
  border-color: var(--accent-line);
}

.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #232c35;
  color: var(--muted);
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.card-tile[data-speaking="true"] .avatar {
  background: var(--accent-soft);
  color: var(--accent);
}

.card-tile[data-muted="true"] .avatar {
  color: var(--danger);
}

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.card-foot .who {
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ the middle */

/*
 * One tile fills the stage and everything else goes to a strip that scrolls.
 * Only the tile in the middle ever moves in the DOM; `#share` and `#cards` stay
 * where they were written and the grid places them, which is why a shared
 * screen dropping to the strip does not take its video out of the document.
 *
 * `.reel` exists for the one layout that needs the shared screen and the tiles
 * to scroll together, and is `display: contents` in every other, so the three
 * layouts that were here before focus was are laid out by exactly the rules
 * they always were.
 */
.reel {
  display: contents;
}

.spotlight {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.stage[data-layout="focus"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-rows: minmax(0, 1fr);
  gap: 0.9rem;
  overflow: hidden;
}

.stage[data-layout="focus"] .spotlight {
  grid-area: 1 / 1;
}

.stage[data-layout="focus"] .cards {
  margin: 0;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.spotlight .card-tile {
  flex: 1;
  min-width: 0;
  height: 100%;
}

.spotlight .card-press {
  flex: 1;
  min-height: 0;
}

.spotlight .card-frame {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

/* A face is not a screen: filling the frame with it would cut the top of the
   head off, which is exactly what somebody asking to look at one person does
   not want. */
.spotlight .card-frame video {
  object-fit: contain;
}

/* Somebody with no camera is a name, and the point of asking to look at one
   person is as true of a name as of a picture -- so it is drawn at the size of
   the space it was given rather than at the size it had in the grid. */
.spotlight .avatar {
  width: min(9rem, 26%);
  height: auto;
  aspect-ratio: 1;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
}

.spotlight .card-foot .who {
  font-size: 0.95rem;
}

/* A person in the middle: the shared screen and the tiles scroll together on
   the right, so one press on the small picture brings the screen back. */
.stage[data-layout="focus"][data-main="person"] .reel {
  grid-area: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 0;
  overflow-y: auto;
}

.stage[data-layout="focus"][data-main="person"] .share {
  flex: none;
}

.stage[data-layout="focus"][data-main="person"] .share-stats {
  display: none;
}

.stage[data-layout="focus"][data-main="person"] .act-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The shared screen in the middle: it is a child of the stage in its own
   right, so the grid puts it in the first column without anything moving. */
.stage[data-layout="focus"][data-main="share"] .share {
  grid-area: 1 / 1;
  min-height: 0;
}

.stage[data-layout="focus"][data-main="share"] .share-view {
  flex: 1;
  min-height: 0;
}

.stage[data-layout="focus"][data-main="share"] .share-frame {
  aspect-ratio: auto;
  max-height: none;
  height: 100%;
}

.stage[data-layout="focus"][data-main="share"] .cards {
  grid-area: 1 / 2;
  min-height: 0;
  overflow-y: auto;
}

/* ------------------------------------------------------------ bench view */

.bench {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 0.2rem;
}

.bench-head {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.bench-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--faint);
  max-width: 46rem;
}

.link {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sunken);
}

.link div {
  min-width: 0;
}

.link dt {
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.link dd {
  margin: 0.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.95rem;
}

[data-missing="true"] {
  color: var(--faint);
  cursor: help;
}

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.8rem;
}

.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  background: var(--sunken);
  transition: border-color 0.25s ease;
}

.tile[data-changed="true"] {
  border-color: var(--accent);
}

.tile[data-paused="true"] {
  border-color: var(--danger-line);
}

.frame {
  aspect-ratio: 16 / 9;
  background: #04070a;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tile-head .who {
  font-size: 0.88rem;
}

.badge {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.badge[data-missing="true"] {
  color: var(--faint);
  border-color: var(--line);
}

.readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 0.5rem;
  margin: 0.55rem 0 0;
}

.readout dt {
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.readout dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.trail {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.rungs {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.rungs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.76rem;
}

.rungs li[data-idle="true"] {
  opacity: 0.55;
}

.rung-name {
  flex: none;
  width: 3rem;
  color: var(--accent);
}

.rung-size {
  flex: none;
  width: 5.5rem;
  color: var(--muted);
}

.rung-rate {
  flex: none;
  width: 5rem;
  text-align: right;
}

.rung-limit {
  flex-basis: 100%;
  font-size: 0.7rem;
  color: var(--danger);
}

.rung-note {
  color: var(--muted);
  font-family: inherit;
}

/* --------------------------------------------------------- notices, bar */

.notice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 1.2rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text);
}

.link-button {
  flex: none;
  background: none;
  border: 0;
  padding: 0.1rem 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
}

.main .alert {
  margin: 0.6rem 1.2rem 0;
}

.banner {
  margin: 0.6rem 1.2rem 0;
  padding: 0.65rem 0.9rem;
  background: var(--raised);
  border: 1px solid var(--warn);
  color: var(--warn);
  text-align: left;
  font-size: 0.85rem;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  font-size: 0.85rem;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.control:not(:disabled):hover {
  border-color: #38424e;
}

.control .icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control[data-on="true"] {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.control[data-alert="true"] {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.control-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  padding-left: 0.35rem;
  border-left: 1px solid var(--line);
}

.control.chevron {
  padding-left: 0.6rem;
}

.control.chevron .icon {
  transition: transform 0.15s ease;
}

.control.chevron[data-on="true"] .icon {
  transform: rotate(180deg);
}

.control.danger {
  color: var(--danger);
  border-color: var(--danger-line);
}

#leave {
  margin-left: auto;
}

/* ------------------------------------------------------------- fullscreen */

/*
 * Two ways in, one layout. `native` is the browser's fullscreen on the room
 * element; `fallback` is the same room pinned over the window for the browsers
 * -- iOS Safari among them -- that will not hand fullscreen to anything but a
 * video. The control bar is inside the room either way, so muting and leaving
 * are where they were.
 */
#room[data-fullscreen]:not([data-fullscreen="off"]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

#room[data-fullscreen="fallback"] {
  position: fixed;
  inset: 0;
  z-index: 40;
  height: 100dvh;
  background: var(--ink);
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .roster,
#room[data-fullscreen]:not([data-fullscreen="off"]) .cards,
#room[data-fullscreen]:not([data-fullscreen="off"]) .bench {
  display: none;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .stage {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share {
  flex: 1;
  min-height: 0;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-view {
  flex: 1;
  min-height: 0;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-frame {
  aspect-ratio: auto;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-foot {
  padding: 0.5rem 1.2rem 0;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-live {
  order: 0;
  flex-basis: auto;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-stats {
  top: 0.9rem;
  left: 0.9rem;
}

#room[data-fullscreen]:not([data-fullscreen="off"]) .share-acts {
  top: 0.9rem;
  right: 0.9rem;
}

/* ------------------------------------------------------------ audio menu */

.dock {
  position: relative;
}

.menu-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.2rem;
}

.menu {
  position: absolute;
  left: 1.2rem;
  bottom: calc(100% + 0.5rem);
  z-index: 5;
  width: min(28rem, calc(100% - 2.4rem));
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.5);
}

.menu-block + .menu-block {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.menu-head {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu-note {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: var(--faint);
}

.switches {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.1rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 0.88rem;
}

.switch-track {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #2b333c;
  border: 1px solid var(--line);
  transition: background 0.15s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch[aria-checked="true"] .switch-track {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.switch[aria-checked="true"] .switch-track::after {
  transform: translateX(0.92rem);
  background: var(--accent);
}

.choices {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.choice {
  display: block;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  text-align: left;
  font-size: 0.88rem;
}

.choice[aria-checked="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.choice:disabled {
  opacity: 0.5;
}

.choice[data-blocked="true"] {
  cursor: help;
}

.choices .switch-note,
#noise-effective {
  margin-left: 0;
}

.switch-effective,
.switch-note {
  margin: 0.2rem 0 0 2.85rem;
  font-size: 0.74rem;
  color: var(--muted);
}

.switch-note {
  color: var(--faint);
}

.switch-effective[data-missing="true"] {
  color: var(--muted);
  font-style: italic;
  cursor: default;
}

.sink {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ----------------------------------------------------------- adaptations */

@media (max-width: 64rem) {
  /*
   * Narrower than this, a column beside the picture leaves neither of them
   * worth looking at: take the roster and the strip off a 1024px window and
   * about 300px are left for the thing somebody asked to look at. So the strip
   * goes along the bottom instead and scrolls sideways -- inside itself, which
   * is the whole point, because nothing here may put a sideways scrollbar on
   * the page. The bottom rather than the top: it is beside the control bar, and
   * so under the thumb that is already there.
   *
   * This is its own breakpoint and not the one below, which is where the roster
   * stops being a column. A window can be too narrow for two columns on the
   * stage while it is still wide enough for the roster beside them.
   */
  .stage[data-layout="focus"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .stage[data-layout="focus"] .spotlight,
  .stage[data-layout="focus"][data-main="share"] .share {
    grid-area: 1 / 1;
  }

  .stage[data-layout="focus"][data-main="person"] .reel,
  .stage[data-layout="focus"][data-main="share"] .cards {
    grid-area: 2 / 1;
  }

  .stage[data-layout="focus"] .cards {
    grid-auto-flow: column;
    grid-auto-columns: 9.5rem;
    grid-template-columns: none;
  }

  .stage[data-layout="focus"][data-main="person"] .reel {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .stage[data-layout="focus"][data-main="person"] .reel .share {
    width: 12rem;
  }

  .stage[data-layout="focus"][data-main="person"] .reel .cards {
    overflow: visible;
  }

  .stage[data-layout="focus"][data-main="share"] .cards {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 52rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .roster {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 40dvh;
  }

  .foot {
    display: none;
  }

  .stage,
  .bar {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .menu {
    left: 0.8rem;
  }

  /* Hidden from the eye, kept for the screen reader: a control with no
     accessible name is a control a screen reader user cannot identify. */
  .control-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .control.chevron .control-label,
  #noise .control-label,
  #leave .control-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  li[data-speaking="true"] .level {
    box-shadow: 0 0 0 4px rgb(79 209 197 / 0.25);
  }
}