/* Keep the header's original position and responsive box in style.css. */
.learncomet-logo {
  display: inline-flex;
  align-items: center;
  gap: 4%;
  text-decoration: none;
}

.learncomet-logo > img {
  display: block;
  flex: none;
  height: auto;
}

.learncomet-logo > .logo-symbol { width: 20%; }
.learncomet-logo > .logo-wordmark { width: 76%; }

.loading-brand {
  width: min(360px, 64vw);
  margin: 10px 0 24px;
}

#loading.book .loading-brand { display: none; }

.pricing-brand.learncomet-logo {
  width: 190px;
  height: 44px;
  flex: none;
}

@media (max-width: 600px) {
  .pricing-brand.learncomet-logo { width: 150px; }
}

/* The other StoryComet bookshelf is one tap away, with the same parent account. */
.app-switch.pill-button {
  min-height: 58px;
  padding: 8px 22px;
  gap: 8px;
  font-size: 17px;
  text-decoration: none;
  flex: none;
  border-image-width: 29px;
}
.app-switch .icon { width: 24px; height: 24px; }
.app-switch-arrow { font-size: 21px; line-height: 1; }

@media (max-width: 1400px) {
  .progress-dots { top: 90px; }
}
@media (max-width: 1200px) {
  .souvenir-chip { top: 90px; left: 22px; }
}
@media (max-width: 900px) {
  .app-switch.pill-button { min-height: 48px; padding: 6px 18px; font-size: 15px; border-image-width: 24px; }
}
@media (max-width: 700px) {
  /* Keep the brand and labeled switch on row one; reading controls get their own row. */
  .top-actions { top: 72px; }
  .app-switch.pill-button { position: absolute; top: -60px; right: 0; }
  .souvenir-chip { top: 132px; left: 0; right: 0; width: fit-content; margin: 0 auto; }
  .progress-dots { top: 176px; }
  .language-menu { top: 130px; }
}

/* the Pro pin: a member's badge hung on the corner button and on the parent row of the profiles folio */
.pro-pin {
  display: none;
  width: 28px;
  height: 28px;
  background: url("../public/ui/pro-pin.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px #05081a66);
  pointer-events: none;
}
.account-button .pro-pin { position: absolute; right: -7px; bottom: -5px; transform: rotate(-8deg); }
.account-button.pro .pro-pin:not([hidden]) { display: block; }
.account-button .pro-pin.pop { animation: pin-pop 700ms var(--spring) both; }
@keyframes pin-pop { from { transform: rotate(-8deg) scale(0); } 60% { transform: rotate(6deg) scale(1.25); } to { transform: rotate(-8deg) scale(1); } }
.settings-row .row-icon { position: relative; }
.settings-row .row-icon .pro-pin { display: block; position: absolute; right: -10px; bottom: -8px; width: 26px; height: 26px; transform: rotate(-8deg); }