/* White Label Meet. The kit (wl.css) draws every control; this file only lays out Meet's own parts (mt-).
   No raw colours: the call screen switches the page to the dark theme, so the stage is simply --c-bg. */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(/vendor/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(/vendor/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url(/vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2'); }

html, body { height: 100%; margin: 0; }
body { background: var(--c-bg); }
[hidden] { display: none !important; }
.mt-lede, .mt-note, .mt-txt, .mt-assure, .mt-ended p { font-family: var(--font-sans); }
.mt-mono { font-family: var(--font-mono); }
.mt-eyebrow { font-size: var(--text-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.mt-sub { margin: var(--space-2) 0 0; }
.mt-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.mt-row.is-end { justify-content: flex-end; }
.mt-nowrap { flex-wrap: nowrap; }
.mt-wide { width: 100%; }
.mt-note { margin: 0; font-size: var(--text-sm); color: var(--c-muted); display: flex; gap: var(--space-3); align-items: flex-start; }
.mt-note .wl-icon { margin-top: 3px; }

/* ---------- Home ---------- */
.mt-home { min-height: 100%; display: grid; place-items: center; padding: var(--space-6) var(--space-5); }
.mt-home-inner { width: min(520px, 100%); display: grid; gap: var(--space-6); }
.mt-lockup { --s: 28px; --i-ink: var(--c-ink); --i-paper: var(--c-bg); }
.mt-appmark { display: block; width: var(--s); height: var(--s); }
.mt-appmark svg { display: block; width: 100%; height: 100%; }
.mt-home h1 { font-size: var(--text-3xl); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.mt-lede { margin: 0; color: var(--c-ink-soft); font-size: var(--text-lg); }
.mt-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mt-join { display: flex; gap: var(--space-3); flex: 1 1 260px; }
.mt-join .wl-input { height: var(--size-control-lg); }
/* The sign-in door (open web only): calm, in place, never a pop-up. Long emails wrap rather than spill or cut off. */
.mt-acct { border: 1px solid var(--c-line-soft); border-radius: var(--radius-lg); background: var(--c-panel); padding: var(--space-4) var(--space-5); font-family: var(--font-sans); transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.mt-acct.is-attn { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 22%, transparent); }
.mt-acct-door, .mt-acct-form { display: grid; gap: var(--space-3); min-width: 0; }
.mt-acct-head, .mt-acct-who { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.mt-acct-head > .wl-icon, .mt-acct-who > .wl-icon { flex: none; margin-top: 3px; color: var(--c-ink-soft); }
.mt-acct-who { align-items: center; }
.mt-acct-who > .wl-icon { margin-top: 0; }
.mt-acct-text { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 auto; color: var(--c-ink-soft); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.mt-acct-text b { color: var(--c-ink); font-weight: var(--weight-medium); }
.mt-acct-door .mt-acct-text b { font-size: var(--text-md); }
.mt-acct-who .mt-acct-text { display: block; }
.mt-acct-who .wl-btn { flex: none; }
.mt-acct-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.mt-acct-title { font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--c-ink); }
.mt-acct-row { display: flex; gap: var(--space-3); min-width: 0; }
.mt-acct-row .wl-input { flex: 1 1 auto; min-width: 0; }
.mt-acct-row .wl-btn { flex: none; }
.mt-acct-code { font-family: var(--font-mono); letter-spacing: .12em; }
.mt-acct-sent { margin: 0; color: var(--c-ink-soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.mt-acct-err:empty { display: none; }
.mt-acct-links { margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 420px) { .mt-acct-row { flex-wrap: wrap; } .mt-acct-row .wl-btn { flex: 1 1 100%; } }
.mt-assure { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--c-muted); font-size: var(--text-sm); border-top: 1px solid var(--c-line-soft); padding-top: var(--space-5); }

/* ---------- Check your camera ---------- */
.mt-prejoin { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--space-7); align-items: center; padding: var(--space-7); max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
.mt-preview { position: relative; aspect-ratio: 16 / 9; background: var(--c-panel-deep); border-radius: var(--radius-lg); overflow: hidden; }
.mt-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.mt-camoff { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-muted); }
.mt-previewbar { position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; justify-content: center; gap: var(--space-3); }
.mt-side { display: grid; gap: var(--space-5); align-content: start; }
.mt-side h2 { font-size: var(--text-xl); margin: 0; }
.mt-side .wl-input { height: var(--size-control-lg); }
.mt-invite { border: 1px solid var(--c-line-soft); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-4); background: var(--c-panel); }
.mt-link { display: flex; gap: var(--space-3); }
.mt-link .wl-input { font-size: var(--text-sm); }
.mt-ways { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- The lobby: waiting to be let in ---------- */
.mt-eyebrow .wl-badge { margin-left: var(--space-2); text-transform: none; letter-spacing: 0; }
.mt-waiting { display: flex; gap: var(--space-4); align-items: flex-start; }
.mt-waiting .wl-spinner { flex: none; margin-top: 2px; }
.mt-waiting b { display: block; font-size: var(--text-lg); }
.mt-waiting p { margin: var(--space-1) 0 0; color: var(--c-ink-soft); font-family: var(--font-sans); }

/* ---------- The call ---------- */
.mt-call { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--c-bg); color: var(--c-ink); }
.mt-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); min-height: var(--size-topbar); box-sizing: border-box; }
.mt-top-l, .mt-top-r { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.mt-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--c-line-mid); color: var(--c-ink-soft); font-size: var(--text-xs); white-space: nowrap; }
.mt-pill.is-bad { border-color: var(--c-danger); color: var(--c-danger-text); background: var(--c-danger); }
.mt-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.mt-stage { position: relative; min-height: 0; min-width: 0; padding: var(--space-3) var(--space-5); display: grid; }
/* Alone, the one tile can grow to fill nearly the whole stage, right up against its edges — same as the alone card
   (top) and the bottom hint line (over the controls). Reserve room so the tile (and its own corner badges and name
   label) never sits under either, however their text wraps at phone widths (checked at 320 and 390 px,
   tests/signals.mjs). The reserved padding shrinks the grid, which re-fits the tile through the usual resize path. */
.mt-stage:has(.mt-alone:not([hidden])) { padding-top: 130px; }
.mt-stage:has(.mt-nudge:not([hidden])) { padding-bottom: 110px; }
.mt-grid { display: grid; gap: var(--space-3); min-height: 0; min-width: 0; align-content: center; justify-content: center; height: 100%; }
.mt-grid.is-presenting { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: minmax(0, 1fr); justify-content: stretch; align-content: stretch; }
.mt-strip { display: grid; gap: var(--space-3); align-content: start; overflow: auto; min-height: 0; }
.mt-strip .mt-tile { aspect-ratio: 16 / 9; }

.mt-tile { position: relative; background: var(--c-panel); border-radius: var(--radius-lg); overflow: hidden; min-height: 0; min-width: 0; display: grid; place-items: center;
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--motion-fast) var(--motion-ease); }
.mt-tile.is-speaking { outline: 3px solid var(--c-success); outline-offset: -3px; }
.mt-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-tile.is-local video { transform: scaleX(-1); }
.mt-tile.is-screen video { object-fit: contain; background: var(--c-bg); }
.mt-tile.is-video .mt-face { display: none; }
.mt-face { width: clamp(48px, 22%, 112px); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--c-line-strong); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--c-ink-soft); text-transform: uppercase; }
/* Labels sit on moving video, so they carry their own backing in the page colour */
.mt-name, .mt-hand { position: absolute; display: flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); max-width: calc(100% - 16px); }
.mt-name { left: var(--space-3); bottom: var(--space-3); background: color-mix(in srgb, var(--c-bg) 75%, transparent); color: var(--c-ink); }
.mt-name b { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-hand { left: var(--space-3); top: var(--space-3); background: var(--c-ink); color: var(--c-bg); }
.mt-unverified, .mt-mutedpill { position: absolute; top: var(--space-3); right: var(--space-3); }
.mt-mutedpill { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
/* Your own level, on your tile's name label: it moves when you talk */
.mt-meter { width: 18px; height: 10px; display: inline-flex; align-items: flex-end; flex: none; }
.mt-meter i { display: block; width: 100%; height: 100%; background: var(--c-success); border-radius: 2px; transform: scaleY(max(0.12, var(--lvl, 0))); transform-origin: bottom; transition: transform 80ms linear; }

.mt-panel { width: 340px; max-width: 100vw; background: var(--c-panel); border: 1px solid var(--c-line-soft); border-radius: var(--radius-lg); margin: var(--space-3) var(--space-5) var(--space-3) 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.mt-panel header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); font-weight: var(--weight-bold); }
.mt-scroll { overflow: auto; padding: 0 var(--space-5) var(--space-4); min-height: 0; }
.mt-msgs { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.mt-who { font-size: var(--text-xs); color: var(--c-muted); display: flex; gap: var(--space-3); }
.mt-who b { color: var(--c-ink); font-weight: var(--weight-medium); }
.mt-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-compose { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--c-line-soft); }
.mt-invite-row { padding-bottom: var(--space-4); }
.mt-people { display: grid; }
.mt-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.mt-av { width: 28px; height: 28px; border: 1.5px solid var(--c-line-strong); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; flex: none; }
.mt-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-pst { display: flex; gap: var(--space-2); color: var(--c-muted); }
.mt-acts { display: flex; gap: var(--space-1); flex: none; }
.mt-waitlist { border: 1px solid var(--c-line-mid); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.mt-waitlist .mt-person:last-child { border-bottom: 0; }
.mt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-control-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.mt-unknown summary { cursor: pointer; min-height: var(--size-control-sm); display: flex; align-items: center; font-size: var(--text-sm); }
.mt-pn .wl-badge { margin-left: var(--space-2); vertical-align: middle; }
.mt-more { display: grid; gap: var(--space-2); }
.mt-more .wl-btn { justify-content: flex-start; }

.mt-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); }
.mt-bar-mid, .mt-bar-end { display: flex; gap: var(--space-3); align-items: center; }
.mt-bar-end { justify-content: flex-end; }
.mt-code { font-size: var(--text-sm); color: var(--c-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-bg); font-size: var(--text-2xs); display: grid; place-items: center; box-sizing: border-box; }
.wl-btn.call { position: relative; }
/* The mic button's live level: a bar along its foot that moves when you talk (hidden while muted) */
.mt-previewbar [data-t="mic"]::after, .mt-bar [data-t="mic"]::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 3px; border-radius: 2px; background: var(--c-success);
  transform: scaleX(var(--lvl, 0)); transform-origin: left; transition: transform 80ms linear; pointer-events: none; }
