/* ============================================================
   EVA v2 — UI kit (tokens + components)
   Satopia Group internal operating system · light chrome
   One file. Class prefix: .ev-
   ============================================================ */

:root {
  /* Type — narrow system stack (matches Viktor's tools) */
  /* Instrument Sans: slightly narrow, crisp at small sizes. System stack behind it. */
  --font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Large numerals keep the system face EVA already uses (SF Pro on Mac); only the reading/UI text is Instrument Sans. */
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  --fs-metric: 30px;   --lh-metric: 36px;   --ls-metric: -0.02em;
  --fs-title: 24px;    --lh-title: 30px;    --ls-title: -0.015em;
  --fs-section: 17px;  --lh-section: 24px;  --ls-section: -0.01em;
  --fs-body: 14px;     --lh-body: 20px;     --ls-body: 0;
  --fs-small: 13px;    --lh-small: 18px;
  --fs-caption: 11.5px; --lh-caption: 14px;  --ls-caption: 0.08em;

  /* Spacing — 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Colour roles — warm cream canvas, flat white surfaces, no lines */
  --canvas: #FBFAF7;           /* near-white, a hint warm */
  --surface: #FFFFFF;
  --surface-2: #EFEFEC;        /* insets, hover fills, table header */
  --surface-3: #E3E3DF;        /* pressed / stronger inset */
  --ink: #1B1C1F;
  --ink-2: #4F5157;            /* secondary — readable */
  --ink-3: #6E7076;            /* tertiary — still readable */
  --hairline: rgba(27,28,31,0.08);   /* table rows only */
  --overlay: rgba(27,28,31,0.4);

  /* Shell — dark charcoal, never black */
  --shell: #2A2C33;
  --shell-2: #33363E;          /* topbar / hover */
  --shell-active: #3D404A;
  --shell-text: rgba(255,255,255,0.92);
  --shell-text-2: rgba(255,255,255,0.72);
  --shell-text-3: rgba(255,255,255,0.45);

  /* Venture accents — active nav marker, switcher dot, wordmark V only */
  --brand-group: #2097F8; --brand-travel: #1CA5A5; --brand-elkemist: #7840D3;
  --brand-studios: #E21866; --brand-spaces: #AEDA29; --brand-pursuit: #AEDA29;
  --accent: var(--ink);

  /* Status ramp — text tone + fill. No amber/gold anywhere: attention is carried by the brand accent or the red. */
  --st-live: #1E7A46;      --st-live-fill: #DFEFE4;     /* confirmed / paid */
  --st-progress: #137A79;  --st-progress-fill: #DDF0EF; /* in motion — deposit, itinerary */
  --st-info: #2E5EA9;      --st-info-fill: #E4EDFA;     /* submitted / needs a reply */
  --st-overdue: #B3261E;
  --st-overdue-dark: #FF6B5E;   /* the same red, lifted so it reads on charcoal */   --st-overdue-fill: #FBEAE8;  /* stale / overdue */
  --st-closed: #5B5D63;    --st-closed-fill: #EEEDEA;   /* draft / archived */

  /* Radii */
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-full: 999px;

  /* Elevation — resting cards get a barely-there lift; floating things rise */
  --e-card: 0 1px 2px rgba(46,38,20,0.04), 0 6px 20px rgba(46,38,20,0.05);
  --e-float: 0 12px 40px rgba(28,28,30,0.14);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 220ms; --t: 380ms; --t-slow: 640ms;

  /* Layout */
  --topbar-h: 52px; --sidebar-w: 232px; --sidebar-w-rail: 64px; --content-pad: var(--s-6); --content-max: 1360px;
}
[data-brand="travel"]   { --accent: var(--brand-travel); }
[data-brand="group"]    { --accent: var(--brand-group); }
[data-brand="elkemist"] { --accent: var(--brand-elkemist); }
[data-brand="studios"]  { --accent: var(--brand-studios); }
[data-brand="spaces"]   { --accent: var(--brand-spaces); }
[data-brand="pursuit"]  { --accent: var(--brand-pursuit); }
/* Canvas variant — pure white page, cards separated by shadow instead of cream */
[data-canvas="white"] { --canvas: #FFFFFF; --surface-2: #F3F3F1; --surface-3: #E7E7E4; --e-card: 0 1px 2px rgba(20,20,22,0.04), 0 8px 28px rgba(20,20,22,0.07); }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
@font-face { font-family: "Albert Sans"; src: url("../assets/AlbertSans-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-regular); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }
button, input, select, textarea { font: inherit; color: inherit; }
svg.lucide { stroke-width: 1.5px; }
::selection { background: rgba(28,165,165,0.18); }

/* ---------- Type ---------- */
.ev-eyebrow { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-medium); margin: 0; }
.ev-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: var(--w-medium); margin: 0; }
.ev-section { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--ls-section); font-weight: var(--w-medium); margin: 0; }
.ev-lead { font-size: 14px; line-height: 21px; color: var(--ink-2); margin: 0; max-width: 62ch; text-wrap: pretty; }
.ev-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); margin: 0; }
.ev-metric-num { font-family: var(--font-num); font-size: var(--fs-metric); line-height: var(--lh-metric); letter-spacing: var(--ls-metric); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.ev-muted { color: var(--ink-2); } .ev-faint { color: var(--ink-3); }

/* ============================================================
   SHELL — light chrome, sidebar on cream, content on cream
   ============================================================ */
.ev-app { display: grid; min-height: 100vh; grid-template-rows: var(--topbar-h) 1fr; grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "topbar topbar" "sidebar main"; background: var(--shell); }
.ev-main { grid-area: main; padding: var(--s-5) var(--content-pad) var(--s-8); min-width: 0; background: var(--canvas); border-radius: var(--r-lg) 0 0 0; min-height: calc(100vh - var(--topbar-h)); }
.ev-main > .ev-container { max-width: var(--content-max); }

.ev-topbar { grid-area: topbar; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding: 0 var(--s-5) 0 var(--s-4); background: var(--shell); color: var(--shell-text); }
.ev-logo { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin-left: -8px; border-radius: var(--r-md); color: var(--shell-text); width: calc(var(--sidebar-w) - 8px); }
.ev-logo img { height: 13px; width: auto; display: block; }
.ev-logo .lockup-sep { width: 1px; height: 16px; background: var(--shell-text-3); }
.ev-wm { font-family: "Albert Sans", var(--font); font-weight: 500; font-size: 17px; letter-spacing: 0.30em; margin-right: -0.30em; line-height: 1; }
.ev-wm .accent { color: var(--accent); }

.ev-switcher { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3) 0 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-full); background: transparent; color: var(--shell-text); font-size: var(--fs-small); font-weight: var(--w-medium); cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.ev-switcher:hover { background: var(--shell-active); }
.ev-switcher .ev-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); }
.ev-switcher svg { opacity: 0.6; }
/* Venture switcher menu. Lived in eva.css, which reskinned pages no longer load. */
.ev-switch-menu { position: fixed; z-index: 90;   /* same layer as .ev-menu, the kit's own dropdown */ min-width: 230px; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--e-float); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast); }
.ev-switch-menu.open { opacity: 1; visibility: visible; transform: none; }
.ev-switch-head { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--ink-3); }
.ev-switch-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.ev-switch-item:hover { background: var(--surface-2); }
.ev-switch-item.active { font-weight: var(--w-medium); }
.ev-switch-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; }
.ev-switch-check { margin-left: auto; color: var(--accent); }

