/* 8x Meets: the 8x family's lilac world in two lights. "Lilac day" is a mist ground with lavender and
   pale-blue light; "lilac night" is the same silk after dark, deep violet ink with glowing violet and blue.
   Violet carries every action. Red means recording, live, leaving, or your own mic being off; amber means
   a raised hand or a weak connection. Voices get track colours from the rest of the wheel (violet round
   to plum, plus sky).
   Geist for everything, Geist Mono for codes and clocks. Page-specific styles live in each template. */

:root {
  color-scheme: light;
  /* page width: about 84% of the screen, never narrower than before, capped on huge monitors */
  --page-max: min(2000px, max(1240px, 84vw));
  --bg: #f2f0fb;
  --glow-a: rgb(214 205 250 / 0.95);
  --glow-b: rgb(212 228 252 / 0.9);
  --surface: #ffffff;
  --surface-2: #fbfaff;
  --surface-3: #f0eef9;
  --surface-4: #e7e4f4;
  --glass: rgb(255 255 255 / 0.62);
  --glass-strong: rgb(255 255 255 / 0.84);
  --glass-line: rgb(255 255 255 / 0.75);
  --line: rgb(35 37 57 / 0.08);
  --line-2: rgb(35 37 57 / 0.13);
  --line-3: rgb(35 37 57 / 0.22);
  --ink: #222439;
  --ink-2: #474a64;
  --ink-3: #555770;
  --ink-4: #62647e;
  --violet: #6147c7;
  --violet-hover: #5236bb;
  --violet-soft: rgb(97 71 199 / 0.1);
  --violet-line: rgb(97 71 199 / 0.34);
  --violet-text: #5a3fc4;
  --blue: #3a52b8;
  --rec: #e5484d;
  --rec-hover: #d33b40;
  --rec-soft: rgb(229 72 77 / 0.1);
  --rec-text: #ab272c;
  /* solid red behind white words: --rec itself is too light for 4.5:1, so buttons get a deeper fill */
  --rec-fill: #d23a3f;
  --rec-fill-hover: #c0353a;
  --warn: #9a6100;
  --warn-soft: rgb(214 138 0 / 0.12);
  --hand: #f2a51f;
  --hand-ink: #3b2600;
  --screen: #0b0a18;
  --scrim: rgb(62 44 150 / 0.2);
  --toast-bg: #222439;
  --toast-ink: #ffffff;
  --shadow-1: 0 1px 2px rgb(45 38 99 / 0.05), 0 8px 20px -12px rgb(45 38 99 / 0.2);
  --shadow-2: 0 2px 6px rgb(45 38 99 / 0.05), 0 24px 48px -24px rgb(45 38 99 / 0.3);
  --shadow-3: 0 4px 10px rgb(45 38 99 / 0.06), 0 50px 90px -40px rgb(45 38 99 / 0.42);
  --silk: linear-gradient(115deg, #8b74ff 0%, #6fa3ff 42%, #f0a4e6 78%, #8b74ff 100%);
  --silk-poster: url(/static/silk.webp);
  /* each person's voice gets a track colour, in the room and in the recording:
     violet, blue, teal, rose, fuchsia, sky, indigo, plum (never red, amber or green) */
  --t0: #6a4de6; --t1: #2f6ad8; --t2: #0b7f78; --t3: #c93a80; --t4: #9b35b5; --t5: #00739e; --t6: #4043c2; --t7: #7d4f93;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-md: 14px; --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d1: 160ms; --d2: 260ms; --d3: 420ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0a1a;
  --glow-a: rgb(97 71 199 / 0.3);
  --glow-b: rgb(64 96 214 / 0.22);
  --surface: #16142a;
  --surface-2: #1a1731;
  --surface-3: #211e3b;
  --surface-4: #2a2649;
  --glass: rgb(22 20 42 / 0.6);
  --glass-strong: rgb(24 21 45 / 0.82);
  --glass-line: rgb(255 255 255 / 0.08);
  --line: rgb(255 255 255 / 0.07);
  --line-2: rgb(255 255 255 / 0.11);
  --line-3: rgb(255 255 255 / 0.2);
  --ink: #f1efff;
  --ink-2: #cdc9ea;
  --ink-3: #aaa6cd;
  --ink-4: #8f8bb4;
  --violet: #7259ec;
  --violet-hover: #6a50e6;
  --violet-soft: rgb(139 116 255 / 0.16);
  --violet-line: rgb(139 116 255 / 0.5);
  --violet-text: #b3a5ff;
  --blue: #8aa2ff;
  --rec: #f0555a;
  --rec-hover: #ff676c;
  --rec-soft: rgb(240 85 90 / 0.16);
  --rec-text: #ff8a8e;
  --rec-fill: #cf3a40;
  --rec-fill-hover: #bb3238;
  --warn: #f4b544;
  --warn-soft: rgb(244 181 68 / 0.14);
  --screen: #05040d;
  --scrim: rgb(4 3 12 / 0.6);
  --toast-bg: #f1efff;
  --toast-ink: #16142a;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 20px -12px rgb(0 0 0 / 0.6);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.3), 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --shadow-3: 0 4px 10px rgb(0 0 0 / 0.35), 0 50px 90px -40px rgb(0 0 0 / 0.85);
  --silk-poster: url(/static/silk-night.webp);
  --t0: #9b84ff; --t1: #6f9dff; --t2: #3cc6b8; --t3: #ff72b4; --t4: #d884f2; --t5: #38bdf8; --t6: #9295ff; --t7: #c9a3dc;
}

/* ------------------------------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 400 14.5px/1.5 var(--font);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
input, textarea { caret-color: var(--violet); }
/* the native clear button on search fields, quieted to the ink scale */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.55; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 0.9; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgb(124 99 242 / 0.3); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { scrollbar-color: var(--line-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

/* the ground: mist with two soft lights at the top, in both themes */
body.mist {
  background:
    radial-gradient(56% 42% at 84% -10%, var(--glow-a), transparent 70%),
    radial-gradient(44% 34% at 4% -8%, var(--glow-b), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.sm { width: 16px; height: 16px; stroke-width: 1.9; }
svg.ic.xs { width: 13px; height: 13px; stroke-width: 2.1; }

/* ------------------------------------------------------------------------------------------ lockup */
.logo { display: inline-flex; align-items: center; gap: 0.42em; color: var(--ink); font: 500 18px/1 var(--font); letter-spacing: -0.035em; white-space: nowrap; }
.logo .mark {
  display: block; width: 1.66em; height: 1.14em; flex: none; background: currentColor;
  -webkit-mask: var(--mark-url, url(/static/mark.svg)) center / contain no-repeat; mask: var(--mark-url, url(/static/mark.svg)) center / contain no-repeat;
}
.logo .wm { transform: translateY(0.02em); }
/* the topbar's logo is a link home: a 40px tall hit area around the mark, the layout unchanged */
.topbar .logo { padding: 10px 5px; margin: -10px -5px; }

/* ------------------------------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 500 14px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d1), color var(--d1), border-color var(--d1), box-shadow var(--d2), transform var(--d2) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), var(--shadow-1); }
.btn-primary:hover:not(:disabled) { background: var(--violet-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn-ghost:hover:not(:disabled) { border-color: var(--line-3); background: var(--surface-2); }
.btn-soft { background: var(--surface-3); color: var(--ink); }
.btn-soft:hover:not(:disabled) { background: var(--surface-4); }
.btn-glass { background: var(--glass); color: var(--ink); border-color: var(--glass-line); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-1); }
.btn-glass:hover:not(:disabled) { background: var(--glass-strong); }
/* the quietest action: no fill until hovered (e.g. "Back to meetings") */
.btn-text { background: none; color: var(--ink-2); padding-left: 10px; padding-right: 14px; }
.btn-text:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn-danger { background: var(--rec-fill); color: #fff; box-shadow: var(--shadow-1); }
.btn-danger:hover:not(:disabled) { background: var(--rec-fill-hover); }
.btn-danger-soft { background: var(--rec-soft); color: var(--rec-text); }
.btn-danger-soft:hover:not(:disabled) { background: color-mix(in oklab, var(--rec) 20%, transparent); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; gap: 6px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }
.ibtn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  color: var(--ink-2); background: transparent; transition: background-color var(--d1), color var(--d1);
}
.ibtn:hover { background: var(--surface-3); color: var(--ink); }
.ibtn.boxed { background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.ibtn.boxed:hover { background: var(--surface-2); }

/* the theme switch: sun by day, moon by night */
.theme-btn .moon, [data-theme="dark"] .theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .moon { display: block; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ------------------------------------------------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  font: 500 12.5px/1 var(--font); color: var(--ink-2); background: var(--surface-3); border: 1px solid var(--line);
  white-space: nowrap;
}
.chip.live, .chip.rec { color: var(--rec-text); background: var(--rec-soft); border-color: color-mix(in oklab, var(--rec) 26%, transparent); }
/* "Public · everyone on the platform": the one access level that reaches everyone, so it reads in red (chips and the
   pickers' labels); "Public · everyone at 8x" (org) stays inside the company: a calmer violet */
.pubg { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.chip.pub { color: var(--rec-text); background: var(--rec-soft); border-color: color-mix(in oklab, var(--rec) 26%, transparent); }
.chip.org { color: var(--violet-text); background: var(--violet-soft); border-color: color-mix(in oklab, var(--violet) 22%, transparent); }
/* tripled class: beats the pickers' own label rules (.choice > button b, .opt[aria-checked] b) */
b.pub.pub.pub { color: var(--rec-text); }
b.org.org.org { color: var(--violet-text); }
.chip.live i, .chip.rec i, .dot-live { position: relative; isolation: isolate; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); flex: none; }
/* the pulse is a ring that scales and fades on the compositor: an animated box-shadow restyled and repainted every frame */
.chip.live i::after, .chip.rec i::after, .dot-live::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: color-mix(in oklab, var(--rec) 60%, transparent); animation: meets-pulse 1.9s var(--ease) infinite; }
.chip.event { color: var(--blue); background: color-mix(in oklab, var(--blue) 12%, transparent); border-color: color-mix(in oklab, var(--blue) 26%, transparent); }
.chip.violet { color: var(--violet-text); background: var(--violet-soft); border-color: color-mix(in oklab, var(--violet) 22%, transparent); }
.chip.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
a.chip:hover, button.chip:hover { border-color: var(--line-3); color: var(--ink); }
@keyframes meets-pulse {   /* 7px dot x3 = the old 7px spread */
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* ------------------------------------------------------------------------------------------ fields */
.field {
  width: 100%; height: 46px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font: 400 15px/1.2 var(--font);
  transition: border-color var(--d1), box-shadow var(--d2);
}
.field::placeholder { color: var(--ink-4); }
.field:focus { outline: none; border-color: var(--violet-line); box-shadow: 0 0 0 4px var(--violet-soft); }
.field[aria-invalid="true"] { border-color: color-mix(in oklab, var(--rec) 55%, var(--line-2)); }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--rec) 14%, transparent); }
/* an error under a form, tied to its field with aria-describedby */
.form-msg { font-size: 13.5px; line-height: 1.4; color: var(--rec-text); }
.form-msg.ok { color: var(--ink-2); }   /* a neutral note, not an error (e.g. "code sent") */
.form-msg:empty { display: none; }
.label { display: grid; gap: 8px; font: 500 13px/1.2 var(--font); color: var(--ink-2); }

/* switch: <label class="chk">text <input type=checkbox><span class="tgl"></span></label> */
.chk { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; font-size: 14px; color: var(--ink); }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
/* the knob is a flex child centred by layout, so it rounds with the track at fractional zoom,
   and its shadow is even all round: a dropped shadow made it read low (and high when off) */
.tgl { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 42px; height: 26px; padding: 0 3px; border-radius: var(--r-pill); background: var(--surface-4); flex: none; transition: background-color var(--d2); }
.tgl::after { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 0 4px rgb(0 0 0 / 0.22); transition: transform var(--d2) var(--ease); }
.chk input:checked + .tgl { background: var(--violet); }
.chk input:checked + .tgl::after { transform: translateX(16px); }
.chk input:focus-visible + .tgl { outline: 2px solid var(--violet); outline-offset: 2px; }
.chk input:disabled ~ * , .chk:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* segmented control / tabs */
.seg { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-3); }
.seg > button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); font: 500 13px/1 var(--font); color: var(--ink-3); transition: background-color var(--d1), color var(--d1), box-shadow var(--d2); white-space: nowrap; }
.seg > button:hover { color: var(--ink); }
.seg > button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
[data-theme="dark"] .seg > button.active { background: var(--surface-4); }
.cnt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font: 600 11px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-3); background: var(--surface-4); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); font: 600 10.5px/1 var(--font); color: #fff; background: var(--violet); }
.badge.hand { background: var(--hand); color: var(--hand-ink); }

