/* SolAudioLab mobile app common header and feedback placement.
   The Drum Machine mobile shell is the visual and spacing reference. */

.mobile-app-header-info,
.mobile-app-header-account,
.mobile-app-header-actions {
  display: none;
}

body.mobile-focus-active .mobile-app-standard-header,
body.rhythm-mobile-app .mobile-app-standard-header,
body.metronome-mobile-app .mobile-app-standard-header,
body.tuner-mobile-app .mobile-app-standard-header,
body.reference-mobile-app .mobile-app-standard-header,
body.vh-mobile-app .mobile-app-standard-header,
body.room-mobile-app-active .mobile-app-standard-header {
  position: relative !important;
  inset: auto !important;
  z-index: 240;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(35, 40, 50, .96), rgba(24, 28, 35, .98)) !important;
  box-shadow: var(--shadow), var(--inset) !important;
}

body.mobile-focus-active .mobile-app-header-brand,
body.rhythm-mobile-app .mobile-app-header-brand,
body.metronome-mobile-app .mobile-app-header-brand,
body.tuner-mobile-app .mobile-app-header-brand,
body.reference-mobile-app .mobile-app-header-brand,
body.vh-mobile-app .mobile-app-header-brand,
body.room-mobile-app-active .mobile-app-header-brand {
  display: flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.mobile-app-header-brand span {
  color: var(--accent-2) !important;
}

body.mobile-focus-active .mobile-app-header-actions,
body.rhythm-mobile-app .mobile-app-header-actions,
body.metronome-mobile-app .mobile-app-header-actions,
body.tuner-mobile-app .mobile-app-header-actions,
body.reference-mobile-app .mobile-app-header-actions,
body.vh-mobile-app .mobile-app-header-actions,
body.room-mobile-app-active .mobile-app-header-actions {
  grid-column: 2 / -1;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.mobile-focus-active .mobile-app-header-info,
body.mobile-focus-active .mobile-app-header-account,
body.rhythm-mobile-app .mobile-app-header-info,
body.rhythm-mobile-app .mobile-app-header-account,
body.metronome-mobile-app .mobile-app-header-info,
body.metronome-mobile-app .mobile-app-header-account,
body.tuner-mobile-app .mobile-app-header-info,
body.tuner-mobile-app .mobile-app-header-account,
body.reference-mobile-app .mobile-app-header-info,
body.reference-mobile-app .mobile-app-header-account,
body.vh-mobile-app .mobile-app-header-info,
body.vh-mobile-app .mobile-app-header-account,
body.room-mobile-app-active .mobile-app-header-info,
body.room-mobile-app-active .mobile-app-header-account {
  display: inline-flex !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 999px !important;
  background: #11161c !important;
  color: #dce5f0 !important;
  appearance: none;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.mobile-focus-active .mobile-app-header-info,
body.rhythm-mobile-app .mobile-app-header-info,
body.metronome-mobile-app .mobile-app-header-info,
body.tuner-mobile-app .mobile-app-header-info,
body.reference-mobile-app .mobile-app-header-info,
body.vh-mobile-app .mobile-app-header-info,
body.room-mobile-app-active .mobile-app-header-info {
  min-width: 46px !important;
}

body.mobile-focus-active .mobile-app-header-account,
body.rhythm-mobile-app .mobile-app-header-account,
body.metronome-mobile-app .mobile-app-header-account,
body.tuner-mobile-app .mobile-app-header-account,
body.reference-mobile-app .mobile-app-header-account,
body.vh-mobile-app .mobile-app-header-account,
body.room-mobile-app-active .mobile-app-header-account {
  min-width: 64px !important;
}

.mobile-app-header-account > span[aria-hidden="true"] {
  display: none !important;
}

body.mobile-focus-active .mobile-app-header-account::before,
body.rhythm-mobile-app .mobile-app-header-account::before,
body.metronome-mobile-app .mobile-app-header-account::before,
body.tuner-mobile-app .mobile-app-header-account::before,
body.reference-mobile-app .mobile-app-header-account::before,
body.vh-mobile-app .mobile-app-header-account::before,
body.room-mobile-app-active .mobile-app-header-account::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #8c98a8;
  box-shadow: 0 0 0 3px rgba(140, 152, 168, .1);
}

.mobile-app-header-info.active,
.mobile-app-header-info.is-active,
.mobile-app-header-info[aria-expanded="true"] {
  border-color: rgba(66, 211, 107, .48) !important;
  color: #a9ffbd !important;
}

.mobile-app-header-account.is-signed-in {
  border-color: rgba(66, 211, 107, .42) !important;
  color: #a9ffbd !important;
}

.mobile-app-header-account.is-signed-in::before {
  background: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(66, 211, 107, .12) !important;
}

body.metronome-mobile-app:not(.full-mode) .metronome-shell,
body.tuner-mobile-app .tuner-page,
body.reference-mobile-app .reference-shell,
body.room-mobile-app-active .room-clap-page {
  row-gap: 6px !important;
}

body.rhythm-mobile-app .rhythm-shell {
  grid-template-rows: 46px 38px minmax(0, 1fr) !important;
}

body.reference-mobile-app .reference-shell,
body.room-mobile-app-active .room-clap-page {
  padding-left: max(6px, env(safe-area-inset-left)) !important;
  padding-right: max(6px, env(safe-area-inset-right)) !important;
}

body.vh-mobile-app .virtual-shell {
  row-gap: 6px !important;
  padding-top: max(6px, env(safe-area-inset-top)) !important;
  padding-left: max(6px, env(safe-area-inset-left)) !important;
  padding-right: max(6px, env(safe-area-inset-right)) !important;
}

body.room-mobile-app-active .room-clap-page {
  grid-template-rows: 46px auto minmax(0, 1fr) auto !important;
  padding-top: max(6px, env(safe-area-inset-top)) !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

body.mobile-focus-active .tool-feedback-float,
body.rhythm-mobile-app .tool-feedback-float,
body.metronome-mobile-app:not(.full-mode) .tool-feedback-float,
body.tuner-mobile-app .tool-feedback-float,
body.reference-mobile-app .tool-feedback-float,
body.vh-mobile-app .tool-feedback-float,
body.room-mobile-app-active .tool-feedback-float {
  display: none !important;
}

body.mobile-focus-active .tool-feedback[data-mobile-info-feedback],
body.rhythm-mobile-app .tool-feedback[data-mobile-info-feedback],
body.metronome-mobile-app:not(.full-mode) .tool-feedback[data-mobile-info-feedback],
body.tuner-mobile-app .tool-feedback[data-mobile-info-feedback],
body.reference-mobile-app .tool-feedback[data-mobile-info-feedback],
body.vh-mobile-app .tool-feedback[data-mobile-info-feedback],
body.room-mobile-app-active .tool-feedback[data-mobile-info-feedback] {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

[data-mobile-feedback-host] > .tool-feedback[data-mobile-info-feedback] {
  display: block !important;
  margin: 12px 0 0 !important;
}

body.reference-mobile-app .mobile-info-feedback-host {
  padding: 0 18px 18px;
}

@media (max-width: 900px) {
  body.speaker-test-page .mobile-app-standard-header,
  body.delay-app-page .mobile-app-standard-header,
  body.capo-app-page .mobile-app-standard-header {
    position: relative !important;
    inset: auto !important;
    z-index: 240;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(35, 40, 50, .96), rgba(24, 28, 35, .98)) !important;
    box-shadow: var(--shadow), var(--inset) !important;
  }

  body.speaker-test-page .mobile-app-header-brand,
  body.delay-app-page .mobile-app-header-brand,
  body.capo-app-page .mobile-app-header-brand {
    display: flex !important;
    align-items: baseline !important;
    min-width: 0 !important;
    color: var(--text) !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.05em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body.speaker-test-page .mobile-app-header-info,
  body.speaker-test-page .mobile-app-header-account,
  body.delay-app-page .mobile-app-header-info,
  body.delay-app-page .mobile-app-header-account,
  body.capo-app-page .mobile-app-header-info,
  body.capo-app-page .mobile-app-header-account {
    display: inline-flex !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    background: #11161c !important;
    color: #dce5f0 !important;
    appearance: none;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.speaker-test-page .mobile-app-header-info,
  body.delay-app-page .mobile-app-header-info,
  body.capo-app-page .mobile-app-header-info {
    min-width: 46px !important;
  }

  body.speaker-test-page .mobile-app-header-account,
  body.delay-app-page .mobile-app-header-account,
  body.capo-app-page .mobile-app-header-account {
    min-width: 64px !important;
  }

  body.speaker-test-page .mobile-app-header-account::before,
  body.delay-app-page .mobile-app-header-account::before,
  body.capo-app-page .mobile-app-header-account::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #8c98a8;
    box-shadow: 0 0 0 3px rgba(140, 152, 168, .1);
  }

  body.speaker-test-page main.app,
  body.delay-app-page .delay-shell,
  body.capo-app-page .capo-shell {
    row-gap: 6px !important;
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
  }

  body.speaker-test-page main.app {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  body.delay-app-page .delay-shell {
    grid-template-rows: 46px minmax(0, 1fr) auto !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  body.capo-app-page .capo-shell {
    grid-template-rows: 46px minmax(0, 1fr) 62px !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  body.speaker-test-page .tool-feedback-float,
  body.delay-app-page .tool-feedback-float,
  body.capo-app-page .tool-feedback-float {
    display: none !important;
  }

  body.speaker-test-page .tool-feedback[data-mobile-info-feedback],
  body.delay-app-page .tool-feedback[data-mobile-info-feedback],
  body.capo-app-page .tool-feedback[data-mobile-info-feedback] {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  body.mobile-focus-active .mobile-app-standard-header,
  body.rhythm-mobile-app .mobile-app-standard-header,
  body.metronome-mobile-app:not(.full-mode) .mobile-app-standard-header,
  body.tuner-mobile-app .mobile-app-standard-header,
  body.reference-mobile-app .mobile-app-standard-header,
  body.vh-mobile-app .mobile-app-standard-header,
  body.room-mobile-app-active .mobile-app-standard-header,
  body.speaker-test-page .mobile-app-standard-header,
  body.delay-app-page .mobile-app-standard-header,
  body.capo-app-page .mobile-app-standard-header {
    min-height: 44px !important;
    height: 44px !important;
  }

  body.mobile-focus-active .drum-app-shell,
  body.rhythm-mobile-app .rhythm-shell,
  body.metronome-mobile-app:not(.full-mode) .metronome-shell,
  body.tuner-mobile-app .tuner-page,
  body.reference-mobile-app .reference-shell,
  body.vh-mobile-app .virtual-shell,
  body.room-mobile-app-active .room-clap-page,
  body.speaker-test-page main.app,
  body.delay-app-page .delay-shell,
  body.capo-app-page .capo-shell {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-left: max(5px, env(safe-area-inset-left)) !important;
    padding-right: max(5px, env(safe-area-inset-right)) !important;
  }

  body.rhythm-mobile-app .rhythm-shell {
    grid-template-rows: 44px 38px minmax(0, 1fr) !important;
  }

  body.metronome-mobile-app:not(.full-mode) .metronome-shell,
  body.tuner-mobile-app .tuner-page {
    grid-template-rows: 44px minmax(0, 1fr) 38px 64px 48px !important;
  }

  body.tuner-mobile-app .tuner-page {
    grid-template-rows: 44px minmax(0, 1fr) 48px !important;
  }

  body.reference-mobile-app .reference-shell[data-reference-mobile-view] > .site-nav {
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }

  body.vh-mobile-app .virtual-shell {
    grid-template-rows: 44px 38px minmax(0, 1fr) auto !important;
  }

  body.room-mobile-app-active .room-clap-page {
    grid-template-rows: 44px auto minmax(0, 1fr) auto !important;
  }

  body.speaker-test-page main.app {
    grid-template-rows: 44px minmax(0, 1fr) 58px !important;
  }

  body.speaker-test-page.speaker-playback-visible main.app {
    grid-template-rows: 44px minmax(0, 1fr) auto 58px !important;
  }

  body.delay-app-page .delay-shell {
    grid-template-rows: 44px minmax(0, 1fr) auto !important;
  }

  body.capo-app-page .capo-shell {
    grid-template-rows: 44px minmax(0, 1fr) 60px !important;
  }
}

@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  body.mobile-focus-active .mobile-app-standard-header,
  body.rhythm-mobile-app .mobile-app-standard-header,
  body.metronome-mobile-app:not(.full-mode) .mobile-app-standard-header,
  body.tuner-mobile-app .mobile-app-standard-header,
  body.reference-mobile-app .mobile-app-standard-header,
  body.vh-mobile-app .mobile-app-standard-header,
  body.room-mobile-app-active .mobile-app-standard-header,
  body.speaker-test-page .mobile-app-standard-header,
  body.delay-app-page .mobile-app-standard-header,
  body.capo-app-page .mobile-app-standard-header {
    min-height: 40px !important;
    height: 40px !important;
    padding: 5px 8px !important;
  }

  body.mobile-focus-active .mobile-app-header-info,
  body.mobile-focus-active .mobile-app-header-account,
  body.rhythm-mobile-app .mobile-app-header-info,
  body.rhythm-mobile-app .mobile-app-header-account,
  body.metronome-mobile-app .mobile-app-header-info,
  body.metronome-mobile-app .mobile-app-header-account,
  body.tuner-mobile-app .mobile-app-header-info,
  body.tuner-mobile-app .mobile-app-header-account,
  body.reference-mobile-app .mobile-app-header-info,
  body.reference-mobile-app .mobile-app-header-account,
  body.vh-mobile-app .mobile-app-header-info,
  body.vh-mobile-app .mobile-app-header-account,
  body.room-mobile-app-active .mobile-app-header-info,
  body.room-mobile-app-active .mobile-app-header-account,
  body.speaker-test-page .mobile-app-header-info,
  body.speaker-test-page .mobile-app-header-account,
  body.delay-app-page .mobile-app-header-info,
  body.delay-app-page .mobile-app-header-account,
  body.capo-app-page .mobile-app-header-info,
  body.capo-app-page .mobile-app-header-account {
    height: 30px !important;
    min-height: 30px !important;
    padding-inline: 8px !important;
    font-size: 9px !important;
  }

  body.mobile-focus-active .drum-app-shell,
  body.rhythm-mobile-app .rhythm-shell,
  body.metronome-mobile-app:not(.full-mode) .metronome-shell,
  body.tuner-mobile-app .tuner-page,
  body.reference-mobile-app .reference-shell,
  body.vh-mobile-app .virtual-shell,
  body.room-mobile-app-active .room-clap-page,
  body.speaker-test-page main.app,
  body.delay-app-page .delay-shell,
  body.capo-app-page .capo-shell {
    row-gap: 4px !important;
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    padding-left: max(5px, env(safe-area-inset-left)) !important;
    padding-right: max(5px, env(safe-area-inset-right)) !important;
  }

  body.rhythm-mobile-app .rhythm-shell {
    grid-template-rows: 40px 38px minmax(0, 1fr) !important;
  }

  body.metronome-mobile-app:not(.full-mode) .metronome-shell {
    grid-template-rows: 40px minmax(0, 1fr) 38px 64px 48px !important;
  }

  body.tuner-mobile-app .tuner-page {
    grid-template-rows: 40px minmax(0, 1fr) 46px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.tuner-mobile-app .tuner-page > .site-nav {
    grid-row: 1 !important;
  }

  body.tuner-mobile-app .tuner-console {
    grid-row: 2 !important;
  }

  body.tuner-mobile-app .tuner-mobile-app-nav {
    grid-row: 3 !important;
  }

  body.reference-mobile-app .reference-shell[data-reference-mobile-view] > .site-nav {
    min-height: 40px !important;
    flex: 0 0 40px !important;
  }

  body.vh-mobile-app .virtual-shell {
    grid-template-rows: 40px 38px minmax(0, 1fr) auto !important;
  }

  body.room-mobile-app-active .room-clap-page {
    grid-template-rows: 40px auto minmax(0, 1fr) auto !important;
    row-gap: 4px !important;
  }

  body.speaker-test-page main.app {
    grid-template-rows: 40px minmax(0, 1fr) 58px !important;
    row-gap: 4px !important;
  }

  body.speaker-test-page.speaker-playback-visible main.app {
    grid-template-rows: 40px minmax(0, 1fr) auto 58px !important;
  }

  body.delay-app-page .delay-shell {
    grid-template-rows: 40px minmax(0, 1fr) auto !important;
    row-gap: 4px !important;
  }

  body.capo-app-page .capo-shell {
    grid-template-rows: 40px minmax(0, 1fr) 54px !important;
    row-gap: 4px !important;
  }
}