/* ============================================================
   Embedded in hive-dashboard shell (iframe, embed=1)
   Tighter layout, no double chrome, no viewport overflow
   ============================================================ */

html.hive-embed-mode,
html.hive-embed-mode body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.hive-embed-mode body {
  margin: 0;
  background: #eef3fb;
}

/* Embedded quiz / practice UI — iframe scroll only; keep full typing-mode chrome */
html.hive-embed-mode .pc-practice-overlay {
  position: absolute !important;
  inset: 0 !important;
  min-height: 100% !important;
}

html.hive-embed-mode .qt-root,
html.hive-embed-mode .qmc-root,
html.hive-embed-mode .qfc-root,
html.hive-embed-mode .qso-root {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html.hive-embed-mode .qt-top-panel,
html.hive-embed-mode .qmc-top-panel,
html.hive-embed-mode .qfc-top-panel,
html.hive-embed-mode .qso-top-panel {
  margin-top: 0 !important;
}

/* ---- Placement diagnostic / quiz (qt layout) ---- */
html.hive-embed-mode .qt-session {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px 48px !important;
  box-sizing: border-box !important;
}

html.hive-embed-mode .qt-top-panel {
  margin: 0 auto !important;
}

html.hive-embed-mode .qt-body-grid {
  margin: 14px auto 0 !important;
}

html.hive-embed-mode .qt-body-grid--with-sidebar {
  grid-template-columns: 296px 1fr !important;
}

html.hive-embed-mode .qt-top-panel__header {
  flex-wrap: nowrap !important;
}

html.hive-embed-mode .qt-input-row {
  flex-direction: row !important;
}

html.hive-embed-mode .qt-word-actions {
  flex-direction: row !important;
}

html.hive-embed-mode .qt-root .qt-input-row input.qt-input[type="text"],
html.hive-embed-mode .qt-root .qt-input-row button.qt-submit-btn {
  width: auto !important;
  height: var(--qt-input-h, 58px) !important;
  min-height: var(--qt-input-h, 58px) !important;
}

@media (max-width: 700px) {
  html.hive-embed-mode .qt-body-grid--with-sidebar {
    grid-template-columns: 1fr !important;
  }

  html.hive-embed-mode .qt-top-panel__header {
    flex-wrap: wrap !important;
  }

  html.hive-embed-mode .qt-input-row {
    flex-direction: column !important;
  }

  html.hive-embed-mode .qt-word-actions {
    flex-direction: column !important;
  }

  html.hive-embed-mode .qt-root .qt-input-row input.qt-input[type="text"],
  html.hive-embed-mode .qt-root .qt-input-row button.qt-submit-btn {
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
  }
}

html.hive-embed-mode #screen {
  min-height: 120px;
}

html.hive-embed-mode .qt-diag-center {
  max-width: 100% !important;
  margin-top: 8px !important;
}

html.hive-embed-mode .qt-complete-card {
  padding: 28px 20px !important;
  border-radius: 18px !important;
}

html.hive-embed-mode .qt-complete-title {
  font-size: clamp(22px, 5vw, 28px) !important;
}

html.hive-embed-mode .qt-prompt-card {
  border-radius: 18px !important;
}

html.hive-embed-mode .qt-input {
  font-size: 18px !important;
}

/* Legacy placement rules (old .app / .topcard), keep for cached builds */
html.hive-embed-mode .app {
  max-width: 100% !important;
  padding: 12px 14px 32px !important;
}

html.hive-embed-mode #screen {
  min-height: 120px;
}

html.hive-embed-mode #screen .panel {
  display: block !important;
}

html.hive-embed-mode .app .topcard {
  margin-bottom: 0;
}

html.hive-embed-mode .app .backpill {
  display: none !important;
}

html.hive-embed-mode .backpill {
  display: none !important;
}

html.hive-embed-mode .topcard {
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

html.hive-embed-mode .btext .t {
  font-size: 18px !important;
}

html.hive-embed-mode .main {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

html.hive-embed-mode .rail {
  display: none !important;
}

html.hive-embed-mode .wc-head {
  padding: 18px 20px !important;
  gap: 14px !important;
}

html.hive-embed-mode .spk {
  width: 56px !important;
  height: 62px !important;
}

html.hive-embed-mode .spk svg {
  width: 26px !important;
  height: 26px !important;
}

html.hive-embed-mode .wcard {
  border-radius: 18px !important;
}

html.hive-embed-mode .stat .v {
  font-size: 22px !important;
}

html.hive-embed-mode .center {
  max-width: 100% !important;
  margin: 16px auto 0 !important;
}

html.hive-embed-mode .panel {
  padding: 28px 22px 24px !important;
  border-radius: 20px !important;
}

html.hive-embed-mode .h-big {
  font-size: clamp(24px, 5vw, 32px) !important;
}

html.hive-embed-mode .lede {
  font-size: 14.5px !important;
}

html.hive-embed-mode .btn-go {
  font-size: 16px !important;
  padding: 12px 22px !important;
}

html.hive-embed-mode .qdef {
  font-size: 22px !important;
}

html.hive-embed-mode .spellinput {
  font-size: 20px !important;
  padding: 14px 18px !important;
}

html.hive-embed-mode .wc-head .ipa {
  font-size: 24px !important;
}

/* ---- Mini-lesson ---- */
html.hive-embed-mode .ml-wrap {
  max-width: 640px !important;
  padding: 16px 16px 48px !important;
}

html.hive-embed-mode .ml-beat {
  padding: 20px 18px !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
}

html.hive-embed-mode .ml-hero {
  font-size: 32px !important;
}

/* ---- React utility views (profile, settings) ---- */
html.hive-embed-mode #page-container {
  min-height: 0 !important;
  padding: 0 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

html.hive-embed-mode #page-container > * {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

html.hive-embed-mode .compete-embed {
  min-height: 0 !important;
  padding: 12px 16px 24px !important;
}

html.hive-embed-mode .pf-page {
  padding: 0 !important;
}

html.hive-embed-mode .pf-hero {
  padding: 24px 20px !important;
  border-radius: 20px !important;
}

html.hive-embed-mode .pf-username {
  font-size: 28px !important;
}

html.hive-embed-mode .pf-hero-points-value {
  font-size: 40px !important;
}

html.hive-embed-mode .pf-stat-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

html.hive-embed-mode .pf-badge-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

html.hive-embed-mode .pf-billing-grid,
html.hive-embed-mode .pf-tier-grid {
  grid-template-columns: 1fr !important;
}

/* ---- Word search / mock bee pages ---- */
html.hive-embed-mode .min-h-screen {
  min-height: 0 !important;
}

/* ---- Course landings (Bee Ready, Summer Boot Camp) ---- */
html.hive-embed-mode .course-page-root {
  min-height: 100% !important;
  background: var(--cream, #fffbf2) !important;
}

html.hive-embed-mode .course-page-root main {
  padding-top: 8px !important;
  padding-bottom: 32px !important;
}

html.hive-embed-mode #page-header,
html.hive-embed-mode footer {
  display: none !important;
}

html.hive-embed-mode .bg-hive-light {
  background: var(--cream, #fffbf2) !important;
}

html.hive-embed-mode .compete-embed {
  min-height: 100% !important;
  background: var(--cream, #fffbf2) !important;
}

html.hive-embed-mode .compete-embed--beeready iframe {
  min-height: calc(100vh - 8px) !important;
  height: 100vh !important;
}