/* Cubano, de verdad · one learner panel, always in the Cuban night palette. */
:root {
  color-scheme: dark;
  --pg-page: #06152f;
  --pg-surface: #0b2348;
  --pg-ink: #f7f9ff;
  --pg-muted: #b5c5dd;
  --pg-border: #ffffff24;
  --pg-blue: #68a9fa;
  --pg-purple: #92baff;
  --pg-gradient: linear-gradient(115deg, #1766ba, #235d9e);
}

html,
html[data-course-theme] {
  color-scheme: dark !important;
  background: #030d1f !important;
}

html body {
  color: #f7f9ff !important;
  background: radial-gradient(ellipse at 80% 5%, #123b6d66, transparent 48%),
    linear-gradient(145deg, #071831, #0a2149 48%, #06152d) !important;
}

/* This course uses the shared learner identity; the former local panels are retired. */
#profile-button,
#v4-profile-button,
#v4-profile,
#settings-button,
#v4-settings,
#language-button,
#creator-button,
#creator-fab,
#v4-dev,
#cubano-sync-panel,
.pg-course-theme,
.pg-course-welcome .pg-course-back {
  display: none !important;
}

.topbar {
  grid-template-columns: minmax(150px, 1fr) minmax(100px, 320px) auto;
}

.top-actions {
  min-width: 0;
  flex-wrap: nowrap;
}

.top-actions > .pg-course-profile {
  position: relative !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: none;
  z-index: auto !important;
}

/* Culture slides apply a minimum height to images. Avatars must never inherit it. */
.pg-course-avatar {
  --cubano-avatar-size: 104px;
  position: relative !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 var(--cubano-avatar-size) !important;
  width: var(--cubano-avatar-size) !important;
  height: var(--cubano-avatar-size) !important;
  min-width: var(--cubano-avatar-size) !important;
  min-height: var(--cubano-avatar-size) !important;
  max-width: var(--cubano-avatar-size) !important;
  max-height: var(--cubano-avatar-size) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #dce8f4;
  color: #173d6b;
  isolation: isolate;
}

.pg-course-avatar > img,
body.v4-culture .pg-course-avatar > img,
body.v4-culture .pg-course-profile .pg-course-avatar > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: circle(50%);
}

.pg-course-profile .pg-course-avatar {
  --cubano-avatar-size: 42px;
  font-size: 18px;
  outline: 1px solid #ffffff40;
}

.pg-course-presence {
  border-color: #0a2145 !important;
}

.pg-course-welcome,
.pg-course-welcome[data-accent],
.pg-course-welcome[data-theme] {
  --pg-accent: #d92d37;
  position: fixed;
  width: min(430px, calc(100vw - 28px));
  min-height: 0 !important;
  max-height: calc(100dvh - 28px);
  padding: 72px 30px 24px !important;
  overflow-x: hidden;
  color: #f7f9ff !important;
  background: radial-gradient(ellipse at 80% 0, #1b4c7f80, transparent 60%),
    linear-gradient(150deg, #102f57, #071a35 75%) !important;
  border: 1px solid #7097c14d !important;
  border-radius: 25px;
  box-shadow: 0 26px 80px #000a, inset 0 1px 0 #ffffff12 !important;
  background-blend-mode: normal !important;
}

.pg-course-welcome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 43px;
  border-bottom: 1px solid #ffffff1c;
  background: linear-gradient(90deg, #cc2636 0 16%, transparent 16%),
    repeating-linear-gradient(to bottom, #1c5594 0 9px, #e8eff8 9px 17px);
  opacity: .92;
}

.pg-course-welcome::after {
  content: "★";
  position: absolute;
  top: 9px;
  left: 21px;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  pointer-events: none;
}

.pg-course-welcome::backdrop,
.pg-course-welcome[data-theme]::backdrop {
  background: #020b1bd9 !important;
  backdrop-filter: blur(9px);
}

.pg-course-welcome > .pg-course-avatar {
  --cubano-avatar-size: 118px;
  margin: 6px auto 0 !important;
  border: 5px solid #e6effa !important;
  outline: 1px solid #83a8d8 !important;
  box-shadow: 0 12px 28px #0005 !important;
}

.pg-course-welcome h1 {
  margin: 19px 0 7px;
  color: #fff !important;
  font-size: 27px;
  overflow-wrap: anywhere;
}

.pg-course-welcome .pg-course-bio,
.pg-course-welcome .pg-course-title {
  color: #c1d2e8 !important;
  opacity: 1;
}

.pg-course-welcome .pg-course-title:empty {
  display: none;
}

.pg-course-welcome .pg-course-actions {
  gap: 17px;
  margin: 24px 0;
}

.pg-course-welcome .pg-course-actions > * {
  width: 58px;
  height: 58px;
  padding: 14px;
  border: 1px solid #91b2d84d !important;
  background: #ffffff0b !important;
  box-shadow: inset 0 1px 0 #ffffff0a !important;
  color: #e5efff !important;
}

.pg-course-welcome .pg-course-actions > *:hover {
  background: #ffffff19 !important;
  border-color: #c0d9f4 !important;
}

.pg-course-welcome .pg-course-actions svg {
  width: 28px;
  height: 28px;
}

.pg-course-welcome .pg-course-language-picker {
  color: #e4edfa !important;
  border-color: #8bb1e04d !important;
  background: #020c1b30;
}

.pg-course-welcome .pg-course-language-picker .pg-course-language-option {
  background: #ffffff08 !important;
  border-color: #89a9d144 !important;
  color: #e6effa !important;
}

.pg-course-welcome .pg-course-language-option[aria-pressed=true] {
  background: #305f9055 !important;
  border-color: #a7c9f1 !important;
  box-shadow: 0 0 0 1px #a7c9f1 !important;
}

.pg-course-welcome .pg-course-language-option img {
  width: 28px !important;
  height: 20px !important;
  min-width: 28px !important;
  min-height: 0 !important;
  max-height: 20px !important;
  border-radius: 2px !important;
  object-fit: contain !important;
}

.pg-course-welcome .pg-course-enter,
.pg-course-welcome .pg-course-language-accept {
  background: #d12c38 !important;
  color: #fff !important;
  border-color: #f16c74 !important;
  box-shadow: 0 9px 24px #020b1b4d !important;
}

.pg-course-welcome .pg-course-enter {
  padding: 16px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 700;
}

.pg-course-welcome .pg-course-status {
  color: #f3b5ba !important;
}

.pg-course-welcome .pg-course-reset {
  top: 53px;
  left: 17px;
  width: 42px;
  height: 38px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid #a7c4e333 !important;
  background: #ffffff09 !important;
  color: #b9cbe1 !important;
  box-shadow: none !important;
}

.pg-course-welcome .pg-course-reset svg {
  width: 20px;
  height: 20px;
}

.pg-course-welcome .pg-course-reset-confirm {
  color: #ebf2fc;
  border-color: #d2747b80;
  background: #020d1e6b;
}

.pg-course-welcome .pg-course-reset-confirm button {
  background: #ffffff12;
  color: #e6effa;
  border-color: #8caed366;
}

.pg-course-welcome .pg-course-reset-confirm [data-confirm-course-reset] {
  background: #b8202c;
  border-color: #df6871;
}

.pg-course-welcome .cubano-academy-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 20px 0 18px;
  padding: 12px 14px;
  border: 1px solid #86a8d240;
  border-radius: 15px;
  background: #ffffff08;
  color: #f1f6ff;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.pg-course-welcome .cubano-academy-link:hover {
  border-color: #b3cdeb;
  background: #ffffff12;
}

.pg-course-welcome .cubano-academy-link strong,
.pg-course-welcome .cubano-academy-link small { display: block; }
.pg-course-welcome .cubano-academy-link small { margin-top: 3px; font-weight: 400; color: #bdcfe8; }

.pg-course-welcome .cubano-academy-link img {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  max-height: 44px !important;
  padding: 3px;
  border-radius: 50% !important;
  background: #fff;
  object-fit: contain !important;
}

/* A single music button owns its volume popover; it remains reachable by keyboard. */
.music-control-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  isolation: isolate;
}

.music-control-group .music-inline-volume {
  position: absolute;
  top: calc(100% + 11px);
  right: 0;
  z-index: 70;
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 174px;
  min-height: 46px;
  padding: 14px;
  border: 1px solid #7598c466;
  border-radius: 13px;
  background: #0b2145;
  box-shadow: 0 13px 30px #0007;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}

.music-control-group .music-inline-volume::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 0;
  width: 100%;
  height: 14px;
}

.music-control-group:is(:hover, :focus-within, [data-volume-open=true]) .music-inline-volume {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.music-control-group .music-inline-volume input {
  min-width: 0;
  height: 5px;
  margin: 0;
}

.music-control-group .music-inline-volume input:focus-visible {
  outline: 2px solid #c3ddff;
  outline-offset: 8px;
}

.music-control-group .music-inline-volume span {
  color: #d0e0f3;
  font-size: 9px;
}

.music-control-group:has(.music-inline-volume:is(:hover, :focus-within)) [data-tip]::after {
  display: none;
}

/* Explanatory cards carry white paper and dark ink against the navy lesson. */
.objective-grid > .objective,
.pronunciation-examples > .mini-example,
.grammar-examples > .grammar-example {
  background: #fff !important;
  border-color: #fff !important;
  color: #14223a !important;
  box-shadow: 0 7px 16px #020b1b24;
}

.objective-grid > .objective strong,
.pronunciation-examples > .mini-example strong,
.grammar-examples > .grammar-example strong {
  color: #111c2e !important;
}

.objective-grid > .objective span:last-child,
.pronunciation-examples > .mini-example span,
.grammar-examples > .grammar-example .translation {
  color: #4b596e !important;
}

.objective-grid > .objective .objective__number,
.grammar-examples > .grammar-example .grammar-example__label {
  color: #bd2431 !important;
}

.top-actions > .pg-course-profile:focus-visible,
.pg-course-welcome .cubano-academy-link:focus-visible,
.pg-course-welcome button:focus-visible,
.pg-course-welcome a:focus-visible {
  outline: 2px solid #b6d6ff;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  html body {
    padding-bottom: var(--safe-bottom);
  }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 10px;
    padding-inline: 13px;
  }
  .topbar .brand {
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }
  .brand__flag {
    width: 32px;
    height: 23px;
    flex: 0 0 32px;
  }
  .brand__copy strong {
    font-size: 14px;
  }
  .brand__copy small {
    font-size: 12px;
  }
  .topbar .top-actions {
    display: flex !important;
    gap: 6px;
    justify-content: flex-end;
  }
  .top-actions .icon-button,
  .top-actions > .pg-course-profile {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }
  .top-actions .icon-button {
    border-radius: 12px;
  }
  .top-actions > .pg-course-profile .pg-course-avatar {
    --cubano-avatar-size: 38px;
  }
  .top-actions .icon-button svg {
    width: 19px;
    height: 19px;
  }
  .top-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .mobile-nav {
    display: none !important;
  }
  .course-controls {
    bottom: calc(8px + var(--safe-bottom));
  }
  .music-player {
    bottom: calc(12px + var(--safe-bottom));
  }
  .pg-course-welcome,
  .pg-course-welcome[data-accent],
  .pg-course-welcome[data-theme] {
    padding: 66px 22px 20px !important;
  }
  .pg-course-welcome > .pg-course-avatar {
    --cubano-avatar-size: 104px;
  }
  .pg-course-welcome h1 {
    font-size: 24px;
  }
}

@media (max-width: 350px) {
  .topbar {
    padding-inline: 9px;
    column-gap: 7px;
  }
  .topbar .top-actions {
    gap: 4px;
  }
  .brand__flag {
    display: none;
  }
}