/* ============================================================================
   VESPER THEME — single source of truth for tokens, body, nav, common UI
   ============================================================================
   Theme version: 2.0
   Loaded by:    <link rel="stylesheet" href="/vesper-theme.css?v=2">

   IMPORTANT: do NOT redefine tokens (--brass, --cool, --paper, etc.) inside
   any page's inline <style> block. Page styles should ONLY add page-specific
   layout/components — tokens are shared from this file. `verify_theme.py`
   enforces this in CI.

   Token scope: :root (global). Palette/mode value flips live in
   /vesper-skin.css (`html[data-palette][data-mode]` blocks — kit v1); the
   old `html.dusk` class is retired.
   Surface tier: FLAT PARCHMENT (--paper == --paper-2; --paper-3 slightly
   different for chrome). No body radial gradients — grain-only atmosphere.
   ============================================================================ */


/* === Tokens — Day mode (default) ========================================== */
:root {
  /* Surface */
  --paper:#F2EDDF;
  --paper-2:#F2EDDF;        /* FLAT: bg == panel bg */
  --paper-3:#E6DDD0;        /* chrome / inset surfaces */

  /* Ink */
  --ink:#2A2018;
  --ink-soft:#5C4D3A;
  --muted:#8C7F6A;
  --muted-2:#A89B85;

  /* Lines */
  --line:rgba(60,40,20,0.14);
  --line-soft:rgba(60,40,20,0.08);

  /* Brass (warm accent) */
  --brass:#B88A3F;
  --brass-dim:#9C7426;
  --brass-bright:#D9A857;
  --brass-soft:rgba(184,138,63,0.10);

  /* Cool (cool accent) */
  --cool:#3F7D7B;
  --cool-soft:rgba(63,125,123,0.10);
  --cool-strong:#356866;

  /* Semantic accents */
  --crimson:#A8362D;
  --sage:#658764;
  --persimmon:#B85530;
  --good:#3F8A4F;
  --bad:#A8362D;

  /* Type stack */
  --display:'Spectral',serif;
  --body:'Spline Sans',sans-serif;
  --mono:'Spline Sans Mono',monospace;
  --brand:'Cinzel',serif;

  /* Sizing */
  --body-size:13.5px;            /* app pages; public pages override to 15px */
  --body-weight:300;
  --line-height:1.55;

  /* Atmosphere */
  --grain-opacity:0.06;
}


/* === Tokens — Dusk mode ===================================================
   DELETED (kit v1, 2026-07-02 — the skin header's "Stage 4" note, executed).
   Dark values now live in /vesper-skin.css as paired
   html[data-palette][data-mode] blocks; the old `html.dusk` class is retired
   and maps to warm-day via the skin's compat catch. */


/* === Reset =============================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{background:transparent;border:none;font:inherit;color:inherit;cursor:pointer}
button,a,[onclick]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}


/* === Body ================================================================ */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:var(--body-weight);
  font-size:var(--body-size);
  line-height:var(--line-height);
  min-height:100dvh;          /* mobile-safe (dvh > vh) */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Public pages opt into larger body via body.public */
body.public{--body-size:15px}

/* Grain — SVG fractalNoise, viewport-fixed, no color tint.
   Canonical params: viewBox 240x240, baseFrequency 0.85, numOctaves 2, seed 3. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:var(--grain-opacity);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Headings */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.05;
  color:var(--ink);
}


/* === Selection & focus (a11y additions, theme 2.0) ======================= */
::selection{background:var(--brass);color:var(--paper)}

/* :focus-visible — keyboard users get a clear ring; mouse users don't.
   Override per-component if you need a tighter ring (e.g. inline inputs). */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--cool);
  outline-offset:2px;
  border-radius:2px;
}


