/* Expand-to-fullscreen arrows, fill-less for masking — only the embedded session's fullscreen button. */
:root {
  --glyph-fullscreen: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%209V5a1%201%200%200%201%201-1h4a1%201%200%201%201%200%202H6v3a1%201%200%201%201-2%200zm15-1V6h-3a1%201%200%201%201%200-2h4a1%201%200%200%201%201%201v4a1%201%200%201%201-2%200zM4%2015a1%201%200%200%201%202%200v3h3a1%201%200%201%201%200%202H5a1%201%200%200%201-1-1v-4zm16%200v4a1%201%200%200%201-1%201h-4a1%201%200%201%201%200-2h3v-3a1%201%200%201%201%202%200z'/%3E%3C/svg%3E");
}

@layer components {
  /* A live-session card on the lesson page: when it's on, its title, and the join button
     (shown only to enrolled students). Re-rendered from the record, so it later carries the
     in-page embed and the recording too. */
  .meeting-card {
    display: grid;
    gap: var(--block-space-half);
    padding: var(--block-space);
    margin-block-end: var(--block-space);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }
  /* A calm "live" cue — a soft brand-tinted pill and a gently breathing dot, not an alarm. */
  .meeting-card--live { border-color: color-mix(in oklch, var(--color-brand) 40%, var(--color-border)); }
  .meeting-card__live {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
    font-size: var(--text-x-small);
    letter-spacing: 0.02em;
  }
  .meeting-card__live::before {
    content: "";
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background: currentColor;
    animation: meeting-live-pulse 2.4s ease-in-out infinite;
  }
  /* A slow swell, like a breath — not a blink. */
  @keyframes meeting-live-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
  /* Zoom-branded eyebrow so the card reads as a live session at a glance. */
  .meeting-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    color: var(--color-zoom);
    font-size: var(--text-small);
    font-weight: 600;
  }
  .meeting-card__label::before {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    background-color: currentColor;
    -webkit-mask: var(--glyph-zoom) center / contain no-repeat;
    mask: var(--glyph-zoom) center / contain no-repeat;
  }
  .meeting-card__when { font-variant-numeric: tabular-nums; color: var(--color-subtle); }
  .meeting-card__title { font-weight: 600; }
  .meeting-card__actions { display: flex; align-items: center; gap: var(--block-space); justify-self: start; }
  .meeting-card__gated,
  .meeting-card__ended { color: var(--color-muted); font-size: var(--text-small); }
  /* The secondary "join in the browser" option beneath the app button — a quiet text link. */
  .meeting-card__enter-here {
    justify-self: start;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--text-small);
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
  }
  .meeting-card__enter-here:disabled { opacity: 0.5; pointer-events: none; }

  /* When joined, the card gives way to the session (the chosen "replace the card" mode). The client
     renders at a fixed 16:9 (see zoom_join_controller) and is scaled to fit this stage — the content
     column normally, the whole screen in fullscreen — staying centered, never stretched. */
  .meeting-card--embedded { padding: 0; border: none; background: none; }
  .meeting-card--embedded > :not(.meeting-card__stage) { display: none; }
  .meeting-card__stage {
    position: relative;
    inline-size: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius);
    background: oklch(0 0 0);
  }
  /* display:grid above would otherwise beat the hidden attribute — keep the stage gone until join. */
  .meeting-card__stage[hidden] { display: none; }
  /* Sized to the stage in JS at join time (so it fills the card); the transform only scales it up
     for a larger stage — fullscreen. */
  .meeting-card__embed {
    transform: scale(var(--embed-scale, 1));
    transform-origin: center;
  }

  /* Fullscreen affordance — a quiet dark corner button over the client. */
  .meeting-card__fullscreen {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-end: var(--block-space-half);
    z-index: 2;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: color-mix(in oklch, oklch(0 0 0) 55%, transparent);
    cursor: pointer;
  }
  .meeting-card__fullscreen::before {
    content: "";
    display: block;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-inline: auto;
    background-color: oklch(1 0 0);
    -webkit-mask: var(--glyph-fullscreen) center / contain no-repeat;
    mask: var(--glyph-fullscreen) center / contain no-repeat;
  }
  /* Taken fullscreen: the card fills the screen and the stage fills the card. */
  .meeting-card:fullscreen { display: block; background: oklch(0 0 0); }
  .meeting-card:fullscreen .meeting-card__stage { block-size: 100%; border-radius: 0; }

  /* Zoom marker on a curriculum lesson row — the brand glyph and the session time, breathing
     while live, greyed once over. Centered in the space between the title and the meta (title
     stops growing so the auto margins can centre it), never over the title text. */
  .lesson-row:has(.lesson-row__zoom) .lesson-row__title { flex: 0 1 auto; min-inline-size: 0; }
  .lesson-row__zoom {
    flex: none;
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    background: var(--color-zoom);
    color: oklch(1 0 0);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .lesson-row__zoom::before {
    content: "";
    inline-size: 0.9em;
    block-size: 0.9em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--glyph-zoom) center / contain no-repeat;
    mask: var(--glyph-zoom) center / contain no-repeat;
  }
  .lesson-row__zoom--live::before { animation: lesson-row-zoom-live 2.4s ease-in-out infinite; }
  @keyframes lesson-row-zoom-live { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  .lesson-row__zoom--ended { background: var(--color-muted); }
}