/* The data room's shared layout, dataroom.entrepreneur.vc.
   Every colour, face and size is a token from tokens.css (the fund's own system, never HF's).
   This file lays out what the screens share: the header, the room page, a document, the chat
   pop-up, buttons, form fields, the admin tables, the stat tiles, and print.

   Two rules from Jonathan's design pass on 2026-09-13 hold everywhere below. No hairline
   borders: surfaces are told apart by space and by a filled tint (--ev-tint), never by a 1px
   rule. And space over decoration: fewer labels, larger gaps, one quiet column on the room.

   Layout: the header is --ev-top-h tall and there is no footer strip. A screen that fills
   the window under the header (a document, the deck) takes exactly that height and scrolls
   inside itself. The chat is a pop-up on the right, --ev-drawer-w wide; while it is open on a
   wide screen, body.ev-chat-open pads the page so nothing sits under it. Under 900 px the
   pop-up covers the screen and the page scrolls as one. */

:root {
  /* The token copy's faint grey (#747885) measures 3.7:1 on navy and 3.4:1 on the chat panel,
     under the 4.5:1 that small text needs. With the hairlines gone, faint text carries more of
     the hierarchy, so the room lifts it to a grey that clears 4.5:1 on both grounds. */
  --ev-text-faint: #8E93A1;
  --ev-top-h: 72px;
  --ev-stage: #0B0E18;                     /* the ground behind a slide or a PDF page */
  --ev-tint: rgba(255, 255, 255, .04);     /* a quiet filled surface: a hovered row, a menu item */
  --ev-tint-2: rgba(255, 255, 255, .08);   /* a filled control: a tag, a question, a small button */
  --ev-cite-bg: rgba(153, 167, 249, .12);
  --ev-cite-bg-hover: rgba(153, 167, 249, .22);
  --ev-drawer-w: 440px;
  --ev-pad-x: clamp(20px, 4vw, 56px);
  --ev-ring: 0 0 0 2px rgba(153, 167, 249, .45);
  --ev-content-w: 1120px;
  /* The header's side padding lines its logo and menu up with the room's content column. */
  --ev-align-x: max(var(--ev-pad-x), calc((100% - var(--ev-content-w)) / 2 + var(--ev-pad-x)));
}

/* ---- The shell ---- */
html { height: 100%; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
body { min-height: 100%; display: flex; flex-direction: column; }
.ev-main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--ev-blue-light); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---- The header: the logo, two links and the account menu ---- */
.ev-top { position: sticky; top: 0; z-index: 40; height: var(--ev-top-h); flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--ev-align-x); background: var(--ev-navy); }
.ev-mark { display: block; line-height: 0; flex: none; }
.ev-mark img { height: 28px; width: auto; display: block; }
.ev-mark .ev-mono { display: none; }
.ev-top nav { display: flex; align-items: center; gap: 32px; font: 600 14px/1 var(--ev-font); }
.ev-top nav > a { color: var(--ev-text-muted); text-decoration: none; padding: 10px 0; }
.ev-top nav > a:hover, .ev-top nav > a.ev-on { color: var(--ev-text); }
.ev-top nav > a.ev-on { box-shadow: inset 0 -2px 0 var(--ev-gold); }
.ev-acct { position: relative; }
.ev-acct summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ev-text-muted); padding: 10px 14px; margin-right: -14px; border-radius: 999px; }
.ev-acct summary::-webkit-details-marker { display: none; }
.ev-acct summary span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-acct summary::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ev-acct summary:hover, .ev-acct[open] summary, .ev-acct.ev-on summary { color: var(--ev-text); background: var(--ev-tint); }
.ev-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 8px; display: grid; background: var(--ev-panel); border-radius: var(--ev-radius-lg); box-shadow: var(--ev-shadow); z-index: 50; }
.ev-acct-menu a { color: var(--ev-text-muted); text-decoration: none; padding: 11px 12px; border-radius: var(--ev-radius); }
.ev-acct-menu a:hover, .ev-acct-menu a.ev-on { color: var(--ev-text); background: var(--ev-tint-2); }
.ev-acct-menu a.ev-out { color: var(--ev-text-faint); }
.ev-acct-menu a:not(.ev-out) + a.ev-out { margin-top: 8px; }

