/* AI Search's piece: the radar (template-parts/demo-search.php), loaded after demo.css by inc/demo.php
   (GS_DEMO_PIECE_STYLES). Every rule is scoped to the piece's views (.gsd.gsd-v-search), so the full window never
   reads one: it prints no radar and keeps its walk over the rows.

   The radar is a part of the app's AI Search screen, not an instrument (the founder, 2026-10-20: "a product radar,
   not the aviation one"): the window's own lines for its rings, its ground for the disc, the product's primary for
   the sweep and the AI glyph in the middle, the people as their faces in the ring of their row's status. In the
   piece it stands on the left of the rows, the page walk and the counts under it; on a phone it shrinks to a row over
   the list, the walk beside it; part=radar draws it alone, larger, with no card of its own (the pane is the card).

   Motion: the sweep turns once in 3 s from the moment the search starts (gsd-rdr-run, set by the clock from the
   markup's data-x), which is the speed the markup places the people and the dots by, so each one lands where the
   sweep stands; it fades in and out with gsd-rdr-lit. A person lands with a small lift and one soft ring. The pause
   button, a hidden tab and the window off screen stop the sweep with the clock (demo.css .gsd-paused); a still draws
   the sweep at its moment's angle (--gsd-rdr-a) and nothing turns; under reduced motion, or with no script, there
   is no sweep and the radar holds every person found. */

/* ---- the piece: the radar beside the rows ------------------------------------------------------------------------ */
.gsd.gsd-v-search .gsd-srx{display:grid;grid-template-columns:304px minmax(0,1fr);gap:16px;align-items:stretch;margin-top:6px}
.gsd.gsd-v-search .gsd-srx>.gsd-res{margin-top:0}
.gsd.gsd-v-search .gsd-srx :is(.gsd-rh,.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.15fr)}
.gsd.gsd-v-search .gsd-srx :is(.gsd-rr,.gsd-rskr){height:56px}
/* a still's row grows round a reason on two lines (its skeleton keeps the live height); nothing in the pane is ever
   squeezed to make room */
.gsd.gsd-v-search.gsd-still .gsd-srx .gsd-rr{height:auto;min-height:56px}
.gsd.gsd-v-search .gsd-srch>*{flex-shrink:0}

/* ---- the radar ---------------------------------------------------------------------------------------------------- */
.gsd.gsd-v-search .gsd-rdr{display:flex;flex-direction:column;gap:16px;min-width:0;padding:16px 18px 18px;border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-soft)}
.gsd.gsd-v-search .gsd-rdr-d{position:relative;flex:none;width:100%;max-width:236px;aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,var(--gsd-ai-soft) 0,var(--gsd-bg) 68%)}
/* the rings: the rim in the window's line, two inner rings in its quieter line */
.gsd.gsd-v-search .gsd-rdr-o{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gsd-line)}
.gsd.gsd-v-search .gsd-rdr-o:nth-child(2){inset:16.67%;box-shadow:inset 0 0 0 1px var(--gsd-line2)}
.gsd.gsd-v-search .gsd-rdr-o:nth-child(3){inset:33.33%;box-shadow:inset 0 0 0 1px var(--gsd-line2)}
/* the sweep: a soft wedge in the primary trailing a fine leading edge, its edge at twelve o'clock before it turns */
.gsd.gsd-v-search .gsd-rdr-b{position:absolute;inset:0;border-radius:50%;overflow:hidden;transform:rotate(var(--gsd-rdr-a,0deg))}
.gsd.gsd-v-search .gsd-rdr-w{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 280deg,color-mix(in srgb,var(--gsd-ai) 18%,transparent) 360deg);opacity:0;transition:opacity .6s ease}
.gsd.gsd-v-search .gsd-rdr-w::after{content:"";position:absolute;left:calc(50% - .75px);top:0;width:1.5px;height:50%;background:linear-gradient(0deg,transparent,color-mix(in srgb,var(--gsd-ai) 55%,transparent))}
.gsd.gsd-v-search .gsd-rdr-w.gsd-rdr-lit{opacity:1}
.gsd.gsd-v-search .gsd-go .gsd-rdr-b.gsd-rdr-run{animation:gsd-rdr-sweep 3s linear infinite}
/* the others found: a dot each */
.gsd.gsd-v-search .gsd-rdr-s{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:color-mix(in srgb,var(--gsd-ai) 42%,var(--gsd-bg))}
.gsd.gsd-v-search .gsd-go .gsd-rdr-s[data-t]:not(.gsd-on){transform:scale(.3)}
/* the people: the face in the ring of the row's status, the primary until the status lands */
.gsd.gsd-v-search .gsd-rdr-p{--gsd-rdr-k:var(--gsd-ai-line);position:absolute;left:var(--x);top:var(--y);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--gsd-bg);box-shadow:0 0 0 2px var(--gsd-bg),0 0 0 3.5px var(--gsd-rdr-k)}
.gsd.gsd-v-search .gsd-rdr-p>:is(.gsd-av,.gsd-ini){width:100%;height:100%;transition:opacity .4s ease}
.gsd.gsd-v-search .gsd-rdr-ok{--gsd-rdr-k:var(--gsd-ok)}
.gsd.gsd-v-search .gsd-rdr-dup{--gsd-rdr-k:var(--gsd-line)}
.gsd.gsd-v-search .gsd-rdr-dq{--gsd-rdr-k:color-mix(in srgb,var(--gsd-slate) 60%,var(--gsd-bg))}
.gsd.gsd-v-search :is(.gsd-rdr-dup,.gsd-rdr-dq)>*{opacity:.5}
.gsd.gsd-v-search .gsd-go .gsd-rdr-p{transition:opacity .45s ease,transform .45s ease,box-shadow .4s ease}
.gsd.gsd-v-search .gsd-go .gsd-rdr-p[data-t]:not(.gsd-on){transform:scale(.55)}
.gsd.gsd-v-search .gsd-rdr-p::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gsd-ai);opacity:0;pointer-events:none}
.gsd.gsd-v-search .gsd-go .gsd-rdr-p.gsd-on::after{animation:gsd-rdr-ping 1.2s ease-out both}
/* a landing finishes its own small motion through a pause, and a jump or a frozen review frame shows none */
.gsd.gsd-v-search .gsd-paused .gsd-rdr-p::after{animation-play-state:running !important}
.gsd.gsd-v-search .gsd-reset .gsd-rdr-p::after{animation:none !important}
/* the middle: the AI glyph, as the pane's title wears it */
.gsd.gsd-v-search .gsd-rdr-c{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--gsd-bg);box-shadow:0 0 0 1px var(--gsd-ai-line),0 0 0 5px var(--gsd-ai-soft);color:var(--gsd-ai)}
.gsd.gsd-v-search .gsd-rdr-c svg{width:16px;height:16px}
/* the page walk at the card's foot: the page and the counts on one line, the bar under them */
.gsd.gsd-v-search .gsd-rdr .gsd-prog{grid-template-columns:auto auto;justify-content:space-between;row-gap:10px;margin-top:auto}
.gsd.gsd-v-search .gsd-rdr .gsd-prog>.gsd-bar-t{grid-column:1/-1;grid-row:2}

