/* ==========================================================================
   Premium visual layer
   Loaded after styles.css. Typography, colour, gradients, and shadows,
   plus the card treatment for the Monthly intentions workspace.
   The entry ritual and the circular session portal are intentionally left
   untouched (see the scoped reset at the end of the typography section).
   ========================================================================== */

:root {
  --font-body: "General Sans", "Satoshi", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Clash Display", "General Sans", "Satoshi", "Avenir Next", sans-serif;
  --font-original: "Satoshi", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --ink: #1c2b23;
  --muted: #55645b; /* ≥ 4.5:1 on the light surfaces */
  --moss-dark: #435b48;
  --line: rgba(38, 60, 46, 0.1);

  --grad-surface: linear-gradient(160deg, rgba(253, 254, 250, 0.94) 0%, rgba(244, 248, 240, 0.86) 55%, rgba(236, 243, 233, 0.82) 100%);
  --grad-surface-warm: linear-gradient(155deg, rgba(254, 252, 245, 0.95) 0%, rgba(246, 247, 238, 0.88) 50%, rgba(235, 242, 231, 0.84) 100%);
  --grad-ink: linear-gradient(140deg, #34503f 0%, #243a2e 48%, #18261e 100%);
  --grad-ink-hover: linear-gradient(140deg, #3b5a47 0%, #28412f 48%, #1a2a21 100%);
  --grad-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.46));
  --grad-sun: linear-gradient(135deg, #f7dc98 0%, #eec46f 100%);
  --hairline: rgba(255, 255, 255, 0.78);
  --shadow: 0 1px 2px rgba(38, 58, 45, 0.04), 0 12px 32px rgba(46, 70, 54, 0.06), 0 40px 90px rgba(46, 70, 54, 0.07);
  --shadow-card: 0 1px 2px rgba(38, 58, 45, 0.03), 0 18px 48px rgba(46, 70, 54, 0.06);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "ss02";
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1100px 620px at 12% 0%, rgba(246, 226, 182, 0.22), transparent 60%),
    radial-gradient(900px 700px at 100% 40%, rgba(176, 207, 206, 0.16), transparent 62%),
    linear-gradient(180deg, #e9f0e5 0%, #e3ebdf 100%);
  background-attachment: fixed;
}

:is(h1, h2, h3):not(#_):where(:not(.entry *, .session-shell *)) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  word-spacing: 0.04em;
  font-feature-settings: "ss01";
}

.hero h1:not(#_) {
  letter-spacing: -0.028em;
  line-height: 0.96;
}

.onboarding h1:not(#_) {
  letter-spacing: -0.028em;
}

/* Clash Display runs wider than Satoshi; keep the welcome title on one line */
.auth-card h1:not(#_) {
  font-size: clamp(40px, 6.4vw, 52px);
  letter-spacing: -0.035em;
}

/* Previously serif accents: now a stylised sans to match the system */
.guidance-card h3:not(#_) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.hero-affirmation q,
.affirmation-item > p,
.affirmation-composer input {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.eyebrow,
.card-kicker,
.guidance-card__kind,
.hero-affirmation span,
.live-session-pill__copy small,
.onboarding__step-label {
  letter-spacing: 0.12em;
}

.card-kicker {
  color: #6f8471;
  font-weight: 600;
  font-size: 12px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: rgba(28, 43, 35, 0.66);
}

.hero__subtitle {
  font-weight: 400;
  letter-spacing: -0.005em;
}

.auth-card__brand,
.onboarding__brand {
  font-family: var(--font-display);
  font-weight: 500;
}

/* Keep the entry ritual and circular session portal exactly as they were */
.entry,
.session-shell {
  --ink: #203027;
  --muted: #55645b;
  --moss-dark: #49604d;
  --line: rgba(42, 63, 50, 0.11);
  font-family: var(--font-original);
  font-feature-settings: normal;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.primary-button,
.onboarding-primary {
  background: var(--grad-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(28, 43, 35, 0.18),
    0 2px 4px rgba(28, 43, 35, 0.12);
  letter-spacing: 0.005em;
}

.primary-button:hover {
  background: var(--grad-ink-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 16px 32px rgba(28, 43, 35, 0.22),
    0 3px 6px rgba(28, 43, 35, 0.12);
}

.secondary-button,
.soft-button,
.guidance-refresh,
.carousel-arrow {
  border-color: rgba(38, 60, 46, 0.1);
  background: var(--grad-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(46, 70, 54, 0.05);
}

.secondary-button:hover,
.soft-button:hover {
  background: linear-gradient(160deg, #ffffff, rgba(255, 255, 255, 0.82));
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(46, 70, 54, 0.08);
}

.google-signin-button {
  background: linear-gradient(180deg, #ffffff, #f7f9f5);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(32, 48, 39, 0.07);
}

.guidance-card__action,
.subtask-adder button {
  background: var(--grad-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(28, 43, 35, 0.16);
}

.guidance-card__action:hover {
  background: var(--grad-ink-hover);
}

.avatar-button,
.profile-identity__avatar,
.mobile-more-action__avatar {
  background: var(--grad-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(28, 43, 35, 0.18);
}

.icon-button__badge {
  background: var(--grad-sun);
}

/* --------------------------------------------------------------------------
   Glass controls in the hero
   -------------------------------------------------------------------------- */

.live-session-pill,
.icon-nav {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.52), rgba(248, 251, 245, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 24px rgba(40, 60, 46, 0.06);
}

.hero-affirmation {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(248, 250, 242, 0.38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 30px rgba(40, 60, 46, 0.07);
}

.hero-affirmation:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 242, 0.56));
}

.icon-nav [data-tooltip]::after,
.icon-nav [data-tooltip]::before,
.toast {
  background: linear-gradient(150deg, rgba(44, 66, 53, 0.96), rgba(24, 38, 30, 0.96));
}

/* --------------------------------------------------------------------------
   Surfaces: cards, sheets, dialogs
   -------------------------------------------------------------------------- */

.ritual-card,
.reflection {
  border-color: var(--hairline);
  background: var(--grad-surface);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.ritual-card--primary {
  border-color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 88% 16%, rgba(246, 222, 172, 0.42), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(186, 214, 203, 0.2), transparent 45%),
    var(--grad-surface-warm);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.ritual-card--combined .weekly-rhythm--embedded {
  background: linear-gradient(180deg, rgba(234, 242, 230, 0.5), rgba(226, 237, 223, 0.42));
}

.weekly-rhythm {
  border-color: var(--hairline);
  background: var(--grad-surface);
}

.week-day.is-selected {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
}

.monthly-intentions-card {
  background:
    radial-gradient(circle at 92% 4%, rgba(238, 203, 125, 0.2), transparent 30%),
    var(--grad-surface);
}

.guidance-carousel {
  border-color: var(--hairline);
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 199, 230, 0.16), transparent 34%),
    var(--grad-surface);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.guidance-card {
  box-shadow:
    0 18px 40px rgba(40, 59, 46, 0.09),
    0 2px 6px rgba(40, 59, 46, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.card-icon {
  background: linear-gradient(150deg, rgba(196, 222, 222, 0.55), rgba(170, 203, 205, 0.25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.card-icon--leaf {
  background: linear-gradient(150deg, rgba(206, 224, 196, 0.6), rgba(181, 203, 170, 0.28));
}

.auth-card {
  border-color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(160deg, rgba(252, 253, 249, 0.9), rgba(242, 246, 238, 0.8));
  box-shadow: 0 2px 6px rgba(28, 42, 33, 0.04), 0 30px 90px rgba(28, 42, 33, 0.16), inset 0 1px 0 #fff;
}

.onboarding__shell {
  background: linear-gradient(160deg, rgba(252, 253, 249, 0.9), rgba(242, 246, 238, 0.82));
  box-shadow: 0 2px 6px rgba(35, 53, 41, 0.04), 0 34px 100px rgba(35, 53, 41, 0.14), inset 0 1px 0 #fff;
}

.onboarding__progress span {
  background: linear-gradient(90deg, #8aa38a, #5d7862);
}

.dialog__panel {
  background: linear-gradient(165deg, #fbfcf8 0%, #f4f7f0 60%, #eef3ea 100%);
  box-shadow: 0 2px 6px rgba(29, 46, 35, 0.04), 0 34px 100px rgba(29, 46, 35, 0.2), inset 0 1px 0 #fff;
}

.side-sheet__panel {
  background: linear-gradient(170deg, rgba(251, 252, 248, 0.98) 0%, rgba(242, 246, 238, 0.97) 100%);
}

.workspace-page {
  background:
    radial-gradient(circle at 80% 4%, rgba(242, 201, 121, 0.2), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(170, 203, 205, 0.18), transparent 40%),
    linear-gradient(145deg, #eff4eb, #e1ebe0 72%);
}

.mobile-bottom-nav {
  background: linear-gradient(170deg, rgba(251, 252, 248, 0.94), rgba(240, 245, 236, 0.9));
}

/* Progress fills */
.month-progress__track i,
.ocr-progress i {
  background: linear-gradient(90deg, #7c967d, var(--moss-dark));
}

.streak-week span.is-today,
.subtask-check:checked {
  background: linear-gradient(145deg, #57735c, #3a5140);
}

/* --------------------------------------------------------------------------
   Monthly intentions workspace
   -------------------------------------------------------------------------- */

#intentions-workspace .workspace-topbar {
  border-bottom-color: rgba(38, 60, 46, 0.08);
}

#intentions-workspace .workspace-layout {
  gap: clamp(22px, 3vw, 36px);
  padding-top: 32px;
}

#intentions-workspace .workspace-sidebar,
#intentions-workspace .monthly-affirmations,
#intentions-workspace .intention-block,
#intentions-workspace .intention-composer,
#intentions-workspace .intention-sources {
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--grad-surface);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Sidebar: a quiet month card */
#intentions-workspace .workspace-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 22px 22px 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 222, 172, 0.36), transparent 55%),
    var(--grad-surface-warm);
}

#intentions-workspace .month-stepper {
  grid-template-columns: 38px 1fr 38px;
  padding: 5px;
  border: 1px solid rgba(38, 60, 46, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

#intentions-workspace .month-stepper button {
  width: 38px;
  height: 38px;
  border: 0;
  background: linear-gradient(160deg, #ffffff, rgba(255, 255, 255, 0.7));
  box-shadow: 0 2px 8px rgba(46, 70, 54, 0.08);
  color: var(--ink);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#intentions-workspace .month-stepper button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(46, 70, 54, 0.12);
}

#intentions-workspace .month-stepper h3:not(#_) {
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#intentions-workspace .month-progress {
  margin-top: 30px;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(222, 234, 219, 0.7), rgba(236, 242, 232, 0.4));
}

#intentions-workspace .month-progress strong {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

#intentions-workspace .month-progress span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

#intentions-workspace .month-progress__track {
  height: 6px;
  margin-top: 18px;
  background: rgba(38, 60, 46, 0.08);
}

#intentions-workspace .month-progress__track i {
  border-radius: inherit;
}

#intentions-workspace .workspace-sidebar > p {
  margin: 22px 4px 0;
  font-size: 13px;
  line-height: 1.65;
}

/* Main column */
#intentions-workspace .workspace-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 0;
}

#intentions-workspace .monthly-affirmations {
  margin: 0;
  padding: 26px 28px 24px;
}

#intentions-workspace .monthly-affirmations__heading {
  align-items: flex-end;
}

#intentions-workspace .monthly-affirmations__heading h3:not(#_) {
  font-size: 26px;
}

#intentions-workspace .affirmation-composer {
  align-items: center;
  margin-top: 20px;
  padding: 6px 6px 6px 20px;
  border: 1px solid rgba(38, 60, 46, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 2px rgba(38, 60, 46, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#intentions-workspace .affirmation-composer:focus-within {
  border-color: rgba(67, 91, 72, 0.32);
  box-shadow: 0 0 0 4px rgba(84, 112, 90, 0.08);
}

#intentions-workspace .affirmation-composer input {
  border: 0;
  padding: 10px 0;
  font-size: 16px;
}

#intentions-workspace .affirmation-composer .soft-button {
  min-height: 44px;
  border: 0;
  background: var(--grad-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px rgba(28, 43, 35, 0.16);
  color: #f9fbf7;
}

#intentions-workspace .affirmation-list {
  gap: 10px;
  margin-top: 16px;
}

#intentions-workspace .affirmation-list__empty {
  margin: 2px 4px 0;
  font-size: 13px;
}

#intentions-workspace .affirmation-item {
  padding: 16px 18px;
  border: 1px solid rgba(38, 60, 46, 0.07);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(247, 249, 243, 0.6));
}

#intentions-workspace .affirmation-item.is-featured {
  border-color: rgba(201, 152, 72, 0.3);
  background: linear-gradient(150deg, rgba(252, 243, 219, 0.9), rgba(247, 249, 241, 0.7));
}

/* Intentions list */
#intentions-workspace .intention-composer {
  margin: 0;
  padding: 24px 26px;
}

#intentions-workspace .intention-composer input,
#intentions-workspace .intention-composer textarea {
  border: 1px solid rgba(38, 60, 46, 0.09);
  background: rgba(255, 255, 255, 0.72);
}

