/* Founder mobile general pass — 2026-10-21.
   Late, deliberately narrow overrides for the requested phone polish. */

/* Home and partnership pages both used .hs-step. Once both lazy CSS chunks have loaded in one SPA
   session, Home's numbered-step styles can shrink partnership headings into a 20px badge. Keep the
   partnership visual's own typography/layout authoritative. */
.pp-page .hs-step {
  display: block !important;
  align-items: initial !important;
  gap: initial !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.pp-page .hs-step .hs-body b,
.pp-page .hs-step.is-on .hs-body b {
  display: block !important;
  width: auto !important;
  height: auto !important;
  place-items: initial !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Never let iOS overscroll / safe-area reveal the GRD page band above the app header. */
@media (max-width: 800px) {
  html,
  body {
    background: #f8f7f4 !important;
  }

  /* Ordinary pages keep the warm site chrome. Dark detail pages keep the green header behind the
     white wordmark, but their hamburger/search controls return to the original light treatment. */
  html body .app-shell > .topbar {
    background: #f8f7f4 !important;
  }
  html body.dark-detail .app-shell > .topbar {
    background: var(--grd-bg-raised, #1f3d36) !important;
  }
  html body.dark-detail .app-shell > .topbar :is(.mobile-menu-button, .global-search) {
    background: #f5f4f0 !important;
    border-color: #e8e5dd !important;
    color: #0f1a17 !important;
    box-shadow: none !important;
  }
  html body.dark-detail .app-shell > .topbar :is(.mobile-menu-button, .global-search) svg {
    color: #0f1a17 !important;
    stroke: currentColor !important;
  }
  /* The Build detail trial previously forced its hamburger green with a more specific selector. */
  html body.dark-detail:has(#main .build-page) .app-shell > .topbar .mobile-menu-button {
    background: #f5f4f0 !important;
    border-color: #e8e5dd !important;
    color: #0f1a17 !important;
  }
  html body.dark-detail:has(#main .build-page) .app-shell > .topbar .mobile-menu-button svg {
    color: #0f1a17 !important;
    stroke: currentColor !important;
  }

  /* The compact global-search button is an icon control on phones. Keep the glyph mathematically centred. */
  html body .topbar .global-search {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
  }
  html body .topbar .global-search > svg,
  html body .topbar .global-search svg {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  /* Directory listings only: the complete header is GRD, the wordmark is white, and menu/search
     are raised green controls. Detail pages are excluded and retain their own established controls. */
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .app-shell > .topbar,
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .app-shell > .topbar {
    background: var(--grd-bg, #16302b) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
  }
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .topbar .mobile-brand,
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .topbar .mobile-brand__name,
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .topbar .mobile-brand,
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .topbar .mobile-brand__name {
    color: #fff !important;
  }
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .topbar :is(.mobile-menu-button, .global-search),
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .topbar :is(.mobile-menu-button, .global-search) {
    background: var(--grd-bg-raised, #1f3d36) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
  }
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .topbar :is(.mobile-menu-button, .global-search) svg,
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .topbar :is(.mobile-menu-button, .global-search) svg {
    color: #fff !important;
    stroke: #fff !important;
  }

  /* On directory listings this becomes the topmost opaque layer when it sticks. The header/finder
     cannot ghost through above it while the visitor scans results. */
  html body:not(.dark-detail):has(.uc-results-bar.listing-toolbar) .uc-results-bar.listing-toolbar,
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar {
    top: 0 !important;
    z-index: 30 !important;
    background: rgba(248, 247, 244, 0.98) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
  }

  /* Builds: count, sort and view switch share one visual centre line. */
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .results-label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    min-height: 38px !important;
    width: 100% !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .results-label > span[role="status"] {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 32px !important;
    line-height: 1.2 !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .listing-sort {
    display: flex !important;
    align-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .listing-sort > span {
    display: none !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .listing-sort select {
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12.5px !important;
    line-height: 32px !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .view-toggle {
    align-self: center !important;
    justify-self: end !important;
    height: 32px !important;
    margin: 0 !important;
  }
  html body:not(.dark-detail):has(.build-discovery-layout .bd-finder) .build-discovery-layout .listing-toolbar .view-toggle button {
    min-height: 30px !important;
    height: 30px !important;
  }

  /* Bottom navigation: selected destination is transparent mirrored glass rather than a white tile. */
  html body .mobile-nav a.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.20), rgba(218, 233, 226, 0.06)) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
    backdrop-filter: blur(24px) saturate(175%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
      0 0 0 0.5px rgba(15, 26, 23, 0.05),
      0 8px 20px -15px rgba(15, 26, 23, 0.42) !important;
  }
}

/* Home: signed-in workspaces get one compact GRD launch rail before the job-first hero. */
.home-workspace-shortcuts {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.home-workspace-shortcuts > a {
  min-width: 0;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(159, 211, 184, 0.26);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--grd-bg, #16302b), var(--grd-bg-raised, #1f3d36));
  color: var(--grd-ink, #eef5f1);
  box-shadow: 0 10px 26px -20px rgba(10, 37, 29, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.home-workspace-shortcuts .home-workspace-shortcuts__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--grd-accent, #9fd3b8);
}
.home-workspace-shortcuts .home-workspace-shortcuts__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-workspace-shortcuts strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-workspace-shortcuts small {
  color: var(--grd-soft, #bcd6c9);
  font-size: 10.5px;
  line-height: 1.2;
}
.home-workspace-shortcuts .home-workspace-shortcuts__go {
  color: var(--grd-accent, #9fd3b8);
}
.home-workspace-shortcuts > a:hover {
  background: linear-gradient(135deg, #1b3931, #25483e);
}

@media (max-width: 600px) {
  .home-workspace-shortcuts {
    margin: -2px 0 10px;
    gap: 6px;
  }
  .home-workspace-shortcuts > a {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 13px;
  }
  .home-workspace-shortcuts .home-workspace-shortcuts__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .home-workspace-shortcuts .home-workspace-shortcuts__icon svg {
    width: 16px;
    height: 16px;
  }
  .home-workspace-shortcuts strong {
    font-size: 12px;
  }
  .home-workspace-shortcuts small {
    font-size: 9.5px;
  }

  /* Footer brand lockup: reserve the wordmark's real width so the requested two-line copy cannot
     start underneath it. The text stays beside the brand rather than dropping below. */
  html body footer .footer-brand {
    display: grid !important;
    grid-template-columns: 19px 78px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
  }
  html body footer .footer-brand > span {
    display: none !important;
  }
  html body footer .footer-brand::after {
    content: "We brings the different ways to solve a business problem into one place - solutions people have built, technologies that can do it, and the providers who can implement it.";
    grid-column: 3;
    min-width: 0;
    color: #66666b;
    font-size: 7px;
    line-height: 1.16;
    letter-spacing: -0.035em;
    font-weight: 450;
    white-space: normal;
  }
  html body footer .footer-brand .wordmark {
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body footer .footer-brand img.oracnet-mark {
    width: 19px !important;
    height: 19px !important;
  }

  /* Create Build start screen: four routes become a short 2 × 2 choice grid. */
  html body .create-build .cb-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body .create-build .cb-route {
    min-height: 0 !important;
    padding: 11px !important;
    gap: 3px !important;
    border-radius: 13px !important;
  }
  html body .create-build .cb-route-icon {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 2px !important;
    border-radius: 9px !important;
  }
  html body .create-build .cb-route-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  html body .create-build .cb-route strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  html body .create-build .cb-route em {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  html body .create-build .cb-route-body {
    display: none !important;
  }
  html body .create-build .cb-route-go {
    min-height: 30px !important;
    margin-top: 5px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
  }
  html body .create-build .cb-route-go svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 390px) {
  html body footer .footer-brand {
    grid-template-columns: 18px 70px minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  html body footer .footer-brand::after {
    font-size: 6.35px;
    line-height: 1.14;
    letter-spacing: -0.04em;
  }
  html body footer .footer-brand .wordmark {
    font-size: 13px !important;
  }
  html body footer .footer-brand img.oracnet-mark {
    width: 18px !important;
    height: 18px !important;
  }
}