/* Breadcrumb lives in the top bar, after the switcher */
.ev-topbar .ev-breadcrumb { margin: 0 0 0 var(--s-2); font-size: var(--fs-body); color: var(--shell-text-2); flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow: hidden; }
.ev-topbar .ev-breadcrumb a { color: var(--shell-text-2); } .ev-topbar .ev-breadcrumb a:hover { color: var(--shell-text); }
.ev-topbar .ev-breadcrumb span:not(.current) { color: var(--shell-text-3); }
.ev-topbar .ev-breadcrumb .current { color: var(--shell-text); font-weight: var(--w-medium); }

.ev-search { display: flex; align-items: center; gap: var(--s-2); height: 32px; width: 340px; max-width: 34vw; padding: 0 var(--s-3); margin-left: auto; border-radius: var(--r-md); background: var(--shell-active); color: var(--shell-text-2); transition: background var(--t-fast) var(--ease); }
.ev-search:focus-within { background: #fff; color: var(--ink); }
.ev-search svg { flex: none; opacity: 0.7; }
.ev-search input { all: unset; flex: 1; font-size: var(--fs-small); color: inherit; min-width: 0; }
.ev-search input::placeholder { color: inherit; opacity: 0.8; }
.ev-search kbd { font-family: inherit; font-size: 10.5px; opacity: 0.7; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }

.ev-chrome-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); border: none; background: transparent; color: var(--shell-text-2); cursor: pointer; position: relative; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ev-chrome-btn:hover { background: var(--shell-active); color: var(--shell-text); }
.ev-chrome-btn .ev-notif-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: var(--r-full); background: #E0574F; outline: 2px solid var(--shell); }

.ev-avatar { width: 30px; height: 30px; border-radius: var(--r-full); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: var(--w-medium); overflow: hidden; cursor: pointer; }
.ev-avatar.sm { width: 24px; height: 24px; font-size: 9px; }
.ev-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ev-sidebar { grid-area: sidebar; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--shell); color: var(--shell-text); padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.ev-nav-label { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; font-weight: var(--w-medium); color: var(--shell-text-3); padding: var(--s-5) var(--s-3) var(--s-2); }
.ev-nav-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--shell-text-2); font-size: var(--fs-body); position: relative; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ev-nav-item > span:first-of-type { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-nav-item svg { flex: none; width: 16px; height: 16px; opacity: 0.85; }
.ev-nav-item:hover { background: var(--shell-2); color: var(--shell-text); }
.ev-nav-item.active { background: var(--shell-active); color: #fff; font-weight: var(--w-medium); }
.ev-nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
.ev-nav-item .ev-count { margin-left: auto; font-size: 12px; color: var(--shell-text-3); font-variant-numeric: tabular-nums; }
.ev-sidebar-footer { margin-top: auto; padding-top: var(--s-4); }

/* ---------- Collapsed rail: icons only, name appears as a flyout on hover ---------- */
.ev-nav-toggle { color: var(--shell-text-3); }
[data-nav="rail"] .ev-app { grid-template-columns: var(--sidebar-w-rail) 1fr; }
[data-nav="rail"] .ev-logo { width: auto; }
[data-nav="rail"] .ev-sidebar { overflow: visible; padding-left: 10px; padding-right: 10px; }
[data-nav="rail"] .ev-nav-item { justify-content: center; padding: 0; width: 44px; height: 38px; margin: 0 auto; }
[data-nav="rail"] .ev-nav-item svg { opacity: 0.9; }
[data-nav="rail"] .ev-nav-item .ev-count { display: none; }
[data-nav="rail"] .ev-nav-item.active::before { left: -10px; }
[data-nav="rail"] .ev-nav-item > span:first-of-type {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%);
  background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: var(--w-regular); line-height: 1; padding: 8px 10px; border-radius: var(--r-sm);
  white-space: nowrap; overflow: visible; box-shadow: var(--e-float); opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
[data-nav="rail"] .ev-nav-item > span:first-of-type::before { content: ""; position: absolute; right: 100%; top: 50%; margin-top: -4px; border: 4px solid transparent; border-right-color: var(--ink); }
[data-nav="rail"] .ev-nav-item:hover > span:first-of-type, [data-nav="rail"] .ev-nav-item:focus-visible > span:first-of-type { opacity: 1; transform: translate(0, -50%); }
[data-nav="rail"] .ev-nav-item > span:first-of-type small { display: block; margin-top: 5px; color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ev-nav-item > span:first-of-type small { display: none; }

/* ---------- embedded mode (a tool inside the Booking Centre iframe) ----------
   eva-warm.js sets html[data-embedded] when ?embed=1 is on the URL. The old kit
   carried these rules; the v2 kit did not, so every reskinned tool rendered a
   SECOND full EVA shell inside the frame: duplicated topbar, duplicated sidebar.
   The shell is also hidden here, not just the old markup, because v2 renders its
   chrome from eva-shell.js into the same classes. */
html[data-embedded] .ev-topbar,
html[data-embedded] .ev-sidebar,
html[data-embedded] .ev-breadcrumb,
html[data-embedded] .ev-nav-scrim,
html[data-embedded] .ev-switch-menu { display: none !important; }
html[data-embedded] .ev-app { display: block; }
html[data-embedded] .ev-main { padding: var(--s-4) var(--s-5); animation: none;
  border-radius: 0; min-height: 0; }
/* Sticky strips are offset by a topbar that is not there when embedded. */
html[data-embedded] .tabs,
html[data-embedded] .os-tabs,
html[data-embedded] .ev-worktabs,
html[data-embedded] .ev-tabs { top: 0; }

/* The Booking Centre tool row: sits under the title on every page in the booking
   flow, with the journey rail beneath it. .bc-rail is the Booking Centre's own
   rail (it opens tools in an iframe); it takes the same look so the row reads
   identically page to page. */
.ev-toolrow, .bc-rail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }
.ev-toolrow-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); text-transform: uppercase;
  color: var(--ink-3); font-weight: var(--w-medium); padding-right: var(--s-2); }
.ev-toolrow .ev-btn.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); font-weight: var(--w-medium); }
#journey { margin-bottom: var(--s-4); }

/* Dashboard layout primitives. These lived inside each design reference's own
   <style> block, which is how four pages end up with four slightly different
   versions of the same grid. They belong to the kit. */
.dash { display: flex; flex-direction: column; gap: var(--s-4); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.dash-cols .ev-card { overflow: hidden; }
/* A main column with a fixed companion rail. */
.ev-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-4); align-items: start; }
.ev-two.wide { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1100px) { .dash-cols, .ev-two, .ev-two.wide { grid-template-columns: 1fr; } }

.ev-caption { font-size: 11.5px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--w-medium); color: var(--ink-2); }

/* Collapsible nav sections. The heading IS the control, so no extra affordance
   competes with the tool names beneath it. */
.ev-nav-label.ev-sec { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; font-weight: var(--w-medium); color: var(--shell-text-3); }
.ev-nav-label.ev-sec:hover { color: var(--shell-text); }
.ev-nav-label.ev-sec svg { flex: none; opacity: .55; transition: transform var(--t-fast) var(--ease); }
.ev-nav-label.ev-sec[aria-expanded="false"] svg { transform: rotate(-90deg); }
.ev-nav-sec[hidden] { display: none; }

/* Rail mode collapses the labels to a rule, so a closed section there would hide
   its icons and leave no way to navigate. Force every section open. */