#intentions-workspace .intention-sources {
  margin: 0;
  padding: 24px 26px;
}

#intentions-workspace .intention-block {
  overflow: hidden;
}

#intentions-workspace .workspace-section-heading {
  padding: 18px 28px 14px 76px;
  border-bottom: 1px solid rgba(38, 60, 46, 0.08);
  background: rgba(236, 243, 233, 0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

#intentions-workspace .intention-item {
  padding: 24px 28px;
  border-bottom-color: rgba(38, 60, 46, 0.07);
  transition: background 180ms ease;
}

#intentions-workspace .intention-item:last-child {
  border-bottom: 0;
}

#intentions-workspace .intention-item:hover {
  background: rgba(255, 255, 255, 0.45);
}

#intentions-workspace .intention-item__title:not(#_) {
  font-size: 21px;
}

#intentions-workspace .intention-item__progress {
  justify-self: end;
  align-self: start;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(84, 112, 90, 0.09);
  color: var(--moss-dark);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

#intentions-workspace .intention-check,
#intentions-workspace .subtask-check {
  border: 1.5px solid rgba(38, 60, 46, 0.26);
  background: #fff;
}

#intentions-workspace .intention-check:checked,
#intentions-workspace .subtask-check:checked {
  border-color: transparent;
  background: linear-gradient(145deg, #6a856d, #435b48);
}

