/* Main home only: keep native/browser controls outside the usable composition. */
@media (max-width: 620px), (max-width: 1100px) and (max-height: 500px) {
  :root .site-shell {
    position: fixed;
    inset: var(--home-viewport-top, 0px) 0 auto;
    height: var(--home-viewport-height, 100svh);
  }
  .site-shell .site-header {
    position: absolute;
    top: 0;
    min-height: calc(58px + env(safe-area-inset-top));
    padding-top: calc(9px + env(safe-area-inset-top));
  }
  .site-shell .site-header :is(.theme-toggle, .brand-ai) {
    top: calc(50% + env(safe-area-inset-top) / 2);
  }
  .site-shell .landing {
    height: 100%;
    min-height: 0;
    padding: calc(72px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .site-shell .landing-grid {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
  }
  .site-shell .choice-stack {
    height: 100%;
    max-height: clamp(322px, calc(var(--home-viewport-height, 100svh) * .52), 404px);
    min-height: 0;
  }
  .site-shell .language-dock {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .site-shell .language-toggle {
    min-height: 44px;
  }
  :root[data-home-viewport='compact'] .site-shell .site-header {
    min-height: calc(50px + env(safe-area-inset-top));
  }
  :root[data-home-viewport='compact'] .site-shell .landing {
    padding-top: calc(58px + env(safe-area-inset-top));
  }
  :root[data-home-viewport='compact'] .site-shell .landing-grid { gap: 14px; }
  :root[data-home-viewport='compact'] .site-shell .hero-copy h1 { font-size: 29px; }
  :root[data-home-viewport='compact'] .site-shell .choice-stack {
    max-height: min(calc(var(--home-viewport-height, 100svh) * .6), 318px);
  }
  :root[data-home-viewport='compact'] .site-shell .choice { padding-block: 7px; }
  :root[data-home-viewport='compact'] .site-shell .choice-copy strong { font-size: 23px; }
  :root[data-home-viewport='compact'] .site-shell .choice-arrow { width: 34px; height: 34px; }
}

/* A rotated phone has enough width for two columns, but little vertical room. */
@media (min-width: 621px) and (max-width: 1100px) and (max-height: 500px) {
  :root[data-home-viewport] .site-shell .landing {
    padding: calc(68px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }
  .site-shell .landing-grid {
    width: min(100%, 1000px);
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    transform: none;
  }
  .site-shell .hero-copy { top: 0; width: 100%; max-width: 350px; }
  :root[data-home-viewport] .site-shell .choice-stack {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    max-height: none;
    padding: 6px;
  }
  :root[data-home-viewport] .site-shell .choice {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    padding: 5px 14px;
  }
}