/* KGX1 Editorial control room. Every visual rule below is variant scoped. */
@font-face { font-family: "Anderson Grotesk"; src: url("fonts/engvision/AndersonGroteskBold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/engvision/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/engvision/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/engvision/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/engvision/DMSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

[data-design="engvision"] {
  color-scheme: light;
  /* Brand constants. Rules below never name these directly for a role that
     changes with the colour scheme; they name a role token instead. */
  --ev-paper: #f5f6f6;
  --ev-white: #ffffff;
  --ev-navy: #002b4d;
  --ev-ink: #191c1b;
  --ev-field: #a8bba5;
  --ev-oxide: #8f402b;
  --ev-purple: #51266b;
  --ev-gunmetal: #30383d;
  --ev-rule: #c9c8bf;
  --ev-muted: #555b57;
  --ev-link: #2456cf;
  --ev-ready: #14603e;
  --ev-ready-bg: #e0ede3;
  --ev-review: #87400f;
  --ev-review-bg: #fae7d4;
  --ev-action: #a52e25;
  --ev-action-bg: #fbe5e1;
  --ev-surface-sunk: #ebeeec;
  --ev-track: var(--ev-surface-sunk);
  --ev-track-edge: var(--ev-rule);
  --ev-muted-2: #66706a;
  --ev-accent-soft: #e7ede7;
  --ev-on-navy-soft: #dce8da;
  /* Role tokens (TK). Where one brand colour did two jobs, it now has one
     name per job, so the dark scheme can move each job on its own: White was
     the panel surface and the text on navy; Navy was the rail, the heading
     and value colour, the chart series and the primary fill. */
  --ev-page: var(--ev-paper);
  --ev-surface: var(--ev-white);
  --ev-hover: var(--ev-paper);
  --ev-text: var(--ev-ink);
  --ev-text-2: var(--ev-gunmetal);
  --ev-emphasis: var(--ev-navy);
  --ev-series: var(--ev-navy);
  --ev-border-strong: var(--ev-gunmetal);
  --ev-primary: var(--ev-navy);
  --ev-on-primary: var(--ev-white);
  --ev-primary-hover: var(--ev-ink);
  --ev-on-data: var(--ev-white);
  --ev-placeholder: #757575;
  --ev-rail: var(--ev-navy);
  --ev-on-rail: var(--ev-white);
  --ev-on-rail-2: rgba(255,255,255,.78);
  --ev-on-rail-soft: rgba(255,255,255,.72);
  --ev-on-rail-heading: rgba(255,255,255,.6);
  --ev-on-rail-muted: rgba(255,255,255,.58);
  --ev-rail-rule: rgba(255,255,255,.2);
  --ev-rail-scrollbar: rgba(255,255,255,.25);
  --ev-rail-skeleton: rgba(255,255,255,.18);
  --ev-rail-hover: rgba(255,255,255,.08);
  --ev-rail-active: rgba(255,255,255,.12);
  --ev-scrim: color-mix(in oklch, var(--ev-navy) 40%, transparent);
  --ev-scrim-dialog: color-mix(in srgb, var(--ev-navy) 45%, transparent);
  --ev-font-heading: "Anderson Grotesk", "DM Sans", sans-serif;
  --ev-font-body: "DM Sans", sans-serif;
  --ev-type-body: 14px;
  --ev-type-subhead: 16px;
  --ev-type-panel-title: 21px;
  --ev-type-page-title: 40px;
  --ev-type-page-title-narrow: 28px;
  --ev-type-lead: 28px;
  --ev-type-lead-narrow: 22px;
  --ev-type-metric: 32px;
  --ev-type-meta: 13px;
  --ev-type-small: 12px;
  --ev-type-eyebrow: 11px;
  --ev-type-table: 14px;
  --ev-space-1: 4px;
  --ev-space-2: 8px;
  --ev-space-3: 12px;
  --ev-space-4: 16px;
  --ev-space-5: 24px;
  --ev-space-6: 32px;
  --ev-space-7: 48px;
  --ev-space-8: 64px;
  --ev-space-9: 96px;
  --ev-space-10: 128px;
  --ev-page-gutter: var(--ev-space-6);
  --ev-page-gutter-narrow: var(--ev-space-5);
  --ev-panel-padding: var(--ev-space-5);
  --ev-panel-padding-compact: var(--ev-space-4);
  --ev-grid-gap: var(--ev-space-4);
  --ev-control-height: 44px;
  --ev-input-height: 46px;
  --ev-radius-panel: 8px;
  --ev-radius-control: 6px;
  --ev-radius-badge: 4px;
  --ev-radius-mark: 2px;
  --ev-topbar-height: 72px;
  --ev-topbar-height-narrow: 56px;
  --bg: var(--ev-page);
  --surface: var(--ev-surface);
  --surface-2: var(--ev-surface);
  --surface-3: var(--ev-surface-sunk);
  --ink: var(--ev-text);
  --ink-2: var(--ev-text-2);
  --muted: var(--ev-muted);
  --muted-2: var(--ev-muted-2);
  --border: var(--ev-rule);
  --border-strong: var(--ev-border-strong);
  --accent: var(--ev-primary);
  --accent-2: var(--ev-field);
  --accent-soft: var(--ev-accent-soft);
  /* F50: Dwight's 50% feedback, "blockers need to be purple, outstanding
     red". Data-series colours (an asset's own complete/blocker/outstanding
     state) are named separately from the Ready/Review/Action status pair a
     badge word such as "Action required" reads directly, so correcting one
     never risks the other. Complete keeps the Positive green it already
     shared with Ready; Blocker moves to Deep Purple; Outstanding moves to
     Critical red. The backgrounds are colour-mix tints of the same tokens
     rather than new hex, per the palette rule against inventing colours. */
  --ev-data-complete: var(--ev-ready);
  --ev-data-complete-bg: var(--ev-ready-bg);
  --ev-data-blocker: var(--ev-purple);
  --ev-data-blocker-bg: color-mix(in oklch, var(--ev-purple) 13%, var(--ev-surface));
  --ev-data-outstanding: var(--ev-action);
  --ev-data-outstanding-bg: var(--ev-action-bg);
  --complete: var(--ev-data-complete);
  --complete-bg: var(--ev-data-complete-bg);
  --blocker: var(--ev-data-blocker);
  --blocker-bg: var(--ev-data-blocker-bg);
  --outstanding: var(--ev-data-outstanding);
  --outstanding-bg: var(--ev-data-outstanding-bg);
  /* The default renderer's generic warning token has no EngVision override,
     so without this it silently inherits the default oklch amber (the
     trend chart's "no data" gap shading, staleness pills, .cell-warn,
     .row-warn) instead of the palette's own attention colour. */
  --warn: var(--ev-review);
  --radius: var(--ev-radius-panel);
  --radius-sm: var(--ev-radius-control);
  --radius-lg: var(--ev-radius-panel);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --font-scale: 1;
}

/* EngVision at night (TK). The variant follows the system colour scheme,
   live. The page is a deep navy, panels sit one step lighter in the Navy and
   Gunmetal family, and the rail keeps brand Navy so it stays distinct from
   the page. Paper and White carry the text. Selected and primary controls
   invert to a Paper fill with Navy text. Status and data colours lift to
   tones that read on the dark ground and stay apart from each other and
   from neutral. No shadow, glow or gradient is added. */
@media (prefers-color-scheme: dark) {
  [data-design="engvision"] {
    color-scheme: dark;
    --ev-page: #0b1722;
    --ev-surface: #111f2b;
    --ev-surface-sunk: #1b2b38;
    /* Outstanding is the unfilled track; it must still read on the dark surface. */
    --ev-track: #3a4d5c;
    --ev-track-edge: var(--ev-muted-2);
    --ev-hover: #182835;
    --ev-accent-soft: #1d3446;
    --ev-rule: #2b3c49;
    --ev-border-strong: #75848e;
    --ev-text: var(--ev-paper);
    --ev-text-2: #c9d1d6;
    --ev-emphasis: var(--ev-white);
    --ev-series: #9ec5ea;
    --ev-muted: #a3aeb5;
    --ev-muted-2: #8f9ba3;
    --ev-link: #8fb3ff;
    --ev-primary: var(--ev-paper);
    --ev-on-primary: var(--ev-navy);
    --ev-primary-hover: var(--ev-white);
    --ev-on-data: var(--ev-page);
    --ev-placeholder: var(--ev-muted-2);
    --ev-ready: #7dd3a0;
    --ev-ready-bg: #163826;
    --ev-review: #f3b37a;
    --ev-review-bg: #3f2811;
    --ev-action: #ff9d92;
    --ev-action-bg: #461e1a;
    --ev-data-complete: #4fae7c;
    --ev-data-blocker: #bb98d9;
    --ev-data-blocker-bg: color-mix(in oklch, var(--ev-data-blocker) 20%, var(--ev-surface));
    --ev-data-outstanding: #ec6f63;
    --ev-scrim: color-mix(in oklch, #000000 55%, transparent);
    --ev-scrim-dialog: color-mix(in oklch, #000000 60%, transparent);
  }
}

[data-design="engvision"] body {
  background: var(--ev-page);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}
[data-design="engvision"] button,
[data-design="engvision"] input,
[data-design="engvision"] select { font-family: inherit; }
[data-design="engvision"] h1,
[data-design="engvision"] h2 { font-family: var(--ev-font-heading); }
[data-design="engvision"] :focus-visible {
  outline: 3px solid var(--ev-link);
  outline-offset: 4px;
}

/* Shared shell */
[data-design="engvision"] .ev-shell { grid-template-columns: 230px minmax(0, 1fr); }
/* The rail is one viewport tall, sticky on desktop and a fixed drawer on a
   phone, and its links run taller than a short window (TJ). It scrolls on
   its own so every link and Save view can be reached. */
[data-design="engvision"] .ev-shell__rail {
  background: var(--ev-rail);
  border-right: 0;
  color: var(--ev-on-rail);
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ev-rail-scrollbar) transparent;
}
[data-design="engvision"] .ev-shell__rail :focus-visible { outline-color: var(--ev-on-rail); }
/* styles.css gives these two a 2px offset at higher specificity than the
   ring above, and hides the select's own ring behind the pill's. The
   variant puts its own ring back on the control that has focus. */
[data-design="engvision"] .seg-toggle button:focus-visible,
[data-design="engvision"] .snapshot-pill select:focus-visible {
  outline: 3px solid var(--ev-link);
  outline-offset: 4px;
  border-radius: var(--ev-radius-control);
}
[data-design="engvision"] .snapshot-pill:focus-within { outline: none; }
/* Placeholders keep Chromium's own grey in the light scheme and take a
   lighter one in the dark, where that grey falls below 4.5:1. */
[data-design="engvision"] :where(input, textarea)::placeholder { color: var(--ev-placeholder); opacity: 1; }
/* The default renderer asks for "light dark" on the snapshot select and
   the plan inputs. In the variant they take the page's own scheme instead,
   so a native list, picker or scrollbar matches the page in either scheme. */
[data-design="engvision"] :is(select, input, textarea),
[data-design="engvision"] .snapshot-pill select,
[data-design="engvision"] .plan-settings-input-wrap input,
[data-design="engvision"] .plan-settings-field input[type="date"] {
  color-scheme: inherit;
}
/* The legacy Overview tree's 18px chevrons and 22px row menu keep their
   drawn size; an invisible 44px square around each takes the pointer. */
[data-design="engvision"] button.lvl-expand,
[data-design="engvision"] button.row-expand,
[data-design="engvision"] button.derived-mark,
[data-design="engvision"] .row-menu-btn { position: relative; }
[data-design="engvision"] button.lvl-expand::before,
[data-design="engvision"] button.row-expand::before,
[data-design="engvision"] button.derived-mark::before,
[data-design="engvision"] .row-menu-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ev-control-height);
  height: var(--ev-control-height);
  transform: translate(-50%, -50%);
}
/* Target sizes (T8), measured from computed boxes at 390 and 320. Short
   labels ("Due", "Roof", "B1") left their buttons narrower than 44px; a
   minimum width fixes that, flush right in numeric heads so the label stays
   over its figures. A text link inside a sentence keeps its line height and
   takes a 44px tall invisible strip across its own width instead. */
[data-design="engvision"] .ev-reg-sort,
[data-design="engvision"] .ev-time-sort,
[data-design="engvision"] .ev-sort-th__btn,
[data-design="engvision"] .ev-aud-link,
[data-design="engvision"] .ev-time-level { min-width: var(--ev-control-height); }
[data-design="engvision"] th.num > .ev-reg-sort,
[data-design="engvision"] th.num > .ev-time-sort,
[data-design="engvision"] th.num > .ev-sort-th__btn { justify-content: flex-end; }
[data-design="engvision"] .ev-page .link-btn { position: relative; color: var(--ev-link); }
[data-design="engvision"] .ev-page .link-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--ev-control-height);
  transform: translateY(-50%);
}
/* The topbar snapshot select fills its pill, so the whole 44px pill opens it. */
/* The pill is the select's visible boundary, so it takes the input border
   (TK: the rule colour gave it 1.68:1 against the topbar). */
