/* meet.css · Meet's layout: the Calls page, prejoin, lobby and end screen (the brand tokens and fonts: meet-brand.css). No CDN. */
body.mt-page { min-height: 100dvh; }
.mt-shell [hidden], .mt-call [hidden], .mt-home [hidden] { display: none !important; }
#app.meet-mode > .topbar, #app.meet-mode > .tabbar, #app.meet-mode > .demo-banner { display: none; }
#app.meet-mode > .main { max-width: none; padding: 0; min-height: 100dvh; }
.mt-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.mt-shell :focus-visible, .mt-call :focus-visible { outline: 3px solid var(--mt-fg); outline-offset: 2px; }
.mt-muted { color: var(--muted); }
.mt-center-text { margin: auto; padding: 24px 16px; text-align: center; }
.mt-note:empty { display: none; }
.mt-note { margin: 8px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mt-bad, currentColor); }
.mt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-center { justify-content: center; }
.mt-end-row { justify-content: flex-end; margin-top: 16px; }
.mt-label { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.mt-field { display: grid; gap: 4px; margin: 0 0 12px; }
.mt-field-label { font-size: 0.85rem; color: var(--muted); }
.mt-select { appearance: auto; }

/* Calls (#/meet), inside ONE: the Meet brand panel */
.mt-home { max-width: 1040px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px 48px; border-radius: 16px; min-height: 60vh; }
.mt-home-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mt-home-head h1 { margin: 0; }
.mt-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mt-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); min-width: 0; }
.mt-recent-card { margin-top: 16px; }
.mt-start-btn { width: 100%; min-height: 52px; font-size: 1.05rem; }
.mt-recent { list-style: none; margin: 0; padding: 0; }
.mt-recent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0;
  border-top: 1px solid var(--border); }
.mt-recent-row:first-child { border-top: 0; }
.mt-recent-name { display: grid; min-width: 0; }
.mt-recent-name strong { overflow-wrap: anywhere; }
.mt-recent-name small { color: var(--muted); }
.mt-fine { margin-top: 16px; font-size: 0.85rem; }

/* Prejoin */
.mt-prejoin { flex: 1; display: grid; gap: 24px; align-content: center; justify-content: center; padding: 24px 16px;
  grid-template-columns: minmax(0, 640px) minmax(0, 360px); width: 100%; max-width: 1100px; margin: 0 auto; }
.mt-preview { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--mt-tile); border: 1px solid var(--mt-line); }
.mt-pre-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.mt-pre-video[hidden] { display: none; }
.mt-avatar { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--mt-raise); color: var(--mt-fg); border: 2px solid var(--mt-line);
  font-weight: 700; font-size: 2rem; user-select: none; }
.mt-avatar[hidden] { display: none; }
.mt-pre-avatar { position: absolute; inset: 0; margin: auto; }
.mt-pre-tools { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 12px; }
.mt-round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--mt-line); background: var(--mt-veil); color: var(--mt-fg);
  display: grid; place-items: center; cursor: pointer; }
.mt-round.off { background: var(--mt-fg); color: var(--mt-bg); }
.mt-pre-form { align-self: center; min-width: 0; }
.mt-pre-title { font-size: 1.6rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.mt-join { width: 100%; min-height: 52px; font-size: 1.05rem; margin-top: 8px; }
.mt-level { height: 8px; border-radius: 99px; background: var(--mt-s2); overflow: hidden; margin: -4px 0 14px; }
.mt-level-fill { display: block; height: 100%; width: 100%; background: var(--mt-ok); transform-origin: left; transform: scaleX(var(--lvl, 0));
  transition: transform 80ms linear; }
.mt-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Guest pages: Join a meeting (type the code), problems, This meeting has ended */
.mt-center-page { flex: 1; display: grid; place-items: center; align-content: center; padding: 24px 16px 48px; }
.mt-code-card { width: min(440px, 100%); }
.mt-code-card h1 { margin: 0 0 4px; font-size: 1.6rem; }
.mt-code-input { font-size: 1.15rem; letter-spacing: 0.06em; }

/* Lobby and end */
.mt-lobby, .mt-ended { margin: auto; max-width: 520px; padding: 48px 16px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.mt-call .mt-lobby { position: absolute; inset: 0; z-index: 20; background: var(--mt-bg); align-content: center; max-width: none; }
.mt-pulse { width: 18px; height: 18px; border-radius: 50%; background: var(--mt-ok); animation: mt-pulse 1.6s ease-in-out infinite; }
@keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(75, 197, 206, 0.6); } 50% { box-shadow: 0 0 0 14px rgba(75, 197, 206, 0); } }
.mt-ended .mark { background: var(--mt-fg); }
@media (max-width: 860px) {
  .mt-prejoin { grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: calc(16px + env(safe-area-inset-top)); }
  .mt-pre-title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .mt-pulse { animation: none; } .mt-level-fill { transition: none; } }