/* =============================================================================
   MVV video call: the call page's one stylesheet (apps/meet; MEET-SPEC.md 4.3), in the MVV Portal's look: the palette and mark of the
   agents' site (apps/agents/assets/app.css, copied: a pale green canvas, white cards, MVV's dark green and its lime), light and dark
   (the device's choice). The room is dark whatever the device says: pictures read best on it.
   Nothing is fetched (the page's CSP: style-src 'self', font-src 'self', img-src 'self', media-src 'self'; no inline style, no image).
   A phone first: 16px gutters at the least; the shared screen large, the cameras in a strip; the controls at the foot.
   A computer (wider than 600px; the owner's layout of 15 Oct 2026): the room fills the whole window edge to edge, a shared screen is
   the main picture with the faces small in its bottom right corner, and before anyone shares the faces fill it (the last block).
   ☢️ The watermark canvas (.wm) lies over every picture with pointer events off: it can never be clicked away or selected.
   ============================================================================= */
:root {
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* MVV's brand: dark forest green, lime accent */
  --green-900: #1c2820; --green-800: #26352a; --green-700: #324736; --green-600: #44604a;
  --lime: #c8e66b; --lime-dark: #a9c84f; --lime-soft: #d6ef8a;
  /* shape */
  --r-sm: 12px; --r: 16px; --r-lg: 22px;
  --head-h: 64px;
  --gutter: 16px;
  /* the light palette */
  --bg: #f6f8f4;
  --surface: #ffffff;
  --surface-2: #eef2ea;
  --ink: #1a1f1c;
  --ink-soft: #454d46;
  --muted: #5f675f;
  --line: #e7ebe6;
  --line-soft: #f0f3ef;
  --line-strong: #d3dad1;
  --accent: #44604a;
  --primary: #26352a;
  --primary-hover: #324736;
  --primary-text: #ffffff;
  --pill-bg: #26352a;
  --pill-text: #ffffff;
  --input-bg: #ffffff;
  --focus: #a9c84f;
  --hero: #26352a;
  --hero-text: #ffffff;
  --hero-soft: #c9d4c8;
  --hero-accent: #c8e66b;
  --info: #3b5541; --info-bg: #eef3ee;
  --warn: #6e5512; --warn-bg: #fdf6e3;
  --ok: #2f5a39; --ok-bg: #e9f3ea;
  --bad: #8c2f2f; --bad-bg: #fbeeee;
  --shadow-sm: 0 1px 2px rgba(28, 40, 32, .05), 0 1px 3px rgba(28, 40, 32, .04);
  --shadow: 0 6px 24px rgba(28, 40, 32, .08);
  --shadow-bar: 0 -6px 18px rgba(28, 40, 32, .07);
  color-scheme: light;
}
/* the dark palette: the device's choice (unless the agent chose Light), or the agent's choice of Dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101511; --surface: #172019; --surface-2: #1e2920; --ink: #e6ebe5; --ink-soft: #c4ccc3; --muted: #a3aca2;
    --line: #29342b; --line-soft: #212b23; --line-strong: #37443a; --accent: #c8e66b;
    --primary: #c8e66b; --primary-hover: #d6ef8a; --primary-text: #12180a; --pill-bg: #c8e66b; --pill-text: #12180a;
    --input-bg: #121a14; --focus: #c8e66b; --hero: #26352a; --hero-text: #ffffff; --hero-soft: #c9d4c8; --hero-accent: #c8e66b;
    --info: #c9d4c8; --info-bg: #1f2b22; --warn: #f0dca0; --warn-bg: #33290f; --ok: #b9dfbe; --ok-bg: #1b2c1f; --bad: #f2b8b8; --bad-bg: #3a1c1c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 8px 28px rgba(0, 0, 0, .35); --shadow-bar: 0 -6px 18px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101511; --surface: #172019; --surface-2: #1e2920; --ink: #e6ebe5; --ink-soft: #c4ccc3; --muted: #a3aca2;
  --line: #29342b; --line-soft: #212b23; --line-strong: #37443a; --accent: #c8e66b;
  --primary: #c8e66b; --primary-hover: #d6ef8a; --primary-text: #12180a; --pill-bg: #c8e66b; --pill-text: #12180a;
  --input-bg: #121a14; --focus: #c8e66b; --hero: #26352a; --hero-text: #ffffff; --hero-soft: #c9d4c8; --hero-accent: #c8e66b;
  --info: #c9d4c8; --info-bg: #1f2b22; --warn: #f0dca0; --warn-bg: #33290f; --ok: #b9dfbe; --ok-bg: #1b2c1f; --bad: #f2b8b8; --bad-bg: #3a1c1c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 8px 28px rgba(0, 0, 0, .35); --shadow-bar: 0 -6px 18px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: .9375rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-wrap: break-word;
}
a { color: var(--accent); text-underline-offset: 3px; }
[hidden] { display: none !important; }
p { margin: 0 0 12px; }
h1 { margin: 0; font-size: 1.6rem; font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
h2, h3 { margin: 0; }
.section-title { font-size: 1.05rem; font-weight: 500; letter-spacing: -.005em; margin: 18px 0 8px; }
.icon { width: 20px; height: 20px; flex: none; display: block; }
.mark { display: block; flex: none; width: 32px; height: 32px; border-radius: 9px; }
.mark-lg { width: 46px; height: 46px; border-radius: 12px; }
.col { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.end { justify-content: flex-end; }
.wrap-row { flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 48px; }
.wrap.narrow { max-width: 600px; }

/* the line the preview build adds above everything (apps/meet/build.mjs --preview) */
.note.preview { margin: 0; border-radius: 0; text-align: center; font-weight: 600; padding: 10px var(--gutter); }