/* ------------------------------------------------------------------------------------------ sheets */
/* --sheet-scrim / --sheet-blur / --dialog-scrim: a page can set them (room.css does: its sheets open over live
   video, which a blur would re-blur every frame); unset, a page keeps the frosted scrim */
.overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--sheet-scrim, var(--scrim)); backdrop-filter: var(--sheet-blur, blur(6px)); -webkit-backdrop-filter: var(--sheet-blur, blur(6px)); }
.overlay.open { display: flex; animation: meets-fade var(--d2) var(--ease); }
.sheet {
  position: relative; width: min(480px, 100%); max-height: calc(100svh - 40px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  animation: meets-rise 380ms var(--ease);
}
.sheet h2, .sheet h3 { margin: 0; font: 400 24px/1.15 var(--font); letter-spacing: -0.035em; }
.sheet .sub { margin: -10px 0 0; color: var(--ink-3); font-size: 14px; }
.sheet .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.sheet > * { flex-shrink: 0; }   /* the sheet scrolls; its rows never squash to fit (a 26px chip read 14px tall) */
/* a sheet taller than the window keeps its actions in reach: the row pins to the bottom edge while the form scrolls */
.sheet > .acts { position: sticky; z-index: 2; bottom: -26px; margin: -8px 0 -26px; padding: 12px 0 26px; background: var(--surface); box-shadow: 0 -14px 14px -10px var(--surface); }
@keyframes meets-fade { from { opacity: 0; } }
@keyframes meets-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes meets-sheet { from { transform: translateY(100%); } }
@media (max-width: 640px) {
  .overlay { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; max-height: 92svh; border-radius: 28px 28px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); animation: meets-sheet 420ms var(--ease); }
  .sheet::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line-3); margin: -8px 0 -6px; }
  .sheet .acts > .btn { flex: 1; }
  /* a long phone sheet keeps its actions in reach: the row pins to the bottom edge while the form scrolls under it */
  .sheet > .acts { position: sticky; z-index: 2; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: -8px 0 calc(-22px - env(safe-area-inset-bottom));
    padding: 12px 0 calc(22px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -14px 14px -10px var(--surface); }
}

