/* ══════════════════════════════════════════════════════════════════════════════
   Colurvist shared top bar — the homepage header, on every other page.

   Ported from the `body.home` rules that live inline in index.html. Two deliberate
   differences from that original:
     · the bar is OPAQUE here. On the homepage it is see-through because it floats over
       the hero render; on an ordinary page there is nothing behind it to show, and a
       translucent bar over a plain background just reads as a lighter stripe.
     · everything is scoped to `.cv-hdr` rather than `body.home`, so a page opts in by
       loading this file — no page-level class juggling.

   SELF-CONTAINED ON PURPOSE: the generated ai-*.html pages carry their own inline CSS
   and never load styles.css, so this file may not depend on it (no shared custom
   properties, no reset). Everything it needs is stated here.

   Pairs with cv-header.js, which builds the markup and drives the menus.
   ══════════════════════════════════════════════════════════════════════════════ */

/* `html body header.cv-hdr` — (0,1,3) — is deliberate, not decoration. Several pages
   already style the bare <header> through their own body class: community.html has
   `body.comm header {background: rgba(244,244,242,.72)}` and pricing.html carries
   `body.home header {background: transparent}`. Both are (0,1,2) and would otherwise beat
   a plain `.cv-hdr` (0,1,0), leaving white text on a pale bar. Anything a page might
   already set on <header> is restated here at the winning weight. */
html body header.cv-hdr {
  /* Jost, because that is what the homepage bar is: index.html points its own
     --font-mono at Jost and the nav inherits it. Shipping JetBrains Mono + Montserrat
     here meant the shared bar read in two different faces from the page it sat on.
     ⚠ The webfont has to be LOADED by the page — every page carrying this stylesheet
     also carries a Jost <link>; keep the two together when adding a new page. */
  --cvh-mono: 'Jost', 'Inter', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
  --cvh-sans: 'Jost', 'Inter', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0 16px; padding: 15px 34px; margin: 0;
  /* Match the page, don't guess at it. styles.css sets `--bg: #000` and the generated
     ai-*.html pages paint #000 inline, so a hardcoded #050505 bar sat one shade off the
     surface underneath it and drew a seam across the top of every page. A page that
     genuinely wants a distinct bar sets --cvh-bg. */
  background: var(--cvh-bg, #000);
  border-bottom: 1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  isolation: isolate;
}
/* a page-scoped rule could also paint the bar through a pseudo-element (index.html does) */
html body header.cv-hdr::before, html body header.cv-hdr::after { content: none; }

/* ── logo ─────────────────────────────────────────────────────────────────── */
.cv-hdr .cvh-logo { justify-self: start; display: inline-flex; align-items: center; gap: 11px; }
.cv-hdr .cvh-wm { height: 20px; width: auto; display: block; mix-blend-mode: screen; }

/* ── the three triggers ───────────────────────────────────────────────────── */
.cv-hdr .hm-nav { justify-self: center; display: flex; align-items: center; gap: 34px; }
.cv-hdr .hm-drop { position: static; }
.cv-hdr .hm-trig {
  display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  font-family: var(--cvh-mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: .4px; text-transform: uppercase; color: #fff;
  transition: color .15s;
}
/* The caret is DRAWN, not typed — the "⌄" glyph hangs low in its em box and reads as
   misaligned. A rotated square has no baseline, so align-items:center puts its middle on
   the word's middle; the -2px corrects for the 45° rotation pushing its visual centre
   below its geometric one. font-size:0 hides the glyph, but the colour must stay set —
   the borders that draw the chevron are currentColor. */
.cv-hdr .hm-car {
  display: block; width: 8px; height: 8px; flex: 0 0 8px; font-size: 0; line-height: 0;
  border-right: 1.8px solid #fff; border-bottom: 1.8px solid #fff; border-radius: 1px;
  transform: translateY(-2px) rotate(45deg); transform-origin: center;
  transition: transform .2s ease, border-color .15s;
}
.cv-hdr .hm-drop.open .hm-car { transform: translateY(1px) rotate(225deg); }

/* ── the mega panel ───────────────────────────────────────────────────────── */
/* FIXED to the window, not nested in the nav: the nav is a narrow flex box, so an
   absolutely-positioned panel could never escape it. cv-header.js sets `top` from the
   live header height and aims --arrow-x at whichever trigger opened it.
   overflow stays visible — the arrow hangs above the top edge and any clipping here
   removes it. Scrolling lives on .hm-body. */
.cv-hdr .hm-panel {
  display: block; visibility: hidden; opacity: 0;
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100vw - 96px)); overflow: visible;
  /* Properly see-through. ⚠ A HEAVY blur over a near-black page is what looked like film
     grain: Chrome dithers a large-radius blur across dark gradients and the speckle reads
     as texture. Less tint AND less blur — turning the blur up to compensate for the tint
     is what created the effect in the first place. */
  background: rgba(12,12,14,.34);
  -webkit-backdrop-filter: blur(13px) saturate(125%); backdrop-filter: blur(13px) saturate(125%);
  /* NO outline. Every other drop-box in the app (the model-page pop-lists, the model
     picker, the + menu, the voices box) is a .34 pane with at most a rgba(255,255,255,.1)
     hairline; this one carried a .26 border, which read as a white line drawn round the
     menu and made it look like a solid box rather than glass. */
  border: 0; border-radius: 20px;
  padding: 30px 34px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); z-index: 120;
  transition: opacity .16s ease, visibility 0s linear .42s;
}
.cv-hdr .hm-drop.open .hm-panel { visibility: visible; opacity: 1; transition: opacity .16s ease, visibility 0s; }
/* Each panel is its own element, so switching menus would jump from one box height to the
   next. JS starts the incoming panel at the outgoing one's height and lets it settle. */
