/* UvioCall: clean, calm, clinical look. Light by default, dark mode on request (or follows the device). */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f7f9;
  --line: #dde5ea;
  --text: #15232b;
  --muted: #5d6f7a;
  --brand: #103fd3;
  --brand-2: #0c2fa0;
  --brand-soft: #e6ebfc;
  --wordmark: #071957;
  --danger: #d6404a;
  --ok: #1f9d6b;
  --warn-bg: #fff4d6;
  --warn-text: #7a5a00;
  --err-bg: #fdecee;
  --err-text: #a12630;
  --err-line: #f3c6cb;
  --off-bg: #fdecee;
  --off-line: #f3c6cb;
  --off-text: #a12630;
  --tile-bg: #ffffff;
  --frame: #2b3a44;
  --avatar-bg: #dfe5ea;
  --avatar-circle: #6b7c88;
  --speak: #22c55e;
  --shadow: 0 1px 2px rgba(21,35,43,.06), 0 6px 20px rgba(21,35,43,.06);
  --radius: 14px;
  --gap: 20px; /* standard space between video containers, sideways and underneath */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e151a;
  --panel: #151e25;
  --panel-2: #1c2730;
  --line: #2a3843;
  --text: #eaf1f5;
  --muted: #92a5b1;
  --brand: #807dfe;
  --brand-2: #9b99ff;
  --brand-soft: #1c2150;
  --wordmark: #ffffff;
  --danger: #e5555f;
  --ok: #3fc08a;
  --warn-bg: #3a2f12;
  --warn-text: #ffd98a;
  --err-bg: #3a1f22;
  --err-text: #ffb4b6;
  --err-line: #5a2a2c;
  --off-bg: #3a2022;
  --off-line: #6b2f33;
  --off-text: #ffb4b6;
  --tile-bg: #1c2730;
  --frame: #7d93a3;
  --avatar-bg: #26313a;
  --avatar-circle: #5c6e7b;
  --speak: #3ddc84;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }

