/* Shared window sizing: content stays scrollable; only answer pictures fit the viewport. */
html { min-width: 0; }

:root {
  --app-header-height: 76px;
  --app-bottom-height: 0px;
}

.page-shell,
.site-header,
.site-header > *,
.profile-layout > *,
.bottom-three-grid > * {
  min-width: 0;
}

.site-header {
  flex-wrap: wrap;
}

.site-header-primary { flex: 1 1 auto; }
.site-header .brand { flex-shrink: 0; }
.site-nav { flex-wrap: wrap; min-width: 0; }
.site-nav > a,
.desktop-more-menu > summary { white-space: nowrap; }
.desktop-more-panel {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - var(--app-header-height) - 16px);
  overflow-y: auto;
}

/* The full authenticated navigation needs its own row on laptops and tablets. */
@media (min-width: 860px) and (max-width: 1679px) {
  .site-header { gap: 6px 10px; padding: 8px 20px; }
  .site-header .brand-logo { width: 44px !important; height: 44px !important; }
  .site-header .brand-text { font-size: 1.2rem !important; }
  .site-nav { flex-basis: 100%; justify-content: center; gap: 2px; }
  .site-nav > a,
  .desktop-more-menu > summary { min-height: 44px; padding-inline: 10px; }
}

/* Keep the shorter desktop navigation beside the profile controls on wide screens. */
@media (min-width: 1680px) {
  .site-header { flex-wrap: nowrap; gap: 8px; }
  .site-header-primary { flex: 0 0 auto; }
  .site-nav { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; margin-left: auto; }
  .site-nav > a,
  .desktop-more-menu > summary { padding-inline: 10px; }
}

/* Header controls are optional: flex handles both language pickers without implicit rows. */
@media (max-width: 859px) {
  .site-header { display: flex; gap: 6px; }
  .site-header-primary { flex: 1 1 90px; }
  .site-header > .custom-profile-dropdown,
  .site-header > .language-switcher,
  .site-header > .app-fullscreen-toggle,
  .site-header > .theme-toggle { flex: 0 0 44px; }
  .site-header .profile-dropdown-trigger { width: 44px; min-width: 44px; height: 44px; }
  .site-header .language-flag-picker > summary,
  .site-header .app-fullscreen-toggle,
  .site-header .theme-toggle { width: 44px; height: 44px; min-height: 44px; }
  .site-header .brand { min-height: 44px; }
  .site-header .brand-text { display: none; }
  .site-header-primary.has-back-link { overflow: visible; }
  .site-back-link { flex: 0 0 44px; width: 44px; min-height: 44px; justify-content: center; margin-left: 2px !important; }
  .site-back-label { display: none; }
  .profile-dropdown-menu { top: calc(var(--app-header-height) + 8px); }
}