[data-nav="rail"] .ev-nav-sec[hidden] { display: block; }
[data-nav="rail"] .ev-nav-label.ev-sec svg { display: none; }
[data-nav="rail"] .ev-nav-label { font-size: 0; padding: var(--s-3) 0 var(--s-2); }
[data-nav="rail"] .ev-nav-label::before { content: ""; display: block; width: 24px; height: 1px; margin: 0 auto; background: rgba(255,255,255,0.14); }
[data-nav="rail"] .ev-nav-toggle svg { transform: rotate(180deg); }

.ev-breadcrumb { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-bottom: var(--s-2); }
.ev-breadcrumb a { color: var(--ink-3); } .ev-breadcrumb a:hover { color: var(--ink); }
.ev-breadcrumb .current { color: var(--ink); font-weight: var(--w-medium); }

/* Compact page head — one row: title + meta left, actions right */
/* One title block, one position, on every tool. Pages used to override this
   inline — flex-start on some, flex-end on Booking Centre, margin-bottom split
   between two steps — so the title sat at a different height on each page and
   appeared to jump as you moved between them. Those overrides are gone; this is
   the only rule that places it. */
.ev-page-head, .bc-head { display: flex; align-items: center; gap: var(--s-4);
  margin: 0 0 var(--s-5); padding-top: var(--s-2); min-height: 44px; flex-wrap: wrap; }
/* Three title classes are in circulation (.ev-title, .ev-title-lg, .ev-page-title)
   and two of them are defined nowhere, so they fell back to the browser's h1 and
   happened to land on 28px — while Pulse, which uses the defined .ev-title, sat at
   20px. Same heading, two sizes. Pinned to the 28px Emma signed off. */
.ev-page-head .ev-title, .ev-page-head .ev-title-lg, .ev-page-head .ev-page-title,
.bc-head .ev-title, .bc-head .ev-title-lg, .bc-head .ev-page-title {
  font-size: 28px; line-height: 34px; letter-spacing: -0.01em;
  font-weight: var(--w-medium); margin: 0; }
/* Subtitle sits tight under its title rather than being spaced per page. */
.ev-page-head > div > p, .bc-head > div > p,
.ev-page-head .ev-footnote, .bc-head .ev-footnote {
  margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.ev-page-head .ev-actions { flex-wrap: wrap; }
@media (max-width: 1100px) { .ev-page-head .ev-meta { display: none; } .ev-page-head .ev-actions { flex-basis: 100%; } .ev-page-head .ev-spacer { display: none; } }
/* (was a 20px override that made .ev-title differ from .ev-title-lg — one size now, set above) */
.ev-page-head .ev-meta { font-size: var(--fs-small); color: var(--ink-2); padding-left: var(--s-3); margin-left: var(--s-1); border-left: 1px solid var(--surface-3); line-height: 16px; white-space: nowrap; }
.ev-page-head .ev-stack { display: flex; flex-direction: column; gap: var(--s-2); }
.ev-page-head .ev-spacer { flex: 1; }
.ev-page-head .ev-actions { display: flex; gap: var(--s-2); }

/* ============================================================
   CONTROLS
   ============================================================ */
.ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 34px; padding: 0 var(--s-4); border-radius: var(--r-md); border: none; font-size: var(--fs-body); font-weight: var(--w-medium); cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.ev-btn:active { opacity: 0.85; }
.ev-btn:disabled { opacity: 0.4; pointer-events: none; }
.ev-btn svg { width: 15px; height: 15px; flex: none; }
.ev-btn.primary { background: var(--ink); color: #fff; } .ev-btn.primary:hover { background: #000; }
.ev-btn.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--surface-3); } .ev-btn.secondary:hover { background: var(--surface-2); }
.ev-btn.ghost { background: transparent; color: var(--ink-2); } .ev-btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.ev-btn.destructive { background: var(--st-overdue-fill); color: var(--st-overdue); }
.ev-btn.sm { height: 28px; padding: 0 var(--s-3); font-size: var(--fs-small); border-radius: var(--r-sm); }
.ev-btn.icon { width: 34px; padding: 0; } .ev-btn.icon.sm { width: 28px; }
/* on a white surface, secondary/ghost fills step to the cream */


.ev-field { display: flex; flex-direction: column; gap: var(--s-2); }
.ev-field label { font-size: var(--fs-small); color: var(--ink-2); }
.ev-input, .ev-select, .ev-textarea { height: 36px; padding: 0 var(--s-3); border-radius: var(--r-md); border: none; background: var(--surface-2); width: 100%; color: var(--ink); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ev-card .ev-input, .ev-card .ev-select, .ev-card .ev-textarea, .ev-drawer .ev-input, .ev-drawer .ev-select, .ev-drawer .ev-textarea { background: var(--canvas); }
.ev-textarea { height: auto; padding: var(--s-2) var(--s-3); resize: vertical; min-height: 80px; }
.ev-input::placeholder, .ev-textarea::placeholder { color: var(--ink-3); }
.ev-input:hover, .ev-select:hover, .ev-textarea:hover { background: var(--surface-3); }
.ev-input:focus, .ev-select:focus, .ev-textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--ink); background: var(--surface); }
.ev-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer; }
.ev-select.sm, .ev-input.sm { height: 30px; font-size: var(--fs-small); border-radius: var(--r-sm); width: auto; }

/* Filter chip — checkbox rendered as a toggleable chip */
.ev-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-small); cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ev-chip:hover { background: var(--surface-3); color: var(--ink); }
.ev-chip input { appearance: none; width: 15px; height: 15px; margin: 0; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1.5px #D9D9D5; display: grid; place-content: center; flex: none; transition: all var(--t-fast) var(--ease); }
.ev-chip input::after { content: ""; width: 9px; height: 9px; transform: scale(0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--t-fast) var(--ease); }
.ev-chip input:checked { background: var(--ink); box-shadow: none; } .ev-chip input:checked::after { transform: scale(1); }
.ev-chip:has(input:checked) { color: var(--ink); }

.ev-segmented { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; }
.ev-segmented button { border: none; background: transparent; color: var(--ink-2); height: 26px; padding: 0 var(--s-3); border-radius: 7px; font-size: var(--fs-small); cursor: pointer; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.ev-segmented button.active { background: var(--surface); color: var(--ink); font-weight: var(--w-medium); box-shadow: 0 1px 2px rgba(20,20,22,0.06); }
.ev-segmented button svg { width: 15px; height: 15px; display: block; }
.ev-segmented.icons button { padding: 0 9px; }

.ev-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.ev-tabs button { border: none; background: transparent; color: var(--ink-2); height: 32px; padding: 0 var(--s-3); border-radius: var(--r-md); font-size: var(--fs-body); cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ev-tabs button:hover { background: var(--surface-2); color: var(--ink); }
.ev-tabs button.active { background: var(--surface-2); color: var(--ink); font-weight: var(--w-medium); }

/* ============================================================
   INDICATORS
   ============================================================ */
/* Status pill — tracked caps, soft colour fill; the colour is the signal */
.ev-badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--r-full); background: var(--st-closed-fill); color: var(--st-closed); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--w-medium); white-space: nowrap; }
.ev-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.ev-badge.live     { color: var(--st-live); background: var(--st-live-fill); }
.ev-badge.progress { color: var(--st-progress); background: var(--st-progress-fill); }
.ev-badge.info     { color: var(--st-info); background: var(--st-info-fill); }
.ev-badge.overdue  { color: var(--st-overdue); background: var(--st-overdue-fill); }
.ev-badge.closed   { color: var(--st-closed); background: var(--st-closed-fill); }
.ev-badge.plain::before { display: none; }
.ev-badge.quiet { background: transparent; padding: 0; height: auto; }
.ev-flag { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--st-overdue); margin-right: 8px; vertical-align: 1px; }

