.discovery-radar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 18px;
  grid-column: 1/-1;
}
.radar-copy {
  min-width: 0;
  flex: 1;
}
.radar-copy strong {
  font-size: 18px;
}
.radar-copy p {
  margin: 4px 0;
}
.radar-copy .search-near {
  margin: 8px 0;
  flex-wrap: wrap;
}
.radar-orb {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border-radius: 50%;
  border: 1px solid #abc4ab;
  position: relative;
  overflow: hidden;
  background: repeating-radial-gradient(circle, #edf4e9 0 11px, #bad0b6 12px, #edf4e9 13px 24px);
}
.radar-orb .radar-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 70%, #5f925e66);
  opacity: 0.35;
}
.is-scanning .radar-orb .radar-sweep {
  animation: radar-sweep 1.6s linear infinite;
  opacity: 1;
}
.availability-context {
  color: var(--color-muted);
  font-size: 14px;
  margin: 16px 0;
}
.radar-search .search-primary {
  width: 100%;
}
@keyframes radar-sweep {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-scanning .radar-orb .radar-sweep {
    animation: none;
  }
}
@media (max-width: 600px) {
  .search-lede {
    margin: 12px 0;
  }
  .search-lede h1 {
    font-size: 26px;
  }
  .discovery-radar {
    gap: 10px;
    padding: 4px 0 12px;
  }
  .radar-orb {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }
  .radar-copy strong {
    font-size: 16px;
  }
  .radar-copy .field-help {
    font-size: 12px;
  }
  .discovery-results .talent-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    padding: 0;
    align-items: stretch;
  }
  .discovery-results .talent-card .photo-wrap {
    height: 100%;
    min-height: 160px;
    aspect-ratio: auto;
    border-radius: 16px 0 0 16px;
  }
  .discovery-results .photo-wrap > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .discovery-results .talent-info {
    padding: 12px;
    min-width: 0;
  }
  .discovery-results .talent-name {
    flex-wrap: wrap;
    gap: 4px;
  }
  .discovery-results .talent-bottom {
    flex-wrap: wrap;
    gap: 6px;
  }
  .discovery-results .photo-badges {
    left: 4px;
    right: 4px;
    top: 6px;
    flex-wrap: wrap;
  }
  .discovery-results .photo-badges .badge {
    font-size: 9px;
    padding: 3px;
    white-space: normal;
  }
  /* Kept on small phones too: what someone does is the reason to tap. */
  .discovery-results .tags {
    gap: 4px;
    margin: 6px 0;
  }
  .discovery-results .tag {
    font-size: 11px;
    padding: 2px 8px;
  }
  .discovery-results .talent-open {
    margin: 6px 0;
  }
  .discovery-results .talent-location {
    font-size: 12px;
  }
  .discovery-results .photo-lock {
    font-size: 11px;
    padding: 4px;
  }
  .discovery-results .talent-price {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .search-lede > .subtitle { display: none; }
  .search-panel:has(.radar-search) { padding: 16px; }
  .radar-search { gap: 10px; }
  /* The line saying what the scan looks for stays: it is the answer to the
     first question anybody asks of a circle with no label, and hiding it on
     phones hid it on the device this is mostly used from. The privacy note
     after it is the one that can wait for a wider screen. */
  .radar-copy > .field-help + .field-help { display: none; }
  .radar-copy #near-status:empty { display: none; }
  .radar-search .discovery-refine > summary { padding: 8px 0; }
}