#intentions-workspace .add-subtask {
  font-weight: 500;
}

#intentions-workspace .workspace-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 28px 60px;
  border: 0;
  text-align: center;
}

#intentions-workspace .workspace-empty::before {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff8cc 0 11%, #efcf78 44%, #9b8248 100%);
  box-shadow: 0 10px 30px rgba(141, 112, 45, 0.2), 0 0 0 16px rgba(241, 216, 148, 0.1), 0 0 0 34px rgba(241, 216, 148, 0.05);
  content: "";
}

#intentions-workspace .workspace-empty h3:not(#_) {
  font-size: 26px;
}

#intentions-workspace .workspace-empty p {
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.6;
}

#intentions-workspace .workspace-empty__action {
  margin-top: 24px;
}

@media (max-width: 800px) {
  #intentions-workspace .workspace-layout { gap: 16px; padding-top: 20px; }
  #intentions-workspace .workspace-sidebar { position: static; padding: 20px; border-bottom: 1px solid var(--hairline); }
  #intentions-workspace .workspace-sidebar .month-progress { margin-top: 0; }
  #intentions-workspace .workspace-sidebar > p { margin: 0; }
  #intentions-workspace .workspace-main { gap: 16px; }
}

@media (max-width: 560px) {
  #intentions-workspace .workspace-sidebar .month-progress { margin-top: 18px; }
  #intentions-workspace .workspace-sidebar > p { margin-top: 18px; }
  #intentions-workspace .monthly-affirmations { padding: 22px 18px 20px; border-radius: 24px; }
  #intentions-workspace .monthly-affirmations__heading { align-items: flex-start; }
  #intentions-workspace .affirmation-composer { padding: 6px; border-radius: 20px; }
  #intentions-workspace .affirmation-composer input { padding: 8px 12px; }
  #intentions-workspace .intention-item { padding: 20px 18px; }
  #intentions-workspace .intention-item__progress { justify-self: start; }
  #intentions-workspace .intention-block,
  #intentions-workspace .workspace-sidebar { border-radius: 24px; }
}

