/* The app picker's window (inc/app-picker.php, template-parts/app-picker.php): two cards, each opening on a picture of its
   era. GetSales Classic, Stable, on the flat brand blue of its own login with a steady sequence on a rail; New GetSales,
   Beta, on the night of its login with Creator's voice mark rising over a pale dawn and its six products on an orbit.
   Loaded on every page after app.min.css, whose tokens it uses; every colour the drawing adds is a --gs-pick-* token with
   its dark value under both of the theme's dark selectors. Static (BRANDBOOK 17): only a colour changes on hover. Start
   free's words and Sign in's are both in the markup, the dialog's data-mode shows one set. The look is the page lab's
   variant a of 2026-10-28 (two emblems, two eras), picked over two others by two judges and fixed by their lists. */

/* the dialog: the window centred over a dimmed page, scrolling inside itself when taller than the screen */
.gs-pick{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;
  background:transparent;color:var(--ink);font-family:var(--sans);overflow:auto;overscroll-behavior:contain}
.gs-pick::backdrop{background:rgba(15,11,36,.5)}

.gs-pick{
  --gs-pick-blue:#4B64FF;--gs-pick-blue-hi:#3A52EE;--gs-pick-on-blue:#FFFFFF;--gs-pick-blue-ink:#16161A;
  --gs-pick-night-1:#0F0B24;--gs-pick-night-2:#1D1747;--gs-pick-night-3:#3B2F8F;
  --gs-pick-star:#C9CCF0;--gs-pick-eye:#96A5FF;--gs-pick-glow:#5B5FEF;--gs-pick-mist:#FFEFE6;--gs-pick-dots:rgba(255,255,255,.2);
  --gs-pick-land-1:#18133A;--gs-pick-land-2:#0B0916;
  --gs-pick-ok:#12995F;--gs-pick-voice:#F0432B;--gs-pick-voice-ring:#FF5A41;--gs-pick-on-voice:#FFFFFF;
  --gs-pick-drop:rgba(15,11,36,.2);--gs-pick-tile:rgba(29,23,71,.92);--gs-pick-tile-edge:rgba(150,165,255,.6);
  --gs-pick-go-new:#1D1747;--gs-pick-go-new-hi:#3B2F8F;--gs-pick-go-new-ink:#FFFFFF;
  --gs-pick-card-edge:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gs-pick{
  --gs-pick-ok:#2CC283;--gs-pick-go-new:#FFFFFF;--gs-pick-go-new-hi:#D9D5EC;--gs-pick-go-new-ink:#0F0B24;--gs-pick-card-edge:#3A3462}}
:root[data-theme="dark"] .gs-pick{
  --gs-pick-ok:#2CC283;--gs-pick-go-new:#FFFFFF;--gs-pick-go-new-hi:#D9D5EC;--gs-pick-go-new-ink:#0F0B24;--gs-pick-card-edge:#3A3462}

.gs-pick[data-mode="up"] .gs-pick-in,.gs-pick[data-mode="in"] .gs-pick-up{display:none}

.gs-pick .gs-pick-box{position:relative;padding:30px 28px 28px;border:0;border-radius:22px;background:var(--panel);
  box-shadow:0 0 0 1px var(--line),0 40px 90px -30px rgba(15,11,36,.5);text-align:left}
.gs-pick .gs-pick-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:0;border-radius:10px;background:transparent;color:var(--mute);cursor:pointer}
.gs-pick .gs-pick-x:hover{background:var(--sunk);color:var(--ink)}

.gs-pick .gs-pick-head{margin:0 52px 22px 2px}
.gs-pick .gs-pick-h{margin:0;font:600 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink2)}
.gs-pick .gs-pick-sub{margin:8px 0 0;font:400 15px/1.5 var(--sans);color:var(--mute)}
.gs-pick[data-mode="up"] .gs-pick-sub .gs-pick-up,.gs-pick[data-mode="in"] .gs-pick-sub .gs-pick-in{display:block}

.gs-pick .gs-pick-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:0}
.gs-pick .gs-pick-app{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;min-width:0;margin:0;padding:0;
  border:1px solid var(--gs-pick-card-edge);border-radius:18px;background:var(--panel);overflow:hidden}

/* the art: one height, a status at its top left, the emblem drawn to fill it */
.gs-pick .gs-pick-art{position:relative;height:148px;overflow:hidden}
.gs-pick .gs-pick-classic .gs-pick-art{
  background:radial-gradient(circle,var(--gs-pick-dots) 1px,transparent 1.4px) 8px 8px/16px 16px,var(--gs-pick-blue)}
