@layer lifeos.reset, lifeos.tokens, lifeos.layout, lifeos.components, lifeos.routes, lifeos.overrides;

@layer lifeos.routes {
  /* Generated window and watch styles. Requires site.css tokens and #root app variables. */

  .window-browse-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--browse-viewport-height);
    min-height: var(--browse-viewport-height);
    max-height: var(--browse-viewport-height);
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    scrollbar-gutter: stable both-edges;
    background: transparent;
  }

  .window-browse-stage {
    position: relative;
    height: var(--browse-viewport-height);
    min-height: var(--browse-viewport-height);
    max-height: var(--browse-viewport-height);
    inline-size: 100%;
    max-inline-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }

  .window-browse-stage.participant-shell--window > .split-stage,
  .window-browse-stage.participant-shell--window > .split-screen-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  @media (max-width: var(--viewport-query-split-wide-max)) {
    .window-browse-stage.participant-shell--window {
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
      grid-template-rows: minmax(0, 1fr) auto;
    }

    .window-browse-stage.participant-shell--window > .split-stage,
    .window-browse-stage.participant-shell--window > .split-screen-stage {
      min-height: 0;
    }
  }

  .window-browse-stage[data-window-active="false"] {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--browse-viewport-height);
  }

  .window-browse-stage[data-window-active="false"] .text-shimmer-wave-char {
    animation-play-state: paused;
  }

  .window-browse-stage:not([data-window-active="true"]) > .panel-footer .panel-back {
    display: none;
  }

  .window-browse-stage.participant-shell {
    min-height: var(--browse-viewport-height);
    container-type: size;
    container-name: adaptive-surface;
  }

  .window-browse-stage.participant-shell--window {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, calc(var(--container-query-wide) / 2)), 1fr)
    );
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: center;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-block: var(--split-media-gap);
    container-type: normal;
    container-name: none;
    overflow-x: clip;
    overflow-y: visible;
  }

  @media (min-width: var(--viewport-query-split-wide)) {
    .window-browse-stage.participant-shell--window {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
    }

    .window-browse-stage.participant-shell--window > .split-stage,
    .window-browse-stage.participant-shell--window > .split-screen-stage {
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
    }

    .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
      padding-block: 0;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
    }

    .window-browse-stage.participant-shell--window > .panel.split-screen-panel::-webkit-scrollbar {
      display: none;
    }
  }

  @container adaptive-surface (min-width: var(--container-query-wide)) {
    .window-browse-stage.participant-shell--window {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
    }

    .window-browse-stage.participant-shell--window > .split-stage,
    .window-browse-stage.participant-shell--window > .split-screen-stage {
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
    }

    .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      height: var(--browse-viewport-height);
      min-height: var(--browse-viewport-height);
      max-height: var(--browse-viewport-height);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
    }

    .window-browse-stage.participant-shell--window > .panel.split-screen-panel::-webkit-scrollbar {
      display: none;
    }
  }

  .window-browse-stage[data-plus-details="true"] > .split-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .window-browse-stage[data-plus-details="true"] > .split-stage .stage-overlay,
  .window-browse-stage[data-plus-details="true"] > .panel,
  .window-browse-stage[data-plus-details="true"] > .panel-footer {
    visibility: hidden;
    pointer-events: none;
  }


  /* ==========================================================================
   Watch / lesson
   ========================================================================== */

  .watch-ambient-stage {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .participant-shell--watch {
    --watch-panel-copy-width: var(--container-watch);
    --watch-video-inline: var(--container-watch-video);
    --watch-video-max-block: var(--layout-watch-video-max-block);
    --watch-chat-icon-size: var(--icon-watch-chat-size);
    width: 100%;
    max-width: 100%;
  }

  .watch-panel {
    --watch-copy-measure: min(100%, 30ch);

    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  }

  .watch-card {
    display: grid;
    gap: var(--space-3);
  }

  .watch-card[data-watch-card="stage"] {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    background: var(--surface-canvas);
    container-type: size;
    container-name: watch-stage-video;
  }

  .lesson-stage .stage-overlay {
    padding: 0;
  }

  .participant-shell--watch .lesson-stage .watch-card[data-watch-card="stage"] > .video-frame {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    aspect-ratio: unset;
    overflow: hidden;
    border-radius: 0;
  }

  /* Watch lesson Kinescope: cover while idle, centered 16:9 once the iframe is engaged. */
  @container watch-stage-video (min-width: 1px) {
    .participant-shell--watch
      .lesson-stage
      .watch-card[data-watch-card="stage"]
      > .video-frame[data-video-ready="true"]:is(:focus-within, [data-video-playing="true"])
      > iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 0;
      min-height: 0;
      max-width: 100cqw;
      max-height: 100cqh;
      width: min(100cqw, calc(100cqh * var(--scale-login-missing-denom) / 9));
      height: auto;
      aspect-ratio: 16 / 9;
      transform: translate(-50%, -50%);
    }

    .participant-shell--watch
      .lesson-stage
      .watch-card[data-watch-card="stage"]
      > .video-frame[data-video-ready="true"]:not(:focus-within):not([data-video-playing="true"])
      > iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 0;
      min-height: 0;
      max-width: none;
      max-height: none;
      transform: translate(-50%, -50%);
      width: 100cqw;
      height: 56.25cqw;
      min-width: 177.78cqh;
      min-height: 100cqh;
    }
  }

  /* Container-query fallback for narrow watch stages (in-app browsers, older WebViews). */
  @media (max-width: 63.999rem) {
    .participant-shell--watch:not([data-watch-layout="panel-focus"])
      .lesson-stage
      .watch-card[data-watch-card="stage"]
      > .video-frame[data-video-ready="true"]:is(:focus-within, [data-video-playing="true"]) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"])
      .lesson-stage
      .watch-card[data-watch-card="stage"]
      > .video-frame[data-video-ready="true"]:is(:focus-within, [data-video-playing="true"])
      > iframe {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: auto;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 16 / 9;
      transform: none;
    }
  }

  .review-gate-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--button-group-gap);
    width: var(--container-form-narrow-local);
    margin-inline: auto;
  }

  .review-gate-deadline {
    display: inline-flex;
    align-items: center;
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--divider-width) solid var(--hairline);
    border-radius: var(--button-radius);
    color: var(--text-soft);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.1);
  }

  .review-gate-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--divider-width) solid currentColor;
    border-radius: var(--button-radius);
    color: inherit;
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    text-decoration: none;
    transition:
      background-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .review-gate-action:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .review-gate-action:active {
    transform: scale(var(--app-press-scale));
  }

  /* Review-broadcast only: chat fills the allocated 50% panel with safe-area insets. */
  .participant-shell--watch.participant-shell--review-gate-broadcast:not([data-watch-layout="panel-focus"])
    > .watch-panel.watch-panel--review-gate-broadcast {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    height: 100%;
    padding-block-end: var(--safe-area-bottom);
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    overflow: hidden;
    background: var(--page, #050505);
    color-scheme: dark;
    container-type: normal;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast
    > .watch-panel
    > .panel-scroll.panel-scroll--review-gate-chat {
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .watch-sheet-body--review-gate-chat,
  .participant-shell--watch.participant-shell--review-gate-broadcast [data-e2e="review-gate"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame {
    --kinescope-chat-surface: #000;
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    color-scheme: dark;
    background: var(--kinescope-chat-surface);
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: var(--kinescope-chat-surface);
    color-scheme: dark;
  }

  @media (max-width: var(--viewport-query-split-wide-max)) {
    .participant-shell--watch.participant-shell--review-gate-broadcast:not([data-watch-layout="panel-focus"]) {
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-columns: minmax(0, 1fr);
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links {
      grid-row: 1;
      grid-column: 1;
      align-self: start;
      justify-self: end;
      width: 0;
      height: 0;
      overflow: visible;
      pointer-events: none;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links a {
      pointer-events: auto;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .lesson-stage {
      grid-row: 1;
      grid-column: 1;
      min-height: 0;
      height: 100%;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast
      > .watch-panel.watch-panel--review-gate-broadcast {
      grid-row: 2;
      grid-column: 1;
      min-height: 0;
      max-height: none;
      height: 100%;
    }
  }

  @media (min-width: 64rem) {
    .participant-shell--watch.participant-shell--review-gate-broadcast:not([data-watch-layout="panel-focus"])
      > .watch-panel.watch-panel--review-gate-broadcast {
      padding-block: var(--safe-area-top) var(--safe-area-bottom);
      padding-inline: max(var(--safe-area-left), var(--space-3)) var(--panel-safe-gutter-end);
    }
  }

  .video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: auto;
  }

  /* Kinescope embed lifecycle (kinescopeEmbedLifecycle.ts). */
  .kinescope-embed-frame {
    --kinescope-embed-loader-out-duration: var(--motion-media-loader-out-duration);
    --kinescope-embed-media-reveal-duration: var(--motion-media-reveal-duration);
    --kinescope-embed-reveal-ease: var(--motion-grid-panel-ease);
    color-scheme: dark;
  }

  .kinescope-embed-frame::after {
    opacity: 1;
    transition: opacity var(--kinescope-embed-media-reveal-duration)
      var(--kinescope-embed-reveal-ease);
  }

  .kinescope-embed-loader {
    transition:
      opacity var(--kinescope-embed-loader-out-duration) var(--kinescope-embed-reveal-ease),
      visibility 0ms linear var(--kinescope-embed-loader-out-duration);
  }

  .kinescope-embed-frame[data-video-ready="true"] .kinescope-embed-loader {
    opacity: 0;
    visibility: hidden;
  }

  .kinescope-embed-frame[data-video-ready="true"] .kinescope-analyzing-image__scan,
  .kinescope-embed-frame[data-video-ready="true"] .kinescope-analyzing-image__wipe {
    animation: none;
  }

  /* Analyzing loader keyframes live in site-critical.css for first paint. */

  .kinescope-embed-frame iframe {
    transition: opacity var(--kinescope-embed-media-reveal-duration)
      var(--kinescope-embed-reveal-ease);
  }

  .kinescope-embed-frame[data-video-ready="true"] iframe {
    visibility: visible;
    opacity: 1;
  }

  .kinescope-embed-frame[data-video-ready="true"]::after {
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .kinescope-embed-frame {
      --kinescope-embed-loader-out-duration: var(--motion-media-reduced-duration);
      --kinescope-embed-media-reveal-duration: var(--motion-media-reduced-duration);
    }

    .kinescope-embed-loader,
    .kinescope-analyzing-image__scan,
    .kinescope-analyzing-image__wipe {
      animation-duration: var(--motion-reduced-duration);
      animation-iteration-count: 1;
    }
  }

  .kinescope-embed-frame iframe {
    background: var(--surface-canvas);
    color-scheme: dark;
  }

  .video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .counter-pill,
  .lesson-tab {
    background: transparent;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .lesson-tab:hover {
    color: var(--text-soft);
  }
  .lesson-tab[data-current="true"] {
    color: var(--text);
  }

  .lesson-tabs {
    --button-font-size: var(--type-control-compact);
    --button-min-height: var(--button-compact-min-height);
    --button-padding-block: var(--adaptive-compact-button-padding-block);
    --button-padding-inline: var(--adaptive-compact-button-padding-inline);
    --button-group-gap: var(--layout-base-gap);

    width: 100%;
    max-width: min(100%, 38ch);
    margin-inline: 0;
  }

  .participant-shell--watch .watch-panel .lesson-tabs {
    --button-font-size: var(--type-control-compact);
    --lesson-tab-border-width: var(--line-width-thin);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--button-group-gap);
  }

  @container adaptive-surface (min-width: var(--container-query-compact)) {
    .participant-shell--watch .watch-panel .lesson-tabs {
      grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    }
  }

  .participant-shell--watch .watch-panel .lesson-tab {
    width: 100%;
    min-width: 0;
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--lesson-tab-border-width) solid rgba(255, 255, 255, 0.38);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--button-font-size);
    font-weight: 300;
    line-height: var(--leading-control);
    box-shadow: none;
  }

  .participant-shell--watch .lesson-tab[data-current="true"] {
    border-color: rgba(255, 255, 255, 0.62);
    background: transparent;
    color: var(--text-strong);
    box-shadow: none;
  }

  .participant-shell--watch .lesson-tab:hover {
    border-color: rgba(255, 255, 255, 0.52);
    background: transparent;
    color: var(--text-strong);
    box-shadow: none;
  }

  @container adaptive-surface (max-width: var(--container-query-compact)) {
    .participant-shell--watch .watch-panel .lesson-tabs {
      --button-font-size: var(--type-micro);
      --button-min-height: var(--button-compact-min-height);
      --button-padding-block: var(--adaptive-compact-button-padding-block);
      --button-padding-inline: var(--adaptive-compact-button-padding-inline);
      --button-group-gap: calc(var(--layout-base-gap) * var(--scale-comfort));
    }
  }

  .participant-shell--watch > .watch-panel > .panel-scroll.split-content-stack {
    grid-row: 2;
    flex: none;
    display: grid;
    justify-self: center;
    margin-inline: auto;
    width: min(var(--adaptive-content-width), var(--container-watch), 100%);
    max-width: 100%;
    justify-items: center;
    align-content: center;
    font-size: var(--type-panel-relative-emphasis);
    gap: var(--split-content-actions-gap);
    grid-auto-rows: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-block: 0;
    scrollbar-width: none;
    box-sizing: border-box;
  }

  .participant-shell--watch[data-watch-layout="panel-focus"]
    > .watch-panel
    > .panel-scroll.split-content-stack {
    width: min(var(--adaptive-content-width), var(--accordion-inline), 100%);
    max-width: min(var(--container-watch), var(--accordion-inline), 100%);
    max-height: min(
      100%,
      calc(
        100dvh -
          var(--split-back-zone) * 2
      )
    );
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .participant-shell--watch > .lesson-stage .focus-backdrop[data-stage-overlay="goal-selection"] {
    --focus-backdrop-scrim: #000;
  }

  .participant-shell--details-picker
    > .split-stage
    .focus-backdrop[data-stage-overlay="goal-selection"] {
    --focus-backdrop-scrim: rgba(4, 10, 16, 0.44);
  }

  .participant-shell--details-picker
    > .split-stage
    .stage-media-shell:not([data-ready="true"]):not([data-route-handoff="true"])
    ~ .focus-backdrop[data-stage-overlay="goal-selection"]
    .focus-backdrop__scrim {
    opacity: 0;
    transition-delay: 0ms;
  }

  .participant-shell--watch .watch-panel .panel-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  @media (max-width: 22rem) {
    .participant-shell--watch > .watch-panel {
      --adaptive-content-width: 100%;
      --accordion-body-size: clamp(0.98rem, calc(0.88rem + 0.42vw), 1.08rem);
      --accordion-body-line-height: 1.32;
      --button-font-size: clamp(0.82rem, calc(0.72rem + 0.42vw), 0.9rem);
      --button-min-height: clamp(2.05rem, 4.5svh, 2.35rem);
      --button-padding-block: clamp(0.24rem, 0.58svh, 0.36rem);
      --button-padding-inline: clamp(0.5rem, 2.1vw, 0.78rem);
      --button-group-gap: clamp(0.4rem, 1.35vw, 0.58rem);
      --split-base-gap: clamp(0.46rem, 1.2svh, 0.68rem);
      --split-content-actions-gap: clamp(0.46rem, 1.05svh, 0.62rem);
      --watch-panel-narrow-edge-start: clamp(0.42rem, 0.9svh, 0.58rem);
      --watch-panel-narrow-edge-end: max(var(--safe-area-bottom), clamp(0.42rem, 0.9svh, 0.58rem));

      grid-template-rows:
        var(--watch-panel-narrow-edge-start)
        minmax(0, 1fr)
        var(--watch-panel-narrow-edge-end);
      padding-inline: max(var(--safe-area-left), clamp(0.95rem, 4.2vw, 1.25rem))
        max(var(--safe-area-right), clamp(0.95rem, 4.2vw, 1.25rem));
    }

    .participant-shell--watch .watch-panel .panel-scroll {
      --adaptive-content-width: 100%;

      align-self: stretch;
      align-content: center;
      justify-items: stretch;
      width: 100%;
      height: 100%;
      max-height: 100%;
      overflow: visible;
    }

    .participant-shell--watch .watch-panel .panel-copy,
    .participant-shell--watch .watch-panel .lesson-description,
    .participant-shell--watch .watch-panel .lesson-description p {
      max-width: 100%;
    }

    .participant-shell--watch .watch-panel .panel-copy,
    .participant-shell--watch .watch-panel .lesson-description {
      gap: var(--split-base-gap);
    }

    .participant-shell--watch .watch-panel .watch-series-title {
      line-height: 1.16;
    }

    .participant-shell--watch .watch-panel .lesson-tabs {
      --button-font-size: inherit;
      --button-min-height: inherit;
      --button-padding-block: inherit;
      --button-padding-inline: inherit;
      --button-group-gap: inherit;
      gap: var(--button-group-gap);
    }

    .participant-shell--watch .watch-panel .lesson-tab {
      line-height: 1.12;
    }
  }

  .participant-shell--watch .watch-panel .panel-scroll > .review-gate-controls,
  .participant-shell--watch .watch-panel .panel-scroll > .watch-series-nav,
  .participant-shell--watch .watch-panel .panel-scroll > .lesson-accordion,
  .participant-shell--watch .watch-panel .panel-scroll > .lesson-tabs {
    margin-top: 0;
  }

  .participant-shell--watch .panel-copy {
    width: min(100%, var(--watch-copy-measure, 38ch));
    max-width: min(100%, var(--watch-copy-measure, 38ch));
    align-items: start;
    text-align: left;
  }

  .participant-shell--watch[data-watch-copy="typed"] .watch-series-title {
    margin: 0;
  }

  .participant-shell--watch[data-watch-copy="typed"] .panel-copy {
    gap: var(--split-base-gap);
  }

  .participant-shell--watch[data-watch-copy="typed"] .lesson-description p {
    font-size: calc(var(--accordion-body-size, var(--type-small)) * var(--scale-accordion-body));
  }

  .lesson-description {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin: 0;
  }

  .participant-shell--watch .lesson-description {
    width: 100%;
    margin-inline: auto;
    justify-items: start;
  }

  .lesson-description p {
    max-width: var(--accordion-copy-measure);
    margin: 0;
    color: var(--text-strong);
    font-size: var(--accordion-body-size, var(--type-small));
    line-height: var(--accordion-body-line-height, var(--leading-comfort));
    text-align: left;
    text-wrap: pretty;
  }

  .participant-shell--watch .lesson-description p {
    max-width: var(--watch-copy-measure, 38ch);
    margin-inline: 0;
    text-align: left;
  }

  .participant-shell--watch .watch-panel .panel-scroll > .lesson-tabs,
  .participant-shell--watch .watch-panel .panel-scroll > .lesson-accordion,
  .participant-shell--watch .watch-panel .panel-scroll > .panel-copy {
    justify-self: center;
  }

  @container adaptive-surface (max-width: var(--container-query-wide)) {
    .watch-panel .lesson-accordion-trigger {
      font-size: calc(var(--accordion-title-size-compact) * var(--accordion-scale, 1));
    }

    .watch-panel .lesson-accordion-body p {
      font-size: calc(var(--accordion-body-size-compact) * var(--accordion-scale, 1));
    }
  }

  @container adaptive-surface (min-width: var(--container-query-wide)) {
    .watch-panel .lesson-accordion {
      --accordion-row-padding-factor: var(--scale-meta-loosen);
    }

    .watch-panel .lesson-accordion-trigger {
      font-size: calc(var(--accordion-title-size) * var(--accordion-scale, 1));
    }

    .watch-panel .lesson-accordion-body p {
      font-size: calc(var(--accordion-body-size) * var(--accordion-scale, 1));
    }
  }

  .participant-shell--plus.participant-shell--legacy-course .legacy-course-section-frame > .lesson-accordion {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .participant-shell--legacy-course .lesson-accordion-body,
  .participant-shell--legacy-course .lesson-accordion-body > .legacy-course-after {
    gap: var(--accordion-paragraph-gap);
  }

  .participant-shell--legacy-course .legacy-course-video-leading {
    gap: var(--layout-list-gap);
  }

  .participant-shell--watch > .panel-footer {
    pointer-events: none;
  }

  .participant-shell--watch > .panel-footer::after {
    content: none;
    display: none;
  }

  .participant-shell--watch > .panel-footer > :nth-child(1) {
    justify-self: center;
  }

  .lesson-tab {
    width: var(--button-width);
    min-width: var(--button-min-width);
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border-radius: var(--button-radius);
    border: var(--button-border);
    color: var(--text-soft);
    background: transparent;
  }

  .lesson-tab:hover {
    color: var(--text);
    border-color: var(--button-border-hover);
  }

  .watch-series-nav {
    --watch-series-nav-gap: var(--layout-watch-series-nav-gap);
    --watch-series-button-padding-block: var(--layout-watch-series-button-padding-block);
    --watch-series-button-padding-inline: var(--layout-watch-series-button-padding-inline);
    width: 100%;
    max-width: var(--container-nav-compact-local);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--watch-series-nav-gap);
    margin-inline: auto;
  }

  .watch-series-copy {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
  }

  .watch-series-title {
    color: var(--text);
    font-size: var(--type-body-large);
    font-weight: 700;
    line-height: var(--lh-relaxed);
    text-wrap: balance;
  }

  .watch-series-button {
    width: auto;
    height: auto;
    padding: var(--watch-series-button-padding-block) var(--watch-series-button-padding-inline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 0;
    color: var(--text-soft);
    transition:
      color var(--dur) var(--ease),
      opacity var(--dur) var(--ease);
  }

  .watch-series-button:hover {
    color: var(--text);
    opacity: 0.9;
  }

  .participant-shell--note-focus {
    grid-template-columns: 1fr;
  }

  .watch-top-links .auth-chat-link .stage-profile-icon {
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
  }

  .watch-top-links .auth-chat-link {
    width: var(--auth-top-link-icon-size);
  }

  .watch-top-links .auth-feed-link .stage-profile-icon {
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
  }

  .watch-top-links .auth-feed-link {
    width: var(--auth-top-link-icon-size);
  }

  .note-focus-stage {
    position: relative;
    min-height: 100dvh;
    background: var(--surface-canvas);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: center;
    padding-block: 0;
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  }

  .note-focus-card {
    grid-row: 2;
    width: 100%;
    max-width: var(--container-note-focus);
    margin: 0 auto;
  }

  .note-focus-content {
    display: grid;
    gap: var(--space-4);
    text-align: center;
  }

  .note-focus-content h1 {
    color: var(--text);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    text-wrap: balance;
  }

  .note-focus-content p {
    color: var(--text-soft);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    text-wrap: pretty;
  }

  .note-focus-footer {
    pointer-events: none;
  }

}

@layer lifeos.overrides {
  /* Window browse stacked sheet: +32% rails; matched inset above copy and below buttons. */
  .window-browse-stage.participant-shell--window > .panel .panel-main-stack {
    width: min(
      var(--window-summary-measure, var(--copy-width)),
      var(--window-summary-bound, 100%)
    );
    max-width: min(
      var(--window-summary-measure, var(--copy-width)),
      var(--window-summary-bound, 100%)
    );
  }

  .window-browse-stage.participant-shell--window > .panel .panel-main-stack .panel-copy,
  .window-browse-stage.participant-shell--window
    > .panel
    .panel-main-stack
    .panel-summary-stack {
    width: 100%;
    max-width: 100%;
  }

  @media (max-width: 63.999rem) {
    .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
      --window-browse-panel-rail: calc(
        var(--split-media-gap) * var(--scale-dialog-inline) * var(--scale-meta-tight)
      );
      --window-browse-panel-bottom-rail: max(
        calc(var(--window-browse-panel-rail) * 1.55),
        calc(var(--safe-area-bottom) + var(--window-browse-panel-rail)),
        calc(0px + var(--window-browse-panel-rail))
      );
      grid-template-rows: auto;
      max-height: none;
      padding-block: 0;
      padding-block-start: var(--window-browse-panel-rail);
      padding-block-end: var(--window-browse-panel-bottom-rail);
      overflow: visible;
      overflow-x: clip;
    }

    .window-browse-stage.participant-shell--window > .panel .panel-main-stack {
      grid-template-rows:
        auto
        calc(
          var(--split-detail-actions-gap) * var(--window-panel-scale) *
            var(--scale-dialog-inline) * var(--scale-meta-tight)
        )
        auto;
    }

    .window-browse-stage.participant-shell--window > .panel .panel-footer-actions {
      overflow: visible;
      padding-block-end: calc(var(--divider-width) + var(--line-width-thin));
    }
  }

  @container adaptive-surface (max-width: 63.999rem) {
    .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
      --window-browse-panel-rail: calc(
        var(--split-media-gap) * var(--scale-dialog-inline) * var(--scale-meta-tight)
      );
      --window-browse-panel-bottom-rail: max(
        calc(var(--window-browse-panel-rail) * 1.55),
        calc(var(--safe-area-bottom) + var(--window-browse-panel-rail)),
        calc(0px + var(--window-browse-panel-rail))
      );
      grid-template-rows: auto;
      max-height: none;
      padding-block: 0;
      padding-block-start: var(--window-browse-panel-rail);
      padding-block-end: var(--window-browse-panel-bottom-rail);
      overflow: visible;
      overflow-x: clip;
    }

    .window-browse-stage.participant-shell--window > .panel .panel-main-stack {
      grid-template-rows:
        auto
        calc(
          var(--split-detail-actions-gap) * var(--window-panel-scale) *
            var(--scale-dialog-inline) * var(--scale-meta-tight)
        )
        auto;
    }

    .window-browse-stage.participant-shell--window > .panel .panel-footer-actions {
      overflow: visible;
      padding-block-end: calc(var(--divider-width) + var(--line-width-thin));
    }
  }

  @media (max-width: 40rem) {
    .window-browse-stage.participant-shell--window > .panel .panel-main-stack {
      --window-summary-measure: min(90vw, 38rem);
      width: var(--window-summary-measure);
      max-width: var(--window-summary-measure);
    }
  }
}

/* Watch split content stack — same column + tag tabs on every viewport (unlayered). */
.participant-shell--watch:not([data-watch-layout="panel-focus"]) {
  --watch-sheet-fit-scale: 1;
  --watch-sheet-tab-scale: 0.85;
  --watch-sheet-tab-block-scale: 0.968;
  --watch-sheet-body-size: calc(
    var(--adaptive-copy-size, var(--accordion-body-size, var(--type-small)))
      * var(--watch-sheet-fit-scale, 1)
  );
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
    .participant-shell--review-gate-broadcast
  )
  .watch-sheet-body {
  display: contents;
}

.participant-shell--watch.participant-shell--review-gate-broadcast .watch-sheet-body--review-gate-chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) > .lesson-stage,
.participant-shell--watch:not([data-watch-layout="panel-focus"]) > .watch-panel,
.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-card[data-watch-card="stage"],
.participant-shell--watch:not([data-watch-layout="panel-focus"]) .kinescope-embed-frame {
  background: #000;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
    .participant-shell--review-gate-broadcast
  )
  > .watch-panel {
  --watch-sheet-copy-gap: calc(var(--split-base-gap) * 2);
  --watch-sheet-top-gap: calc(var(--split-base-gap) * 4);
  --watch-sheet-bottom-gap: calc(var(--split-base-gap) * 5);
  --watch-sheet-bottom-safe-gap: calc(
    var(--watch-sheet-bottom-gap) + var(--safe-area-bottom, 0px)
  );

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  grid-template-rows: none;
  overflow: hidden;
  padding-inline: max(var(--panel-safe-gutter-start), var(--panel-safe-gutter-end));
  padding-block: 0;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
    .participant-shell--review-gate-broadcast
  )
  > .watch-panel
  > .panel-scroll.split-content-stack {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  grid-row: auto;
  align-self: center;
  justify-self: auto;
  width: min(100%, var(--watch-copy-measure, 30ch), var(--container-watch));
  max-width: min(100%, var(--container-watch));
  min-width: 0;
  min-height: 0;
  height: auto;
  margin-inline: auto;
  padding-block-start: var(--watch-sheet-top-gap);
  padding-block-end: var(--watch-sheet-bottom-safe-gap);
  overflow: visible;
  gap: 0;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .watch-sheet-body > .panel-copy + .lesson-tabs {
  margin-top: var(--watch-sheet-copy-gap);
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .panel-scroll .panel-copy {
  flex: 0 0 auto;
  align-self: stretch;
  justify-content: flex-start;
  align-items: stretch;
  margin: 0;
  width: 100%;
  max-width: 100%;
  gap: var(--watch-sheet-copy-gap);
  text-align: left;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .panel-scroll > .lesson-tabs {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .panel-scroll > :is(
    .panel-copy,
    .lesson-accordion,
    .watch-series-nav,
    .review-gate-controls
  ) {
  width: 100%;
  max-width: 100%;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .panel-copy,
.participant-shell--watch:not([data-watch-layout="panel-focus"])[data-watch-copy="typed"] .panel-copy {
  gap: var(--watch-sheet-copy-gap);
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .watch-series-title {
  width: 100%;
  max-width: none;
  font-size: calc(var(--adaptive-copy-size) * var(--watch-sheet-fit-scale, 1));
  line-height: 1.12;
  text-align: left;
  text-wrap: wrap;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .watch-series-title .text-shimmer {
  --text-shimmer-base: rgba(255, 255, 255, 0.65);
  --text-shimmer-glow: rgba(232, 240, 255, 0.98);
  --text-shimmer-bright: rgba(255, 255, 255, 1);

  font-weight: inherit;
  line-height: inherit;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-description {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: visible;
  justify-items: stretch;
  gap: var(--watch-sheet-copy-gap);
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-description p {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  font-size: var(--watch-sheet-body-size);
  line-height: 1.32;
  text-align: left;
  text-wrap: wrap;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-tabs {
  --button-width: auto;
  --button-min-width: 0;
  --button-max-width: none;
  --button-min-height: 0;
  --button-group-gap: calc(
    var(--layout-base-gap) * var(--watch-sheet-tab-scale, 1)
  );

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  row-gap: calc(var(--split-base-gap) * var(--watch-sheet-tab-scale, 1));
  column-gap: var(--button-group-gap);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-bottom: 0;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-tab {
  flex: 1 1 calc(50% - var(--button-group-gap) / 2);
  width: auto;
  max-width: calc(50% - var(--button-group-gap) / 2);
  min-width: calc(50% - var(--button-group-gap) / 2);
  min-height: 0;
  text-align: center;
  white-space: nowrap;
  padding-block: calc(
    var(--button-padding-block) * var(--watch-sheet-tab-scale, 1) *
      var(--watch-sheet-tab-block-scale, 1)
  );
  padding-inline: calc(var(--button-padding-inline) * var(--watch-sheet-tab-scale, 1));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(var(--watch-sheet-body-size) * var(--watch-sheet-tab-scale, 1));
  font-weight: 400;
  line-height: calc(1.32 * var(--watch-sheet-tab-block-scale, 1));
  box-shadow: none;
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-tab[data-current="true"] {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
}

.participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel .lesson-tab:hover {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-strong);
  box-shadow: none;
}

/* Narrow watch sheet: stacked shell + native panel scrolling (unlayered). */
@media (max-width: 63.999rem) {
  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    ) {
    --watch-sheet-min-stage: max(12rem, 28svh);
    --watch-sheet-stage-min: var(--watch-sheet-min-stage);
    --watch-sheet-panel-max-block: calc(
      100dvh -
        var(--watch-sheet-stage-min)
    );

    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .lesson-stage {
    flex: 1 1 0;
    order: 1;
    width: 100%;
    height: auto;
    min-height: var(--watch-sheet-stage-min);
    max-height: none;
  }

  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .panel-footer {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-float);
    pointer-events: none;
  }

  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .watch-panel {
    flex: 0 1 max-content;
    order: 2;
    container-type: inline-size;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: max-content;
    min-height: min(12rem, var(--watch-sheet-panel-max-block));
    max-height: var(--watch-sheet-panel-max-block);
    padding-inline: max(var(--panel-safe-gutter-start), var(--panel-safe-gutter-end));
  }

  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .watch-panel
    > .panel-scroll.split-content-stack {
    flex: 0 1 auto;
    align-items: stretch;
    max-height: var(--watch-sheet-panel-max-block);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Review-broadcast: full viewport 50/50 split with safe-area insets (unlayered). */
  .participant-shell--watch.participant-shell--review-gate-broadcast:not([data-watch-layout="panel-focus"]) {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding-block: var(--safe-area-top) var(--safe-area-bottom);
    padding-inline: var(--safe-area-left) var(--safe-area-right);
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    justify-self: end;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links a {
    pointer-events: auto;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast > .lesson-stage {
    grid-row: 1;
    grid-column: 1;
    order: unset;
    flex: unset;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: 100%;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast
    > .watch-panel.watch-panel--review-gate-broadcast {
    grid-row: 2;
    grid-column: 1;
    order: unset;
    flex: unset;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
    container-type: normal;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: 100%;
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    padding-block: 0;
    overflow: hidden;
    background: var(--page, #050505);
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast
    > .watch-panel.watch-panel--review-gate-broadcast
    > .panel-scroll.panel-scroll--review-gate-chat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
    justify-self: stretch;
    grid-row: 1;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    min-height: 0;
    margin-inline: 0;
    padding-block: 0;
    overflow: hidden;
    gap: 0;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast [data-e2e="review-gate"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: #000;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast > .panel-footer {
    position: absolute;
    inset-inline: 0;
    bottom: var(--safe-area-bottom);
    z-index: var(--z-float);
    pointer-events: none;
  }
}

@media (max-width: 29.999rem) {
  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .watch-panel {
    --watch-copy-measure: 100%;
  }

  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
    .participant-shell--review-gate-broadcast
  )
  > .watch-panel
  > .panel-scroll.split-content-stack {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 64rem) {
  .participant-shell--watch:not([data-watch-layout="panel-focus"]):not(
      .participant-shell--review-gate-broadcast
    )
    > .watch-panel {
    justify-content: center;
  }
}