/* === Reduced motion ====================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* === Print =============================================================== */
@media print{
  .nav,.mode-toggle,.nav-logout,.nav-account,
  .vbug-pill,#vbug-modal{display:none !important}
  body::before{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
}


/* === Nav ================================================================= */
.nav{
  position:sticky;top:0;z-index:200;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:0 44px;
  height:54px;
  display:flex;align-items:center;
}

.nav-brand{
  display:flex;align-items:center;gap:11px;
  color:var(--ink);margin-right:40px;flex-shrink:0;
}
.nav-mark{
  width:22px;height:22px;
  color:var(--brass);flex-shrink:0;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--brass) 40%, transparent));
}
.nav-word{
  font-family:var(--brand);font-weight:500;
  font-size:13px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink);
}

.nav-links{display:flex;gap:24px;flex:1}
.nav-links a{
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  position:relative;padding:4px 0;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--cool);font-weight:500}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-19px;left:0;right:0;
  height:2px;background:var(--cool);
}
.nav-beta{
  font-size:7px;letter-spacing:0.04em;
  color:var(--brass);vertical-align:super;
  margin-left:2px;line-height:1;font-weight:500;opacity:0.7;
}

/* Grouped nav: top-level trigger button that opens a dropdown of related links.
   Shares vocabulary with .nav-links a so font/color/active rules cascade. */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group-btn{
  background:transparent;border:none;padding:4px 0;cursor:pointer;
  color:var(--ink-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;
  position:relative;white-space:nowrap;
}
.nav-group-btn:hover{color:var(--ink)}
.nav-group-btn.active{color:var(--cool);font-weight:500}
/* Underline hugs the trigger (not the nav's bottom border like flat .nav-links a)
   so it can never overlap the popover. Hidden while the dropdown is open. */
.nav-group-btn.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:14px;
  height:2px;background:var(--cool);
}
.nav-group-btn[aria-expanded="true"]::after{display:none}
.nav-group-caret{font-size:8px;opacity:0.6;letter-spacing:0}
.nav-group-pop{
  position:absolute;top:calc(100% + 10px);left:-12px;
  min-width:180px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
  padding:6px 0;z-index:250;
  display:flex;flex-direction:column;
}
.nav-group-pop[hidden]{display:none}
.nav-group-pop a{
  display:block;padding:9px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.nav-group-pop a:hover{color:var(--ink);background:color-mix(in srgb, var(--brass) 6%, transparent)}
.nav-group-pop a.active{color:var(--cool);font-weight:500}
/* Override the inherited .nav-links a.active::after underline — that rule
   is positioned at bottom:-19px to align with the nav's bottom border on
   flat links, but inside a popover it draws the bar across the next row. */
.nav-group-pop a.active::after{display:none}

/* Extras slot — page-owned controls (e.g. record.html's gear) */
.nav-extras{display:inline-flex;align-items:center;gap:8px}
.nav-extras:empty{display:none}

/* Brand-area tag chip (e.g. "Admin" on admin.html) — accepts `tag="X"` on
   <vesper-nav>. Crimson tone signals a special / privileged surface. */
.nav-tag{
  font-family:var(--mono);font-size:9px;
  letter-spacing:0.14em;text-transform:uppercase;
  background:color-mix(in srgb, var(--crimson) 12%, transparent);
  color:var(--crimson);
  border:1px solid color-mix(in srgb, var(--crimson) 28%, transparent);
  padding:2px 7px;border-radius:2px;margin-left:4px;
}

.nav-right{
  margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0;
}

/* Status (data-freshness indicator) */
.nav-status{
  display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;
  font-family:var(--mono);font-size:10px;color:var(--muted);
}
.nav-dot{
  width:6px;height:6px;border-radius:50%;
  flex-shrink:0;display:inline-block;
  background:var(--muted);
}
.nav-dot.fresh{
  background:var(--brass);
  animation:nav-pulse 2.4s ease-in-out infinite;
}
.nav-dot.stale{background:var(--muted)}
.nav-dot.very-stale{background:var(--crimson)}
@keyframes nav-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Mode toggle (Day/Dusk) */
.mode-toggle{
  display:flex;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  font-family:var(--mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
}
.mode-toggle button{
  background:transparent;color:var(--muted);
  padding:5px 9px;font:inherit;letter-spacing:inherit;text-transform:inherit;
  display:flex;align-items:center;gap:5px;
  transition:background 0.15s, color 0.15s;
}
.mode-toggle button:hover{color:var(--ink)}
.mode-toggle button.on{background:var(--cool);color:var(--paper)}
.mode-toggle button svg{width:12px;height:12px;flex-shrink:0}

/* Account button (popover host — see vesper-nav.js for menu markup) */
.nav-account{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  color:var(--muted);
  padding:5px 10px;
  border:1px solid var(--line);border-radius:2px;
  background:transparent;
  transition:color 0.15s, border-color 0.15s;
}
.nav-account:hover{color:var(--ink);border-color:var(--brass)}
.nav-account svg{width:12px;height:12px;flex-shrink:0}
.nav-account .nav-account-caret{font-size:8px;opacity:0.6}

.nav-account-pop{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:240px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
  padding:14px 16px;
  z-index:250;
  font-family:var(--body);
}
.nav-account-pop[hidden]{display:none}
.nav-account-pop .acct-email{
  font-family:var(--body);font-size:13px;color:var(--ink);
  word-break:break-all;margin-bottom:3px;
}
.nav-account-pop .acct-tier{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:10px;
}
.nav-account-pop hr{
  border:none;border-top:1px solid var(--line-soft);margin:10px 0;
}
.nav-account-pop a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);
  padding:7px 0;
}
.nav-account-pop a:hover{color:var(--ink)}
.nav-account-pop .badge-soon{
  font-size:8px;letter-spacing:0.1em;
  color:var(--brass);background:var(--brass-soft);
  padding:2px 6px;border-radius:99px;
}