/* Brand tag — white pill over imagery */
.ev-tag { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: var(--e-card); }
.ev-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--accent); }

/* Progress — hairline track, accent fill */
.ev-progress { height: 4px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.ev-progress i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); }

/* Date range */
.ev-range { font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev-range .arr { color: var(--ink-3); padding: 0 5px; }

/* Inset panel — quiet grey block inside a card (e.g. next actions) */
.ev-inset { background: var(--canvas); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
[data-canvas="white"] .ev-inset { background: #F7F7F5; }
.ev-inset-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.ev-inset-head .ev-eyebrow { color: var(--ink-3); }
.ev-inset-head a { font-size: var(--fs-small); color: var(--ink-3); }
.ev-todo { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: var(--fs-body); }
.ev-todo .ev-check { width: 20px; height: 20px; border-radius: 6px; }
.ev-todo.done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* ============================================================
   CONTAINERS — flat white, no border, no shadow
   ============================================================ */
.ev-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); }
button.ev-card, a.ev-card { border: none; font: inherit; color: inherit; text-align: left; }
.ev-page-head .ev-title { white-space: nowrap; }
.ev-card.pad { padding: var(--s-5); }
.ev-card-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.ev-card-head .ev-spacer { flex: 1; }

/* Dropdown trigger — filters and pickers never use the browser select */
.ev-dd { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: none; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font-size: var(--fs-small); cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.ev-dd:hover { background: var(--surface-3); }
.ev-dd svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.ev-dd.set { background: var(--ink); color: #fff; } .ev-dd.set:hover { background: #000; } .ev-dd.set svg { color: rgba(255,255,255,0.7); }
.ev-dd .lbl { color: var(--ink-3); } .ev-dd.set .lbl { color: rgba(255,255,255,0.6); }
.ev-menu button .ico { width: 14px; height: 14px; flex: none; }
.ev-menu button.on { font-weight: var(--w-medium); }

/* Stat cards — compact row of white cards */
.ev-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.ev-stat-card {
  /* These are authored as divs in the design but are buttons wherever they open
     a tool. A button carries the UA's own 2px outset border, which rendered as a
     black box. Reset it here so the component looks the same either way. */
  appearance: none; border: 0; font: inherit; color: inherit; text-align: left; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); padding: 14px var(--s-4) 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); position: relative; }
.ev-stat-card:hover { transform: translateY(-1px); box-shadow: var(--e-float); }
.ev-stat-card.on { box-shadow: var(--e-card), inset 0 0 0 1.5px var(--accent); }
.ev-stat-card.on::after { content: ""; position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.ev-stat-card .l { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-stat-card .n { font-family: var(--font-num); font-size: 24px; line-height: 28px; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ev-stat-card.attention .n { color: var(--accent); }

/* Stat strip — compact, one bar, no per-metric cards */
.ev-stat-strip { display: flex; background: var(--surface); border-radius: var(--r-lg); overflow-x: auto; box-shadow: var(--e-card); }
.ev-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px var(--s-5); min-width: 150px; border-right: 1px solid var(--hairline); white-space: nowrap; }
.ev-stat:last-child { border-right: none; }
.ev-stat .l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ev-stat .n { font-family: var(--font-num); font-size: 22px; line-height: 26px; font-weight: var(--w-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ev-stat.attention .n { color: var(--accent); }

.ev-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.ev-metric { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.ev-metric .ev-eyebrow { color: var(--ink-2); }
.ev-metric .ev-metric-num { margin-top: var(--s-1); }
.ev-metric .foot { font-size: var(--fs-small); color: var(--ink-2); }
.ev-metric.attention .ev-metric-num { color: var(--accent); }

.ev-toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline); }
.ev-toolbar .ev-spacer { flex: 1; }
.ev-toolbar .ev-result-count { font-size: var(--fs-small); color: var(--ink-2); padding: 0 var(--s-2); }

.ev-table-wrap { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); }
.ev-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ev-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); table-layout: fixed; }
.ev-table th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--w-medium); color: var(--ink); background: var(--surface); padding: 11px var(--s-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 1; }
/* column resize handle */
.ev-table th .rz { position: absolute; top: 6px; bottom: 6px; right: 0; width: 9px; cursor: col-resize; z-index: 2; }
.ev-table th .rz::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--surface-3); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ev-table thead:hover th .rz::after { opacity: 1; }
.ev-table th .rz:hover::after, .ev-table th.resizing .rz::after { background: var(--accent); opacity: 1; width: 2px; }
.ev-table.resizing, .ev-table.resizing * { cursor: col-resize !important; user-select: none; }
.ev-table th.sortable { cursor: pointer; } .ev-table th.sortable:hover { color: var(--ink); }
/* Rows: the main value sits on one baseline in every cell of every row; a secondary line, when present, hangs below it and never moves the main line. */
.ev-table td { position: relative; height: 56px; padding: 0 var(--s-4); vertical-align: middle; border-bottom: 1px solid var(--hairline); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface); }
.ev-table td .sub { position: absolute; left: var(--s-4); right: var(--s-4); top: 37px; display: block; font-size: 12px; color: var(--ink-3); line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-table tbody tr:last-child td { border-bottom: none; }
.ev-table tbody tr { cursor: pointer; }
.ev-table tbody tr:hover td { background: var(--canvas); }
/* pinned columns slide over the rest: checkbox at 0, first data column after it */
.ev-table .sel { position: sticky; left: 0; z-index: 3; }
.ev-table th.sel { z-index: 4; }
.ev-table .pin { position: sticky; left: 40px; z-index: 2; }
.ev-table th.pin { z-index: 3; }
.ev-table .pin::after { content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; background: linear-gradient(to right, rgba(27,28,31,0.06), transparent); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); }
.ev-table-scroll.scrolled .pin::after { opacity: 1; }
.ev-table .primary { font-weight: var(--w-medium); color: var(--ink); }
.ev-table .muted { color: var(--ink-2); }
.ev-table .mono { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13px; }
.ev-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-table .right { text-align: right; }
.ev-table .rowlink { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--ink-3); opacity: 0; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.ev-table .rowlink svg { width: 15px; height: 15px; }
.ev-table tr:hover .rowlink { opacity: 1; }
.ev-table .rowlink:hover { background: var(--surface-3); color: var(--ink); }
.ev-table td.pin .cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-table td.pin .cell .primary { overflow: hidden; text-overflow: ellipsis; }
.ev-table td.pin .cell .rowlink { margin-left: auto; margin-right: -6px; flex: none; }
.ev-table .empty { color: var(--ink-3); text-align: center; padding: var(--s-7) !important; }

/* Sort headers */
.ev-table th.sortable { cursor: pointer; user-select: none; } .ev-table th.sortable:hover { color: var(--ink); }
.ev-table th .th-in { display: inline-flex; align-items: center; gap: 4px; }
.ev-table th .th-in svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ev-table th.sortable:hover .th-in svg { opacity: 0.5; }
.ev-table th.sorted { color: var(--ink); } .ev-table th.sorted .th-in svg { opacity: 1; }
.ev-table td .ev-badge, .ev-table td .ev-prio { max-width: 100%; }
.ev-table td:has(.ev-badge) { text-overflow: clip; }
.ev-table th.right .th-in { flex-direction: row-reverse; padding-right: 10px; }
.ev-table th.dragging { opacity: 0.4; } .ev-table th.drop-target { box-shadow: inset 2px 0 0 var(--accent); }