/* ---- The room: the video and one column of documents ---- */
.ev-roomcol { width: 100%; max-width: var(--ev-content-w); margin: 0 auto; padding: 56px var(--ev-pad-x) 140px; box-sizing: border-box; }
.ev-hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 56px; align-items: center; }
.ev-hero-copy { min-width: 0; }
/* No video yet: the deck's cover is the hero on its own, across the full column. */
.ev-hero.ev-hero-solo { grid-template-columns: minmax(0, 1fr); }
.ev-hero h1 { font: 800 clamp(26px, 2.6vw, 34px)/1.12 var(--ev-font); letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.ev-hero p { color: var(--ev-text-muted); font: 400 16px/1.6 var(--ev-font); margin: 0; max-width: 42ch; }

.ev-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #26304F 0%, #131A30 55%, #0B0E18 100%); }
.ev-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* The placeholder: a quiet play mark, so the frame reads as a video still to come. */
.ev-video .ev-play-mark { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--ev-tint-2); }
.ev-video .ev-play-mark::after { content: ""; position: absolute; left: 29px; top: 24px; width: 20px; height: 24px; background: rgba(255, 255, 255, .5); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Until the video exists: the deck's cover slide fills the frame and opens the slide viewer.
   A white frame (Jonathan, 2026-09-14) marks it as a picture to click, not the page's ground:
   square-cornered and 2px, which he asked for after the first 4px rounded version. Still not the
   1px hairline the room avoids. The doubled class outranks the phone rule that rounds .ev-video. */
.ev-video.ev-video-deck { border: 2px solid #fff; border-radius: 0; }
.ev-deck-cover { position: absolute; inset: 0; display: block; color: var(--ev-text); text-decoration: none; }
.ev-deck-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ev-deck-cover:hover img { transform: scale(1.02); }
.ev-deck-launch { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.ev-deck-cover:hover .ev-deck-launch { background: var(--ev-gold-deep); }
.ev-deck-cover:focus-visible { outline: 0; }
.ev-video:has(.ev-deck-cover:focus-visible) { box-shadow: var(--ev-ring); }

/* The chevron under the hero: tells a reader the documents are below the fold, and jumps there. */
.ev-more { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 28px auto 0; border-radius: 50%; color: var(--ev-text-muted); transition: color .2s ease, background .2s ease; }
.ev-more:hover { color: var(--ev-text); background: var(--ev-tint); }
.ev-more:focus-visible { outline: 0; box-shadow: var(--ev-ring); }
.ev-more svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ev-more svg { animation: ev-more-bob 2.4s ease-in-out infinite; }
}
@keyframes ev-more-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media print { .ev-more { display: none; } }

.ev-docs { margin-top: 40px; }
.ev-docs h2 { font: 700 22px/1.2 var(--ev-font); letter-spacing: -.01em; margin: 0 0 20px; }
.ev-files { list-style: none; margin: 0 -16px; padding: 0; }
.ev-files li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 88px 80px; gap: 24px; align-items: center; padding: 18px 16px; border-radius: var(--ev-radius-lg); }
.ev-files li:hover { background: var(--ev-tint); }
.ev-file { min-width: 0; color: var(--ev-text); text-decoration: none; }
.ev-file::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ev-file:focus-visible { outline: 0; }
.ev-file:focus-visible::after { box-shadow: var(--ev-ring); }
.ev-file-name { display: block; font: 600 16px/1.35 var(--ev-font); }
.ev-file-blurb { display: block; margin-top: 5px; font: 400 14px/1.5 var(--ev-font); color: var(--ev-text-faint); }
.ev-file-len { font: 500 13px/1 var(--ev-font); color: var(--ev-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-file-act { text-align: right; font: 600 13px/1 var(--ev-font); }
.ev-file-act a { position: relative; z-index: 1; color: var(--ev-blue-light); text-decoration: none; padding: 8px 0; }
.ev-file-act a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev-files li.ev-empty { display: block; color: var(--ev-text-faint); }
.ev-legal { margin: 56px 0 0; font: var(--ev-small); color: var(--ev-text-faint); max-width: 64ch; }

/* ---- Tags and quiet labels: filled, never outlined ---- */
.ev-tag { display: inline-block; font: 600 12px/1 var(--ev-font); padding: 7px 11px; border-radius: 999px; background: var(--ev-tint-2); color: var(--ev-text-muted); white-space: nowrap; text-decoration: none; }
.ev-tag.ev-dl { color: var(--ev-blue-light); }
.ev-tag.ev-soon { background: rgba(0, 0, 0, .45); }
.ev-quiet { font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); white-space: nowrap; }

/* ---- The chat pop-up ---- */
.ev-fab { position: fixed; right: 24px; bottom: 24px; z-index: 35; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; background: var(--ev-gold); color: var(--ev-navy); font: 700 15px/1 var(--ev-font); cursor: pointer; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.ev-fab:hover { background: var(--ev-gold-deep); }
.ev-fab svg { display: block; flex: none; }
.ev-fab[hidden] { display: none; }
.ev-drawer { position: fixed; top: calc(var(--ev-top-h) + 8px); right: 16px; bottom: 16px; width: min(var(--ev-drawer-w), calc(100vw - 32px)); z-index: 36; display: flex; flex-direction: column; background: var(--ev-panel); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); overflow: hidden; }
.ev-drawer[hidden] { display: none; }
.ev-drawer-close { position: absolute; top: 18px; right: 16px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ev-text-muted); font: 400 26px/1 var(--ev-font); cursor: pointer; }
.ev-drawer-close:hover { background: var(--ev-tint-2); color: var(--ev-text); }
/* Only a screen wide enough to keep the room readable beside the pop-up makes room for it;
   a narrower one lets the pop-up sit over the page, because squeezing the content column
   under 900 px wraps the headline and shrinks the video. */
@media (min-width: 1400px) {
  body.ev-chat-open .ev-main { padding-right: calc(var(--ev-drawer-w) + 32px); }
}

.ev-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ev-chat-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 64px 10px 24px; }
.ev-chat-hd > div { min-width: 0; }
.ev-chat-hd h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 18px/1.25 var(--ev-font); letter-spacing: -.01em; }
/* The AI mark (templates/_sparkles.html): gold in a heading, the button's own colour on a button. */
.ev-ai-mark { display: block; flex: none; }
.ev-chat-hd .ev-ai-mark { color: var(--ev-gold); }
.ev-ask-inline { gap: 8px; }
.ev-chat .ev-new { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ev-tint-2); font: 600 13px/1 var(--ev-font); color: var(--ev-text-muted); cursor: pointer; white-space: nowrap; }
.ev-chat .ev-new:hover { color: var(--ev-text); }
.ev-chat .ev-new[disabled] { opacity: .5; cursor: default; }
.ev-chat .ev-new[hidden], .ev-thread .ev-thread-empty[hidden] { display: none; }