/* Logout (standalone — kept available for pages without account button) */
.nav-logout{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);
  padding-left:14px;border-left:1px solid var(--line);
}
.nav-logout:hover{color:var(--ink)}

/* Nav responsive */
@media (max-width:1100px){.nav-links{gap:14px}.nav{padding:0 24px}}
@media (max-width:900px){.nav-links{display:none}}  /* hides groups too — they're inside .nav-links */
@media (max-width:600px){
  .nav-status{display:none}
  .nav-right{gap:8px}
  .nav-brand{margin-right:16px}
  /* nav-right overflowed the viewport on phones (cut-off account, squished
     brand, easy-to-miss hamburger). Make Day/Dusk + account icon-only. */
  .mode-toggle .mode-lbl{display:none}
  .mode-toggle button{padding:7px 9px}
  .nav-account [data-vesper-account-label],
  .nav-account .nav-account-caret{display:none}
  .nav-account{padding:7px 9px}
  .nav-account svg{width:16px;height:16px}
  /* Bigger, clearer hamburger tap target */
  .nav-menu-btn svg{width:22px;height:22px}
  .nav-menu-btn{padding:7px 6px}
}


/* === Mobile drawer (opt-in via `<vesper-nav with-drawer>`) =============== */
.nav-menu-btn{
  display:none;background:transparent;border:1px solid var(--line);border-radius:2px;
  padding:5px 8px;color:var(--muted);line-height:1;
  align-items:center;justify-content:center;
  transition:color 0.15s, border-color 0.15s;
}
.nav-menu-btn svg{width:16px;height:16px;display:block}
.nav-menu-btn .icon-close{display:none}
.nav-menu-btn.open .icon-open{display:none}
.nav-menu-btn.open .icon-close{display:block}
.nav-menu-btn.open{color:var(--cool);border-color:var(--cool)}

.nav-drawer{
  position:fixed;top:54px;left:0;right:0;z-index:199;
  background:var(--paper);border-bottom:1px solid var(--line);
  max-height:0;overflow:hidden;opacity:0;pointer-events:none;
  transition:max-height 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s;
}
/* Open: allow the drawer to be as tall as the viewport (was capped at 560px,
   which clipped the last pages — Record/Roster/Logout — on short viewports),
   and scroll WITHIN itself. overscroll-behavior:contain stops the scroll from
   chaining to the page behind (the "background scrolls" bug). */