.gs-pick .gs-pick-new .gs-pick-art{
  background:linear-gradient(180deg,var(--gs-pick-night-1) 0%,var(--gs-pick-night-2) 62%,var(--gs-pick-night-3) 100%)}
.gs-pick .gs-pick-emblem{position:absolute;inset:0;display:block;width:100%;height:100%}
.gs-pick .gs-pick-status{position:absolute;top:14px;left:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;
  height:26px;margin:0;padding:0 11px 0 10px;border-radius:999px;font:600 12.5px/1 var(--sans);letter-spacing:.01em}
.gs-pick .gs-pick-classic .gs-pick-status{background:var(--gs-pick-on-blue);color:var(--gs-pick-blue-ink)}
.gs-pick .gs-pick-status i{width:7px;height:7px;border-radius:50%}
.gs-pick .gs-pick-classic .gs-pick-status i{background:var(--gs-pick-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-pick-ok) 20%,transparent)}
.gs-pick .gs-pick-new .gs-pick-status{background:var(--gs-pick-star);color:var(--gs-pick-night-1)}
.gs-pick .gs-pick-new .gs-pick-status i{background:var(--gs-pick-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-pick-blue) 20%,transparent)}

/* Classic's emblem: the rail, the steps, the wait, the reply */
.gs-pick .gs-pick-s0{stop-color:var(--gs-pick-on-blue);stop-opacity:0}
.gs-pick .gs-pick-s1{stop-color:var(--gs-pick-on-blue);stop-opacity:.9}
.gs-pick .gs-pick-flow{fill:none;stroke:var(--gs-pick-on-blue);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.gs-pick .gs-pick-drop rect{fill:var(--gs-pick-drop)}
.gs-pick .gs-pick-step rect{fill:var(--gs-pick-on-blue)}
.gs-pick .gs-pick-ic{fill:var(--gs-pick-blue)}
.gs-pick .gs-pick-wait{fill:var(--gs-pick-blue)}
.gs-pick .gs-pick-clock{fill:var(--gs-pick-on-blue)}
.gs-pick .gs-pick-tick-in{fill:var(--gs-pick-on-blue)}
.gs-pick .gs-pick-tick{fill:var(--gs-pick-ok)}
.gs-pick .gs-pick-lbl{font:500 11px/1 var(--mono);letter-spacing:.1em;fill:var(--gs-pick-on-blue)}

/* New GetSales' emblem: the stars, the dawn, the land, the orbit, Creator's mark */
.gs-pick .gs-pick-stars{fill:var(--gs-pick-star)}
.gs-pick .gs-pick-d0{stop-color:var(--gs-pick-mist);stop-opacity:.7}
.gs-pick .gs-pick-d1{stop-color:var(--gs-pick-glow);stop-opacity:.6}
.gs-pick .gs-pick-d2{stop-color:var(--gs-pick-night-3);stop-opacity:0}
.gs-pick .gs-pick-l0{stop-color:var(--gs-pick-land-1)}
.gs-pick .gs-pick-l1{stop-color:var(--gs-pick-land-2)}
.gs-pick .gs-pick-r0{stop-color:var(--gs-pick-eye);stop-opacity:0}
.gs-pick .gs-pick-r1{stop-color:var(--gs-pick-eye);stop-opacity:.85}
.gs-pick .gs-pick-r2{stop-color:var(--gs-pick-mist);stop-opacity:1}
.gs-pick .gs-pick-h0{stop-color:var(--gs-pick-voice);stop-opacity:.5}
.gs-pick .gs-pick-h1{stop-color:var(--gs-pick-voice);stop-opacity:0}
.gs-pick .gs-pick-orbit{fill:none;stroke:var(--gs-pick-eye);stroke-opacity:.42;stroke-width:1}
.gs-pick .gs-pick-orbit-far{stroke-opacity:.16;stroke-dasharray:2 5}
.gs-pick .gs-pick-ring{fill:none;stroke:var(--gs-pick-voice-ring);stroke-opacity:.5;stroke-width:1.2}
.gs-pick .gs-pick-voice{fill:var(--gs-pick-voice)}
.gs-pick .gs-pick-bars{fill:none;stroke:var(--gs-pick-on-voice);stroke-width:2.2;stroke-linecap:round}
.gs-pick .gs-pick-tiles rect{fill:var(--gs-pick-tile);stroke:var(--gs-pick-tile-edge);stroke-width:1}
.gs-pick .gs-pick-tic{fill:var(--gs-pick-star)}

/* the words under the art: name, promise, facts, the status note, the call; each a row both cards share */
.gs-pick .gs-pick-name{margin:18px 20px 0;font:600 20px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink2)}
.gs-pick .gs-pick-say{margin:5px 20px 0;font:400 14.5px/1.45 var(--sans);color:var(--mute);text-wrap:balance}
.gs-pick .gs-pick-facts{display:flex;flex-direction:column;gap:9px;margin:16px 20px 18px;padding:0;list-style:none}
.gs-pick .gs-pick-facts li{display:flex;align-items:flex-start;gap:10px;margin:0;font:500 13.5px/1.4 var(--sans);
  color:var(--ink);text-wrap:pretty}