/* ------------------------------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 95; width: max-content; max-width: min(92vw, 520px);
  padding: 12px 20px; border-radius: var(--r-pill); background: var(--toast-bg); color: var(--toast-ink);
  font: 500 13.5px/1.35 var(--font); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), var(--shadow-3);
  opacity: 0; transform: translate(-50%, 14px) scale(0.98); pointer-events: none;
  transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------------------------------ bits */
.av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-3); flex: none; }
.menu {
  position: fixed; z-index: 85; display: none; flex-direction: column; gap: 1px; min-width: 220px; padding: 6px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-3);
}
.menu.open { display: flex; animation: meets-rise var(--d2) var(--ease); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; color: var(--ink-2); text-align: left; }
.menu button:hover { background: var(--surface-3); color: var(--ink); }
.menu button svg { color: var(--ink-3); }
.menu button.danger, .menu button.danger svg { color: var(--rec-text); }
/* a setting inside a menu: role=menuitemcheckbox with a small switch on the right */
.menu button .mtgl { position: relative; width: 32px; height: 20px; margin-left: auto; border-radius: var(--r-pill); background: var(--surface-4); flex: none; transition: background-color var(--d2); }
.menu button .mtgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 0 3px rgb(0 0 0 / 0.22); transition: transform var(--d2) var(--ease); }
.menu button[aria-checked="true"] .mtgl { background: var(--violet); }
.menu button[aria-checked="true"] .mtgl::after { transform: translateX(12px); }
.menu .msep { height: 1px; margin: 4px 8px; background: var(--line); }
.empty {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 38px 20px; border-radius: 24px;
  text-align: center; color: var(--ink-3); font-size: 14px; border: 1px dashed var(--line-2); background: color-mix(in oklab, var(--surface) 55%, transparent);
}
.empty b { color: var(--ink); font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }   /* a long search term wraps */
/* read by screen readers, not shown */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklab, currentColor 22%, transparent); border-top-color: currentColor; animation: meets-spin 0.7s linear infinite; flex: none; }
@keyframes meets-spin { to { transform: rotate(360deg); } }