@media (max-width: 480px) {
  .site-header {
    flex-wrap: nowrap;
    gap: 4px;
    padding-inline: 6px;
  }
  .site-header-primary {
    flex: 1 1 80px;
    min-width: 80px;
  }
  .site-header .brand-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .site-header > .custom-profile-dropdown,
  .site-header > .language-switcher,
  .site-header > .app-fullscreen-toggle,
  .site-header > .theme-toggle { flex-basis: 40px; }
  .site-header .profile-dropdown-trigger,
  .site-header .language-flag-picker > summary,
  .site-header .app-fullscreen-toggle,
  .site-header .theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

@media (max-width: 359px) {
  /* Fullscreen remains available through browser/PWA controls on the narrowest phones. */
  .site-header > .app-fullscreen-toggle { display: none; }
}

/* Flex items must be allowed to shrink inside the dashboard, including long names. */
.profile-main,
.profile-sidebar,
.bank-dashboard-header > *,
.bank-dashboard-header > div > div { min-width: 0; max-width: 100%; }
.bank-dashboard-header h1,
.profile-layout strong,
.profile-layout h2 { overflow-wrap: anywhere; }
.bank-dashboard-header .treasure-profile-avatar { flex-shrink: 0; }
.profile-layout .bottom-three-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.progress-dashboard-page .bank-dashboard-header h1 { color: var(--ink); }

@media (min-width: 992px) {
  .profile-layout .profile-sidebar { flex-basis: clamp(240px, 23vw, 320px); top: calc(var(--app-header-height) + 16px); }
}
@media (max-width: 599px) {
  .profile-layout .content-card { padding: 16px; }
}

/* Compact chrome leaves room for pictures even in a 1280 x 640 PWA window. */
body .kwc-container,
body.initial-check-page .game-container {
  width: 100%;
  max-width: 900px;
  padding: 12px 12px 20px;
}
body .kwc-header,
body .game-container .game-header { margin-bottom: 10px; }
body .kwc-header h1,
body .game-container .game-header h1 { margin: 0 0 4px; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.2; }
body .kwc-header p { margin: 4px 0; }
body .kwc-progress,
body .game-container .game-progress { margin: 8px auto; height: 8px; }
body .kwc-counter { margin: 6px 0; }
body .kwc-audio-image .kwc-play-btn,
body .game-container .audio-play-big {
  width: clamp(48px, 9dvh, 76px);
  height: clamp(48px, 9dvh, 76px);
  margin: 0 auto 10px;
  font-size: clamp(1.8rem, 5dvh, 2.7rem);
}

/* JS measures the real header, instructions and fixed tabbar; CSS is the fallback. */
body [data-fit-choice-grid]:not([class*="image-review-grid--"]) {
  --choice-columns: 2;
  display: grid;
  grid-template-columns: repeat(var(--choice-columns), minmax(0, 1fr));
  gap: 10px;
  width: min(100%, var(--choice-grid-width, max(160px, calc(100dvh - 310px))));
  max-width: 760px;
  margin: 8px auto 0;
}
body [data-fit-choice-grid]:not([class*="image-review-grid--"]) > * {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 6px;
  overflow: hidden;
  overflow-wrap: anywhere;
}
body [data-fit-choice-grid]:not([class*="image-review-grid--"]) > * img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
body [data-fit-choice-grid]:not([class*="image-review-grid--"]) > *:focus-visible { outline: 3px solid var(--leaf-600); outline-offset: 2px; }

@media (max-height: 700px) {
  .review-stage-layout { padding-top: 10px; }
  .review-stage-layout .image-review-header { padding: 10px 14px; margin-bottom: 8px; }
  .image-review-header .image-review-mascot { margin-bottom: 4px; }
  .image-review-header .image-review-mascot img { width: 32px; height: 32px; }
  .image-review-header h1 { font-size: 1.25rem; margin-block: 4px; }
  .image-review-header p { margin-block: 4px; }
  .focused-image-review .focused-review-card:not(.focused-review-finish) { padding: 10px; }
}

@media (max-height: 560px) and (min-width: 600px) {
  body [data-fit-choice-grid]:not([class*="image-review-grid--"]) { --choice-columns: 4; }
  body .kwc-container,
  body.initial-check-page .game-container { padding-top: 6px; }
  body .kwc-header,
  body .game-container .game-header { margin-bottom: 4px; }
  .image-review-header .image-review-mascot { display: none; }
}

@media (max-width: 859px) {
  body [data-fit-choice-grid]:not([class*="image-review-grid--"]) {
    width: min(100%, var(--choice-grid-width, max(160px, calc(100dvh - 370px))));
  }
}

/* Keep floating help clear of the answer area; support is also in navigation. */
body:has([data-fit-choice-grid]:not([class*="image-review-grid--"])) .global-support-fab { display: none; }

/* Ranking columns require 1370px plus gutters before the three-column layout fits. */
@media (min-width: 721px) and (max-width: 1439px) {
  .treasure-layout-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .treasure-layout-grid .rank-spotlight { grid-column: 1; grid-row: 1; min-height: 420px; }
  .treasure-layout-grid .treasury-card { grid-column: 2; grid-row: 1; height: auto; }
  .treasure-layout-grid .journey-card { grid-column: 1 / -1; grid-row: 2; }
  .treasure-layout-grid .awards-card { grid-column: 1 / -1; grid-row: 3; }
  .treasure-layout-grid .future-card { grid-column: 1 / -1; grid-row: 4; }
  .treasure-layout-grid .leaderboard-card { grid-column: 1 / -1; grid-row: 5; }
}
.treasure-layout-grid > *,
.treasure-top-grid > * { min-width: 0; }
.heroes-world { min-width: 0; max-width: 100%; margin-inline: 0; }
.heroes-empty { min-width: 0; overflow-wrap: anywhere; }

.game-container .game-header:has(.initial-check-instruction-listen) { position: relative; padding-inline: 48px; }
.game-container .initial-check-instruction-listen { position: absolute; right: 0; bottom: 0; margin: 0; }

@media (max-height: 700px) {
  .review-stage-layout .focused-image-review .image-review-header { padding: 8px 12px; margin-bottom: 8px; }
  .review-stage-layout .focused-image-review .image-review-header h1 { margin: 4px 0; font-size: 1.2rem; line-height: 1.2; }
  .review-stage-layout .focused-image-review .image-review-header p { margin: 4px 0; }
  .review-stage-layout .focused-image-review .image-review-header p:empty { display: none; }
  .review-stage-layout .focused-image-review .image-review-mascot { display: none; }
  .review-stage-layout .focused-image-review .focused-review-card:not(.focused-review-finish) { padding: 8px; }
  .review-stage-layout .preschool-review .image-review-listen { width: 48px; height: 48px; min-height: 48px; margin: 0 auto 6px; font-size: 1.6rem; }
  .review-stage-layout .stage-eight-av-steps { margin: 4px 0; gap: 6px; }
  .review-stage-layout .stage-eight-av-steps span { padding: 3px 8px; border-radius: 10px; }
  .review-stage-layout .image-review-instruction-row { gap: 6px; }
  .review-stage-layout .image-review-instruction-row p { font-size: .85rem; line-height: 1.2; }
}

@media (max-height: 560px) and (min-width: 600px) {
  .review-stage-layout .focused-image-review .image-review-header { position: relative; padding-right: 64px; }
  .review-stage-layout .image-review-instruction-listen { position: absolute; right: 10px; top: 10px; }
  .review-stage-layout .stage-eight-av-steps { position: absolute; left: 10px; top: 8px; width: 150px; }
  .review-stage-layout .stage-eight-av .image-review-header { padding-left: 174px; }
}
@media (max-height: 700px) {
  .review-stage-layout .focused-image-review .focused-review-card:not(.focused-review-finish) { gap: 6px; }
  .review-stage-layout .stage-eight-av .image-review-header > .eyebrow { display: none; }
}
@media (max-width: 380px) {
  .site-header { gap: 4px; padding-inline: 6px; }
  .mobile-tabbar > a,
  .mobile-tabbar > .mobile-more-trigger { min-width: 0; font-size: .6rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; text-align: center; }
}

/* Long localized labels should wrap inside narrow controls. */
@media (max-width: 400px) {
  .calendar-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-periods a { overflow-wrap: anywhere; }
}
.scene-nav { flex-wrap: wrap; }
.scene-nav > a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.answers-container .answer-card { min-width: min(200px, 100%) !important; }
.answers-container .btn-select-answer { min-width: 0; overflow-wrap: anywhere; }

.game-container .image-audio-target {
  width: clamp(80px, 22dvh, 180px);
  height: clamp(80px, 22dvh, 180px);
  margin-bottom: 8px;
}
.game-container .sound-options-grid { gap: 8px; }
.game-container .sound-option-card { min-height: 64px; grid-template-columns: minmax(44px, 1fr) 52px; }
@media (max-height: 560px) and (min-width: 600px) {
  .game-container .mechanic-image-audio.active { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; }
  .game-container .sound-options-grid { width: 100%; }
}

/* Unbroken translated headings must not define the minimum width of a page. */
.page-shell { overflow-wrap: anywhere; }
.page-shell h1,
.page-shell h2,
.page-shell h3,
.page-shell legend,
.page-shell .page-heading.split-heading > div:first-child h1 { overflow-wrap: anywhere; }
.auth-panel > h1,
.page-shell > .container > h1 { font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.12; }
.page-shell > .container { width: min(100%, var(--content)); margin-inline: auto; padding-inline: 12px; }
.page-shell .button { min-width: 0; max-width: 100%; white-space: normal; }
.form-stack,
.form-stack > *,
.form-stack fieldset { min-width: 0; }
.form-stack input,
.form-stack select,
.form-stack textarea { min-width: 0; max-width: 100%; }
.ai-teacher-hero { flex-wrap: wrap; }
.ai-teacher-hero > * { min-width: 0; max-width: 100%; }
.slow-audio-control > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Keep the easy listen-choice game consistent with the assessment picture grid. */
.listen-page:has(.listen-panel[data-started="true"]) { padding-top: 10px; }
.listen-page:has(.listen-panel[data-started="true"]) .listen-back-row,
.listen-page:has(.listen-panel[data-started="true"]) .listen-head p { display: none; }
.listen-page:has(.listen-panel[data-started="true"]) .listen-head h1 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 8px; }
.listen-panel[data-started="true"] .listen-stats { margin-top: 8px; }
.listen-panel[data-started="true"] .listen-audio-row { margin-block: 8px; }
@media (max-height: 560px) {
  .listen-panel[data-started="true"] .listen-audio { width: 48px; height: 48px; }
}
@media (max-width: 620px), (max-height: 560px) {
  .listen-panel[data-started="true"] .listen-chip { min-height: 44px; padding: 6px 8px; font-size: .78rem; }
  .listen-panel[data-started="true"] .listen-group { gap: 4px; }
  .listen-panel[data-started="true"] #listen-choice-content { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 6px 12px; }
  .listen-panel[data-started="true"] .listen-stats { grid-column: 1; grid-row: 1; margin: 8px 0 0; font-size: .85rem; }
  .listen-panel[data-started="true"] .listen-progress { grid-column: 1; grid-row: 2; }
  .listen-panel[data-started="true"] .listen-audio-row { grid-column: 2; grid-row: 1 / 3; margin: 8px 0 0; }
  .listen-panel[data-started="true"] .listen-audio { width: 48px; height: 48px; }
  .listen-panel[data-started="true"] .listen-audio-row strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .listen-panel[data-started="true"] .listen-grid { grid-column: 1 / -1; grid-row: 3; }
}