/* MatchApp home: owner-approved compact two-row mobile controls, 2026-09-27.
   Presentation only. The canonical controls keep all ids, listeners, auth
   visibility, notification injection and onboarding handlers. This same
   stylesheet is consumed by mobile web and the adult Android WebView. */

/* Cached prior JS must never leave a second guide CTA below the header. */
html body.page-home .home-hero > .ma-how-link {display:none!important}

@media (max-width:600px) {
  /* Short, inset, gold-edged mobile card. No changes to other routes/desktop. */
  html body.page-home #mh-topbox.app-header.ma-home-header {
    box-sizing:border-box!important;
    display:flex!important; flex-direction:column!important;
    align-items:stretch!important; justify-content:center!important;
    width:calc(100% - 12px)!important; max-width:calc(100% - 12px)!important;
    min-width:0!important; min-height:0!important;
    margin:5px auto 7px!important; padding:6px 9px 8px!important;
    gap:4px!important; border-radius:18px!important;
    overflow:visible!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .mh-head {
    display:flex!important; width:100%!important; min-width:0!important;
    justify-content:center!important; align-items:center!important;
    margin:0!important; padding:0!important;
    gap:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .mh-tagline {
    display:none!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header #home-brand-lockup,
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-home-link {
    justify-content:center!important; min-width:0!important; max-width:100%!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-orb-stage {
    width:53px!important; min-width:53px!important; flex:0 0 53px!important;
    height:50px!important; margin:0 3px 0 0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-orb {
    width:55px!important; height:55px!important; top:-3px!important;
    left:0!important; max-width:none!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-copy {
    gap:3px!important; min-width:0!important; max-width:calc(100vw - 110px)!important;
    white-space:nowrap!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-wordmark {
    font-size:clamp(21px,6.6vw,27px)!important; line-height:1!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-word-ai {
    font-size:clamp(23px,7vw,29px)!important; line-height:1!important;
  }

  /* First row: language | sound | bell | avatar | logout.
     Second row: Kids Mode | How it works | settings.
     A guest occupies the absent avatar/logout area with Sign In / Join. */
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions {
    box-sizing:border-box!important;
    display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-auto-flow:row!important; grid-auto-rows:minmax(44px,auto)!important;
    align-items:center!important; align-content:center!important;
    justify-items:stretch!important; justify-content:stretch!important;
    flex-flow:initial!important; width:100%!important; max-width:100%!important;
    min-width:0!important; margin:0!important; padding:0!important;
    column-gap:4px!important; row-gap:4px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > * {
    box-sizing:border-box!important; align-self:center!important; justify-self:stretch!important;
    flex:initial!important; width:100%!important; min-width:0!important;
    max-width:100%!important; margin:0!important; padding:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions
  :is(button,select,a.ma-kids-mode-entry,a.nav-avatar-link,.ma-menu-wrap,#lang-switcher-host) {
    box-sizing:border-box!important; min-height:44px!important; height:44px!important;
    max-width:100%!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > #lang-switcher-host {
    grid-column:1/5!important; grid-row:1!important;
    width:100%!important; min-width:0!important; flex:none!important;
    padding:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > #lang-switcher-host select {
    display:block!important; width:100%!important; min-width:0!important;
    max-width:100%!important; height:44px!important;
    font-size:clamp(11px,3.45vw,13px)!important;
    padding:0 15px 0 7px!important; text-overflow:ellipsis!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .sound-toggle-btn {
    grid-column:5/7!important; grid-row:1!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .matchapp-notification-button {
    grid-column:7/9!important; grid-row:1!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link {
    grid-column:9/11!important; grid-row:1!important;
    background:transparent!important; border:0!important; box-shadow:none!important;
    display:flex!important; justify-content:center!important; align-items:center!important;
  }
  /* Preserve auth.js inline display:none and the DOM hidden state. */
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link[style*="display:none"],
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link[style*="display: none"],
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link[hidden] {
    display:none!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link > .avatar-ring {
    width:40px!important; min-width:40px!important; height:40px!important;
    min-height:40px!important; margin:0!important; padding:2px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > #nav-logout-btn {
    grid-column:11/13!important; grid-row:1!important;
    width:100%!important; min-width:0!important; padding:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > #nav-reg-btn {
    grid-column:9/13!important; grid-row:1!important;
    width:100%!important; min-width:0!important; max-width:100%!important;
    padding:0 2px!important; font-size:clamp(10px,2.85vw,12px)!important;
    white-space:nowrap!important; text-transform:none!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .ma-kids-mode-entry {
    grid-column:1/6!important; grid-row:2!important;
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    width:100%!important; min-width:0!important; padding:0 4px!important;
    gap:5px!important; font-size:clamp(11px,3.25vw,13px)!important;
    white-space:nowrap!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .ma-kids-mode-entry img {
    width:20px!important; min-width:20px!important; height:20px!important;
    object-fit:cover!important; flex-shrink:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .ma-how-button {
    grid-column:6/11!important; grid-row:2!important;
    display:inline-flex!important; justify-content:center!important; align-items:center!important;
    width:100%!important; min-width:0!important; padding:0 2px!important;
    gap:3px!important; font-size:clamp(10.5px,3.05vw,12.5px)!important;
    white-space:nowrap!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .ma-menu-wrap {
    position:relative!important; grid-column:11/13!important; grid-row:2!important;
    width:100%!important; min-width:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions .ma-menu-button {
    display:flex!important; justify-content:center!important; align-items:center!important;
    width:100%!important; min-width:0!important; max-width:100%!important;
    height:44px!important; padding:0!important; gap:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions .ma-menu-button > span {
    display:none!important;
  }
  /* These optional controls are not discarded: they occupy a third row only
     when shown by their original runtime, and remain keyboard/touch accessible. */
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .ma-country-link {
    grid-column:1/5!important; grid-row:3!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > #quota-badge {
    grid-column:5/9!important; grid-row:3!important;
    min-width:0!important; padding:0 3px!important;
    font-size:11px!important; white-space:normal!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .install-wrap {
    grid-column:9/13!important; grid-row:3!important; max-width:100%!important;
    min-width:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > .install-wrap .install-btn {
    width:100%!important; max-width:100%!important; min-width:0!important;
    padding:0 3px!important; font-size:11px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions .ma-menu {
    z-index:1900!important;
  }
}
@media (max-width:345px) {
  html body.page-home #mh-topbox.app-header.ma-home-header {
    padding-inline:7px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-orb-stage {
    width:47px!important; min-width:47px!important; flex-basis:47px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header .ma-brand-orb {
    width:49px!important; height:49px!important; top:0!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions {
    column-gap:3px!important;
  }
  html body.page-home #mh-topbox.app-header.ma-home-header > nav.mh-deck.ma-header-actions > a#profile-link-tab.nav-avatar-link > .avatar-ring {
    width:35px!important; height:35px!important; min-width:35px!important; min-height:35px!important;
  }
}