[data-design="engvision"] .ev-shell__topbar .snapshot-pill { padding-top: 0; padding-bottom: 0; border-color: var(--ev-border-strong); }
[data-design="engvision"] .ev-shell__topbar .snapshot-pill select { align-self: stretch; min-height: var(--ev-control-height); }

/* The legacy Overview tables in the variant (drillButtons): counts are
   buttons and sort heads hold buttons, in the register pattern: Link blue,
   underlined, a 44px target, digits flush right with the plain counts. */
[data-design="engvision"] .ev-drill-count {
  min-width: var(--ev-control-height);
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ev-link);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
[data-design="engvision"] .tbl td.num:has(> .ev-drill-count) { padding-top: 0; padding-bottom: 0; }
[data-design="engvision"] .tbl th.ev-sort-th,
[data-design="engvision"] .ev-panel .tbl th.ev-sort-th { padding-top: 0; padding-bottom: 0; }
[data-design="engvision"] .ev-sort-th__btn {
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-1);
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
[data-design="engvision"] .ev-sort-th__arrow { min-width: var(--ev-space-2); color: var(--ev-emphasis); }
[data-design="engvision"] .ev-brand-lockup {
  min-height: 72px;
  padding: var(--ev-space-4) var(--ev-space-5);
  border-bottom: 1px solid var(--ev-rail-rule);
  display: flex;
  align-items: center;
  gap: var(--ev-space-3);
}
[data-design="engvision"] .ev-brand-lockup .brand-text b {
  color: var(--ev-on-rail);
  font-family: "Anderson Grotesk", "DM Sans", sans-serif;
  font-size: 19px;
  line-height: 1.15;
}
[data-design="engvision"] .ev-brand-lockup .brand-text small {
  color: var(--ev-on-rail-soft);
  font-size: 11px;
  letter-spacing: .04em;
}
/* Rail (ticket TE). Group headings are the working heading face in sentence
   case and take the page eyebrow names. A destination is a rounded fill
   inset 12px from the rail edges, with no left bar; the active one is a
   stronger fill and a stronger label. Sub-lines are secondary text. Every
   control here takes the control radius. */
[data-design="engvision"] .ev-shell__rail .nav {
  padding: var(--ev-space-4) var(--ev-space-3);
  gap: var(--ev-space-1);
}
[data-design="engvision"] .ev-shell__rail .nav-section {
  margin: 0;
  padding: var(--ev-space-4) var(--ev-space-3) var(--ev-space-2);
  color: var(--ev-on-rail-heading);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="engvision"] .ev-shell__rail .nav > .nav-section:first-child { padding-top: var(--ev-space-1); }
[data-design="engvision"] .ev-shell__rail .nav-item {
  min-height: var(--ev-control-height);
  padding: var(--ev-space-2) var(--ev-space-3);
  gap: var(--ev-space-3);
  border: 0;
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-rail-2);
  font-size: var(--ev-type-body);
  font-weight: 500;
}
[data-design="engvision"] .ev-shell__rail .nav-item:hover { background: var(--ev-rail-hover); color: var(--ev-on-rail); }
[data-design="engvision"] .ev-shell__rail .nav-item.is-active {
  background: var(--ev-rail-active);
  color: var(--ev-on-rail);
  font-weight: 600;
}
[data-design="engvision"] .ev-shell__rail .nav-item.is-active svg,
[data-design="engvision"] .ev-shell__rail .nav-item.is-active .nav-meta { color: var(--ev-on-rail); }
[data-design="engvision"] .ev-shell__rail .nav-lead-text b { font-size: var(--ev-type-body); font-weight: 600; }
[data-design="engvision"] .ev-shell__rail .nav-lead-text small {
  color: var(--ev-on-rail-muted);
  font-size: var(--ev-type-small);
  font-weight: 400;
  line-height: 1.35;
  opacity: 1;
}
[data-design="engvision"] .ev-shell__rail .nav-item.is-active .nav-lead-text small { color: var(--ev-on-rail-2); }
[data-design="engvision"] .ev-shell__rail .nav-meta {
  color: var(--ev-on-rail-muted);
  font-size: var(--ev-type-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
[data-design="engvision"] .ev-shell__rail .nav-details { margin: var(--ev-space-2) 0 0; }
[data-design="engvision"] .ev-shell__rail .nav-details-summary {
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-3);
  gap: var(--ev-space-2);
  border-radius: var(--ev-radius-control);
}
[data-design="engvision"] .ev-shell__rail .nav-details-summary:hover { background: var(--ev-rail-hover); color: var(--ev-on-rail); }
/* Saved: a heading, a real outlined button, and rows whose delete control
   is always visible and 44px square. */
[data-design="engvision"] .ev-shell__rail .nav-section-saved {
  align-items: center;
  gap: var(--ev-space-2);
  margin: var(--ev-space-2) 0 0;
  padding-right: 0;
}
[data-design="engvision"] .ev-shell__rail .nav-section-saved__title { margin: 0; color: inherit; font: inherit; }
[data-design="engvision"] .ev-shell__rail .nav-section-action {
  min-width: var(--ev-control-height);
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-4);
  background: transparent;
  border: 1px solid var(--ev-on-rail-muted);
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-rail);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="engvision"] .ev-shell__rail .nav-section-action:hover { background: var(--ev-rail-hover); border-color: var(--ev-on-rail); }
[data-design="engvision"] .ev-shell__rail .nav-saved-empty {
  padding: 0 var(--ev-space-3) var(--ev-space-3);
  color: var(--ev-on-rail-muted);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-small);
  line-height: 1.4;
  letter-spacing: 0;
}
[data-design="engvision"] .ev-shell__rail .nav-saved-item { padding-right: var(--ev-space-7); }
[data-design="engvision"] .ev-shell__rail .nav-saved-delete {
  right: 0;
  width: var(--ev-control-height);
  height: var(--ev-control-height);
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-rail-muted);
  opacity: 1;
}
[data-design="engvision"] .ev-shell__rail .nav-saved-delete:hover { background: var(--ev-rail-hover); color: var(--ev-on-rail); }
[data-design="engvision"] .ev-shell__rail .icon-btn {
  min-width: var(--ev-control-height);
  min-height: var(--ev-control-height);
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-rail);
}

[data-design="engvision"] .ev-shell__topbar {
  min-height: var(--ev-topbar-height);
  padding: var(--ev-space-3) var(--ev-page-gutter);
  gap: var(--ev-space-4);
  background: var(--ev-surface);
  border-bottom: 1px solid var(--ev-rule);
  box-shadow: none;
}
[data-design="engvision"] .ev-shell__topbar .search-box {
  flex: 0 1 320px;
  min-width: 136px;
  max-width: none;
  margin-left: 0;
  min-height: var(--ev-input-height);
  gap: var(--ev-space-3);
  container: ev-search / inline-size;
}
/* The search reads as search at any width it shows: the full hint while it
   fits in the box, "Search" when it would be cut off. The button's name is
   its aria-label either way. */