.auth-card__brand { margin-right: 12px; }

/* Auth card: refined header, eyebrow and title */
.auth-card__header {
  display: flex;
  align-items: center;
  margin: -2px -34px 34px;
  padding: 0 34px 22px;
  border-bottom: 1px solid rgba(38, 60, 46, 0.08);
}
.auth-card__header .auth-card__brand {
  margin: 0;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.auth-card__header .auth-card__brand span { width: 18px; height: 18px; }

.auth-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #7a8c7d;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.auth-card__eyebrow::before {
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  content: "";
}

.auth-card h1:not(#_) {
  margin: 16px 0 14px;
  font-size: clamp(34px, 5.4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.auth-card__title-accent {
  display: block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  font-weight: 500;
  background: linear-gradient(120deg, #2f4a3a 0%, #5d7a62 60%, #8a9f7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-card > p:not(.auth-status) { font-size: 15px; line-height: 1.6; }

@media (max-width: 560px) {
  .auth-card__header { margin: -2px -22px 28px; padding: 0 22px 18px; }
  .auth-card h1:not(#_) { font-size: 34px; }
}

/* Recording player: full-screen portal ------------------------------------ */
.dialog.dialog--player:not(#_) {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
}
.dialog--player::backdrop { background: transparent; backdrop-filter: none; }

.dialog--player .player-portal:not(#_) {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(239, 209, 119, 0.16), transparent 65%),
    radial-gradient(700px 500px at 100% 100%, rgba(120, 160, 140, 0.18), transparent 70%),
    linear-gradient(160deg, #18261e 0%, #101a15 60%, #0b120e 100%);
  box-shadow: none;
  color: #f3f1e8;
  will-change: clip-path;
}

.player-portal__ring {
  position: absolute;
  z-index: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 186, 0.55) 0%, rgba(239, 209, 119, 0.25) 35%, transparent 70%);
  pointer-events: none;
}

.player-portal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.dialog--player .player-portal__header { align-items: flex-start; margin-bottom: clamp(16px, 3vh, 28px); }
.dialog--player .player-portal__header .card-kicker { color: rgba(239, 209, 119, 0.85); }
.dialog--player .player-portal__header h2:not(#_) { color: #f6f3ea; font-size: clamp(22px, 3.2vw, 34px); }
.dialog--player .dialog-close {
  flex-shrink: 0;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ea;
  backdrop-filter: blur(10px);
}
.dialog--player .dialog-close:hover { background: rgba(255, 255, 255, 0.16); }

/* The video fills as much of the screen as it can while staying 16:9. */
.dialog--player .player-stage:not(#_) {
  width: min(100%, calc((100dvh - 200px) * 16 / 9));
  margin: auto;
  border-radius: clamp(14px, 2vw, 24px);
  background: #050906;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dialog--player .player-description:not(#_) {
  width: min(100%, calc((100dvh - 200px) * 16 / 9));
  margin: 18px auto 0;
  color: rgba(243, 241, 232, 0.66);
}

@media (max-width: 560px) {
  .dialog--player .player-portal__inner { padding-inline: 0; }
  .dialog--player .player-portal__header { padding-inline: 18px; }
  .dialog--player .player-stage:not(#_) { width: 100%; margin: auto 0; border-radius: 0; }
  .dialog--player .player-description:not(#_) { padding-inline: 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .dialog--player .player-portal__inner { padding-block: 10px; }
  .dialog--player .player-portal__header { margin-bottom: 8px; }
  .dialog--player .player-portal__header h2:not(#_) { font-size: 18px; }
  .dialog--player .player-stage:not(#_) { width: min(100%, calc((100dvh - 80px) * 16 / 9)); }
  .dialog--player .player-description:not(#_) { display: none; }
}

/* Live card: the join button counts down from 10 minutes before 8:00 am IST */
.live-card[data-live-phase="five"] .live-card__join { box-shadow: 0 0 0 4px rgba(239, 209, 119, 0.28), 0 14px 30px rgba(28, 43, 35, 0.22); }
.live-card[data-live-phase="live"] .live-card__join { box-shadow: 0 0 0 4px rgba(79, 138, 94, 0.25), 0 14px 30px rgba(28, 43, 35, 0.22); }


/* --------------------------------------------------------------------------
   Legibility
   -------------------------------------------------------------------------- */

body {
  line-height: 1.6;
}

/* Small labels stay readable */
.eyebrow,
.card-kicker,
.guidance-card__kind,
.hero-affirmation span,
.live-session-pill__copy small,
.onboarding__step-label {
  letter-spacing: 0.08em;
}
.card-kicker { color: #546b57; }