.nav-drawer.open{
  max-height:calc(100vh - 54px);          /* fallback for older browsers */
  max-height:calc(100dvh - 54px);         /* dvh = the actually-visible height on iOS Safari */
  opacity:1;pointer-events:auto;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.nav-drawer a{
  display:flex;align-items:center;
  padding:15px 24px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
  transition:color 0.12s, background 0.12s;
}
.nav-drawer a:last-child{border-bottom:none}
.nav-drawer a.active{color:var(--cool);border-left:2px solid var(--cool);padding-left:22px}
.nav-drawer a:active{background:color-mix(in srgb, var(--cool) 6%, var(--paper));color:var(--ink)}
.nav-drawer-group-label{
  padding:14px 24px 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--brass);
  border-bottom:1px solid var(--line-soft);
}
.nav-drawer a.nav-drawer-item{padding-left:36px}
.nav-drawer a.nav-drawer-item.active{padding-left:34px}
.nav-drawer-overlay{display:none;position:fixed;inset:0;z-index:198;touch-action:none;overscroll-behavior:contain}
.nav-drawer-overlay.open{display:block}

/* Dusk popover depth: the base box-shadow is a light-mode black drop shadow,
   invisible on the dark dusk canvas. Give the dropdown + account popovers a
   darker shadow + a slightly brighter edge so they read as floating in dusk.
   Day mode is left byte-identical. */
html[data-mode="dusk"] .nav-group-pop,
html[data-mode="dusk"] .nav-account-pop{
  box-shadow:0 12px 32px rgba(0,0,0,0.55);
  border-color:rgba(237,231,216,0.16);
}

@media (max-width:960px){
  .nav-with-drawer{display:grid;grid-template-columns:auto 1fr auto;padding:0 20px;gap:0}
  .nav-with-drawer .nav-menu-btn{display:flex;border:none;color:var(--ink);grid-column:1;justify-self:start}
  .nav-with-drawer .nav-brand{grid-column:2;justify-self:center;margin:0}
  .nav-with-drawer .nav-right{grid-column:3;justify-self:end}
}


/* === Hero / page-header ================================================== */
.page-header{
  padding:32px 44px 24px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  transition:padding 0.3s ease;
}
.page-header.hero-shrunk{padding-top:12px;padding-bottom:12px}
.page-header.hero-shrunk .hero-collapse{
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height 0.3s, opacity 0.2s;
}
.page-header h1{
  font-family:var(--display);
  font-size:clamp(34px, 4vw, 64px);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.02;
  color:var(--ink);
  margin-bottom:14px;
}
.page-header h1 em{
  font-style:italic;
  color:var(--em,var(--brass));   /* kit v1: heading italics ride --em (skin) */
  font-weight:400;
}

/* Public-page hero (apply, gate, login) — larger for marketing */
body.public .page-header h1{font-size:clamp(48px, 6vw, 88px)}

.page-header .eyebrow,
.eyebrow{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--cool);
  margin-bottom:14px;
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
}
.eyebrow .r,.eyebrow .meta{color:var(--muted);font-size:9.5px;letter-spacing:0.16em}
.eyebrow .r b,.eyebrow .meta b{color:var(--ink);font-weight:500}