/* shared app header (dashboard + archive) */
.topbar { position: sticky; top: 0; z-index: 30; transition: background-color var(--d2), box-shadow var(--d2); }
.topbar.stuck { background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.topbar .bar { display: flex; align-items: center; gap: 10px; height: 68px; max-width: var(--page-max); margin: 0 auto; padding: 0 28px; }
/* five tabs: on a narrower screen they scroll inside the bar instead of pushing the page wider */
.topbar nav.seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: 18px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar nav.seg::-webkit-scrollbar { display: none; }
.topbar nav.seg a { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: var(--r-pill); font: 500 13.5px/1 var(--font); color: var(--ink-3); transition: background-color var(--d1), color var(--d1); }
.topbar nav.seg a:hover { color: var(--ink); }
.topbar nav.seg a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
[data-theme="dark"] .topbar nav.seg a.active { background: var(--surface-4); }
.topbar .spacer { flex: 1; }
.me-chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 4px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 13.5px/1 var(--font); color: var(--ink); }
.me-chip img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
button.me-chip { cursor: pointer; transition: border-color var(--d1), box-shadow var(--d2); }
button.me-chip:hover, button.me-chip[aria-expanded="true"] { border-color: var(--line-3); }
/* Sign out is a small POST form around its button (CSRF): the form adds no box of its own */
.so-form { display: contents; }
.topbar .signout svg { width: 17px; height: 17px; }
.me-chip span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .topbar .bar { padding: 0 14px; gap: 6px; height: 60px; }
  .me-chip span { display: none; }
  .me-chip { padding: 0 4px; }
  .topbar nav.seg { margin-left: 4px; }
  .topbar nav.seg a { padding: 0 12px; }
}
@media (max-width: 560px) {
  /* phones: the tabs get their own full-width row under the bar. Each is sized to its label and never shrinks
     below it (six of them: an even split cut "Calendars" off at 390px); where they don't all fit (under ~350px)
     the row scrolls sideways, as the bar's does between 560 and 720px */
  .topbar .bar { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 4px; row-gap: 8px; }
  .topbar nav.seg { order: 10; flex: 1 0 100%; display: flex; margin: 0; padding: 3px; overflow-x: auto; }
  .topbar nav.seg a { flex: 1 0 auto; justify-content: center; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
  .topbar .logo .wm, .me-chip span { display: none; }
  .me-chip { padding: 0 4px; }
  /* Sign out is in the account menu, so it gives its room to the bar */
  .topbar .signout { display: none; }
  .topbar .bar > .ibtn { width: 36px; height: 36px; }
}
/* tablets (an iPad at 768-820px): four tabs, the bell, the name and Sign out overflowed the bar; Sign out is
   in the account menu as on phones, and the tabs and the name close up a little */
@media (min-width: 721px) and (max-width: 940px) {
  .topbar nav.seg { margin-left: 8px; }
  .me-chip span { display: none; }
  .me-chip { padding: 0 4px; }
  .topbar nav.seg a { padding: 0 13px; }
  .me-chip span { max-width: 110px; }
  .topbar .signout { display: none; }
}

/* every meeting's own crop of the silk, tinted with its own hue (Meets.cover(slug) sets the vars) */
.silk-cover { background: linear-gradient(140deg, hsl(var(--hue, 262) 72% 64% / 0.3), transparent 62%),
  var(--silk-poster) var(--sx, 50%) var(--sy, 50%) / 300% auto no-repeat, var(--surface-3); }
[data-theme="dark"] .silk-cover { background: linear-gradient(140deg, hsl(var(--hue, 262) 60% 42% / 0.38), transparent 62%),
  var(--silk-poster) var(--sx, 50%) var(--sy, 50%) / 300% auto no-repeat, var(--surface-3); }
/* a meeting's voices as tracks, set into its poster (Meets.poster); the minmax(0) column
   lets a long wave clip inside a narrow card instead of widening the plate */
.vplate { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--glass-line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.vlane { display: flex; align-items: center; gap: 9px; height: 22px; }
.vlane img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--tc); }
.vwave { display: flex; align-items: center; gap: 2px; height: 18px; min-width: 0; overflow: hidden; }
.vwave b { flex: none; width: 2.5px; height: max(2.5px, calc(var(--h) * 100%)); border-radius: 2px; background: var(--tc); }
.vplate.faces { display: flex; align-items: center; gap: 0; }
.vplate.faces img { width: 28px; height: 28px; margin-right: -7px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface); }
.vplate.faces span { margin-left: 16px; font: 500 12.5px/1 var(--font); color: var(--ink-2); }

