/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   cohesion.css — cleanup lane "cohesion" (FRICTION 5, 8, 15 + cheap cross-product consistency fixes)
   Load on BOTH pages, after every other door / front-door stylesheet:
     · front door  → selectors start with .fd / .back (Will's page)
     · Evan's app  → selectors start with body.door
   Tokens: --vg-* only. Every rule works in dark (default) and light (<html data-theme="light">).
   Companion: cohesion.js (text swaps + "Example" tag; no network, no globals except window.__vgCohesion).
   ════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 5 · Plans popup scrolls on phones (and on short laptop screens) ───────────────────────────────
   Front door: frontdoor.css:1126 `.back.on .modal{overflow:hidden}` (added for the pop-in + glow) beat
   the original overflow-y:auto, so on a 390×844 phone 3 of 5 plans sat below the fold, unreachable.   */
.fd .back.on .modal{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .fd .back.on .modal{max-height:calc(100dvh - 32px)}          /* 16px gutter top + bottom, respects the URL bar */
  .fd .back.on{align-items:flex-start}                          /* tall sheet starts at the top, not clipped centre */
}
/* App: the account sheet (#set → Plan tab) goes full-screen under 820px. 100vh hides its bottom behind the
   phone URL bar and the 1fr row could size to content; pin the row and let .sbody be the one scroller.  */
@media (max-width:820px){
  body.door #set .sw{height:100dvh;grid-template-rows:auto minmax(0,1fr)}
  body.door #set .sbody{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* ─── 8 · Phone map: "For sale" is a small pill in the corner, not a full-width bar ─────────────────
   Evan's phone rule stretches #dock to left:8px/right:8px and every .layers button to flex:1, so the
   switch became a 356×40 bar across the middle of the map and caught taps meant for a place.
   Now: content-width pill, bottom-left (zoom + info live bottom-right), 32px tall, and the dock's own
   padding no longer eats map taps — only its buttons take pointer events.                           */
@media (max-width:760px){
  body.door.geo #dock{left:16px!important;right:auto!important;transform:none!important;width:auto;
    max-width:calc(100vw - 96px);padding:4px;pointer-events:none}
  body.door.geo #dock :is(.drow,.layers){width:auto;flex-wrap:nowrap;pointer-events:none}
  body.door.geo #dock>:not(.drow),body.door.geo #dock .drow>:not(.layers),body.door.geo #dock .layers>*{pointer-events:auto}
  /* the listings card (#avbar) hangs off the dock and centred itself on it; with a narrow dock in the
     corner it slid off-screen left. Pin it to the dock's left edge, full phone width minus the gutters. */
  body.door.geo #dock #avbar{left:0;right:auto;transform:none;translate:none;width:calc(100vw - 32px);max-width:none}
  body.door.geo #dock .layers button{flex:none;min-height:32px;padding:0 12px;font-size:12px}
  body.door.geo #dock .gheat{display:none}                     /* the heat ramp needs room; it returns on wider screens */
}

/* ─── 15 · Example chips read as examples ("Try:"), not as someone's data ───────────────────────────── */
body.door .gwel .gchips::before{content:"Try an example";flex-basis:100%;margin:0 0 -4px;
  font:600 12px/1.2 var(--vg-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--vg-faint)}
body.door .gchips .chip .coh-eg{display:inline-block;margin-right:8px;padding:0 4px;border-radius:4px;
  font:500 12px/16px var(--vg-font-mono);vertical-align:1px;
  color:var(--vg-muted);background:var(--vg-raise2);border:1px solid var(--vg-rule)}

/* ─── Cohesion: the SAME kind of thing looks the same everywhere ─────────────────────────────────────
   a) Example-question chips: the front door's ticker (.tick) is body font 400/12.5, muted; the map's
      welcome/suggestion chips were display font 600, ink. They're the same thing (a question to try) →
      body font, 500, same size. Buttons that DO something keep the display font.                    */
body.door .gchips .chip{font-family:var(--vg-font-body);font-weight:500;letter-spacing:0}

/* b) Send button, empty box: front door = neutral grey circle; map = red at 45% (reads as "broken red").
      Match the front door: neutral until there is something to send, then Geo red.                   */
body.door .gbox:has(textarea:placeholder-shown) .gsend{opacity:1;background:var(--vg-raise2);border-color:transparent;color:var(--vg-faint)}

/* c) "Log in": the rail's full-width button had 9px corners while the top bar's Log in (same action,
      same page) is a pill. Every button that is a call to action is a pill (Sign up, Sign in, Choose …). */
.fd .btn-login{border-radius:var(--vg-pill)}

/* d) Close ×: front-door pop-ups and the sign-in sheet use a 32px bordered circle; give the report
      window's and the account sheet's close the same circle so "close" looks like one control.       */
body.door #panel .wbtn:last-child,body.door #set .sx{border-radius:50%;border:1px solid var(--vg-rule)}
body.door #panel .wbtn:last-child:hover,body.door #set .sx:hover{border-color:var(--vg-muted);color:var(--vg-ink)}

/* Motion: this file adds none (nothing to honour for prefers-reduced-motion). */