/* Row selection — boxes stay hidden until the row is hovered or something is selected */
.ev-table .sel { width: 40px; min-width: 40px; padding-right: 0; }
.ev-table td.sel .ev-check, .ev-table th.sel .ev-check { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ev-table tr:hover td.sel .ev-check, .ev-table td.sel .ev-check:checked, .ev-table thead:hover th.sel .ev-check, .ev-table.has-sel .sel .ev-check { opacity: 1; }
.ev-table tr.selected td { background: #F2F6FC; }
.ev-check { appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1.5px #D9D9D5; display: grid; place-content: center; cursor: pointer; vertical-align: middle; transition: all var(--t-fast) var(--ease); }
.ev-check:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ev-check::after { content: ""; width: 9px; height: 9px; transform: scale(0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--t-fast) var(--ease); }
.ev-check:checked { background: var(--ink); box-shadow: none; } .ev-check:checked::after { transform: scale(1); }
.ev-check:indeterminate { background: var(--ink); box-shadow: none; } .ev-check:indeterminate::after { transform: scale(1); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; }
.ev-table tr.archived td { color: var(--ink-3); } .ev-table tr.archived .primary { color: var(--ink-2); }
.ev-table tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); } .ev-table tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
.ev-table tr.dragging td { opacity: 0.4; }
.ev-table .grip { position: absolute; left: 1px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 24px; color: var(--ink-3); cursor: grab; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ev-table .grip svg { width: 14px; height: 14px; }
.ev-table tr:hover .grip { opacity: 1; } .ev-table .grip:active { cursor: grabbing; }
.ev-prio { display: inline-flex; align-items: center; gap: 8px; }
.ev-prio::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--ink-3); }
.ev-prio.high::before { background: var(--st-overdue); } .ev-prio.medium::before { background: var(--accent); } .ev-prio.low::before { background: #C4C5C2; }
.ev-menu button .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-3); margin: 0 3px; flex: none; }
.ev-table .pin-ico { color: var(--ink-3); width: 12px; height: 12px; vertical-align: -1px; margin-right: 6px; }

/* Bulk action bar */
.ev-bulk { display: none; align-items: center; gap: var(--s-2); padding: 8px var(--s-4); background: var(--ink); color: #fff; border-radius: var(--r-md); margin: 0 var(--s-3) var(--s-3); font-size: var(--fs-small); }
.ev-bulk.show { display: flex; }
.ev-bulk .n { font-weight: var(--w-medium); margin-right: var(--s-2); }
.ev-bulk .ev-btn { background: rgba(255,255,255,0.12); color: #fff; height: 28px; font-size: var(--fs-small); } .ev-bulk .ev-btn:hover { background: rgba(255,255,255,0.22); }

/* Popover menu */
.ev-menu { position: fixed; z-index: 90; min-width: 200px; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--e-float), 0 0 0 1px var(--hairline); padding: 6px; display: none; }
.ev-menu.open { display: block; }
.ev-menu button, .ev-menu label { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
.ev-menu button:hover, .ev-menu label:hover { background: var(--surface-2); }
.ev-menu button svg { width: 14px; height: 14px; color: var(--ink-2); }
.ev-menu button.danger { color: var(--st-overdue); } .ev-menu button.danger svg { color: inherit; }
.ev-menu .sep { height: 1px; background: var(--hairline); margin: 6px 4px; }
.ev-menu .head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-medium); padding: 8px 10px 4px; }
.ev-menu .form { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 8px; }
.ev-menu .form .ev-input.sm { height: 30px; width: 100%; }
.ev-menu .form .row { display: flex; gap: 6px; }
.ev-menu .form .row .ev-btn { flex: 1; }
.ev-menu button .tag { margin-left: auto; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ev-menu .drag { color: var(--ink-3); cursor: grab; margin-left: auto; width: 14px; height: 14px; }
.ev-menu label.dragging { opacity: 0.4; } .ev-menu label.drop-target { box-shadow: inset 0 2px 0 var(--accent); }

/* Filter bar */
.ev-filterbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline); }
.ev-filterbar .ev-spacer { flex: 1; }
.ev-filterbar .ev-input.sm { width: 240px; height: 32px; padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C7E85' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; }
.ev-filterbar .active-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 11px; font-weight: var(--w-medium); padding: 0 5px; }
.ev-filterbar .clear { color: var(--ink-2); }
.ev-select.sm.set { background-color: var(--ink); color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.ev-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-small); box-shadow: var(--e-float); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-enter); z-index: 95; display: flex; gap: 12px; align-items: center; }
.ev-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ev-toast button { background: none; border: none; color: #fff; font-weight: var(--w-medium); cursor: pointer; padding: 0; }

/* Section divider label — eyebrow with a hairline running out to the right */
.ev-section-label { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-7) 0 var(--s-4); }
.ev-section-label .ev-eyebrow { color: var(--ink-3); }
.ev-section-label::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Quick-link chips */
.ev-quick { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.ev-quick a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 var(--s-5) 0 var(--s-4); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); font-size: var(--fs-body); font-weight: var(--w-medium); color: var(--ink); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ev-quick a:hover { transform: translateY(-1px); box-shadow: var(--e-float); color: var(--ink); }
.ev-quick a svg { width: 16px; height: 16px; color: var(--ink-2); }