[data-design="engvision"] .ev-search__full,
[data-design="engvision"] .ev-search__short { white-space: nowrap; }
[data-design="engvision"] .ev-search__short { display: none; }
@container ev-search (max-width: 283px) {
  [data-design="engvision"] .ev-search__full { display: none; }
  [data-design="engvision"] .ev-search__short { display: inline; }
}
[data-design="engvision"] .ev-shell__topbar .search-box,
[data-design="engvision"] .ev-shell__topbar .snapshot-pill,
[data-design="engvision"] .ev-shell__topbar .btn,
[data-design="engvision"] .ev-shell__topbar .icon-btn {
  min-height: var(--ev-control-height);
  border-radius: var(--ev-radius-control);
  box-shadow: none;
}
[data-design="engvision"] .ev-shell__topbar .btn-primary { background: var(--ev-primary); border-color: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-shell__topbar .latest-tag,
[data-design="engvision"] .ev-shell__topbar .staleness-pill { border-radius: var(--ev-radius-badge); }
[data-design="engvision"] .ev-shell__topbar .latest-dot::after { animation: none; }
[data-design="engvision"] .ev-shell__topbar .staleness-pill { font-family: var(--ev-font-body); letter-spacing: 0; text-transform: none; }
/* TI review: the warning is a word ("Update due", "Out of date") in the
   Review tone, with no dot; the page header says how many days ago. */
[data-design="engvision"] .ev-shell__topbar .staleness-pill.aging,
[data-design="engvision"] .ev-shell__topbar .staleness-pill.stale {
  border-color: transparent;
  background: var(--ev-review-bg);
  color: var(--ev-review);
}
[data-design="engvision"] .ev-topbar__context {
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ev-space-1);
}
[data-design="engvision"] .ev-topbar__project {
  min-width: 0;
  overflow: hidden;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
/* Only one of the two names is on screen at a time (display: none on the
   other), so assistive tech reaches the project name exactly once at any
   width, never both the long and the short form together. */
[data-design="engvision"] .ev-topbar__project-full {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-design="engvision"] .ev-topbar__project-short { display: none; }
[data-design="engvision"] .ev-topbar__client {
  overflow: hidden;
  color: var(--ev-muted);
  font-size: var(--ev-type-meta);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-design="engvision"] .ev-topbar__btn { gap: var(--ev-space-2); }

/* Revizto links behind the optional sign-in (ticket TR). The trigger reuses
   the topbar button. From 761px up it keeps its words at every width (TI
   part B): a person icon and "Sign in", or "Account" once signed in, a
   fixed word so the bar keeps one shape (TI review). The rule that turns
   Export and Refresh into icons at 990 names .ev-topbar__btn, so the
   trigger's own rules below, more specific, keep its padding and its words. At 760 and below it is a 44px icon, as
   the phone topbar makes every button. Its full label, with the Revizto
   state, is its accessible name and title. The dialog is a native
   <dialog>: top layer, focus held inside, Escape closes it. A linked Q-
   reference reads as a link and keeps the code face of the cell it sits in;
   its block padding makes a 24px target without moving the line box. */
[data-design="engvision"] .ev-auth-trigger__icon { display: inline-flex; }
@media (min-width: 761px) {
  [data-design="engvision"] .ev-shell__topbar .topbar-actions .ev-auth-trigger.ev-topbar__btn {
    flex-shrink: 0;
    min-width: var(--ev-control-height);
    padding: 0 var(--ev-space-3);
    white-space: nowrap;
  }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions .ev-auth-trigger .ev-topbar__btn-text.ev-auth-trigger__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
}
/* Tickets TF and TI: the desktop topbar is one 72px row from 761 to 1600px,
   and it says each thing once. From 761px up it carries no project or
   snapshot context, because the rail names the project and client and the
   picker names the date. The bar never wraps; the spacer gives way to the
   actions' auto margin, and the search shows at every desktop width, where
   styles.css hides it below 1100px. The search gives up width; the
   snapshot select never does. It draws no native arrow (appearance: none)
   and a chevron icon sits in its right padding, so its content box is the
   date's exact room, and its minimum width fits the widest date,
   "28 May 2026". As the bar narrows, controls collapse in order of least
   loss, at the same widths whatever the day's state, so the bar is the
   same shape every day (TI review):
     1040  the search drops its key hint and keeps the word.
      990  Export and Refresh become 44px icons, each with its label as its
           accessible name and title. The sign-in keeps its words.
      860  the staleness warning goes, as it does on the phone.
      790  the search becomes a 44px icon, named and titled for search.
   The phone layout at 760px and below is untouched. */
@media (min-width: 761px) {
  [data-design="engvision"] .ev-shell__topbar { flex-wrap: nowrap; }
  [data-design="engvision"] .ev-shell__topbar .topbar-spacer,
  [data-design="engvision"] .ev-topbar__context { display: none; }
  [data-design="engvision"] .ev-shell__topbar > .search-box { display: flex; flex: 1 1 0; max-width: 320px; }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions {
    min-width: 0;
    flex-shrink: 1;
    flex-wrap: nowrap;
    margin-left: auto;
  }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill { flex-shrink: 0; }
  [data-design="engvision"] .ev-shell__topbar .ev-snapshot-field {
    position: relative;
    display: flex;
    flex: none;
    align-self: stretch;
    align-items: stretch;
  }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill select {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    /* The widest date, "30 May 2026", is 74.7px at 12px: 6.4em leaves about
       2px spare, and the 12px chevron sits in the padding with 4px clear of
       the text. Any wider and the search loses its word first (TI). */
    min-width: calc(6.4em + var(--ev-space-4));
    padding-right: var(--ev-space-4);
  }
  [data-design="engvision"] .ev-shell__topbar .ev-snapshot-chevron {
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-flex;
    color: var(--ev-muted);
    transform: translateY(-50%);
    pointer-events: none;
  }
}
/* Below 761px the field is not a box of its own, so the phone topbar lays
   the select out exactly as before, native arrow and all. */
[data-design="engvision"] .ev-snapshot-field { display: contents; }
[data-design="engvision"] .ev-snapshot-chevron { display: none; }
@media (min-width: 761px) and (max-width: 1040px) {
  [data-design="engvision"] .ev-shell__topbar > .search-box { min-width: 100px; }
  [data-design="engvision"] .ev-shell__topbar .search-box kbd { display: none; }
}
@media (min-width: 761px) and (max-width: 990px) {
  [data-design="engvision"] .ev-shell__topbar .ev-topbar__btn {
    min-width: var(--ev-control-height);
    justify-content: center;
    padding: 0;
  }
  [data-design="engvision"] .ev-shell__topbar .ev-topbar__btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 761px) and (max-width: 860px) {
  [data-design="engvision"] .ev-shell__topbar .staleness-pill { display: none; }
}
/* From 900 down the search may shrink to a 44px square, and once its box
   is too narrow for "Search" it shows the icon alone, so the search gives
   way before the snapshot date or a control does (TI review). */
@media (min-width: 761px) {
  @container ev-search (max-width: 68px) {
    [data-design="engvision"] .ev-shell__topbar .search-box .search-box-text { display: none; }
    [data-design="engvision"] .ev-shell__topbar .search-box svg { margin-inline: auto; }
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  /* Tighter gaps give the search its word down to 861, where the stale
     pill still shows, so it never turns to an icon and back (TI). */
  [data-design="engvision"] .ev-shell__topbar { gap: var(--ev-space-2); }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill { gap: var(--ev-space-1); }
  [data-design="engvision"] .ev-shell__topbar > .search-box {
    min-width: var(--ev-control-height);
    gap: var(--ev-space-2);
    padding-inline: var(--ev-space-2);
  }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions .ev-auth-trigger.ev-topbar__btn { padding: 0 var(--ev-space-2); }
}
@media (min-width: 761px) and (max-width: 790px) {
  [data-design="engvision"] .ev-shell__topbar > .search-box {
    flex: 0 0 var(--ev-control-height);
    min-width: var(--ev-control-height);
    justify-content: center;
    padding: 0;
  }
  [data-design="engvision"] .ev-shell__topbar .search-box .search-box-text { display: none; }
}
/* TI: "Latest" is said once, by this tag, in a neutral fill with no dot. */
[data-design="engvision"] .ev-shell__topbar .latest-tag {
  background: var(--ev-surface-sunk);
  color: var(--ev-text-2);
  box-shadow: none;
}
[data-design="engvision"] .ev-shell__topbar .latest-dot { display: none; }
[data-design="engvision"] .ev-issue-link {
  padding-block: var(--ev-space-1);
  color: var(--ev-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-design="engvision"] .ev-issue-link code { color: inherit; }
[data-design="engvision"] .ev-auth-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - var(--ev-space-6)));
  max-width: none;
  padding: var(--ev-panel-padding);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
  background: var(--ev-surface);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
}
[data-design="engvision"] .ev-auth-dialog::backdrop { background: var(--ev-scrim-dialog); }
[data-design="engvision"] .ev-auth__title {
  margin: 0 0 var(--ev-space-4);
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-panel-title);
  font-weight: 700;
  line-height: 1.2;
}
[data-design="engvision"] .ev-auth__form { display: grid; gap: var(--ev-space-4); }
[data-design="engvision"] .ev-auth__text { margin: 0; line-height: 1.5; }
[data-design="engvision"] .ev-auth__foot {
  margin: var(--ev-space-5) 0 0;
  padding: var(--ev-space-3) 0 0;
  border-top: 1px solid var(--ev-rule);
  color: var(--ev-muted);
  font-size: var(--ev-type-meta);
  line-height: 1.5;
}
[data-design="engvision"] .ev-auth__field { display: grid; gap: var(--ev-space-1); }
[data-design="engvision"] .ev-auth__label { color: var(--ev-text-2); font-size: var(--ev-type-meta); font-weight: 600; }
[data-design="engvision"] .ev-auth__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ev-input-height);
  padding: 0 var(--ev-space-3);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  background: var(--ev-surface);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: 16px;
}
[data-design="engvision"] .ev-auth__msg {
  margin: 0;
  padding: var(--ev-space-3);
  border-radius: var(--ev-radius-control);
  background: var(--ev-surface-sunk);
  line-height: 1.5;
}
[data-design="engvision"] .ev-auth__msg--review { background: var(--ev-review-bg); color: var(--ev-review); }
[data-design="engvision"] .ev-auth__msg--action { background: var(--ev-action-bg); color: var(--ev-action); }
[data-design="engvision"] .ev-auth__actions { display: flex; flex-wrap: wrap; gap: var(--ev-space-2); }
[data-design="engvision"] .ev-auth__button {
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ev-space-4);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  background: var(--ev-surface);
  color: var(--ev-emphasis);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-weight: 600;
  cursor: pointer;
}
[data-design="engvision"] .ev-auth__button--primary { border-color: var(--ev-primary); background: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-auth__button[aria-disabled="true"],
[data-design="engvision"] .ev-auth__button:disabled { border-color: var(--ev-rule); background: var(--ev-surface); color: var(--ev-muted); cursor: default; }

/* Access page (ticket TA): a full-window dialog opened from the account
   menu. It fills the window at every width, so it has no free corner to
   round; its panels, controls and badges take the radius tokens. State is
   a word with an icon, on a full fill, never an edge. */
[data-design="engvision"] .ev-access {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ev-page);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  overflow-y: auto;
}
[data-design="engvision"] .ev-access::backdrop { background: var(--ev-page); }
[data-design="engvision"] .ev-access__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-4);
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ev-space-4) var(--ev-page-gutter);
  border-bottom: 1px solid var(--ev-rule);
}
[data-design="engvision"] .ev-access__title {
  margin: 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-page-title-narrow);
  font-weight: 700;
  line-height: 1.1;
}
[data-design="engvision"] .ev-access__close { gap: var(--ev-space-2); }
[data-design="engvision"] .ev-access__body {
  display: grid;
  gap: var(--ev-space-4);
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ev-space-5) var(--ev-page-gutter) var(--ev-space-8);
}
[data-design="engvision"] .ev-access__lead { margin: 0; color: var(--ev-muted); line-height: 1.5; }
[data-design="engvision"] .ev-access__panel {
  display: grid;
  gap: var(--ev-space-4);
  min-width: 0;
  padding: var(--ev-panel-padding);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
  background: var(--ev-surface);
}
[data-design="engvision"] .ev-access__stack { display: grid; gap: var(--ev-space-4); min-width: 0; }
[data-design="engvision"] .ev-access__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-3);
}
[data-design="engvision"] .ev-access__heading,
[data-design="engvision"] .ev-access__subheading {
  margin: 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-weight: 700;
  line-height: 1.2;
}
[data-design="engvision"] .ev-access__heading { font-size: var(--ev-type-panel-title); }
[data-design="engvision"] .ev-access__subheading { font-size: var(--ev-type-subhead); }
[data-design="engvision"] .ev-access__heading:focus { outline: none; }
[data-design="engvision"] .ev-access__heading:focus-visible { outline: 3px solid var(--ev-link); outline-offset: 4px; }
[data-design="engvision"] .ev-access__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ev-space-4); }
[data-design="engvision"] .ev-access__textarea { min-height: 88px; padding: var(--ev-space-3); resize: vertical; line-height: 1.5; }
[data-design="engvision"] .ev-access__temp { display: flex; flex-wrap: wrap; gap: var(--ev-space-2); }
[data-design="engvision"] .ev-access__temp-input { flex: 1 1 220px; width: auto; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
[data-design="engvision"] .ev-access__hint { margin: 0; color: var(--ev-muted); font-size: var(--ev-type-meta); line-height: 1.5; }
[data-design="engvision"] .ev-access__msg--ready { background: var(--ev-ready-bg); color: var(--ev-ready); }
[data-design="engvision"] .ev-access__button--danger { border-color: var(--ev-action); background: var(--ev-surface); color: var(--ev-action); }
[data-design="engvision"] .ev-access__confirm .ev-access__button--danger { background: var(--ev-action); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-access__confirm {
  display: grid;
  gap: var(--ev-space-3);
  padding: var(--ev-space-4);
  border: 1px solid var(--ev-action);
  border-radius: var(--ev-radius-control);
  background: var(--ev-action-bg);
}
[data-design="engvision"] .ev-access__confirm .ev-auth__text { color: var(--ev-action); }
[data-design="engvision"] .ev-access__table { width: 100%; border-collapse: collapse; font-size: var(--ev-type-table); }
[data-design="engvision"] .ev-access__table th,
[data-design="engvision"] .ev-access__table td {
  padding: var(--ev-space-2) var(--ev-space-3);
  border-bottom: 1px solid var(--ev-rule);
  text-align: left;
  vertical-align: middle;
}
/* The design system's table header (ui.css .data-table th): 12px, muted,
   weight 500, sentence case, no tracking. */
[data-design="engvision"] .ev-access__table thead th {
  color: var(--ev-muted);
  font-size: var(--ev-type-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="engvision"] .ev-access__table tbody th { font-weight: 600; }
[data-design="engvision"] .ev-access__reason { color: var(--ev-muted); }
[data-design="engvision"] .ev-auth__input:disabled { background: var(--ev-page); color: var(--ev-muted); cursor: default; }
[data-design="engvision"] .ev-access__name,
[data-design="engvision"] .ev-access__email { display: block; overflow-wrap: anywhere; }
[data-design="engvision"] .ev-access__email { color: var(--ev-muted); font-size: var(--ev-type-meta); font-weight: 400; }
[data-design="engvision"] .ev-access__row-action { text-align: right; }
[data-design="engvision"] .ev-access__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[data-design="engvision"] .ev-access__state {
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-1);
  padding: var(--ev-space-1) var(--ev-space-2);
  border-radius: var(--ev-radius-badge);
  font-size: var(--ev-type-meta);
  font-weight: 600;
  white-space: nowrap;
}
[data-design="engvision"] .ev-access__state--ready { background: var(--ev-ready-bg); color: var(--ev-ready); }
[data-design="engvision"] .ev-access__state--review { background: var(--ev-review-bg); color: var(--ev-review); }
[data-design="engvision"] .ev-access__state--admin { background: var(--ev-accent-soft); color: var(--ev-emphasis); }
[data-design="engvision"] .ev-access__state--owner { background: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-access__state--plain { padding: 0; color: var(--ev-muted); font-weight: 400; }
[data-design="engvision"] .ev-access__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ev-space-4);
  margin: 0;
}
[data-design="engvision"] .ev-access__facts dt { margin: 0 0 var(--ev-space-1); color: var(--ev-muted); font-size: var(--ev-type-meta); }
[data-design="engvision"] .ev-access__facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  [data-design="engvision"] .ev-access__bar,
  [data-design="engvision"] .ev-access__body { padding-left: var(--ev-space-4); padding-right: var(--ev-space-4); }
  [data-design="engvision"] .ev-access__panel { padding: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-access__pair,
  [data-design="engvision"] .ev-access__facts { grid-template-columns: minmax(0, 1fr); }
  [data-design="engvision"] .ev-access__table thead { display: none; }
  [data-design="engvision"] .ev-access__table,
  [data-design="engvision"] .ev-access__table tbody,
  [data-design="engvision"] .ev-access__table tr,
  [data-design="engvision"] .ev-access__table th,
  [data-design="engvision"] .ev-access__table td { display: block; }
  [data-design="engvision"] .ev-access__table tr { padding: var(--ev-space-3) 0; border-bottom: 1px solid var(--ev-rule); }
  [data-design="engvision"] .ev-access__table th,
  [data-design="engvision"] .ev-access__table td { padding: var(--ev-space-1) 0; border-bottom: 0; }
  [data-design="engvision"] .ev-access__table td[data-label] { display: flex; gap: var(--ev-space-2); align-items: center; }
  [data-design="engvision"] .ev-access__table td[data-label]::before {
    content: attr(data-label);
    min-width: 96px;
    color: var(--ev-muted);
    font-size: var(--ev-type-meta);
  }
  [data-design="engvision"] .ev-access__row-action { padding-top: var(--ev-space-2); text-align: left; }
  [data-design="engvision"] .ev-access__row-action .ev-auth__button { width: 100%; justify-content: center; }
}

/* One title edge and one control row across routes. */
[data-design="engvision"] .ev-page {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: var(--ev-space-6) var(--ev-page-gutter) var(--ev-space-9);
}
[data-design="engvision"] .ev-page__header {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ev-space-5);
  margin: 0 0 var(--ev-space-5);
}
[data-design="engvision"] .ev-page__intro { min-width: 0; }
[data-design="engvision"] .ev-page__eyebrow {
  margin: 0 0 var(--ev-space-1);
  color: var(--ev-muted);
  font-size: var(--ev-type-eyebrow);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
[data-design="engvision"] .ev-page__title {
  margin: 0;
  color: var(--ev-emphasis);
  font-size: var(--ev-type-page-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
[data-design="engvision"] .ev-page__summary {
  max-width: 78ch;
  margin: var(--ev-space-2) 0 0;
  color: var(--ev-muted);
  font-size: var(--ev-type-body);
  line-height: 1.5;
}
[data-design="engvision"] .ev-page__meta {
  margin: var(--ev-space-1) 0 0;
  color: var(--ev-muted);
  font-size: var(--ev-type-meta);
  line-height: 1.5;
}
[data-design="engvision"] .ev-toolbar {
  margin: 0 0 var(--ev-space-5);
  padding: var(--ev-space-2) 0;
  gap: var(--ev-space-2);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ev-rule);
  border-bottom: 1px solid var(--ev-rule);
  border-radius: 0;
}
[data-design="engvision"] .ev-toolbar .toolbar-label { font-family: "DM Sans", sans-serif; color: var(--ev-muted); }
[data-design="engvision"] .ev-toolbar .phase-chip,
[data-design="engvision"] .ev-toolbar .btn {
  min-height: var(--ev-control-height);
  padding: var(--ev-space-2) var(--ev-space-3);
  border-radius: var(--ev-radius-control);
}
[data-design="engvision"] .ev-toolbar .phase-chip.is-active { background: var(--ev-primary); border-color: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-toolbar .phase-chip.is-active .phase-chip-count { color: color-mix(in oklch, var(--ev-on-primary) 85%, transparent); }
[data-design="engvision"] .ev-toolbar .more-filters-count { font-family: var(--ev-font-body); background: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ev-space-2);
}
[data-design="engvision"] .ev-phase-select {
  display: none;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ev-space-2);
}
[data-design="engvision"] .ev-phase-select__label {
  color: var(--ev-text);
  font-size: var(--ev-type-meta);
  font-weight: 600;
}
[data-design="engvision"] .ev-phase-select__control {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 240px;
  height: var(--ev-input-height);
  padding: 0 var(--ev-space-3);
  background: var(--ev-surface);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  color: var(--ev-text);
  font-size: var(--ev-type-body);
}
[data-design="engvision"] .filter-chip-strip { box-shadow: none; }
[data-design="engvision"] .ev-toolbar:has(+ .ev-filter-chips),
[data-design="engvision"] .ev-toolbar:has(+ .ev-source-age) { margin-bottom: 0; border-bottom: 0; }
[data-design="engvision"] .ev-filter-chips {
  margin: 0 0 var(--ev-space-5);
  padding: var(--ev-space-2) 0;
  gap: var(--ev-space-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ev-rule);
  border-radius: 0;
}
[data-design="engvision"] .ev-filter-chips:has(+ .ev-source-age) { margin-bottom: 0; border-bottom: 0; }
[data-design="engvision"] .ev-filter-chips__note {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-small);
  color: var(--ev-text-2);
}
[data-design="engvision"] .ev-filter-chips .filter-chip,
[data-design="engvision"] .ev-filter-chips .filter-chip-label { font-family: var(--ev-font-body); }
[data-design="engvision"] .ev-filter-chips .filter-chip,
[data-design="engvision"] .ev-filter-chips .filter-chip-clear { min-height: var(--ev-control-height); border-radius: var(--ev-radius-control); }