/* ── before the room: the mark and the name, centred above one roomy card ── */
.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 40px max(var(--gutter), env(safe-area-inset-right)) 40px max(var(--gutter), env(safe-area-inset-left));
}
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand-name { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.auth-page > .card { width: 100%; max-width: 520px; }
.auth-page > .card.terms-card { max-width: 760px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); min-width: 0; }
.card-pad { padding: 22px 20px; }
.card .note { margin: 0; }
.call-with { font-weight: 500; margin: 0; }
.call-facts p { margin: 0; }

/* ── buttons, notes, forms (the agents' site's) ── */
.btn {
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; min-height: 42px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-align: center;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { border-color: var(--ink-soft); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { color: var(--bad); border-color: currentColor; background: transparent; }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.note { font-size: .9rem; line-height: 1.5; padding: 12px 16px; border-radius: var(--r-sm); background: var(--info-bg); color: var(--info); margin: 0 0 14px; }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.out:empty { display: none; }
.out .note { margin: 0; }
.out { display: flex; flex-direction: column; gap: 8px; }
label.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
.hint { font-size: .8rem; color: var(--muted); margin: 0; }
.input {
  font: inherit; font-size: 1rem; line-height: 1.4; min-height: 46px; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--ink); width: 100%; min-width: 0;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169, 200, 79, .35); }
.input[type="checkbox"], .input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; box-shadow: none; flex: none; accent-color: var(--green-600); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px 16px; }
fieldset.choice { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
fieldset.choice legend { padding: 0 6px; }
fieldset.choice p { margin: 0; font-size: .92rem; }
.radio { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; color: var(--ink); font-weight: 500; }
.radio input, .tick input { margin-top: 2px; }
.tick { display: flex; align-items: flex-start; gap: 12px; font-size: .94rem; }
.privacy-link { font-size: .9rem; }

/* ── the Guest Meeting Terms: read to their end ── */
.terms-text {
  max-height: 46vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  padding: 16px 18px; margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font); font-size: .9rem; line-height: 1.65;
}
.terms-text:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.rec-box { border-left: 3px solid var(--lime-dark); }

/* ── the check: the camera's picture, only once asked for ── */
.check-view { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--green-900); aspect-ratio: 16 / 9; }
.check-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mirror { transform: scaleX(-1); }