/* Board — one column per status, cards drag between them */
.ev-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); align-items: start; }
.ev-board-col { background: var(--surface-2); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; transition: background var(--t-fast) var(--ease); }
[data-canvas="white"] .ev-board-col { background: #F4F4F2; }
.ev-board-col.drop { background: var(--st-progress-fill); }
.ev-board-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--w-medium); color: var(--ink); }
.ev-board-head::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--ink-3); }
.ev-board-head.live::before { background: var(--st-live); } .ev-board-head.progress::before { background: var(--st-progress); } .ev-board-head.info::before { background: var(--st-info); }
.ev-board-head .n { color: var(--ink-2); font-weight: var(--w-regular); }
.ev-board-head .sum { margin-left: auto; color: var(--ink-2); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
/* Card: title row · labelled facts, one per line · pills · owner + activity */
.ev-kcard { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--e-card); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; position: relative; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ev-kcard:hover { box-shadow: var(--e-float); transform: translateY(-1px); }
.ev-kcard.dragging { opacity: 0.35; }
.ev-kcard .top { display: flex; align-items: flex-start; gap: 8px; padding-right: 30px; }
.ev-kcard .top .ev-flag { flex: none; margin: 7px 0 0; }
.ev-kcard .top .nm { font-weight: var(--w-medium); line-height: 20px; }
.ev-kcard .top .nm .ref { color: var(--ink-3); font-weight: var(--w-regular); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ev-kcard .facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-small); }
.ev-kcard .facts .k { color: var(--ink-3); } .ev-kcard .facts .v { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-kcard .pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ev-kcard .pills .ev-prio { font-size: 12px; color: var(--ink-2); margin-left: 2px; }
.ev-kcard .foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--hairline); }
.ev-kcard .foot .act { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.ev-kcard .ev-avatar.sm { width: 22px; height: 22px; font-size: 9px; background: var(--surface-2); color: var(--ink-2); }
.ev-kcard .more { position: absolute; top: 11px; right: 10px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink-3); opacity: 0; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ev-kcard:hover .more { opacity: 1; } .ev-kcard .more:hover { background: var(--surface-2); color: var(--ink); }
.ev-kcard .more svg { width: 14px; height: 14px; }
.ev-kcard:has(.more:hover) { transform: none; }
.ev-board-empty { padding: 20px 6px; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }

/* Rows and cards ease in when the set changes (filter, view, sort) */
@keyframes ev-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ev-table tbody.enter tr { animation: ev-enter var(--t-slow) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 32ms); }
.ev-board.enter .ev-kcard { animation: ev-enter var(--t-slow) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ev-stat-card { transition: box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.ev-page-head .ev-meta { transition: opacity var(--t) var(--ease); }
@media (prefers-reduced-motion: reduce) { .ev-table tbody.enter tr, .ev-board.enter .ev-kcard { animation: none; } }

/* Embedded mode — ?embed=1 drops the chrome so a tool sits inside another page's viewer */
[data-embed] .ev-topbar, [data-embed] .ev-sidebar { display: none; }
[data-embed] .ev-app { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "main"; }
[data-embed] .ev-main { border-radius: 0; padding-top: var(--s-4); }
[data-embed] .ev-drawer { top: 0; left: 0; border-radius: 0; }

/* Tabs with a step number */
.ev-tabs button .step { font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); margin-right: 8px; font-variant-numeric: tabular-nums; }
.ev-tabs button.active .step { color: var(--accent); }

/* List rows inside a card: name + sub on the left, badge / amount on the right */
.ev-rows { display: flex; flex-direction: column; }
.ev-row { display: flex; align-items: center; gap: var(--s-3); padding: 12px var(--s-5); border-bottom: 1px solid var(--hairline); color: var(--ink); transition: background var(--t-fast) var(--ease); }
.ev-row:last-child { border-bottom: none; }
a.ev-row:hover { background: var(--surface-2); color: var(--ink); }
.ev-row .grow { flex: 1; min-width: 0; }
.ev-row .nm { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row .sub { font-size: var(--fs-small); color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row .amt { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 84px; text-align: right; }
.ev-row .chev { color: var(--ink-3); width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
a.ev-row:hover .chev { opacity: 1; }
.ev-card-head .ev-section { margin-right: auto; }
.ev-card-head .more { font-size: var(--fs-small); color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.ev-card-head .more:hover { color: var(--ink); }
.ev-card-head .more svg { width: 14px; height: 14px; }
.ev-card-empty { padding: var(--s-6) var(--s-5); color: var(--ink-3); font-size: var(--fs-small); text-align: center; }

/* Tool viewer — frame for an embedded tool */
.ev-viewer { display: flex; flex-direction: column; overflow: hidden; min-width: 0; height: calc(100vh - var(--topbar-h) - 150px); min-height: 520px; }
.ev-viewer-head { display: flex; align-items: center; gap: var(--s-2); padding: 8px var(--s-3) 8px var(--s-4); border-bottom: 1px solid var(--hairline); flex: none; }
.ev-viewer-head .tn { font-size: var(--fs-small); font-weight: var(--w-medium); margin-right: auto; }
.ev-viewer iframe { flex: 1; width: 100%; border: none; background: var(--canvas); }
body.tool-fullscreen .ev-sidebar, body.tool-fullscreen .ev-page-head, body.tool-fullscreen .ev-tabs { display: none; }
body.tool-fullscreen .ev-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
body.tool-fullscreen .ev-main { padding: 0; border-radius: 0; }
body.tool-fullscreen .ev-viewer { border-radius: 0; box-shadow: none; height: calc(100vh - var(--topbar-h)); }

/* Journey rail — the booking journey on every Booking Centre page: where am I, what's next, what state is it in */
.ev-journey { display: flex; align-items: stretch; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); overflow-x: auto; }
.ev-journey a { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px var(--s-4) 12px var(--s-5); color: var(--ink); transition: background var(--t-fast) var(--ease); }
.ev-journey a:hover { background: var(--surface-2); color: var(--ink); }
.ev-journey a + a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--hairline); }
.ev-journey .st { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-journey .st i { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); }
.ev-journey .nm, .ev-journey .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-journey .st i.live { background: var(--st-live); } .ev-journey .st i.attn { background: var(--st-overdue); } .ev-journey .st i.progress { background: var(--st-progress); }
.ev-journey .nm { font-weight: var(--w-medium); }
.ev-journey .n { font-size: var(--fs-small); color: var(--ink-2); }
.ev-journey a.current { box-shadow: inset 0 -2px 0 var(--accent); }
.ev-journey a.current .st { color: var(--accent); }
.ev-journey .arrow { display: flex; align-items: center; padding: 0 4px; color: var(--ink-3); flex: none; }
.ev-journey .arrow svg { width: 14px; height: 14px; }

/* Forms — grouped fields inside a card */
.ev-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
.ev-form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ev-form-grid .span2 { grid-column: span 2; }
.ev-field label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-medium); }
.ev-field .ev-input, .ev-field .ev-select, .ev-field .ev-textarea { background: var(--surface); box-shadow: inset 0 0 0 1px var(--surface-3); }
.ev-field .ev-input:hover, .ev-field .ev-select:hover, .ev-field .ev-textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-3); background: var(--surface); }
.ev-field .ev-input:focus, .ev-field .ev-select:focus, .ev-field .ev-textarea:focus { box-shadow: 0 0 0 2px var(--ink); }
.ev-field .ev-hint { font-size: 12px; color: var(--ink-3); }
.ev-money { position: relative; } .ev-money .sym { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: var(--fs-small); pointer-events: none; }
.ev-money .ev-input { padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.ev-input[readonly] { color: var(--ink-2); background: var(--surface-2); }
/* Editable line grid: blue = you type it, ink = calculated */
.ev-lines { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.ev-lines th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-medium); padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.ev-lines td { padding: 4px 6px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.ev-lines .ev-input { height: 32px; background: transparent; color: var(--st-info); border-radius: var(--r-sm); }
.ev-lines .ev-input:hover { background: var(--surface-2); } .ev-lines .ev-input:focus { background: var(--surface); }
.ev-lines td.calc { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); padding-right: 12px; }
.ev-lines th.right { text-align: right; padding-right: 12px; }
.ev-lines tfoot td { border-bottom: none; padding-top: 10px; font-weight: var(--w-medium); }
.ev-lines .rm { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--ink-3); border: none; background: none; cursor: pointer; opacity: 0; }
.ev-lines tr:hover .rm { opacity: 1; } .ev-lines .rm:hover { background: var(--st-overdue-fill); color: var(--st-overdue); }
.ev-lines .rm svg { width: 14px; height: 14px; }
/* Sticky form footer */
.ev-form-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); background: var(--surface); border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ev-form-foot .ev-spacer { flex: 1; }
/* Totals block */
.ev-totals { display: grid; gap: 8px; }
.ev-totals div { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-2); }
.ev-totals div b { color: var(--ink); font-weight: var(--w-regular); font-variant-numeric: tabular-nums; }
.ev-totals .grand { border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 4px; font-size: var(--fs-body); color: var(--ink); }
.ev-totals .grand b { font-family: var(--font-num); font-size: 22px; letter-spacing: -0.01em; font-weight: var(--w-medium); }
/* Schedule rows */
.ev-sched { display: flex; flex-direction: column; }
.ev-sched-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: var(--s-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }
.ev-sched-row:last-child { border-bottom: none; }
.ev-sched-row .no { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-2); }
.ev-sched-row.paid .no { background: var(--st-live-fill); color: var(--st-live); }
.ev-sched-row .amt { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.ev-sched-row .d { color: var(--ink-2); } .ev-sched-row .d.late { color: var(--st-overdue); }

/* Motion rules — every state change eases; nothing cuts */
.pane, .ev-tabs button, .ev-badge, .ev-dd, .ev-chip, .ev-row, .ev-kcard, .ev-stat-card, .ev-nav-item, .ev-btn, .ev-menu button, .ev-table tbody tr, .ev-table tbody td { transition-property: background-color, color, box-shadow, opacity, transform, border-color; transition-duration: var(--t-fast); transition-timing-function: var(--ease); }
@keyframes ev-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pane.show { animation: ev-fade-up var(--t) var(--ease-enter) both; }
.ev-drawer-body > * { animation: ev-fade-up var(--t) var(--ease-enter) both; }
.ev-drawer-body > *:nth-child(2) { animation-delay: 60ms; }
.ev-drawer-body .ev-drawer-col > * { animation: ev-fade-up var(--t) var(--ease-enter) both; }
.ev-drawer-body .ev-drawer-col > *:nth-child(2) { animation-delay: 90ms; } .ev-drawer-body .ev-drawer-col > *:nth-child(3) { animation-delay: 180ms; } .ev-drawer-body .ev-drawer-col > *:nth-child(4) { animation-delay: 270ms; }
.ev-menu.open { animation: ev-fade-up 240ms var(--ease-enter) both; }
.ev-stat-cards, .ev-rows, .ev-journey { animation: ev-fade-up var(--t) var(--ease-enter) both; }
.ev-main > .ev-container > * { animation: ev-fade-up var(--t) var(--ease-enter) both; }
.ev-main > .ev-container > *:nth-child(2) { animation-delay: 70ms; } .ev-main > .ev-container > *:nth-child(3) { animation-delay: 140ms; } .ev-main > .ev-container > *:nth-child(4) { animation-delay: 210ms; } .ev-main > .ev-container > *:nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) { .pane.show, .ev-drawer-body > *, .ev-drawer-body .ev-drawer-col > *, .ev-menu.open, .ev-stat-cards, .ev-rows, .ev-journey, .ev-main > .ev-container > * { animation: none; } }