/* Source age: one ruled Review line; the master list sits in the disclosure. */
[data-design="engvision"] .ev-source-age {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ev-space-4);
  margin: 0 0 var(--ev-space-5);
  padding: var(--ev-space-1) 0;
  border-top: 1px solid var(--ev-rule);
  border-bottom: 1px solid var(--ev-rule);
  color: var(--ev-review);
  font-size: var(--ev-type-body);
  line-height: 1.5;
}
[data-design="engvision"] .ev-source-age__line { flex: 1 1 0; min-width: 0; margin: 0; }
[data-design="engvision"] .ev-source-age__lead { font-weight: 700; }
[data-design="engvision"] .ev-source-age--serious .ev-source-age__line { font-weight: 600; }
[data-design="engvision"] .ev-source-age__details { flex: 0 0 auto; }
[data-design="engvision"] .ev-source-age__details[open] { flex-basis: 100%; }
[data-design="engvision"] .ev-source-age__summary {
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  color: var(--ev-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  list-style: none;
}
[data-design="engvision"] .ev-source-age__summary::-webkit-details-marker { display: none; }
[data-design="engvision"] .ev-source-age__body { padding: 0 0 var(--ev-space-3); color: var(--ev-text); }
[data-design="engvision"] .ev-source-age__list { margin: 0; padding: 0 0 0 var(--ev-space-5); }
[data-design="engvision"] .ev-source-age__note { max-width: 72ch; margin: var(--ev-space-2) 0 0; color: var(--ev-muted); }

[data-design="engvision"] .ev-metric-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--ev-grid-gap);
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
  overflow: hidden;
}
[data-design="engvision"] .ev-metric-band__item {
  min-height: 132px;
  padding: var(--ev-panel-padding);
  border-right: 1px solid var(--ev-rule);
}
[data-design="engvision"] .ev-metric-band__item:last-child { border-right: 0; }
[data-design="engvision"] .ev-metric-band__label {
  display: block;
  margin: 0 0 var(--ev-space-3);
  color: var(--ev-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
[data-design="engvision"] .ev-metric-band__value { display: block; color: var(--ev-emphasis); font-size: var(--ev-type-metric); line-height: 1; font-variant-numeric: tabular-nums; }
[data-design="engvision"] .ev-metric-band__meta { margin: var(--ev-space-2) 0 0; color: var(--ev-muted); font-size: 12px; }

[data-design="engvision"] .ev-panel {
  min-width: 0;
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
  box-shadow: none;
  overflow: hidden;
}
[data-design="engvision"] .ev-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ev-space-4);
  padding: var(--ev-space-4) var(--ev-panel-padding);
  border-bottom: 1px solid var(--ev-rule);
}
[data-design="engvision"] .ev-panel__title { margin: 0; color: var(--ev-emphasis); font-size: var(--ev-type-panel-title); line-height: 1.1; }
[data-design="engvision"] .ev-panel__summary { margin: var(--ev-space-1) 0 0; color: var(--ev-muted); font-size: var(--ev-type-meta); line-height: 1.45; }
[data-design="engvision"] .ev-panel--standard .ev-panel__body { padding: var(--ev-panel-padding); }
[data-design="engvision"] .ev-panel--compact .ev-panel__body { padding: var(--ev-panel-padding-compact); }
[data-design="engvision"] .ev-panel--flush .ev-panel__body { padding: 0; }
[data-design="engvision"] .ev-panel .tbl { border-collapse: collapse; }
[data-design="engvision"] .ev-panel .tbl .num { font-family: "DM Sans", sans-serif; }
[data-design="engvision"] .ev-panel .tbl th,
[data-design="engvision"] .ev-panel .tbl td { padding: var(--ev-space-3) var(--ev-space-4); border-bottom-color: var(--ev-rule); }
[data-design="engvision"] .ev-panel .empty-state { padding: var(--ev-panel-padding); }
[data-design="engvision"] .ev-panel .trend-chart .trend-line { stroke: var(--ev-series); }
[data-design="engvision"] .ev-panel .trend-chart .trend-area { fill: var(--ev-field); }
[data-design="engvision"] .ev-panel .trend-chart .trend-dot { stroke: var(--ev-series); }
[data-design="engvision"] .ev-panel .trend-chart .trend-dot-last { fill: var(--ev-series); }
[data-design="engvision"] .ev-panel .trend-chart .trend-plan { stroke: var(--ev-oxide); }

