/* Generated window and watch styles. Requires site.css tokens and #root app variables. */

/* @lifeos-css-tier browse:start window-browse */
.window-browse-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--home-viewport-height);
  min-height: var(--home-viewport-height);
  max-height: var(--home-viewport-height);
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scrollbar-gutter: stable both-edges;
  background: var(--surface-canvas);
}

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

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

.window-browse-stage[aria-hidden="true"] {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--home-viewport-height);
}

.window-browse-stage[aria-hidden="true"] .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(--home-viewport-height);
}

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

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

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

@media (max-width: 63.99rem) {
  .window-browse-stage > .panel.split-screen-panel > .split-panel__motion,
  .participant-shell--plus.participant-shell--window-details > .plus-sheet > .split-panel__motion {
    transform: none;
    transition: none;
  }
}

@media (min-width: 64rem) {
  .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* @lifeos-css-tier browse:end window-browse */

/* @lifeos-css-tier browse:start watch-lesson */
/* ==========================================================================
   Watch / lesson
   ========================================================================== */

.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 {
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
}

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

.watch-card--stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

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

.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(0.97);
}

.participant-shell--review-gate-only {
  display: grid;
  place-items: center;
  min-height: var(--viewport-height);
}

.review-gate-fullscreen {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(var(--adaptive-base-gap) * 2);
  width: 100%;
  min-height: var(--viewport-height);
  padding-block: max(var(--safe-area-top), var(--space-4))
    max(var(--safe-area-bottom), var(--space-4));
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
}

.review-gate-video {
  width: var(--watch-video-inline);
  aspect-ratio: 16 / 9;
  max-height: var(--watch-video-max-block);
}

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

.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);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--button-group-gap);
  margin-inline: 0;
}

.participant-shell--watch .lesson-tab {
  width: var(--button-width);
  min-width: var(--button-min-width);
  border-width: var(--divider-width);
  border-color: rgba(255, 255, 255, 0.46);
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--type-control);
  font-weight: 600;
  box-shadow: none;
}

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

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

@container adaptive-surface (max-width: 30rem) {
  .participant-shell--watch .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) * 0.75);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: min(100%, 38ch);
    margin-inline: auto;
  }

  .participant-shell--watch .lesson-tab {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--button-min-height) * 0.75);
    padding: calc(var(--button-padding-block) * 0.75) calc(var(--button-padding-inline) * 0.75);
    font-size: calc(var(--type-control) * 0.75);
  }
}

@media (max-width: 30rem) {
  .participant-shell--watch .lesson-tabs {
    --button-group-gap: calc(var(--layout-base-gap) * 0.75);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: min(100%, 38ch);
    margin-inline: auto;
  }

  .participant-shell--watch .lesson-tab {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--button-min-height) * 0.75);
    padding: calc(var(--button-padding-block) * 0.75) calc(var(--button-padding-inline) * 0.75);
    font-size: calc(var(--type-control) * 0.75);
  }
}

.participant-shell--watch .watch-panel .panel-scroll {
  grid-row: 2;
  flex: none;
  display: grid;
  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;
}

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

.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%, 38ch);
  max-width: min(100%, 38ch);
  align-items: start;
  text-align: left;
}

.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;
}

