/* /search — v4's widgets in the dark Data look. Loaded after chrome.css. */
main { padding-top: 76px; }
h1, h2 { font-weight: 400 !important; }
.btn { text-decoration: none; }
/* soft rounded cards, no light surfaces */
.rounded-md, .rounded-xl { border-radius: 16px; }
.ship-card { background: var(--bg-2) !important; box-shadow: 0 0 0 1px var(--line) !important; border-radius: 20px !important; }
.ship-card:hover { box-shadow: 0 0 0 1px var(--line-2) !important; }
.accent-surface { background: rgba(231,164,107,.08); color: var(--amber); box-shadow: 0 0 0 1px rgba(231,164,107,.22) inset; }
/* the CTA gets a full-bleed 0s-and-1s range */
.search-cta { position: relative; margin: 13rem 0 0; padding: 9rem 0 22rem; }
.search-cta > canvas.cn-field { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.search-cta::before { left: 50%; right: auto; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--bg) 0%, var(--sky-2) 45%, var(--bg) 100%); }
.search-cta :is(h2, p) { text-shadow: 0 0 6px var(--bg), 0 0 14px var(--bg), 0 0 28px var(--bg); }
#start .text-g700 { color: var(--fg-2); }
footer.foot { margin-top: 0; }
/* on small screens the live map sits behind the headline: halo the copy so it stays legible */
@media (max-width: 1023px) {
  #heroSec header :is(h1, p) { text-shadow: 0 0 8px var(--bg), 0 0 18px var(--bg), 0 0 30px var(--bg); }
  #mapWrap { opacity: .35 !important; }
}

/* hero: centred copy above a large framed map */
.map-panel { position: relative; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); padding: 56px 32px 150px; text-align: left; overflow: hidden; }
.map-legend { position: absolute; top: 22px; right: 26px; display: grid; gap: 8px; justify-items: end; font: 400 13px var(--mono); color: var(--fg-2); z-index: 3; }
.map-legend span { display: inline-flex; align-items: center; gap: 9px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.map-log { position: absolute; left: 28px; bottom: 26px; width: min(460px, 80%); z-index: 3; }
#mapLog { font-size: 13px; }
@media (max-width: 1023px) { #heroSec header :is(h1, p) { text-shadow: none; } #mapWrap { opacity: 1 !important; } .map-panel { padding: 64px 12px 140px; } }
/* "New:" announcement pill in green */
.accent-surface { background: rgba(123,216,143,.12) !important; color: var(--green) !important; box-shadow: 0 0 0 1px rgba(123,216,143,.28) inset !important; }
/* the rotating use-case readout lives in the map panel's lower right */
.map-uc { position: absolute; right: 28px; bottom: 26px; width: min(380px, 42%); z-index: 3; text-align: left; }
.map-uc #ucKicker { font-size: 11px; }
@media (max-width: 760px) { .map-panel { padding-bottom: 290px; } .map-uc { left: 20px; right: 20px; width: auto; bottom: 150px; } }

/* hiring hero: a person searching online, drawn in 0s and 1s, behind the copy and the top of the map */
#heroSec { isolation: isolate; }
#heroSec > canvas.hero-searcher { position: absolute; z-index: -1; top: -80px; left: 50%; transform: translateX(-50%); width: 100vw; height: 980px; pointer-events: none; }
#heroSec header :is(h1, p) { text-shadow: 0 0 8px var(--bg), 0 0 18px var(--bg), 0 0 32px var(--bg); }
.map-panel { background: var(--bg-2); }
.gtabs button[aria-selected="true"] { border-color: var(--fg); }

/* hiring: the person-searching hero fills the screen; the map gets its own section below */
#heroSec { min-height: calc(100svh - 76px); padding: 40px 0 120px; }
#heroSec > canvas.hero-searcher { top: -76px; height: calc(100% + 76px); }
#heroSec::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 180px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
#mapSec { padding: 40px 0 0; }
#heroSec .accent-surface { background: rgba(18,32,22,.92) !important; backdrop-filter: blur(6px); }

/* hiring hero v3: dusk sky gradient on top, the 0s-and-1s scene sits lower and fades up into it */
#heroSec::before { content: ""; position: absolute; z-index: -2; left: 50%; top: -76px; bottom: 0; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 70%, var(--bg) 100%); }
#heroSec > canvas.hero-searcher { top: 16%; height: 84%; }

/* hiring hero: copy sits high in the solid sky, the scene below */
#heroSec { justify-content: flex-start; padding-top: clamp(64px, 11vh, 120px); }
#heroSec > canvas.hero-searcher { top: 30%; height: 70%; }

/* hiring hero: lift the copy up into the solid sky */
#heroSec { justify-content: flex-start; padding-top: clamp(64px, 11vh, 120px); }
/* Search pages: the sky above the 0s-and-1s scenes is our flat dark background */
html body, :root body { --sky-1: #121212; --sky-2: #121212; --sky-3: #121212; }
/* client band sits in the dark strip at the foot of the hiring hero */
#heroSec .hero-band { position: absolute; left: 0; right: 0; bottom: 56px; padding: 0; }
#mapSec .lg-map-head { display: grid; gap: 14px; margin: 0 0 32px; text-align: left; }
#mapSec { padding-top: 96px; }
/* announcement pills: dark grey, not green */
#heroSec .accent-surface, .accent-surface { background: rgba(38,38,40,.92) !important; color: var(--fg-2) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset !important; }
#heroSec .accent-surface a { color: var(--fg) !important; }