/* silk video panels: <div class="silk"><video data-silk muted loop playsinline></video></div> */
.silk { position: relative; isolation: isolate; overflow: hidden; background: var(--silk-poster) center / cover no-repeat, var(--bg); }
.silk > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0; transition: opacity 900ms var(--ease); }
.silk > video.ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* in-app dialogs (Meets.dialog / Meets.confirm): the browser's own are never used */
.mdlg-ovl { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: var(--dialog-scrim, color-mix(in oklab, var(--bg) 46%, transparent)); backdrop-filter: var(--sheet-blur, blur(8px)); -webkit-backdrop-filter: var(--sheet-blur, blur(8px));
  opacity: 0; transition: opacity 160ms var(--ease); }
.mdlg-ovl.open { opacity: 1; }
.mdlg { width: min(440px, 100%); display: grid; gap: 10px; padding: 26px 26px 22px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  transform: translateY(8px) scale(0.98); transition: transform 220ms var(--ease); }
.mdlg-ovl.open .mdlg { transform: none; }
.mdlg h2 { margin: 0; font: 500 20px/1.25 var(--font); letter-spacing: -0.015em; color: var(--ink); }
/* Meets.shortcuts: key caps on the left, what they do on the right */
.kbd-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 6px 0 4px; align-items: center; }
.kbd-list dt { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.kbd-list dt span { font-size: 12px; color: var(--ink-4); }
.kbd-list dd { margin: 0; font-size: 14px; color: var(--ink-2); }
.kbd-list kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; font: 500 12px/1 var(--mono);
  color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line-2), 0 0 0 1px var(--line); }
