/* Lead fixes from the ten-tester design walk-through (2026-09-27). Loaded last. */

/* The report is a solid sheet, never see-through (light mode was rgba(255,255,255,.94): the chat and map ghosted
   behind the numbers - Sam, Maria). */
:root[data-theme="light"] body.door #panel{background:#fff!important}
body.door #panel.full{background:var(--vg-panel)!important}
:root[data-theme="light"] body.door #panel.full{background:#fff!important}

/* The report sits ABOVE Geo's panel when they meet (iPad / small laptops: it slid under the chat and lost its left
   edge - Tom, Hank). Evan: #geop z 12, #panel z 10. */
body.door #panel.open{z-index:13}
body.door #panel.full{z-index:14}

/* Phones: a place you tap opens its report full screen, solid, with Evan's back arrow / close on top; Geo's panel waits
   underneath and comes back when the report closes (Maria, Linda, Jorge, Beth all lost the report behind the chat). */
@media (max-width:760px){
  body.door #panel.open{top:0!important;bottom:0!important;left:0!important;right:0!important;width:100vw!important;
    height:100dvh!important;max-width:none!important;min-width:0!important;border-radius:0!important;border:0!important;z-index:14}
  body.door #panel.open .winbar{padding-top:max(8px,env(safe-area-inset-top))}
}

