/* Course identity belongs to the catalog, while FlashFluent remains the app brand. */
@media (min-width: 900px) {
  .home-sidebar {
    z-index: 1001;
    overflow: visible;
  }

  .home-sidebar .brand-lockup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 0;
  }

  .home-sidebar .language-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .home-sidebar #course-language-label {
    color: var(--world-background);
    font-family: "Avenir Next",Avenir,"PingFang SC","Hiragino Sans GB",sans-serif;
    /* The sidebar has enough horizontal room for the course identity; use a
       modest responsive headline scale rather than shrinking every program
       to a compact utility-label size. */
    font-size: var(--language-label-size, clamp(24px, 1.7vw, 26px));
    font-weight: 600;
    letter-spacing: -.75px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .home-sidebar .language-chevron {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--world-background) 13%, white);
  }

  .home-sidebar .language-chevron::before {
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-right: 2.5px solid var(--world-background);
    border-bottom: 2.5px solid var(--world-background);
    content: "";
    transform: rotate(45deg);
  }

  .home-sidebar .language-picker-popover {
    position: absolute;
    z-index: 1000;
    top: 68px;
    left: 16px;
    display: grid;
    gap: 9px;
    min-width: 226px;
    padding: 14px;
    border: 0;
    border-radius: 22px;
    background: rgba(30,29,28,.96);
    box-shadow: 0 12px 28px rgba(0,0,0,.3);
  }

  .home-sidebar .language-picker-popover[hidden] { display: none; }

  .home-sidebar .language-picker-popover button {
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 13px;
    color: #fff;
    background: transparent;
    font-family: "Avenir Next",Avenir,sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
  }

  .home-sidebar .language-picker-popover button.is-current {
    color: var(--world-foreground);
    background: #fff;
    border-color: rgba(255,255,255,.85);
  }

  .home-sidebar .sidebar-product-name {
    display: block;
    margin-top: 7px;
    color: var(--world-background);
    font-family: "Avenir Next",Avenir,sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.25px;
    line-height: 1;
  }

  .home-sidebar .sidebar-globe {
    width: 89px;
    height: 89px;
  }

  .home-sidebar .sidebar-footer p {
    margin-top: 7px;
  }

  .home-sidebar .sidebar-links button:hover,
  .home-sidebar .sidebar-links button.is-active {
    color: var(--world-background);
  }
}

/* A single-language program has one primary term, not a script/reading pair.
   These overrides deliberately retain the shared card and trophy components. */
html[data-program-format="single-language"] .card-hanzi,
html[data-program-format="single-language"] [id$="hero-hanzi"] {
  display: none !important;
}

html[data-program-format="single-language"] .trophy-case-character,
html[data-program-format="single-language"] #trophy-detail-hanzi {
  font-family: "Avenir Next",Avenir,sans-serif;
  letter-spacing: -.04em;
}

/* Alphabetic pack names use a compact, wrapping title instead of Mandarin's
   oversized character treatment. A single-language program has no reading
   byline, so the legacy subtitle slot is intentionally removed. */
html[data-program-format="single-language"] .pack-card .pack-subtitle,
html[data-program-format="single-language"] .pack-drawer .pack-subtitle {
  display: none;
}

html[data-program-format="single-language"] .pack-card .pack-chinese,
html[data-program-format="single-language"] .pack-drawer h2 {
  font-family: "Avenir Next",Avenir,sans-serif;
  font-size: clamp(25px,3.5vw,34px) !important;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
  white-space: normal;
}

@media (max-width: 899px) {
  /* Match the roomier mobile Mandarin title rhythm without changing desktop. */
  html[data-program-format="single-language"] .pack-card .pack-english {
    margin-bottom: 10px;
  }

  html[data-program-format="single-language"] .pack-card .pack-chinese {
    font-size: 29px !important;
    line-height: 1.06;
  }
}

html[data-program-format="single-language"] .trophy-case-character {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: "Avenir Next",Avenir,sans-serif;
  font-size: clamp(12px,1.15vw,16px);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
}

html[data-program-format="single-language"] .trophy-case-content > header span,
html[data-program-format="single-language"] .trophy-pack-section > header span {
  letter-spacing: -.06em;
}

html[data-program-format="single-language"] .trophy-case-content > header strong,
html[data-program-format="single-language"] .trophy-pack-section > header strong {
  color: rgba(0,0,0,.46);
}

html[data-program-format="single-language"] #trophy-detail-hanzi {
  min-height: 92px;
  font-size: clamp(34px,7vw,58px);
  line-height: 1.05;
}

/* Trophy details have two intentional type systems. Script-and-reading cards
   preserve two fitted single lines; alphabetic courses use a lighter primary
   face and may occupy two lines only at word boundaries. */
.trophy-detail-dialog.is-two-track h2 {
  overflow:hidden;
  font-family:"PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:var(--trophy-detail-title-size,58px);
  font-weight:600;
  letter-spacing:-.05em;
  text-overflow:clip;
  white-space:nowrap;
}
.trophy-detail-dialog.is-two-track > p {
  overflow:hidden;
  font-family:"Avenir Next",Avenir,sans-serif;
  font-size:var(--trophy-detail-reading-size,31px);
  font-weight:600;
  text-overflow:clip;
  white-space:nowrap;
}
.trophy-detail-dialog.is-single-language h2 {
  min-height:0;
  max-height:2.12em;
  overflow:hidden;
  color:var(--pinyin);
  font-family:"Avenir Next",Avenir,sans-serif;
  font-size:var(--trophy-detail-title-size,36px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1.06;
  overflow-wrap:normal;
  text-wrap:balance;
  white-space:normal;
  word-break:normal;
}
/* This intentionally repeats the ID used by the legacy mobile rule above.
   It keeps alphabetic trophy terms in the reading-sized treatment instead of
   *that* rule's oversized script scale. */
html[data-program-format="single-language"] .trophy-detail-dialog.is-single-language #trophy-detail-hanzi {
  flex:1 1 0;
  display:grid;
  place-items:center;
  width:100%;
  min-height:0;
  max-height:none;
  padding:0 36px;
  color:var(--pinyin);
  font-family:"Avenir Next",Avenir,sans-serif;
  font-size:var(--trophy-detail-title-size,32px) !important;
  font-weight:600;
  line-height:1.08;
}
.trophy-detail-dialog.is-single-language > p[hidden] { display:none; }

/* Desktop review keeps the artwork on one visual baseline while language
   controls change. An art-only card is the exception: it can use the newly
   available space rather than preserving the former text column. */
@media (min-width: 900px) {
  .flashcard.layout-full > .artwork,
  .flashcard.layout-art-characters > .artwork,
  .flashcard.layout-art-pinyin > .artwork,
  .flashcard.layout-art-only > .artwork {
    transform: translateY(clamp(-14px,-2cqb,-10px));
  }

  .flashcard.layout-art-only {
    --artwork-size: min(78cqi,82cqb);
  }

  .flashcard.layout-art-only > .artwork {
    transform: translateY(clamp(-28px,-4cqb,-20px));
  }
}