.mdlg p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.mdlg .mdlg-copy { width: 100%; height: auto; min-height: 64px; padding: 12px 14px; font: 13px/1.5 var(--mono); resize: none; }
.mdlg-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 10px; }
/* three or more choices stack full width (the main one on top); so does everything on phones */
.mdlg-acts.stack { flex-direction: column-reverse; }
.mdlg-acts.stack .btn { width: 100%; }
/* a destructive choice kept small: red text under the stack (left of the row), never full width */
.mdlg-acts .btn-danger-link, .mdlg-acts.stack .btn-danger-link { order: -1; width: auto; height: 30px; padding: 0 10px; font-size: 13px; background: none; color: var(--rec-text); align-self: center; }
.mdlg-acts:not(.stack) .btn-danger-link { margin-right: auto; }
.mdlg-acts .btn-danger-link:hover:not(:disabled) { background: var(--rec-soft); }
.cal-picks { display: grid; gap: 8px; margin-top: 4px; }
.cal-pick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color var(--d1), border-color var(--d1); }
.cal-pick:hover, .cal-pick:focus-visible { background: var(--violet-soft); border-color: var(--violet); outline: none; }
.cal-pick svg { flex: none; width: 22px; height: 22px; color: var(--violet-text); }
.cal-pick span { display: grid; gap: 3px; min-width: 0; }
.cal-pick b { font: 500 15px/1.3 var(--font); }
.cal-pick em { font-style: normal; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 480px) { .mdlg-acts { flex-direction: column-reverse; } .mdlg-acts .btn:not(.btn-danger-link) { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mdlg-ovl, .mdlg { transition: none; } }

/* a file shared in chat (room + archive): type badge, name, size, download */
.fcard { display: flex; align-items: center; gap: 10px; width: min(280px, 100%); min-width: 0; padding: 8px 10px 8px 8px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); text-decoration: none;
  transition: background var(--d1), box-shadow var(--d1), transform var(--d1) var(--ease); }
.fcard:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--violet-line); }
.fcard:active { transform: scale(0.985); }
.fcard:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fcard .fic { flex: none; width: 38px; height: 44px; display: grid; place-items: end center; padding-bottom: 7px; border-radius: 6px 12px 6px 6px;
  font: 700 9.5px/1 var(--mono); letter-spacing: 0.02em; color: #fff; background: var(--fc, #555770);
  background-image: linear-gradient(225deg, rgb(255 255 255 / 0.32) 0 9px, transparent 9px); }
