/* Moments from the calls - the landing carousel and the admin review share
   this (2026-09-28). The controls (.vp-top/.vp-btn) come from
   video-player.css, so they match the landing video exactly; what is here is
   the clip frame, the crop, the loop fade, the captions and the carousel. */

/* ---- One clip ---- */
.mc-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #0b0b0b;
  container-type: inline-size;
}

/* The crop is a zoom about a point: scaling about x keeps x fixed, so the
   left crop is x of the total and the right is the rest. --mc-ox is 75% when
   the right margin is half a centred one - the Meet tiles on the right go,
   the shared screen stays (src/Carousel.php::originX). */
.mc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--mc-z, 1));
  transform-origin: var(--mc-ox, 50%) 50%;
}
.mc-wrap:fullscreen { aspect-ratio: auto; border-radius: 0; }
.mc-wrap:fullscreen .mc-video { transform: none; object-fit: contain; }

/* Fade to black and back as a clip loops (moments.js sets .is-fading). */
.mc-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity var(--mc-fade, .6s) ease-in-out;
  pointer-events: none;
}
.mc-wrap.is-fading .mc-fade { opacity: 1; }

/* Seconds left, bottom left (moments.js). Grey, and Ada green on the one
   clip with sound (2026-09-30). Gone while the clip fades out and back in;
   tabular figures so it does not jitter. */