.app { height: 100vh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; }
header.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 700; letter-spacing: .2px; font-size: 18px; display: flex; align-items: center; gap: 9px; }
.brand img { display: block; border-radius: 7px; flex: none; }
.brand { color: var(--wordmark); }
.brand .wm { font-weight: inherit; }
.brand .wm i { font-style: normal; color: var(--brand); }
.title { color: var(--muted); font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-btn { margin-left: auto; padding: 6px 12px; font-size: 13px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.title + .theme-btn { margin-left: 0; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

/* ---- cards (lobby, host page, ended) ---- */
.card {
  width: calc(100% - 32px); max-width: 460px; margin: 24px auto; padding: 22px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card h1 { font-size: 21px; margin: 0 0 4px; }
.card p { color: var(--muted); margin: 0 0 16px; }
label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
input[type=text], input[type=password], select {
  width: 100%; padding: 12px; font: inherit; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

button {
  font: inherit; color: var(--text); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
}
button:hover { border-color: var(--brand); }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
.full { width: 100%; margin-top: 18px; }

.notice { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 14px; }
.notice.error { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-line); }

.preview {
  position: relative; aspect-ratio: 16 / 10; margin-top: 8px; overflow: hidden;
  background: #0b1217; border-radius: 12px;
}
.preview video { width: 100%; height: 100%; object-fit: cover; }
.preview.mirror video { transform: scaleX(-1); }
.preview .empty { position: absolute; inset: 0; display: grid; place-items: center; color: #9db0bb; font-size: 14px; padding: 12px; text-align: center; }

/* ---- call room ---- */
#room { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.grid {
  flex: 1; min-height: 0; display: grid; gap: var(--gap); padding: 8px;
  grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .grid[data-count="2"], .grid[data-count="3"], .grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .grid[data-count="5"], .grid[data-count="6"], .grid[data-count="7"], .grid[data-count="8"], .grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
}
.grid[data-count="1"] { grid-template-columns: 1fr; }
.grid[data-count="3"], .grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
.grid[data-count="5"], .grid[data-count="6"] { grid-template-columns: 1fr 1fr; }

/* Two people: the other person fills the screen and you are a small picture in the corner. */
.grid.pair { grid-template-columns: 1fr; position: relative; }
.grid.pair .tile.self {
  position: absolute; right: 16px; bottom: 16px; width: 28%; min-width: 110px; max-width: 220px;
  aspect-ratio: 3 / 4; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* On a computer, each person is a 16:9 tile about 45% of the window width. Alone you are centred; with a guest you sit side by side. */
@media (min-width: 700px) {
  .grid[data-count="1"], .grid.pair {
    container-type: size; align-items: center; justify-items: center;
  }
  .grid.pair { grid-template-columns: auto auto; justify-content: center; column-gap: var(--gap); }
  .grid[data-count="1"] .tile,
  .grid.pair .tile,
  .grid.pair .tile.self {
    position: relative; right: auto; bottom: auto; max-width: none; min-width: 0;
    width: min(45cqw, calc((100cqh - 16px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9;
    box-shadow: none;
  }
}
/* Tablet held upright, two people: stack the pictures (the other person on top) so they use the height instead of leaving it blank. */
@media (min-width: 700px) and (orientation: portrait) {
  .grid.pair { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: max-content; align-content: center; align-items: center; row-gap: var(--gap); padding-top: 74px; padding-bottom: 108px; }
  .grid.pair .tile, .grid.pair .tile.self {
    width: min(100cqw, calc(((100cqh - var(--gap)) / 2) * 16 / 9));   /* the grid's own padding already keeps clear of the timer bar and toolbar */
  }
}
.tile { position: relative; background: var(--tile-bg); border: 1px solid var(--frame); border-radius: 12px; overflow: hidden; min-height: 0; min-width: 0; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tile-bg); }
.tile.self.mirror video { transform: scaleX(-1); }
/* The frame thickens and turns green around whoever is speaking. Drawn above the video so it is always visible. */
.tile::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border: 3px solid transparent; border-radius: inherit;
  pointer-events: none; transition: border-color .15s ease;
}
.tile.speaking::after { border-color: var(--speak); }
.tile.speaking { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
/* No browser overlay buttons (picture-in-picture, enhance video) on the video. */
.tile video, .prevbox video, .preview video { pointer-events: none; }
.tile .bar { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; z-index: 1; }
.tile .name {
  min-width: 0; color: #fff; background: rgba(8,16,22,.65); padding: 4px 9px; border-radius: 8px; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile .avatar {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--avatar-bg); container-type: size;
}
.tile .avatar span {
  display: grid; place-items: center; width: min(40%, 120px); min-width: 44px; aspect-ratio: 1; border-radius: 50%;
  background: var(--avatar-circle); color: #fff; font-weight: 600; font-size: clamp(14px, 14cqmin, 44px); letter-spacing: .5px;
}
.tile:not(.has-video) video { visibility: hidden; }
.tile.has-video .avatar { display: none; }
.tile .badge { position: absolute; right: 8px; top: 8px; color: #fff; background: rgba(8,16,22,.65); padding: 3px 8px; border-radius: 8px; font-size: 12px; }

/* Floating control island: icon buttons with tooltips. Fades out when nothing moves. */
.controls {
  position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8;
  display: flex; gap: 12px; padding: 12px 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.2);
  transition: opacity .3s ease, transform .3s ease;
}
.controls.idle { opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
.controls button {
  position: relative; width: 54px; height: 54px; min-width: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; line-height: 0;
}
.controls button svg { display: block; width: 26px; height: 26px; }
.controls button.off { background: var(--off-bg); border-color: var(--off-line); color: var(--off-text); }
.controls button.endall { background: transparent; border-color: var(--danger); color: var(--danger); }
.controls button.endall:hover { background: var(--danger); color: #fff; }
.controls button[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; line-height: 1.2; color: #fff; background: #15232b; padding: 6px 9px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 9;
}
.controls button[data-tip]:hover::after, .controls button[data-tip]:focus-visible::after { opacity: 1; }
.devices {
  position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7;
  width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 130px); overflow-y: auto; display: grid; gap: 4px; padding: 6px 16px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.2);
}
@media (min-width: 700px) { .devices { grid-template-columns: 1fr 1fr; gap: 12px; } }

.q-live { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.controls button#qualBtn[data-q="poor"] { background: var(--warn-bg); border-color: var(--warn-text); color: var(--warn-text); }
.controls button#qualBtn[data-q="lost"] { background: var(--err-bg); border-color: var(--err-text); color: var(--err-text); }
.speaker select { width: 100%; }
.speaker > button { width: 100%; }
.dev-done { grid-column: 1 / -1; margin-top: 8px; width: 100%; }
/* Background blur: three small buttons just above Done */
.blurrow { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.blur-label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.blurbtn { padding: 6px 10px; font-size: 13px; border-radius: 999px; line-height: 1.2; }
.blurbtn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.blur-note { flex-basis: 100%; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { .blur-label { display: none; } .blurrow { gap: 5px; } .blurbtn { padding: 6px 9px; } }
@media (max-width: 360px) { .blurbtn { padding: 6px 7px; font-size: 12px; } }
.meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.meter-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.meter-bar { flex: 1; height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: var(--ok); transition: transform .08s linear; }
.meter-bar i.hot { background: #e0a100; }
.meter-bar i.clip { background: var(--danger); }
.devprev { grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 6px; }
/* Each picture has its microphone meter directly underneath, exactly as wide as the picture. One picture is shown large; two sit side by side. */
.pv { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pv[hidden] { display: none; }
.devprev[data-n="1"] .pv { flex: 0 1 auto; width: min(100%, max(200px, calc((100dvh - 545px) * 16 / 9))); }
.prevbox { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--tile-bg); border: 1px solid var(--frame); border-radius: 10px; overflow: hidden; }
.prevbox video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.prevbox.mirror video { transform: scaleX(-1); }
.prevbox .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; background: var(--panel-2); }
.prevbox.live .empty { display: none; }
.speaker { grid-column: 1 / -1; margin-top: 4px; }
.spk-row { display: flex; align-items: center; gap: 14px; }
.spk-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--brand); }
.spk-row button { padding: 8px 14px; white-space: nowrap; }
.meter-note { font-size: 12px; color: var(--muted); }
.meter-col { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.meter-col .meter-bar { flex: none; width: 100%; }
.banner {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 11; max-width: calc(100% - 24px); text-align: center;
  background: var(--warn-bg); color: var(--warn-text); padding: 8px 8px 8px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
}
.banner { width: max-content; }
.banner[hidden] { display: none; }
.banner .bn-x { flex: none; width: 26px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .65; display: flex; align-items: center; justify-content: center; }
.banner .bn-x:hover, .banner .bn-x:focus-visible { opacity: 1; background: rgba(0, 0, 0, .1); }
.pill {
  position: absolute; top: 12px; left: 12px; z-index: 6; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px); padding: 9px 14px; font-size: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.pill #clock, .pill #timer { font-variant-numeric: tabular-nums; }
.pill .sep { width: 1px; height: 18px; background: var(--text); opacity: .6; flex: none; }
.pill #pillTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbox { display: flex; gap: 8px; margin-top: 8px; }
.linkbox input { flex: 1; }

/* ---- Phones, portrait: equal 16:9 tiles stacked one above the other; scroll when there are more than fit. ---- */
@media (max-width: 699px) {
  .grid, .grid.pair, .grid[data-count] {
    display: flex; flex-direction: column; align-items: center; gap: var(--gap);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px; /* three tiles fit on a normal phone; more scroll. The control island fades away when idle. */
  }
  .grid > .tile:first-child { margin-top: auto; }
  .grid > .tile:last-child { margin-bottom: auto; }
  .grid .tile, .grid.pair .tile, .grid.pair .tile.self {
    position: relative; right: auto; bottom: auto; flex: none;
    width: min(100%, 420px); max-width: none; min-width: 0; height: auto; aspect-ratio: 16 / 9;
    box-shadow: none;
  }
  .tile.speaking { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
}

/* ---- Computers: three or more people. 16:9 tiles with the standard gap on every side, clear of the timer bar and the toolbar.
   The whole group shrinks as people are added so every tile stays on screen. Rows wrap and an incomplete last row is centred. ---- */
@media (min-width: 700px) {
  .grid:is([data-count="3"],[data-count="4"],[data-count="5"],[data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],
           [data-count="10"],[data-count="11"],[data-count="12"],[data-count="13"],[data-count="14"],[data-count="15"],[data-count="16"]) {
    container-type: size; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;
    gap: var(--gap); padding: 74px var(--gap) 108px; /* top clears the timer bar, bottom clears the toolbar, each plus one standard gap */
  }
  .grid:is([data-count="3"],[data-count="4"]) .tile,
  .grid:is([data-count="5"],[data-count="6"]) .tile,
  .grid:is([data-count="7"],[data-count="8"],[data-count="9"]) .tile,
  .grid:is([data-count="10"],[data-count="11"],[data-count="12"]) .tile,
  .grid:is([data-count="13"],[data-count="14"],[data-count="15"],[data-count="16"]) .tile {
    flex: none; height: auto; aspect-ratio: 16 / 9; min-width: 0; max-width: none;
  }
  /* columns x rows: 2x2, 3x2, 3x3, 4x3, 4x4. The 1px keeps rounding from dropping a column. */
  .grid:is([data-count="3"],[data-count="4"]) .tile { width: min(calc((100cqw - var(--gap)) / 2 - 1px), calc(((100cqh - var(--gap)) / 2) * 16 / 9)); }
  .grid:is([data-count="5"],[data-count="6"]) .tile { width: min(calc((100cqw - 2 * var(--gap)) / 3 - 1px), calc(((100cqh - var(--gap)) / 2) * 16 / 9)); }
  .grid:is([data-count="7"],[data-count="8"],[data-count="9"]) .tile { width: min(calc((100cqw - 2 * var(--gap)) / 3 - 1px), calc(((100cqh - 2 * var(--gap)) / 3) * 16 / 9)); }
  .grid:is([data-count="10"],[data-count="11"],[data-count="12"]) .tile { width: min(calc((100cqw - 3 * var(--gap)) / 4 - 1px), calc(((100cqh - 2 * var(--gap)) / 3) * 16 / 9)); }
  .grid:is([data-count="13"],[data-count="14"],[data-count="15"],[data-count="16"]) .tile { width: min(calc((100cqw - 3 * var(--gap)) / 4 - 1px), calc(((100cqh - 3 * var(--gap)) / 4) * 16 / 9)); }
}

/* Tablet held upright, three people: stack all three (like two people) so they use the height. From four people on, two columns again. */
@media (min-width: 700px) and (orientation: portrait) {
  .grid[data-count="3"]:not(.focus):not(.full) { flex-direction: column; flex-wrap: nowrap; }
  .grid[data-count="3"]:not(.focus):not(.full) .tile {
    width: min(100cqw, calc(((100cqh - 2 * var(--gap)) / 3) * 16 / 9));
  }
}

/* ---- Phones, portrait: keep clear of the timer bar (top) and the toolbar (bottom), and shrink 2 to 4 tiles so they all fit. ---- */
@media (max-width: 699px) and (orientation: portrait) {
  #room { container-type: size; }
  .grid, .grid.pair, .grid[data-count] { --gap: 8px; } /* tighter space between pictures, same as sideways */
  .grid, .grid.pair, .grid[data-count] { padding: 64px 8px 92px; }
  .grid[data-count="2"] .tile, .grid[data-count="2"].pair .tile.self {
    width: min(100%, 420px, calc(((100cqh - 150px - var(--gap)) / 2) * 16 / 9));
  }
  .grid[data-count="3"] .tile { width: min(100%, 420px, calc(((100cqh - 150px - 2 * var(--gap)) / 3) * 16 / 9)); }
  .grid[data-count="4"] .tile { width: min(100%, 420px, calc(((100cqh - 150px - 3 * var(--gap)) / 4) * 16 / 9)); }
}

/* ---- Phones held sideways: tiles side by side, toolbar as a vertical island down the right edge (same icons). ---- */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  /* Toolbar distance from the right edge; the iPhone app sets --tb-right (it draws under the side strips). */
  :root { --tbr: var(--tb-right, calc(10px + env(safe-area-inset-right))); --tbl: var(--tb-left, calc(8px + env(safe-area-inset-left))); }
  .grid, .grid.pair, .grid[data-count] {
    --gap: 8px;
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center;
    gap: var(--gap); overflow-y: auto; padding: 46px calc(var(--tbr) + 64px) 8px var(--tbl);
  }
  .grid > .tile:first-child, .grid > .tile:last-child { margin: 0; }
  .grid .tile, .grid.pair .tile, .grid.pair .tile.self {
    position: relative; right: auto; bottom: auto; flex: none; max-width: none; min-width: 0; height: auto; aspect-ratio: 16 / 9;
    width: min(calc((100vw - var(--tbr) - var(--tbl) - 80px - var(--gap)) / 2), calc((100dvh - 54px) * 16 / 9)); box-shadow: none;
  }
  .grid[data-count="1"] .tile { width: min(calc(100vw - var(--tbr) - var(--tbl) - 80px), calc((100dvh - 54px) * 16 / 9)); }
  /* Three or more: two rows that fit the screen height, starting below the timer bar. */
  .grid[data-count="3"], .grid[data-count="4"], .grid[data-count="5"], .grid[data-count="6"] { padding-top: 46px; }
  .grid[data-count="3"] .tile, .grid[data-count="4"] .tile, .grid[data-count="5"] .tile, .grid[data-count="6"] .tile {
    width: min(calc((100vw - var(--tbr) - var(--tbl) - 80px - var(--gap)) / 2), calc(((100dvh - 54px - var(--gap)) / 2) * 16 / 9));
  }
  /* Five or six: three across, two rows. Seven to nine: three across, three rows. All fit the screen height. */
  .grid[data-count="5"], .grid[data-count="6"], .grid[data-count="7"], .grid[data-count="8"], .grid[data-count="9"] { padding-top: 46px; }
  .grid[data-count="5"] .tile, .grid[data-count="6"] .tile {
    width: min(calc((100vw - var(--tbr) - var(--tbl) - 80px - 2 * var(--gap)) / 3 - 1px), calc(((100dvh - 54px - var(--gap)) / 2) * 16 / 9));
  }
  .grid[data-count="7"] .tile, .grid[data-count="8"] .tile, .grid[data-count="9"] .tile {
    width: min(calc((100vw - var(--tbr) - var(--tbl) - 80px - 2 * var(--gap)) / 3 - 1px), calc(((100dvh - 54px - 2 * var(--gap)) / 3) * 16 / 9));
  }
  .tile.speaking { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
  /* Sideways phone: fill each 16:9 tile with any landscape picture (a 4:3 front camera is trimmed slightly top and bottom). */
  .tile video.wide { object-fit: cover; }
  /* In a call, drop the page header to give the tiles the full height. */
  body:has(#room:not([hidden])) header.bar { display: none; }
  .controls {
    left: auto; right: var(--tbr); top: 50%; bottom: auto; transform: translateY(-50%);
    flex-direction: column; gap: 6px; padding: 10px 7px; border-radius: 999px;
  }
  .controls.idle { transform: translateY(-50%); }
  .controls button { width: 44px; height: 44px; }
  .controls button svg { width: 26px; height: 26px; }
  .controls button[data-tip]::after { bottom: auto; left: auto; top: 50%; right: calc(100% + 12px); transform: translateY(-50%); }
  .devices {
    left: calc(12px + env(safe-area-inset-left)); right: calc(var(--tbr) + 64px); top: 12px; bottom: auto; transform: none; width: auto;
    max-height: calc(100dvh - 24px); overflow-y: auto; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  }
  .pill { top: 6px; left: var(--tbl); padding: 4px 10px; font-size: 12px; gap: 8px; }
  .banner { top: 40px; font-size: 13px; padding: 5px 12px; }
}

/* ---- Join screen on phones: tight spacing so the whole form fits on one screen, nothing floating over it. ---- */
@media (max-width: 699px) {
  header.bar { padding: 8px 16px; }
  .card { margin: 10px auto; padding: 14px 14px 16px; }
  .card h1 { font-size: 19px; }
  .card > p { margin: 0 0 8px; font-size: 14px; }
  label { margin: 10px 0 4px; font-size: 13px; }
  input[type=text], input[type=password], select { padding: 9px 12px; }
  .preview { aspect-ratio: 16 / 9; max-height: 22vh; width: 100%; margin-top: 4px; }
  .meter { margin-top: 8px; }
  .card .full { margin-top: 12px; padding: 12px 16px; }
  .notice { margin-top: 10px; }
  main { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- Session timeout: expiry time in the timer bar, and the warning bar with a sliding countdown ---- */
.pill .expiry { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: underline dotted; text-underline-offset: 3px; }
.pill .expiry.soon { color: var(--warn-text); font-weight: 600; }
.expirybar {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9;
  width: min(420px, calc(100% - 24px)); padding: 10px 12px 12px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-text); box-shadow: 0 8px 28px rgba(0,0,0,.2);
}
.expirybar .ex-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.expirybar .ex-row button { padding: 8px 14px; white-space: nowrap; }
.expirybar .ex-track { height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(0,0,0,.12); overflow: hidden; }
.expirybar .ex-track i { display: block; height: 100%; width: 100%; background: var(--warn-text); border-radius: inherit; transition: width 1s linear; }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .expirybar { top: 6px; left: calc(215px + env(safe-area-inset-left)); right: calc(var(--tbr) + 64px); transform: none; width: auto; padding: 6px 10px 8px; }
}
/* Speaker test: a round speaker button instead of a text button. */
.spk-row button.icon { width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; line-height: 0; flex: none; }

.pill #clock, .pill #timer, .pill .expiry { white-space: nowrap; flex: none; }
.pill #pillTitle { flex: 1 1 0; }

/* Elapsed time is a button: tap it for the session end time and to extend. */
.pill .timerbtn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; text-decoration: underline dotted; text-underline-offset: 3px; }
.pill .timerbtn.soon { color: var(--warn-text); font-weight: 600; }
.sessionpop {
  position: absolute; top: 64px; left: 12px; z-index: 10; width: min(300px, calc(100% - 24px)); padding: 12px 14px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); font-size: 14px;
}
.sessionpop .sp-row { display: flex; gap: 8px; margin-top: 10px; }
.sessionpop .sp-row button { padding: 8px 14px; flex: 1; }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) { .sessionpop { top: 38px; left: var(--tbl); } }

.micsel select { width: 100%; }
.micsel select.idle { color: var(--muted); }

/* ---- Focus view: one person large, everyone else as thumbnails. Clicking a thumbnail makes it the large picture. ---- */
.grid.focus .tile { cursor: default; }
.grid.focus .tile:not(.focus-main) { cursor: pointer; }
.grid.focus .tile:not(.focus-main) .name { font-size: 11px; padding: 2px 6px; }
.grid.focus .tile:not(.focus-main) .badge { display: none; }
.grid.focus .tile.focus-main { order: -1; }

/* Computers and tablets: large picture on top, a row of thumbnails underneath, clear of the timer bar and the toolbar. */
@media (min-width: 700px) and (not ((pointer: coarse) and (max-height: 500px) and (orientation: landscape))) {
  .grid.focus[data-count] {
    container-type: size; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;
    gap: var(--gap); padding: 74px var(--gap) 108px; overflow: hidden;
    --th: clamp(84px, 17cqh, 150px);
  }
  .grid.focus[data-count] .tile {
    flex: none; height: auto; aspect-ratio: 16 / 9; min-width: 0; max-width: none; position: relative; right: auto; bottom: auto; box-shadow: none; order: 0;
    width: max(96px, min(calc(var(--th) * 16 / 9), calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n) - 1px)));
  }
  .grid.focus[data-count] .tile.focus-main {
    order: -1; --mw: min(100%, calc((100cqh - var(--th) - var(--gap)) * 16 / 9));
    width: var(--mw); margin-inline: calc((100% - var(--mw)) / 2);
  }
  .grid.focus[data-count] .tile.speaking { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
}

/* Phones upright: large picture on top, thumbnails underneath. Up to 6 thumbnails are sized to fit (three across, two rows);
   with more, the whole area scrolls. */
@media (max-width: 699px) and (orientation: portrait) {
  .grid.focus[data-count] {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: safe center; align-items: flex-start; gap: 8px;
    overflow-x: hidden; overflow-y: auto;
    --cols: 2; --rows: 3;
    --tw: min(200px, calc((100cqw - 16px - (var(--cols) - 1) * 8px) / var(--cols) - 1px));
    --th: calc(var(--tw) * 9 / 16);
  }
  .grid.focus[data-count="2"] { --cols: 1; --rows: 1; }
  .grid.focus[data-count="3"] { --rows: 1; }
  .grid.focus[data-count="4"], .grid.focus[data-count="5"] { --rows: 2; }
  .grid.focus[data-count] .tile {
    flex: none; margin: 0; order: 0; height: auto; aspect-ratio: 16 / 9; max-width: none; width: var(--tw);
  }
  .grid.focus[data-count] .tile.focus-main {
    order: -1; --mw: min(100%, calc((100cqh - 150px - var(--rows) * (var(--th) + 8px)) * 16 / 9));
    width: var(--mw); margin-inline: calc((100% - var(--mw)) / 2);
  }
}

/* Phones sideways: one column of thumbnails down the left (scrolls if there are too many); the large picture is held in place beside it. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .grid.focus[data-count] {
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 8px;
    overflow-x: hidden; overflow-y: auto;
    padding: 44px calc(var(--tbr) + 64px) 8px var(--tbl);
  }
  .grid.focus[data-count] .tile { flex: none; width: 128px; height: auto; aspect-ratio: 16 / 9; margin: 0; order: 0; }
  /* The large picture sits between the thumbnail column (128 px wide, 8 px gap) on the left and the toolbar on the right, whatever the side margins are. */
  .grid.focus[data-count] .tile.focus-main {
    --zl: calc(var(--tbl) + 136px); --zr: calc(var(--tbr) + 84px);
    --mw: min(calc(100vw - var(--zl) - var(--zr)), calc((100dvh - 52px) * 16 / 9));
    position: fixed; z-index: 2; order: -1; width: var(--mw);
    left: calc(var(--zl) + (100vw - var(--zl) - var(--zr) - var(--mw)) / 2);
    top: calc(44px + (100dvh - 52px - var(--mw) * 9 / 16) / 2);
  }
}

/* ---- Logo inside the call bar (only where the page header is hidden: phones held sideways) ---- */
.pill .pill-logo { display: none; }
.pill-logo b { font-weight: 700; color: var(--wordmark); }
.pill-logo b i { font-style: normal; color: var(--brand); }
.pill-logo img { border-radius: 5px; flex: none; }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .pill span.pill-logo:not(.sep) { display: inline-flex; align-items: center; gap: 6px; }
  .pill span.sep.pill-logo { display: block; }
  .pill-logo img { width: 16px; height: 16px; }
}

/* ---- Waiting room: the host sees who wants to join and lets each person in ---- */
.admit {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 12;
  width: min(440px, calc(100% - 24px)); padding: 12px 14px;
  background: var(--panel); border: 2px solid var(--brand); border-radius: var(--radius); box-shadow: 0 10px 32px rgba(0,0,0,.3);
}
.admit[hidden] { display: none; }
.admit-head { font-weight: 700; margin-bottom: 8px; }
.admit-list { list-style: none; margin: 0; padding: 0; max-height: 40dvh; overflow-y: auto; display: grid; gap: 8px; }
.admit-list li { display: flex; align-items: center; gap: 10px; }
.admit-list .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admit-list button { padding: 6px 12px; flex: none; }
.admit-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.admit-foot[hidden], .admit-foot button[hidden] { display: none; }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .admit { top: 6px; left: 215px; transform: none; width: min(440px, calc(100% - 305px)); padding: 8px 12px; font-size: 13px; }
  .admit-list { max-height: calc(100dvh - 110px); }
}

/* ---- account pages (login, home, settings, invite, privacy, terms) ---- */
input[type=email], input[type=tel], input[type=number] {
  width: 100%; padding: 12px; font: inherit; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
body.page main { padding-bottom: 32px; }
.card.wide { max-width: 640px; }
.card h2 { font-size: 16px; margin: 22px 0 6px; }
.card .fine, .fine { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.card a, .legal-links a, .fine a { color: var(--brand); }
.legal-links { font-size: 13px; margin: 18px 0 0; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal p { line-height: 1.5; }
.linkrow { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--brand); font-size: 14px; text-decoration: none; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; border: 0; }
header.bar a.linkbtn { margin-left: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.tilelink {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.tilelink:hover { border-color: var(--brand); }
.tilelink.strong { background: var(--brand); border-color: var(--brand); color: #fff; }
.tilelink.strong:hover { background: var(--brand-2); border-color: var(--brand-2); }
.members { list-style: none; margin: 8px 0 0; padding: 0; }
.members li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.members li:last-child { border-bottom: 0; }
.members .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.members button { padding: 6px 12px; font-size: 13px; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.dangerbtn { background: none; color: var(--danger); border-color: var(--danger); }
.dangerbtn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

a.brand { text-decoration: none; }
.tilelink, .tilelink:hover { text-decoration: none; }
.card a.tilelink { color: var(--text); }
.card a.tilelink.strong { color: #fff; }
.card a.tilelink span { color: inherit; }

.backbtn { background: none; border: 0; padding: 6px 10px 6px 0; margin: 0; color: var(--brand); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; flex: none; }
.backbtn:hover { text-decoration: underline; border: 0; }
.spk-row select { flex: 1; min-width: 0; }
.card input:disabled { opacity: .75; }
.card h3 { font-size: 15px; margin: 16px 0 4px; }
a.smallbtn { margin-left: auto; padding: 6px 12px; font-size: 13px; border-radius: 999px; background: var(--panel-2); color: var(--muted); text-decoration: none; border: 1px solid var(--line); white-space: nowrap; }
a.smallbtn:hover { border-color: var(--brand); color: var(--text); }
a.smallbtn + .theme-btn { margin-left: 0; }
.tilelink { font: inherit; font-weight: 600; cursor: pointer; }
.joinbox { margin-top: 14px; }

.sp-id { margin-top: 6px; color: var(--muted); font-size: 14px; }
.sp-id b { color: var(--text); letter-spacing: .5px; user-select: all; }
.pill-code { color: var(--muted); letter-spacing: .3px; white-space: nowrap; }

/* Cog menu in the call toolbar */
.moremenu {
  position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9;
  width: min(300px, calc(100% - 24px)); padding: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.2); display: grid; gap: 2px;
}
.moremenu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; width: 100%; background: none; border: 0; border-radius: 10px; padding: 12px 14px; }
.moremenu button:hover { background: var(--panel-2); border: 0; }
.moremenu button b { letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.controls button#moreBtn[data-q="poor"] { background: var(--warn-bg); border-color: var(--warn-text); color: var(--warn-text); }
.controls button#moreBtn[data-q="lost"] { background: var(--err-bg); border-color: var(--err-text); color: var(--err-text); }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .moremenu { left: auto; right: calc(64px + env(safe-area-inset-right)); top: 50%; bottom: auto; transform: translateY(-50%); width: 280px; }
}
/* Narrow phones upright: slightly smaller buttons so every one fits across the toolbar */


.card .legal-links { margin: 26px 0 0; padding-bottom: 4px; }

/* ---- spacing tidy for the account pages and phone toolbar ---- */
.card > h2:first-child { margin-top: 0; }
.card h2 { margin-top: 4px; }
.card .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.card input + .actions, .card .notice + .actions { margin-top: 18px; }
.card .notice { margin-bottom: 4px; }
.sep-line { border: 0; border-top: 1px solid var(--line); margin: 22px 0 2px; }
#set > .legal-links { width: calc(100% - 32px); max-width: 640px; margin: 4px auto 32px; }
@media (max-width: 480px) {
  .linkbox { flex-direction: column; }
  .linkbox button { width: 100%; }
  .card.wide { padding: 20px 16px 22px; }
}


.card.legal h2 { margin-top: 22px; }
.card.legal > h1 + p + h2 { margin-top: 18px; }

/* Phones: the icon and UvioCall name always stay at the top left; a return link (Home, Back, Start screen) drops to the line below. */
@media (max-width: 600px) {
  header.bar { flex-wrap: wrap; row-gap: 2px; }
  header.bar .brand { order: 0; }
  header.bar .backbtn { order: 10; flex: 0 0 100%; text-align: left; padding: 2px 0 4px; font-size: 14px; }
}

button.ghost { background: none; border-color: var(--line); color: var(--muted); }
button.ghost:hover { border-color: var(--brand); color: var(--text); }
.card .full.ghost { margin-top: 10px; }

.moremenu button small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.leavemenu button { flex-direction: column; align-items: flex-start; gap: 0; }
.leavemenu button.lm-danger { color: var(--danger); }

/* ---- Phone toolbar upright: spans the width, round buttons share the space and stay circular ---- */
/* (phone toolbar: see the end of this file) */

/* ---- Pill: Call ID ---- */
.pill #pillCode { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ---- Muted microphone badge (bottom right of other people's tiles) ---- */
.tile .micbadge { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(220,38,38,.92); color: #fff; display: grid; place-items: center; z-index: 1; }
.tile .micbadge[hidden] { display: none; }
.tile .micbadge svg { width: 16px; height: 16px; }
.grid.focus .tile:not(.focus-main) .micbadge { width: 20px; height: 20px; right: 5px; bottom: 5px; }
.grid.focus .tile:not(.focus-main) .micbadge svg { width: 12px; height: 12px; }

/* ---- Camera-off people: listed after everyone with a picture; optionally shrunk to a small initials icon ---- */
.grid .tile:not(.has-video):not(.focus-main) { order: 50; }
.grid.focus[data-count] .tile:not(.has-video):not(.focus-main) { order: 50; }
.grid .tile.chip, .grid.focus[data-count] .tile.chip {
  width: 48px !important; height: 48px !important; aspect-ratio: 1; border-radius: 50%; order: 60; margin: 0 !important; flex: none; justify-self: start;
  position: relative; right: auto; bottom: auto;
}
.grid.focus[data-count] .tile.chip { max-width: 48px; }
.tile.chip .bar, .tile.chip .badge, .tile.chip .micbadge { display: none; }
.tile.chip .avatar span { width: 34px; min-width: 0; font-size: 14px; }
.tile.chip { border-radius: 50%; cursor: default; }

/* ---- Home page link buttons ---- */
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; }
.card a.btnlink {
  flex: 1 1 auto; text-align: center; text-decoration: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600;
}
.card a.btnlink:hover { border-color: var(--brand); color: var(--brand); }
.card a.btnlink.danger { color: var(--danger); }

/* ---- Tablets held upright: thumbnails sized to fit, up to four across, a second row when there are more ---- */
@media (min-width: 700px) and (orientation: portrait) and (not ((pointer: coarse) and (max-height: 500px) and (orientation: landscape))) {
  .grid.focus[data-count] {
    --cols: 4; --rows: 2;
    --tw: min(260px, calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) - 1px));
    --th: calc(var(--tw) * 9 / 16);
    overflow-y: auto; align-content: safe center;
  }
  .grid.focus[data-count="2"] { --cols: 1; --rows: 1; }
  .grid.focus[data-count="3"] { --cols: 2; --rows: 1; }
  .grid.focus[data-count="4"] { --cols: 3; --rows: 1; }
  .grid.focus[data-count="5"] { --cols: 4; --rows: 1; }
  .grid.focus[data-count="10"], .grid.focus[data-count="11"], .grid.focus[data-count="12"], .grid.focus[data-count="13"],
  .grid.focus[data-count="14"], .grid.focus[data-count="15"], .grid.focus[data-count="16"] { --rows: 3; }
  .grid.focus[data-count] .tile { width: var(--tw); }
  .grid.focus[data-count] .tile.focus-main {
    --mw: min(100%, calc((100cqh - var(--rows) * (var(--th) + var(--gap))) * 16 / 9));
    width: var(--mw); margin-inline: calc((100% - var(--mw)) / 2);
  }
}

/* ---- Sign-in page: two columns on wide screens and phones held sideways (heading and link buttons left, the form right) ---- */
.si-head, .si-form, .si-foot { min-width: 0; }
@media (min-width: 700px), (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #viewSignin { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 40px; grid-template-rows: auto 1fr; align-items: start; padding: 24px 28px; }
  #viewSignin[hidden] { display: none; }
  #viewSignin .si-head { grid-column: 1; grid-row: 1; }
  #viewSignin .si-foot { grid-column: 1; grid-row: 2; align-self: end; }
  #viewSignin .si-form { grid-column: 2; grid-row: 1 / span 2; }
  #viewSignin .si-form label:first-child { margin-top: 0; }
  #viewSignin .si-foot .btnrow:first-child { margin-top: 8px; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #viewSignin { margin: 8px auto; padding: 14px 22px; }
  #viewSignin .si-head p { margin-bottom: 8px; }
  #viewSignin .si-foot .btnrow { margin: 10px 0 0; }
  #viewSignin .btnlink { padding: 9px 12px; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  header.bar { padding: 5px 16px; }
  #viewSignin { margin: 6px auto; padding: 10px 22px 12px; }
  #viewSignin .si-foot { align-self: start; }
  #viewSignin label { margin: 6px 0 3px; }
  #viewSignin input { padding: 7px 12px; }
  #viewSignin .full { margin-top: 10px; padding: 10px 16px; }
  #viewSignin .linkrow { margin-top: 6px; }
  #viewSignin .btnlink { padding: 8px 12px; }
}

/* Hide the browser's start-playback arrow while a video loads. */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
#nameRow[hidden] { display: none; }

/* ---- Guest join on the sign-in page ---- */
.gj { margin: 14px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--line); }
#viewSignin .si-foot { margin-top: 22px; }
@media (min-width: 700px) { #viewSignin .si-foot { margin-top: 0; } #viewSignin .gj { margin-top: 6px !important; border-top: 0; padding-top: 0; } }
.gj-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.gj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gj-row label { margin-top: 6px; }
.gj .notice { margin-top: 8px; }
.gj .full { margin-top: 12px; }
@media (max-width: 420px) { .gj-row { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) { .gj { margin-top: 8px; padding-top: 8px; } .gj .full { margin-top: 8px; } }

.appstatus { text-align: center; margin: 12px auto 0; max-width: 760px; }
.appstatus[hidden] { display: none; }

/* ---- Start page (/join): join and host side by side when there is room, stacked on phones. ---- */
#joinCard { max-width: 760px; width: 100%; }
#joinCard .jn-who { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#joinCard .jn-who h1 { margin: 0 0 2px; }
#joinCard .jn-who p { margin: 0; }
#joinCard .jn-cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
#joinCard .jn-cols h2 { margin: 0 0 6px; }
#joinCard .jn-join .linkbox { margin-top: 6px; }
#joinCard .jn-join .notice { margin-top: 10px; }
#joinCard .jn-start { display: flex; flex-direction: column; }
#joinCard .jn-start p { margin-bottom: 14px; }
#joinCard a.jn-startbtn, #joinCard button.jn-startbtn {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 18px; border-radius: 12px; font-size: 16px; font-weight: 700; margin-top: auto;
}
#joinCard a.jn-startbtn svg, #joinCard button.jn-startbtn svg { width: 24px; height: 24px; flex: none; }
#joinCard .jn-join button.jn-joinbtn { width: 100%; margin-top: 12px; color: #fff; box-sizing: border-box; }
#joinCard a.jn-schedbtn {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 18px; border-radius: 12px; font-size: 16px; font-weight: 600; margin-top: 10px;
}
#joinCard a.jn-schedbtn[hidden] { display: none; }
#joinCard a.jn-schedbtn svg { flex: none; }
#joinCard .btnrow { margin-top: 22px; }
@media (min-width: 640px), (orientation: landscape) and (min-width: 560px) {
  #joinCard .jn-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  #joinCard .jn-start { border-left: 1px solid var(--line); padding-left: 28px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* Everything on one screen on a phone held sideways. */
  body.page .bar { padding-top: 4px; padding-bottom: 4px; min-height: 0; }
  body.page .bar .brand img { width: 24px; height: 24px; }
  body.page .bar .smallbtn, body.page .bar .theme-btn { padding: 5px 12px; font-size: 13px; }
  main { padding-top: 8px; padding-bottom: 8px; }
  #joinCard { padding: 10px 18px 12px; margin: 0 auto; }
  #joinCard .jn-who { margin-bottom: 8px; padding-bottom: 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  #joinCard .jn-who h1 { font-size: 18px; margin: 0; }
  #joinCard .jn-who p { font-size: 13px; margin: 0; }
  #joinCard .jn-cols { gap: 22px; }
  #joinCard .jn-cols h2 { font-size: 15px; margin-bottom: 4px; }
  #joinCard .jn-cols p { display: none; }
  #joinCard .jn-cols p#roomNote:not([hidden]) { display: block; margin: 6px 0 0; font-size: 12px; }
  #joinCard .jn-join label { margin: 2px 0 2px; font-size: 12px; }
  #joinCard .jn-join input { padding: 8px 12px; }
  #joinCard .jn-join .linkbox { margin-top: 2px; }
  #joinCard .jn-join .linkbox button { padding: 8px 18px; }
  #joinCard a.jn-startbtn, #joinCard button.jn-startbtn { min-height: 44px; padding: 8px 16px; margin-top: 4px; }
  #joinCard .jn-join button.jn-joinbtn { margin-top: 6px; }
  #joinCard a.jn-schedbtn { min-height: 40px; padding: 6px 16px; margin-top: 6px; }
  #joinCard .btnrow { margin-top: 10px; gap: 8px; }
  #joinCard .btnrow .btnlink { padding: 7px 10px; font-size: 14px; }
  .appstatus { margin-top: 6px; font-size: 11px; }
}

/* ---- Show/hide password button ---- */
.pwwrap { position: relative; display: block; width: 100%; }
.pwwrap input { padding-right: 52px; }
.pwtoggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pwtoggle:hover, .pwtoggle:focus-visible { color: var(--brand); }

/* Names and mic icons can be switched off (Settings or the cog menu) when pictures are small. */
body.nolabels .tile .bar, body.nolabels .tile .micbadge { display: none !important; }

/* ---- Join screen and waiting room: mute switches, music, and the sideways layout ---- */
.devrow { display: flex; align-items: center; gap: 10px; }
.devrow select { flex: 1; min-width: 0; }
.devrow button.icon, .musicbox button.icon {
  width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; line-height: 0; flex: none;
}
.devrow button.icon svg, .musicbox button.icon svg { display: block; width: 22px; height: 22px; }
button.icon.off { background: var(--off-bg); border-color: var(--off-line); color: var(--off-text); }
button.icon.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.devtxt { flex: 1; font-size: 14px; color: var(--muted); }
.devrow .meter-bar { flex: 1; }
.lb-form .devrow + .devrow { margin-top: 10px; }
#waitroom .lb-form .devrow { margin-top: 10px; }
.waitbadge { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 14px; }
.waitbadge b { font-weight: 600; }
.waitbadge .wtime { margin-left: auto; font-variant-numeric: tabular-nums; }
.waitbadge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; animation: wpulse 1.4s ease-in-out infinite; }
@keyframes wpulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.musicbox { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.musicbox .devtxt { min-width: 120px; }
.musicbox input[type=range] { width: 100px; flex: none; accent-color: var(--brand); }
#waitroom .full.ghost { margin-top: 14px; }

/* Anything held sideways and wide enough (computers, tablets, phones): preview on the left, controls on the right. */
@media (orientation: landscape) and (min-width: 700px) {
  #lobby, #waitroom { max-width: 940px; width: calc(100% - 32px); }
  .lb { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .lb .preview { max-height: none; aspect-ratio: 16 / 9; width: 100%; margin-top: 8px; }
  .lb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lb-btns .full { margin-top: 18px; }
}
#spkSelect:not([hidden]) ~ .devtxt { display: none; }
.lb-view .waitbadge { margin-top: 10px; }

/* Short screens (phones and small tablets held sideways): everything compact so it fits on one screen. */
@media (orientation: landscape) and (max-height: 560px) {
  body:has(#lobby:not([hidden])) header.bar, body:has(#waitroom:not([hidden])) header.bar { padding: 4px 16px; }
  #lobby, #waitroom { width: calc(100% - 24px); margin: 4px auto; padding: 6px 14px 8px; }
  #lobby h1, #waitroom h1 { font-size: 16px; margin: 0 0 2px; }
  #waitroom > p { margin: 0 0 4px; font-size: 12px; }
  #lobby > p { display: none; }
  .lb { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .lb .preview { margin-top: 0; max-height: none; aspect-ratio: 16 / 9; width: 100%; }
  .lb-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .lb-form label { display: none; }
  .lb-form input[type=text], .lb-form select { padding: 6px 10px; }
  .lb-form .devrow, .lb-form .devrow + .devrow, #waitroom .lb-form .devrow { margin-top: 6px; }
  .lb-form #nameRow + label + .devrow { margin-top: 6px; }
  .devrow button.icon, .musicbox button.icon { width: 36px; height: 36px; }
  .lb-form .meter { margin-top: 3px; }
  .lb-btns { gap: 8px; }
  .lb-btns .full { margin-top: 6px; padding: 7px 12px; }
  #waitroom .full.ghost { margin-top: 8px; padding: 7px 12px; }
  .lb-form .notice { margin-top: 4px; padding: 4px 10px; font-size: 12px; }
  .lb-view .waitbadge { margin-top: 6px; padding: 6px 10px; font-size: 13px; }
  .musicbox { margin-top: 8px; padding: 5px 10px; }
}

/* Tablets held upright, gallery view: two columns however many people there are. The whole screen scrolls when they do not all fit. */
@media (min-width: 700px) and (orientation: portrait) and (not ((pointer: coarse) and (max-height: 500px) and (orientation: landscape))) {
  .grid:not(.focus):is([data-count="5"],[data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],
                       [data-count="10"],[data-count="11"],[data-count="12"],[data-count="13"],[data-count="14"],[data-count="15"],[data-count="16"]) {
    overflow-y: auto; align-content: safe center;
  }
  .grid:not(.focus):is([data-count="5"],[data-count="6"],[data-count="7"],[data-count="8"],[data-count="9"],
                       [data-count="10"],[data-count="11"],[data-count="12"],[data-count="13"],[data-count="14"],[data-count="15"],[data-count="16"]) .tile {
    width: calc((100cqw - 2 * var(--gap)) / 2 - 1px);
  }
}

/* Seven toolbar buttons (speaker added): slightly smaller when the toolbar runs down the side of a sideways phone. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .controls { gap: 4px; padding: 8px 6px; }
  .controls button { width: 40px; height: 40px; }
  .controls button svg { width: 24px; height: 24px; }
}
@media (pointer: coarse) and (max-height: 400px) and (orientation: landscape) {
  .controls { gap: 3px; padding: 6px 5px; }
  .controls button { width: 34px; height: 34px; }
  .controls button svg { width: 21px; height: 21px; }
}

/* ---- admin portal ---- */
.card.xwide { max-width: 980px; }
.ad-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.ad-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.ad-tile b { display: block; font-size: 24px; line-height: 1.1; color: var(--text); }
.ad-tile span { font-size: 13px; color: var(--muted); }
.ad-orgs { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ad-org { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.ad-org.is-susp { border-color: var(--warn-text); }
.ad-orghead { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 0; background: var(--panel-2); padding: 12px 14px; flex-wrap: wrap; }
.ad-orghead:disabled { opacity: 1; cursor: default; }
.ad-orgname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.ad-orgmeta { margin: 0; white-space: nowrap; }
.ad-chev { font-size: 22px; line-height: 1; color: var(--muted); transition: transform .15s; }
.ad-org.is-open .ad-chev { transform: rotate(90deg); }
.ad-orghead:disabled .ad-chev { display: none; }
.ad-orgbody { padding: 4px 14px 14px; }
.ad-orgbody > .fine { margin: 8px 0 0; }
.ad-user { flex-wrap: wrap; }
.ad-user .who { flex: 1 1 220px; }
.ad-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-email { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.ad-meta { margin: 2px 0 0 !important; }
.ad-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-user.is-susp .who { opacity: .75; }
.tag.warn { background: var(--warn-bg); color: var(--warn-text); }
.tag.grey { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.ad-orgbody .actions { margin-top: 14px; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 14, 18, .55); }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: 420px; padding: 20px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal-box h2 { margin: 0 0 8px; font-size: 18px; }
.modal-box p { margin: 0 0 6px; color: var(--muted); }
@media (min-width: 700px) { .ad-user .who { flex-basis: 320px; } }
@media (max-width: 480px) { .ad-acts { width: 100%; } .ad-acts button { flex: 1; } }
.modal-box .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.musicnext { padding: 6px 12px; font-size: 13px; }
.musicnext[hidden] { display: none; }

/* Admin portal: create and edit cards */
.modal-box.wide { max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-box .fld { margin: 0; }
.modal-box .fld .fine { margin: 4px 0 0; }
.modal-box label.chk { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; color: var(--text); font-size: 15px; }
.modal-box label.chk input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.modal-box .notice { margin-top: 14px; }
input[type=date], textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; box-sizing: border-box; }
input[type=date]:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea { resize: vertical; }
.modal-box .linkbox { display: flex; gap: 8px; }
.modal-box .linkbox input { flex: 1 1 auto; min-width: 0; }
.modal-box .ad-reset { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.ad-top { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.ad-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) { .modal-box .linkbox { flex-wrap: wrap; } .modal-box .linkbox button { flex: 1; } .ad-top button { flex: 1; } }


/* ================= Modern call menu (the three dots on phones, the cog on tablets and computers) ================= */
.moremenu { width: min(340px, calc(100% - 24px)); padding: 8px; border-radius: 20px; gap: 2px; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.moremenu [hidden] { display: none !important; }
.moremenu button { align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 10px; min-height: 52px; border-radius: 14px; color: var(--text); font-weight: 500; }
.moremenu button:hover, .moremenu button:active { background: var(--panel-2); }
.mm-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-style: normal; line-height: 0; }
.mm-ico svg { width: 20px; height: 20px; }
.mm-txt { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25; }
.moremenu button b { flex: none; margin-left: auto; letter-spacing: 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.moremenu button#mmId b { color: var(--text); letter-spacing: .5px; }
.mm-sep { height: 1px; margin: 6px 8px; background: var(--line); }
.mm-grab { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 2px auto 8px; }
.phone-only { display: none !important; }
.mm-close { justify-content: center !important; color: var(--muted) !important; border: 1px solid var(--line) !important; margin-top: 6px; }
/* On / Off shown as a switch */
.moremenu b.sw { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); font-size: 0 !important; color: transparent !important; transition: background .15s; }
.moremenu b.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s; }
.moremenu b.sw[data-on="1"] { background: var(--brand); }
.moremenu b.sw[data-on="1"]::after { transform: translateX(18px); }

/* ================= Phone toolbar: Mic, Camera, Speaker, three dots, End call ================= */
/* Camera and microphone live in the three-dots menu on every device. */
#devBtn { display: none !important; }
@media (max-width: 699px), ((pointer: coarse) and (max-height: 500px) and (orientation: landscape)) {
  #layoutBtn, #qualBtn, #fsBtn { display: none !important; }
  .phone-only { display: flex !important; }
}
@media (max-width: 699px) and (orientation: portrait) {
  /* The call fills the screen to the bottom edge; the toolbar sits low, partly in the home-indicator area, so the video gets that space */
  body:has(#room:not([hidden])) main { padding-bottom: 0; }
  /* Rounded floating bar with circular buttons, about 15% smaller than before */
  .controls { bottom: calc(6px + env(safe-area-inset-bottom) / 2); gap: 7px; padding: 8px 10px; }
  .controls button { flex: none; width: 49px; height: 49px; max-width: none; aspect-ratio: 1 / 1; }
  .controls button svg { width: 24px; height: 24px; }
  /* The menu becomes a bottom sheet over a dimmed screen */
  .moremenu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; max-width: none; z-index: 20;
    max-height: 82dvh; overflow-y: auto; border-radius: 24px 24px 0 0; border-width: 1px 0 0;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,.3), 0 0 0 100vmax rgba(8,14,18,.5);
  }
  .moremenu .mm-grab { display: block; }
  .moremenu button { min-height: 56px; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .moremenu { right: calc(70px + env(safe-area-inset-right)); width: 320px; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .moremenu button { min-height: 44px; padding: 5px 8px; }
  .mm-ico { width: 32px; height: 32px; }
  .mm-sep { margin: 3px 8px; }
}
/* Create/edit cards: Save and Cancel stay visible while the form scrolls */
.modal-box.wide > .actions:last-child { position: sticky; bottom: -21px; margin: 16px -18px -21px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); z-index: 1; }

/* ================= Round 3 tweaks ================= */
/* Phone sideways: toolbar buttons the same size as upright */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .controls { gap: 6px; padding: 8px 7px; }
  .controls button, .controls button { width: 49px; height: 49px; }
  .controls button svg { width: 24px; height: 24px; }
}
@media (pointer: coarse) and (max-height: 400px) and (orientation: landscape) {
  .controls { gap: 5px; padding: 6px 6px; }
  .controls button { width: 49px; height: 49px; }
  .controls button svg { width: 24px; height: 24px; }
}
/* Devices panel and menus sit well clear of the toolbar so a stray tap cannot hit the buttons below */
.devices, .moremenu { bottom: calc(132px + env(safe-area-inset-bottom)); }
.devices { max-height: calc(100dvh - 180px); }
@media (max-width: 699px) and (orientation: portrait) {
  .devices { bottom: calc(116px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px); }
}
/* Phone sideways: the devices panel is compact so every control fits on one screen without scrolling */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .devices {
    left: 8px; right: calc(70px + env(safe-area-inset-right)); top: 8px; bottom: auto; transform: none; width: auto;
    max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px 10px 8px;
    grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; align-items: start;
  }
  .devices label { margin: 0 0 2px; font-size: 11px; }
  .devices select { padding: 5px 8px; font-size: 13px; }
  .devices .speaker { grid-column: auto; margin-top: 0; }
  .devices .spk-row button.icon { width: 32px; height: 32px; }
  .devices .devprev { grid-column: 1 / 3; margin-top: 2px; gap: 10px; align-items: flex-start; }
  .devices .devprev[data-n] .pv { flex: 0 0 150px; width: 150px; gap: 3px; }
  .devices .micsel label { display: none; }
  .devices .micsel select { width: 100%; }
  .devices .meter-col { gap: 2px; }
  .devices .meter-label, .devices .meter-note { display: none; }
  .devices .meter-bar { height: 6px; }
  .devices .blurrow { grid-column: 1 / 3; margin-top: 0; gap: 4px; }
  .devices .blur-label { display: none; }
  .devices .blurbtn { padding: 5px 9px; font-size: 12px; }
  .devices .dev-done { grid-column: 3; align-self: end; margin-top: 0; padding: 8px 12px; }
}

/* Phone labels: no camera name after the person's name; thumbnails carry a slim label along the bottom edge */
.tile .name .xtra { display: inline; }
@media (max-width: 699px), ((pointer: coarse) and (max-height: 500px) and (orientation: landscape)) {
  .tile .name .xtra { display: none; }
  .grid.focus .tile:not(.focus-main) .bar, .grid.many .tile .bar { left: 0; right: 0; bottom: 0; max-width: none; }
  .grid.focus .tile:not(.focus-main) .name, .grid.many .tile .name {
    width: 100%; border-radius: 0; padding: 2px 7px; font-size: 11px; line-height: 1.5; background: rgba(8,16,22,.72);
  }
  .grid.focus .tile:not(.focus-main) .micbadge, .grid.many .tile .micbadge { right: 5px; bottom: 22px; width: 20px; height: 20px; }
  .grid.focus .tile:not(.focus-main) .micbadge svg, .grid.many .tile .micbadge svg { width: 12px; height: 12px; }
}

/* Inactivity warning */
.idlewarn { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; max-width: 460px; margin: 0 auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--warn-text); border-radius: 14px; box-shadow: 0 10px 32px rgba(0,0,0,.28); color: var(--text); font-size: 14px; }
.idlewarn span { flex: 1 1 200px; }

/* Admin portal round 2: collapsed tiles, bigger arrows, one row of actions, Back button under the logo */
.ad-chev { font-size: 34px; width: 34px; text-align: center; font-weight: 300; }
.ad-user { display: block; padding: 0; }
.members li.ad-user { display: block; padding: 0; }
.ad-userhead { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 10px 0; min-height: 48px; }
.ad-userhead .ad-line { flex: 1; min-width: 0; }
.ad-user.is-open .ad-chev { transform: rotate(90deg); }
.ad-userbody { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 0 0 12px; }
.ad-userbody .who { flex: 1 1 220px; }
.ad-orgacts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 700px) { .ad-orgacts { flex-wrap: nowrap; } .ad-orgacts button { white-space: nowrap; } }
@media (max-width: 480px) { .ad-orgacts button { flex: 1 1 45%; } }
/* Browser, tablet and sideways phone: the logo stays far left; Back is a white button on the line below. */
@media (min-width: 601px) {
  header.bar { flex-wrap: wrap; row-gap: 0; }
  header.bar .brand { order: 0; }
  header.bar .title { order: 1; }
  header.bar .theme-btn { order: 2; }
  header.bar:has(.backbtn)::before { content: ''; order: 9; flex: 0 0 100%; height: 0; }
  header.bar .backbtn { order: 10; flex: 0 0 auto; margin-right: auto; margin-top: 8px; background: #fff; color: var(--brand); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
  header.bar .backbtn:hover { border-color: var(--brand); text-decoration: none; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  header.bar:has(.backbtn)::before { display: none; }
  header.bar .backbtn { background: none; border: 0; box-shadow: none; padding: 2px 0 4px; flex: 0 0 100%; text-align: left; border-radius: 0; }
}

.members .ad-userhead { padding: 10px 0; background: none; border: 0; font-size: inherit; }
.members .ad-userhead:hover { background: none; }

/* Header with a Back button (browser and tablet): the line sits under the logo; Back is under the line. On wide screens it lines up with the top of the main box. */
@media (min-width: 601px) {
  header.bar:has(.backbtn) { border-bottom: 0; }
  header.bar:has(.backbtn)::before { height: 1px; background: var(--line); margin: 12px -16px 0; flex: 0 0 calc(100% + 32px); }
  header.bar .backbtn { margin-top: 12px; }
}
@media (min-width: 1240px) {
  header.bar:has(.backbtn) { border-bottom: 1px solid var(--line); position: relative; }
  header.bar:has(.backbtn)::before { display: none; }
  header.bar .backbtn { position: absolute; left: 16px; top: calc(100% + 24px); margin: 0; z-index: 2; }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  header.bar:has(.backbtn) { border-bottom: 1px solid var(--line); }
  header.bar:has(.backbtn)::before { display: none; }
  header.bar .backbtn { position: static; margin: 0; }
}
/* Edit cards: tighter so they fit without a scroll bar on a normal screen. */
.modal-box.wide { padding: 18px 18px 14px; }
.modal-box.wide label { margin: 8px 0 3px; }
.modal-box.wide input[type=text], .modal-box.wide input[type=email], .modal-box.wide input[type=tel], .modal-box.wide input[type=number], .modal-box.wide input[type=date], .modal-box.wide select { padding: 8px 12px; }
.modal-box.wide label.chk { margin: 10px 0 0; }
.modal-box .ad-reset { margin-top: 12px; }
.modal-box.wide .actions { margin: 12px 0 0; }
.modal-box.wide > .actions:last-child { bottom: -14px; margin: 12px -18px -14px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); }
.modal-box .ad-reset .linkbox button { white-space: nowrap; }
/* Names: arrow points down when collapsed and right when expanded (as requested). */
.ad-userhead .ad-chev { transform: rotate(90deg); }
.ad-user.is-open .ad-userhead .ad-chev { transform: rotate(0deg); }
/* A line above the first user and below the last one. */
.ad-orgbody .members, #supList { border-top: 1px solid var(--line); margin-top: 12px; }
.ad-orgbody .members li:last-child, #supList li:last-child { border-bottom: 1px solid var(--line); }
.ad-orgbody .members + .actions { margin-top: 14px; }
.quality .qopt { margin: 4px 0; } .quality .qopt label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text); }
.quality .qopt input { width: 18px; height: 18px; accent-color: var(--brand); }

/* Dragging pictures around in gallery view */
.grid:not(.focus):not([data-count="1"]) .tile:not(.chip) { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tile.dragging { opacity: .35; outline: 3px dashed var(--brand); outline-offset: -3px; cursor: grabbing; }
.tile.dragging video { visibility: hidden; }
.tile.droptarget { outline: 4px solid var(--brand); outline-offset: -4px; box-shadow: inset 0 0 0 100vmax rgba(16,63,211,.18); }
.dragghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; box-sizing: border-box; border: 3px solid var(--brand); border-radius: 14px; background: rgba(16,63,211,.14); box-shadow: 0 10px 30px rgba(0,0,0,.3); display: flex; align-items: flex-end; padding: 8px 12px; color: var(--text); font-weight: 600; }
.dragghost span { background: var(--panel); border-radius: 8px; padding: 3px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dragging-tile { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* Phone sideways: the dots menu was squeezed to one row because the later "bottom" rule fought top:50%. Centre it and let it scroll. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .moremenu { top: 50%; bottom: auto; transform: translateY(-50%); max-height: calc(100dvh - 16px); overflow-y: auto; }
}

/* Session box: wider, with the buttons on one line each */
.sessionpop { width: min(440px, calc(100% - 24px)); }
.sessionpop .sp-row { flex-wrap: wrap; }
.sessionpop .sp-row button { padding: 12px 14px; min-height: 48px; font-size: 15px; white-space: nowrap; flex: 1 1 0; }
@media (max-width: 480px) { .sessionpop .sp-row #spExtend { flex: 1 1 100%; } }

/* ===== Dots menu: one line per item; the description is a tooltip (hover on computers, long-press on touch) ===== */
#moreMenu .mm-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#moreMenu .mm-txt small { display: none; }
#moreMenu button { min-height: 44px; }
.mm-tip { position: fixed; z-index: 60; max-width: min(260px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 10px; background: #111827; color: #fff; font-size: 12.5px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transition: opacity .12s; }
.mm-tip.on { opacity: 1; }

/* Admin portal: a collapsed person is always one line (long names are shortened with ...) */
.ad-userhead .ad-line { flex-wrap: nowrap; }
.ad-userhead .ad-line b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-userhead .ad-line .tag { flex: none; white-space: nowrap; }

/* ===== Leave call box: stars on top, two blue buttons, a cross to close ===== */
.leavemenu { gap: 10px; padding: 16px 16px 16px; }
.leavemenu button.primary { flex-direction: row; align-items: center; justify-content: center; min-height: 48px; width: 100%; border-radius: 12px; font-weight: 600; color: #fff; background: var(--brand); border: 0; }
.leavemenu button.primary:hover, .leavemenu button.primary:active { background: var(--brand); filter: brightness(1.08); }
.leavemenu .lm-x { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; align-items: center; font-size: 26px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 50%; width: 36px; }
.leavemenu .lm-x:hover { background: var(--panel-2); color: var(--text); }
.lm-rate { text-align: center; padding: 2px 36px 0; }
.lm-ratetitle { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.lm-stars { display: flex; justify-content: center; gap: 4px; }
.leavemenu .lm-star { width: 44px; min-height: 44px; padding: 0; flex: none; justify-content: center; align-items: center; background: none; border: 0; border-radius: 10px; }
.lm-star svg { fill: none; stroke: #d19b00; stroke-width: 1.6; transition: fill .1s; }
.lm-star.on svg { fill: #f5b301; }

/* Join page button rows: every button the same size. Three across (signed out, or Admin: 3 + 2), two across for a Host (2 + 2). */
#joinCard .btnrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#joinCard .btnrow.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#joinCard .btnrow .btnlink { display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; min-height: 44px; width: 100%; }
#joinCard .btnrow .btnlink[hidden] { display: none; }
@media (max-width: 480px) { #joinCard .btnrow { gap: 8px; } #joinCard .btnrow .btnlink { font-size: 13px; padding: 6px 4px; } }

/* Settings: password buttons share one line with Admin portal and Sign out */
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acct-actions > * { margin: 0; }
.acct-actions [hidden] { display: none !important; }
.acct-actions button, .acct-actions a.btnlink { padding: 8px 12px; font-size: 14px; white-space: nowrap; }

/* Connection test: green tick that draws itself when the connection is good enough for HD calls */
.hd-ok { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: #138a3d; font-weight: 700; animation: hd-pop .5s ease-out both; }
.hd-ok svg { flex: none; }
.hd-ring { stroke: #1fa24a; stroke-width: 3.5; stroke-dasharray: 145; stroke-dashoffset: 145; animation: hd-draw .6s ease-out .05s forwards; }
.hd-check { stroke: #1fa24a; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: hd-draw .4s ease-out .55s forwards; }
@keyframes hd-draw { to { stroke-dashoffset: 0; } }
@keyframes hd-pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hd-ok, .hd-ring, .hd-check { animation: none; stroke-dashoffset: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hd-ok { color: #4cd37b; } }
:root[data-theme="dark"] .hd-ok { color: #4cd37b; }
.ad-rating { margin-top: 0 !important; letter-spacing: .5px; }

/* ---------- Schedule a call ---------- */
input[type=time] { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; box-sizing: border-box; }
input[type=time]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.sch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sch-row select { width: 100%; }
@media (max-width: 480px) { .sch-row { grid-template-columns: 1fr; gap: 0; } }
.sch-list { margin-top: 10px; }
.sch-list li.sch-item { display: block; padding: 14px 0; }
.sch-title { font-weight: 600; overflow-wrap: anywhere; }
.sch-when { color: var(--text); margin-top: 2px; }
.sch-who { margin: 6px 0 0; overflow-wrap: anywhere; }
.sch-item .actions { margin: 12px 0 0; }
.sch-item .actions button, .sch-item .actions a.btnlink { padding: 8px 14px; font-size: 14px; }
.sch-item .actions a.btnlink { flex: none; }

/* ---------- Call log (Super Admin) ---------- */
.cl-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 4px 0; font-size: 18px; min-height: 44px; }
.cl-head b { flex: none; }
.cl-head .fine { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-head:hover { background: none; border: 0; }
.cl-head .ad-chev { margin-left: auto; transition: transform .15s; }
#callCard.is-open .cl-head .ad-chev { transform: rotate(90deg); }
.cl-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cl-tools input[type=text] { flex: 1 1 200px; min-width: 0; }
.cl-tools select { flex: 0 0 auto; width: auto; }
.cl-list { margin-top: 10px; }
.cl-list li.cl-item { display: block; padding: 0; }
.cl-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 10px 0; min-height: 46px; font-size: 14px; }
.cl-row:hover { background: none; border: 0; }
.cl-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cl-when { flex: 0 0 150px; }
.cl-host { flex: 1 1 120px; font-weight: 600; }
.card .cl-row .cl-org { flex: 1 1 100px; margin: 0; }
.cl-dur { flex: 0 0 72px; text-align: right; }
.cl-n { flex: 0 0 76px; text-align: right; }
.cl-star { flex: 0 0 48px; text-align: right; color: var(--muted); }
.cl-row .ad-chev { flex: none; transition: transform .15s; }
.cl-item.is-open .cl-row .ad-chev { transform: rotate(90deg); }
.cl-detail { padding: 4px 0 16px; font-size: 14px; }
.cl-grid { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 0 0 12px; }
.cl-grid dt { color: var(--muted); }
.cl-grid dd { margin: 0; overflow-wrap: anywhere; }
.cl-sub { font-weight: 600; margin: 6px 0 4px; }
.cl-people { list-style: none; margin: 0 0 12px; padding: 0; }
.cl-people li { padding: 3px 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .cl-org, .cl-star, .cl-n { display: none; }
  .cl-when { flex: none; }
  .cl-dur { flex-basis: 56px; }
  .cl-grid { grid-template-columns: 110px 1fr; }
}

/* ---------- Calendar ---------- */
.cal-card { max-width: 760px; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-nav h2 { flex: 1; margin: 0; text-align: center; font-size: 18px; }
.cal-nav button { padding: 8px 14px; min-width: 44px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 12px; color: var(--muted); }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 78px; padding: 6px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 11px; overflow: hidden; }
.cal-day:hover { border-color: var(--brand); }
.cal-day.other { opacity: .5; }
.cal-day.today .cal-num { background: var(--brand); color: #fff; }
.cal-day.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.cal-num { align-self: flex-start; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; font-size: 13px; font-weight: 600; }
.cal-chip { display: block; padding: 1px 4px; border-radius: 5px; background: var(--panel-2); color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-more { color: var(--muted); }
.cal-dot { display: none; }
@media (max-width: 560px) {
  .cal-day { min-height: 46px; padding: 4px; align-items: center; }
  .cal-chip, .cal-more { display: none; }
  .cal-dot { display: block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }
  .cal-num { align-self: center; }
}

/* Phone held sideways: the Leave call and camera boxes sit clear of the toolbar on the right, not partly behind it */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .moremenu.leavemenu { right: calc(104px + env(safe-area-inset-right)); width: min(320px, calc(100vw - 220px)); }
}

/* Join screen for someone who is not signed in: Join across the full width, Sign in as host and Cancel under it */
.lb-btns:has(#signinBtn:not([hidden])) #joinBtn { grid-column: 1 / -1; }
#signinBtn[hidden] { display: none; }
.lb-btns:has(#signinBtn:not([hidden])) #signinBtn, .lb-btns:has(#signinBtn:not([hidden])) #cancelBtn { margin-top: 10px; }

/* Buttons moved under the camera picture (wide landscape): a little less space above them */
.lb-view .lb-btns .full { margin-top: 14px; }
.lb-view .lb-btns:has(#signinBtn:not([hidden])) #signinBtn, .lb-view .lb-btns:has(#signinBtn:not([hidden])) #cancelBtn { margin-top: 10px; }
@media (orientation: landscape) and (max-height: 560px) {
  .lb-view .lb-btns .full, .lb-view .lb-btns:has(#signinBtn:not([hidden])) #signinBtn, .lb-view .lb-btns:has(#signinBtn:not([hidden])) #cancelBtn { margin-top: 6px; }
}

/* Waiting room, wide landscape: the music box and Cancel drop down so Cancel lines up with the bottom of the "Waiting for host" bar */
@media (orientation: landscape) and (min-width: 700px) {
  #waitroom .lb { align-items: stretch; }
  #waitroom .lb-form { display: flex; flex-direction: column; }
  #waitroom .lb-form .musicbox { margin-top: auto; }
  #waitroom .lb-form .full.ghost { margin-top: 12px; }
}

/* Privacy and Terms pages: 60% wider text column (640px to 1024px) */
.card.wide.legal { max-width: 1024px; }

/* Leave call box: the buttons must stay inside the box (they ran past the right edge on a phone held sideways) */
.leavemenu { box-sizing: border-box; overflow-x: hidden; }
.leavemenu button, .leavemenu button.primary { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.leavemenu { grid-template-columns: minmax(0, 1fr); }

/* Address book */
.ab-labelrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ab-pick { padding: 6px 12px; font-size: 13px; margin-bottom: 4px; }
.ab-prompt { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.ab-prompt p { margin: 0 0 8px; }
.ab-prompt .actions { margin: 10px 0 0; }
.ab-newrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.ab-newrow span { flex: 1 1 50%; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.ab-newrow input { flex: 1 1 50%; min-width: 0; padding: 8px 10px; }
.ab-pickList { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.ab-pickList li { border-bottom: 1px solid var(--line); }
.ab-pickList li:last-child { border-bottom: 0; }
.ab-pickList label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 2px; color: var(--text); font-size: 15px; cursor: pointer; }
.ab-pickList input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 0; }
.ab-who { display: block; min-width: 0; overflow-wrap: anywhere; }
.ab-who small { display: block; color: var(--muted); font-size: 13px; }
.ab-list li.ab-item { align-items: flex-start; }
.ab-list .who .fine { margin: 2px 0 0; }
.ab-acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 480px) { .ab-list li.ab-item { flex-direction: column; align-items: stretch; } .ab-acts button { flex: 1; } .ab-newrow { flex-direction: column; align-items: stretch; gap: 4px; } }
.ab-labelrow { margin-top: 24px; align-items: center; }
.ab-labelrow label { margin: 0 0 6px; }
.ab-pick { margin-bottom: 6px; }

/* Close (X) in the top right corner of the address book */
.cardx-host { position: relative; }
.cardx { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; min-height: 0; font-size: 28px; line-height: 1; color: var(--muted); background: none; border: 0; border-radius: 50%; text-decoration: none; cursor: pointer; }
.cardx:hover, .cardx:focus-visible { background: var(--panel-2); color: var(--text); }
.cardx-host > h2 { padding-right: 44px; }
.card a.cardx { color: var(--muted); } .card a.cardx:hover { color: var(--text); }

/* Join screen buttons: three to a row, and a short last row is centred (7 buttons leave one on its own) */
#joinCard .btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#joinCard .btnrow .btnlink { flex: 0 0 calc((100% - 20px) / 3); width: auto; }
@media (max-width: 480px) { #joinCard .btnrow { gap: 8px; } #joinCard .btnrow .btnlink { flex-basis: calc((100% - 16px) / 3); } }

/* Join lobby on a wide landscape screen: the controls on the right start level with the "Check your camera" line, which makes the box shorter */
@media (orientation: landscape) and (min-width: 700px) {
  #lobby:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  #lobby > h1 { grid-column: 1 / -1; }
  #lobby > p { grid-column: 1; grid-row: 2; }
  #lobby .lb { display: contents; }
  #lobby .lb-view { grid-column: 1; grid-row: 3; }
  #lobby .lb-form { grid-column: 2; grid-row: 2 / span 2; }
  #lobby .lb-form > :first-child label:first-child { margin-top: 0; }
}

/* Privacy and Terms as small centred text links under the join screen buttons */
#joinCard .jn-legal { margin: 16px 0 2px; text-align: center; font-size: 13px; color: var(--muted); }
#joinCard .jn-legal a { color: var(--muted); text-decoration: none; padding: 4px 6px; }
#joinCard .jn-legal a:hover, #joinCard .jn-legal a:focus-visible { color: var(--brand); text-decoration: underline; }
@media (orientation: landscape) and (max-height: 560px) { #joinCard .jn-legal { margin-top: 8px; } }


/* ---- Login page, browser and tablet (approved option 3): story on the left, photo in the middle, sign-in card on the right. Phones keep the layout above. ---- */
.lg-left { display: contents; }
.lg-story, .lg-hero, .lg-nav, .lg-foot { display: none; }
@media (min-width: 760px) and (min-height: 600px) {
  body.login { --lg-navy: #071957; --lg-blue: #103fd3; --lg-muted: #5d6d88; --lg-mist: #f4f7fd; --lg-line: #dce4ef; --lg-surface: #fff; --lg-field: #fff; background: linear-gradient(125deg, #f4f7fd 0%, #fff 75%); color: var(--lg-navy); }
  :root[data-theme="dark"] body.login { --lg-navy: #f3f5ff; --lg-blue: #a9a7ff; --lg-muted: #b7c2da; --lg-mist: #182342; --lg-line: #33415f; --lg-surface: #111d39; --lg-field: #182542; background: #0a1430; }
  body.login .app { height: auto; min-height: 100vh; min-height: 100dvh; }
  body.login main { display: grid; flex: 1; overflow: visible; max-width: 1600px; width: 100%; margin: 0 auto; padding: 56px 4.4vw 48px; grid-template-columns: minmax(0, 1.2fr) minmax(365px, 440px); gap: 48px; justify-content: space-between; align-items: start; align-content: start; }
  /* header */
  body.login header.bar { height: 61px; padding: 0 max(4.4vw, 24px); gap: 24px; background: var(--lg-surface); border-bottom: 0; }
  /* The logo is the same size here as in the header on every other page (30 px icon, 18 px wordmark). */
  body.login header.bar .brand { color: var(--lg-navy); }
  body.login header.bar .brand .wm i { color: var(--lg-blue); }
  body.login header.bar .brand { order: 0; }
  body.login header.bar .title { flex: 1; order: 1; }
  body.login .lg-nav { order: 2; }
  body.login header.bar .theme-btn { order: 3; }
  body.login .lg-nav { display: flex; align-items: center; gap: 28px; margin-left: 0; font-size: 13px; }
  body.login .lg-nav a { color: var(--lg-muted); text-decoration: none; padding: 6px 4px; }
  body.login .lg-nav a:hover, body.login .lg-nav a:focus-visible { text-decoration: underline; }
  body.login header.bar .theme-btn { margin-left: 25px; padding: 8px 14px; border: 1px solid var(--lg-line); background: var(--lg-mist); color: var(--lg-muted); }
  /* story */
  body.login .lg-story { display: block; grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
  body.login .lg-eyebrow { margin: 0 0 12px; color: var(--lg-muted); font-size: 15px; font-weight: 600; letter-spacing: 0; }
  body.login .lg-title { margin: 0 0 18px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.8px; font-weight: 650; color: var(--lg-navy); }
  body.login .lg-intro { max-width: 460px; margin: 0 0 22px; color: var(--lg-muted); font-size: 15px; line-height: 1.6; }
  body.login .lg-cams { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  body.login .lg-cams li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 14px; color: var(--lg-navy); }
  body.login .lg-cam-ico { width: 34px; height: 34px; border-radius: 50%; background: #e7efff; color: var(--lg-blue); display: grid; place-items: center; flex-shrink: 0; }
  :root[data-theme="dark"] body.login .lg-cam-ico { background: #263759; }
  body.login .lg-cam-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* photo */
  body.login .lg-hero { display: block; grid-column: 2; grid-row: 1; margin: 0 -55px 0 -75px; align-self: stretch; contain: size; pointer-events: none; position: relative; }
  body.login .lg-hero img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
  :root[data-theme="dark"] body.login .lg-hero { background: #fff; border-radius: 22px; overflow: hidden; }
  /* sign-in card(s) */
  body.login .lg-left { display: block; align-self: start; grid-column: 2; grid-row: 1; position: relative; z-index: 2; min-width: 0; }
  body.login .lg-left .card { width: 100%; max-width: none; margin: 0; padding: 30px 30px 26px; background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: 22px; box-shadow: 0 12px 45px rgba(7,25,87,.03); color: var(--lg-navy); }
  body.login #viewSignin { display: block; padding: 30px 30px 26px; }
  body.login #viewSignin[hidden] { display: none; }
  body.login .lg-left .card h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.8px; margin: 0 0 8px; color: var(--lg-navy); }
  body.login .lg-left .card p, body.login .lg-left .card .fine { color: var(--lg-muted); font-size: 14px; line-height: 1.65; }
  body.login .lg-left .card .si-head p { margin: 0 0 23px; }
  body.login .lg-left .card .fine { margin: 12px 0 18px; }
  body.login .lg-left .card label { color: var(--lg-muted); font-size: 13px; margin: 0 0 6px; }
  body.login .lg-left .card input { height: 47px; margin: 0 0 16px; padding: 11px 13px; font-size: 15px; background: var(--lg-field); color: var(--lg-navy); border: 1px solid var(--lg-line); border-radius: 10px; }
  body.login .lg-left .card .pwwrap input { padding-right: 46px; }
  body.login .lg-left .card .full { margin-top: 0; min-height: 47px; border-radius: 10px; background: #103fd3; color: #fff; font-weight: 650; }
  body.login .lg-left .card .full:hover { background: #0c32b0; }
  body.login .lg-left .card .linkrow { gap: 17px 16px; margin-top: 19px; }
  body.login .lg-left .card .linkrow + .linkrow { margin-top: 12px; }
  body.login .lg-left .card .linkbtn { color: var(--lg-blue); font-size: 13px; }
  body.login #viewSignin .si-foot { margin-top: 0; }
  body.login #viewSignin .gj { margin: 25px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--lg-line); }
  body.login .gj-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--lg-navy); }
  body.login .gj-row { gap: 10px; }
  body.login .gj-row input { margin-bottom: 12px; }
  body.login .gj .full { margin-top: 0; }
  body.login .lg-left .btnrow { display: none; }
  /* footer */
  body.login .lg-foot { display: flex; align-items: center; gap: 25px; width: calc(100% - 8.8vw); max-width: 1460px; border-top: 1px solid var(--lg-line); margin: 0 auto; padding: 20px 0; color: var(--lg-muted); font-size: 13px; }
  body.login .lg-foot a { color: var(--lg-muted); text-decoration: none; }
  body.login .lg-foot a:hover { text-decoration: underline; }
  body.login .lg-foot-brand { font-weight: 700; color: var(--lg-navy); font-size: 16px; padding-right: 20px; border-right: 1px solid var(--lg-line); }
}
@media (min-width: 760px) and (min-height: 600px) and (max-width: 1180px) {
  body.login main { grid-template-columns: minmax(0, 1fr) 365px; gap: 32px; padding-top: 38px; }
  body.login .lg-story { grid-column: 1; grid-row: 1; }
  body.login .lg-left { grid-column: 2; grid-row: 1; }
  body.login .lg-left { align-self: start; }
  body.login .lg-hero { grid-column: 1; grid-row: 2; margin: -20px 0 0; max-width: 440px; justify-self: center; align-self: end; contain: none; }
  body.login .lg-hero img { height: auto; }
  body.login .lg-cams { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.login .lg-cams li { font-size: 13px; gap: 9px; }
  body.login .lg-cams li:last-child { grid-column: 1 / -1; }
  body.login .lg-title { font-size: 28px; }
  body.login .lg-intro { max-width: 100%; }
}
@media (min-width: 1181px) and (min-height: 600px) and (max-height: 850px) {
  body.login main { padding-top: 28px; padding-bottom: 28px; }
  body.login .lg-left .card, body.login #viewSignin { padding: 23px; }
  body.login .lg-left .card .si-head p { margin-bottom: 17px; }
  body.login .lg-left .card input { height: 43px; margin-bottom: 12px; }
  body.login .lg-left .card .full { min-height: 43px; }
  body.login .lg-left .card .linkrow { margin-top: 16px; gap: 13px 14px; }
  body.login #viewSignin .gj { margin-top: 20px !important; padding-top: 16px; }
  body.login .lg-hero { margin-top: 0; }
  body.login .lg-intro { font-size: 15px; }
  body.login .lg-cams { gap: 9px; }
  body.login .lg-cam-ico { width: 32px; height: 32px; }
  body.login .lg-title { font-size: clamp(26px, 2.4vw, 34px); }
}

/* ================= Full Frame layout (every screen) =================
   One picture fills the screen, cropped to fit with the height deciding the size so only the middle shows.
   The toolbar and timer bar float over it and fade when idle. Thumbnails sit in a strip just above the toolbar (upright screens:
   tall 9:16 slices; screens held sideways: 16:9), no gaps, no backing, centre-cropped.
   More thumbnails than fit go on further pages (swipe the big picture). Switched on by call.js adding .full to the grid. */
.fv-dots { display: none; }
@media screen {
  body.fv #room { container-type: size; }
  body.fv header.bar { display: none; }
  /* Full Frame runs to the very bottom: drop the bottom safe-area padding the page keeps for other layouts (this was the white strip on iPhone). */
  body.fv main { padding-bottom: 0; }
  /* The iPhone app sets --app-h (the whole screen height) so Full Frame reaches the bottom edge. */
  body.fv .app { height: var(--app-h, 100dvh); overflow: hidden; }
  .grid.full[data-count] {
    position: absolute; inset: 0; margin: 0; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end;
    gap: 2px; overflow: hidden; padding: 0 8px calc(92px + env(safe-area-inset-bottom)); background: #000;
    --fv-k: 5; --fv-tw: calc((100cqw - 16px - (var(--fv-k) - 1) * 2px) / var(--fv-k)); --fv-th: calc(var(--fv-tw) * 16 / 9);
  }
  .grid.full[data-count] .tile.focus-main {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; order: 0;
    border: 0; border-radius: 0; box-shadow: none; touch-action: pan-y; z-index: 0;
  }
  .grid.full[data-count] .tile.focus-main video { object-fit: cover; }
  .grid.full[data-count] .tile.focus-main::after { display: none; }
  /* --safe-top is the camera cut-out height, set by the UvioCall app when the picture runs to the very top; 0 elsewhere */
  .grid.full[data-count] .tile.focus-main .bar { left: 14px; top: calc(58px + var(--safe-top, 0px)); bottom: auto; }
  .grid.full[data-count] .tile.focus-main .badge { top: calc(58px + var(--safe-top, 0px)); right: 14px; }
  .grid.full[data-count] .tile.focus-main .bar .micbadge { position: static; flex: none; width: 26px; height: 26px; margin: 0; }
  .grid.full[data-count] .tile:not(.focus-main) {
    position: relative; flex: none; margin: 0; order: 0; z-index: 1; width: var(--fv-tw); height: var(--fv-th); aspect-ratio: auto; max-width: none;
    border: 0; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); cursor: pointer;
  }
  .grid.full[data-count] .tile.fv-off { display: none; }
  .grid.full[data-count] .tile:not(.focus-main) video { object-fit: cover; }
  .grid.full[data-count] .tile:not(.focus-main)::after { display: none; }
  .grid.full[data-count] .tile.speaking:not(.focus-main) { box-shadow: inset 0 0 0 3px #22c55e; }
  .grid.full[data-count] .tile:not(.focus-main) .bar { left: 0; right: 0; bottom: 0; max-width: none; }
  .grid.full[data-count] .tile:not(.focus-main) .name { width: 100%; border-radius: 0; padding: 1px 4px; font-size: 10px; line-height: 1.5; background: rgba(8,16,22,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grid.full[data-count] .tile:not(.focus-main) .badge { display: none; }
  /* Your own thumbnail has no name strip, so all of your picture shows */
  .grid.full[data-count] .tile.self:not(.focus-main) .bar .name { display: none; }
  .grid.full[data-count] .tile:not(.focus-main) .micbadge { top: 3px; right: 3px; bottom: auto; width: 18px; height: 18px; }
  .grid.full[data-count] .tile:not(.focus-main) .micbadge svg { width: 11px; height: 11px; }
  .grid.full[data-count] .tile:not(.focus-main) .avatar span { font-size: 22px; }
  /* page dots, just above the thumbnails */
  .grid.full[data-count] .fv-dots {
    display: flex; position: absolute; left: 0; right: 0; z-index: 2; justify-content: center; gap: 4px; pointer-events: none;
    bottom: calc(92px + env(safe-area-inset-bottom) + var(--fv-th) + 6px);
  }
  .fv-dots button { pointer-events: auto; width: 8px; height: 8px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
  .fv-dots button.on { background: #fff; width: 18px; border-radius: 4px; }
  /* floating toolbar over the picture */
  body.fv .controls { background: rgba(14,20,40,.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.14); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
  body.fv .controls button:not(.off):not(.endall):not(.danger) { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
  /* Leave stays red over the picture, as on the other layouts */
  body.fv .controls button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
  body.fv .pill { background: rgba(14,20,40,.58); color: #fff; border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  body.fv .pill .sep { background: #fff; }
  body.fv .pill { top: calc(6px + var(--safe-top, 0px)); }
  body.fv .admit { top: calc(12px + var(--safe-top, 0px)); }
  body.fv .sessionpop { top: calc(64px + var(--safe-top, 0px)); }
  body.fv .banner { top: calc(64px + var(--safe-top, 0px)); }
  /* Idle: controls dissolve, only the picture and thumbnails remain. A touch brings them back. */
  body.fv .controls, body.fv .pill, .grid.full[data-count] .tile.focus-main .bar, .grid.full[data-count] .tile.focus-main .badge, .grid.full[data-count] .fv-dots { transition: opacity .6s ease; }
  body.fv.fv-idle .controls, body.fv.fv-idle .pill, body.fv.fv-idle .grid.full[data-count] .tile.focus-main .bar, body.fv.fv-idle .grid.full[data-count] .tile.focus-main .badge, body.fv.fv-idle .grid.full[data-count] .fv-dots { opacity: 0; pointer-events: none; }
  .grid.full[data-count] { transition: padding-bottom .6s ease; }
  body.fv.fv-idle .grid.full[data-count] { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* Full Frame held sideways (phones, tablets, computers): 16:9 thumbnails along the bottom, right-justified like Google Meet, clear of the toolbar.
   A thumbnail whose picture is upright (class fv-port, set by fullview.js) is tall 9:16 instead, twice the height. */
@media screen and (orientation: landscape) {
  .grid.full[data-count] {
    --fv-pl: 8px; --fv-pr: 58px; --fv-pb: calc(104px + env(safe-area-inset-bottom));
    justify-content: flex-end;
    padding: 0 var(--fv-pr) var(--fv-pb) var(--fv-pl);
    --fv-tw: calc((100cqw - var(--fv-pl) - var(--fv-pr) - (var(--fv-k) - 1) * 2px) / var(--fv-k)); --fv-th: calc(var(--fv-tw) * 9 / 16);
  }
  .grid.full[data-count] .fv-dots { bottom: calc(var(--fv-pb) + var(--fv-th) + 6px); }
  .grid.full[data-count] .tile.fv-port:not(.focus-main) { height: calc(var(--fv-th) * 2); width: calc(var(--fv-th) * 2 * 9 / 16); }
}
/* Tablets and computers: the toolbar is bigger (54 px buttons, 20 px up) than on a phone, so the thumbnails need more room beneath them or they touch it
   while it is showing (1 Nov 2026). About 24 px of air above the toolbar, upright or sideways. */
@media screen and (min-width: 700px) and (not ((pointer: coarse) and (max-height: 500px) and (orientation: landscape))) {
  .grid.full[data-count] { --fv-pb: calc(128px + env(safe-area-inset-bottom)); padding-bottom: var(--fv-pb); }
  .grid.full[data-count] .fv-dots { bottom: calc(var(--fv-pb) + var(--fv-th) + 6px); }
}
/* Phones sideways: the toolbar is the vertical island on the right, so the thumbnails run along the very bottom, clear of it. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .grid.full[data-count] { --fv-pl: var(--tbl); --fv-pr: calc(var(--tbr) + 90px); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  body.fv.fv-idle .grid.full[data-count] { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .grid.full[data-count] { --fv-pb: calc(8px + env(safe-area-inset-bottom)); }
  .grid.full[data-count] .fv-dots { bottom: calc(var(--fv-pb) + var(--fv-th) + 6px); }
  .grid.full[data-count] .tile.focus-main .bar, .grid.full[data-count] .tile.focus-main .badge { top: calc(42px + var(--safe-top, 0px)); }
  body.fv .pill { top: calc(6px + var(--safe-top, 0px)); left: var(--tbl); }
}

/* In a call the page runs edge to edge: no padding around the call area (the sideways-phone page padding left a white strip at the top). */
@media screen {
  body:has(#room:not([hidden])) main { padding-top: 0; padding-bottom: 0; }
}
/* iPhone app, upright, in a call: the page runs under the notch and home bar, so the header keeps clear of the notch */
body.edge header.bar { padding-top: calc(max(var(--safe-top, 0px), env(safe-area-inset-top, 0px)) + 6px); }

/* Layout row in the three-dots menu: Gallery | Focus | Full Frame, the active one highlighted */
.moremenu .mm-layout { display: flex; align-items: center; gap: 12px; padding: 6px 10px; min-height: 52px; }
.mm-seg { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--panel-2); }
.moremenu .mm-seg button { flex: 1 1 auto; min-height: 38px; min-width: 0; padding: 0 6px; border-radius: 9px; justify-content: center; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; }
.moremenu .mm-seg button.on { background: var(--brand); color: #fff; }
.moremenu .mm-seg button:disabled { opacity: .4; }

/* Call ID in the timer bar uses the same colour as the time */
.pill .pill-code, .pill #pillCode { color: inherit; }

/* Layout button in the top bar, to the right of the Call ID (phones only; tablets and computers have it on the toolbar) */
.pill .pill-layout { flex: none; width: 28px; height: 28px; min-width: 0; padding: 0; margin: -2px -4px -2px 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center; line-height: 0; }
.pill .pill-layout:hover, .pill .pill-layout:active { background: rgba(127,127,127,.22); }
.pill .pill-layout svg { width: 18px; height: 18px; }

/* Phone bottom sheets (Leave, More, camera) float above the toolbar, so all four corners are rounded */
@media (max-width: 699px) and (orientation: portrait) {
  .moremenu { border-radius: 24px; border-width: 1px 0; }
}

/* Billing box in the organisation Admin's portal */
.ad-billing { border: 1px solid var(--border, #e1e7f5); border-radius: 12px; padding: 16px; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ad-billing h3 { margin: 0; }
.ad-billing p { margin: 0; }
.ad-billing label { display: flex; align-items: center; gap: 8px; }
.ad-billing input[type=number] { width: 5em; flex: none; }
.ad-billing button { margin: 4px 0; }

/* Message boxes can be dismissed with the X at their right end (see notice.js) */
.notice { position: relative; padding-right: 38px; }
.notice .nx { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .65; display: flex; align-items: center; justify-content: center; }
.notice .nx:hover, .notice .nx:focus-visible { opacity: 1; background: rgba(0, 0, 0, .08); }
.lb-form .notice .nx { top: 0; right: 2px; width: 22px; height: 22px; font-size: 16px; }

/* Sign-up form: Terms tick box and the Turnstile bot check */
.card label.check { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14px; line-height: 1.35; color: var(--muted); }
.card label.check input { width: 20px; height: 20px; flex: none; margin: 0; padding: 0; }
.card label.check span { flex: 1; }
.turnstile { margin: 14px 0 18px; min-height: 65px; }
/* The wide sign-in layout styles every input as a tall text box; keep the tick box small and in line with its text */
body.login .lg-left .card label.check { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 14px; line-height: 1.35; }
body.login .lg-left .card label.check input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex: none; }
body.login .lg-left .card .turnstile { margin: 0 0 16px; }

/* ---- One header for every page (28 Oct 2026): the logo sits where it does on the login page, so it does not appear to move when changing pages. ---- */
@media (min-width: 760px) and (min-height: 600px) {
  header.bar { min-height: 61px; padding-top: 0; padding-bottom: 0; padding-left: max(4.4vw, 24px); padding-right: max(4.4vw, 24px); box-sizing: border-box; }
  header.bar .backbtn { left: max(4.4vw, 24px); }
  header.bar .brand { min-height: 60px; } /* the logo row is always 60 px tall plus the 1 px line, so the logo sits at the same height even when a Back row wraps below it */
  header.bar:has(.backbtn)::before { margin-left: calc(-1 * max(4.4vw, 24px)); margin-right: calc(-1 * max(4.4vw, 24px)); flex-basis: calc(100% + 2 * max(4.4vw, 24px)); }
}

/* ---- Close (X) button (29 Oct 2026): on browser and tablet widths the Back button is replaced by an X inside the top right corner of the main box. It does the same as Back. Phones keep Back. ---- */
.closebtn { display: none; }
.cardx.wideonly { display: none; }
.cardx-host > h1, .cardx-host > h2 { padding-right: 44px; }
@media (min-width: 601px) and (not ((pointer: coarse) and (max-height: 500px) and (orientation: landscape))) {
  header.bar .backbtn { display: none; }
  .cardx.wideonly { display: grid; }
  /* With no Back row, the header is one row with a line under it. */
  header.bar:has(.backbtn) { border-bottom: 1px solid var(--line); }
  header.bar:has(.backbtn)::before { display: none; }
}
/* Phone-width browsers too (31 Oct 2026): the X replaces Back everywhere. */
header.bar .backbtn { display: none !important; }
.cardx.wideonly { display: grid; }
header.bar:has(.backbtn) { border-bottom: 1px solid var(--line); }
header.bar:has(.backbtn)::before { display: none !important; }
/* In the apps the Close X on a card is always shown, so Privacy, Terms and similar pages have a way out. */
html.inapp .cardx.wideonly { display: grid; }
/* In the apps the X in the top right corner is the way out, so the blue Back links are not shown (29 Oct 2026 decision, applied 31 Oct). */
html.inapp header.bar .backbtn { display: none !important; }
html.inapp header.bar:has(.backbtn) { border-bottom: 1px solid var(--line); }
html.inapp header.bar:has(.backbtn)::before { display: none; }

/* Settings page: two columns on wide screens (Account on the left, everything else on the right); one column below that. */
.set-cols { display: block; max-width: 640px; width: 100%; margin: 0 auto; }
.set-cols .card.wide { width: 100%; box-sizing: border-box; }
@media (min-width: 1000px) {
  .set-cols { display: grid; max-width: 1304px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .set-cols .card.wide { max-width: none; width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; }
}
.cal-card.cardx-host .cal-nav { padding-right: 44px; }
.set-cols > .cardx { top: 30px; }

/* ---- public marketing pages (home, features, pricing, how it works, FAQ) ---- */
html body header.bar:has(.mk-nav) { gap: 14px; flex-wrap: wrap; }
.mk-nav { display: none; margin-left: auto; gap: 22px; }
.mk-nav a, .mk-signin { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.mk-nav a:hover, .mk-signin:hover, .mk-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.mk-signin { margin-left: auto; border: 1px solid var(--line); }
.mk-nav + .mk-signin { margin-left: 8px; }
.mk-wrap { width: calc(100% - 32px); max-width: 1100px; margin: 28px auto; }
.mk-wrap h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.5px; margin: 0 0 12px; color: var(--wordmark); }
.mk-wrap h2 { font-size: 21px; margin: 34px 0 10px; color: var(--wordmark); }
.mk-wrap h3 { font-size: 16px; margin: 0 0 6px; }
.mk-wrap p, .mk-wrap li { line-height: 1.55; }
.mk-wrap a { color: var(--brand); }
.mk-lead { font-size: 18px; color: var(--muted); margin: 0 0 18px; }
.mk-crumb { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.mk-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.mk-wrap a.mk-btn { display: inline-block; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-decoration: none; font-weight: 600; }
.mk-wrap a.mk-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.mk-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.mk-grid li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.mk-grid p { margin: 0; color: var(--muted); }
.mk-steps, .mk-list { padding-left: 22px; }
.mk-steps li, .mk-list li { margin: 8px 0; }
.mk-q { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 8px 0; padding: 0 14px; }
.mk-q summary { cursor: pointer; padding: 13px 0; font-weight: 600; }
.mk-q p { margin: 0 0 14px; color: var(--muted); }
.mk-tablewrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; }
.mk-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.mk-table th, .mk-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.mk-table thead th { background: var(--brand-soft); color: var(--wordmark); }
.mk-table tbody tr:last-child th, .mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-foot { border-top: 1px solid var(--line); margin-top: 20px; padding: 20px 16px 28px; text-align: center; color: var(--muted); font-size: 14px; }
.mk-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.mk-foot a { color: var(--muted); }
@media (min-width: 1200px) { .mk-nav { display: flex; } }
@media (min-width: 760px) {
  .mk-grid { grid-template-columns: 1fr 1fr; }
  .mk-wrap h1 { font-size: 38px; }
}

/* ---- pricing page (cards, billing toggle) ---- */
.mk-wrap.wide { max-width: 1100px; }
.mk-center { text-align: center; }
.mk-center .mk-cta { justify-content: center; }
.pr-eyebrow { color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; }
.mk-center .mk-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.billing-toggle { display: inline-flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin: 14px auto 0; }
.billing-toggle button { font-size: 13.5px; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 9px 18px; border-radius: 999px; }
.billing-toggle button.active { background: var(--brand); color: #fff; }
.billing-save { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.billing-save strong { color: var(--brand); }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 40px 0 16px; align-items: stretch; text-align: left; }
.pcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; }
.pcard.featured { border-color: var(--brand); box-shadow: 0 8px 28px rgba(16,63,211,.16); }
.pcard-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.pcard h3 { font-size: 18px; margin: 4px 0 4px; }
.pcard .pcard-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; min-height: 40px; }
.pcard .price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.pcard .price .amount { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.pcard .price .unit { font-size: 13.5px; color: var(--muted); }
.pcard .price-note { font-size: 12.5px; color: var(--muted); margin: 0 0 20px; min-height: 16px; }
.pcard a.mk-btn { text-align: center; margin-bottom: 20px; }
.pcard ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.pcard li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; padding: 8px 0; border-top: 1px solid var(--line); margin: 0; }
.pcard li:first-child { border-top: 0; }
.pcard li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; stroke: var(--brand); }
.pcard li strong { color: var(--text); }
.manager-note { max-width: 760px; margin: 6px auto 0; font-size: 13px; color: var(--muted); }
.pr-section { margin-top: 44px; text-align: left; }
.pr-section h2 { text-align: center; }
.pr-sub { max-width: 720px; margin: 0 auto 6px; text-align: center; color: var(--muted); }
.pgrid-2 { max-width: 700px; margin: 0 auto; padding-top: 22px; }
.pr-faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-band { margin-top: 48px; padding: 36px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--brand-soft); }
.cta-band h2 { margin: 0 0 10px; }
@media (min-width: 640px) { .pgrid { grid-template-columns: 1fr 1fr; } .pgrid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pgrid:not(.pgrid-2) { grid-template-columns: repeat(4, 1fr); } }

/* ---- "Powered by Verge Technologies" footer and header Pricing link ---- */
.powered { display: flex; justify-content: center; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
p.powered { padding: 6px 0 12px; margin: 0; }
.powered a { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.powered img { display: block; height: 27px; width: auto; }
:root[data-theme="dark"] .powered img { filter: brightness(0) invert(1); opacity: .9; }
.hdr-link { margin-left: auto; color: var(--text); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.hdr-link:hover { background: var(--brand-soft); color: var(--brand); }
.hdr-link + .theme-btn { margin-left: 0; }
@media (max-width: 1199px) { .mk-nav { display: flex; margin-left: auto; } .mk-nav a:not([href="/pricing"]) { display: none; } .mk-nav + .mk-signin { margin-left: 0; } .mk-signin { margin-left: auto; } }

/* Line up the title, price, button and list across the plan cards, whatever the length of each card's text. */
@supports (grid-template-rows: subgrid) {
  .pgrid:not(.pgrid-2) { row-gap: 0; column-gap: 22px; }
  .pgrid:not(.pgrid-2) .pcard { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; margin-bottom: 22px; }
}
@media (max-width: 1199px) {
  html body header.bar:has(.mk-nav) { flex-wrap: nowrap; gap: 6px; }
  html body header.bar:has(.mk-nav) .mk-nav a, html body header.bar:has(.mk-nav) .mk-signin { padding: 7px 9px; }
  html body header.bar:has(.mk-nav) .theme-btn { padding: 6px 10px; }
  html body header.bar:has(.mk-nav) .brand .wm { font-size: 17px; }
}

/* The sign-in page keeps its own header rules; make its header behave exactly like the other public pages. */
html body header.bar:has(.mk-nav) { gap: 14px; padding-left: max(4.4vw, 24px); padding-right: max(4.4vw, 24px); }
html body header.bar:has(.mk-nav) .mk-nav { margin-left: auto; order: 0; }
html body header.bar:has(.mk-nav) .mk-nav + .mk-signin { margin-left: 8px; order: 0; }
html body header.bar:has(.mk-nav) .theme-btn { margin-left: auto; order: 0; }
html body header.bar:has(.mk-nav) .brand { order: 0; }
@media (max-width: 1199px) {
  html body header.bar:has(.mk-nav) { gap: 6px; }
  html body header.bar:has(.mk-nav) .mk-nav + .mk-signin { margin-left: 0; }
}
html body header.bar:has(.mk-nav) .theme-btn { padding: 6px 12px; font-size: 13px; }
@media (max-width: 1199px) { html body header.bar:has(.mk-nav) .theme-btn { padding: 6px 10px; } }
html body header.bar:has(.mk-nav) .mk-nav a, html body header.bar:has(.mk-nav) .mk-signin, html body header.bar:has(.mk-nav) .theme-btn { white-space: nowrap; }
@media (max-width: 1199px) { html body header.bar:has(.mk-nav) { padding-left: 12px; padding-right: 12px; } }

/* ---- home page hero (same block as the sign-in page) ---- */
.mk-hero { display: grid; grid-template-columns: 1fr; gap: 12px 24px; align-items: center; text-align: left; margin-bottom: 8px; }
.mk-hero-eyebrow { margin: 0 0 12px; color: var(--brand); font-size: 22px; font-weight: 650; letter-spacing: -.4px; }
.mk-hero .mk-lead { font-size: 17px; }
.mk-cams { list-style: none; padding: 0; margin: 20px 0 6px; display: grid; gap: 10px; }
.mk-cams li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--text); margin: 0; }
.mk-cam-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.mk-cam-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-hero-img { margin: 0; }
.mk-hero-img img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .mk-hero-img { background: #fff; border-radius: 22px; overflow: hidden; }
@media (min-width: 900px) { .mk-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .mk-hero h1 { font-size: 46px; letter-spacing: -1.5px; } }
.mk-hero .mk-cta { margin-top: 24px; }
@media (min-width: 900px) { .mk-hero-img { transform: translateY(10%); } }
.mk-foot nav + p.powered { margin-top: 22px; }

/* Same gap above the Verge logo on every page footer */
footer.powered { padding-top: 22px; }

/* Blog index */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 24px 0 28px; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); color: var(--text); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.blog-card:hover, .blog-card:focus-visible { box-shadow: 0 6px 22px rgba(16, 63, 211, .15); transform: translateY(-2px); }
.blog-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.blog-body h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.blog-text { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.blog-more { margin-top: auto; padding-top: 6px; color: var(--brand); font-weight: 600; font-size: 14px; }

/* ---- hamburger menu and sign-in prompt (phones and tablets) ---- */
.menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; flex: none; }
.menu-btn:hover { background: var(--brand-soft); color: var(--brand); }
.mk-menu { position: absolute; top: 100%; right: 12px; z-index: 40; min-width: 220px; padding: 8px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.mk-menu[hidden] { display: none; }
.mk-menu a { padding: 12px 14px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.mk-menu a:hover, .mk-menu a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
html body header.bar:has(.mk-nav) { position: relative; }
@media (min-width: 1200px) { .mk-menu { display: none !important; } }
@media (max-width: 1199px) {
  html body header.bar:has(.mk-nav) .mk-nav { display: none; }
  html body header.bar:has(.mk-nav) .mk-signin { margin-left: auto; }
  html body header.bar:has(.mk-nav) .theme-btn { margin-left: 0; }
  html body header.bar:has(.mk-nav) .menu-btn { display: inline-flex; }
}
/* The right-hand group (Sign in, Dark mode, menu) always sits against the right edge. Pages with no Sign in button (sign-in page, Privacy, Terms, signed in,
   and inside the apps) pushed it with nothing, so the hamburger floated beside the logo (1 Nov 2026). */
@media (max-width: 1199px) {
  html body header.bar:has(.mk-nav) .theme-btn { margin-left: auto; }
  html body header.bar:has(.mk-nav) .mk-signin ~ .theme-btn { margin-left: 0; }
}
.mk-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(7, 25, 87, .55); }
.mk-modal-box { width: 100%; max-width: 380px; padding: 22px 20px; border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 16px 48px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 10px; }
.mk-modal-box h2 { margin: 0; font-size: 20px; color: var(--wordmark); }
.mk-modal-box p { margin: 0; }
.mk-modal-box .mk-btn { width: 100%; text-align: center; }
.mk-modal-x { margin-top: 2px; border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 8px; cursor: pointer; }
:root[data-theme="dark"] .mk-modal-box h2 { color: var(--text); }

/* Text invite box in the session pop-up */
.sp-text { position: relative; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sp-text label { display: block; font-size: 13px; color: var(--muted); }
.sp-text .fine { margin-top: 6px; font-size: 12.5px; }

/* Phones and tablets: Sign in, Dark mode and the hamburger sit together at the right-hand edge */
@media (max-width: 1199px) {
  html body header.bar:has(.mk-nav) .mk-nav + .mk-signin { margin-left: auto; }
}

/* Tablet held upright: the sign-in box sits at the top beside the headline, not at the bottom of the page */
@media (min-width: 760px) and (min-height: 600px) and (max-width: 1180px) and (orientation: portrait) {
  body.login .lg-left { align-self: start; }
}

/* Send invite: entries become small boxes; the field grows to show them all */
.sp-text .chipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 8px; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: text; }
.sp-text .chipbox:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.sp-text .chipbox input { flex: 1 1 120px; min-width: 120px; border: 0; outline: 0; padding: 4px 2px; background: transparent; color: var(--text); font-size: 15px; }
.sp-text .chipbox input:focus { outline: 0; }
.sp-text .sp-row, .sp-clist .sp-row { display: flex; gap: 8px; margin-top: 8px; }
.sp-text .sp-row button { flex: 1 1 0; min-height: 44px; padding: 10px 14px; font-size: 15px; white-space: nowrap; }
#invitePanel .sp-text { margin-top: 0; padding-top: 0; border-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--text); font-size: 13px; line-height: 1.3; }
.chip > span { overflow-wrap: anywhere; }
.chip.em::before { content: "\2709"; font-size: 12px; opacity: .7; }
.chip.tx::before { content: "\2706"; font-size: 12px; opacity: .7; }
.chip.bad, .chip.fail { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.chip .chip-x { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.chip .chip-x:hover { background: rgba(0,0,0,.12); }
.sp-text .fine .bad { color: var(--danger); }
.sp-clist { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sp-clist > input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 14px; }
.sp-clist ul { list-style: none; margin: 8px 0; padding: 0; max-height: 200px; overflow-y: auto; }
.sp-clist li { padding: 6px 2px; border-bottom: 1px solid var(--line); }
.sp-clist li:last-child { border-bottom: 0; }
.sp-clist .c-name { font-size: 13.5px; font-weight: 600; }
.sp-clist .c-opt { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.sp-clist .c-opt input { width: 18px; height: 18px; flex: none; }
.sp-clist .c-none { color: var(--muted); font-size: 13px; }
/* The whoosh when invitations go */
.whoosh-layer { position: absolute; left: 0; right: 0; bottom: 4px; height: 56px; overflow: hidden; pointer-events: none; }
.whoosh-layer .env { position: absolute; left: 8px; bottom: 6px; font-size: 30px; line-height: 1; color: var(--brand); opacity: 0; animation: uvWhoosh .9s cubic-bezier(.3,.1,.2,1) forwards; }
.whoosh-layer .env::before { content: ""; position: absolute; right: 100%; top: 50%; width: 70px; height: 3px; margin-right: 4px; border-radius: 2px; background: linear-gradient(to left, var(--brand), transparent); }
.whoosh-layer .e2 { animation-delay: .1s; bottom: 14px; } .whoosh-layer .e3 { animation-delay: .2s; bottom: 2px; } .whoosh-layer .e4 { animation-delay: .3s; bottom: 18px; } .whoosh-layer .e5 { animation-delay: .4s; bottom: 8px; }
@keyframes uvWhoosh { 0% { transform: translateX(0) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(340px) scale(1.15) rotate(-8deg); opacity: 0; } }

/* Timer window: a small x in the top right corner instead of a Close button */
.sessionpop .sp-x, #invitePanel .sp-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
#invitePanel .sp-x:hover, .sessionpop .sp-x:hover { background: var(--panel-2); color: var(--text); border: 0; }
.sessionpop #spText, .sessionpop .sp-id { padding-right: 36px; }
#invitePanel .sp-text > label { padding-right: 36px; }

/* ---- Zoom to fit (Gallery and Focus; the switch is in the More menu). call.js works out each picture's rectangle and sets --zx/--zy/--zw/--zh;
   everything here is !important because the many per-count and per-screen layout rules above must all give way. The grid's own padding
   keeps clear of the timer bar and the toolbar, as the normal layouts do. A tap on a picture adds .uncrop to show all of it. ---- */
.grid.zf[data-count] {
  --gap: 8px; position: relative !important; display: block !important; overflow: hidden !important;
  padding: 74px 8px 108px !important;
}
@media (max-width: 699px) and (orientation: portrait) { .grid.zf[data-count] { padding: 64px 8px 92px !important; } }
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .grid.zf[data-count] { padding: 46px calc(var(--tbr) + 64px) 8px var(--tbl) !important; }
}
.grid.zf > .tile {
  position: absolute !important; left: var(--zx, 0px) !important; top: var(--zy, 0px) !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; max-width: none !important; min-width: 0 !important;
}
.grid.zf > .tile:not(.chip) { width: var(--zw, 100%) !important; height: var(--zh, 100%) !important; aspect-ratio: auto !important; }
.grid.zf > .tile:not(.uncrop) video { object-fit: cover !important; }
.grid.zf > .tile.uncrop video { object-fit: contain !important; }