[data-design="engvision"] .ev-method {
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
}
[data-design="engvision"] .ev-method__summary {
  min-height: var(--ev-control-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-4);
  padding: var(--ev-space-4) var(--ev-panel-padding);
  cursor: pointer;
  list-style: none;
}
[data-design="engvision"] .ev-method__summary::-webkit-details-marker { display: none; }
[data-design="engvision"] .ev-method__title { color: var(--ev-emphasis); font-weight: 700; }
[data-design="engvision"] .ev-method__essential { color: var(--ev-muted); font-size: 12px; text-align: right; }
[data-design="engvision"] .ev-method__body { padding: var(--ev-panel-padding); border-top: 1px solid var(--ev-rule); }
[data-design="engvision"] .ev-method__body .plain-list { margin: 0; padding-left: var(--ev-space-5); }

/* The base app still owns non-Progress route anatomy. */
[data-design="engvision"] .card,
[data-design="engvision"] .toolbar,
[data-design="engvision"] .kpi-tile { box-shadow: none; }
[data-design="engvision"] .boot-skeleton { grid-template-columns: 230px minmax(0, 1fr); background: var(--ev-page); }
[data-design="engvision"] .boot-sidebar { padding: var(--ev-space-4) var(--ev-space-3); background: var(--ev-rail); border-right: 0; gap: var(--ev-space-4); }
[data-design="engvision"] .boot-topbar { min-height: 72px; padding: var(--ev-space-3) var(--ev-page-gutter); background: var(--ev-surface); border-bottom-color: var(--ev-rule); gap: var(--ev-space-3); }
[data-design="engvision"] .boot-page { padding: var(--ev-space-6) var(--ev-page-gutter); gap: var(--ev-space-4); }
[data-design="engvision"] .boot-kpi-grid { gap: var(--ev-grid-gap); margin: var(--ev-space-1) 0 var(--ev-space-2); }
[data-design="engvision"] .boot-sidebar .sk { background: var(--ev-rail-skeleton); }
[data-design="engvision"] .sk { border-radius: var(--ev-radius-control); }
/* Drawers. The closed drill and filter panels sit at translateX(100%), and
   their default shadows bled into the right edge of every narrow page. The
   variant rules them with a line instead, and hides a closed drawer once it
   has slid out, so its controls leave the tab order. Visibility flips at the
   end of the close transition and at the start of the open one. */
[data-design="engvision"] .drill-panel,
[data-design="engvision"] .fp-panel {
  box-shadow: none;
  border-left: 1px solid var(--ev-rule);
}
[data-design="engvision"] .drill-panel:not(.is-open),
[data-design="engvision"] .fp-panel:not(.is-open) {
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
[data-design="engvision"] .drill-panel.is-open,
[data-design="engvision"] .fp-panel.is-open { visibility: visible; transition: transform .25s ease; }
/* Targets inside the drawers and the command palette: the drill search, the
   filter chips, the drill's asset links and the palette search all reach 44px.
   The drill search draws the variant ring on its container, as the default
   does with its own. */
[data-design="engvision"] .drill-search { padding-top: 0; padding-bottom: 0; }
[data-design="engvision"] .drill-search input,
[data-design="engvision"] .palette-head input { min-height: var(--ev-control-height); }
[data-design="engvision"] .drill-search:focus-within { outline: 3px solid var(--ev-link); outline-offset: 4px; border-color: var(--ev-border-strong); }
/* The head keeps 8px above and below the input so its 7px focus ring (3px
   outline, 4px offset) clears the palette's clipped edge. */
[data-design="engvision"] .palette-head { padding-top: var(--ev-space-2); padding-bottom: var(--ev-space-2); }
[data-design="engvision"] .drill-panel .asset-link {
  min-width: var(--ev-control-height);
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
}
/* Filters drawer (ticket TE), in the report grammar: a white panel with its
   open edge rounded and its window edge flush, working headings in sentence
   case, options as 44px toggle controls, and a navy Done. The drill panel
   takes the same drawer corners. A selected option shows a tick as well as
   the navy fill; a status option carries its data colour as a small mark. */
[data-design="engvision"] .fp-mask,
[data-design="engvision"] .drill-mask { background: var(--ev-scrim); }
[data-design="engvision"] .fp-panel {
  overflow: hidden;
  background: var(--ev-surface);
  border-radius: var(--ev-radius-panel) 0 0 var(--ev-radius-panel);
}
[data-design="engvision"] .drill-panel { border-radius: var(--ev-radius-panel) 0 0 var(--ev-radius-panel); }
/* At 760px and below both drawers fill the window, so no corner is free. */
@media (max-width: 760px) {
  [data-design="engvision"] .fp-panel,
  [data-design="engvision"] .drill-panel { border-radius: 0; }
}
[data-design="engvision"] .fp-head {
  align-items: flex-start;
  gap: var(--ev-space-4);
  padding: var(--ev-space-5) var(--ev-space-5) var(--ev-space-4);
  border-bottom: 1px solid var(--ev-rule);
}
[data-design="engvision"] .fp-title {
  margin: 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-panel-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="engvision"] .fp-meta {
  margin: var(--ev-space-1) 0 0;
  color: var(--ev-muted);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-meta);
  line-height: 1.5;
}
[data-design="engvision"] .fp-head-actions { gap: var(--ev-space-2); }
[data-design="engvision"] .fp-head-actions .btn {
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-4);
  background: var(--ev-surface);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  color: var(--ev-emphasis);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-weight: 600;
  white-space: nowrap;
}
[data-design="engvision"] .fp-head-actions .btn:hover:not(:disabled) { background: var(--ev-hover); }
[data-design="engvision"] .fp-head-actions .btn:disabled {
  border-color: var(--ev-rule);
  color: var(--ev-muted);
  opacity: 1;
  cursor: not-allowed;
}
[data-design="engvision"] .fp-head-actions .icon-btn {
  min-width: var(--ev-control-height);
  min-height: var(--ev-control-height);
  border-radius: var(--ev-radius-control);
  color: var(--ev-emphasis);
}
[data-design="engvision"] .fp-body { padding: var(--ev-space-5) var(--ev-space-5) var(--ev-space-2); }
[data-design="engvision"] .fp-section { margin: 0 0 var(--ev-space-5); }
[data-design="engvision"] .fp-section-head {
  align-items: baseline;
  gap: var(--ev-space-3);
  margin: 0 0 var(--ev-space-3);
}
[data-design="engvision"] .fp-section-title {
  margin: 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-subhead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="engvision"] .fp-section-meta {
  color: var(--ev-muted);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-meta);
}
[data-design="engvision"] .fp-section-body { gap: var(--ev-space-2); }
[data-design="engvision"] .fp-chip {
  min-height: var(--ev-control-height);
  gap: var(--ev-space-2);
  padding: 0 var(--ev-space-4);
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-control);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-weight: 500;
  letter-spacing: 0;
}
[data-design="engvision"] .fp-chip:hover { background: var(--ev-hover); border-color: var(--ev-border-strong); }
[data-design="engvision"] .fp-chip.is-on,
[data-design="engvision"] .fp-chip.tone-c.is-on,
[data-design="engvision"] .fp-chip.tone-b.is-on,
[data-design="engvision"] .fp-chip.tone-o.is-on {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: var(--ev-on-primary);
  font-weight: 600;
}
[data-design="engvision"] .ev-fp-mark {
  width: var(--ev-space-3);
  height: var(--ev-space-3);
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--ev-radius-mark);
}
[data-design="engvision"] .ev-fp-mark--c { background: var(--complete); }
[data-design="engvision"] .ev-fp-mark--b { background: var(--blocker); }
[data-design="engvision"] .ev-fp-mark--o { background: var(--outstanding); }
/* On the navy fill the tick carries the state; the purple mark would sit at
   1.27:1 against navy, so it steps aside. */
[data-design="engvision"] .fp-chip.is-on .ev-fp-mark { display: none; }
[data-design="engvision"] .fp-foot {
  gap: var(--ev-space-4);
  padding: var(--ev-space-3) var(--ev-space-5);
  background: var(--ev-surface);
  border-top: 1px solid var(--ev-rule);
  color: var(--ev-muted);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-meta);
  line-height: 1.5;
}
[data-design="engvision"] .fp-foot .btn-primary {
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-5);
  background: var(--ev-primary);
  border: 1px solid var(--ev-primary);
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-primary);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-body);
  font-weight: 600;
  letter-spacing: 0;
}
[data-design="engvision"] .fp-foot .btn-primary:hover { background: var(--ev-primary-hover); border-color: var(--ev-primary-hover); filter: none; }
/* One radius rule for the controls and badges styles.css rounds to 5, 7 or
   999px, and for their focus: the default focus rules reshape a focused control to 4
   or 7px, so the variant keeps the control's own corner under the ring. */
[data-design="engvision"] .row-menu-btn { border-radius: var(--ev-radius-control); }
[data-design="engvision"] .status-pill { border-radius: var(--ev-radius-badge); }
[data-design="engvision"] .btn:focus-visible,
[data-design="engvision"] .icon-btn:focus-visible,
[data-design="engvision"] .phase-chip:focus-visible,
[data-design="engvision"] .nav-item:focus-visible,
[data-design="engvision"] .nav-details-summary:focus-visible,
[data-design="engvision"] .nav-section-action:focus-visible,
[data-design="engvision"] .nav-saved-delete:focus-visible,
[data-design="engvision"] .fp-chip:focus-visible,
[data-design="engvision"] .row-menu-btn:focus-visible { border-radius: var(--ev-radius-control); }
[data-design="engvision"] .kpi-tile.is-clickable:focus-visible { border-radius: var(--ev-radius-panel); }
/* One radius rule beyond the drawer (TE review): the default's pills, 7px,
   10px and 14px corners on the chip strip, the drill search, the command
   palette and its keys, the row menu, the progress bars and the derived-level
   mark take the tokens. Status dots of 12px or less stay round. The palette
   and the row menu are ruled, not shadowed. */
[data-design="engvision"] .ev-filter-chips .filter-chip > span,
[data-design="engvision"] .more-filters-count,
[data-design="engvision"] .palette kbd,
[data-design="engvision"] .search-box kbd,
[data-design="engvision"] .derived-mark { border-radius: var(--ev-radius-badge); }
[data-design="engvision"] .drill-search,
[data-design="engvision"] .palette-row { border-radius: var(--ev-radius-control); }

/* Ticket TG: no accent edges. A state, selection, callout, card, row or tile
   is never marked with a coloured bar down one side ("Forbidden treatments"
   in the EngVision visual system). The variant overrides each one it would
   inherit from styles.css:
   - the palette's active row keeps its tinted fill and drops the inset bar;
     hover moves the active row, so one row is filled at a time;
   - nested level bars on a phone drop the left rail; the bar's smaller
     height and the smaller label already mark the depth;
   - Movement tiles and verdict banners take a hairline all round. The
     variant's Movement and audience pages do not render them today; their
     words carry the meaning if they return. */