/* ── Who lives here: the 10×10 waffle (door/r2/charts.js) ── */
body.door .who .stack.vgw-hide{display:none!important}
body.door .who .vgw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 24px;align-items:center;margin:16px 0}
body.door .who .vgw-grid{display:grid;grid-template-columns:repeat(10,14px);grid-auto-rows:14px;gap:3px;width:max-content}
body.door .who .vgw-grid i{display:block;border-radius:3px;transition:opacity .18s,transform .18s var(--vg-spring)}
body.door .who .vgw-grid i.vgw-empty{background:color-mix(in srgb,var(--vg-ink) 8%,transparent)}
:root[data-theme="light"] body.door .who .vgw-grid i:not(.vgw-empty){box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
body.door .who .vgw-grid.vgw-in i{animation:vgw-drop .32s var(--vg-spring) both}
@keyframes vgw-drop{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
body.door .who .vgw .chips{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
body.door .who .vgw .chips>span{font-size:13px;cursor:default;border-radius:var(--vg-pill);padding:2px 8px 2px 4px;transition:background .15s}
body.door .who .vgw .chips>span b{font-family:var(--vg-font-mono);font-weight:600;margin-left:4px}
body.door .who .vgw .chips>span>i{width:12px!important;height:12px!important;border-radius:3px!important}
body.door .who .vgw.vgw-focus .vgw-grid i[data-g]:not(.vgw-on){opacity:.22}
body.door .who .vgw.vgw-focus .vgw-grid i.vgw-on{transform:scale(1.12)}
body.door .who .vgw.vgw-focus .chips>span.vgw-on{background:var(--vg-raise2)}
@container win (max-width:360px){body.door .who .vgw{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){body.door .who .vgw-grid.vgw-in i{animation:none}}

/* ── Work tab: one key at the top, each chart keeps only its scale (door/r2/work-key.js) ── */
body.door #panel .vwk-key .vwk-ki.vgk-hide{display:none!important}
body.door #panel .vwk-key.vgk-unit{justify-content:flex-end;margin:4px 0 8px;opacity:.9}
body.door #panel .vwk-key.vgk-unit .vwk-ki{font-size:12px}
body.door #panel .vwk-key.vgk-master{justify-content:flex-start;gap:8px 16px;margin:8px 0 16px;padding:8px 12px;border-radius:var(--vg-r-sm);
  background:color-mix(in srgb,var(--vg-ink) 5%,transparent)}
body.door #panel .vwk-key.vgk-master .vwk-ki{font-size:12px}

/* ── Log in over the dimmed front door (door/r2/login-overlay.js) ── */
.vg-authov{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease}
:root[data-theme=light] .vg-authov{background:rgba(20,25,28,.28)}
.vg-authov.on{opacity:1}
.vg-authov-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:dark;opacity:0;transition:opacity .2s ease}
.vg-authov.ready .vg-authov-frame{opacity:1}
.vg-authov-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:500 13px var(--vg-font-body,system-ui);color:#fff;opacity:.85}
.vg-authov.ready .vg-authov-wait{display:none}
@media (prefers-reduced-motion:reduce){.vg-authov,.vg-authov-frame{transition:none}}
/* inside the frame (app opened with &embed=1): only the sign-in box; the front door shows through */
html.j-embed.j-embed,html.j-embed.j-embed body.door{background:transparent!important}
html.j-embed.j-embed body.door>:not(#auth){visibility:hidden!important}
html.j-embed.j-embed body.door::before{display:none!important}
html.j-embed.j-embed body.door #auth{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-theme="light"] .vg-authov-frame{color-scheme:light}   /* must match the page inside, or the frame paints opaque */

/* ── Geo alive (door/r2/geo-live.js): crisp pixels, never moves (Will: only eyes + arm tips animate) ── */
img.vg-geo{image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain;object-position:50% 100%}
body.door .geo-sprite.vg-geo,body.door .geo-sprite.vg-geo[data-state]{animation:none!important;transform:none!important;filter:none!important}
.fd .fdx-geo img.vg-geo,.fd.fdx-working .fdx-geo img.vg-geo{width:32px!important;height:24px!important;transform:none!important}
/* the long logo (octopus + wordmark) in horizontal spots: never stretched, never clipped */
img.vg-long,body.door img.dlong{width:auto!important;object-fit:contain;image-rendering:pixelated;border-radius:0!important}
body.door #geop .dh-home img.dlong{height:18px!important;max-width:170px}

/* ── Composer: microphone + boundary button (door/r2/composer.js) ── */
.vg-mic{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--vg-muted,#8a9396);
  cursor:pointer;position:relative;transition:color .15s,background .15s}
.vg-mic:hover,.vg-mic:focus-visible{color:var(--vg-ink,#fff);background:color-mix(in srgb,var(--vg-ink,#fff) 8%,transparent)}
.vg-mic.vg-mic-on{color:#fff;background:var(--vg-red,#b22c2e)}
.vg-mic.vg-mic-on::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--vg-red,#b22c2e);opacity:.55;animation:vg-mic-pulse 1.2s ease-out infinite}
@keyframes vg-mic-pulse{from{transform:scale(.9);opacity:.6}to{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.vg-mic.vg-mic-on::after{animation:none}}
@media (pointer:coarse){.vg-mic{width:44px;height:44px}}
.fd .composer .vg-mic{align-self:center;margin-right:4px}
body.door #gbnd{width:auto!important;padding:0 10px 0 6px;gap:6px;display:inline-flex;align-items:center}
body.door #gbnd .vg-bnd-lab{font:600 12px var(--vg-font-display);letter-spacing:.01em}
/* boundary mode: the ants march while it's on (composer.js) */
body.door #gbnd.vg-bnd .vg-bnd-lasso{transition:stroke-width .2s}
body.door #gbnd.vg-bnd[aria-pressed="true"] .vg-bnd-lasso{animation:vg-bnd-march .9s linear infinite;stroke-width:2.8}
@keyframes vg-bnd-march{to{stroke-dashoffset:-11.6}}
@media (prefers-reduced-motion:reduce){body.door #gbnd.vg-bnd[aria-pressed="true"] .vg-bnd-lasso{animation:none}}

/* the person's octopus in the chat: Will's charcoal (light) / light-grey (dark) octopus, eyes and all - no silhouette filter */
body.door .gm.you img.dyou.vg-you,:root[data-theme="light"] body.door .gm.you img.dyou.vg-you{filter:none!important;opacity:1!important;image-rendering:pixelated}

/* ── Vista Elements switch (Will, 2026-09-28): no outline when it's on. "On" reads as the swatch lighting up. ── */
body.door .gfoot .gel[aria-pressed="true"]::after,body.door .gel[aria-pressed="true"]::after,
body.door .gfoot .gel[aria-pressed="true"]:hover::after{opacity:0!important;animation:none!important}
body.door .gfoot .gel[aria-pressed="true"]{background:var(--vg-raise)!important;color:var(--vg-ink)!important;box-shadow:none!important}
body.door .gel .gsw{transition:transform .25s var(--vg-spring),filter .25s}
body.door .gel[aria-pressed="true"] .gsw{transform:scale(1.12);filter:saturate(1.25) brightness(1.1)}
body.door .gel[aria-pressed="true"] .gsw i{animation:vg-gsw-pop .5s var(--vg-spring,cubic-bezier(.2,.9,.3,1.2)) both}
body.door .gel[aria-pressed="true"] .gsw i:nth-child(2n){animation-delay:.05s}
body.door .gel[aria-pressed="true"] .gsw i:nth-child(3n){animation-delay:.1s}
@keyframes vg-gsw-pop{0%{transform:scaleY(.2);opacity:.3}100%{transform:none;opacity:1}}

/* ── Area button (Will): no bounce, no gold glow. Just the button, with its ants marching round the pin
   like every other outline in the app (slow at rest, quicker while boundary mode is on). ── */
body.door #gbnd,body.door #gbnd.nudge,body.door #gbnd.ping{animation:none!important}
body.door #gbnd[aria-pressed="true"]{box-shadow:none!important}
body.door #gbnd.vg-bnd .vg-bnd-lasso{animation:vg-bnd-march 2.4s linear infinite}
body.door #gbnd.vg-bnd[aria-pressed="true"] .vg-bnd-lasso{animation-duration:.9s}
@media (prefers-reduced-motion:reduce){body.door .gel[aria-pressed="true"] .gsw i,body.door #gbnd.vg-bnd .vg-bnd-lasso{animation:none!important}}

/* ── Area button v2 (Will): no box outline at all. The ants round the pin ARE the outline: still at rest,
   on hover (or keyboard focus) they march and their colours flow gold → red → blue, like the map ring. ── */
body.door #gbnd.vg-bnd,body.door #gbnd.vg-bnd:hover,body.door #gbnd.vg-bnd[aria-pressed="true"]{border:0!important;box-shadow:none!important;background:transparent!important;outline:0}
body.door #gbnd.vg-bnd::after,body.door #gbnd.vg-bnd:hover::after,body.door #gbnd.vg-bnd:focus-visible::after{display:none!important}
body.door #gbnd.vg-bnd .vg-bnd-lasso{animation:none}
body.door #gbnd.vg-bnd:is(:hover,:focus-visible) .vg-bnd-lasso{animation:vg-bnd-march 1.2s linear infinite}
body.door #gbnd.vg-bnd[aria-pressed="true"] .vg-bnd-lasso{animation:vg-bnd-march .9s linear infinite}
@keyframes vg-bnd-c1{0%,100%{stop-color:#ebaa1f}33%{stop-color:#b22c2e}66%{stop-color:#b5d9ee}}
@keyframes vg-bnd-c2{0%,100%{stop-color:#b22c2e}33%{stop-color:#b5d9ee}66%{stop-color:#ebaa1f}}
@keyframes vg-bnd-c3{0%,100%{stop-color:#b5d9ee}33%{stop-color:#ebaa1f}66%{stop-color:#b22c2e}}
body.door #gbnd.vg-bnd:is(:hover,:focus-visible,[aria-pressed="true"]) stop:nth-child(1){animation:vg-bnd-c1 2.4s linear infinite}
body.door #gbnd.vg-bnd:is(:hover,:focus-visible,[aria-pressed="true"]) stop:nth-child(2){animation:vg-bnd-c2 2.4s linear infinite}
body.door #gbnd.vg-bnd:is(:hover,:focus-visible,[aria-pressed="true"]) stop:nth-child(3){animation:vg-bnd-c3 2.4s linear infinite}
body.door #gbnd.vg-bnd:is(:hover,:focus-visible) .vg-bnd-lab{color:var(--vg-ink)}
body.door #gbnd.vg-bnd:focus-visible .vg-bnd-lab{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){body.door #gbnd.vg-bnd .vg-bnd-lasso,body.door #gbnd.vg-bnd stop{animation:none!important}}

/* embed mode shows the account sheet too (account-overlay.js), over the front door */
html.j-embed.j-embed body.door>:not(#auth):not(#set){visibility:hidden!important}
html.j-embed.j-embed body.door #set{visibility:visible!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Data library: Geo instead of the sparkle in the describe-and-search box (Will) — yellow in dark, red in light */
body.door .lsearch.ai > span.ai{font-size:0!important;color:transparent!important;width:32px!important;height:24px!important;flex:none;
  background:url("/vista100/brand/geo/geo-still-yellow.png") center/contain no-repeat!important;border-radius:0!important;box-shadow:none!important;image-rendering:pixelated}
:root[data-theme="light"] body.door .lsearch.ai > span.ai{background-image:url("/vista100/brand/geo/geo-still-red.png")!important}