.fcard .fic.g-pdf { --fc: #d63f45; } .fcard .fic.g-doc { --fc: #2f6ad8; } .fcard .fic.g-sheet { --fc: #198754; }
.fcard .fic.g-slides { --fc: #d4622a; } .fcard .fic.g-zip { --fc: #6b6880; } .fcard .fic.g-audio { --fc: #c93a80; }
.fcard .fic.g-video { --fc: #6147c7; } .fcard .fic.g-text { --fc: #555770; }
.fcard .fmeta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fcard .fmeta b { font: 600 13px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .fmeta small { font: 500 11.5px/1.2 var(--font); color: var(--ink-4); }
.fcard .fdl { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--violet-text); background: var(--violet-soft); }

/* ------------------------------------------------------------------------------------------ people picker */
/* Meets.peoplePicker: chips in a field (people, teams, emails that aren't valid), a floating list of
   suggestions under it, and a quiet footer (save as a team, manage teams) */
.pp { display: grid; gap: 8px; min-width: 0; }
.pp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 50px; padding: 8px 10px; border-radius: 16px; cursor: text;
  background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--d1), box-shadow var(--d2); }
.pp-box.focus { border-color: var(--violet-line); box-shadow: 0 0 0 4px var(--violet-soft); }
.pp-in { flex: 1 1 90px; min-width: 90px; height: 32px; padding: 0 6px; border: 0; outline: none; background: transparent; color: var(--ink); font: 400 15px/1.2 var(--font); }
.pp-in::placeholder { color: var(--ink-4); }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 3px 0 4px; border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--line); color: var(--ink); font: 500 13px/1 var(--font); animation: pp-in 260ms var(--ease) both; }
.pp-chip img, .pp-chip .pp-ic { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.pp-chip .pp-ic { display: grid; place-items: center; }
.pp-chip .t { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
.pp-chip button.t { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color var(--d1); }
.pp-chip button.t:hover { text-decoration-color: currentColor; }
.pp-x { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: var(--ink-3); transition: background-color var(--d1), color var(--d1); }
.pp-x:hover { background: var(--surface-4); color: var(--ink); }
.pp-chip.team { background: var(--violet-soft); border-color: color-mix(in oklab, var(--violet) 24%, transparent); color: var(--violet-text); }
.pp-chip.team .pp-ic { background: var(--violet); color: #fff; }
.pp-chip.team .pp-x { color: var(--violet-text); }
.pp-chip.team .pp-x:hover { background: color-mix(in oklab, var(--violet) 18%, transparent); }
.pp-chip.bad { background: var(--rec-soft); border: 1px dashed color-mix(in oklab, var(--rec) 55%, transparent); color: var(--rec-text); }
.pp-chip.bad .pp-ic { color: var(--rec-text); }
.pp-chip.bad .pp-x { color: var(--rec-text); }
.pp-chip.bad .pp-x:hover { background: color-mix(in oklab, var(--rec) 16%, transparent); }
.pp-box.bad:not(.focus) { border-color: color-mix(in oklab, var(--rec) 45%, var(--line-2)); }
@keyframes pp-in { from { opacity: 0; transform: scale(0.9); } }
.pp-foot { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 4px; }
.pp-foot .sp { flex: 1; }
.pp-foot:not(:has(.pp-link:not(.hide), .pp-hint)) { display: none; }
.pp-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font: 500 12.5px/1.2 var(--font); color: var(--violet-text); border-radius: 6px; }
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-link.pp-teams { color: var(--ink-3); }
.pp-link.pp-teams:hover { color: var(--ink); }
.pp-hint { font-size: 12.5px; color: var(--ink-4); }

.pp-list { position: fixed; z-index: 88; display: none; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); }
.pp-list.open { display: block; animation: meets-rise var(--d2) var(--ease); }
.pp-grp { padding: 9px 10px 5px; font: 500 11.5px/1 var(--font); color: var(--ink-4); }
.pp-opt { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 7px 10px; border-radius: 12px; cursor: pointer; color: var(--ink); }
.pp-opt.on { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.pp-opt img, .pp-oic { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; }
.pp-oic { display: grid; place-items: center; background: var(--violet-soft); color: var(--violet-text); }
.pp-oic.team { background: var(--violet); color: #fff; }
.pp-oic svg { width: 17px; height: 17px; }
.pp-ot { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pp-ot b { font: 500 14px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ot small { font-size: 12.5px; line-height: 1.25; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-opt .chip { flex: none; height: 22px; padding: 0 8px; font-size: 11.5px; }
.pp-opt .pp-8x { font-weight: 600; }
.pp-empty { display: flex; align-items: center; gap: 10px; padding: 14px 12px; font-size: 13.5px; color: var(--ink-3); }
.pp-empty .spin { width: 14px; height: 14px; }

/* reminder pills: choices that configure something go violet */
.rm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-pill { display: inline-flex; align-items: center; gap: 0; height: 34px; padding: 0 13px; border-radius: var(--r-pill); font: 500 13px/1 var(--font);
  color: var(--ink-2); background: var(--surface-3); border: 1px solid var(--line); transition: background-color var(--d1), color var(--d1), border-color var(--d1), gap var(--d2) var(--ease); }
.rm-pill svg { width: 0; opacity: 0; transition: width var(--d2) var(--ease), opacity var(--d1); }
.rm-pill:hover { color: var(--ink); border-color: var(--line-3); }
.rm-pill[aria-pressed="true"] { gap: 6px; background: var(--violet); border-color: var(--violet); color: #fff; }
.rm-pill[aria-pressed="true"] svg { width: 13px; opacity: 1; }
.rm-pill[aria-pressed="true"]:hover { background: var(--violet-hover); }

/* the Send feedback sheet (static/feedback.js): above the room's own sheets */
.fb-ovl { z-index: 82; }
.sheet.fb h2:focus { outline: none; }
.sheet.fb .field { height: auto; min-height: 132px; padding: 12px 16px; line-height: 1.45; resize: vertical; }
/* the Notifications sheet (static/push.js) */
.nt-ovl { z-index: 82; }
.sheet.nt { width: min(540px, 100%); }
.sheet.nt h2:focus { outline: none; }
.nt-body { display: grid; gap: 20px; }
.nt-load { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--ink-3); font-size: 14px; }
.nt-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 16px 14px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); }
.nt-card > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.nt-card b { font: 500 15.5px/1.3 var(--font); color: var(--ink); }
.nt-card span:not(.nt-ic):not(.tgl) { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.nt-card.on { background: var(--violet-soft); border-color: color-mix(in oklab, var(--violet) 22%, transparent); }
.nt-card.warn { background: var(--warn-soft); border-color: transparent; }
.nt-card.warn .nt-ic { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.nt-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--violet-text); background: var(--surface); box-shadow: var(--shadow-1); }
.nt-ic.big { width: 52px; height: 52px; border-radius: 18px; }
.nt-ic.big svg { width: 26px; height: 26px; }
.nt-card.on .nt-ic { color: #fff; background: var(--violet); box-shadow: none; }
.nt-sw { align-self: center; }
.nt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: -8px; }
.nt-hint { margin: 0; font-size: 13px; color: var(--ink-3); }
.nt-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.nt-k { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-style: normal; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.nt-k svg { width: 13px; height: 13px; }
.nt-sec { display: grid; gap: 10px; }
.nt-sec h3 { margin: 0; font: 500 15px/1.2 var(--font); letter-spacing: -0.01em; }
.nt-sec .nt-hint { margin-top: -6px; }
.nt-cats { display: grid; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; }
.nt-cat { padding: 12px 14px; min-height: 58px; }
.nt-cat + .nt-cat { border-top: 1px solid var(--line); }
.nt-cat:hover { background: var(--surface-2); }
.nt-ct { display: grid; gap: 2px; min-width: 0; }
.nt-ct b { font: 500 14px/1.3 var(--font); color: var(--ink); }
.nt-ct small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.nt-devs { display: grid; gap: 8px; }
.nt-dev { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 8px 8px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.nt-dev.me { border-color: color-mix(in oklab, var(--violet) 30%, var(--line)); }
.nt-dic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--ink-3); background: var(--surface); }
.nt-dt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nt-dt b { font: 500 14px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-dt b em { margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); font: 600 10.5px/1 var(--font); font-style: normal; letter-spacing: 0.02em; color: var(--violet-text); background: var(--violet-soft); vertical-align: 2px; }
.nt-dt small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-dev .ibtn { color: var(--ink-3); }
.nt-dev .ibtn:hover { color: var(--rec-text); background: var(--rec-soft); }
.nt-none { margin: 0; padding: 16px; border-radius: 18px; border: 1px dashed var(--line-2); font-size: 13.5px; color: var(--ink-3); text-align: center; }
/* the one-time ask before the browser's own prompt */
.nt-pre { display: grid; justify-items: start; gap: 12px; margin: -2px 0 4px; }
.nt-pre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nt-pre li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.nt-pre li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.nt-pre p { margin: 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) {
  .nt-card { padding: 14px 14px 14px 12px; gap: 12px; }
  .nt-row .btn-primary { flex: 1; }
}

/* the Teams sheet */
.tm-ovl { z-index: 82; }
.sheet.tm { width: min(540px, 100%); }
.tm-hd { display: flex; align-items: center; gap: 8px; }
.tm-hd .sp { flex: 1; }
.tm-hd h2:focus { outline: none; }
.tm-back { margin-left: -8px; }
.tm-body { display: grid; gap: 16px; min-height: 0; }
.tm-list { display: grid; gap: 8px; }
.tm-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.tm-faces { display: flex; flex: none; width: 74px; }
.tm-faces img { width: 30px; height: 30px; margin-right: -12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); }
.tm-faces .pp-oic { width: 30px; height: 30px; }
.tm-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tm-t b { font: 500 15px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-t small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-del { color: var(--ink-3); }
.tm-by { flex: none; padding: 0 6px; font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.tm-del:hover { color: var(--rec-text); background: var(--rec-soft); }
.tm-load { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--ink-3); font-size: 14px; }
.sheet.tm .acts .sp { flex: 1; }
@media (max-width: 640px) {
  .tm-faces { width: 58px; }
  .tm-faces img { width: 26px; height: 26px; }
  .sheet.tm .acts { flex-wrap: wrap; }
  .sheet.tm .acts .sp { display: none; }
  .sheet.tm .acts .tm-delb { flex: 1 1 100%; order: 3; }
  .pp-chip .t { max-width: 190px; }
}

/* ------------------------------------------------------------------------------------------ installed app (static/pwa.js) */
/* notches and home indicators: the bars and toasts keep clear of them (0 everywhere else) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: env(safe-area-inset-top); }
.toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
/* an installed window has no address bar to pull: no rubber-band reveal of the page behind */
html.standalone, html.standalone body { overscroll-behavior-y: none; }
/* the install card, the iOS sheet and the update toast: static/pwa.css (loaded with static/pwa.js) */

/* the desktop app with its title bar folded into the page (manifest display_override: window-controls-overlay).
   The page's top bar becomes the title bar: its empty space drags the window, everything you can press stays
   pressable, and its contents keep clear of the window buttons (left on macOS, right on Windows and Linux).
   Outside that mode (a tab, a phone, the normal title bar, or the overlay switched off) none of this applies. */
@media (display-mode: window-controls-overlay) {
  :root { --wco-l: env(titlebar-area-x, 0px); --wco-r: max(0px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw))); }
  .topbar, .door-top, .bk-top, body.room .app > header { -webkit-app-region: drag; app-region: drag; }
  :is(.topbar, .door-top, .bk-top, body.room .app > header) :is(a, button, input, select, textarea, label, summary, nav, [role], [tabindex], [contenteditable]),
  .menu, .overlay, .toast, .pwa-toast, .pwa-card, [role="dialog"], [role="menu"] { -webkit-app-region: no-drag; app-region: no-drag; }
  .topbar { padding-left: var(--wco-l); padding-right: var(--wco-r); }
  .door-top, .bk-top { margin-left: var(--wco-l); margin-right: var(--wco-r); }
  body.room .app > header { padding-left: max(14px, calc(var(--wco-l) + 10px)); padding-right: max(10px, calc(var(--wco-r) + 8px)); }
}

/* who is in a live meeting (Meets.peopleRow): overlapping faces, "+N", a line */
.ppl { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.ppl-faces { display: inline-flex; align-items: center; flex: none; padding-left: 6px; }
.ppl-faces img, .ppl-faces b { width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ppl-ring, var(--surface)); background: var(--surface-3); }
.ppl-faces b { display: grid; place-items: center; font: 600 11px/1 var(--font); color: var(--ink-2); letter-spacing: -0.02em; }
.ppl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-r { margin-left: 6px; color: var(--ink-3); }
.ppl.sm { gap: 8px; font-size: 12.5px; }
.ppl.sm .ppl-faces img, .ppl.sm .ppl-faces b { width: 22px; height: 22px; margin-left: -5px; font-size: 10px; }