/* ---- part=radar: the radar alone, larger, the pane its card ---------------------------------------------------- */
.gsd.gsd-v-search[data-gsd-part=radar] .gsd-rdr{gap:20px;padding:6px 0 0;border:0;border-radius:0;background:none}
.gsd.gsd-v-search[data-gsd-part=radar] .gsd-rdr[data-gsd-hl]{padding:16px;border-radius:12px}
.gsd.gsd-v-search[data-gsd-part=radar] .gsd-rdr-d{max-width:300px}

/* ---- narrower: the radar a little smaller, the rows keep the person and how the search left them ---------------- */
@container gsd (min-width:600px) and (max-width:859px){
  .gsd.gsd-v-search .gsd-srx{grid-template-columns:212px minmax(0,1fr);gap:14px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr{padding:14px 14px 16px}
  .gsd.gsd-v-search .gsd-srx :is(.gsd-rh,.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gsd.gsd-v-search .gsd-srx :is(.gsd-rh,.gsd-rr,.gsd-rskr)>:nth-child(2){display:none}
  /* a row's reason takes a second line rather than an ellipsis: our copy is never cut */
  .gsd.gsd-v-search .gsd-srx .gsd-rs small{display:-webkit-box;white-space:normal;text-overflow:clip;line-height:1.2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr .gsd-prog{grid-template-columns:minmax(0,1fr);row-gap:9px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr .gsd-pgn{grid-row:3}
}

/* ---- a phone: the radar is a row over the list, the walk beside the disc ---------------------------------------- */
@container gsd (max-width:599px){
  .gsd.gsd-v-search .gsd-srx{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:2px}
  .gsd.gsd-v-search .gsd-srx :is(.gsd-rh,.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .gsd.gsd-v-search .gsd-srx :is(.gsd-rr,.gsd-rskr){height:48px}
  .gsd.gsd-v-search.gsd-still .gsd-srx .gsd-rr{height:auto;min-height:48px}
  /* a still of the whole piece takes its content's height: its head row and a reason on two lines make it taller
     than the live piece, which fits the phone's pane */
  .gsd.gsd-v-search.gsd-still .gsd-panes{height:auto}
  .gsd.gsd-v-search.gsd-still .gsd-pn{position:relative}
  .gsd.gsd-v-search.gsd-still .gsd-pb{flex:none}
  .gsd.gsd-v-search.gsd-still .gsd-srch{padding-bottom:14px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr{flex-direction:row;align-items:center;gap:14px;padding:9px 14px 9px 9px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-d{width:92px;margin:0}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-p{width:18px;height:18px;margin:-9px 0 0 -9px;box-shadow:0 0 0 1.5px var(--gsd-bg),0 0 0 2.5px var(--gsd-rdr-k)}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-p>.gsd-ini{font-size:7px;letter-spacing:0}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-p::after{inset:-4px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-s{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-c{width:22px;height:22px;margin:-11px 0 0 -11px;box-shadow:0 0 0 1px var(--gsd-ai-line),0 0 0 3px var(--gsd-ai-soft)}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr-c svg{width:12px;height:12px}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr .gsd-prog{flex:1;min-width:0;grid-template-columns:minmax(0,1fr);row-gap:9px;margin-top:0}
  .gsd.gsd-v-search .gsd-srx .gsd-rdr .gsd-pgn{grid-row:3}
  .gsd.gsd-v-search[data-gsd-part=radar] .gsd-rdr-d{max-width:240px}
}

@keyframes gsd-rdr-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes gsd-rdr-ping{0%{opacity:.55;transform:scale(.75)}100%{opacity:0;transform:scale(1.6)}}