button.radar-orb { padding: 8px; color: var(--color-primary-dark); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 5px #edf4e966; }
button.radar-orb:hover { border-color: var(--color-primary); }
button.radar-orb:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
button.radar-orb:disabled { cursor: wait; opacity: .8; }
/* The pill has to fit inside a circle, and the circle clips it: a label wider
   than the chord at its own height gets its corners sliced off and reads as a
   rendering fault. Held inside the widest text this button ever shows. */
.radar-orb .radar-button-label { position: relative; z-index: 1; font-size: 13px; font-weight: 700; line-height: 1.35;
  background: #f6faf2e8; border-radius: 16px; padding: 6px 10px; max-width: 82%; text-align: center; }

/* The opening screen: one circle, centred, filling what is left of the viewport
   under the header. Before a scan there is exactly one thing to do here, so
   nothing competes with it for the eye — and at this size the circle reads as
   an instrument rather than a button on a form. */
.search-panel.discovery-start {
  min-height: min(62vh, 520px);
  display: grid;
  place-items: center;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.discovery-start .radar-search {
  width: 100%;
}
.discovery-start .discovery-radar {
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
.discovery-start .radar-orb {
  --radar-size: min(320px, calc(100vw - 88px));
  width: var(--radar-size);
  height: var(--radar-size);
  flex: 0 0 var(--radar-size);
}
.discovery-start .radar-orb .radar-button-label {
  font-size: 17px;
  padding: 10px 16px;
  max-width: 76%;
}
.discovery-start .radar-copy {
  flex: 0 0 auto;
}

/* The header is sticky, so scrolling the results to the top of the viewport
   hides their heading underneath it. */
#results {
  scroll-margin-top: 104px;
}

#results > .section-heading { margin: 18px 0 12px; }
#results .empty-state { padding: 24px 16px; }
#results .empty-state h2 { font-size: 20px; }
.radar-copy .search-settings-trigger { background: transparent; color: var(--color-primary-dark); border: 0; box-shadow: none; padding: 10px 14px; min-height: 44px; }
.search-settings-dialog { border: 1px solid #dce5d7; border-radius: 24px; padding: 28px; width: min(460px, calc(100% - 32px)); max-height: 80dvh; color: var(--color-primary-dark); }
.search-settings-dialog::backdrop { background: #172d2366; }
.search-settings-dialog form { display: grid; gap: 16px; }
.search-settings-dialog h2, .search-settings-dialog p { margin: 0; }
.search-settings-dialog select { width: 100%; min-height: 48px; }
.search-settings-dialog .btn-row > button { flex: 1; }
@media (max-width: 600px) {
  .search-settings-dialog { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
}
/* ------------------------------------------------------------------------
   The discovery sky. The scan fills the screen: a night sky in the brand's
   own greens with the reader as a gold sun at its centre, the header and the
   phone's tab bar floating over it as glass. The rest of the product stays on
   its cream theme; only this stage is dark, and it is scoped to the stage so
   an in-app browser's force-dark pass has nothing to mistake for a dark page.
   ------------------------------------------------------------------------ */
:root { --sky-deep:#040a07; --sky-mid:#0d2119; --sky-glow:#1c3f30; --sky-ink:#f4efe2; --sky-muted:#b9c9b5; --sun:#e9b86e; }
/* The whole page is night, not just the stage: scrolling to the foot, or
   iOS pulling past either end, used to show a cream strip and a white footer
   under the sky, with the floating radius chip unreadable on top of them.
   The one exception is the results as a plain list under the sky (no script,
   so no sheet), which keeps the cream they were designed on. */
:is(html, body):has(.discovery-universe) { background:var(--sky-deep); }
body:has(.discovery-universe):has(#results > .section-heading):not(:has(#results[data-sheet])) { background:#f7f8f5; }
body:is(:has(.discovery-universe):not(:has(#results > .section-heading)), :has(#results[data-sheet])) .site-footer { border-top-color:#ffffff14; color:var(--sky-muted); background:transparent; }
body:is(:has(.discovery-universe):not(:has(#results > .section-heading)), :has(#results[data-sheet])) .site-footer :is(a, strong) { color:var(--sky-ink); }
main:has(.discovery-universe) { padding-top:0; }

/* Header floats over the sky until the sky has scrolled away, then turns back
   into the ordinary cream bar (body.universe-passed, set by discovery-sonar.js). */
body:has(.discovery-universe):not(.universe-passed) .site-header { position:fixed; left:0; right:0; background:linear-gradient(#040a07b3,#040a0700); border-bottom:0; backdrop-filter:none; }
body:has(.discovery-universe):not(.universe-passed) .site-header :is(.brand, .brand small, .main-nav a, .account-menu > summary) { color:var(--sky-ink); }
body:has(.discovery-universe):not(.universe-passed) .site-header .brand small { opacity:.75; }
body:has(.discovery-universe):not(.universe-passed) .site-header .main-nav a[aria-current] { background:#ffffff1f; }
body:has(.discovery-universe):not(.universe-passed) .site-header .btn-small { background:var(--sun); color:#16281e; }
body:has(.discovery-universe).universe-passed .site-header { position:fixed; left:0; right:0; }
@media (max-width:760px) {
  body:has(.discovery-universe):not(.universe-passed) .mobile-nav { background:#07110cc7; border-top-color:#ffffff14; }
  body:has(.discovery-universe):not(.universe-passed) .mobile-nav a { color:var(--sky-muted); }
  body:has(.discovery-universe):not(.universe-passed) .mobile-nav [aria-current] { background:#ffffff1a; color:#fff; }
}

.search-panel.discovery-universe { position:relative; width:100vw; margin:0 0 0 calc(50% - 50vw); padding:0; border:0; border-radius:0; box-shadow:none; min-height:0; display:block; background:none; }
.discovery-universe .radar-search, .discovery-universe .discovery-radar { display:block; padding:0; margin:0; gap:0; }
.discovery-universe .sonar-stage { position:relative; width:100%; height:100svh; min-height:600px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 75% 60% at 50% 52%, var(--sky-glow) 0%, var(--sky-mid) 42%, var(--sky-deep) 100%); }
/* Two slow aurora clouds, gold and green, drawn before a single WebGL pixel so
   a phone that never gets the canvas still gets a sky rather than a flat fill. */
.discovery-universe .sonar-stage::before, .discovery-universe .sonar-stage::after { content:''; position:absolute; border-radius:50%; pointer-events:none; filter:blur(20px); z-index:0; }
.discovery-universe .sonar-stage::before { width:70vmax; aspect-ratio:1; top:-30vmax; right:-24vmax; background:radial-gradient(circle, #e9b86e1f 0%, transparent 65%); animation:aurora-drift 26s ease-in-out infinite alternate; }
.discovery-universe .sonar-stage::after { width:80vmax; aspect-ratio:1; bottom:-40vmax; left:-30vmax; background:radial-gradient(circle, #5f9c7a26 0%, transparent 65%); animation:aurora-drift 32s ease-in-out infinite alternate-reverse; }
@keyframes aurora-drift { to { transform:translate(6vmax, 4vmax) scale(1.08); } }
/* Soft fade at the foot, only where the results still sit under the sky as
   a plain list (no script, so no sheet): there the night should give way to
   them gently. With the sheet the fade just drew a cream band across the sky. */
body:not(:has(#results[data-sheet])):has(#results .section-heading) .discovery-universe .discovery-radar::after { content:''; display:block; height:40px; margin-top:-40px; position:relative; z-index:2; background:linear-gradient(transparent, #f7f8f5); pointer-events:none; }

.discovery-universe .radar-canvas { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; z-index:1; }
.radar-canvas canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sonar-fallback { position:absolute; left:50%; top:52%; width:min(86vw, 640px); aspect-ratio:1.6; transform:translate(-50%, -50%) perspective(500px) rotateX(38deg); border-radius:50%;
  background:repeating-radial-gradient(ellipse, transparent 0 22px, #e9b86e40 23px 24px, transparent 25px 46px); }
.sonar-fallback::after { content:''; position:absolute; width:18px; height:18px; background:#ffd98a; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 0 0 10px #e9b86e33, 0 0 40px #ffcf7acc; }
.has-sonar .sonar-fallback { display:none; }
.radar-canvas:not(.has-sonar) canvas, .radar-canvas:not(.has-sonar) .sonar-targets { visibility:hidden; }

.universe-intro { position:absolute; z-index:3; left:0; right:0; top:calc(100px + env(safe-area-inset-top)); padding:0 24px; text-align:center; color:var(--sky-ink); pointer-events:none; }
.universe-intro .eyebrow { color:var(--sun); letter-spacing:.12em; margin:0 0 10px; }
.universe-intro h1 { color:var(--sky-ink); font-size:clamp(2rem, 6.4vw, 3.6rem); line-height:1.2; margin:0; text-shadow:0 2px 24px #040a07aa; }
.universe-intro h1 em { font-style:normal; color:var(--sun); }
.universe-intro .subtitle { color:var(--sky-muted); margin:12px 0 0; }
.universe-caption { margin:0; color:var(--sky-muted); font-weight:600; letter-spacing:.02em; }

.universe-controls { position:absolute; z-index:3; left:0; right:0; bottom:calc(84px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 20px; text-align:center; }
@media (max-width:760px) { .universe-controls { bottom:calc(104px + env(safe-area-inset-bottom)); } }
.discovery-universe .radar-copy { flex:0 0 auto; }
.discovery-universe .radar-copy .search-settings-trigger { color:var(--sky-ink); background:#ffffff14; border:1px solid #ffffff24; border-radius:999px; padding:8px 16px; min-height:40px; backdrop-filter:blur(8px); }
.discovery-universe .radar-copy .search-settings-trigger:hover { background:#ffffff24; }
.discovery-universe #near-status { color:var(--sky-muted); margin:2px 0 0; }
.discovery-universe #near-status:empty { display:none; }
.discovery-universe .trust-strip { justify-content:center; color:var(--sky-muted); margin-top:4px; }
.discovery-universe .trust-strip svg { color:var(--sun); }

.sonar-scan { min-width:200px; min-height:56px; border-radius:999px; background:var(--sun); color:#16281e; font-weight:800; font-size:1.05rem;
  box-shadow:0 0 0 6px #e9b86e26, 0 10px 36px #e9b86e66; position:relative; z-index:1; transition:transform .15s, box-shadow .2s; }
.sonar-scan:hover { background:#f2c985; transform:translateY(-1px); box-shadow:0 0 0 8px #e9b86e33, 0 12px 40px #e9b86e88; }
.sonar-scan:disabled { opacity:.9; cursor:wait; }
.sonar-legend { font-size:11px; color:#8fa58c; margin:4px 0 0; position:relative; z-index:1; }

.sonar-targets { position:absolute; inset:0; pointer-events:none; }
button.sonar-blip { position:absolute; transform:translate(-50%, -50%); width:44px; height:44px; min-height:44px; padding:0; border:0; background:transparent; box-shadow:none; pointer-events:auto; border-radius:50%; }
/* A found person is cream-white with a gold halo: the sun is gold already, so
   a result the same amber would read as more suns rather than as people. */
.sonar-blip::before { content:''; position:absolute; inset:14px; border-radius:50%; background:#fff8ea; border:2px solid #ffe2a8; box-shadow:0 0 0 5px #e9b86e33, 0 0 22px #ffd98acc; animation:sonar-blip-pulse 2.2s ease-in-out infinite; }
button.sonar-blip:hover::before, button.sonar-blip:focus-visible::before { background:#fff; box-shadow:0 0 0 8px #e9b86e4d, 0 0 30px #ffe2a8; }
button.sonar-blip:focus-visible, .sonar-scan:focus-visible, .discovery-universe .search-settings-trigger:focus-visible { outline:3px solid #fff1d0; outline-offset:3px; }
button.sonar-blip[hidden] { display:none; }
@keyframes sonar-blip-pulse { 50% { box-shadow:0 0 0 9px #e9b86e22, 0 0 28px #ffd98a99; } }
@media (prefers-reduced-motion: reduce) {
  .sonar-blip::before, .discovery-universe .sonar-stage::before, .discovery-universe .sonar-stage::after { animation:none; }
}

/* ------------------------------------------------------------------------
   Results sheet. On the sky the list rises over it instead of the page
   scrolling away, the way a map app lists places: a peek with the count, half
   height with the first people and the planets still visible above, and full
   height to browse. data-sheet on #results holds the state (discovery-sonar.js);
   without that script the list stays an ordinary section under the sky.
   ------------------------------------------------------------------------ */
body:has(.discovery-universe) { --sheet-h:88svh; --sheet-half:46svh; --sheet-peek:88px; --sheet-nav:0px; }
@media (max-width:760px) { body:has(.discovery-universe) { --sheet-nav:calc(66px + env(safe-area-inset-bottom)); } }
body:has(.discovery-universe) #results[data-sheet] { position:fixed; z-index:35; left:0; right:0; bottom:0; height:var(--sheet-h); margin:0; padding:0 16px var(--sheet-nav);
  background:#fbf8f4; border-radius:26px 26px 0 0; box-shadow:0 -14px 44px #040a0773; overflow:hidden; overscroll-behavior:contain;
  transform:translateY(calc(var(--sheet-h) - var(--sheet-peek) - var(--sheet-nav))); transition:transform .38s cubic-bezier(.2,.8,.2,1); will-change:transform; }
body:has(.discovery-universe) #results[data-sheet="half"] { transform:translateY(calc(var(--sheet-h) - var(--sheet-half))); }
body:has(.discovery-universe) #results[data-sheet="full"] { transform:translateY(0); overflow-y:auto; }
body:has(.discovery-universe) #results[data-sheet].is-dragging { transition:none; }
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle { position:sticky; top:0; z-index:2; margin:0 -16px 8px; padding:22px 20px 12px; background:#fbf8f4; cursor:grab; touch-action:none; user-select:none;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle h2 { margin:0; font-size:1.2rem; }
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle .subtitle { margin:0; font-size:.85rem; }
/* The grab bar is the button: tapping it steps the sheet, and it is what a
   keyboard or screen reader reaches, since a drag is no use to either. */
.sheet-toggle { display:none; }
body:has(.discovery-universe) #results[data-sheet] .sheet-toggle { display:block; position:absolute; top:4px; left:50%; transform:translateX(-50%); width:72px; height:24px; min-height:24px; padding:0; border:0; background:transparent; box-shadow:none; cursor:pointer; }
body:has(.discovery-universe) #results[data-sheet] .sheet-toggle::before { content:''; position:absolute; left:18px; right:18px; top:10px; height:5px; border-radius:3px; background:#cfd6ca; }
body:has(.discovery-universe) #results[data-sheet] .sheet-toggle:focus-visible { outline:3px solid var(--color-primary); outline-offset:2px; border-radius:12px; }
body:has(.discovery-universe) #results[data-sheet] .discovery-results { grid-template-columns:1fr; gap:12px; }
body:has(.discovery-universe) #results[data-sheet] .pagination { margin:16px 0 28px; }
/* Compact cards inside the sheet at every width: photo left, details right. */
body:has(.discovery-universe) #results[data-sheet] .talent-card { display:grid; grid-template-columns:100px minmax(0,1fr); padding:0; align-items:stretch; }
body:has(.discovery-universe) #results[data-sheet] .talent-card .photo-wrap { height:100%; min-height:150px; aspect-ratio:auto; border-radius:16px 0 0 16px; }
body:has(.discovery-universe) #results[data-sheet] .photo-wrap > img { height:100%; width:100%; object-fit:cover; }
body:has(.discovery-universe) #results[data-sheet] .talent-info { padding:12px; min-width:0; }
/* Activities, as short glass chips: without them a card said who and where
   but not what they are up for. One line; the profile has the full list. */
body:has(.discovery-universe) #results[data-sheet] .tags { display:flex; flex-wrap:nowrap; gap:4px; margin:6px 0; overflow:hidden; mask-image:linear-gradient(90deg,#000 85%,transparent); }
body:has(.discovery-universe) #results[data-sheet] .tag { flex:0 0 auto; font-size:.72rem; padding:2px 8px; border-radius:999px; background:#ffffff14; border:1px solid #ffffff22; color:#f2cf8f; white-space:nowrap; }
body:has(.discovery-universe) #results[data-sheet] .talent-card.is-picked { box-shadow:0 0 0 3px var(--sun), 0 8px 24px #e9b86e55; }
/* Desktop: a floating panel on the left, the way a map's place list sits,
   leaving the sky visible to its right. */
@media (min-width:900px) {
  body:has(.discovery-universe) #results[data-sheet] { left:24px; right:auto; top:104px; bottom:24px; width:400px; height:auto; border-radius:24px; padding-bottom:0; overflow-y:auto; transform:none; }
  body:has(.discovery-universe) #results[data-sheet="peek"] { bottom:auto; height:auto; max-height:none; overflow:hidden; }
  body:has(.discovery-universe) #results[data-sheet="peek"] > :not(.sheet-handle) { display:none; }
  body:has(.discovery-universe) #results[data-sheet] > .sheet-handle { cursor:pointer; }
  /* With the panel open the sky's centre moves right, so the controls follow. */
  body:has(#results[data-sheet="half"], #results[data-sheet="full"]) .universe-controls { left:424px; }
}
@media (prefers-reduced-motion: reduce) { body:has(.discovery-universe) #results[data-sheet] { transition:none; } }

/* ------------------------------------------------------------------------
   Planets: a found person is their photo in a glowing gold ring, orbiting
   the sun. A private photo stays private: the planet shows the first letter
   of their name, never the picture the card itself withholds.
   ------------------------------------------------------------------------ */
button.sonar-blip.has-planet { width:52px; height:52px; min-height:52px; }
button.sonar-blip.has-planet::before { display:none; }
.blip-planet { position:absolute; inset:4px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #fff8ea, #e9b86e);
  border:2px solid #ffe2a8; box-shadow:0 0 0 4px #e9b86e40, 0 0 26px #ffd98acc; color:#16281e; font-weight:800; font-size:1.05rem; animation:planet-arrive .6s cubic-bezier(.2,1.4,.4,1) both, planet-glow 2.6s ease-in-out .6s infinite; }
.blip-planet img { width:100%; height:100%; object-fit:cover; display:block; }
button.sonar-blip.has-planet:hover .blip-planet, button.sonar-blip.has-planet:focus-visible .blip-planet, button.sonar-blip.is-picked .blip-planet { border-color:#fff; box-shadow:0 0 0 7px #e9b86e66, 0 0 34px #ffe2a8; transform:scale(1.12); }
@keyframes planet-arrive { from { transform:scale(.2); opacity:0; } }
@keyframes planet-glow { 50% { box-shadow:0 0 0 7px #e9b86e26, 0 0 30px #ffd98a99; } }
@media (prefers-reduced-motion: reduce) { .blip-planet { animation:none; } }

/* With the sheet up, the scan controls ride just above it and shed their
   footnotes, and a guest's headline fades: it has done its job once a scan
   has found people, and the sky it leaves is where the planets are. */
.universe-intro, .universe-controls { transition:opacity .3s, bottom .38s cubic-bezier(.2,.8,.2,1), left .38s cubic-bezier(.2,.8,.2,1); }
body:has(#results[data-sheet="half"], #results[data-sheet="full"]) .universe-intro { opacity:0; }
body:has(#results[data-sheet]) .universe-controls :is(.sonar-legend, .trust-strip, #near-status) { display:none; }
@media (max-width:899px) {
  /* Pinned to the screen, like the sheet it sits on. Inside the stage it was
     measured from the stage's foot, which on iPhone Safari lies below the
     visible screen (the stage is at least 600px and the toolbars take their
     share), so the controls floated far above the sheet and squeezed the sky. */
  body:has(#results[data-sheet]) .universe-controls { position:fixed; }
  body:has(#results[data-sheet="peek"]) .universe-controls { bottom:calc(var(--sheet-peek) + var(--sheet-nav) + 14px); }
  body:has(#results[data-sheet="half"]) .universe-controls { bottom:calc(var(--sheet-half) + 12px); }
  body:has(#results[data-sheet="full"]) .universe-controls { opacity:0; pointer-events:none; }
  body:has(#results[data-sheet="half"]) .sonar-scan { min-height:48px; min-width:170px; font-size:.95rem; }
}
@media (prefers-reduced-motion: reduce) { .universe-intro, .universe-controls { transition:none; } }

/* The sheet is pointed at after a scan only for screen readers; a focus ring
   around the whole sheet reads as a stray border. */
body:has(.discovery-universe) #results[data-sheet]:focus { outline:none; }
@media (max-width:899px) {
  /* The chat launcher rides above the sheet rather than covering its heading,
     and steps aside when the list is taken full screen. */
  body:has(#results[data-sheet="peek"]) #chat-widget { bottom:calc(var(--sheet-peek) + var(--sheet-nav) + 12px); }
  body:has(#results[data-sheet="half"]) #chat-widget { bottom:calc(var(--sheet-half) + 12px); }
  body:has(#results[data-sheet="full"]) #chat-widget { display:none; }
  #chat-widget { transition:bottom .38s cubic-bezier(.2,.8,.2,1); }
  /* The tab bar stays dark glass with the sheet open too: it belongs to the
     sky, and a light bar under the sheet broke the scene the moment a scan
     finished. Near-opaque here, since the cream sheet runs on behind it. */
  body:has(#results[data-sheet]) .mobile-nav { background:#07110cf0; border-top-color:#ffffff14; }
  body:has(#results[data-sheet]) .mobile-nav a { color:var(--sky-muted); }
  body:has(#results[data-sheet]) .mobile-nav [aria-current] { background:#ffffff1a; color:#fff; }
}

/* ------------------------------------------------------------------------
   The sheet as frosted glass over the night sky, like a map app's night
   mode. It is not see-through: the stars behind move all the time, and
   names and prices floating on moving dust are hard to read, above all in
   sunlight. The sky shows through as a soft blur while the text stays sharp.
   Scoped to the sheet on this page; the same card elsewhere keeps the cream
   theme.
   ------------------------------------------------------------------------ */
body:has(.discovery-universe) #results[data-sheet] { --glass:#0a1a13d1; --glass-edge:#ffffff1f; --glass-card:#ffffff0d; --glass-card-edge:#ffffff1a;
  background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  border-top:1px solid var(--glass-edge); color:var(--sky-ink); box-shadow:0 -14px 44px #00000066; }
@media (min-width:900px) { body:has(.discovery-universe) #results[data-sheet] { border:1px solid var(--glass-edge); } }
/* The handle stays put while cards scroll under it, so it carries a denser
   glass of its own rather than letting a card's text show through it. */
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle { background:#0a1a13eb; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-bottom:1px solid #ffffff0f; }
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle h2 { color:var(--sky-ink); }
body:has(.discovery-universe) #results[data-sheet] > .sheet-handle .subtitle { color:var(--sky-muted); }
body:has(.discovery-universe) #results[data-sheet] .sheet-toggle::before { background:#ffffff47; }
body:has(.discovery-universe) #results[data-sheet] .sheet-toggle:focus-visible { outline-color:#fff1d0; }

body:has(.discovery-universe) #results[data-sheet] .talent-card { background:var(--glass-card); border:1px solid var(--glass-card-edge); box-shadow:none; color:var(--sky-ink); }
body:has(.discovery-universe) #results[data-sheet] .talent-card:hover { background:#ffffff14; box-shadow:0 0 0 1px #e9b86e66, 0 10px 28px #00000040; }
body:has(.discovery-universe) #results[data-sheet] .talent-card:focus-visible { outline:3px solid #fff1d0; outline-offset:2px; }
body:has(.discovery-universe) #results[data-sheet] .photo-wrap { background:#10261c; }
body:has(.discovery-universe) #results[data-sheet] .photo-lock { color:var(--sky-ink); background:#0a1a13a6; }
body:has(.discovery-universe) #results[data-sheet] .photo-badges .badge { background:#0a1a13b3; color:#cfe8c9; box-shadow:none; }
body:has(.discovery-universe) #results[data-sheet] .photo-badges :is(.badge-boosted, .badge-rising_star) { background:#0a1a13b3; color:#f2cf8f; }
body:has(.discovery-universe) #results[data-sheet] .talent-name strong { color:var(--sky-ink); }
/* Tier chips keep their own hue, turned into tinted glass. */
body:has(.discovery-universe) #results[data-sheet] .talent-info .badge { background:#ffffff14; color:#d7dfd2; }
body:has(.discovery-universe) #results[data-sheet] .talent-info :is(.badge-rising_star, .badge-boosted, .status-pending) { background:#e9b86e26; color:#f2cf8f; }
body:has(.discovery-universe) #results[data-sheet] .talent-info .badge-top_tier { background:#8fb3e02b; color:#c3d6f2; }
body:has(.discovery-universe) #results[data-sheet] .talent-info .badge-celebrity { background:#c8a8e62b; color:#ddc9f0; }
body:has(.discovery-universe) #results[data-sheet] .talent-open { color:#9fd7a4; }
body:has(.discovery-universe) #results[data-sheet] .talent-open-now { color:#b8e6b9; }
body:has(.discovery-universe) #results[data-sheet] .talent-open-none { color:var(--sky-muted); }
body:has(.discovery-universe) #results[data-sheet] .live-dot { background:#8fd694; animation-name:live-dot-pulse-sky; }
@keyframes live-dot-pulse-sky { 0% { box-shadow:0 0 0 0 #8fd69466; } 70% { box-shadow:0 0 0 7px #8fd69400; } 100% { box-shadow:0 0 0 0 #8fd69400; } }
body:has(.discovery-universe) #results[data-sheet] :is(.talent-location, .talent-distance, .rating) { color:var(--sky-muted); }
body:has(.discovery-universe) #results[data-sheet] .talent-location .icon { color:var(--sun); }
body:has(.discovery-universe) #results[data-sheet] .talent-bottom::before { background:linear-gradient(90deg, transparent, #ffffff24 20%, #ffffff24 80%, transparent); }
body:has(.discovery-universe) #results[data-sheet] .talent-price { color:#f5cf85; background:#e9b86e1f; }
body:has(.discovery-universe) #results[data-sheet] .talent-price small { color:#d8b879; }

body:has(.discovery-universe) #results[data-sheet] .empty-state { background:#ffffff0a; border:1px dashed #ffffff2e; color:var(--sky-ink); }
body:has(.discovery-universe) #results[data-sheet] .empty-state .icon { color:var(--sun); }
body:has(.discovery-universe) #results[data-sheet] .empty-state h2 { color:var(--sky-ink); }
body:has(.discovery-universe) #results[data-sheet] .empty-state .subtitle { color:var(--sky-muted); }
/* The sheet's buttons are the same glass chip as "รัศมี … · ตั้งค่า" on the sky. */
body:has(.discovery-universe) #results[data-sheet] :is(.empty-state button, .pagination .btn) { background:#ffffff14; color:var(--sky-ink); border:1px solid #e9b86e80; box-shadow:none; border-radius:999px; }
body:has(.discovery-universe) #results[data-sheet] :is(.empty-state button, .pagination .btn):hover { background:#e9b86e26; }
body:has(.discovery-universe) #results[data-sheet] :is(.empty-state button, .pagination .btn):focus-visible { outline:3px solid #fff1d0; outline-offset:2px; }

/* Once the results are a sheet, the page itself stops scrolling, as in a map
   app: the sheet is the thing that scrolls. Dragging the page used to slide
   the sky away and bring the footer up under the floating controls. */
html:has(#results[data-sheet]), body:has(#results[data-sheet]) { overflow:hidden; overscroll-behavior:none; }
/* Before a scan the page can still reach its footer; the sky melts into the
   night below instead of ending on a visible edge. */
body:not(:has(#results > .section-heading)) .discovery-universe .discovery-radar::after { content:''; display:block; height:80px; margin-top:-80px; position:relative; z-index:2; background:linear-gradient(transparent, var(--sky-deep)); pointer-events:none; }
/* "Open ahead" list under an empty scan. */
.upcoming-heading { margin:18px 4px 10px; font-size:1rem; }
body:has(.discovery-universe) #results[data-sheet] .upcoming-heading { color:var(--sky-ink, #eef3e9); }

/* The empty scan sits in the half-open sheet on phones: keep it short enough
   that its buttons clear the tab bar. */
body:has(.discovery-universe) #results[data-sheet] .empty-state { padding:16px 14px; }
body:has(.discovery-universe) #results[data-sheet] .empty-state > .icon { display:none; }
body:has(.discovery-universe) #results[data-sheet] .empty-state h2 { margin:0 0 4px; font-size:1.05rem; }
body:has(.discovery-universe) #results[data-sheet] .empty-state .subtitle { margin:0 0 10px; font-size:.88rem; }
body:has(.discovery-universe) #results[data-sheet] .empty-state .btn-row { gap:8px; margin:0; }