/* The top of the thread fades out instead of cutting a message off under the heading. */
.ev-thread { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px); mask-image: linear-gradient(to bottom, transparent 0, #000 20px); }
.ev-thread-empty { padding: 12px 0; font: 400 15px/1.6 var(--ev-font); color: var(--ev-text-muted); }
.ev-turn { padding: 12px 0 20px; }
.ev-turn .ev-q { display: block; width: fit-content; max-width: 85%; margin: 0 0 14px auto; padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--ev-tint-2); font: 500 15px/1.45 var(--ev-font); color: var(--ev-text); }
.ev-turn .ev-a { font: 400 15px/1.6 var(--ev-font); color: var(--ev-text-muted); }
.ev-turn .ev-a .ev-lbl { display: none; }
.ev-turn .ev-a.ev-refuse .ev-lbl, .ev-turn .ev-a.ev-error .ev-lbl { display: block; margin-bottom: 6px; font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); }
.ev-turn .ev-a.ev-error .ev-lbl { color: var(--ev-red); }
.ev-turn .ev-a p { margin: 0 0 10px; max-width: none; }
.ev-turn .ev-a p:last-child { margin-bottom: 0; }
.ev-turn .ev-a ul, .ev-turn .ev-a ol { margin: 0 0 10px; padding-left: 20px; }
.ev-turn .ev-a li { margin-bottom: 6px; }
.ev-turn .ev-a strong { color: var(--ev-text); font-weight: 700; }
.ev-turn .ev-a .ev-read { display: block; margin-top: 12px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-turn .ev-a .ev-cites { margin-top: 4px; }
.ev-turn .ev-a.ev-thinking, .ev-turn .ev-a.ev-thinking p { color: var(--ev-text-faint); }
.ev-cite { display: inline-block; margin: 2px 4px 0 0; padding: 5px 9px; border-radius: 999px; background: var(--ev-cite-bg); font: 600 12px/1 var(--ev-font); color: var(--ev-blue-light); text-decoration: none; white-space: nowrap; }
.ev-cite:hover { background: var(--ev-cite-bg-hover); }
.ev-cite.ev-on { background: var(--ev-blue-light); color: var(--ev-navy); }

.ev-composer { padding: 12px 16px 16px; }
.ev-composer .ev-askform { margin: 0; }
.ev-composer .ev-box { display: flex; align-items: center; height: 52px; margin: 0; padding: 0 6px 0 20px; border-radius: 999px; background: var(--ev-navy); }
.ev-composer .ev-box:focus-within { box-shadow: var(--ev-ring); }
.ev-composer .ev-box input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 400 15px/1 var(--ev-font); color: var(--ev-text); }
.ev-composer .ev-box input::placeholder { color: var(--ev-text-faint); }
.ev-composer .ev-box .ev-send { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ev-gold); font: 700 14px/1 var(--ev-font); color: var(--ev-navy); cursor: pointer; }
.ev-composer .ev-box .ev-send:hover { background: var(--ev-gold-deep); }
.ev-composer .ev-box .ev-send[disabled] { background: var(--ev-tint-2); color: var(--ev-text-faint); cursor: default; }
.ev-composer .ev-foot { margin: 10px 8px 0; font: 500 13px/1.4 var(--ev-font); color: var(--ev-text-faint); }