.lesson-accordion-body p {
  max-width: 100%;
  margin: 0;
  color: var(--text-strong);
  font-size: var(--accordion-body-size, var(--type-small));
  font-weight: 400;
  line-height: var(--accordion-body-line-height, var(--leading-comfort));
  letter-spacing: var(--tracking-none);
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.lesson-accordion-body li {
  font-size: var(--accordion-body-size, var(--type-small));
}

.participant-shell--watch .lesson-description p {
  max-width: 38ch;
  margin-inline: 0;
  text-align: left;
}

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

.accordion-column {
  width: min(var(--accordion-inline), 100%);
  max-width: var(--accordion-inline);
  min-width: 0;
  margin-inline: auto;
  justify-self: center;
  box-sizing: border-box;
}

:is(.accordion-column, .rules-copy, .group-offer-center) .lesson-accordion {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.lesson-accordion {
  --accordion-scale: 1;
  --accordion-row-padding-factor: 1.1;

  width: min(var(--accordion-inline), 100%);
  max-width: var(--accordion-inline);
  min-width: 0;
  display: grid;
  gap: 0;
  margin: 0 auto;
  border-top: 0;
  border-bottom: 0;
  box-sizing: border-box;
}

.lesson-accordion-item {
  min-width: 0;
  border-top: var(--divider-width) solid var(--accordion-border-color);
}

.lesson-accordion-item:first-child {
  border-top: 0;
}

.lesson-accordion-trigger {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--control-sm) * var(--accordion-scale, 1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--accordion-scale, 1));
  cursor: pointer;
  padding: calc(
      var(--accordion-row-padding-block) * var(--accordion-scale, 1) *
        var(--accordion-row-padding-factor, 1)
    )
    calc(var(--accordion-row-padding-inline) * var(--accordion-scale, 1));
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(var(--accordion-title-size) * var(--accordion-scale, 1));
  font-weight: var(--accordion-title-weight);
  line-height: var(--accordion-title-line-height);
  letter-spacing: var(--tracking-none);
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  transition: none;
}

.lesson-accordion-trigger-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lesson-accordion-trigger::after {
  content: "+";
  flex: 0 0 1em;
  display: inline-block;
  width: 1em;
  margin-left: calc(var(--space-3) * var(--accordion-scale, 1));
  color: var(--accordion-indicator-color);
  font-size: calc(var(--accordion-indicator-size) * var(--accordion-scale, 1));
  line-height: var(--leading-solid);
  text-align: center;
  transition: none;
}

.lesson-accordion-item[data-open="true"] .lesson-accordion-trigger::after {
  content: "−";
  color: var(--accordion-indicator-color);
  transform: none;
}

.lesson-accordion-item[data-open="true"] {
  border-color: var(--accordion-border-color-open);
}

.lesson-accordion-trigger:hover:not(:disabled) {
  background: transparent;
  opacity: 1;
}

.lesson-accordion-trigger:hover:not(:disabled)::after {
  color: var(--accordion-indicator-color);
}

.lesson-accordion-trigger:active:not(:disabled) {
  background: transparent;
  opacity: 1;
  transform: none;
}

.lesson-accordion-trigger:focus-visible {
  outline: var(--divider-width) solid var(--hairline-strong);
  outline-offset: var(--space-1);
}

.lesson-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lesson-accordion-item[data-open="true"] .lesson-accordion-panel {
  grid-template-rows: 1fr;
}

.lesson-accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.lesson-accordion-body {
  display: grid;
  gap: var(--accordion-paragraph-gap);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0 calc(var(--accordion-row-padding-inline) * var(--accordion-scale, 1))
    calc(var(--accordion-body-padding-block-end) * var(--accordion-scale, 1));
  box-sizing: border-box;
  color: var(--text-strong);
  justify-items: start;
  text-align: left;
}

@media (max-width: 63.99rem) {
  .lesson-accordion-trigger {
    font-size: var(--accordion-title-size-compact);
  }

  .lesson-accordion-body p {
    font-size: var(--accordion-body-size-compact);
  }
}

@media (min-width: 64rem) {
  .lesson-accordion {
    --accordion-row-padding-factor: 1.15;
  }

  .lesson-accordion-trigger {
    font-size: var(--accordion-title-size);
  }

  .lesson-accordion-body p {
    font-size: var(--accordion-body-size);
  }
}

.lesson-accordion-body ul {
  margin: 0;
  padding-left: calc(var(--list-indent) * var(--accordion-scale, 1));
  text-align: left;
}

.lesson-accordion-body li + li {
  margin-top: calc(var(--layout-list-gap) * var(--accordion-scale, 1));
}

.lesson-accordion-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
}

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

.participant-shell--watch > .panel-footer {
  display: contents;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.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);
}

.note-focus-stage {
  position: relative;
  min-height: var(--viewport-height);
  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: min(52rem, 100%);
  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 {
  display: contents;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* @lifeos-css-tier browse:end watch-lesson */