/* Page-to-page transitions. Cold load: sections settle in one after another. Warm (from another EVA page): the shell,
   page head, journey rail and summary cards stay exactly where they are; only the content below eases out and in. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; }
.ev-topbar { view-transition-name: eva-topbar; } .ev-sidebar { view-transition-name: eva-sidebar; }
::view-transition-old(eva-topbar), ::view-transition-new(eva-topbar), ::view-transition-old(eva-sidebar), ::view-transition-new(eva-sidebar) { animation: none; }
html[data-warm] .ev-main > .ev-container > * { animation: none; }
html[data-warm] .ev-main.ev-arrive > .ev-container > *:not(.ev-page-head):not(.ev-journey):not(.ev-stat-cards):not(.ev-stat-strip):not(.ev-tabs):not(.dash) { animation: ev-page-arrive 760ms var(--ease-enter) both; }
html[data-warm] .ev-main.ev-arrive .dash > *:not(.ev-journey):not(.ev-stat-cards) { animation: ev-page-arrive 760ms var(--ease-enter) both; }
html[data-warm] .ev-main.ev-arrive .dash > *:not(.ev-journey):not(.ev-stat-cards) ~ * { animation-delay: 120ms; }
/* inside a freshly arrived section, rows and cards settle after the section has landed */
html[data-warm] .ev-main.ev-arrive .ev-rows > *, html[data-warm] .ev-main.ev-arrive .ev-table tbody tr { animation: ev-fade-up 520ms var(--ease-enter) both; animation-delay: calc(260ms + var(--i, 0) * 36ms); }
html[data-warm] .ev-main.ev-arrive > .ev-container > *:not(.ev-page-head):not(.ev-journey):not(.ev-stat-cards):not(.ev-stat-strip):not(.ev-tabs) ~ * { animation-delay: 90ms; }
.ev-main.ev-leave > .ev-container > *:not(.ev-page-head):not(.ev-journey):not(.ev-stat-cards):not(.ev-stat-strip):not(.ev-tabs):not(.dash) { animation: ev-page-leave 360ms var(--ease) both; }
.ev-main.ev-leave .dash > *:not(.ev-journey):not(.ev-stat-cards) { animation: ev-page-leave 360ms var(--ease) both; }
@keyframes ev-page-leave { to { opacity: 0; transform: translateY(6px); } }
@keyframes ev-page-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ev-nav-item.active { transition: background var(--t) var(--ease); }
@media (prefers-reduced-motion: reduce) { .ev-main.ev-leave > .ev-container > *, .ev-main.ev-arrive > .ev-container > * { animation: none !important; } }

/* Key/value grid */
.ev-kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.ev-kv .k { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); text-transform: uppercase; font-weight: var(--w-medium); color: var(--ink-2); margin-bottom: 4px; }
.ev-kv .v { font-size: var(--fs-body); }

/* List rows */
.ev-list { display: flex; flex-direction: column; gap: var(--s-2); }
.ev-list-row { display: flex; align-items: center; gap: 14px; background: var(--canvas); border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-body); }
.ev-list-row .thumb { width: 40px; height: 54px; border-radius: 4px; background: var(--surface-3); flex: none; }

/* Timeline */
.ev-timeline { display: flex; flex-direction: column; }
.ev-tl-ev { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }
.ev-tl-ev:last-child { border-bottom: none; }
.ev-tl-ev .when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev-tl-ev .what b { font-weight: var(--w-medium); color: var(--ink); }
.ev-tl-ev .what .d { color: var(--ink-2); margin-top: 2px; }

/* Callout — status-tinted block */
.ev-callout { border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); background: var(--canvas); color: var(--ink); }
.ev-callout.live { background: var(--st-live-fill); color: var(--st-live); }
.ev-callout .ev-eyebrow { color: inherit; opacity: 0.7; }
.ev-callout .amt { font-family: var(--font-num); font-size: var(--fs-metric); line-height: var(--lh-metric); letter-spacing: var(--ls-metric); font-variant-numeric: tabular-nums; margin-top: 6px; font-weight: var(--w-medium); }
.ev-callout .d { font-size: var(--fs-small); opacity: 0.8; margin-top: 6px; }

/* ============================================================
   OVERLAYS
   ============================================================ */