.mc-count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: .1em .4em;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: rgb(var(--alt-text-rgb, 221 221 221) / .7);
  font-size: clamp(18px, 5.8cqw, 32px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  pointer-events: none;
  transition: opacity var(--mc-fade, .6s) ease-in-out;
}
.mc-count[hidden] { display: none; }
.mc-wrap.is-audible .mc-count { color: var(--alt-accent, #aaddaa); }
.mc-wrap.is-fading .mc-count { opacity: 0; }

/* Our own caption line, not the browser's: native cues would be scaled and
   cropped by the zoom above, and iOS ignores their styling. Sized to the
   clip, two lines at most, so it reads without taking the frame over. */
.mc-cap {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 2;
  transform: translateX(-50%);
  max-width: 88%;
  padding: .15em .45em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: clamp(11px, 3.4cqw, 26px);
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}
.mc-cap[hidden] { display: none; }

.mc-click {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mc-wrap .vp-top { z-index: 3; }

/* The corner controls a size up from the landing video's 44px: a clip is a
   third of the page wide, so its buttons are the part that has to stay
   findable (2026-09-28). */
/* The players' two sizes since 2026-10-02 (player.css): full screen and
   share large, sound small. */
.mc-wrap .vp-top { align-items: center; }
.mc-wrap .vp-btn { width: var(--cp-btn-l, 50px); height: var(--cp-btn-l, 50px); }
.mc-wrap .vp-btn.mc-sound { width: var(--cp-btn-s, 42px); height: var(--cp-btn-s, 42px); }
.mc-wrap .mc-sound .vp-glyph { width: 52%; height: 52%; }
.mc-wrap .vp-glyph { width: 28px; height: 28px; }

/* Flashes the new sound state in the middle of the clip, then fades. */
.mc-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(84px, 26cqw);
  height: min(84px, 26cqw);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  pointer-events: none;
}
.mc-flash svg { width: 50%; height: 50%; fill: currentColor; }
.mc-flash.is-on { animation: mc-flash .9s ease-out forwards; }
@keyframes mc-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-flash.is-on { animation-duration: .6s; }
}

/* Jump to this call at this moment: where the landing video has its dim
   YouTube button, twice the diameter and bright. Shrinks only on a clip too
   narrow to carry 88px without covering it. */
.mc-jump {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(75px, 20.4cqw);       /* 15% under the first 88px (2026-09-29) */
  height: min(75px, 20.4cqw);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #4455BB) 88%, transparent);
  color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  transition: transform .15s ease-in-out, background-color .15s ease-in-out;
}
.mc-jump svg { width: 46%; height: 46%; display: block; }
.mc-jump:hover { background: var(--accent-bright, #8a95d6); transform: scale(1.05); }
/* After a while with sound on (moments.js): a slow sway, then a rest, on a
   loop - enough to catch the eye, not enough to nag. */
.mc-jump.is-beckon { animation: mc-beckon 3.2s ease-in-out infinite; }
@keyframes mc-beckon {
  0%, 55%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-12deg); }
  22% { transform: rotate(10deg); }
  34% { transform: rotate(-7deg); }
  45% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-jump.is-beckon { animation: none; box-shadow: 0 0 0 3px var(--alt-accent, #aaddaa), 0 2px 14px rgba(0, 0, 0, .45); }
}
/* Share this clip (2026-09-30): the corner buttons' size and look, just
   left of the jump button and centred on it. */
.mc-wrap { --mc-jump-s: min(75px, 20.4cqw); --mc-edge: 10px; --mc-btn-s: var(--cp-btn-l, 50px); }
.mc-share {
  position: absolute;
  z-index: 3;
  width: var(--mc-btn-s) !important; height: var(--mc-btn-s) !important;
  right: calc(var(--mc-edge) + var(--mc-jump-s) + 10px);
  bottom: max(var(--mc-edge), calc(var(--mc-edge) + (var(--mc-jump-s) - var(--mc-btn-s)) / 2));
}
.mc-jump:focus-visible, .mc-click:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mc-wrap .vp-btn { opacity: .65; transition: opacity .15s ease-in-out; }
  .mc-wrap:hover .vp-btn, .mc-wrap .vp-btn:focus-visible { opacity: 1; }
}
/* The clip the sound is coming from (2026-09-28): its speaker is never
   dimmed and is drawn in Ada green, the design system's --alt-accent, so with
   three clips side by side the audible one is obvious. The centre flash
   uses the same green when it announces sound on. */
.mc-wrap .mc-sound[aria-pressed="true"] { opacity: 1; color: var(--alt-accent, #aaddaa); }
.mc-flash.is-sound { color: var(--alt-accent, #aaddaa); }

/* ---- The carousel ----
   It has to look like one (Lucas, 2026-09-28): the next clip always peeks in
   from the right, dimmed, on every screen size (--mc-vis 3.3 / 2.3 / 1.18);
   big accent-coloured arrows sit over the edges of the row; dots underneath
   count the clips; and the row can be dragged with a mouse or a finger. */
.mc { margin-block: 8px 34px; --mc-vis: 1.18; }
@media (min-width: 40rem) { .mc { --mc-vis: 2.3; } }
@media (min-width: 62rem) { .mc { --mc-vis: 3.3; } }
.mc-h { font-size: 1.4rem; margin: 0 0 12px; }
.mc-stage { position: relative; }
.mc-viewport { overflow: hidden; margin-inline: -14px; }
@media (hover: hover) and (pointer: fine) {
  .mc-viewport { cursor: grab; }
  .mc.is-dragging .mc-viewport { cursor: grabbing; }
}
.mc.is-dragging .mc-track { user-select: none; -webkit-user-select: none; }
.mc.is-dragging .mc-wrap * { pointer-events: none; }
.mc-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  will-change: transform;
}
.mc-slide {
  flex: 0 0 calc(100% / var(--mc-vis));
  box-sizing: border-box;
  padding: 0 14px;
  min-width: 0;
}
/* The title above each clip - the moment's hook, in the viewer's language. */
.mc-title {
  margin: 0 2px 10px;
  font-size: 1.3rem;               /* the hook: large, two lines if it must */
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;               /* two lines, so the clips line up */
  display: flex;
  align-items: flex-end;
}
.mc-title span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A clip only partly in view is a way to the next one: tapping it moves the
   carousel (moments.js), so it looks like it will. */
.mc-slide.is-peek { cursor: pointer; }
.mc-slide.is-peek .mc-wrap, .mc-slide.is-peek .mc-title { opacity: .55; transition: opacity .2s; }
.mc-slide.is-peek .mc-wrap > * { pointer-events: none; }
.mc-arrow {
  position: absolute;
  top: calc(var(--mc-clip-top, 0px) + var(--mc-clip-h, 200px) / 2 - 28px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #4455BB) 92%, transparent);
  color: #fff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: transform .15s ease-in-out, background-color .15s ease-in-out;
}
.mc-prev.mc-arrow { left: -10px; }
.mc-next.mc-arrow { right: -10px; }
.mc-arrow svg { width: 28px; height: 28px; }
.mc-arrow:hover { background: var(--accent-bright, #8a95d6); transform: scale(1.08); }
.mc-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mc.is-static .mc-arrow, .mc.is-static .mc-dots { display: none; }

.mc-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mc-dot {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.mc-dot[hidden] { display: none; }
.mc-dot::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: rgb(var(--alt-text-rgb, 221 221 221) / .35);
  transition: width .2s, background-color .2s;
}
.mc-dot.is-edge::before { width: 9px; height: 9px; }
.mc-dot[aria-current="true"]::before { width: 36px; border-radius: 8px; background: var(--accent-bright, #8a95d6); }


.mc-arrow-sm {
  display: none;
  width: 40px; height: 40px; padding: 0; margin: 0 6px;
  align-items: center; justify-content: center;
  border: 1px solid rgb(var(--alt-text-rgb, 221 221 221) / .3); border-radius: 50%;
  background: var(--surface, #2a2a2a); color: var(--alt-text, #ddd); cursor: pointer;
}
.mc-arrow-sm svg { width: 20px; height: 20px; }
.mc-dots { align-items: center; flex-wrap: nowrap; }
.mc-arrow-sm.mc-prev { order: -1; }
.mc-arrow-sm.mc-next { order: 9999; }

/* A phone: the side arrows move under the clip, either side of the dots, so
   they do not cover it; the peek, the drag and the dots do the rest. */
@media (max-width: 39.99rem) {
  .mc-viewport { margin-inline: -8px; }
  .mc-slide { padding: 0 8px; }
  .mc-arrow { display: none; }
  /* A phone clip is small: controls a size down, so they do not cover it. */
  .mc-wrap .vp-top { top: 6px; right: 6px; gap: 6px; }
  .mc-wrap .vp-btn { width: var(--cp-btn-l, 42px); height: var(--cp-btn-l, 42px); }
  .mc-wrap .vp-btn.mc-sound { width: var(--cp-btn-s, 34px); height: var(--cp-btn-s, 34px); }
  .mc-wrap .vp-glyph { width: 21px; height: 21px; }
  .mc-jump { width: min(51px, 14.5cqw); height: min(51px, 14.5cqw); right: 8px; bottom: 8px; }
  .mc-wrap { --mc-jump-s: min(51px, 14.5cqw); --mc-edge: 8px; --mc-btn-s: var(--cp-btn-l, 42px); }
  .mc-share { right: calc(var(--mc-edge) + var(--mc-jump-s) + 8px); }
  .mc-count { left: 8px; bottom: 8px; }
  .mc-dots { gap: 2px; margin-top: 12px; }
  .mc-dot { width: 22px; height: 22px; }
  .mc-dot::before { width: 11px; height: 11px; }
  .mc-dot.is-edge::before { width: 7px; height: 7px; }
  .mc-dot[aria-current="true"]::before { width: 26px; height: 11px; }
  .mc-arrow-sm { width: 36px; height: 36px; margin: 0 8px; }
  .mc-arrow-sm { display: inline-flex; background: color-mix(in srgb, var(--accent, #4455BB) 92%, transparent); color: #fff; border-color: rgba(255, 255, 255, .6); }
}

/* ---- "Watch more" under the carousel ---- */
.mc-more { display: flex; justify-content: center; margin: 14px 0 0; }
.mc-more a { text-decoration: none; }

/* ---- /moments: the feed (2026-09-28) ----
   Two clips side by side in the middle of a desktop, with room around them;
   one column on a phone. An open scroll, not a grid of thumbnails. */
.mf { max-width: 1120px; margin: 0 auto; }
.mf-list {
  list-style: none; margin: 28px 0 60px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px;
}
@media (min-width: 48rem) {
  .mf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 56px; padding-inline: 24px; }
}
.mf-item { min-width: 0; }
.mf-title {
  font-size: 1.35rem; line-height: 1.3; margin: 0 0 12px;
  min-height: 2.6em; display: flex; align-items: flex-end;   /* two lines, so pairs line up */
}
.mf-meta { margin: 12px 0 6px; font-size: .95rem; color: rgb(var(--alt-text-rgb, 221 221 221) / .7); }
.mf-meta a { color: var(--alt-text, #ddd); }
.mf-quote {
  margin: 0; padding: .1em 0 .1em 14px;
  border-left: 3px solid var(--alt-accent, #aaddaa);
  font-style: italic; font-size: 1rem; line-height: 1.45;
  color: rgb(var(--alt-text-rgb, 221 221 221) / .85);
}

/* The "two more" button and its hourglass (2026-09-28). While it waits the
   glass turns over slowly; when it is ready it stands still. */
.mf-item[hidden] { display: none; }
.mf-next { display: flex; justify-content: center; margin: -24px 0 70px; }
.mf-more { display: inline-flex; align-items: center; gap: .55em; font-size: 1rem; padding: .6em 1.4em; }
.mf-more:disabled { opacity: .75; cursor: default; }
/* The wait fills the button left to right in green (2026-09-30): moments.js
   sets --mf-wait to the seconds and restarts the fill on every wait. */
.mf-more { position: relative; overflow: hidden; isolation: isolate; }
.mf-more > :not(.mf-fill) { position: relative; }
.mf-fill {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--alt-accent) 55%, var(--accent));
  transform: scaleX(0); transform-origin: left center;
}
.mf-more.is-waiting { opacity: 1; }
.mf-more.is-waiting .mf-fill { animation: mf-fill var(--mf-wait, 8s) linear forwards; }
@keyframes mf-fill { to { transform: scaleX(1); } }
.mf-glass { width: 1.3em; height: 1.3em; }
.mf-more.is-waiting .mf-glass { animation: mf-glass 3s ease-in-out infinite; }
@keyframes mf-glass { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .mf-more.is-waiting .mf-glass { animation: none; } }

/* ---- "Open the full call?" (2026-09-30) ----
   Asked by the jump button (moments.js). The backdrop is light, so the clip
   is still seen playing behind the question. */
.mc-ask {
  max-width: min(26rem, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: 1px solid rgb(var(--alt-text-rgb, 221 221 221) / .2);
  border-radius: 14px;
  background: var(--surface, #2a2a2a);
  color: var(--alt-text, #ddd);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.mc-ask::backdrop { background: rgba(0, 0, 0, .35); }
.mc-ask-q { margin: 0 0 18px; font-size: 1.15rem; line-height: 1.35; }
.mc-ask-acts { display: flex; flex-direction: column; gap: 10px; }
.mc-ask-acts > * { text-align: center; justify-content: center; text-decoration: none; }
.mc-ask-stay { font-size: 1.05rem; padding: .6em 1.2em; }

/* The share dialog (moments.js, openShare) - the jump question's box. */
.mc-sharedlg { width: min(26rem, calc(100vw - 32px)); }
.mc-sharedlg .mc-ask-q { margin-bottom: 6px; }
.mc-share-t { margin: 0 0 16px; color: rgb(var(--alt-text-rgb, 221 221 221) / .75); line-height: 1.35; }
.mc-share-link { display: flex; gap: 8px; margin-bottom: 16px; }
.mc-share-link input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .45em .8em;
  border: 1px solid rgb(var(--alt-text-rgb, 221 221 221) / .3); border-radius: var(--radius-btn, 30px);
  background: var(--bg, #121314); color: var(--alt-text, #ddd);
}
.mc-share-copy { white-space: nowrap; }
.mc-share-to { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 8px; margin-bottom: 16px; }
.mc-share-to > * { text-align: center; text-decoration: none; font: inherit; cursor: pointer; }
.mc-share-close { width: 100%; font: inherit; cursor: pointer; }

/* ---- Full screen (2026-09-30) ----
   A black stage the clip's frame is moved onto (moments.js, Stage), with the
   carousel's own side arrows, so full screen can step from clip to clip. */
/* Out of sight but rendered, not display:none - a browser may refuse full
   screen to an element that is not rendered. */
.mc-fsstage { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }
.mc-fsstage:fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
/* Separate: one unknown selector would drop the whole rule. */
.mc-fsstage:-webkit-full-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.mc-fsstage .mc-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.mc-wrap.is-full .mc-video { transform: none; object-fit: contain; }
.mc-fsstage .mc-fsnav {
  display: flex;
  top: calc(50% - 28px);
  z-index: 6;
}
.mc-fsstage .mc-fsnav.mc-prev { left: 16px; }
.mc-fsstage .mc-fsnav.mc-next { right: 16px; }
.mc-fsstage .mc-fsnav[hidden] { display: none; }
/* The frame's place in the page while it is on the stage. */
.mc-ph { background: #000; }

/* Facebook/LinkedIn copied the text as they opened (moments.js). */
.mc-share-paste { margin: -6px 0 16px; color: var(--alt-accent, #aaddaa); font-weight: 600; }