.mt-previewbar [data-t="mic"].is-off::after, .mt-bar [data-t="mic"].is-off::after { display: none; }
.wl-btn.call.leave { width: auto; min-width: calc(var(--h) * 1.5); padding: 0 var(--space-4); gap: var(--space-2); }
.mt-leave-txt { font-size: var(--text-sm); font-weight: var(--weight-medium); }
/* One calm line above the controls: you're muted, your mic is silent or blocked, someone asks you to unmute */
.mt-nudge { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); z-index: var(--z-sticky); width: max-content; max-width: min(640px, calc(100% - var(--space-5) * 2)); box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--c-panel); color: var(--c-ink); border: 1px solid var(--c-line-mid); box-shadow: var(--shadow-overlay); font-family: var(--font-sans); font-size: var(--text-md); }
.mt-nudge > .wl-icon { flex: none; }
.mt-nudge[data-kind="problem"] > .wl-icon, .mt-nudge[data-kind="silent"] > .wl-icon { color: var(--c-warning); }
.mt-nudge-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.mt-nudge-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* On your own in the call: what to do next */
.mt-alone { position: absolute; left: 50%; top: var(--space-4); transform: translateX(-50%); z-index: var(--z-sticky); width: max-content; max-width: calc(100% - var(--space-5) * 2); box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-panel) 92%, transparent); border: 1px solid var(--c-line-soft); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--c-ink-soft); }
.mt-stage:has(.mt-sound:not([hidden])) .mt-alone { top: calc(var(--space-4) + var(--size-control-md) + var(--space-3)); }
.mt-alone b { color: var(--c-ink); font-weight: var(--weight-medium); }
.mt-alone span { overflow-wrap: anywhere; }
/* Your chat message's state */
.mt-sent { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.mt-sent .wl-icon { width: 12px; height: 12px; }
.mt-sent.is-ok { color: var(--c-success); }
.mt-sent.is-bad { color: var(--c-danger); white-space: normal; }
.mt-retry { all: unset; cursor: pointer; text-decoration: underline; color: var(--c-ink); font: inherit; }
.mt-retry:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.mt-sounds { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-3); min-width: 0; }
.mt-sounds legend { padding: 0; margin-bottom: var(--space-2); }
.mt-sound-kinds { display: grid; gap: var(--space-3); padding-left: var(--space-5); }
.wl-modal .wl-check { align-items: flex-start; }
.wl-modal .wl-check small { display: block; color: var(--c-muted); margin-top: 2px; }
.mt-show-sm { display: none !important; }
.mt-sound { position: absolute; left: 50%; top: var(--space-4); transform: translateX(-50%); z-index: var(--z-sticky); }
/* The start screen's mic check */
.mt-miccheck { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--c-ink-soft); min-height: var(--size-control-sm); }
.mt-miccheck > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.mt-miccheck.is-ok, .mt-miccheck.is-ok .wl-icon { color: var(--c-success); }
.mt-miccheck.is-bad .wl-icon { color: var(--c-warning); }
.mt-miccheck.is-bad > span { color: var(--c-ink); }
/* Toasts clear the call controls (state class on body, never a component name: L-021) */
body.is-in-call .wl-toasts { bottom: calc(var(--size-touch-min) + var(--space-7)); }