.ev-overlay { position: fixed; inset: 0; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease); z-index: 60; }
.ev-overlay.open { opacity: 1; pointer-events: auto; }
/* Detail panel — takes over the working area (below the top bar, right of the nav); follows the nav when it collapses */
.ev-drawer { position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; bottom: 0; background: var(--canvas); z-index: 61; border-radius: var(--r-lg) 0 0 0; overflow-y: auto; opacity: 0; transform: translateX(32px); pointer-events: none; transition: transform var(--t) var(--ease-enter), opacity var(--t) var(--ease), left var(--t) var(--ease); }
.ev-drawer.open { opacity: 1; transform: none; pointer-events: auto; }
[data-nav="rail"] .ev-drawer { left: var(--sidebar-w-rail); }
.ev-drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--content-pad); background: var(--canvas); border-bottom: 1px solid var(--hairline); min-height: 56px; }
.ev-drawer-head .ev-small, .ev-drawer-head .pager { white-space: nowrap; }
.ev-drawer-head .ev-title { font-size: 18px; line-height: 24px; white-space: nowrap; }
.ev-drawer-head .ev-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-small); margin-left: -8px; }
.ev-drawer-head .ev-back:hover { background: var(--surface-2); color: var(--ink); }
.ev-drawer-head .ev-back svg { width: 15px; height: 15px; }
.ev-drawer-head .sep { width: 1px; height: 20px; background: var(--surface-3); }
.ev-drawer-head .pager { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.ev-drawer-body { padding: var(--s-5) var(--content-pad) var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-4); align-items: start; max-width: var(--content-max); }
/* Pages with no side panel: one stacked column of sections. */
.ev-drawer-body.single { grid-template-columns: minmax(0, 1fr); }
/* One long form (Invoicing): the whole body is a single card. */
.ev-drawer-body.card { display: block; margin: var(--s-5) var(--content-pad) var(--s-8); padding: var(--s-4) var(--s-6) var(--s-6); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-card); }
.ev-drawer-body.card > p.ev-eyebrow:first-child { margin-top: var(--s-2); }
.ev-drawer-body.single > * { min-width: 0; }
.ev-drawer-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ev-drawer-sec { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
.ev-drawer-sec .ev-eyebrow { color: var(--ink-3); }
.ev-drawer-sec .ev-kv { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 1200px) { .ev-drawer-body { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .ev-drawer-head .ev-small, .ev-drawer-head .pager { display: none; } }
@media (max-width: 720px) { .ev-drawer { left: 0; border-radius: 0; } }

@media (max-width: 1100px) { .ev-topbar .ev-breadcrumb { display: none; } }
@media (max-width: 720px) { .hide-sm { display: none; } .ev-search, .ev-topbar .ev-breadcrumb { display: none; } .ev-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .ev-sidebar { display: none; } .ev-main { border-radius: 0; } }

/* ── Mobile navigation ──────────────────────────────────────────────────────
   Below 720px the sidebar leaves the layout, so it opens over the content from
   the hamburger. It stays in the DOM, parked off-screen — animating out of
   display:none does not run reliably, which left the drawer stuck at -264px.
   A transform transition on a permanently-rendered element always works.
   Label handling lives in eva-shell.js: it drops rail mode while the drawer is
   open, rather than overriding the rail styles. */
.ev-nav-scrim { position: fixed; inset: 0; background: rgba(15,16,19,.44); opacity: 0;
  pointer-events: none; transition: opacity var(--t) var(--ease); z-index: 58; }
@media (max-width: 720px) {
  .ev-sidebar {
    display: flex !important;
    position: fixed; top: 52px; bottom: 0; left: 0; width: 264px; z-index: 60;
    overflow-y: auto; box-shadow: 0 18px 48px rgba(0,0,0,.34);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--t) cubic-bezier(.16,1,.3,1), visibility 0s linear var(--t);
  }
  :root[data-nav-open] .ev-sidebar {
    transform: none; visibility: visible;
    transition: transform var(--t) cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  :root[data-nav-open] .ev-nav-scrim { opacity: 1; pointer-events: auto; }
  :root[data-nav-open] #evCollapse { display: none; }   /* meaningless on a phone */
}


/* ══ Kit tweaks, 15 Sep ═════════════════════════════════════════════════════

   1 · Tables and editable grids no longer fall off the page.
   A fixed-layout table with sized columns is wider than the card at laptop
   widths (1076px inside 1024px), so columns were simply cut off with nothing to
   say more existed. The card scrolls now, and a fade on the right edge shows
   there is more to reach. */
.ev-table-wrap, .ev-lines-wrap { overflow-x: auto; position: relative;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ev-table-wrap::after, .ev-lines-wrap::after {
  content: ""; position: sticky; float: right; top: 0; right: 0; width: 28px; height: 100%;
  margin-left: -28px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface));
}
.ev-table-wrap > .ev-table { min-width: 760px; }

/* Line grids live INSIDE a card that may be half the width of the page, so they
   must never be given a minimum — they scroll within their own card instead.
   Forcing a width here was what pushed AMOUNT off the edge. */
.ev-lines { min-width: 0; }
/* Whatever holds a line grid scrolls it — on the kit page that container is
   .demo, in a record panel it is .ev-card, so target the relationship rather
   than the class name. */
*:has(> .ev-lines) { overflow-x: auto; }
.ev-lines td:first-child, .ev-lines th:first-child { max-width: 0; width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-lines td.calc, .ev-lines th.right { white-space: nowrap; }

/* Forms drop to one column before their fields get squeezed, rather than
   overflowing. Three-column blocks step down through two. */
@media (max-width: 1180px) { .ev-form-grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ev-form-grid, .ev-form-grid.c3 { grid-template-columns: minmax(0, 1fr); }
  .ev-form-grid .span2 { grid-column: span 1; } }

/* 2 · Checkboxes. A native checkbox renders blue on macOS, and one had slipped
   through without the class. Styling the element itself means a missed class
   can never produce a blue box again. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; border-radius: 5px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px #D9D9D5;
  display: grid; place-content: center; cursor: pointer; vertical-align: middle;
  transition: all var(--t-fast) var(--ease);
}
input[type="checkbox"]:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
input[type="checkbox"]::after {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
input[type="checkbox"]:checked { background: var(--ink); box-shadow: none; }
input[type="checkbox"]:checked::after { transform: scale(1); }

/* 3 · Destructive actions on the dark bar. #B3261E is correct on white and
   muddy on charcoal, so the bulk bar and any dark surface use the lifted red. */
.ev-bulk .danger, .ev-bulk button.danger, .ev-bulk .ev-btn.danger,
.ev-topbar .danger, [data-dark] .danger { color: var(--st-overdue-dark); }
.ev-bulk .danger:hover, .ev-bulk button.danger:hover { color: #FF8B80; }

/* 4 · No outlines anywhere except a deliberate highlight. Insets are told apart
   by their fill, not by a ring. */
.ev-inset, .ev-card, .ev-table-wrap { border: none; }


/* ── Page width ─────────────────────────────────────────────────────────────
   The container was capped at 1400px, which is invisible on a laptop but leaves
   256px of dead space to the right on a 1920 screen — the page looked cropped
   rather than composed. Data-heavy pages (tables, boards, Pulse) should use the
   room they are given. Prose keeps a readable measure so a headline or a note
   never runs to 1900px. */
/* Set the token rather than fight specificity — .ev-main > .ev-container is a
   tighter selector than .ev-container, so overriding the value is the honest fix. */
:root { --content-max: none; }
.ev-main > .ev-container > p,
.ev-page-head p, .ev-page-head .ev-meta,
.ev-sec-intro, .ev-note { max-width: 78ch; }

/* Stat cards sit above a list on most tools; give the list room to breathe. */
.ev-stat-cards { margin-bottom: var(--s-6); }

/* ── Sweep additions (2026-09-16): small gaps the tool pages kept hand-rolling ── */
.ev-stat-card.static { cursor: default; }
.ev-stat-card.static:hover { transform: none; box-shadow: var(--e-card); }
.ev-segmented button.on { background: var(--surface); color: var(--ink); font-weight: var(--w-medium); box-shadow: 0 1px 2px rgba(20,20,22,0.06); }
.ev-tabs button.on { background: var(--surface-2); color: var(--ink); font-weight: var(--w-medium); }
.ev-callout.info { background: var(--surface-2); color: var(--ink-2); }
.ev-callout.overdue { background: var(--st-overdue-fill); color: var(--st-overdue); }
.ev-check.inline { display: inline-grid; vertical-align: middle; }
@media print {
  #ev-shell, .ev-topbar, .ev-sidebar, .ev-overlay { display: none !important; }
  .ev-app { display: block; }
  .ev-main { padding: 0; }
}