/* app/vs-top.css — ONE HEADER, FOR EVERY PAGE OUTSIDE THE APP.

   Ayan, 2026-09-03, having looked at the live site: "I had implemented a new design scheme at the
   start which i really like but i think the agents didn't connect the pages well - second page is
   not connected and not in the same form".

   He was right, and this is what was measured on venuesootra.com before this file existed:

     page        header            height   background            class family
     /           .si-top           53 px    transparent           si-
     /venues     .vp-top           59 px    rgba(0,0,0,.82)       vp- vl- tb-
     /app        .topbar           52 px    rgba(10,10,12,.8)     ev- topbar stepper

   Three separate header components, three heights, three treatments. On top of that the two
   marketing pages ran on Inter from fonts.googleapis.com while the app runs on Grift + IBM Plex
   self-hosted from /design/fonts/ -- so even Fraunces, the one face all three share, was being
   fetched twice from two different origins with two different fallbacks.

   THIS FILE IS THE APP'S LANGUAGE, NOT A FOURTH ONE. Every value below is lifted from
   evoke.html's own tokens and .topbar rule, so the marketing pages and the product read as one
   thing rather than three:
     --bg      #0C0C0E                     evoke.html:94
     --line    rgba(237,239,244,.15)       evoke.html:95
     --text    #EDEFF3                     evoke.html:109
     --muted   rgba(237,239,244,.58)       evoke.html:109
     --accent  #E7850B                     evoke.html:117
     .topbar   rgba(10,10,12,.8) + blur(20px), 1px bottom line   evoke.html:252-254

   SELF-HOSTED ON PURPOSE. The app already ships these files; pulling the same faces from a CDN on
   the pages either side of it is a second source of truth for the brand, an extra origin, and a
   different flash-of-unstyled-text. The @font-face blocks below are the app's own, pointed at the
   app's own files.

   SCOPED ON PURPOSE. Everything is under .vs-top so dropping this file into a page cannot restyle
   anything already there -- the 96.7%-of-the-page leak measured when an unscoped stylesheet was
   dropped into evoke.html is the reason that rule exists.

   THE HEIGHT IS 58px, WHICH IS THE APP'S, not the 53 or 59 the two pages had. One number.        */

@font-face{font-family:'Grift';src:url('/design/fonts/grift-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Grift';src:url('/design/fonts/grift-500.woff2') format('woff2');
  font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/design/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/design/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

.vs-top{
  /* the app's tokens, declared on the component so the host page's own tokens are never touched */
  --vst-bg:rgba(10,10,12,.8);
  --vst-line:rgba(237,239,244,.15);
  --vst-text:#EDEFF3;
  --vst-muted:rgba(237,239,244,.58);
  --vst-accent:#E7850B;
  --vst-accent-hi:#F6A63C;
  --vst-font:'Grift','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --vst-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  position:sticky; top:0; z-index:60;
  box-sizing:border-box;

  /* ⚠ 52px, AND ON THE PAGE'S OWN COLUMN (2026-09-03). Two things were wrong and both were mine.
     HEIGHT: this said 58 and cited evoke.html:252 -- but :252 is overridden further down the
     sheet and the app's band actually computes to 52, so the two headers I had called "unified"
     were 6 px apart.
     COLUMN: it was full-bleed with `padding:0 20px`, so on /venues the brand sat at x=20 while
     the page's whole content column -- h1, the search box, the filter row, every card -- starts
     at 316. Measured at 1920: a 296 px offset, so nothing in the header lined up with anything
     below it. .vp-wrap sets that column (max-width 1340, 26px padding); the header now uses the
     same two numbers, so one vertical line runs from the brand down through every card.
     GRID, NOT FLEX: flex with margin-left:auto on the actions left 1302 px of dead space in the
     middle at 1920 -- measured, ~70% of the bar. The app's own band is a three-column grid with
     its stepper CENTRED; this is the same shape, with the page's context line in that cell, so
     the two bars read as one family instead of one having a centre and the other a hole. */
  height:52px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding:0 26px;
  background:var(--vst-bg);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--vst-line);
  font-family:var(--vst-font);
  color:var(--vst-text);
}
.vs-top *{box-sizing:border-box}

/* THE BRAND IS ALWAYS THE WAY HOME. On /venues the way back used to be a link labelled
   "The room", which names neither the page it leaves nor the page it reaches. */
.vs-top .vs-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--vst-text); text-decoration:none; font-weight:600; font-size:15px;
  letter-spacing:-.01em; white-space:nowrap;
}
.vs-top .vs-brand:hover{color:#fff}
.vs-top .vs-brand .vs-mark{
  width:22px; height:22px; flex:0 0 auto; border-radius:0;
  background:var(--vst-accent); display:grid; place-items:center;
}
.vs-top .vs-brand .vs-mark::after{content:''; width:8px; height:8px; background:#0C0C0E}

/* the page's own one-line context — the only part that differs between pages */
.vs-top .vs-ctx{
  font-family:var(--vst-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vst-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.vs-top .vs-act{margin-left:auto; display:flex; align-items:center; gap:8px}

.vs-top .vs-link{
  font-size:13px; color:var(--vst-muted); text-decoration:none; padding:7px 10px;
  border:1px solid transparent; white-space:nowrap;
}
.vs-top .vs-link:hover{color:var(--vst-text); border-color:var(--vst-line)}
.vs-top .vs-link[aria-current="page"]{color:var(--vst-text); border-color:var(--vst-line)}

.vs-top .vs-cta{
  font:inherit; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
  padding:7px 14px; border-radius:0;
  color:#0C0C0E; background:var(--vst-accent); border:1px solid var(--vst-accent);
}
.vs-top .vs-cta:hover{background:var(--vst-accent-hi); border-color:var(--vst-accent-hi)}
.vs-top .vs-cta:focus-visible,
.vs-top .vs-link:focus-visible,
.vs-top .vs-brand:focus-visible{outline:2px solid var(--vst-accent-hi); outline-offset:2px}

@media (max-width:720px){
  .vs-top{gap:10px; padding:0 12px}
  .vs-top .vs-ctx{display:none}          /* the context line goes before any control does */
}

/* THE COLUMN, and the three cells inside it. .vs-brand takes the left cell, .vs-ctx the middle
   (centred, which is where the app puts its stepper), .vs-act the right cell pushed to its end.
   max-width + auto margins reproduce .vp-wrap exactly rather than guessing a number. */
.vs-top{max-width:none}
.vs-top>.vs-brand{justify-self:start}
.vs-top>.vs-ctx{justify-self:center; text-align:center}
.vs-top>.vs-act{justify-self:end; margin-left:0}
@media (min-width:1393px){          /* 1340 + 2x26 padding: below this the bar is already inset */
  .vs-top{padding-left:calc((100vw - 1340px) / 2 + 26px);
          padding-right:calc((100vw - 1340px) / 2 + 26px)}
}
/* deploy-lock proof 2026-09-04: the guarded path must still be able to write. */