/* ── the room: dark, the shared screen large, the cameras in a strip, the controls at the foot (a phone; a computer: the last block) ── */
.room {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  background: #0d120e; color: #e6ebe5;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.room-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--head-h); border-bottom: 1px solid #29342b; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-name { font-weight: 600; font-size: 1.04rem; }
.top-right { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.rec-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; border-radius: 999px; padding: 5px 12px; background: #1e2920; color: #c9d4c8; }
.rec-chip.rec-on { background: #3a1c1c; color: #f2b8b8; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; animation: rec-blink 1.6s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.people-count { color: #a3aca2; }
.note.waiting-host { margin: 0; background: #1f2b22; color: #c9d4c8; }
/* the view holds the shared screen and the faces; on a phone it is no box of its own (the computer's block makes it the picture) */
.view { display: contents; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.screen-box { position: relative; width: 100%; border-radius: var(--r); overflow: hidden; background: #000000; aspect-ratio: 16 / 9; max-height: 70vh; margin: 0 auto; }
.screen-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.stage[hidden] + .strip { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.tile { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--green-800); aspect-ratio: 16 / 9; }
.tile-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.cam-off .tile-video { visibility: hidden; }
.tile-name {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(13, 18, 14, .72); color: #ffffff;
}
.tile-muted { position: absolute; right: 8px; bottom: 8px; padding: 4px; border-radius: 999px; background: rgba(13, 18, 14, .72); color: #f2b8b8; }
.tile-muted .icon { width: 16px; height: 16px; }
/* ☢️ the watermark: over the picture, never clickable, never selectable */
.wm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: 2; }
.tile-name, .tile-muted { z-index: 3; }
.room-note .note { margin: 0; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 4px; }
.ctl { background: #1e2920; border-color: #37443a; color: #e6ebe5; }
.ctl:hover { border-color: #c8e66b; }
.ctl.off { background: #3a1c1c; border-color: #5a2a2a; color: #f2b8b8; }
.ctl.btn-danger { background: transparent; color: #f2b8b8; border-color: #f2b8b8; }
.ctl.btn-danger:hover { background: #8c2f2f; color: #ffffff; border-color: #8c2f2f; }
.watermark-hint { text-align: center; color: #a3aca2; }
dialog.dlg {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
dialog.dlg::backdrop { background: rgba(16, 21, 17, .55); }
dialog.dlg p { margin: 0; }

/* ── a phone: the controls show their icons, keeping their words as their names; its layout as it was (no Full screen) ── */
@media (max-width: 600px) {
  .card-pad { padding: 18px 16px; }
  h1 { font-size: 1.4rem; }
  .ctl .btn-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ctl { min-width: 48px; min-height: 48px; padding: 10px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctl-full { display: none; }
}

/* ── a computer: THE ROOM FILLS THE WINDOW, edge to edge (the owner's layout of 15 Oct 2026 ~13:55 and ~14:05) ──
   The top bar and the controls keep to the window's edges; between them the view, black, takes every pixel left. A shared screen fills
   the view as the main picture (contain, never cropped) and the faces sit over it as small tiles stacked in the bottom right corner,
   your own the smallest; before anyone shares the faces fill the view (one, two side by side, then a grid; your own small in the
   corner while anyone else is here, the whole view while nobody is). The script sets .sharing, .alone and the strip's data-n. */
@media (min-width: 601px) {
  .room { height: 100vh; height: 100dvh; min-height: 0; gap: 0; padding: 0; overflow: hidden; }
  .room:fullscreen { height: 100%; }
  .room::backdrop { background: #0d120e; }
  .room-top { min-height: 52px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .room > .note.waiting-host { border-radius: 0; text-align: center; }
  .view { display: block; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000000; }
  .stage { position: absolute; inset: 0; z-index: 1; }
  .screen-box { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
  /* nobody shares: the faces fill the view */
  .strip, .stage[hidden] + .strip {
    position: absolute; inset: 0; z-index: 2; padding: 8px; gap: 8px;
    grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
  }
  .strip[data-n="2"], .strip[data-n="3"], .strip[data-n="4"], .stage[hidden] + .strip[data-n="2"], .stage[hidden] + .strip[data-n="3"],
  .stage[hidden] + .strip[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip[data-n="5"], .strip[data-n="6"], .strip[data-n="7"], .stage[hidden] + .strip[data-n="5"], .stage[hidden] + .strip[data-n="6"],
  .stage[hidden] + .strip[data-n="7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip .tile { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; }
  /* your own picture, small in the bottom right corner while anyone else is here */
  .room:not(.alone) .strip .tile.own {
    position: absolute; right: 16px; bottom: 16px; z-index: 4; width: clamp(120px, 12vw, 200px); height: auto; aspect-ratio: 16 / 9;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 22px rgba(0, 0, 0, .5);
  }
  /* a screen shared: it is the picture; every face a small tile stacked in the bottom right corner on top of it, your own the last */
  .room.sharing .strip, .room.sharing .stage + .strip {
    inset: auto 16px 16px auto; z-index: 3; padding: 0; max-height: calc(100% - 32px);
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end;
  }
  .room.sharing .strip .tile {
    flex: none; width: clamp(160px, 14vw, 260px); height: auto; aspect-ratio: 16 / 9;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 22px rgba(0, 0, 0, .5);
  }
  /* more faces, smaller tiles, so the stack keeps inside the screen (up to 6 others and your own) */
  .room.sharing .strip[data-n="3"] .tile { width: clamp(140px, 11vw, 200px); }
  .room.sharing .strip[data-n="4"] .tile, .room.sharing .strip[data-n="5"] .tile, .room.sharing .strip[data-n="6"] .tile,
  .room.sharing .strip[data-n="7"] .tile { width: clamp(120px, 8.5vw, 160px); }
  .room.sharing .strip .tile.own, .room.sharing:not(.alone) .strip .tile.own { position: relative; right: auto; bottom: auto; order: 1; width: clamp(110px, 8vw, 150px); }
  .room-note:not(:empty) { padding: 8px 16px 0; }
  .controls { padding: 10px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); }
  .watermark-hint { margin: 0; padding: 0 16px max(8px, env(safe-area-inset-bottom)); font-size: .75rem; }
  /* a preview build's line above the room (apps/meet/build.mjs --preview): the room takes what is left of the window */
  body:has(> .note.preview):has(.room) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(> .note.preview):has(.room) > #app { flex: 1 1 auto; min-height: 0; }
  body:has(> .note.preview) .room:not(:fullscreen) { height: 100%; }
}