/* ---------- Sound check ("Sound problem?", in Camera and sound while in a call) ---------- */
.mt-sc-launch { border-bottom: 1px solid var(--c-line-soft); padding-bottom: var(--space-4); margin-bottom: var(--space-2); display: grid; gap: var(--space-2); }
.mt-sc-launch .wl-help { display: block; }
.mt-sc { display: grid; gap: var(--space-4); }
.mt-sc-status { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--c-ink-soft); }
.mt-sc-results { display: grid; gap: var(--space-3); }
.mt-sc-verdict { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); }
.mt-sc-verdict[data-sc-verdict="problem"] { color: var(--c-warning); }
.mt-sc-row { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--c-ink-soft); }
.mt-sc-row.is-bad { color: var(--c-ink); }
.mt-sc-row.is-bad > .wl-icon { color: var(--c-warning); flex: none; margin-top: 2px; }
.mt-sc-person { flex-direction: column; align-items: stretch; gap: var(--space-2); border: 1px solid var(--c-line-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.mt-sc-person > b { color: var(--c-ink); font-weight: var(--weight-medium); overflow-wrap: anywhere; min-width: 0; }
.mt-sc-dirs { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.mt-sc-dirs > span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.mt-sc-row-note { display: block; font-size: var(--text-xs); color: var(--c-warning); }

/* ---------- After the call ---------- */
.mt-ended { min-height: 100%; display: grid; place-items: center; padding: var(--space-6) var(--space-5); box-sizing: border-box; }
.mt-ended-inner { width: min(480px, 100%); display: grid; gap: var(--space-5); }
.mt-ended h1 { font-size: var(--text-2xl); margin: 0; }
.mt-ended p { margin: 0; }
.mt-save { border: 1px solid var(--c-line-soft); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-4); }
.mt-save h2 { margin: 0; font-size: var(--text-lg); }
.mt-save .wl-check { align-items: flex-start; }
.mt-save .wl-check small { display: block; color: var(--c-muted); }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .mt-prejoin { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-5); align-content: start; }
  .mt-panel { position: fixed; inset: auto 0 0 0; width: auto; height: 70dvh; margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: var(--z-overlay); box-shadow: var(--shadow-overlay); }
  .mt-grid.is-presenting { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mt-grid.is-presenting .mt-strip { grid-auto-flow: column; grid-auto-columns: 140px; }
  .mt-bar { justify-content: center; }
  .mt-bar .mt-code, .mt-bar .mt-hide-sm { display: none !important; }
  .mt-leave-txt { display: none; }
  .wl-btn.call.leave { padding: 0; width: calc(var(--h) * 1.5); }
  .mt-bar .mt-show-sm { display: inline-flex !important; }
  .mt-bar-mid { gap: var(--space-2); }
}
@media (max-width: 480px) {
  .mt-stage { padding: var(--space-2); }
  .mt-bar { gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); }
}