.gs-pick .gs-pick-fi{display:grid;flex:none;place-items:center;width:24px;height:24px;margin-top:-2px;border-radius:7px;
  background:var(--chip);color:var(--ink)}
.gs-pick .gs-pick-fi svg{width:16px;height:16px}
.gs-pick .gs-pick-new .gs-pick-fi{background:color-mix(in srgb,var(--ai) 11%,var(--panel));color:var(--ai)}
.gs-pick .gs-pick-new .gs-pick-fi-voice{border-radius:50%;background:color-mix(in srgb,var(--brand-red) 12%,var(--panel));
  color:var(--brand-red)}
.gs-pick .gs-pick-note{display:flex;align-self:end;align-items:flex-start;gap:10px;margin:0 20px 14px;padding:10px 12px;border-radius:10px;
  background:var(--sunk);font:400 13px/1.45 var(--sans);color:var(--mute);text-wrap:pretty}
.gs-pick .gs-pick-note b{font-weight:600;color:var(--ink)}
.gs-pick .gs-pick-note i{flex:none;width:7px;height:7px;margin:6px 2.5px 0 1.5px;border-radius:50%}
.gs-pick .gs-pick-classic .gs-pick-note i{background:var(--gs-pick-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--gs-pick-ok) 20%,transparent)}
.gs-pick .gs-pick-new .gs-pick-note i{background:var(--ai);box-shadow:0 0 0 3px color-mix(in srgb,var(--ai) 20%,transparent)}

/* the calls: Classic in its own login's blue, the new app in its night (white in the dark theme); a colour change on
   hover, nothing moves */
.gs-pick .gs-pick-go{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin:0 20px;padding:0 18px;border:0;
  border-radius:12px;font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.gs-pick .gs-pick-classic .gs-pick-go{background:var(--gs-pick-blue);color:var(--gs-pick-on-blue)}
.gs-pick .gs-pick-classic .gs-pick-go:hover{background:var(--gs-pick-blue-hi)}
.gs-pick .gs-pick-new .gs-pick-go{background:var(--gs-pick-go-new);color:var(--gs-pick-go-new-ink)}
.gs-pick .gs-pick-new .gs-pick-go:hover{background:var(--gs-pick-go-new-hi)}
.gs-pick .gs-pick-go:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.gs-pick .gs-pick-host{margin:8px 20px 16px;font:400 11.5px/1.2 var(--mono);text-align:center;color:var(--mute)}

@media (max-width:640px){
  .gs-pick .gs-pick-box{padding:22px 16px 16px;border-radius:20px}
  .gs-pick .gs-pick-x{top:12px;right:10px}
  .gs-pick .gs-pick-status{top:10px;left:10px}
  .gs-pick .gs-pick-head{margin:0 44px 18px 2px}
  .gs-pick .gs-pick-h{font-size:22px}
  .gs-pick .gs-pick-sub{font-size:14.5px}
  .gs-pick[data-mode="up"] .gs-pick-sub .gs-pick-up,.gs-pick[data-mode="in"] .gs-pick-sub .gs-pick-in{display:inline}
  .gs-pick .gs-pick-grid{grid-template-columns:1fr;row-gap:12px}
  .gs-pick .gs-pick-app{grid-row:auto;grid-template-rows:none}
  .gs-pick .gs-pick-art{height:120px}
  .gs-pick .gs-pick-name{margin:16px 16px 0}
  .gs-pick .gs-pick-say,.gs-pick .gs-pick-facts,.gs-pick .gs-pick-note{margin-inline:16px}
  .gs-pick .gs-pick-go{margin:0 16px}
  .gs-pick .gs-pick-host{margin:8px 16px 14px}
}