/* ---- A document: the toolbar and the PDF ---- */
.ev-docview { display: flex; flex-direction: column; height: calc(100vh - var(--ev-top-h)); min-height: 480px; }
.ev-bar { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--ev-align-x); background: var(--ev-navy); }
.ev-bar .ev-crumb { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 14px/1 var(--ev-font); color: var(--ev-text-faint); white-space: nowrap; }
.ev-bar .ev-crumb a { color: var(--ev-text-faint); text-decoration: none; }
.ev-bar .ev-crumb a:hover { color: var(--ev-text); }
.ev-bar .ev-crumb b { color: var(--ev-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ev-bar .ev-ctl { display: flex; align-items: center; gap: 20px; flex: none; font: 600 13px/1 var(--ev-font); color: var(--ev-text-muted); }
.ev-bar a.ev-open { color: var(--ev-text-muted); text-decoration: none; }
.ev-bar a.ev-open:hover { color: var(--ev-text); }
.ev-page { flex: 1; min-height: 0; background: var(--ev-stage); }
.ev-page iframe { width: 100%; height: 100%; border: 0; display: block; }
.ev-narrow-only { display: none; }

/* ---- Buttons and form fields ---- */
.ev-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: var(--ev-radius); background: transparent; font: 700 15px/1 var(--ev-font); color: var(--ev-text); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ev-btn-gold, .ev-btn-primary { background: var(--ev-gold); color: var(--ev-navy); }
.ev-btn-gold:hover, .ev-btn-primary:hover { background: var(--ev-gold-deep); }
.ev-btn-outline { color: var(--ev-text); border-color: var(--ev-text); }
.ev-btn-outline:hover { background: var(--ev-text); color: var(--ev-navy); }
.ev-btn-quiet { color: var(--ev-text-muted); background: var(--ev-tint-2); }
.ev-btn-quiet:hover { color: var(--ev-text); background: rgba(255, 255, 255, .14); }
.ev-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.ev-btn[disabled] { opacity: .5; cursor: default; }
.ev-field { display: grid; gap: 8px; }
.ev-field label { font: 700 13px/1 var(--ev-font); color: var(--ev-text-muted); }
.ev-field input:not([type="checkbox"]):not([type="radio"]), .ev-field select, .ev-field textarea { box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: var(--ev-radius); background: var(--ev-navy-deep); font: 400 16px/1 var(--ev-font); color: var(--ev-text); outline: 0; }
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus { box-shadow: var(--ev-ring); }
.ev-field input::placeholder, .ev-field textarea::placeholder { color: var(--ev-text-faint); }
.ev-field textarea { height: 104px; padding-top: 14px; line-height: 1.4; resize: vertical; }
.ev-help { font: var(--ev-small); color: var(--ev-text-faint); }
.ev-radio { display: inline-flex; gap: 10px; align-items: center; font: 500 15px/1 var(--ev-font); color: var(--ev-text); cursor: pointer; }
.ev-radio input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid var(--ev-text-muted); position: relative; cursor: pointer; }
.ev-radio input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ev-text); }
.ev-radio.ev-off { color: var(--ev-text-muted); }
.ev-toggle { display: inline-block; width: 40px; height: 22px; margin: 0; border: 0; border-radius: 11px; background: var(--ev-tint-2); position: relative; vertical-align: middle; appearance: none; cursor: pointer; }
.ev-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ev-text-muted); transition: left .12s; }
.ev-toggle.ev-on, .ev-toggle:checked { background: var(--ev-blue-light); }
.ev-toggle.ev-on::after, .ev-toggle:checked::after { left: 21px; background: var(--ev-navy); }
.ev-num { font-variant-numeric: tabular-nums; }
.ev-notice { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--ev-radius); background: var(--ev-tint); box-shadow: inset 3px 0 0 var(--ev-blue-light); font: var(--ev-small); color: var(--ev-text-muted); }
.ev-notice.ev-error { box-shadow: inset 3px 0 0 var(--ev-red); }