.cv-hdr .hm-panel.hm-sizing,
.cv-hdr .hm-drop.open .hm-panel.hm-sizing { transition: opacity .16s ease, visibility 0s, height .34s cubic-bezier(.4,0,.2,1); }
/* invisible bridge across the gap under the trigger, so travelling down to the panel
   doesn't register as leaving the menu */
.cv-hdr .hm-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.cv-hdr .hm-arrow {
  position: absolute; top: -11px; left: var(--arrow-x, 50%); transform: translateX(-50%);
  width: 28px; height: 12px; background: rgba(12,12,14,.34);
  -webkit-backdrop-filter: blur(13px) saturate(125%); backdrop-filter: blur(13px) saturate(125%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cv-hdr .hm-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,300px); gap: 0 34px; max-height: 68vh; overflow: auto; }
.cv-hdr .hm-grid { display: grid; grid-template-columns: repeat(var(--cols,3), minmax(190px,1fr)); gap: 1px 20px; align-content: start; }
.cv-hdr .hm-it { display: block; padding: 9px 11px; }
.cv-hdr .hm-it:hover { background: #171717; }
.cv-hdr .hm-n { display: block; font-family: var(--cvh-sans); font-size: 14px; font-weight: 400; letter-spacing: -.2px; color: #fff; }
.cv-hdr .hm-t { display: block; margin-top: 3px; font-family: var(--cvh-sans); font-size: 11.5px; font-weight: 300; line-height: 1.4; color: #8f8f98; }
.cv-hdr .hm-soon { display: inline-block; margin-left: 8px; font-family: var(--cvh-sans); font-size: 8px; font-weight: 700; letter-spacing: 1px; color: #0a0a0a; background: #cfcfcf; padding: 2px 6px; vertical-align: 2px; }
.cv-hdr .hm-side { border-left: 1px solid #232323; padding-left: 34px; }
.cv-hdr .hm-h { font-family: var(--cvh-sans); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #8f8f98; margin: 0 0 12px; }
.cv-hdr .hm-h + .hm-card { margin-bottom: 24px; }
.cv-hdr .hm-card { display: block; background: #141414; border-radius: 12px; padding: 16px 18px; transition: background .15s; }
.cv-hdr .hm-card:hover { background: #1e1e1e; }
.cv-hdr .hm-cn { display: block; font-family: var(--cvh-sans); font-size: 15px; font-weight: 400; letter-spacing: -.3px; color: #fff; }
.cv-hdr .hm-ct { display: block; margin-top: 6px; font-family: var(--cvh-sans); font-size: 12px; font-weight: 300; line-height: 1.45; color: #9d9da6; }
.cv-hdr .hm-all { display: inline-block; margin: 26px 0 0 11px; font-family: var(--cvh-sans); font-size: 15px; font-weight: 400; letter-spacing: -.3px; color: #fff; transition: color .15s; }
.cv-hdr .hm-all:hover { color: #b4b4b4; }

/* ── the words sweep in diagonally ────────────────────────────────────────── */
/* Each item carries --d, its distance along the top-left → bottom-right diagonal, set
   when the menu is built. The delay grows with --d going in and runs BACKWARDS coming
   out, so the sweep reverses rather than replaying. */
.cv-hdr :is(.hm-it, .hm-card, .hm-h, .hm-all) {
  opacity: 0; transform: translate(-14px, -10px);
  transition: opacity .26s ease, transform .32s cubic-bezier(.16,.84,.32,1), background .15s;
  transition-delay: calc(var(--dmax, 8) * 14ms - var(--d, 0) * 14ms);
}
.cv-hdr .hm-drop.open :is(.hm-it, .hm-card, .hm-h, .hm-all) {
  opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 46ms);
}
@media (prefers-reduced-motion: reduce) {
  .cv-hdr .hm-panel, .cv-hdr .hm-drop.open .hm-panel { transition: none; }
  .cv-hdr :is(.hm-it, .hm-card, .hm-h, .hm-all),
  .cv-hdr .hm-drop.open :is(.hm-it, .hm-card, .hm-h, .hm-all) { transition: none; transform: none; opacity: 1; }
}

/* ── right-hand status ────────────────────────────────────────────────────── */
.cv-hdr .cvh-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.cv-hdr .cvh-link {
  font-family: var(--cvh-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 1.8px; text-transform: uppercase; color: #fff;
  padding: 6px 2px; transition: color .15s;
}
.cv-hdr .cvh-link:hover { color: #b4b4b4; }
.cv-hdr .cvh-btn {
  font-family: var(--cvh-mono); font-size: 12px; font-weight: 500; letter-spacing: .5px;
  color: #08080a; background: #fff; border: 1px solid #fff; padding: 9px 16px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.cv-hdr .cvh-btn:hover { background: #e6e6e6; border-color: #e6e6e6; }

/* ── the account circle (built by app.js) ─────────────────────────────────────
   app.js styles .cv-avatar for a LIGHT bar — its border is rgba(0,0,0,.16), which
   disappears against this one. Restated here for the dark bar, plus the caption
   underneath so the control reads as "log in" before you've signed in. */
.cv-hdr .header-status { display: flex; align-items: center; }
.cv-hdr .cv-avatar { border-color: rgba(255,255,255,.28); }
.cv-hdr .cv-avatar:hover { border-color: rgba(255,255,255,.6); }
/* No caption under the circle — the sign-in wording belongs in the menu the circle
   opens, not permanently under it. */

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html body header.cv-hdr { grid-template-columns: auto 1fr; gap: 10px 14px; padding: 12px 18px; }
  .cv-hdr .hm-nav { grid-column: 1 / -1; justify-self: start; gap: 22px; flex-wrap: wrap; }
  .cv-hdr .cvh-right { gap: 12px; }
  .cv-hdr .hm-panel { width: calc(100vw - 24px); padding: 22px 20px 20px; }
  .cv-hdr .hm-body { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .cv-hdr .hm-side { border-left: 0; border-top: 1px solid #232323; padding-left: 0; padding-top: 20px; }
}

/* ── GLASS VARIANT ────────────────────────────────────────────────────────────
   The homepage bar is see-through because it floats over the hero. A page that wants
   the same treatment adds `cvh-glass` to <body> instead of restating these rules in
   its own stylesheet — a second copy in a second file loses the cascade race whenever
   the load order puts this file last, which is exactly what happened on community.html.

   Two knobs, both set by the page:
     --cvh-glass : the tint behind the blur (default = the site's near-black)
     data-cvh-ink="dark" on <body> : dark ink, for a pale tint. The wordmark is a white
                                     PNG, so it has to be inverted rather than recoloured.
   `content: ''` here overrides the `content: none` above — order matters, keep it below. */
html body.cvh-glass header.cv-hdr {
  background: transparent; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* the tint rides a PSEUDO-ELEMENT, never the header itself: a backdrop-filter makes its
   element the containing block for fixed descendants, and the mega-panel is fixed — so
   filtering the header would trap the panel inside the bar. */
html body.cvh-glass header.cv-hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--cvh-glass, rgba(5,5,5,.72));
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
}
html body.cvh-glass[data-cvh-ink="dark"] header.cv-hdr :is(.hm-trig, .cvh-link) { color: var(--cvh-ink, #14141a); }
html body.cvh-glass[data-cvh-ink="dark"] header.cv-hdr .hm-car { border-color: var(--cvh-ink, #14141a); }
html body.cvh-glass[data-cvh-ink="dark"] header.cv-hdr .cvh-wm { filter: invert(1); mix-blend-mode: normal; }
html body.cvh-glass[data-cvh-ink="dark"] header.cv-hdr .cvh-btn {
  background: var(--cvh-ink, #14141a); border-color: var(--cvh-ink, #14141a); color: #fff;
}
.cv-hdr * { box-sizing: border-box; }
.cv-hdr a { text-decoration: none; color: inherit; }