[data-design="engvision"] .palette-row.is-active { box-shadow: none; }
[data-design="engvision"] .lvl-row.d-1 .lvl-bar,
[data-design="engvision"] .lvl-row.d-2 .lvl-bar { border-left: 0; }
[data-design="engvision"] .movement-tile,
[data-design="engvision"] .verdict { border-left: 1px solid var(--ev-rule); }

/* Ticket TH: no monospace. The design system keeps a monospace face for
   specialist code only, so asset codes, issue references, key hints and the
   snapshot picker's native option list all read in DM Sans. Figures that
   line up in columns keep tabular numerals. */
[data-design="engvision"] code,
[data-design="engvision"] kbd,
[data-design="engvision"] samp,
[data-design="engvision"] .mono,
[data-design="engvision"] .tbl .num,
[data-design="engvision"] .snapshot-pill select option,
[data-design="engvision"] .palette-row.kind-asset .palette-label,
[data-design="engvision"] .palette-row.kind-qr .palette-label {
  font-family: var(--ev-font-body);
  font-variant-numeric: tabular-nums;
}
/* An asset code or issue reference is body text in its cell, not the 11.5px
   code size styles.css gives the mono face. */
[data-design="engvision"] code { font-size: inherit; }
/* Result-type labels read as secondary text, not mono uppercase, and take no
   status colour: green, purple and red mean status everywhere else. */
[data-design="engvision"] .palette-kind,
[data-design="engvision"] .palette-row.kind-asset .palette-kind,
[data-design="engvision"] .palette-row.kind-qr .palette-kind,
[data-design="engvision"] .palette-row.kind-level .palette-kind,
[data-design="engvision"] .palette-row.kind-category .palette-kind,
[data-design="engvision"] .palette-row.kind-view .palette-kind {
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ev-text-2);
}
[data-design="engvision"] .palette,
[data-design="engvision"] .row-menu-pop {
  border-radius: var(--ev-radius-panel);
  box-shadow: none;
}
[data-design="engvision"] .prog,
[data-design="engvision"] .lvl-bar { border-radius: var(--ev-radius-mark); }
/* The chip strip's Clear all reads in sentence case, and the Filters and
   Phase labels share the report's eyebrow size and tracking. */
[data-design="engvision"] .ev-filter-chips .filter-chip-clear { text-transform: none; letter-spacing: 0; }
[data-design="engvision"] .ev-toolbar .toolbar-label,
[data-design="engvision"] .ev-filter-chips .filter-chip-label { font-size: var(--ev-type-eyebrow); letter-spacing: .08em; }
/* Drill table headers match the report tables at every width. */
[data-design="engvision"] .drill-body table.tbl th {
  font-size: var(--ev-type-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
}
/* Drill width (ticket TD). The handle in drill-and-nav.jsx writes the chosen
   width into --ev-drill-width on the panel. The cap keeps a strip of the page
   in view if the property is missing. Phones keep the full-width drill from
   styles.css, so the width rule and the handle both stop at 760px. */
@media (min-width: 761px) {
  [data-design="engvision"] .drill-panel {
    width: var(--ev-drill-width, min(640px, 92vw));
    max-width: calc(100vw - var(--ev-space-7));
  }
}
[data-design="engvision"] .ev-drill-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ev-space-3) * -1);
  z-index: 1;
  width: var(--ev-space-5);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
/* The grip: a 48px tab on the panel edge with two raised lines. */
[data-design="engvision"] .ev-drill-resize::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ev-space-3);
  height: var(--ev-space-7);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-badge);
  background:
    linear-gradient(to right, var(--ev-border-strong) 0 1px, transparent 1px 3px, var(--ev-border-strong) 3px 4px, transparent 4px) center / 4px var(--ev-space-5) no-repeat,
    var(--ev-surface);
}
[data-design="engvision"] .ev-drill-resize:hover::before,
[data-design="engvision"] .ev-drill-resize:active::before { border-color: var(--ev-emphasis); background-color: var(--ev-accent-soft); }
[data-design="engvision"] .ev-drill-resize:focus-visible { outline: none; }
/* The drill Close button meets the 44px target at every width, not only on phones. */
[data-design="engvision"] .drill-panel .icon-btn { min-width: var(--ev-control-height); min-height: var(--ev-control-height); }
[data-design="engvision"] .ev-drill-resize:focus-visible::before {
  border-color: var(--ev-emphasis);
  outline: 3px solid var(--ev-link);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  [data-design="engvision"] .ev-drill-resize { display: none; }
}
/* Codes read as one token: they never break, and the drill body scrolls
   sideways when the table is wider than the panel (EvDrillScrollCue). */
[data-design="engvision"] .drill-tbl code,
[data-design="engvision"] .drill-tbl .asset-link { white-space: nowrap; }
/* Headers, levels ("Level B1") and phases ("Phase 1") are short and read as
   one token, so they hold one line at the default 640px width (TJ). The
   category and the QR record take the wrapping. */
[data-design="engvision"] .drill-body table.tbl th,
[data-design="engvision"] .drill-tbl .ev-drill-short { white-space: nowrap; }
[data-design="engvision"] .drill-panel .ev-drill-cue {
  padding: var(--ev-space-2) var(--ev-space-5);
  border-bottom: 1px solid var(--ev-rule);
}
/* Boot failure (app.jsx evRenderBootError): a white panel that names what
   failed, the reported message as plain detail, and a reload button. Its
   "Not loaded" Action badge carries the state, not an edge bar (TG). */
[data-design="engvision"] .ev-boot-error {
  max-width: 640px;
  margin: var(--ev-space-10) auto;
  padding: var(--ev-panel-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ev-space-3);
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
  color: var(--ev-text);
}
[data-design="engvision"] .ev-boot-error__badge { margin: 0; }
[data-design="engvision"] .ev-boot-error__title { margin: 0; font-size: var(--ev-type-lead); line-height: 1.2; }
[data-design="engvision"] .ev-boot-error__what { margin: 0; max-width: 60ch; }
[data-design="engvision"] .ev-boot-error__detail {
  margin: 0;
  max-width: 60ch;
  color: var(--ev-muted);
  font-size: var(--ev-type-small);
  overflow-wrap: anywhere;
}
[data-design="engvision"] .ev-boot-error__action {
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-5);
  background: var(--ev-primary);
  border: 0;
  border-radius: var(--ev-radius-control);
  color: var(--ev-on-primary);
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 760px) {
  [data-design="engvision"] .ev-boot-error { margin: var(--ev-space-5) var(--ev-space-4); }
  [data-design="engvision"] .ev-boot-error__title { font-size: var(--ev-type-lead-narrow); }
}

@media (max-width: 1100px) {
  [data-design="engvision"] .ev-metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-design="engvision"] .ev-metric-band__item:nth-child(2) { border-right: 0; }
  [data-design="engvision"] .ev-metric-band__item:nth-child(-n + 2) { border-bottom: 1px solid var(--ev-rule); }
}
@media (max-width: 760px) {
  [data-design="engvision"] .ev-shell { grid-template-columns: minmax(0, 1fr); }
  [data-design="engvision"] .ev-shell__rail { width: min(300px, 88vw); }
  [data-design="engvision"] .ev-shell__rail:not(.is-open) {
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  [data-design="engvision"] .ev-shell__rail.is-open { visibility: visible; transition: transform .25s ease; }
  [data-design="engvision"] .ev-shell__topbar { padding: var(--ev-space-2) var(--ev-space-3); gap: var(--ev-space-2); }
  [data-design="engvision"] .ev-shell__topbar .search-box { margin-left: 0; }
  [data-design="engvision"] .ev-page { padding: var(--ev-space-5) var(--ev-page-gutter-narrow) var(--ev-space-8); }
  [data-design="engvision"] .boot-skeleton { grid-template-columns: minmax(0, 1fr); }
  [data-design="engvision"] .boot-topbar { padding: var(--ev-space-2) var(--ev-space-3); }
  [data-design="engvision"] .boot-page { padding: var(--ev-space-5); }
}
@media (max-width: 520px) {
  /* Two figures a row, not four stacked cells, so the band stays one glance.
     The last row drops its rule; an odd last figure spans the row. The
     :where() keeps that rule weak so route bands that stack (the time plan
     and estimate) still rule every row. */
  [data-design="engvision"] .ev-metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-design="engvision"] .ev-metric-band__item,
  [data-design="engvision"] .ev-metric-band__item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--ev-rule); }
  [data-design="engvision"] .ev-metric-band__item:nth-child(odd) { border-right: 1px solid var(--ev-rule); }
  [data-design="engvision"] .ev-metric-band__item:last-child,
  [data-design="engvision"] .ev-metric-band__item:where(:nth-last-child(2):nth-child(odd)) { border-bottom: 0; }
  [data-design="engvision"] .ev-metric-band__item:nth-child(odd):last-child { grid-column: 1 / -1; border-right: 0; }
  [data-design="engvision"] .ev-metric-band__label { margin: 0 0 var(--ev-space-2); }
  [data-design="engvision"] .ev-metric-band__value { font-size: var(--ev-type-lead-narrow); }
  [data-design="engvision"] .ev-method__summary { align-items: flex-start; flex-direction: column; }
  [data-design="engvision"] .ev-method__essential { text-align: left; }
}
/* Report grammar
   Shared components from engvision-report.jsx: status badge, lead, metric
   band, panel, table wrapper, method and empty state. Route stylesheets
   compose these; they do not restyle them. */
[data-design="engvision"] .ev-status-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--ev-space-1) var(--ev-space-2);
  border-radius: var(--ev-radius-badge);
  font-size: var(--ev-type-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
[data-design="engvision"] .ev-status-badge--ready { background: var(--ev-ready-bg); color: var(--ev-ready); }
[data-design="engvision"] .ev-status-badge--review { background: var(--ev-review-bg); color: var(--ev-review); }
[data-design="engvision"] .ev-status-badge--action { background: var(--ev-action-bg); color: var(--ev-action); }
[data-design="engvision"] .ev-status-badge--neutral { background: var(--ev-surface-sunk); color: var(--ev-text-2); }
[data-design="engvision"] .ev-status-badge--blocked { background: var(--ev-data-blocker-bg); color: var(--ev-data-blocker); }
[data-design="engvision"] .ev-status-badge--outstanding { background: var(--ev-data-outstanding-bg); color: var(--ev-data-outstanding); }

[data-design="engvision"] .ev-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ev-space-6);
  margin: 0 0 var(--ev-grid-gap);
  padding: var(--ev-panel-padding);
  background: var(--ev-surface);
  border: 1px solid var(--ev-rule);
  border-radius: var(--ev-radius-panel);
}
[data-design="engvision"] .ev-lead--with-aside { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
[data-design="engvision"] .ev-lead__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
[data-design="engvision"] .ev-lead__headline {
  max-width: 32ch;
  margin: var(--ev-space-3) 0 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-heading);
  font-size: var(--ev-type-lead);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}
[data-design="engvision"] .ev-lead__basis,
[data-design="engvision"] .ev-lead__caveat {
  max-width: 72ch;
  margin: var(--ev-space-2) 0 0;
  font-size: var(--ev-type-body);
  line-height: 1.5;
}
[data-design="engvision"] .ev-lead__basis { color: var(--ev-text); }
[data-design="engvision"] .ev-lead__caveat { color: var(--ev-review); }
[data-design="engvision"] .ev-lead__caveat strong { font-weight: 700; }
[data-design="engvision"] .ev-lead__action {
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-1);
  margin: var(--ev-space-2) 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ev-link);
  font-size: var(--ev-type-body);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