.hero-meta{
  display:flex;gap:0;flex-wrap:wrap;margin-top:18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.meta-item{
  flex:1 1 0;min-width:140px;
  padding:12px 16px;
  border-left:1px solid var(--line);
}
.meta-item:first-child{border-left:none}
.mi-label{
  font-family:var(--mono);font-size:9px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.mi-val{
  font-family:var(--display);font-size:22px;font-weight:500;
  color:var(--ink);line-height:1;
}
.mi-val.brass{color:var(--brass)}
.mi-val.cool{color:var(--cool)}
.mi-val.sage{color:var(--sage)}
.mi-val.persimmon{color:var(--persimmon)}
.mi-val.crimson{color:var(--crimson)}
.mi-sub{
  font-family:var(--mono);font-size:9px;letter-spacing:0.08em;
  color:var(--muted);margin-top:3px;
}

/* === Mobile: suppress page heroes to land users on search + content ========
   Per owner request — on phones the big headline / blurb / KPI hero eats the
   screen before the useful UI. Hide the decorative hero parts ONLY; never the
   search bar or filter rows (on lobbyist/roster/record those are nested INSIDE
   the same hero <header>, so we hide just the eyebrow/headline/KPI strip).
   Selectors here are page-prefixed (bpB-/ch-/lp-/rp-/vrC-) so they can't hit
   another page. index's bare `.hero` is handled in index.html (shared with
   landing.html's pitch hero, which must stay). Desktop is unaffected. */
@media (max-width:760px){
  /* `body ` prefix raises specificity to (0,1,1) so these beat each page's
     own inline `.X-hero{display:grid/flex}` base rule, which is declared
     AFTER this file and would otherwise win the source-order tiebreak. */
  /* bids + conference — hero is a standalone block, separate from search */
  body .bpB-hero,
  body .ch-hero{ display:none; }
  /* lobbyist / roster / record — search is inside the hero header; hide only
     the eyebrow + headline + KPI strip, keep search + filter tabs/chips/prompts */
  body .lp-hero > .lp-eyebrow, body .lp-hero > h1, body .lp-kpi,
  body .rp-hero > .rp-eyebrow, body .rp-hero > h1,
  body .vrC-hero > .vrC-eyebrow, body .vrC-promise{ display:none; }
  /* projects (generated page, no table wrapper to target) — let its wide
     7-column member-project table scroll within itself instead of overflowing
     the page. `.mp-table` is projects-only; this lives in the shared theme so
     it survives regeneration of projects.html. */
  .mp-table{ display:block; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
}


/* === KPI strip (canonical primitive, semantic colors) ==================== */
.kpi-strip{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.kpi-cell{padding:14px 16px;border-left:1px solid var(--line)}
.kpi-cell:first-child{border-left:none}
.kpi-cell .lbl{
  font-family:var(--mono);font-size:9px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.kpi-cell .v,.kpi-value{
  font-family:var(--display);font-size:22px;font-weight:500;
  color:var(--ink);line-height:1;
}
.kpi-value.brass{color:var(--brass)}
.kpi-value.cool{color:var(--cool)}
.kpi-value.sage{color:var(--sage)}
.kpi-value.persimmon{color:var(--persimmon)}
.kpi-value.crimson{color:var(--crimson)}


/* === Buttons / pills / chips ============================================= */
.vesper-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;
  border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);
  transition:all 0.12s ease;
}
.vesper-pill:hover{border-color:var(--brass);color:var(--brass-dim)}
.vesper-pill.on,.vesper-pill[aria-pressed="true"]{
  background:var(--cool);color:var(--paper);border-color:var(--cool);
}

.vesper-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);background:transparent;
  color:var(--ink-soft);
  transition:all 0.12s ease;
}
.vesper-chip:hover{border-color:var(--brass);color:var(--brass-dim)}
.vesper-chip.on{background:var(--brass);color:var(--paper);border-color:var(--brass)}


/* === Card / row hover glow =============================================== */
.row-hover-glow:hover,
[data-row-hover]:hover{
  background:color-mix(in srgb, var(--brass) 6%, transparent);
  box-shadow:inset 3px 0 0 var(--brass);
}


/* === Editorial vs data search inputs ===================================== */
/* Editorial: large display-font input, dashed brass underline (record, roster) */
.search-editorial{
  font-family:var(--display);font-weight:400;
  font-size:24px;letter-spacing:-0.02em;
  color:var(--ink);background:transparent;
  border:none;outline:none;
  border-bottom:2px dashed color-mix(in srgb, var(--brass) 50%, transparent);
  font-style:italic;width:100%;padding:0 0 4px;
}
.search-editorial::placeholder{
  color:var(--muted-2);font-style:italic;opacity:0.7;
}
.search-editorial:focus{
  border-bottom-color:var(--brass);
  border-bottom-style:solid;
}

/* Data: utility input, 1px border, square corners (po, contracts, etc.) */
.search-data{
  font-family:var(--body);font-size:13px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;
  padding:8px 12px;outline:none;
  transition:border-color 0.15s;
}
.search-data::placeholder{color:var(--muted-2)}
.search-data:focus{border-color:var(--cool)}


/* === Loading / empty states ============================================== */
.vesper-loading{
  display:inline-block;
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
}
.vesper-loading::after{content:'…';animation:loading-dots 1.2s steps(3,end) infinite}
@keyframes loading-dots{0%{content:'.'}33%{content:'..'}66%{content:'...'}}

.vesper-empty{
  padding:36px 12px;text-align:center;
  font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:0.16em;
}

/* ===========================================================================
   Ask Vesper canvas — shared by every Ask-X surface (rendered by /vesper-ask.js
   into a host element). All theme-token based. A page mounts the canvas into a
   container it shows/hides; these rules style the canvas DOM. Budget keeps an
   inline copy until its fast-follow migration — identical values, no conflict.
   =========================================================================== */
.pane-ask{ display:flex; flex-direction:column; height:100%; min-height:0; background:var(--paper); }
/* overscroll-behavior: the Ask surface floats over a live page — bottoming
   out the transcript must not scroll the canvas behind it. */
.ask-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px; min-height:0; }
/* kit v1 §6c: welcome card = accent left spine + serif title + example chips.
   Accent tokens come from the skin (loaded everywhere); brass/cool fallbacks
   keep this file coherent stand-alone. */