/* ---- Sign in and request access: the gate, two columns ---- */
.ev-gate { flex: 1; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.ev-gate .ev-side { background: var(--ev-navy-deep); padding: 64px 72px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
/* The side panel is just the name and "Dataroom", centred, with the offering notice at the foot. */
.ev-gate .ev-gate-brand { margin: auto 0; display: grid; justify-items: start; gap: 20px; }
/* The lockup is the SVG rebuilt from the magazine's EPS (2026-09-14) and is the panel's only content; it sits in the h1 so the page still has a heading. */
.ev-gate .ev-gate-brand h1 { margin: 0; line-height: 0; }
.ev-gate .ev-gate-brand img { height: 112px; width: auto; }
.ev-gate .ev-side .ev-foot { font: var(--ev-small); color: var(--ev-text-faint); max-width: 520px; }
.ev-gate .ev-form { display: grid; align-content: center; padding: 56px clamp(32px, 8vw, 120px); }
.ev-gate .ev-form h2 { font: 800 30px/1.1 var(--ev-font); margin: 0 0 10px; letter-spacing: -.01em; text-wrap: balance; }
.ev-gate .ev-form p { color: var(--ev-text-muted); margin: 0 0 32px; max-width: none; text-wrap: balance; }
.ev-gate .ev-form form { display: grid; }
/* Sign in has no line under its heading (Jonathan, 2026-09-14), so the form keeps the gap that line used to hold. */
.ev-gate .ev-form h2 + form, .ev-gate .ev-form h2 + .ev-notice { margin-top: 22px; }
.ev-gate .ev-form .ev-field { margin-bottom: 20px; }
.ev-gate .ev-form .ev-btn { width: 100%; margin-top: 8px; }
.ev-gate .ev-form .ev-alt { margin-top: 28px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-gate .ev-form .ev-alt a { color: var(--ev-blue-light); text-decoration: none; }
.ev-gate .ev-form .ev-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev-sent { margin-top: 32px; padding: 18px 20px; border-radius: var(--ev-radius); background: var(--ev-tint); font: var(--ev-small); color: var(--ev-text-muted); }
.ev-sent b { display: block; margin-bottom: 8px; font: 700 14px/1.2 var(--ev-font); color: var(--ev-text); }
.ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---- The deck viewer ---- */
.ev-deck { display: flex; flex-direction: column; height: calc(100vh - var(--ev-top-h)); min-height: 420px; background: var(--ev-stage); }
.ev-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 32px; background: var(--ev-stage); position: relative; }
.ev-nav { height: 72px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--ev-align-x); background: var(--ev-navy); position: relative; }
.ev-nav .ev-brand { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); }
.ev-nav .ev-brand img { height: 22px; width: auto; }
.ev-nav .ev-ctl { display: flex; align-items: center; gap: 20px; }
.ev-nav .ev-ctl button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ev-tint-2); color: var(--ev-text); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ev-nav .ev-ctl button svg { width: 18px; height: 18px; display: block; }
.ev-nav .ev-ctl button:hover { background: var(--ev-gold); color: var(--ev-navy); }
.ev-nav .ev-ctl button[disabled] { background: var(--ev-tint); color: var(--ev-text-faint); cursor: default; }
.ev-nav .ev-count { min-width: 84px; text-align: center; font: 700 14px/1 var(--ev-font); letter-spacing: .04em; color: var(--ev-text); font-variant-numeric: tabular-nums; }
.ev-nav .ev-count span { color: var(--ev-text-faint); }
.ev-nav .ev-count small { display: block; margin-top: 6px; font: 500 13px/1 var(--ev-font); color: var(--ev-text-muted); letter-spacing: 0; }
.ev-nav .ev-title { text-align: right; font: 500 13px/1 var(--ev-font); color: var(--ev-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-nav .ev-bar { position: absolute; left: 0; top: 0; height: 2px; min-height: 0; width: 0; padding: 0; background: var(--ev-gold); transition: width .2s; display: block; }
.ev-nav .ev-title { display: none; }
/* The deck and a document put their Ask button in their own bar, never over the page. */
.ev-nav-end { display: flex; justify-content: flex-end; align-items: center; }
.ev-ask-inline[hidden] { display: none; }
.ev-hint { text-align: center; font: var(--ev-small); color: var(--ev-text-faint); padding: 0 20px 16px; }
.ev-notes { width: min(100%, 640px); margin: 0 auto; padding: 0 20px; }
.ev-notes .ev-eb { margin-bottom: 10px; font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); }
.ev-notes h2 { font: 800 22px/1.15 var(--ev-font); letter-spacing: -.02em; margin: 0 0 12px; }
.ev-notes p { font: 400 15px/1.55 var(--ev-font); color: var(--ev-text-muted); margin: 0 0 10px; max-width: none; }
.ev-notes p b { color: var(--ev-text); font-weight: 700; }

/* ---- Admin: the invite list and the document switches ---- */
/* Admin and analytics share the room's column, so their left edge sits under the logo. */
.ev-admin, .ev-dash { box-sizing: border-box; width: 100%; max-width: var(--ev-content-w); margin: 0 auto; }
.ev-admin { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; padding: 48px var(--ev-pad-x) 96px; }
.ev-sec { min-width: 0; }
.ev-sec h3 { margin: 0 0 6px; font: 800 24px/1.2 var(--ev-font); letter-spacing: -.01em; }
.ev-sec > .ev-sub { color: var(--ev-text-muted); font-size: 15px; margin: 0 0 24px; max-width: none; }
.ev-sec h4 { margin: 0 0 12px; font: 700 15px/1.2 var(--ev-font); color: var(--ev-text-muted); }
.ev-invite { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 16px; align-items: end; margin-bottom: 32px; padding: 20px 22px; border-radius: var(--ev-radius-lg); background: var(--ev-panel); }
.ev-invite .ev-field input { height: 48px; font-size: 15px; background: var(--ev-navy); }
.ev-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ev-tbl th { text-align: left; padding: 0 12px 12px 0; font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); }
.ev-tbl td { padding: 14px 12px 14px 0; vertical-align: middle; font: 500 15px/1.4 var(--ev-font); color: var(--ev-text); }
.ev-tbl tbody tr:hover td { background: var(--ev-tint); }
.ev-tbl tbody tr td:first-child { padding-left: 12px; border-radius: var(--ev-radius) 0 0 var(--ev-radius); }
.ev-tbl thead th:first-child { padding-left: 12px; }
.ev-tbl tbody tr td:last-child { padding-right: 12px; border-radius: 0 var(--ev-radius) var(--ev-radius) 0; }
.ev-tbl td .ev-sub { display: block; margin-top: 3px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-tbl td.ev-n, .ev-tbl th.ev-n { text-align: right; padding-left: 20px; color: var(--ev-text-muted); white-space: nowrap; }
.ev-tbl td.ev-st, .ev-tbl th.ev-st { white-space: nowrap; width: 200px; }
.ev-tbl td.ev-q { font-weight: 500; color: var(--ev-text); }
.ev-tbl td.ev-q .ev-sub { color: var(--ev-text-faint); white-space: normal; }
.ev-st .ev-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; background: var(--ev-text-faint); }
.ev-st .ev-dot.ev-in { background: var(--ev-blue-light); }
.ev-st .ev-dot.ev-req { background: var(--ev-gold); }
.ev-st .ev-dot.ev-off { background: var(--ev-tint-2); }
.ev-acts { display: inline-flex; gap: 8px; }
.ev-acts form { display: inline; margin: 0; }
.ev-acts .ev-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ev-doclist { display: grid; gap: 2px; }
.ev-doclist .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px; gap: 12px; align-items: center; padding: 12px; border-radius: var(--ev-radius); }
.ev-doclist .ev-row:not(.ev-head):hover { background: var(--ev-tint); }
.ev-doclist .ev-row.ev-head { padding: 0 12px 10px; font: 600 13px/1 var(--ev-font); color: var(--ev-text-faint); }
.ev-doclist .ev-row.ev-head span:not(:first-child) { text-align: center; }
.ev-doclist .ev-name { min-width: 0; font: 500 15px/1.3 var(--ev-font); }
.ev-doclist .ev-name .ev-sub { display: block; margin-top: 3px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-doclist .ev-tg { text-align: center; }
.ev-doclist .ev-tg form { margin: 0; }
.ev-doclist .ev-row.ev-off .ev-name { color: var(--ev-text-faint); }
.ev-note { margin-top: 20px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-upload { margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ev-upload .ev-note { margin: 0; }

/* ---- Analytics: the tiles, the tables, the bars ---- */
.ev-dash { padding: 48px var(--ev-pad-x) 96px; }
.ev-dash .ev-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.ev-dash .ev-hd h3 { margin: 0; font: 800 24px/1.2 var(--ev-font); letter-spacing: -.01em; }
.ev-dash .ev-hd .ev-range { font: 600 14px/1 var(--ev-font); color: var(--ev-text-muted); }
.ev-dash .ev-hd .ev-range b { color: var(--ev-text); }
.ev-dash .ev-hd .ev-range a { color: var(--ev-text-muted); text-decoration: none; }
.ev-dash .ev-hd .ev-range a:hover, .ev-dash .ev-hd .ev-range a.ev-on { color: var(--ev-text); }
.ev-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.ev-tile { padding: 20px 22px; border-radius: var(--ev-radius-lg); background: var(--ev-panel); }
.ev-tile .ev-v { font: 800 32px/1 var(--ev-font); color: var(--ev-gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ev-tile .ev-v small { margin-left: 6px; font: 600 15px/1 var(--ev-font); color: var(--ev-text-muted); }
.ev-tile .ev-l { margin-top: 8px; font: var(--ev-small); color: var(--ev-text-muted); }
.ev-cols { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 56px; }
.ev-bars { display: grid; gap: 8px; }
.ev-bars .ev-r { display: grid; grid-template-columns: 170px 1fr 44px; gap: 12px; align-items: center; font: 500 13px/1 var(--ev-font); color: var(--ev-text-muted); }
.ev-bars .ev-r i { display: block; height: 12px; border-radius: 2px; background: var(--ev-gold); }
.ev-bars .ev-r i.ev-g { background: var(--ev-chart-4); }
.ev-bars .ev-r .ev-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ev-text); }
.ev-bars .ev-axis { margin-top: 10px; font: var(--ev-small); color: var(--ev-text-faint); }
.ev-qs { margin-top: 32px; }

/* ---- On a phone: one column, the pop-up covers the screen ---- */
@media (max-width: 900px) {
  :root { --ev-top-h: 60px; }
  .ev-top { gap: 12px; }
  .ev-mark img { height: 22px; }
  .ev-top nav { gap: 20px; }
  .ev-acct summary span { max-width: 96px; }
  .ev-page iframe { height: 75vh; }

  .ev-roomcol { padding-top: 24px; padding-bottom: 120px; }
  .ev-hero { grid-template-columns: 1fr; gap: 24px; }
  .ev-video { border-radius: 12px; }
  .ev-video .ev-lock { height: 26px; }
  .ev-hero h1 { font-size: 24px; }
  .ev-more { margin-top: 16px; }
  .ev-docs { margin-top: 24px; }
  .ev-files li { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px; }
  .ev-file-len { display: none; }

  .ev-fab { right: 16px; bottom: 16px; }
  .ev-drawer { inset: 0; width: 100vw; border-radius: 0; z-index: 60; }

  .ev-docview { height: auto; min-height: calc(100vh - var(--ev-top-h)); }
  .ev-bar { height: auto; min-height: 56px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; row-gap: 10px; }
  .ev-bar .ev-ctl { flex: 1 1 100%; gap: 14px; flex-wrap: wrap; }
  .ev-deck-notes summary { cursor: pointer; list-style: none; width: fit-content; margin: 0 auto 16px; padding: 10px 16px; border-radius: 999px; background: var(--ev-tint-2); font: 600 14px/1 var(--ev-font); color: var(--ev-text-muted); }
  .ev-deck-notes summary::-webkit-details-marker { display: none; }
  .ev-page { min-height: 75vh; }
  .ev-narrow-only { display: inline; }

  /* Rows sized to their content, with the notice's row taking what is left, so the brand
     and the form sit together instead of being spread down the screen. */
  .ev-gate { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: 100vh; }
  .ev-gate .ev-side { display: contents; }
  .ev-gate .ev-gate-brand { order: 1; margin: 0; padding: 28px 24px 28px; gap: 10px; }
  .ev-gate .ev-gate-brand img { height: 64px; }
  .ev-gate .ev-form { order: 3; padding: 20px 24px 24px; align-content: start; }
  .ev-gate .ev-side .ev-foot { order: 4; padding: 0 24px 24px; margin-top: auto; }
  .ev-two { grid-template-columns: 1fr; }

  .ev-deck { height: auto; min-height: calc(100vh - var(--ev-top-h)); }
  .ev-stage { flex: none; padding: 16px 0; align-content: start; }
  .ev-nav { grid-template-columns: 1fr auto 1fr; height: 76px; }
  /* No room in the bar on a phone, so the deck's Ask button floats above it instead. */
  .ev-nav-end .ev-ask-inline { position: fixed; right: 16px; bottom: 96px; z-index: 35; height: 52px; padding: 0 22px; border-radius: 999px; font-size: 15px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }

  .ev-admin { grid-template-columns: 1fr; padding-top: 28px; gap: 40px; }
  .ev-invite { grid-template-columns: 1fr; align-items: stretch; }
  .ev-tbl th.ev-n, .ev-tbl td.ev-n { padding-left: 10px; }
  .ev-dash { padding-top: 28px; }
  .ev-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ev-cols { grid-template-columns: 1fr; gap: 32px; }
  .ev-sec { overflow-x: auto; }
  .ev-tbl { min-width: 640px; }
}

/* A narrow phone: the wordmark gives way to the monogram, and the name shortens, so the
   header fits in one line without scrolling sideways. */
@media (max-width: 520px) {
  .ev-mark .ev-lockup { display: none; }
  .ev-mark .ev-mono { display: block; height: 30px; }
  .ev-top nav { gap: 16px; }
  .ev-acct summary { padding: 8px 10px; margin-right: -10px; }
  .ev-acct summary span { max-width: 64px; }
}

/* ---- Print: white paper, ink text, one column, no chrome. A document prints its page;
   the chat, the header nav and the floating button stay on screen. ---- */
@media print {
  :root { --ev-top-h: 0px; }
  html, body { height: auto; background: var(--ev-paper); color: var(--ev-ink); }
  .ev-top nav, .ev-drawer, .ev-fab, .ev-nav, .ev-bar .ev-ctl { display: none !important; }
  .ev-top { position: static; height: auto; padding: 0 0 16px; background: transparent; }
  .ev-mark img { filter: invert(1); }
  .ev-docview, .ev-deck { display: block; height: auto; min-height: 0; }
  .ev-roomcol { padding: 0; max-width: none; }
  .ev-admin, .ev-dash { display: block; padding: 0; }
  .ev-cols, .ev-tiles { display: block; }
  .ev-tile, .ev-invite, .ev-sent { background: transparent; break-inside: avoid; }
  .ev-tile .ev-v { color: var(--ev-ink); }
  .ev-tbl td, .ev-tbl th, .ev-doclist .ev-row { color: var(--ev-ink); }
  .ev-file, .ev-hero h1, .ev-sec h3, .ev-dash .ev-hd h3, .ev-docs h2 { color: var(--ev-ink); }
  .ev-hero p, .ev-file-blurb, .ev-file-len, .ev-legal, .ev-sec .ev-sub, .ev-tile .ev-l, .ev-tbl td.ev-n { color: var(--ev-ink-muted); }
  .ev-page { display: block; background: transparent; }
  .ev-page iframe { height: 100vh; }
  .ev-stage { padding: 0; background: transparent; }
  .ev-bars .ev-r i { background: var(--ev-ink); }
  .ev-tag { color: var(--ev-ink-muted); background: transparent; }
  a { color: var(--ev-ink); text-decoration: none; }
}