/* Mobile browser-edge and topbar alignment overrides. */
:root:not([data-theme="dark"]) {
  --app-chrome-bg: #f5f3ee;
}

@media (max-width: 680px) {
  html,
  body {
    background-color: var(--app-chrome-bg) !important;
    background-image: none !important;
  }

  body::before,
  body::after {
    background: var(--app-chrome-bg) !important;
  }

  body::before {
    height: env(safe-area-inset-top, 0px) !important;
  }

  body::after {
    height: env(safe-area-inset-bottom, 0px) !important;
  }

  .page-controls {
    top: max(8px, env(safe-area-inset-top)) !important;
    align-items: flex-start;
  }

  .theme-toggle,
  .about-quick,
  .invite-quick,
  .results-quick,
  .wizard-toggle,
  .user-feature-button {
    display: grid;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    place-items: center;
    padding: 0 !important;
    line-height: 1;
  }

  .theme-toggle {
    font-size: 1rem;
  }

  .user-feature-shell {
    width: 36px;
    height: 36px;
  }

  #appStep:not([hidden]):not([data-results-view]) {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }

  #appStep[data-results-view] .app-topbar {
    min-height: calc(72px + env(safe-area-inset-top)) !important;
    align-items: flex-start !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      8px
      max(10px, env(safe-area-inset-left)) !important;
  }

  #appStep:not([hidden]) .app-heading,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: start !important;
    min-height: 36px !important;
  }

  #appStep:not([hidden]) .brand-menu-shell,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-menu-shell {
    align-self: start !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  #appStep:not([hidden]) .app-heading .brand-mark,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-mark {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background-size: 100% 100% !important;
  }

  body:has(#appStep:not([hidden])) .invite-quick,
  body:has(#appStep:not([hidden])) .results-quick {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--text) 64%, var(--muted-text)) !important;
  }

  :root[data-theme="dark"] body:has(#appStep:not([hidden])) .invite-quick,
  :root[data-theme="dark"] body:has(#appStep:not([hidden])) .results-quick {
    color: color-mix(in srgb, var(--soft-white, #f2ecdf) 72%, var(--accent)) !important;
  }

  body:has(#appStep:not([hidden])) .invite-quick svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2.15 !important;
  }

  body:has(#appStep:not([hidden])) .results-quick::before {
    width: 20px;
    height: 15px;
    border-width: 2.15px;
  }

  body:has(#appStep:not([hidden])) .results-quick::after {
    width: 10px;
    height: 2.15px;
  }

  body:has(#appStep:not([hidden])) .invite-quick.copied {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--success-text) !important;
  }

  body:has(#appStep:not([hidden])) .results-quick.selected {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--coral, #ff6f5e) !important;
  }

  body:has(#appStep:not([hidden])) .results-quick.selected::before {
    border-color: currentColor;
    background: currentColor;
  }

  body:has(#appStep:not([hidden])) .results-quick.selected::after {
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--panel-bg), 0 -5px 0 var(--panel-bg);
  }
}