[data-design="engvision"] .ev-lead__aside {
  min-width: 0;
  padding: 0 0 0 var(--ev-space-5);
  border-left: 1px solid var(--ev-rule);
}

[data-design="engvision"] .ev-metric-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-design="engvision"] .ev-metric-band__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ev-space-1);
  margin: 0;
}
[data-design="engvision"] .ev-metric-band__unit { color: var(--ev-muted); font-size: var(--ev-type-small); font-weight: 500; }
[data-design="engvision"] .ev-metric-band__item .ev-status-badge { margin: var(--ev-space-2) 0 0; }

[data-design="engvision"] .ev-panel { margin: 0 0 var(--ev-grid-gap); }
[data-design="engvision"] .ev-panel__heading { min-width: 0; flex: 1 1 16rem; }
[data-design="engvision"] .ev-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ev-space-2);
  margin-left: auto;
}

[data-design="engvision"] .ev-table-wrap__group { min-width: 0; }
[data-design="engvision"] .ev-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  /* A scrolling region clips what it draws outside itself. Cell padding
     clears the focus ring's 7px at the sides; this clears it above a
     header sort button and below a last-row link, whose cells have no
     vertical padding. */
  padding: var(--ev-space-2) 0;
}
[data-design="engvision"] .ev-table-wrap:focus-visible { outline-offset: -3px; }
[data-design="engvision"] .ev-table-wrap__cue {
  margin: 0;
  padding: var(--ev-space-2) 0;
  color: var(--ev-muted);
  font-size: var(--ev-type-small);
}
[data-design="engvision"] .ev-panel--flush .ev-table-wrap__cue { padding: var(--ev-space-2) var(--ev-panel-padding); }
[data-design="engvision"] .ev-table-wrap table,
[data-design="engvision"] .ev-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ev-type-table);
}
[data-design="engvision"] .ev-table-wrap th,
[data-design="engvision"] .ev-panel th {
  padding: var(--ev-space-3) var(--ev-space-4);
  background: var(--ev-surface);
  border-bottom: 1px solid var(--ev-rule);
  color: var(--ev-muted);
  font-family: var(--ev-font-body);
  font-size: var(--ev-type-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-design="engvision"] .ev-table-wrap td,
[data-design="engvision"] .ev-panel td {
  padding: var(--ev-space-3) var(--ev-space-4);
  border-bottom: 1px solid var(--ev-rule);
  color: var(--ev-text);
  font-size: var(--ev-type-table);
  vertical-align: middle;
}
[data-design="engvision"] .ev-panel--flush th:first-child,
[data-design="engvision"] .ev-panel--flush td:first-child { padding-left: var(--ev-panel-padding); }
[data-design="engvision"] .ev-panel--flush th:last-child,
[data-design="engvision"] .ev-panel--flush td:last-child { padding-right: var(--ev-panel-padding); }
[data-design="engvision"] .ev-table-wrap tbody tr:last-child td,
[data-design="engvision"] .ev-table-wrap tbody tr:last-child th,
[data-design="engvision"] .ev-panel tbody tr:last-child td,
[data-design="engvision"] .ev-panel tbody tr:last-child th { border-bottom: 0; }
[data-design="engvision"] .ev-table-wrap .num,
[data-design="engvision"] .ev-panel .num {
  font-family: var(--ev-font-body);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-design="engvision"] .ev-empty { padding: 0; }
[data-design="engvision"] .ev-panel--flush .ev-empty { padding: var(--ev-panel-padding); }
[data-design="engvision"] .ev-empty__title {
  margin: 0;
  color: var(--ev-emphasis);
  font-family: var(--ev-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
[data-design="engvision"] .ev-empty__body {
  max-width: 72ch;
  margin: var(--ev-space-1) 0 0;
  color: var(--ev-muted);
  font-size: var(--ev-type-body);
  line-height: 1.5;
}
[data-design="engvision"] .ev-empty__action {
  min-height: var(--ev-control-height);
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-1);
  margin: var(--ev-space-4) 0 0;
  padding: 0 var(--ev-space-4);
  background: var(--ev-surface);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  color: var(--ev-emphasis);
  font-size: var(--ev-type-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 1100px) {
  [data-design="engvision"] .ev-metric-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item:nth-child(2) { border-right: 1px solid var(--ev-rule); }
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item:nth-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 900px) {
  [data-design="engvision"] .ev-lead--with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--ev-space-4); }
  [data-design="engvision"] .ev-lead__aside { padding: var(--ev-space-4) 0 0; border-left: 0; border-top: 1px solid var(--ev-rule); }
}
@media (max-width: 760px) {
  /* Compact shell: one 56px topbar row, the phase select, no legend. */
  [data-design="engvision"] .ev-shell__topbar {
    min-height: var(--ev-topbar-height-narrow);
    flex-wrap: nowrap;
    padding: var(--ev-space-1) var(--ev-space-3);
    gap: var(--ev-space-2);
  }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: var(--ev-space-2);
    margin-left: auto;
  }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions > * {
    height: var(--ev-control-height);
    min-height: var(--ev-control-height);
  }
  [data-design="engvision"] .ev-shell__topbar .staleness-pill,
  [data-design="engvision"] .ev-topbar__client { display: none; }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill { min-width: 0; flex: 0 1 auto; }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  [data-design="engvision"] .ev-shell__topbar .ev-topbar__btn {
    min-width: var(--ev-control-height);
    justify-content: center;
    padding: 0;
  }
  [data-design="engvision"] .ev-topbar__btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  [data-design="engvision"] .ev-page { padding: var(--ev-space-4) var(--ev-page-gutter-narrow) var(--ev-space-8); }
  [data-design="engvision"] .ev-page__header { margin: 0 0 var(--ev-space-4); }
  [data-design="engvision"] .ev-toolbar,
  [data-design="engvision"] .ev-filter-chips,
  [data-design="engvision"] .ev-source-age { margin: 0 0 var(--ev-space-4); }
  [data-design="engvision"] .ev-toolbar { flex-wrap: nowrap; gap: var(--ev-space-3); }
  [data-design="engvision"] .ev-toolbar__chips,
  [data-design="engvision"] .ev-toolbar__chips-label { display: none; }
  [data-design="engvision"] .ev-phase-select { display: flex; }
  [data-design="engvision"] .ev-toolbar .more-filters-btn { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 520px) {
  /* The project name stays, truncating first; the snapshot select shrinks
     next and keeps its full value in its title and accessible name. */
  [data-design="engvision"] .ev-shell__topbar .latest-tag { display: none; }
  [data-design="engvision"] .ev-shell__topbar { gap: var(--ev-space-1); }
  [data-design="engvision"] .ev-topbar__context { flex: 1 1 auto; min-width: var(--ev-space-7); }
  [data-design="engvision"] .ev-topbar__project { font-size: 14px; }
  [data-design="engvision"] .ev-shell__topbar .topbar-actions { gap: var(--ev-space-1); }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill { flex: 0 1 auto; padding: 0 var(--ev-space-2); }
  [data-design="engvision"] .ev-shell__topbar .snapshot-pill select { font-size: var(--ev-type-small); }
  [data-design="engvision"] .ev-page { padding: var(--ev-space-4) var(--ev-space-4) var(--ev-space-8); }
  [data-design="engvision"] .ev-page__title { font-size: var(--ev-type-page-title-narrow); }
  [data-design="engvision"] .ev-lead { padding: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-lead__headline { font-size: var(--ev-type-lead-narrow); }
  [data-design="engvision"] .ev-metric-band--3 { grid-template-columns: minmax(0, 1fr); }
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item,
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item:nth-child(2),
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item:nth-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--ev-rule); }
  [data-design="engvision"] .ev-metric-band--3 .ev-metric-band__item:last-child { border-bottom: 0; }
  [data-design="engvision"] .ev-metric-band__item { min-height: 0; padding: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-panel__header { padding: var(--ev-space-4); }
  [data-design="engvision"] .ev-panel--standard .ev-panel__body { padding: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-panel--flush .ev-table-wrap__cue,
  [data-design="engvision"] .ev-panel--flush .ev-empty,
  [data-design="engvision"] .ev-method__summary,
  [data-design="engvision"] .ev-method__body { padding: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-panel--flush .ev-table-wrap__cue { padding-top: var(--ev-space-2); padding-bottom: var(--ev-space-2); }
  [data-design="engvision"] .ev-panel--flush th:first-child,
  [data-design="engvision"] .ev-panel--flush td:first-child { padding-left: var(--ev-panel-padding-compact); }
  [data-design="engvision"] .ev-panel--flush th:last-child,
  [data-design="engvision"] .ev-panel--flush td:last-child { padding-right: var(--ev-panel-padding-compact); }
}
@media (max-width: 400px) {
  /* Below the point where "KGX1 Fit Out" would truncate to "KGX1 Fi…", swap
     to the short name shown in full instead of an ellipsis. The two names
     are never both on screen (see .ev-topbar__project-full/-short above), so
     this is a swap, not a duplicate, for assistive tech too. */
  [data-design="engvision"] .ev-topbar__project-full { display: none; }
  [data-design="engvision"] .ev-topbar__project-short { display: block; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="engvision"] .ev-shell *,
  [data-design="engvision"] .ev-shell *::before,
  [data-design="engvision"] .ev-shell *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* The drawers move without a slide, and a closed one hides at once. */
  [data-design="engvision"] .drill-panel,
  [data-design="engvision"] .fp-panel,
  [data-design="engvision"] .drill-mask,
  [data-design="engvision"] .fp-mask,
  [data-design="engvision"] .ev-shell__rail { transition: none !important; }
}

/* Legacy level bars (charts.jsx, Overview). A segment keeps 8px of padding
   at width 0%, so a zero count drew a sliver that read as blockers present.
   React writes the width first in the style attribute. */
/* Counts printed on a data bar take the text colour for that fill: white on
   the light scheme's deep fills, the page colour on the lifted dark ones. */
[data-design="engvision"] .lvl-seg,
[data-design="engvision"] .qr-due-flag { color: var(--ev-on-data); }
[data-design="engvision"] .lvl-seg[style^="width: 0%"] { padding: 0; min-width: 0; overflow: hidden; }

/* Charts (ticket TC): the interactive completion trend, weekly pace and
   remaining-work bars in engvision-charts.jsx. Series colours are the data
   tokens (complete, blocker, outstanding) and navy for completion; rules and
   text use the palette neutrals. The SVGs draw at their rendered pixel width,
   so stroke widths and text sizes below are real pixels. */
[data-design="engvision"] .ev-chart { position: relative; min-width: 0; container-type: inline-size; }
[data-design="engvision"] .ev-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-3) var(--ev-space-5);
  margin: 0 0 var(--ev-space-4);
}
[data-design="engvision"] .ev-chart__summary {
  flex: 1 1 20rem;
  max-width: 72ch;
  margin: 0;
  color: var(--ev-text-2);
  font-size: var(--ev-type-meta);
  line-height: 1.5;
}
[data-design="engvision"] .ev-chart__range { display: inline-flex; flex: 0 0 auto; }
[data-design="engvision"] .ev-chart__range button {
  min-height: var(--ev-control-height);
  padding: 0 var(--ev-space-4);
  border: 1px solid var(--ev-border-strong);
  background: var(--ev-surface);
  color: var(--ev-emphasis);
  font-size: var(--ev-type-meta);
  font-weight: 600;
  cursor: pointer;
}
[data-design="engvision"] .ev-chart__range button:first-child { border-radius: var(--ev-radius-control) 0 0 var(--ev-radius-control); }
[data-design="engvision"] .ev-chart__range button:last-child { border-left: 0; border-radius: 0 var(--ev-radius-control) var(--ev-radius-control) 0; }
[data-design="engvision"] .ev-chart__range button[aria-pressed="true"] { background: var(--ev-primary); border-color: var(--ev-primary); color: var(--ev-on-primary); }
[data-design="engvision"] .ev-chart__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ev-space-4);
}
@container (min-width: 720px) {
  [data-design="engvision"] .ev-chart__body { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  [data-design="engvision"] .ev-chart__body > .ev-chart__readout { padding: 0 0 0 var(--ev-space-5); border-top: 0; border-left: 1px solid var(--ev-rule); }
}
[data-design="engvision"] .ev-chart__plot,
[data-design="engvision"] .ev-pace__plot {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ev-radius-control);
  touch-action: pan-y;
}
[data-design="engvision"] .ev-chart__svg,
[data-design="engvision"] .ev-pace__svg { display: block; max-width: 100%; height: auto; cursor: crosshair; }
[data-design="engvision"] .ev-chart__grid { stroke: var(--ev-rule); stroke-width: 1; stroke-dasharray: 2 4; }
[data-design="engvision"] .ev-chart__baseline { stroke: var(--ev-border-strong); stroke-width: 1; }
[data-design="engvision"] .ev-chart__axis { fill: var(--ev-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
[data-design="engvision"] .ev-chart__area { fill: color-mix(in oklch, var(--ev-series) 9%, transparent); }
[data-design="engvision"] .ev-chart__line { fill: none; stroke: var(--ev-series); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
[data-design="engvision"] .ev-chart__bridge { fill: none; stroke: var(--ev-series); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
[data-design="engvision"] .ev-chart__dot { fill: var(--ev-series); stroke: var(--ev-surface); stroke-width: 1.5; }
[data-design="engvision"] .ev-chart__label { fill: var(--ev-series); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--ev-surface); stroke-width: 4; stroke-linejoin: round; }
[data-design="engvision"] .ev-chart__hatch { stroke: var(--ev-rule); stroke-width: 2; }
[data-design="engvision"] .ev-chart__gap-band { fill: color-mix(in oklch, var(--ev-surface-sunk) 70%, transparent); }
[data-design="engvision"] .ev-chart__gap.is-active .ev-chart__gap-band { fill: color-mix(in oklch, var(--ev-muted) 22%, transparent); }
[data-design="engvision"] .ev-chart__gap-label { fill: var(--ev-text-2); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--ev-surface); stroke-width: 4; stroke-linejoin: round; }
[data-design="engvision"] .ev-chart__plan { fill: none; stroke: var(--ev-border-strong); stroke-width: 2; stroke-dasharray: 6 4; }
[data-design="engvision"] .ev-chart__plan-label { fill: var(--ev-text-2); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--ev-surface); stroke-width: 4; stroke-linejoin: round; }
[data-design="engvision"] .ev-chart__target line { stroke: var(--ev-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
[data-design="engvision"] .ev-chart__target-label { fill: var(--ev-text); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--ev-surface); stroke-width: 4; stroke-linejoin: round; }
[data-design="engvision"] .ev-chart__rule { stroke: var(--ev-muted); stroke-width: 1; }
[data-design="engvision"] .ev-chart__halo { fill: var(--ev-surface); stroke: var(--ev-series); stroke-width: 2.5; }
[data-design="engvision"] .ev-chart__ring { fill: none; stroke: var(--ev-link); stroke-width: 3; opacity: 0; }
[data-design="engvision"] .ev-chart__plot:focus-visible .ev-chart__ring,
[data-design="engvision"] .ev-pace__plot:focus-visible .ev-chart__ring { opacity: 1; }

[data-design="engvision"] .ev-chart__readout-body.is-idle { visibility: hidden; }
[data-design="engvision"] .ev-chart__readout:has(> .ev-chart__readout-body.is-idle) { border-color: transparent; }
[data-design="engvision"] .ev-chart__readout {
  min-width: 0;
  min-height: 9rem;
  padding: var(--ev-space-4) 0 0;
  border-top: 1px solid var(--ev-rule);
}
[data-design="engvision"] .ev-chart__readout p { margin: 0; }
[data-design="engvision"] .ev-chart__readout-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ev-space-1) var(--ev-space-2);
  color: var(--ev-text);
  font-size: var(--ev-type-body);
  font-weight: 700;
}
[data-design="engvision"] .ev-chart__readout-flag {
  color: var(--ev-muted);
  font-size: var(--ev-type-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-design="engvision"] .ev-chart__readout-figure {
  display: flex;
  align-items: baseline;
  gap: var(--ev-space-1);
  margin: var(--ev-space-2) 0 var(--ev-space-2);
}
[data-design="engvision"] .ev-chart__readout-value { color: var(--ev-series); font-size: var(--ev-type-metric); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
[data-design="engvision"] .ev-chart__readout-unit { color: var(--ev-muted); font-size: var(--ev-type-small); font-weight: 500; }
[data-design="engvision"] .ev-chart__readout-line { margin: var(--ev-space-1) 0 0; color: var(--ev-text-2); font-size: var(--ev-type-meta); line-height: 1.45; }
[data-design="engvision"] .ev-chart__readout[data-kind="gap"] .ev-chart__readout-line:first-of-type { margin-top: var(--ev-space-2); }
[data-design="engvision"] .ev-chart__readout-line--plan { color: var(--ev-text); font-weight: 600; }
[data-design="engvision"] .ev-chart__readout-line--gap { color: var(--ev-review); }
[data-design="engvision"] .ev-chart__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Weekly pace in the Progress lead aside. */
[data-design="engvision"] .ev-pace { position: relative; min-width: 0; margin: var(--ev-space-2) 0 0; }
[data-design="engvision"] .ev-pace__bar { fill: var(--complete); }
[data-design="engvision"] .ev-pace__bar.is-active { fill: var(--ev-series); }
[data-design="engvision"] .ev-pace__nodata-band { fill: color-mix(in oklch, var(--ev-surface-sunk) 70%, transparent); }
[data-design="engvision"] .ev-pace__nodata-band--week { fill: color-mix(in oklch, var(--ev-muted) 22%, transparent); }
[data-design="engvision"] .ev-pace__nodata-label { fill: var(--ev-muted); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--ev-surface); stroke-width: 3; stroke-linejoin: round; }
[data-design="engvision"] .ev-pace__measured { stroke: var(--ev-series); stroke-width: 2; stroke-dasharray: 5 4; }
[data-design="engvision"] .ev-pace__required { stroke: var(--ev-text); stroke-width: 1.5; stroke-dasharray: 2 3; }
[data-design="engvision"] .ev-pace__line-label { fill: var(--ev-series); font-size: 12px; font-weight: 700; }
[data-design="engvision"] .ev-pace__line-label--required { fill: var(--ev-text); }
[data-design="engvision"] .ev-pace__readout,
[data-design="engvision"] .ev-pace__empty {
  min-height: 2.8em;
  margin: var(--ev-space-2) 0 0;
  color: var(--ev-text-2);
  font-size: var(--ev-type-small);
  line-height: 1.4;
}

/* Where work remains: one button per level. */
[data-design="engvision"] .ev-levels__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ev-space-2) var(--ev-space-4);
  margin: 0 0 var(--ev-space-3);
  color: var(--ev-text-2);
  font-size: var(--ev-type-small);
}
[data-design="engvision"] .ev-levels__key-item { display: inline-flex; align-items: center; gap: var(--ev-space-2); }
[data-design="engvision"] .ev-levels__key-item::before { content: ""; width: 12px; height: 12px; border-radius: var(--ev-radius-mark); background: var(--ev-muted); }
[data-design="engvision"] .ev-levels__key-item--c::before { background: var(--complete); }
[data-design="engvision"] .ev-levels__key-item--b::before { background: var(--blocker); }
[data-design="engvision"] .ev-levels__key-item--o::before { background: var(--outstanding); }
[data-design="engvision"] .ev-levels__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ev-rule); }
[data-design="engvision"] .ev-levels__list li { border-bottom: 1px solid var(--ev-rule); }
[data-design="engvision"] .ev-levels__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto var(--ev-space-5);
  grid-template-areas: "name bar end go" "name counts end go";
  align-items: center;
  gap: var(--ev-space-1) var(--ev-space-4);
  width: 100%;
  min-height: var(--ev-control-height);
  margin: 0;
  padding: var(--ev-space-3) var(--ev-space-2);
  border: 0;
  background: none;
  color: var(--ev-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
[data-design="engvision"] .ev-levels__row:hover { background: var(--ev-surface-sunk); }
[data-design="engvision"] .ev-levels__row:hover .ev-levels__name { color: var(--ev-link); text-decoration: underline; }
[data-design="engvision"] .ev-levels__name { grid-area: name; color: var(--ev-emphasis); font-weight: 700; }
[data-design="engvision"] .ev-levels__bar { grid-area: bar; display: block; }
[data-design="engvision"] .ev-levels__track { fill: var(--ev-page); }
[data-design="engvision"] .ev-levels__seg--c { fill: var(--complete); }
[data-design="engvision"] .ev-levels__seg--b { fill: var(--blocker); }
[data-design="engvision"] .ev-levels__seg--o { fill: var(--outstanding); }
[data-design="engvision"] .ev-levels__counts { grid-area: counts; color: var(--ev-muted); font-size: var(--ev-type-small); }
[data-design="engvision"] .ev-levels__end {
  grid-area: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-design="engvision"] .ev-levels__end strong { color: var(--ev-text); font-size: var(--ev-type-body); }
[data-design="engvision"] .ev-levels__pct { color: var(--ev-muted); font-size: var(--ev-type-small); }
[data-design="engvision"] .ev-levels__go { grid-area: go; color: var(--ev-link); font-weight: 700; text-align: right; }
[data-design="engvision"] .ev-levels__toggle {
  min-height: var(--ev-control-height);
  margin: var(--ev-space-3) 0 0;
  padding: 0 var(--ev-space-4);
  border: 1px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-control);
  background: var(--ev-surface);
  color: var(--ev-emphasis);
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 640px) {
  [data-design="engvision"] .ev-levels__row {
    grid-template-columns: minmax(0, 1fr) auto var(--ev-space-4);
    grid-template-areas: "name end go" "bar bar bar" "counts counts counts";
    gap: var(--ev-space-2) var(--ev-space-3);
    padding: var(--ev-space-3) 0;
  }
  [data-design="engvision"] .ev-levels__end { flex-direction: row; gap: var(--ev-space-2); align-items: baseline; }
  [data-design="engvision"] .ev-chart__range { width: 100%; }
  [data-design="engvision"] .ev-chart__range button { flex: 1 1 0; }
}
@media (max-width: 400px) {
  [data-design="engvision"] .ev-levels__name { white-space: nowrap; }
  [data-design="engvision"] .ev-levels__end { flex-direction: column; gap: 0; align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="engvision"] .ev-chart *,
  [data-design="engvision"] .ev-pace *,
  [data-design="engvision"] .ev-levels * { transition: none; animation: none; }
}