.ask-intro{
  padding:12px 16px; background:var(--paper-2); border:1px solid var(--line);
  border-left:3px solid var(--accent,var(--brass)); border-radius:8px; margin-bottom:14px;
}
.ask-intro-h{ font-family:var(--display); font-size:16px; color:var(--ink); margin:0 0 6px; }
.ask-intro-sub{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin:0 0 10px; }
.ask-cite-demo{ font-family:var(--mono); padding:1px 5px; background:rgba(184,138,63,.16); color:var(--brass); border-radius:2px; }
.ask-examples{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ask-example{
  padding:5px 10px; font-family:var(--mono); font-size:11px; text-align:left;
  background:var(--paper); color:var(--accent-strong,var(--cool-strong));
  border:1px solid color-mix(in srgb, var(--accent,var(--cool)) 45%, var(--line));
  border-radius:7px; cursor:pointer;
}
.ask-example:hover{ background:var(--accent,var(--cool)); color:var(--paper); }

.ask-transcript{ display:flex; flex-direction:column; gap:14px; }
.ask-turn{ padding:0; }
.ask-q{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--cool-strong); text-transform:uppercase; margin-bottom:6px;
}
/* kit v1 §6c: the user's question is a right-fitted bubble, not a spined block */
.ask-q-text{
  font-family:var(--body); font-size:13px; font-weight:600; color:var(--ink); line-height:1.45;
  background:var(--paper-3); padding:9px 12px; border-radius:9px 9px 2px 9px;
  margin-left:auto; width:fit-content; max-width:88%;
}
.ask-a{ margin-top:10px; }
.ask-a-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--brass); text-transform:uppercase; margin-bottom:6px;
}
.ask-a-text{ font-family:var(--body); font-size:14px; color:var(--ink); line-height:1.6; }
.ask-a-text h1,.ask-a-text h2,.ask-a-text h3{ font-family:var(--display); margin:14px 0 6px; }
.ask-a-text h3{ font-size:15px; }
.ask-a-text p{ margin:0 0 8px; }
.ask-a-text ul,.ask-a-text ol{ margin:6px 0; padding-left:22px; }
.ask-a-text li{ margin:2px 0; }
.ask-a-text table{ border-collapse:collapse; width:100%; font-size:13px; margin:6px 0; }
.ask-a-text th,.ask-a-text td{ border-bottom:1px solid var(--line-soft); padding:5px 8px; text-align:left; }
.ask-a-text th{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.ask-a-text strong{ color:var(--ink); font-weight:600; }
.ask-a-text code{ font-family:var(--mono); font-size:12px; background:rgba(184,138,63,.10); padding:1px 4px; border-radius:2px; }

/* Brass flash on a row when its citation chip is clicked (generic — pages may
   also scope it to their own row class). Fades after ~2.4s. */
.ask-cite-flash{
  background:rgba(184,138,63,.22) !important;
  box-shadow:inset 0 0 0 2px var(--brass);
  transition:background .3s ease, box-shadow .3s ease;
}
/* Inline citation card injected on chip click (no API call). */
.ask-turn--cite{ border-left:3px solid var(--brass); background:rgba(184,138,63,.04); padding:10px 12px; border-radius:2px; }
.ask-turn--cite .ask-q{ color:var(--brass-dim); }
.ask-cite-proviso{ font-family:var(--body); font-size:13px; line-height:1.55; max-height:340px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; }

/* kit v1 §6c: citation chips — accent family, bordered, deep-link the record */
.ask-cite{
  font-family:var(--mono); font-weight:600; color:var(--accent-strong,var(--brass)); cursor:pointer;
  background:var(--accent-softer,rgba(184,138,63,.10));
  border:1px solid color-mix(in srgb, var(--accent,var(--brass)) 35%, transparent);
  padding:1px 6px; border-radius:5px; transition:background .1s, color .1s;
}
.ask-cite:hover{ background:var(--accent,var(--brass)); color:var(--paper); border-color:transparent; }

.ask-followups{ margin-top:14px; padding:10px 0 0; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.ask-followups-label{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.ask-followup{
  text-align:left; padding:6px 10px; background:var(--paper); color:var(--accent-strong,var(--cool-strong));
  border:1px solid color-mix(in srgb, var(--accent,var(--cool)) 45%, var(--line));
  border-radius:7px; font-family:var(--body); font-size:12px; cursor:pointer;
  transition:background .12s, color .12s;
}
.ask-followup:hover{ background:var(--accent,var(--cool)); color:var(--paper); }
.ask-a-meta{
  margin-top:10px; padding:8px 12px; background:var(--paper-2); border-radius:3px;
  font-family:var(--mono); font-size:11px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;
}

.ask-spinner{ display:flex; align-items:center; gap:10px; padding:10px 0; font-family:var(--mono); font-size:12px; color:var(--cool-strong); }
.ask-spinner-dot{ width:8px; height:8px; border-radius:50%; background:var(--brass); animation:ask-pulse 1.2s ease-in-out infinite; }
@keyframes ask-pulse{ 0%,100%{ opacity:.3; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }

.ask-input-row{ display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--paper-2); flex-shrink:0; }
.ask-input{
  flex:1; padding:8px 12px; font-family:var(--body); font-size:14px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line-strong,var(--line)); border-radius:8px; resize:none;
}
.ask-input:focus{ outline:none; border-color:var(--accent,var(--brass)); }
.ask-send-btn{
  align-self:stretch; padding:0 18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent,var(--brass)); color:var(--paper); border:none; border-radius:8px; cursor:pointer; font-weight:600;
}
.ask-send-btn:hover{ background:var(--accent-strong,var(--brass-bright)); }
.ask-send-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* --- Ask touch refinements (phones + tablets) — desktop unaffected --------
   Scoped to coarse pointers so desktop keeps its compact 14px input + chips.
   1) ≥16px input stops iOS Safari from zooming the page on focus.
   2) The block follow-up / example chips become genuine 44px tap targets;
      inline citation chips get a slightly larger hit area without breaking
      the surrounding answer text flow. */
@media (pointer:coarse){
  .ask-input{ font-size:16px; }
  .ask-cite{ padding:3px 7px; }
  .ask-example,.ask-followup{ padding:12px 14px; min-height:44px; font-size:14px; line-height:1.3; }
  /* Markdown tables in answers can be wider than the pane (columns get cut off
     at the right edge) — let them scroll horizontally within the answer. */
  .ask-a-text table{ display:block; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  /* The Ask input row sits at the bottom of the viewport; the floating bug
     launcher (#vbug-btn, bottom:24px right:24px) would otherwise cover the
     SEND button. Lift it above the input row whenever an Ask view is active.
     Higher specificity (body-class + id) overrides vesper-bugs.js's own rule. */
  body.bids-ask-active #vbug-btn,
  body.ask-active #vbug-btn,
  body.vs-ask-active #vbug-btn{ bottom:84px; }
}