/* cycle™ — Component layer
   Built on public/css/tokens/*.css. Every measurement here was read out of the
   prototypes in design/ (CRM.dc.html, AI Chat.dc.html, Expo Navigator.dc.html,
   User Management.dc.html), not invented.

   Rules this file obeys:
   · Monochrome only. Every colour is a token or a pure-black/white alpha.
   · Nothing loads from a CDN. The one image is an inline SVG data: URI (grain).
   · No build step. Plain CSS, custom properties, no nesting.

   Load order:  tokens/fonts, colors, typography, spacing, effects, motion → this.

   ────────────────────────────────────────────────────────────────────────────
   Naming: every class is `cy-`. State goes on the element as `.is-*`
   (`.is-active`, `.is-locked`, `.is-selected`) so views can toggle one class.
   ──────────────────────────────────────────────────────────────────────────── */

/* ══ 0 · Component tokens ════════════════════════════════════════════════════
   The only additions to the token set. All of them are geometry, or pure black
   at an alpha — no hue is introduced. Scrims are black in both themes on
   purpose: a dialog dims the page, it does not invert it. */
:root {
  --cy-header-h:      71px;   /* 14px + 42px control + 14px + 1px hairline */
  --cy-rail-w:        236px;
  --cy-rail-w-closed: 64px;
  --cy-subrail-w:     244px;
  --cy-subrail-w-closed: 64px;

  --cy-scrim:      rgba(0, 0, 0, 0.55);
  --cy-scrim-deep: rgba(0, 0, 0, 0.60);
  --cy-scrim-blur: blur(3px);

  /* The login panel is black in both themes — a poster, not a surface — so its
     three text/rule steps are white at an alpha rather than semantic tokens.
     Same reasoning as the scrims: it does not invert. */
  --cy-onblack-text: rgba(255, 255, 255, 0.68);
  --cy-onblack-mute: rgba(255, 255, 255, 0.55);
  --cy-onblack-line: rgba(255, 255, 255, 0.18);

  --cy-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ 1 · Reset and page base ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

.cy-app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

input::placeholder,
textarea::placeholder { color: var(--text-faint); }

::selection { background: var(--text-strong); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ══ 2 · Motion ═════════════════════════════════════════════════════════════ */
@keyframes cyRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cyFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cyBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes cySpin  { to { transform: rotate(360deg); } }
/* The prototype's gantt bars and the month ribbon's spine draw themselves in
   from the left. `transform-origin: left center` is set on the element. */
@keyframes cyGrow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

[data-stg] > * { animation: cyRise 460ms var(--e-out) both; }
[data-stg] > *:nth-child(1) { animation-delay: 20ms; }
[data-stg] > *:nth-child(2) { animation-delay: 50ms; }
[data-stg] > *:nth-child(3) { animation-delay: 80ms; }
[data-stg] > *:nth-child(4) { animation-delay: 110ms; }
[data-stg] > *:nth-child(5) { animation-delay: 140ms; }
[data-stg] > *:nth-child(6) { animation-delay: 170ms; }
[data-stg] > *:nth-child(n+7) { animation-delay: 200ms; }

/* The grain overlay. Fixed, above everything, never intercepts a pointer. */
.cy-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: var(--cy-grain);
}

/* ══ 3 · Header ═════════════════════════════════════════════════════════════ */
.cy-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 14px clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.cy-header__left,
.cy-header__right { display: flex; align-items: center; }
.cy-header__left  { gap: var(--s-4); min-width: 0; }
.cy-header__right { gap: var(--s-3); }

/* The wordmark swaps with the theme: ship both files, let CSS pick.
   Doing it in CSS rather than JS means it is right on first paint. */
.cy-wordmark { height: 15px; display: block; }
.cy-wordmark--dark { display: none; }
[data-theme="dark"] .cy-wordmark--light,
.cy-dark .cy-wordmark--light { display: none; }
[data-theme="dark"] .cy-wordmark--dark,
.cy-dark .cy-wordmark--dark { display: block; }

/* Same swap for the theme toggle's own glyph: sun on light, moon on dark. */
.cy-themeicon--dark { display: none; }
[data-theme="dark"] .cy-themeicon--light,
.cy-dark .cy-themeicon--light { display: none; }
[data-theme="dark"] .cy-themeicon--dark,
.cy-dark .cy-themeicon--dark { display: block; }

.cy-divider-v {
  width: 1px;
  height: 18px;
  background: var(--border);
  display: inline-block;
  flex: none;
}

/* Tool name beside the wordmark. */
.cy-toolname {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* `← Portal`. The arrow is an inline SVG, not U+2190 — see MEMORY.md: the
   vendored latin subset has no ← glyph and would fall back to a system font. */
.cy-backlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--t-hover);
}
.cy-backlink:hover { border-color: var(--text-strong); color: var(--text-strong); }

/* User chip. */
.cy-userchip {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-userchip:hover { border-color: var(--border-strong); }
.cy-userchip__avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
}
.cy-userchip__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  white-space: nowrap;
}
.cy-userchip__name { font-weight: var(--w-semi); font-size: var(--t-small); }
.cy-userchip__role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Menu that drops out of the user chip (and the manager picker). */
.cy-menu {
  position: absolute;
  right: 0;
  top: 50px;
  width: 264px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 80;
  animation: cyRise 240ms var(--e-out) both;
}
.cy-menu--left { left: 0; right: auto; top: 38px; width: 272px; z-index: 70; }
.cy-menu__head {
  display: block;
  padding: 9px 10px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-menu__item:hover { background: var(--surface-sunk); }
.cy-menu__dot {
  margin-left: auto;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-strong);
}

.cy-anchor { position: relative; }

/* ══ 4 · Shell grid ═════════════════════════════════════════════════════════ */
.cy-shell {
  display: grid;
  grid-template-columns: var(--cy-rail-w) var(--cy-subrail-w) minmax(0, 1fr);
}
.cy-shell.is-rail-closed    { --cy-rail-w: var(--cy-rail-w-closed); }
.cy-shell.is-subrail-closed { --cy-subrail-w: var(--cy-subrail-w-closed); }
/* Views with no sub-rail (the launcher, the login shell). */
.cy-shell--norail { grid-template-columns: var(--cy-rail-w) minmax(0, 1fr); }

.cy-main {
  padding: 30px clamp(20px, 4vw, 40px) 72px;
  min-width: 0;
}
/* For tools that own their own scroll (AI Chat, Team Chat). */
.cy-main--flush {
  padding: 0;
  min-width: 0;
  height: calc(100vh - var(--cy-header-h));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ══ 5 · Tool rail ══════════════════════════════════════════════════════════ */
.cy-rail,
.cy-subrail {
  position: sticky;
  top: var(--cy-header-h);
  align-self: start;
  height: calc(100vh - var(--cy-header-h));
  border-right: 1px solid var(--hairline);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.cy-rail { gap: 2px; }
/* `display:flex` above beats the UA sheet's `[hidden]{display:none}`, so the
   shell's `subrail.hidden = true` needs saying again here. */
.cy-rail[hidden],
.cy-subrail[hidden] { display: none; }

.cy-rail__head,
.cy-subrail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 10px 8px 16px;
}
.cy-subrail__head { padding-bottom: 10px; }
.cy-rail__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-rail__toggle {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-rail__toggle:hover { border-color: var(--text-strong); color: var(--text-strong); }

/* One tool row: 24px mono index column + label, 2px left marker. */
.cy-tool {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text-strong);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: var(--t-hover);
}
.cy-tool:hover { background: var(--surface-sunk); }
.cy-tool.is-active {
  border-left-color: var(--text-strong);
  background: var(--surface-sunk);
}
.cy-tool__index {
  flex: none;
  width: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.cy-tool__label { flex: 1; font-weight: var(--w-semi); font-size: var(--t-small); }
.cy-tool__lock  { flex: none; opacity: .6; }
/* A tool the user cannot reach is dimmed and padlocked — never hidden. */
.cy-tool.is-locked { opacity: .5; cursor: not-allowed; }
.cy-tool.is-locked:hover { background: transparent; }
.cy-shell.is-rail-closed .cy-tool__label { display: none; }

/* ══ 6 · Sub-rail ═══════════════════════════════════════════════════════════ */
.cy-subrail__body {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-height: 0;
}
.cy-subrail__group {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 12px 10px;
}
.cy-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  transition: var(--t-hover);
}
.cy-navitem:hover { background: var(--surface-sunk); }
.cy-navitem.is-active {
  background: var(--text-strong);
  color: var(--bg);
}
.cy-navitem__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.cy-navitem.is-active .cy-navitem__badge {
  background: var(--bg);
  color: var(--text-strong);
}

/* Stat card pinned to the bottom of the sub-rail. */
.cy-railcard {
  margin-top: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 15px;
  background: var(--surface-sunk);
}
.cy-railcard__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-railcard__value {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-railcard__note {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Collapsed, a rail is 64px — only the toggle button survives. The head label
   is `.cy-rail__label` in both rails (that is how the prototype and
   css-demo.html mark it up), so target it through the head rather than relying
   on a `.cy-subrail__label` class that nothing actually sets. */
.cy-shell.is-subrail-closed .cy-subrail__body,
.cy-shell.is-subrail-closed .cy-subrail__head .cy-rail__label,
.cy-shell.is-subrail-closed .cy-subrail__label,
.cy-shell.is-rail-closed .cy-rail__head .cy-rail__label { display: none; }

/* ══ 7 · Type helpers ═══════════════════════════════════════════════════════
   `.cy-eyebrow` and `.cy-label` already live in tokens/typography.css.
   These are the page-level pieces built on top of them. */
.cy-mono {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-mono--strong { color: var(--text-strong); font-weight: var(--w-semi); }
.cy-mono--body   { color: var(--text-body); }
.cy-mono--wide   { letter-spacing: 0.18em; }

.cy-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.cy-pagehead__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cy-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.cy-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  text-wrap: pretty;
}
.cy-subline {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* `Section label ─────────── trailing note` */
.cy-sectionhead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 34px 0 14px;
}
.cy-sectionhead__rule { flex: 1; height: 1px; background: var(--hairline); }

/* ══ 8 · Buttons ════════════════════════════════════════════════════════════ */
.cy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--action-bg);
  color: var(--action-fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--t-hover);
}
.cy-btn:hover { background: var(--action-bg-hover); }
.cy-btn:disabled { opacity: .45; cursor: not-allowed; }
.cy-btn--block { width: 100%; justify-content: space-between; padding: 0 14px; }

/* Ghost: hairline outline that inverts to solid ink on hover. */
.cy-btn--ghost {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-strong);
}
.cy-btn--ghost:hover { background: var(--text-strong); color: var(--bg); }

/* Quiet ghost — hairline border, no invert, used for pagination and Cancel. */
.cy-btn--quiet {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-body);
}
.cy-btn--quiet:hover {
  background: var(--text-strong);
  color: var(--bg);
  border-color: var(--text-strong);
}

.cy-btn--sm { height: 38px; padding: 0 15px; font-size: 9px; letter-spacing: 0.1em; }
.cy-btn--xs { height: 32px; padding: 0 13px; font-size: 9px; letter-spacing: 0.12em; }

/* Small mono button — the 28px pill used in the bulk bar. */
.cy-btn-mono {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-btn-mono:hover { background: var(--text-strong); color: var(--bg); }
/* These are worn by <a> as often as by <button> — `Team report`, `Assign leads`. */
.cy-btn-mono { text-decoration: none; }
.cy-btn-mono--quiet { border-color: var(--hairline); color: var(--text-muted); }
.cy-btn-mono--quiet:hover {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--text-strong);
}

/* Icon button — the 42px theme toggle, the 34px modal close, the 26px rail toggle. */
.cy-iconbtn {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-iconbtn:hover { background: var(--text-strong); color: var(--bg); }
.cy-iconbtn--sm { width: 34px; height: 34px; color: var(--text-muted); font-size: 15px; line-height: 1; }
.cy-iconbtn--sm:hover { background: transparent; border-color: var(--text-strong); color: var(--text-strong); }

/* Back button — bare, mono, sits above a detail page. */
.cy-backbtn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t-hover);
}
.cy-backbtn:hover { color: var(--text-strong); }
/* Worn by an <a> on the account screen. */
.cy-backbtn { text-decoration: none; }

/* Segmented view switch — `Table / Board`, `Cards / Table`. */
.cy-segment {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  height: 44px;
}
.cy-segment__btn {
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-segment__btn + .cy-segment__btn { border-left: 1px solid var(--border); }
.cy-segment__btn:hover { color: var(--text-strong); }
.cy-segment__btn.is-active {
  background: var(--text-strong);
  color: var(--bg);
  border-left-color: var(--text-strong);
}

/* ══ 9 · Inputs ═════════════════════════════════════════════════════════════ */
.cy-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cy-field__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-input {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  padding: 0 12px;
  outline: none;
  transition: var(--t-hover);
}
.cy-input:focus { border-color: var(--border-strong); }
.cy-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: var(--t-hover);
}
.cy-textarea:focus { border-color: var(--border-strong); }
.cy-textarea--mono {
  border-color: var(--border-strong);
  font-family: var(--font-mono);
  padding: 12px 14px;
}
.cy-select { /* same shape as the input; native chevron kept */
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  padding: 0 10px;
  outline: none;
}

/* Search input with its inverted `Search` adornment. */
.cy-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  min-width: min(320px, 72vw);
}
.cy-search__input {
  flex: 1;
  border: 0;
  background: var(--surface);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  padding: 0 14px;
  height: 44px;
  outline: none;
}
.cy-search__adorn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}

/* Checkbox button — select-all and select-row. */
.cy-check {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  color: transparent;
}
.cy-check.is-checked {
  border: 0;
  background: var(--text-strong);
  color: var(--bg);
}

/* ══ 10 · Pills, chips, stage chips ═════════════════════════════════════════ */
.cy-filterrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cy-filterrow__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 48px;
}

/* Inactive = hairline outline. Active = filled ink, no border. */
.cy-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-pill:hover { border-color: var(--border-strong); color: var(--text-strong); }
.cy-pill.is-active {
  border-color: transparent;
  background: var(--text-strong);
  color: var(--bg);
}
.cy-pill__count { color: var(--text-faint); }
.cy-pill.is-active .cy-pill__count { color: inherit; opacity: .7; }
.cy-pill--sm { height: 26px; padding: 0 11px; letter-spacing: 0.06em; }

/* Chip — a static tag, not a control. */
.cy-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: var(--r-xs);
}
.cy-chip--outline { background: transparent; border-color: var(--hairline); }
.cy-chip--micro { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 5px; }
/* Dashed = a state that is withheld, not a state that is off. */
.cy-chip--dashed {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  padding: 5px 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Stage chip. Staged = filled ink. Unstaged = sunk fill + hairline. */
.cy-stage {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-sunk);
  color: var(--text-muted);
}
.cy-stage.is-staged {
  border-color: transparent;
  background: var(--text-strong);
  color: var(--bg);
}

/* Pipeline stepper. */
.cy-stepper { display: flex; align-items: flex-start; min-width: 640px; }
.cy-stepper__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 78px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  color: var(--text-strong);
}
.cy-stepper__count {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-stepper__track { display: flex; align-items: center; width: 100%; }
.cy-stepper__line { flex: 1; height: 2px; background: var(--border); }
.cy-stepper__line.is-blank { background: transparent; }
.cy-stepper__node {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
}
.cy-stepper__node.is-on { background: var(--text-strong); border-width: 3px; border-color: var(--text-strong); }
.cy-stepper__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.25;
  max-width: 100%;
  text-align: center;
}

/* ══ 11 · Data table ════════════════════════════════════════════════════════
   A CSS grid, not a <table> — the prototype's leads list is a grid so the
   header and the rows share one column definition. Set --cy-cols per view. */
.cy-scrollx { overflow-x: auto; padding-bottom: 4px; }

.cy-table {
  border-top: 1px solid var(--hairline);
  min-width: 800px;
}
.cy-table__head,
.cy-table__row {
  display: grid;
  grid-template-columns: var(--cy-cols, 30px minmax(0, 2.2fr) minmax(90px, 1fr) minmax(0, 1.2fr) minmax(80px, auto) minmax(0, 1.2fr));
  gap: var(--s-4);
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}
.cy-table__head {
  padding: 13px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Header cells that sort are buttons that render ` ↑` / ` ↓` in their text. */
.cy-table__sort {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  transition: var(--t-hover);
}
.cy-table__sort:hover { color: var(--text-strong); }
.cy-table__row {
  width: 100%;
  text-align: left;
  padding: 15px 8px;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--t-hover);
}
.cy-table__row:hover { background: var(--surface-sunk); }
.cy-table__row.is-selected { background: var(--surface-sunk); }
.cy-cell { min-width: 0; }
.cy-cell__primary {
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-cell__sub {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 4px;
  min-width: 0;
}
.cy-cell__muted {
  font-size: var(--t-small);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-cell__body {
  font-size: var(--t-small);
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bulk-selection bar above the table. */
.cy-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.cy-bulkbar__spacer { margin-left: auto; }

/* ══ 12 · Cards, board, KPI tiles ═══════════════════════════════════════════ */
.cy-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 16px;
}
.cy-card--lg { border-radius: var(--r-lg); padding: 20px; }
.cy-card--sunk { background: var(--surface-sunk); }
/* Hover = lift and deepen. Never a colour shift. */
.cy-card--action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  width: 100%;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-base);
}
.cy-card--action:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Board. */
.cy-board {
  display: grid;
  grid-template-columns: repeat(var(--cy-board-cols, 5), minmax(190px, 1fr));
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--s-2);
}
.cy-boardcol {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cy-boardcol__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.cy-boardcol__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cy-boardcol__count { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); }
.cy-boardcol__empty {
  padding: 14px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-boardcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--text-strong);
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-boardcard:hover { box-shadow: var(--shadow-md); }
.cy-boardcard__title { font-weight: var(--w-bold); font-size: var(--t-small); line-height: 1.3; }
.cy-boardcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* KPI / stat tiles — a hairline-gapped grid, one surface per cell. */
.cy-stats {
  display: grid;
  grid-template-columns: repeat(var(--cy-stat-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 20px;
}
.cy-stat {
  background: var(--surface-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.cy-stat__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-stat__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══ 13 · Modal ═════════════════════════════════════════════════════════════ */
.cy-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--cy-scrim);
  backdrop-filter: var(--cy-scrim-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 50px of clear space above and below the dialog, at every window size. The
     scrim is not a frame — the gap is what tells you the page is still there
     behind it, and a dialog flush to the edge reads as a screen rather than a
     panel you can dismiss. */
  padding: 50px 20px;
  animation: cyFade 180ms var(--e-out) both;
}
.cy-overlay--top { align-items: flex-start; overflow: auto; }
.cy-overlay--deep { background: var(--cy-scrim-deep); }

.cy-modal {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  animation: cyRise 240ms var(--e-out) both;
  display: flex;
  flex-direction: column;
}
.cy-modal--md { max-width: 680px; }
.cy-modal--lg { max-width: 1080px; }
.cy-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 22px 24px;
  border-bottom: 1px solid var(--hairline);
}
.cy-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-modal__lede {
  margin: 10px 0 0;
  font-size: var(--t-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.cy-modal__body { padding: 20px 24px; display: flex; flex-direction: column; gap: var(--s-2); }
.cy-modal__grid {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.cy-modal__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
}
.cy-modal__foot > .cy-btn:first-child { margin-left: auto; }
/* A stacked list of picks (Mark lost reasons). */
.cy-optionbtn {
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  transition: var(--t-hover);
}
.cy-optionbtn:hover { border-color: var(--text-strong); background: var(--surface-sunk); }

/* ══ 14 · Drawer ════════════════════════════════════════════════════════════
   CAUTION — no prototype uses this. DESIGN.md called the User Management user
   editor a "drawer", but the prototype (User Management.dc.html:333) builds it
   as a centred 680px overlay panel: that is `.cy-overlay--top` +
   `.cy-modal--md`, and 3.6 must use those. This class is here because the
   backlog named it; its geometry is a reasonable default, not a measurement.
   If a screen ever genuinely needs a side panel, check the prototype first. */
.cy-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 230;
  width: min(560px, 100vw);
  border-left: 1px solid var(--border);
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: auto;
  animation: cyDrawerIn var(--d-base) var(--e-out) both;
}
@keyframes cyDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cy-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 22px 24px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--surface-card);
  z-index: 1;
}
.cy-drawer__body { padding: 22px 24px; display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }
.cy-drawer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  position: sticky;
  bottom: 0;
  background: var(--surface-card);
}
.cy-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-semi);
}
.cy-avatar--sm { width: 28px; height: 28px; font-size: 10px; background: transparent; color: var(--text-strong); border: 1px solid var(--border-strong); font-weight: var(--w-regular); }
.cy-avatar--lg { width: 64px; height: 64px; border-radius: var(--r-md); font-size: var(--t-h4); }

/* ══ 15 · Toast ═════════════════════════════════════════════════════════════ */
.cy-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);
  animation: cyToastIn 300ms var(--e-out) both;
}
/* cyRise translates Y; the toast is already X-centred, so it needs its own. */
@keyframes cyToastIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ══ 16 · Empty state, spinner, pagination ══════════════════════════════════ */
.cy-empty {
  padding: 48px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-empty--card {
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: transparent;
}
/* A sentence under the mono line. Body type, so it is readable prose. */
.cy-empty__note {
  margin: 10px auto 0;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Ring spinner. */
.cy-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--text-strong);
  border-radius: 50%;
  display: inline-block;
  animation: cySpin 700ms linear infinite;
}
.cy-spinner--lg { width: 28px; height: 28px; border-width: 2.5px; }
/* Inline in a button label — the login submit. */
.cy-spinner--xs { width: 14px; height: 14px; }
/* Same as .cy-alert: an explicit `display` beats the UA sheet's `[hidden]`. */
.cy-spinner[hidden] { display: none; }
/* Three-dot "thinking" row, as in the AI Chat transcript. */
.cy-dots { display: inline-flex; align-items: center; gap: 6px; }
.cy-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: cyBlink 1s var(--e-in-out) infinite;
}
.cy-dots > span:nth-child(2) { animation-delay: .2s; }
.cy-dots > span:nth-child(3) { animation-delay: .4s; }
.cy-blink { animation: cyBlink 1s var(--e-in-out) infinite; }

.cy-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
}
.cy-pagination__info {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ══ 17 · Composer ══════════════════════════════════════════════════════════ */
.cy-composer {
  flex: none;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  padding: 16px clamp(20px, 4vw, 40px) 22px;
}
.cy-composer__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cy-composer__bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 10px 10px 10px 14px;
}
.cy-composer__attach {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--t-hover);
}
.cy-composer__attach:hover { border-color: var(--text-strong); color: var(--text-strong); }
.cy-composer__input {
  flex: 1;
  min-height: 26px;
  max-height: 140px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  padding: 4px 0;
  outline: none;
  resize: none;
}
.cy-composer__send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--t-hover);
}
.cy-composer__send:hover { opacity: .85; }
.cy-composer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cy-composer__note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Attachment chip in the queue. */
.cy-attach {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.cy-attach__name {
  font-size: var(--t-small);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-attach__ext { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; color: var(--text-faint); }
.cy-attach__x {
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  transition: var(--t-hover);
}
.cy-attach__x:hover { color: var(--text-strong); }

/* Transcript bubbles. */
.cy-msg--mine {
  max-width: 78%;
  margin-left: auto;
  border-radius: var(--r-md);
  background: var(--text-strong);
  color: var(--bg);
  padding: 14px 16px;
  font-size: var(--t-body);
  line-height: 1.5;
  text-wrap: pretty;
}
.cy-msg--agent { display: flex; gap: 14px; }
.cy-msg__mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* ══ 18 · A4 print sheet ════════════════════════════════════════════════════
   A report is a document, not a screen. It stays on white paper in both
   themes, so it uses the ramp primitives directly rather than the semantic
   light/dark tokens. Everything here is still a token. */
.cy-sheet {
  --sheet-paper:  var(--white);
  --sheet-ink:    var(--ink-800);
  --sheet-rule:   var(--gray-150);
  --sheet-fill:   var(--gray-50);
  --sheet-muted:  var(--gray-500);
  --sheet-faint:  var(--gray-400);
  --sheet-head:   var(--ink-600);

  background: var(--sheet-paper);
  color: var(--sheet-ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 44px;
  max-width: 880px;
  min-width: 780px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}
.cy-sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  border-bottom: 2px solid var(--sheet-ink);
  padding-bottom: var(--s-4);
}
.cy-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sheet-ink);
}
.cy-sheet__org {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sheet-muted);
}
.cy-sheet__meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sheet-muted);
  line-height: 1.8;
  white-space: nowrap;
}
.cy-sheet__meta strong { color: var(--sheet-ink); font-weight: var(--w-semi); }
/* Section bar: `01 — Title`, knocked out of solid ink. */
.cy-sheet__section {
  margin: 26px 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sheet-paper);
  background: var(--sheet-ink);
  padding: 7px 12px;
  font-weight: var(--w-regular);
}
.cy-sheet__summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cy-sheet__kpi { border: 1px solid var(--sheet-rule); padding: 14px; text-align: center; }
.cy-sheet__kpi-value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sheet-ink);
}
.cy-sheet__kpi-label {
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sheet-faint);
}
.cy-sheet__blurb { margin: 0 0 12px; font-size: 12px; color: var(--sheet-muted); }
.cy-sheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cy-sheet th {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--sheet-rule);
  background: var(--sheet-fill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sheet-head);
  font-weight: var(--w-regular);
}
.cy-sheet td { padding: 8px 10px; border: 1px solid var(--sheet-rule); vertical-align: top; }
.cy-sheet td strong { color: var(--sheet-ink); }
.cy-sheet__tag {
  margin-top: 4px;
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--sheet-ink);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cy-sheet__sub { font-family: var(--font-mono); font-size: 10px; color: var(--sheet-faint); }
.cy-sheet__foot {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--sheet-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sheet-faint);
}

@page { size: A4; margin: 16mm; }

@media print {
  [data-print="hide"]  { display: none !important; }
  [data-print="sheet"] {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  [data-print="wrap"]  { overflow: visible !important; padding: 0 !important; }
  main, .cy-main       { padding: 0 !important; }
  .cy-shell            { display: block !important; }
  .cy-grain            { display: none !important; }
  [data-stg] > *       { animation: none !important; }
  tr, tbody, thead     { page-break-inside: avoid; }
}

/* ══ 19 · Reduced motion ════════════════════════════════════════════════════
   tokens/motion.css already zeroes the --d-* durations, but every animation
   above names a literal duration (the prototype's own numbers), so those have
   to be switched off by name. Transitions go too. */
@media (prefers-reduced-motion: reduce) {
  [data-stg] > *,
  [data-anim],
  .cy-menu,
  .cy-modal,
  .cy-overlay,
  .cy-drawer,
  .cy-toast,
  .cy-spinner,
  .cy-dots > span,
  .cy-blink,
  .cy-auth__card,
  .cy-alert,
  .cy-locked__inner,
  .cy-hits,
  .cy-done,
  .cy-imp__barfill,
  .cy-gantt__bar,
  .cy-ribbon__spine {
    animation: none !important;
  }
  .cy-monthcard:hover,
  .cy-expocard:hover,
  .cy-ribbon__card:hover,
  .cy-gantt__bar:hover { transform: none; }
  .cy-tile:hover { transform: none; }
  .cy-card--action:hover { transform: none; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 20 · Auth — the login page ═════════════════════════════════════════════
   `Unified Login Portal.dc.html`, the `signin` screen. Split screen: a black
   poster panel on the left, the form on the right. The panel is black in both
   themes; the form side follows the theme like the rest of the app.

   The panel carries the brand's signature pattern — the seamless maze of
   cycle™ letterforms woven with "MIDDLE EAST" micro-text. It is a real tile,
   so it repeats rather than stretches, and it sits under the type at low
   opacity: the wordmark and the headline have to stay the loudest things on
   the panel. */
.cy-auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

.cy-auth__panel {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  padding: clamp(28px, 4vw, 56px);
}
/* The signature pattern, as a texture rather than a picture.
   The tile is 248×320 and repeats seamlessly. It is drawn at its native size
   and held well back: the brand guide calls for it as "a low-opacity section
   texture", and the wordmark and headline have to stay the loudest things on
   the panel. A scrim sits over it so the type is never fighting a white
   letterform behind it — the same protection the design system defines for
   text over the brand film. */
.cy-auth__field {
  position: absolute;
  inset: 0;
  background-image: url("/assets/cycle-tile-light.jpg");
  background-repeat: repeat;
  background-size: 248px 320px;
  opacity: 0.07;
}
/* The type block sits mid-panel and runs to the bottom, so the scrim is
   bottom-weighted and reaches past halfway. Without it the body copy — grey on
   black, the lowest-contrast text on the page — competes with a white
   letterform behind every other word. */
.cy-auth__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.78) 38%,
    rgba(0,0,0,0.30) 72%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cy-auth__field { animation: cyFade var(--d-cine) var(--e-out) both; }
}
/* Content sits above both the pattern and the scrim. `::after` is painted last
   among the panel's own layers, so the type needs an explicit z-index rather
   than just `position: relative`. */
.cy-auth__panel > *:not(.cy-auth__field) { position: relative; z-index: 1; }

.cy-auth__mark { height: 18px; width: max-content; display: block; }

.cy-auth__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy-onblack-mute);
}
/* Same eyebrow on the form side, where it sits on paper rather than on black. */
.cy-auth__eyebrow--ink { color: var(--text-faint); letter-spacing: 0.18em; }
.cy-auth__display {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.cy-auth__lede {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: var(--t-body-lg);
  color: var(--cy-onblack-text);
}
.cy-auth__foot {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cy-onblack-mute);
}
.cy-auth__rule { height: 1px; background: var(--cy-onblack-line); margin-bottom: 16px; }

/* Right side — the form. */
.cy-auth__side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}
.cy-auth__card {
  width: 100%;
  max-width: 380px;
  animation: cyRise 400ms var(--e-out) both;
}
.cy-auth__title {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
}
.cy-auth__sub {
  margin: 0 0 26px;
  font-size: var(--t-small);
  color: var(--text-muted);
}
.cy-auth__form { display: flex; flex-direction: column; gap: 14px; }
.cy-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: 2px;
}
.cy-auth__remember {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--text-muted);
}
.cy-auth__remember input {
  width: 15px;
  height: 15px;
  accent-color: var(--text-strong);
  cursor: pointer;
}
/* Bare button that reads as a link. Underline is a border so it can invert. */
.cy-auth__link {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t-hover);
}
.cy-auth__link:hover { color: var(--text-strong); border-color: var(--text-strong); }

.cy-auth__note {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--text-faint);
}

/* Taller input and submit — the auth screen runs 50/54px, not the app's 42/44. */
.cy-input--tall { height: 50px; padding: 0 14px; font-size: var(--t-body); background: var(--surface-card); }
.cy-btn--tall {
  height: 54px;
  width: 100%;
  margin-top: 10px;
  border: none;
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
}

/* Error banner. One shake, then it just sits there. */
.cy-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--text-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  font-size: var(--t-small);
  line-height: 1.45;
  animation: cyShake 300ms var(--e-in-out) both;
}
/* `display:flex` above beats the UA sheet's `[hidden]{display:none}`. */
.cy-alert[hidden] { display: none; }
.cy-alert__mark {
  flex: none;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-bold);
}
@keyframes cyShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Under 860px the poster stacks above the form and drops its filler. */
@media (max-width: 860px) {
  .cy-auth { grid-template-columns: 1fr; }
  .cy-auth__panel { min-height: 46vh; gap: var(--s-6); }
  .cy-auth__foot  { display: none; }
  .cy-auth__side  { padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 40px) 56px; }
}

/* ══ 21 · Locked view ═══════════════════════════════════════════════════════
   What `#audit` renders for someone without the tool. Copy is the prototype's
   own denied screen. The server 403s regardless; this stops the view from even
   asking. */
.cy-locked {
  min-height: calc(100vh - var(--cy-header-h) - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 44px);
}
.cy-locked__inner {
  width: 100%;
  max-width: 600px;
  animation: cyRise 400ms var(--e-out) both;
}
.cy-locked__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-locked__title {
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-locked__body {
  margin: 0;
  max-width: 48ch;
  font-size: var(--t-body-lg);
  color: var(--text-muted);
}

/* ══ 22 · Launcher ══════════════════════════════════════════════════════════
   `Unified Login Portal.dc.html`, the `launcher` screen. Measurements are the
   prototype's own: the 1180px column, the 44px quick-action button, the 190px
   tile, the 268px card grids and the 230px tile grid.

   Notification tone is fill, outline and dash — never a hue. The prototype
   paints its four tones with oklch values (`oklch(0.55 0.18 25)` and friends);
   the brand has no colour, so urgent is a solid ink bar, due is a dashed one,
   a win is a hairline, and info has no bar at all. */
.cy-launcher {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 7vh, 76px) clamp(20px, 4vw, 44px) 90px;
}

.cy-launcher__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.cy-launcher__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-launcher__greeting {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
}
.cy-launcher__access {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: var(--t-body-lg);
  color: var(--text-muted);
}

.cy-launcher__searchwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 300px;
  flex: 1 1 300px;
  max-width: 460px;
}
.cy-launcher__hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-launcher__search { height: 46px; background: var(--surface-card); }
/* The `x` Safari and Chrome put inside type=search fights the hairline. */
.cy-launcher__search::-webkit-search-cancel-button { -webkit-appearance: none; }

.cy-launcher__body {
  margin-top: 40px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.cy-launcher__block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cy-launcher__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-launcher__labelrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.cy-launcher__pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-launcher__links { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cy-launcher__quiet {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t-hover);
}
.cy-launcher__quiet:hover { color: var(--text-strong); }
.cy-launcher__none { margin: 40px 0 0; font-size: var(--t-body-lg); color: var(--text-muted); }
.cy-launcher__none[hidden] { display: none; }

/* Record hits, dropped under the search box. */
.cy-hits {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: cyRise 200ms var(--e-out) both;
}
.cy-hit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text-strong);
  transition: var(--t-hover);
}
.cy-hit:last-child { border-bottom: 0; }
.cy-hit:hover,
.cy-hit.is-selected { background: var(--surface-sunk); }
.cy-hit__kind {
  flex: none;
  width: 56px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-hit__text { flex: 1; min-width: 0; }
.cy-hit__title {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-hit__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-hit svg { flex: none; opacity: .5; }

/* Quick actions. */
.cy-quickrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.cy-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-quick:hover { background: var(--text-strong); color: var(--bg); }
.cy-quick__plus { font-size: 14px; line-height: 1; }

/* The manager block. */
.cy-teamgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}
.cy-teamcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-strong);
  transition: var(--t-hover);
}
.cy-teamcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.cy-teamcard__top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cy-teamcard__name {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-teamcard__go { margin-left: auto; flex: none; display: inline-flex; color: var(--text-faint); }
.cy-teamcard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
}
.cy-teamcard__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-teamcard__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* `Team report` and friends carry a dimmed count after the label. */
.cy-btn-mono__hint { margin-left: 7px; opacity: .6; }
.cy-btn-mono--solid { background: var(--action-bg); color: var(--action-fg); border-width: 1.5px; }
.cy-btn-mono--solid:hover { background: var(--action-bg-hover); color: var(--action-fg); }
.cy-btn-mono[hidden] { display: none; }

/* Notifications. */
.cy-unread {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
}
.cy-unread__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-strong); }

.cy-notifs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}
.cy-notif {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-strong);
  transition: var(--t-hover);
}
.cy-notif:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
/* Tone, monochrome: solid bar, dashed bar, hairline bar, none. */
.cy-notif--urgent { border-left-color: var(--text-strong); }
.cy-notif--due    { border-left-style: dashed; border-left-color: var(--text-strong); }
.cy-notif--good   { border-left-color: var(--border); }
.cy-notif--info   { border-left-color: transparent; }
.cy-notif.is-read { opacity: .6; }
.cy-notif__top { display: flex; align-items: center; gap: var(--s-2); }
.cy-notif__kind {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.cy-notif--good .cy-notif__kind,
.cy-notif--info .cy-notif__kind { color: var(--text-muted); }
.cy-notif__tool {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-notif__dot {
  margin-left: auto;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-strong);
}
.cy-notif__title { font-size: var(--t-small); font-weight: var(--w-semi); line-height: 1.35; }
.cy-notif__detail { font-size: var(--t-small); color: var(--text-muted); line-height: 1.4; }
.cy-notif__when {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* The prototype's `Nothing here` — dashed, mono, centred, short. */
.cy-empty--dashed {
  padding: 30px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
}

/* Tool tiles. */
.cy-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.cy-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--t-hover);
}
.cy-tile:hover {
  border-color: var(--text-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.cy-tile.is-locked { opacity: .5; }
.cy-tile.is-selected::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px solid var(--text-strong);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.cy-tile__top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cy-tile__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-tile__lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-tile__name {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.cy-tile__desc { font-size: var(--t-small); color: var(--text-muted); line-height: 1.5; }
.cy-tile__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ══ 23 · Quick-action modals ═══════════════════════════════════════════════
   The prototype's quick-action overlay, rebuilt on `Modal` from ui.js. Fields
   stack rather than sitting in the prototype's two-column auto-fit grid,
   because each picker needs the full width under its own input. */
.cy-qa { display: flex; flex-direction: column; gap: var(--s-3); }
.cy-qa__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }

.cy-picker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  max-height: 190px;
  overflow: auto;
}
.cy-picker__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-picker__row:last-child { border-bottom: 0; }
.cy-picker__row:hover { background: var(--surface-sunk); }
.cy-picker__row.is-active { background: var(--text-strong); color: var(--bg); }
.cy-picker__name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-picker__row.is-active .cy-picker__name { font-weight: var(--w-semi); }
.cy-picker__meta {
  flex: none;
  max-width: 45%;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-picker__row.is-active .cy-picker__meta { color: inherit; opacity: .75; }
.cy-picker__empty {
  padding: 14px 13px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cy-modal__hint {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-modal__note {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-muted);
}

/* An advisory banner, not an error. Same shape, hairline instead of ink. */
.cy-alert--quiet { border-color: var(--border); animation: none; }

/* The `created` confirmation inside a quick-action modal. */
.cy-done {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border: 1px solid var(--text-strong);
  border-radius: var(--r-sm);
  padding: 14px 15px;
  animation: cyRise 260ms var(--e-out) both;
}
.cy-done__tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
}
.cy-done__title { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-done__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ══ 24 · Account settings ══════════════════════════════════════════════════
   `Unified Login Portal.dc.html`, the `settings` screen. 900px column, four
   tabs, one card per tab. */
.cy-account {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(30px, 6vh, 60px) clamp(20px, 4vw, 44px) 90px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cy-account__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 0.95;
}
.cy-account__ident {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-account__tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
}
/* The tabs are links, so a tab is bookmarkable and the browser Back works. */
.cy-account__tabs .cy-pill { text-decoration: none; height: 34px; border-radius: var(--r-sm); }

.cy-account__card { display: flex; flex-direction: column; gap: var(--s-5); }
.cy-account__card--narrow { max-width: 520px; gap: var(--s-4); }
.cy-account__card--mid    { max-width: 620px; gap: var(--s-4); }
.cy-account__grid {
  display: grid;
  /* 280px, not the prototype's 230px: at 230 the card fits three columns and
     clips a work email in the third. Two columns is also the prototype's own
     2x2 reading at its design width. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cy-account__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.cy-account__foot .cy-btn { margin-left: auto; }
.cy-account__submit { align-self: flex-start; width: auto; }
/* Email is set by an admin; the field shows the value and refuses the caret. */
.cy-input--fixed { background: var(--surface-sunk); color: var(--text-faint); }

/* Avatar drop zone. */
.cy-drop {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  transition: var(--t-hover);
}
.cy-drop.is-over { background: var(--surface-card); }
.cy-drop__text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cy-drop__title { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-drop__note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-drop__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.cy-drop__actions .cy-btn-mono[hidden] { display: none; }
.cy-drop__actions .cy-btn-mono {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.12em;
}
.cy-account__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}
.cy-account__photo--initials {
  border: 0;
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
}
/* The header chip's 30px circle, once a photo replaces the initials. */
.cy-userchip__avatar--photo { background-size: cover; background-position: center; color: transparent; }

/* Password strength meter — shared with the reset flow on the login page. */
.cy-meter { display: flex; flex-direction: column; gap: 6px; }
.cy-meter__track {
  height: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.cy-meter__fill { height: 100%; width: 0; background: var(--text-strong); transition: width 200ms var(--e-out); }
.cy-meter__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* A quiet confirmation block — `Password changed…`, `Changed`. */
.cy-note {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  font-size: var(--t-small);
  line-height: 1.5;
}
.cy-note[hidden] { display: none; }
.cy-note--strong { border-radius: var(--r-md); background: var(--surface-card); }
.cy-note--strong p { margin: 10px 0 0; line-height: 1.6; color: var(--text-body); }

/* Notification switches. */
.cy-switchrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.cy-switchrow__label { flex: 1; font-size: var(--t-small); }
.cy-switchrow__note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-switch {
  flex: none;
  width: 38px;
  height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 3px;
  transition: var(--t-hover);
}
.cy-switch > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: var(--t-hover);
}
.cy-switch.is-on { border-color: transparent; background: var(--text-strong); justify-content: flex-end; }
.cy-switch.is-on > span { width: 16px; height: 16px; background: var(--bg); }

/* Session rows. */
.cy-sessionrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.cy-sessionrow__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cy-sessionrow__device { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-sessionrow__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-sessionrow__here {
  margin-left: auto;
  flex: none;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cy-sessionrow__out { margin-left: auto; height: 32px; border-radius: var(--r-sm); }

/* The reset flow's code field — six digits, tracked wide, in mono. */
.cy-input--code { font-family: var(--font-mono); letter-spacing: 0.3em; }

/* `[hidden]` traps: every rule above with an explicit `display` outranks the UA
   sheet, so anything a view hides with `.hidden = true` needs its own rule.
   See MEMORY.md — five of these shipped visible on the login page once. */
.cy-auth__card[hidden],
.cy-auth__form[hidden],
.cy-backbtn[hidden],
.cy-switch[hidden],
.cy-hits[hidden],
.cy-drop[hidden],
.cy-done[hidden],
.cy-backlink[hidden] { display: none; }

/* Under 900px the launcher head stacks and the search takes the full width. */
@media (max-width: 900px) {
  .cy-launcher__head { flex-direction: column; align-items: stretch; }
  .cy-launcher__searchwrap { max-width: none; }
  .cy-launcher__quiet, .cy-launcher__links { margin-left: 0; }
}

/* The return-key glyph in the search hint. U+21B5 is outside the vendored
   subset (same trap as U+2190) so it is drawn, not typed. */
.cy-keyglyph { vertical-align: -1px; margin: 0 1px; }

/* ══ 25 · CRM ═══════════════════════════════════════════════════════════════
   `design/CRM.dc.html` — the leads table and board, the full-page lead detail,
   Tasks, Team and the Manager desk. Every rule here is a translation of an
   inline `style="…"` in that file onto the token layer; nothing invents a
   measurement and nothing names a colour.

   Reused rather than restated: `.cy-table` already carries the leads grid as
   its default `--cy-cols`, `.cy-stepper` is the pipeline above the table,
   `.cy-check` is the 18px selection box, `.cy-chip--dashed` is
   `Reassignment locked by admin`, `.cy-segment` is `Table / Board` and
   `.cy-search` is the search group. */

/* The two primary buttons above the CRM sub-rail nav. */
.cy-subrail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: 16px;
}

/* Manager strip above the leads table. Its own stacking context, because the
   `Reporting to you` menu drops out of it over the pipeline stepper. */
.cy-strip {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.cy-strip__title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: var(--w-semi);
}
.cy-strip__spacer { margin-left: auto; }

/* Score cell — the number and its band tag. */
.cy-score { display: flex; align-items: center; gap: var(--s-2); }
.cy-score__value { font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-strong); }

/* A column being dragged over is outlined, never tinted. */
.cy-boardcol.is-dragover {
  border-color: var(--text-strong);
  background: var(--surface-card);
}
.cy-boardcard[draggable="true"] { cursor: grab; }
.cy-boardcard.is-dragging { opacity: .45; }

/* ── Lead detail ─────────────────────────────────────────────────────────── */
.cy-lead__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cy-lead__ident { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cy-lead__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
}
.cy-lead__ref {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-lead__metrics { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cy-lead__scoreline { display: flex; align-items: baseline; gap: var(--s-2); }
.cy-lead__score {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-lead__band {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text-strong);
  border-radius: var(--r-xs);
  padding: 3px 7px;
}
.cy-lead__rating { display: flex; flex-direction: column; gap: 6px; }
.cy-lead__stagechip {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.cy-lead__lost {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Five-dot rating. Filled = set, hairline = unset. */
.cy-rating { display: flex; align-items: center; gap: 5px; }
.cy-rating__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: var(--t-hover);
}
.cy-rating__dot.is-on { border-color: var(--text-strong); background: var(--text-strong); }

/* The detail pipeline — a stage track, clickable, distinct from the leads
   stepper above the table. */
.cy-track { display: flex; align-items: flex-start; margin-top: 16px; }
.cy-track__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cy-track__rail { display: flex; align-items: center; height: 14px; width: 100%; }
.cy-track__mark {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
}
.cy-track__mark.is-done { background: var(--text-strong); border-color: var(--text-strong); }
.cy-track__mark.is-current {
  width: 13px;
  height: 13px;
  background: var(--bg);
  border: 3px solid var(--text-strong);
}
.cy-track__line { flex: 1; height: 2px; background: var(--hairline); margin: 0 3px; }
.cy-track__line.is-solid { background: var(--text-strong); }
.cy-track__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-right: 6px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.cy-track__label.is-current { color: var(--text-strong); font-weight: var(--w-semi); }

/* Two-column detail body. */
.cy-panelgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}
.cy-panelcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cy-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cy-panel--strong { border-color: var(--border-strong); }
.cy-panel--dashed {
  border: 1px dashed var(--border);
  background: transparent;
  padding: 20px;
  gap: 10px;
}
.cy-panel__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cy-panel__block {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cy-panel__pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cy-panel__foot {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-panel__body { font-size: var(--t-small); color: var(--text-body); line-height: 1.45; }
.cy-panel__strong { font-weight: var(--w-bold); font-size: var(--t-body); }
.cy-panel__quiet {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-fieldlet { min-width: 0; }
.cy-fieldlet__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-fieldlet__value { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--text-body); }

/* Contact rows — a 30px bordered glyph box and the value beside it. */
.cy-iconline { display: flex; align-items: flex-start; gap: 11px; }
.cy-iconline__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 9px;
}
.cy-iconline__text { min-width: 0; font-size: var(--t-small); color: var(--text-body); overflow-wrap: anywhere; }

/* Quotation. */
.cy-quote { display: flex; align-items: center; gap: 9px; }
.cy-quote__cur {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-quote__input { flex: 1; min-width: 0; height: 40px; font-family: var(--font-mono); }
.cy-quote__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-quote__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-quote__sent {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.cy-quote__tick {
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
}

/* ── Tasks ───────────────────────────────────────────────────────────────── */
.cy-check--md { width: 20px; height: 20px; margin-top: 1px; }
.cy-check--lg { width: 22px; height: 22px; }

.cy-task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.cy-task__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cy-task__title { font-size: var(--t-small); font-weight: var(--w-semi); color: var(--text-strong); line-height: 1.4; }
.cy-task__title.is-done { font-weight: var(--w-regular); color: var(--text-faint); text-decoration: line-through; }
.cy-task__note { font-size: var(--t-small); color: var(--text-muted); line-height: 1.45; }
.cy-task__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-tag--solid { border-color: transparent; background: var(--text-strong); color: var(--bg); }
.cy-tag--bare { border: 0; padding: 0; color: var(--text-faint); }
.cy-tag--due { border: 0; padding: 0; color: var(--text-strong); font-weight: var(--w-semi); }
.cy-task__x {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  transition: var(--t-hover);
}
.cy-task__x:hover { border-color: var(--text-strong); color: var(--text-strong); }

/* Task composer — an input then four labelled chip groups. */
.cy-taskform {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.cy-chiprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-chiprow__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 44px;
  flex: none;
}
.cy-chiprow__end { margin-left: auto; }
.cy-minipill {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-minipill:hover { border-color: var(--border-strong); color: var(--text-strong); }
.cy-minipill.is-active { border-color: transparent; background: var(--text-strong); color: var(--bg); }

/* The standalone Tasks section. */
.cy-tasktable { border-top: 1px solid var(--hairline); }
.cy-taskrow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(70px, auto) minmax(70px, auto);
  gap: 14px;
  align-items: center;
  padding: 15px 8px;
  border-bottom: 1px solid var(--hairline);
}
.cy-taskrow__title {
  font-size: var(--t-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-taskrow__title.is-done { color: var(--text-faint); text-decoration: line-through; }
.cy-taskrow__sub { display: flex; align-items: center; gap: var(--s-2); margin-top: 4px; flex-wrap: wrap; }
.cy-linkbtn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--t-hover);
}
.cy-linkbtn:hover { color: var(--text-strong); }
.cy-justify-start { justify-self: start; }

/* Notes and Recent changes. */
.cy-noteitem { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.cy-noteitem__body { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--text-body); }
.cy-noteitem__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-noteform { display: flex; gap: 10px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.cy-noteform .cy-input { flex: 1; min-width: 0; height: 44px; }

.cy-change { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.cy-change__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-strong); margin-top: 6px; }
.cy-change__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cy-change__action {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.cy-change__detail { font-size: var(--t-small); color: var(--text-body); line-height: 1.45; }
/* The stage arrow is drawn, not typed — U+2192 is outside the vendored subset
   — so it needs the spacing the glyph would have carried. */
.cy-change__detail svg { margin: 0 6px; vertical-align: -1px; }

/* ── Team ────────────────────────────────────────────────────────────────── */
.cy-membergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cy-member {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.cy-member__top { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cy-member__name {
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-member__role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-member__flag {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--text-strong);
  color: var(--bg);
  border-radius: var(--r-xs);
  padding: 3px 7px;
}
.cy-member__caret {
  flex: none;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  transition: var(--t-hover);
}
.cy-member__caret:hover { border-color: var(--text-strong); color: var(--text-strong); }
.cy-member__flag + .cy-member__caret { margin-left: 0; }
.cy-member__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.cy-member__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-member__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-member__book { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }

/* A row in a queue or a book: a title button and a set of move-to targets. */
.cy-queuerow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.cy-queuerow__open {
  flex: 1;
  min-width: 180px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-strong);
}
.cy-queuerow__name {
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-queuerow__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-queuerow__targets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cy-initbtn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  transition: var(--t-hover);
}
.cy-initbtn:hover { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }

/* ── Manager desk ────────────────────────────────────────────────────────── */
.cy-mgrgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cy-mgrcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  color: var(--text-strong);
  padding: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
  min-width: 0;
}
.cy-mgrcard:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cy-mgrcard__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-mgrpill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cy-mgrpill--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-body);
}
.cy-reportgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.cy-reportstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
.cy-reportstat__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-reportstat__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-bar { display: flex; flex-direction: column; gap: 5px; }
.cy-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cy-bar__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cy-bar__count { font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-strong); }
.cy-bar__track { height: 6px; background: var(--surface-sunk); border-radius: var(--r-xs); overflow: hidden; }
.cy-bar__fill { height: 100%; width: 0; background: var(--text-strong); }

/* Admin-only grant panel — the one card with a full-weight ink border. */
.cy-grant {
  border: 1.5px solid var(--text-strong);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cy-grant__title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: var(--w-semi);
}
.cy-grant__lede { margin: 8px 0 0; font-size: var(--t-small); color: var(--text-muted); max-width: 56ch; text-wrap: pretty; }
.cy-grant__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.cy-grant__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cy-candidate {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-candidate:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.cy-candidate.is-active {
  border: 1.5px solid var(--text-strong);
  background: var(--text-strong);
  color: var(--bg);
}
.cy-candidate.is-active:hover { background: var(--text-strong); }
.cy-candidate__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cy-candidate__name { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-candidate__role {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-candidate.is-active .cy-candidate__role { color: inherit; opacity: .75; }
.cy-candidate__flag {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cy-toggle { display: flex; align-items: flex-start; gap: 12px; }
.cy-toggle__text { min-width: 0; }
.cy-toggle__label { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-toggle__desc { margin: 4px 0 0; font-size: var(--t-small); color: var(--text-muted); text-wrap: pretty; }

/* Mark-lost modal: six reasons stacked, one per row. */
.cy-reasons { display: flex; flex-direction: column; gap: var(--s-2); }

@media (max-width: 900px) {
  .cy-lead__head { flex-direction: column; align-items: stretch; }
  .cy-strip__spacer { margin-left: 0; }
}

/* CRM page scaffolding — the column every section stacks into, plus the few
   modifiers the view names. Kept at the end of § 25 so the components above
   read as components. */
.cy-crm { display: flex; flex-direction: column; }
.cy-crm > * { min-width: 0; }
.cy-crm__stepper { margin-bottom: 26px; }
.cy-crm > .cy-note { margin-bottom: 20px; }

/* A panel that spans the page rather than sitting in the two-column grid. */
.cy-panel--wide { margin-bottom: 20px; }

/* Eight stages, so the board overrides the five-column default. */
.cy-board--pipeline { --cy-board-cols: 8; }

/* A plain vertical list inside a panel; the rows carry their own rules. */
.cy-list { display: flex; flex-direction: column; }

.cy-lead__names { min-width: 0; }
.cy-member__ident { min-width: 0; }
.cy-member__top--ruled { border-top: 1px solid var(--hairline); padding-top: 18px; }
.cy-queuerow__name { display: block; }

/* 48px — the height the prototype gives `Advance to …` and `Mark lost`, which
   sit beside the score block rather than in a normal action row. */
.cy-btn--lg { height: 48px; padding: 0 20px; font-size: var(--t-micro); }

/* ══ 26 · CRM import ════════════════════════════════════════════════════════
   The four-step modal in `design/CRM.dc.html` — pick, running, review, done.
   Every inline style in the prototype is a class here, on the token layer.
   The agent strip is deliberately monochrome: the prototype gives each agent a
   hex colour and the brand has none, so state is fill / outline / dashed. */
.cy-imp { display: flex; flex-direction: column; }

/* ── Fleet strip ─────────────────────────────────────────────────────────── */
.cy-imp__fleet {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.cy-imp__fleetlabel,
.cy-imp__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-imp__agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cy-imp__agent.is-working { border-style: dashed; border-color: var(--border-strong); }
.cy-imp__agent.is-done { border-color: var(--border-strong); }
.cy-imp__agentcode {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  background: var(--surface-sunk);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--w-semi);
}
.cy-imp__agent.is-done .cy-imp__agentcode,
.cy-imp__agent.is-working .cy-imp__agentcode {
  background: var(--text-strong);
  color: var(--bg);
}
.cy-imp__agentname { font-size: var(--t-small); color: var(--text-body); }
.cy-imp__agentstate {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── pick ────────────────────────────────────────────────────────────────── */
.cy-imp__pick { display: flex; flex-direction: column; gap: 18px; }
.cy-imp__drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 34px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--text-faint);
  cursor: pointer;
  text-align: center;
  transition: var(--t-hover);
}
.cy-imp__drop:hover,
.cy-imp__drop.is-over { background: var(--surface-card); border-color: var(--text-strong); }
.cy-imp__droptitle { font-size: var(--t-body); font-weight: var(--w-semi); color: var(--text-strong); }
.cy-imp__dropnote {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
}
.cy-imp__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cy-imp__paste { display: flex; flex-direction: column; gap: 9px; }
.cy-imp__textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 12px 14px;
  outline: none;
  resize: vertical;
}
.cy-imp__textarea:focus { border-color: var(--text-strong); }
.cy-imp__pickacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-imp__pickacts .cy-btn { text-decoration: none; }
.cy-imp__err {
  padding: 13px 15px;
  border: 1px dashed var(--text-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--text-strong);
}

/* ── running ─────────────────────────────────────────────────────────────── */
.cy-imp__running {
  padding: 52px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cy-imp__bar { width: min(420px, 100%); height: 3px; background: var(--surface-sunk); overflow: hidden; }
.cy-imp__barfill {
  height: 100%;
  width: 40%;
  background: var(--text-strong);
  animation: cyFade 900ms var(--e-out) infinite alternate;
}

/* ── review ──────────────────────────────────────────────────────────────── */
.cy-imp__review { display: flex; flex-direction: column; gap: 20px; }
.cy-imp__block { display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.cy-imp__log { display: flex; flex-direction: column; gap: 9px; }
.cy-imp__logrow {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.cy-imp__logcode {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 2px;
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: var(--w-semi);
}
.cy-imp__logbody { min-width: 0; }
.cy-imp__logname {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-imp__logtext { margin: 4px 0 0; font-size: var(--t-small); color: var(--text-body); line-height: 1.5; }

.cy-imp__cols { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.cy-imp__col { position: relative; }
.cy-imp__colbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: var(--t-hover);
}
.cy-imp__colbtn:hover { border-color: var(--text-strong); }
.cy-imp__colbtn.is-ignored {
  border-style: dashed;
  border-color: var(--hairline);
  color: var(--text-faint);
  background: transparent;
}
.cy-imp__colhead {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .7;
}
.cy-imp__colfield { display: flex; align-items: center; gap: 7px; font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-imp__conf {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .65;
}
.cy-imp__colmenu { width: 210px; top: calc(100% + 6px); }

/* ── Batch settings ──────────────────────────────────────────────────────── */
.cy-imp__batch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.cy-imp__batchcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cy-imp__batchhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cy-imp__check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cy-imp__box {
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
}
.cy-imp__box.is-checked { border-color: var(--text-strong); background: var(--text-strong); color: var(--bg); }
.cy-imp__expos { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; }
.cy-imp__expo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  text-align: left;
  transition: var(--t-hover);
}
.cy-imp__expo:hover { border-color: var(--border-strong); color: var(--text-strong); }
.cy-imp__expo.is-active { border-color: var(--text-strong); background: var(--text-strong); color: var(--bg); }
.cy-imp__exponame { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-imp__expometa {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .7;
}
.cy-imp__picked {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.7;
}
.cy-imp__hint { font-size: var(--t-small); color: var(--text-faint); line-height: 1.55; margin: 0; }
.cy-imp__owners { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-imp__counts { display: flex; align-items: flex-start; gap: 22px; margin-top: auto; padding-top: 12px; }
.cy-imp__countval { font-size: 22px; font-weight: var(--w-semi); color: var(--text-strong); line-height: 1.1; }
.cy-imp__countlabel {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Sheet preview ───────────────────────────────────────────────────────── */
.cy-imp__previewhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cy-imp__filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-imp__sheet {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: auto;
  max-height: 420px;
}
.cy-imp__row {
  display: grid;
  grid-template-columns: 34px 1.4fr 1fr 1.5fr 1fr 1.1fr 1.9fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-top: 1px solid var(--hairline);
  min-width: 900px;
}
.cy-imp__row:first-child { border-top: 0; }
.cy-imp__row--head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  align-items: center;
}
.cy-imp__row.is-skipped { opacity: .45; }
.cy-imp__row.is-blocked { background: var(--surface-sunk); }
.cy-imp__num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  padding-top: 9px;
}
.cy-imp__cell {
  width: 100%;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  padding: 0 7px;
  outline: none;
  min-width: 0;
}
.cy-imp__cell:hover { border-color: var(--hairline); }
.cy-imp__cell:focus { border-color: var(--text-strong); background: var(--surface-card); }
.cy-imp__scope { font-size: var(--t-small); color: var(--text-faint); padding-top: 8px; line-height: 1.4; }
.cy-imp__status { display: flex; flex-direction: column; gap: 5px; padding-top: 6px; min-width: 0; }
.cy-imp__statustop { display: flex; align-items: center; gap: 9px; }
.cy-imp__statuslabel {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-imp__row.is-blocked .cy-imp__statuslabel { color: var(--text-strong); }
.cy-imp__skip {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
}
.cy-imp__skip:hover { color: var(--text-strong); }
.cy-imp__issue { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-small); color: var(--text-body); line-height: 1.45; }
.cy-imp__fix {
  flex: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
}

/* ── Footer and done ─────────────────────────────────────────────────────── */
.cy-imp__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.cy-imp__gate { flex: 1 1 260px; font-size: var(--t-small); color: var(--text-faint); line-height: 1.5; }
.cy-imp__blockedbtn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cy-imp__done { padding: 32px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cy-imp__donenum { font-size: 56px; font-weight: var(--w-semi); line-height: 1; color: var(--text-strong); }
.cy-imp__donenote { margin: 0; max-width: 60ch; font-size: var(--t-small); color: var(--text-body); line-height: 1.6; }
.cy-imp__doneacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ══ 27 · Expo Navigator ════════════════════════════════════════════════════
   `design/Expo Navigator.dc.html` — the calendar in three views, the month
   pages, the expo detail with its exhibitor table, the archive grid, the
   company profile and the outreach board. Every rule here is a translation of
   an inline style attribute in that file onto the token layer; nothing invents
   a measurement and nothing names a colour.

   Reused rather than restated: `.cy-table` is the exhibitor and List grids
   with `--cy-cols` overridden, `.cy-pill` is every filter, `.cy-panel` is
   every card, `.cy-board` is the outreach board, `.cy-rating` is the dots,
   `.cy-check` is the selection box and `.cy-search` is the search group.

   Two positions are data-driven and cannot be classes — the gantt bars and
   the month ribbon's nodes. The view writes them in `afterPaint()` from
   `data-ex-left` / `-width` / `-top` / `-height`, exactly as the CRM does for
   its pipeline bars. */

.cy-expo { display: flex; flex-direction: column; }
.cy-expo > * { min-width: 0; }
.cy-expo > .cy-note { margin-bottom: 20px; }
.cy-pagehead--end { align-items: flex-end; }

/* Year stepper beside the view tabs. Hidden on Year, which rolls instead. */
.cy-yearnav {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.cy-yearnav__btn {
  width: 36px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--t-hover);
}
.cy-yearnav__btn:hover { background: var(--surface-sunk); }
.cy-yearnav__label {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  padding: 0 6px;
}

/* ── Calendar · Year ─────────────────────────────────────────────────────── */
.cy-roll { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cy-roll__more { display: flex; justify-content: center; margin-top: 24px; }
.cy-sectionhead--year { margin-top: 34px; }

.cy-monthgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-4);
}
.cy-monthcard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: var(--t-base);
}
.cy-monthcard:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cy-monthcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cy-monthcard__label {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-body-lg);
  letter-spacing: var(--ls-tight);
}
.cy-daygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cy-daycell {
  height: 19px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  border-radius: 3px;
}
.cy-daycell--head { height: 14px; font-size: 8px; text-transform: uppercase; }
.cy-daycell.is-blank { color: transparent; }
/* Fill = an expo runs that day. Outline = today. Monochrome, as everywhere. */
.cy-daycell.is-marked {
  background: var(--text-strong);
  color: var(--bg);
  font-weight: var(--w-semi);
}
.cy-daycell.is-today {
  border: 1.5px solid var(--text-strong);
  color: var(--text-strong);
  font-weight: var(--w-semi);
}
.cy-monthcard__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--hairline);
  padding-top: 9px;
}
.cy-monthcard__expo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  background: var(--surface-sunk);
  color: var(--text-strong);
  padding: 6px 8px;
  transition: var(--t-hover);
}
.cy-monthcard__expo:hover { background: var(--text-strong); color: var(--bg); }
.cy-monthcard__exponame {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-monthcard__expodays { flex: none; font-family: var(--font-mono); font-size: 9px; opacity: .7; }

/* A projected edition, rolled forward from last year because these shows
   repeat annually. It has to sit in the calendar to be useful for planning,
   and it has to be distinguishable at a glance from a date an organiser has
   actually announced — otherwise somebody books a stand against a guess.
   Monochrome leaves weight and opacity to carry that, plus the `~` on the day
   range and the legend in the section head. */
.cy-monthcard__expo--expected .cy-monthcard__exponame,
.cy-monthcard__expo--expected .cy-monthcard__expodays { opacity: .5; }
.cy-monthcard__expo--expected { border-left: 1px dashed var(--hairline); padding-left: 5px; }

/* A mono label that is an aside rather than a value — legends, caveats. */
.cy-mono--quiet { opacity: .55; text-transform: none; letter-spacing: 0.04em; }
.cy-monthcard__more {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 2px 0;
}

/* ── Calendar · Timeline ─────────────────────────────────────────────────── */
.cy-gantt {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  padding: 22px;
  overflow: hidden;
}
.cy-gantt__head,
.cy-gantt__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}
.cy-gantt__head { margin-bottom: 8px; }
.cy-gantt__months { display: flex; }
.cy-gantt__month {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-faint);
  border-left: 1px solid var(--hairline);
  padding-left: 4px;
  overflow: hidden;
}
.cy-gantt__body { display: flex; flex-direction: column; position: relative; }
.cy-gantt__row {
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  transition: var(--t-hover);
}
.cy-gantt__row:hover { background: var(--surface-sunk); }
.cy-gantt__name {
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cy-gantt__title {
  font-weight: var(--w-semi);
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong);
}
.cy-gantt__name .cy-mono {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.cy-gantt__track { position: relative; height: 34px; }
.cy-gantt__grid { position: absolute; inset: 0; display: flex; }
.cy-gantt__gridline { flex: 1; border-left: 1px solid var(--hairline); }
.cy-gantt__bar {
  position: absolute;
  top: 6px;
  height: 22px;
  min-width: 10px;
  border: 0;
  border-radius: 3px;
  background: var(--text-strong);
  cursor: pointer;
  padding: 0;
  transform-origin: left center;
  animation: cyGrow 620ms var(--e-out) both;
  transition: var(--t-hover);
}
.cy-gantt__bar:hover { transform: scaleY(1.25); }
.cy-gantt__tag {
  position: absolute;
  top: 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}
.cy-gantt__todaywrap { position: absolute; top: 0; bottom: 0; left: 216px; right: 0; z-index: 2; pointer-events: none; }
.cy-gantt__today { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--text-strong); }
.cy-gantt__todaytag {
  position: absolute;
  top: -2px;
  left: -19px;
  height: 16px;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

/* ── The three table shapes this tool needs ──────────────────────────────── */
.cy-table--expos {
  --cy-cols: minmax(0, 2fr) 1.2fr 1.4fr 0.8fr 0.8fr 90px;
  min-width: 860px;
}
.cy-table--month {
  --cy-cols: 110px minmax(0, 2fr) 1.4fr 1fr 0.7fr 0.7fr;
  min-width: 880px;
  border-top: 1px solid var(--hairline);
}
.cy-table--exhibitors {
  --cy-cols: 30px minmax(0, 2fr) 1.1fr 1.2fr 1fr 0.6fr 0.9fr 96px;
  min-width: 1020px;
}
.cy-table--expos .cy-btn-mono,
.cy-table--exhibitors .cy-btn-mono,
.cy-table--exhibitors .cy-btn { justify-self: start; }

/* ── Month ribbon. The prototype's spine with alternating cards. ─────────── */
.cy-ribbon__scroll {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  overflow-x: auto;
}
.cy-ribbon { position: relative; height: 520px; padding: 0 46px; min-width: 720px; }
.cy-ribbon__spine {
  position: absolute;
  left: 46px;
  right: 46px;
  top: 260px;
  height: 2px;
  background: var(--text-strong);
  transform-origin: left center;
  animation: cyGrow 720ms var(--e-out) both;
}
.cy-ribbon__cap {
  position: absolute;
  top: 255px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-strong);
}
.cy-ribbon__cap--start { left: 40px; }
.cy-ribbon__cap--end { right: 40px; }
.cy-ribbon__nodes { position: absolute; inset: 0; }
.cy-ribbon__slot { position: absolute; top: 0; bottom: 0; }
.cy-ribbon__stem { position: absolute; left: calc(50% - 1px); width: 2px; background: var(--text-strong); }
.cy-ribbon__dot {
  position: absolute;
  top: 254px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-strong);
  border: 3px solid var(--surface-card);
}
.cy-ribbon__tip {
  position: absolute;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--text-strong);
  background: var(--surface-card);
}
.cy-ribbon__day {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.cy-ribbon__card {
  position: absolute;
  left: 6px;
  right: 6px;
  max-height: 158px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 13px;
  cursor: pointer;
  color: var(--text-strong);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: var(--t-base);
}
.cy-ribbon__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.cy-ribbon__name {
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cy-ribbon__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--hairline);
  padding-top: 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-ribbon__go { display: inline-flex; align-items: center; gap: 5px; }

/* ── Card grids: month grid view, the archive, the team ──────────────────── */
.cy-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-4);
}
.cy-expocard {
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 18px;
  cursor: pointer;
  color: var(--text-strong);
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: var(--t-base);
}
.cy-expocard:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.cy-expocard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cy-expocard__ident { min-width: 0; }
.cy-expocard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 11px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* A square avatar — the prototype uses it for expos and companies, and keeps
   the round one for people. */
.cy-avatar--sq { border-radius: var(--r-sm); }

/* ── Expo detail ─────────────────────────────────────────────────────────── */
.cy-expo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: 24px;
}
.cy-expo__ident { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cy-expo__actions { flex: none; display: flex; gap: 10px; }
.cy-expo__cards {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 34px;
}
.cy-linkchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-body);
  max-width: 280px;
  transition: var(--t-hover);
}
.cy-linkchip:hover { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }
.cy-linkchip__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; opacity: .6; }
.cy-linkchip__value {
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The four stat tiles. One hairline grid, so the dividers are the gaps. */
.cy-tilerow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 20px;
}
.cy-tile-stat {
  background: var(--surface-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cy-tile-stat__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-panel__prose { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--text-body); }
.cy-panel__pairs--ruled { border-top: 1px solid var(--hairline); padding-top: 16px; }
.cy-panelcol--ruled { border-top: 1px solid var(--hairline); padding-top: 14px; }

/* Claim. The one control on this screen that changes who owns the work, so it
   is the only one wearing the strong outline outside a page header. */
.cy-btn--claim { border-width: 1.5px; }
.cy-rating--sm { gap: 4px; }
.cy-rating--sm .cy-rating__dot { width: 7px; height: 7px; }

/* ── The archive grid ────────────────────────────────────────────────────── */
.cy-select--sm { height: 34px; font-size: var(--t-micro); }
.cy-cocard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  transition: var(--t-base);
}
.cy-cocard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cy-cocard.is-selected { border-color: var(--border-strong); background: var(--surface-sunk); }
.cy-cocard__open {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cy-cocard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cy-cocard__ident { min-width: 0; }
.cy-cocard__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  min-width: 0;
}
.cy-cocard__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 16px;
  min-width: 0;
}
.cy-cocard__spacer { flex: 1; }

/* ── Company profile ─────────────────────────────────────────────────────── */
.cy-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cy-crumbs__item {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t-hover);
}
.cy-crumbs__item:hover { color: var(--text-strong); }
.cy-crumbs__item.is-current { color: var(--text-strong); cursor: default; }
.cy-crumbs__sep { color: var(--text-faint); }

.cy-co__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cy-co__ident { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cy-co__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-co__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

.cy-nextup {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.cy-nextup__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-nextup__text { min-width: 0; flex: 1; font-size: var(--t-body); font-weight: var(--w-semi); line-height: 1.35; }

.cy-contact {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cy-contact__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cy-contact__name { font-weight: var(--w-semi); font-size: var(--t-small); }

/* ── An outreach lead on the company profile ─────────────────────────────── */
.cy-leadcard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transition: var(--t-base);
}
.cy-leadcard:hover { border-color: var(--border-strong); }
.cy-leadcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cy-leadcard__ident { min-width: 0; flex: 1 1 160px; }
.cy-leadcard__title { font-weight: var(--w-bold); font-size: var(--t-body); overflow-wrap: anywhere; }
.cy-leadcard__value { display: flex; align-items: center; gap: 8px; flex: none; }
.cy-leadcard__money {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-body-lg);
  letter-spacing: var(--ls-tight);
}
.cy-leadcard__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

/* The six-stage strip inside a lead card. Same vocabulary as `.cy-track` in
   the CRM, at half the scale and with the label under each node. */
.cy-strip-track { display: flex; align-items: center; }
.cy-strip-track__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.cy-strip-track__rail { display: flex; align-items: center; width: 100%; height: 12px; }
.cy-strip-track__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  transition: var(--t-base);
}
.cy-strip-track__mark.is-done { background: var(--text-strong); border-color: var(--text-strong); }
.cy-strip-track__mark.is-current {
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 3px solid var(--text-strong);
}
.cy-strip-track__line { flex: 1; height: 2px; background: var(--hairline); margin: 0 3px; }
.cy-strip-track__line.is-solid { background: var(--text-strong); }
.cy-strip-track__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  padding-right: 4px;
}

/* A checklist step or a task. Square box = a stage step, round = a task. */
.cy-checkline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 0;
  cursor: pointer;
  color: var(--text-body);
  transition: var(--t-hover);
}
.cy-checkline:hover { color: var(--text-strong); }
.cy-checkline__box {
  flex: none;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--bg);
}
.cy-checkline__box--round { border-radius: 50%; }
.cy-checkline__box.is-checked { background: var(--text-strong); border-color: var(--text-strong); }
.cy-checkline__stack { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cy-checkline__text { min-width: 0; font-size: var(--t-small); line-height: 1.35; }
.cy-checkline__text.is-done { text-decoration: line-through; color: var(--text-faint); }

.cy-taskbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-top: 4px;
}
.cy-taskbox__row { display: flex; gap: 8px; }
.cy-taskbox__row .cy-btn { flex: none; }
.cy-input--date { flex: 1; min-width: 0; height: 34px; font-family: var(--font-mono); }

.cy-actline { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.cy-actline__text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* ── The outreach board ──────────────────────────────────────────────────── */
.cy-board--outreach { --cy-board-cols: 6; }
.cy-boardcol__head--ruled { border-bottom: 2px solid var(--text-strong); }
.cy-boardcard--lead { display: flex; flex-direction: column; gap: 9px; cursor: default; }
.cy-boardcard__open {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--text-strong);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cy-boardcard__acts { display: flex; gap: 6px; }
.cy-boardcard__acts .cy-btn-mono { flex: 1; justify-content: center; }

/* A field that spans both columns of the modal grid. */
.cy-field--wide { grid-column: 1 / -1; }

.cy-segment--sm .cy-segment__btn { height: 32px; padding: 0 14px; }

.cy-linkbtn--quiet {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.cy-linkbtn--quiet:hover { color: var(--text-strong); }

/* A solid chip — the company profile's industry tag. */
.cy-chip--solid { background: var(--text-strong); color: var(--bg); border-color: var(--text-strong); }

/* The completion form marks the fields the server said were missing. */
.cy-field.is-missing .cy-input { border-color: var(--border-strong); border-width: 1.5px; }
.cy-field.is-missing .cy-field__label { color: var(--text-strong); }

@media (max-width: 1100px) {
  .cy-expo__cards { grid-template-columns: minmax(0, 1fr); }
  .cy-tilerow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cy-expo__head { flex-direction: column; align-items: stretch; }
  .cy-leadcard__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ══ 28 · Projects ══════════════════════════════════════════════════════════
   `design/Projects.dc.html` — backlog 3.4. The board (Cards / Table under a
   Sales / Production lens), the project detail, `By expo`, `By service` and
   the Studio manager desk.

   Almost everything here reuses the component layer: `.cy-panel`, `.cy-track`,
   `.cy-stepper`, `.cy-table`, `.cy-meter`, `.cy-checkline`, `.cy-switch`,
   `.cy-candidate`, `.cy-grant`, `.cy-queuerow`, `.cy-mgrcard`, `.cy-stats`.
   What is below is only what the prototype draws and nothing else already
   drew. No colour outside the token set. */

.cy-pj { display: flex; flex-direction: column; }

/* ── The board's project card ─────────────────────────────────────────────
   `--cy-cols` is set per lens on the table; the card grid is auto-fill at the
   prototype's 340px. */
.cy-pjgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.cy-pjcard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  transition: var(--t-base);
}
.cy-pjcard:hover { box-shadow: var(--shadow-md); }
.cy-pjcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cy-pjcard__ident { min-width: 0; }
.cy-pjcard__ref {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjcard__client {
  margin-top: 5px;
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  line-height: 1.25;
  text-wrap: pretty;
}
.cy-pjcard__expo {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-pjcard__stage {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* A lost job wears the outline, not the fill — status is material, never hue. */
.cy-pjcard__stage.is-lost {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
}
.cy-pjcard__rule {
  border-top: 1px solid var(--hairline);
  padding-top: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.cy-pjcard__metric {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pjcard__metriclabel,
.cy-pjcard__countdown {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjcard__delivery { font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-strong); }
.cy-pjcard__right { text-align: right; }
.cy-pjcard__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-pjcard__prog {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--hairline);
  padding-top: 13px;
}
.cy-pjcard__progtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cy-pjcard__pct { font-family: var(--font-mono); font-size: 9px; color: var(--text-strong); }
.cy-pjcard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 13px;
  margin-top: auto;
}
.cy-pjcard__pm {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overlapping crew avatars. */
.cy-pjcrew { display: flex; align-items: center; }
.cy-pjcrew__dot {
  width: 26px;
  height: 26px;
  margin-right: -6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--bg);
  background: var(--surface-sunk);
  color: var(--text-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
}

/* ── The stage stepper above the board ───────────────────────────────────── */
.cy-pjsteps { margin-bottom: 24px; }
.cy-pjsteps .cy-stepper__value {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* ── Table cells the leads table did not already have ────────────────────── */
.cy-table--pj { min-width: 900px; }
.cy-pjcell {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--text-body);
}
.cy-pjcell--strong { color: var(--text-strong); }
.cy-pjcell__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-table__sort .cy-sortarrow { margin-left: 4px; vertical-align: -1px; }
.cy-table__sort.is-on { color: var(--text-strong); }

/* ── Detail ──────────────────────────────────────────────────────────────── */
.cy-pjhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.cy-pjhead__ident { min-width: 0; }
.cy-pjhead__ref {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjhead__name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  text-wrap: pretty;
}
.cy-pjhead__facts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cy-pjhead__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pjhead__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjhead__note {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.cy-pjcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.cy-pjcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Chip toggles — services, PM, team. Filled = on. */
.cy-toggchip {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-toggchip:hover { border-color: var(--border-strong); color: var(--text-strong); }
.cy-toggchip.is-on {
  border-color: var(--text-strong);
  background: var(--text-strong);
  color: var(--bg);
}
.cy-toggrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Visuals and files. There is no storage backend, so a visual is a named
   placeholder tile, not an image — see the LOG. */
.cy-pjvisuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.cy-pjvisual {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cy-pjfile { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.cy-pjfile__ext {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cy-pjfile__text { flex: 1; min-width: 0; }
.cy-pjfile__name { font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-pjfile__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjrow { display: flex; gap: 10px; border-top: 1px solid var(--hairline); padding-top: 13px; }

/* Milestones. Assignable, so each row carries owner chips. */
.cy-pjcheck { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.cy-pjcheck__box {
  flex: none;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--bg);
}
.cy-pjcheck__box.is-checked { border-color: var(--text-strong); background: var(--text-strong); }
.cy-pjcheck__text { flex: 1; font-size: var(--t-small); color: var(--text-body); line-height: 1.4; }
.cy-pjcheck.is-done .cy-pjcheck__text { color: var(--text-faint); text-decoration: line-through; }
.cy-pjcheck__owners { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cy-pjcheck__owner {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-pjcheck__owner.is-none { color: var(--text-faint); }
.cy-initchip {
  width: 24px;
  height: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  transition: var(--t-hover);
}
.cy-initchip:hover { border-color: var(--text-strong); color: var(--text-strong); }
.cy-initchip.is-on { border-color: var(--text-strong); background: var(--text-strong); color: var(--bg); }
.cy-initchip--lg { width: 26px; height: 26px; }

/* Activity. */
.cy-pjlog { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.cy-pjlog__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-strong); margin-top: 6px; }
.cy-pjlog__text { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--text-body); }
.cy-pjlog__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── By expo / By service ────────────────────────────────────────────────── */
.cy-pjexpo { display: flex; flex-direction: column; gap: 26px; min-width: 740px; }
.cy-pjsvcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cy-pjsvc {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cy-pjsvc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cy-pjsvc__label { font-weight: var(--w-bold); font-size: var(--t-small); line-height: 1.3; text-wrap: pretty; }
.cy-pjsvc__count {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pjsvc__list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.cy-pjsvc__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-pjsvc__row:hover { background: var(--surface-sunk); }
.cy-pjsvc__name { flex: 1; min-width: 0; font-size: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-pjsvc__foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: auto;
}

/* ── The manager strip above the board ───────────────────────────────────── */
.cy-pjstrip {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}

/* ── The desk's Workflow kanban ──────────────────────────────────────────── */
.cy-flow { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.cy-flow__col {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cy-flow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cy-flow__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cy-flow__count { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); }
.cy-flow__card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cy-flow__open { text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; color: var(--text-strong); }
.cy-flow__client { font-size: var(--t-small); font-weight: var(--w-bold); text-wrap: pretty; }
.cy-flow__meta,
.cy-flow__empty {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* A blocker is a rule the row breaks, so it gets the ink bar, not a colour. */
.cy-flow__blocker {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong);
  border-left: 2px solid var(--text-strong);
  padding-left: 7px;
}

/* ── The member report ───────────────────────────────────────────────────── */
.cy-pjreport { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.cy-pjreport__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
.cy-pjreport__value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pjreport__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjjob { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.cy-pjjob__open { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; color: var(--text-strong); }
.cy-pjjob__name { font-size: var(--t-small); font-weight: var(--w-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-pjjob__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjjob__targets { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.cy-pjtask { display: flex; align-items: center; gap: 10px; }
.cy-pjtask__text { flex: 1; min-width: 0; font-size: var(--t-small); }
.cy-pjtask__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pjtask__box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .cy-pjcols { grid-template-columns: minmax(0, 1fr); }
}

/* ══ 29 · Client view ═══════════════════════════════════════════════════════
   `/share/:token`, rendered by `routes/share.js` outside the auth gate. It has
   no shell, no rail and no script. Fixed to the light tokens: it is a document
   sent to a client, and a document does not invert — the same reasoning as
   `.cy-sheet`. */
.cy-pubbody { background: var(--bg); }
.cy-pub {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 84px) clamp(20px, 5vw, 64px) 96px;
  display: flex;
  flex-direction: column;
}
.cy-pub--notice { gap: 20px; align-items: flex-start; }
.cy-pub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 6vw, 64px);
}
.cy-pub__mark { height: 17px; width: auto; display: block; }
.cy-pub__ref,
.cy-pub__expoline {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__expoline { letter-spacing: 0.18em; color: var(--text-muted); }
.cy-pub__client {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  letter-spacing: var(--ls-tight);
  line-height: 0.9;
  text-wrap: pretty;
}
.cy-pub__summary {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  text-wrap: pretty;
}
.cy-pub__notshare {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: clamp(32px, 5vw, 52px) 0 0;
}
.cy-pub__stat { background: var(--bg); padding: 20px 18px; min-width: 0; }
.cy-pub__statvalue {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pub__statlabel,
.cy-pub__meta {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__section { margin-top: clamp(40px, 6vw, 68px); }
.cy-pub__sectionhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--text-strong);
}
.cy-pub__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pub__meta { margin: 0 0 0 auto; color: var(--text-muted); }
.cy-pub__none { margin: 20px 0 0; font-size: var(--t-small); color: var(--text-muted); }

.cy-pub__strip { display: flex; align-items: flex-start; margin-top: 22px; }
.cy-pubstep { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cy-pubstep__row { display: flex; align-items: center; height: 16px; width: 100%; }
.cy-pubstep__dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
}
.cy-pubstep.is-done .cy-pubstep__dot { background: var(--text-strong); border-color: var(--text-strong); }
.cy-pubstep.is-current .cy-pubstep__dot {
  width: 15px;
  height: 15px;
  background: var(--bg);
  border: 4px solid var(--text-strong);
}
.cy-pubstep__line { flex: 1; height: 2px; background: var(--hairline); margin: 0 4px; }
.cy-pubstep__line.is-solid { background: var(--text-strong); }
.cy-pubstep__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-right: 8px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.cy-pubstep.is-current .cy-pubstep__label { color: var(--text-strong); font-weight: var(--w-semi); }

.cy-pub__visuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.cy-pub__visual {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  background: var(--surface-sunk);
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
}
.cy-pub__visualname {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cy-pub__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.cy-pub__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--text-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.cy-pub__checks { display: flex; flex-direction: column; margin-top: 6px; }
.cy-pub__check { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.cy-pub__box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--bg);
}
.cy-pub__check.is-done .cy-pub__box { background: var(--text-strong); border-color: var(--text-strong); }
.cy-pub__checktext { flex: 1; font-size: var(--t-body); color: var(--text-strong); }
.cy-pub__check.is-done .cy-pub__checktext { color: var(--text-faint); }
.cy-pub__checkstate {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__pm {
  margin-top: clamp(40px, 6vw, 68px);
  border: 1px solid var(--border-strong);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cy-pub__pmtext { min-width: 0; }
.cy-pub__pmlabel {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__pmname {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-pub__pmmeta { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--text-muted); }
.cy-pub__pmavatar {
  margin-left: auto;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--w-semi);
}
.cy-pub__foot {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cy-pub__footline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pub__footline + .cy-pub__footline { margin-left: auto; letter-spacing: 0.1em; }

/* ══ 30 · User Management ═══════════════════════════════════════════════════
   `design/User Management.dc.html`. Three sections — Users, Roles, Reporting —
   and one editor. The editor is a **centred 680px overlay panel**, not a side
   drawer: `.cy-overlay--top` + `.cy-modal--md`, exactly what the prototype
   builds at line 333. `.cy-drawer` above stays unused.

   Almost everything here is already in the component layer: `.cy-search`,
   `.cy-pill`, `.cy-table`, `.cy-chip`, `.cy-grant`, `.cy-candidate`,
   `.cy-toggle`, `.cy-switch`, `.cy-minipill`. What follows is only the parts
   the prototype draws and nothing else had. */

/* A stack of small cards pinned to the bottom of the sub-rail. `.cy-railcard`
   carries its own `margin-top:auto`, which only lifts the first of several. */
/* Every section in these two tools is one column. */
.cy-view { display: flex; flex-direction: column; }

.cy-railstack { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cy-rolecard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 13px 14px;
  background: var(--surface-sunk);
}
.cy-rolecard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cy-rolecard__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-rolecard__count {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.cy-rolecard__meta {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The 34px filled initials circle in the users table. `--sm` is the 28px
   outlined one the audit log uses; `--lg` is the 64px square. */
.cy-avatar--md { width: 34px; height: 34px; font-size: 10px; }

.cy-um__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cy-um__tools { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.cy-um__note {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: var(--t-small);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* `.cy-table`'s own min-width is 800px; these five columns need 860 before the
   tool chips start wrapping into two rows. */
.cy-table--users {
  --cy-cols: minmax(200px, 1.7fr) minmax(120px, auto) minmax(230px, 1.2fr) minmax(90px, auto) minmax(80px, auto);
  min-width: 860px;
}
/* API tokens. Six columns — the last one holds `Revoke` and has no header, so
   the head row carries an empty `<span>` rather than a shorter grid. */
.cy-table--tokens {
  --cy-cols: minmax(170px, 1fr) minmax(210px, 1.2fr) minmax(240px, 1.4fr) minmax(110px, auto) minmax(80px, auto) minmax(70px, auto);
  min-width: 980px;
}
/* An email is longer than its column and `.cy-cell` is a flex column, which
   does not shrink its children by default — without this the address runs
   under the scope chips in the next cell. */
.cy-table--tokens .cy-cell { min-width: 0; }
/* `.cy-cell__muted` already asks for an ellipsis, but it is a `<span>` — and
   `overflow` does nothing to an inline box, so the address just ran on under
   the scope chips. Everywhere else that cell has room; here it does not. */
.cy-table--tokens .cy-cell__muted { display: block; max-width: 100%; }

/* Webhook subscriptions. Same six-column shape as the tokens table, and the
   last column holds three link controls rather than one, so it is wider. */
.cy-table--hooks {
  --cy-cols: minmax(220px, 1.5fr) minmax(200px, 1.2fr) minmax(150px, 1fr) minmax(100px, auto) minmax(80px, auto) minmax(150px, auto);
  min-width: 1040px;
}
.cy-table--hooks .cy-cell { min-width: 0; }
.cy-table--hooks .cy-cell__muted { display: block; max-width: 100%; }

/* Delivery attempts. `Response` is a status code or the reason there was not
   one, which is why it is a two-line cell and not a number. */
.cy-table--deliveries {
  --cy-cols: minmax(130px, auto) minmax(220px, 1.5fr) minmax(70px, auto) minmax(160px, 1fr) minmax(90px, auto) minmax(70px, auto);
  min-width: 980px;
}
.cy-table--deliveries .cy-cell { min-width: 0; }
.cy-table--deliveries .cy-cell__muted { display: block; max-width: 100%; }

/* Edit · Disable · Delete, in the last column. */
.cy-um__rowacts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* `Recent deliveries`, over the second table on the webhooks screen. */
.cy-um__subhead { margin-top: 32px; margin-bottom: 12px; }

/* The event picker. Forty-odd actions, so it scrolls inside the panel rather
   than pushing the footer off the bottom of a modal. */
.cy-hookevents {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cy-hookevents .cy-toolrow { padding: 8px 14px; }
.cy-hookevents__group {
  position: sticky;
  top: 0;
  padding: 8px 14px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The role pill is filled, not outlined — it is the one fact the row asserts.
   `.cy-chip` is the outlined tool tag next to it. */
.cy-um__rolepill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cy-um__status {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
/* Suspended is the quieter of the two — faint, never a colour. */
.cy-um__status--off { color: var(--text-faint); }

/* Roles matrix — role rows × the seven tools. The 1px gap on a `--border`
   background is what draws the grid lines. */
.cy-matrix {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(var(--cy-matrix-cols, 7), minmax(74px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  min-width: 720px;
}
.cy-matrix__head {
  background: var(--surface-sunk);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  overflow-wrap: anywhere;
}
.cy-matrix__head--role { text-align: left; letter-spacing: 0.12em; }
.cy-matrix__role { background: var(--bg); padding: 16px 14px; min-width: 0; }
.cy-matrix__name { font-weight: var(--w-bold); font-size: var(--t-small); }
.cy-matrix__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-matrix__cell { background: var(--bg); padding: 16px 10px; display: grid; place-items: center; }
/* Filled = the role opens it. Outlined = it does not. Never a colour. */
.cy-matrix__box {
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hairline);
}
.cy-matrix__box.is-on {
  border: 0;
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
}

/* ── The editor ─────────────────────────────────────────────────────────── */
/* The one child of `.cy-modal__body`, so the blocks below space themselves. */
.cy-editor { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cy-editor__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cy-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cy-editor__block { display: flex; flex-direction: column; gap: 10px; }
.cy-editor__blockhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Bare mono control — `Reset to role default`. */
.cy-linkmono {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--t-hover);
}
.cy-linkmono:hover { color: var(--text-strong); }

/* Role radios — a stack of outlined cards, the picked one on a 1.5px ink
   border with a ringed dot. */
.cy-roleopt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-roleopt:hover { border-color: var(--border-strong); background: var(--surface-sunk); }
.cy-roleopt.is-active {
  border: 1.5px solid var(--text-strong);
  background: var(--surface-sunk);
}
.cy-roleopt__dot {
  flex: none;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.cy-roleopt.is-active .cy-roleopt__dot { border: 5px solid var(--text-strong); background: var(--bg); }
.cy-roleopt__text { min-width: 0; }
.cy-roleopt__label { display: block; font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-roleopt.is-active .cy-roleopt__label { font-weight: var(--w-bold); }
.cy-roleopt__desc {
  display: block;
  margin-top: 3px;
  font-size: var(--t-small);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Tool access rows. */
.cy-toollist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cy-toolrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cy-toolrow:last-child { border-bottom: 0; }
.cy-toolrow__label { flex: 1; min-width: 0; font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-toolbox {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  color: transparent;
}
.cy-toolbox.is-on { border: 0; background: var(--text-strong); color: var(--bg); }
.cy-toolrow__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-toolrow__tag--granted { color: var(--text-strong); font-weight: var(--w-semi); }

/* The editor's footer runs Reset password / Suspend on the left and
   Cancel / Save on the right; this is the gap between them. `.cy-modal__foot`
   already lifts a leading `.cy-btn`, which is the invite case where the two
   left-hand controls are not drawn. */
.cy-editor__spacer { margin-left: auto; }

/* The banner shown after a password is set from the editor. */
.cy-editor__done {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--text-strong);
  border-radius: var(--r-sm);
  padding: 13px 14px;
}
.cy-editor__donemark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
}
.cy-editor__donetext { flex: 1; min-width: 0; }
.cy-editor__donetitle { font-size: var(--t-small); font-weight: var(--w-semi); }
/* The generated password. It is read off the screen and typed back in, so it
   must NOT go in a `.cy-mono` — that uppercases, and the password is lower
   case. Same trap as any credential shown in a mono style. */
.cy-editor__secret {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--font-mono);
  font-size: var(--t-body);
  letter-spacing: 0.14em;
  color: var(--text-strong);
  word-break: break-all;
  user-select: all;
}

/* ══ 31 · Audit & Reports ═══════════════════════════════════════════════════
   `design/Audit Reports.dc.html`. The log is grouped by day; the four reports
   are one A4 sheet (§ 18) driven by one payload shape, rendered by one
   function — `cySheetHtml()` in `views-audit.js`, which User Management's
   Reporting tab calls too. */

/* Two-line sub-rail item — label over a mono meta line. */
.cy-navitem--two {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.cy-navitem--two .cy-navitem__label {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cy-navitem__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-navitem.is-active .cy-navitem__meta { color: inherit; opacity: .7; }

.cy-audit { min-width: 820px; }
.cy-audit__day { margin-bottom: 22px; }
.cy-audit__dayhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--text-strong);
  margin-bottom: 2px;
}
.cy-audit__row {
  display: grid;
  grid-template-columns: 62px minmax(150px, 1fr) minmax(120px, auto) minmax(200px, 1.5fr) minmax(80px, auto);
  gap: 14px;
  align-items: start;
  padding: 13px 8px;
  border-bottom: 1px solid var(--hairline);
}
.cy-audit__time {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding-top: 2px;
}
.cy-audit__actor { min-width: 0; display: flex; align-items: center; gap: 10px; }
.cy-audit__name {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-audit__role {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* The action key, verbatim, in a mono chip. */
.cy-audit__action {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: var(--surface-sunk);
  padding: 4px 8px;
  white-space: nowrap;
}
.cy-audit__detail {
  display: block;
  font-size: var(--t-small);
  color: var(--text-body);
  line-height: 1.45;
  text-wrap: pretty;
}
.cy-audit__record {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* A flagged event names its tool in solid ink; everything else whispers it. */
.cy-audit__tool {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.cy-audit__tool.is-flagged {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
}

/* The prototype's sheet footer is one centred line. css-demo.html uses the
   two-span form, so this is a modifier rather than a change to the base. */
.cy-sheet__foot--center { justify-content: center; text-align: center; }

/* The sheet's own wordmark. Loaded as an <img>, so it is always the black
   mark — the sheet is white paper in both themes. */
.cy-sheet__mark { height: 14px; display: block; margin-bottom: 12px; }

/* ══ 32 · Team Chat ═════════════════════════════════════════════════════════
   `public/js/views-team.js` on `#team`, built to the `chat` screen inside
   `design/Unified Login Portal.dc.html`. Conversations live in the shell's
   sub-rail — every other tool puts its nav there and this one is a nav — and
   the thread fills `<main>`.

   Own messages invert. The prototype hardcodes `#000` / `#fff` for that; here
   it is `--text-strong` on `--bg`, which is the same thing on light and is
   still right on dark. No hue anywhere: unread is a filled pill, presence is a
   filled dot, and the rest is fill, outline and hairline. */

/* The unread count on rail item 05. Injected by `App.paintTeamBadge()` and
   removed outright at zero rather than hidden, so it needs no `[hidden]` rule. */
.cy-tool__badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  letter-spacing: 0.02em;
}
.cy-shell.is-rail-closed .cy-tool__badge { display: none; }

/* ── A conversation row in the sub-rail ─────────────────────────────────── */
.cy-conv {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: var(--t-hover);
}
.cy-conv:hover { background: var(--surface-sunk); }
.cy-conv.is-active {
  background: var(--surface-sunk);
  border-left-color: var(--text-strong);
}
.cy-conv__col { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cy-conv__name {
  font-weight: var(--w-semi);
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-conv__preview {
  font-size: var(--t-micro);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-conv__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* The avatar carries the presence dot, so the dot is positioned against it. */
.cy-conv__av {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
}
.cy-conv.is-active .cy-conv__av { background: var(--bg); }
.cy-conv__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  border: 2px solid var(--surface);
}
.cy-conv__badge {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--text-strong);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
}
.cy-conv__none {
  margin: 0 0 6px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-subrail__group--gap { padding-top: 18px; }

/* ── The thread pane ────────────────────────────────────────────────────── */
.cy-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.cy-chat__blank { display: grid; place-items: center; height: 100%; }
.cy-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(18px, 3vw, 32px);
  border-bottom: 1px solid var(--hairline);
}
.cy-chat__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cy-chat__name {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 1.25rem;
  letter-spacing: var(--ls-tight);
}
.cy-chat__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-chat__msgs {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 26px clamp(18px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Drag a file anywhere over the transcript. Outline only — no fill, so the
   messages underneath stay readable while the file is in the air. */
.cy-chat__msgs.is-dropping {
  outline: 1.5px dashed var(--border-strong);
  outline-offset: -10px;
}

/* ── One message ────────────────────────────────────────────────────────── */
.cy-msg { display: flex; gap: 12px; max-width: 640px; align-self: flex-start; }
.cy-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.cy-msg.is-pending { opacity: .55; }
.cy-msg__av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-strong);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--w-semi);
}
.cy-msg.is-mine .cy-msg__av {
  background: var(--text-strong);
  color: var(--bg);
  border-color: var(--text-strong);
}
.cy-msg__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.cy-msg.is-mine .cy-msg__col { align-items: flex-end; }
.cy-msg__who {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-msg__bubble {
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  color: var(--text-strong);
  font-size: var(--t-small);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cy-msg.is-mine .cy-msg__bubble {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--bg);
}

/* ── A file on a message ────────────────────────────────────────────────── */
.cy-filecard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  color: var(--text-strong);
  text-decoration: none;
  transition: var(--t-hover);
}
.cy-filecard:hover { border-color: var(--text-strong); }
.cy-filecard__ext {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-filecard__col { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cy-filecard__name {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-filecard__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Typing strip and composer ──────────────────────────────────────────── */
/* Fixed height, so an indicator arriving does not shove the transcript. */
.cy-chat__typing {
  height: 16px;
  padding: 0 clamp(18px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-chat__composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px clamp(18px, 3vw, 32px) 16px;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.cy-chat__row { display: flex; gap: 10px; align-items: center; }
/* The input and its `@` popover share one positioned box. */
.cy-chat__field { position: relative; flex: 1; min-width: 0; display: flex; }
.cy-chat__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-body);
  outline: none;
  transition: var(--t-hover);
}
.cy-chat__input:focus { border-color: var(--text-strong); }
.cy-chat__send { height: 48px; padding: 0 24px; }
.cy-clip {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--t-hover);
}
.cy-clip:hover { border-color: var(--text-strong); color: var(--text-strong); }

.cy-chat__pend { display: flex; flex-wrap: wrap; gap: 8px; }
.cy-pendfile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  font-size: var(--t-small);
}
.cy-pendfile__ext {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-pendfile__name {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* `×` is U+00D7 and is in the vendored latin subset; `✕` is not. */
.cy-pendfile__x {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: var(--t-hover);
}
.cy-pendfile__x:hover { background: var(--surface-sunk); color: var(--text-strong); }

/* ── Mentions ─────────────────────────────────────────────────────────────
   Monochrome, so being named cannot be a colour. In the transcript a mention
   is a boxed pill; when it is *you*, the pill inverts — the same fill that
   marks your own messages, now marking the word that is about you. Inside an
   inverted bubble the whole thing flips again, or a white-on-white pill would
   vanish. The badge distinction is `@` plus a ring, on the rail and on the
   conversation row alike. */
.cy-mention {
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.cy-mention.is-you {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--bg);
}
.cy-msg.is-mine .cy-mention { border-color: var(--bg); }
.cy-msg.is-mine .cy-mention.is-you { background: var(--bg); color: var(--text-strong); }

/* `@3` — three waiting, one of them names you. */
.cy-tool__badge.is-mention,
.cy-conv__badge.is-mention {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text-strong);
}

/* The `@` picker. Opens upward from the composer, which is already at the
   bottom of the screen. It needs its own `[hidden]` rule: the display below
   outranks the UA sheet's. */
.cy-mentionpick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  max-height: 236px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cy-mentionpick[hidden] { display: none; }
.cy-mentionpick__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-small);
  transition: var(--t-hover);
}
.cy-mentionpick__row:hover { background: var(--surface-sunk); }
.cy-mentionpick__row.is-active { background: var(--text-strong); color: var(--bg); }
.cy-mentionpick__av {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.cy-mentionpick__row.is-active .cy-mentionpick__av { border-color: var(--bg); }
.cy-mentionpick__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--w-semi);
}
.cy-mentionpick__role {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Print ────────────────────────────────────────────────────────────────
   § 18's @media print hides `[data-print="hide"]` and flattens the shell, but
   `#toasts` and the sub-rail's scroll box are not marked in the markup, so
   they are named here. Verified against a real PDF, not assumed. */
@media print {
  #toasts,
  .cy-rail,
  .cy-subrail,
  .cy-header { display: none !important; }
  .cy-main { height: auto !important; overflow: visible !important; }
  .cy-scrollx { overflow: visible !important; }
}

/* ══ 33 · AI Chat ═══════════════════════════════════════════════════════════
   `public/js/views-chat.js` on `#ai`, built to `design/AI Chat.dc.html`.

   Two rules from the prototype are load-bearing here. The composer is docked
   below a single scrolling stage, so the transcript scrolls and the input does
   not move; and every piece of status is fill, outline or dashed — the old
   Next.js screen it replaces gave each pipeline stage its own hue, which the
   brand does not have. `.cy-stagepill` is the monochrome answer, and it sits
   *beside* the cell's text rather than replacing it. */

.cy-ai {
  height: calc(100vh - var(--cy-header-h));
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── The stage ──────────────────────────────────────────────────────────── */
.cy-ai__stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 28px clamp(20px, 4vw, 40px);
}
.cy-ai__stage--empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px clamp(20px, 4vw, 40px);
}
.cy-ai__hero { max-width: 720px; margin: 0 auto; width: 100%; }
.cy-ai__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-ai__h1 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: 0.95;
  text-wrap: pretty;
}
.cy-ai__lede {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--text-body);
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
}

/* Starter cards. Read-only on purpose — they are examples of what to ask, not
   buttons; see the comment on `AI_STARTERS`. No hover lift, because nothing
   here is clickable and a lift would promise otherwise. */
.cy-ai__starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 32px;
}
.cy-starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  color: var(--text-strong);
  padding: 16px;
}
.cy-starter__kind {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-starter__label { font-size: var(--t-small); line-height: 1.4; text-wrap: pretty; }

/* ── The transcript ─────────────────────────────────────────────────────── */
.cy-ai__thread {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cy-ai__msg { display: flex; gap: 14px; scroll-margin-top: 24px; }
.cy-ai__msg.is-mine { flex-direction: column; align-items: flex-end; gap: 8px; }
.cy-ai__msg.is-hit .cy-ai__bubble,
.cy-ai__msg.is-hit .cy-md { outline: 1.5px solid var(--text-strong); outline-offset: 6px; }

.cy-ai__av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.cy-ai__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Own turn: inverted, right-aligned. `--text-strong` on `--bg` rather than the
   prototype's hardcoded black and white, so it is still right in dark. */
.cy-ai__bubble {
  max-width: 78%;
  border-radius: var(--r-md);
  background: var(--text-strong);
  color: var(--bg);
  padding: 14px 16px;
  font-size: var(--t-body);
  line-height: 1.5;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.cy-ai__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-ai__act {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-ai__act:hover { color: var(--text-strong); }
.cy-ai__act.is-on { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* A turn the gateway never answered. Dashed, because it is neither done nor
   in flight — and it is on screen at all so the transcript does not silently
   drop a question that was asked. */
.cy-ai__failed,
.cy-ai__partial {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-ai__partial { align-self: flex-start; }

.cy-ai__by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cy-ai__bylabel {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-agentpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 9px 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.cy-agentpill__code {
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: var(--text-strong);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: var(--w-semi);
}

/* The per-message `Source` row (6.2). Same geometry as the prototype's:
   hairline, sunk fill, mono 8px caps — quieter than the agent pill above it,
   because a source is a citation and not an author. */
.cy-ai__src {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.cy-srcpill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The three-dot wait, from the prototype. */
.cy-ai__think { display: flex; align-items: center; gap: 5px; }
.cy-ai__think > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: cyBlink 1s var(--e-in-out) infinite;
}
.cy-ai__think > i:nth-child(2) { animation-delay: .2s; }
.cy-ai__think > i:nth-child(3) { animation-delay: .4s; }

.cy-ai__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cy-chip {
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-chip:hover { border-color: var(--text-strong); color: var(--text-strong); }
.cy-ai__tail { height: 4px; }

/* Editing the last question in place. */
.cy-ai__edit { width: 78%; display: flex; flex-direction: column; gap: 8px; }
.cy-ai__editin {
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}
.cy-ai__editbtns { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* ── Rendered markdown ──────────────────────────────────────────────────── */
.cy-md { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--text-body); }
.cy-md > *:first-child { margin-top: 0; }
.cy-md > *:last-child  { margin-bottom: 0; }
.cy-md p { margin: 0 0 10px; text-wrap: pretty; }
.cy-md h1, .cy-md h2, .cy-md h3, .cy-md h4 {
  color: var(--text-strong);
  font-weight: var(--w-semi);
  margin: 18px 0 8px;
  text-wrap: pretty;
}
.cy-md h1 { font-size: var(--t-body-lg); }
.cy-md h2 { font-size: var(--t-body); border-bottom: 1px solid var(--hairline); padding-bottom: 5px; }
.cy-md h3 { font-size: var(--t-small); }
.cy-md strong { color: var(--text-strong); font-weight: var(--w-semi); }
.cy-md em { color: var(--text-muted); }
.cy-md ul, .cy-md ol { margin: 0 0 10px; padding-left: 20px; }
.cy-md li { margin-bottom: 5px; }
.cy-md a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.cy-md hr { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0; }
.cy-md blockquote {
  margin: 0 0 10px;
  padding: 2px 0 2px 13px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-muted);
}
.cy-md code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-sunk);
  color: var(--text-strong);
}
.cy-md pre {
  margin: 0 0 10px;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  overflow-x: auto;
}
.cy-md pre code { background: transparent; padding: 0; }

/* A model table. Wide ones scroll inside themselves — `aiMarkdown()` wraps
   every table in `.cy-aitable` for exactly this. */
.cy-aitable {
  margin: 0 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-card);
  overflow-x: auto;
}
.cy-md table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.cy-md thead { background: var(--surface-sunk); }
.cy-md th {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.cy-md td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-body);
  vertical-align: top;
}
.cy-md tbody tr:last-child td { border-bottom: 0; }

/* The stage word, badged where it stands. Outline, never a hue. */
.cy-stagepill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
  white-space: nowrap;
}

/* The system prompt's four status prefixes, monochrome. Fill is done, outline
   is attention, dashed is moving, and `new` is an outline plus. */
.cy-aimark {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  border-radius: var(--r-xs);
  vertical-align: -3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--w-semi);
  line-height: 1;
}
/* Any other emoji the model writes. Not removed — they are its words — but
   desaturated, because the brand has no hues and a system emoji font does.
   A filter on an inline span costs nothing and cannot leak onto the layout. */
.cy-emoji { filter: grayscale(1); }
.cy-aimark--done { background: var(--text-strong); color: var(--bg); }
.cy-aimark--warn { border: 1.5px solid var(--text-strong); color: var(--text-strong); }
.cy-aimark--live { border: 1px dashed var(--border-strong); color: var(--text-muted); }
.cy-aimark--new  { border: 1px solid var(--border-strong); color: var(--text-muted); }

/* ── The dock ───────────────────────────────────────────────────────────── */
.cy-ai__dock {
  flex: none;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  padding: 16px clamp(20px, 4vw, 40px) 22px;
}
.cy-ai__dockin {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cy-ai__composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 10px 10px 10px 14px;
}
.cy-ai__input {
  flex: 1;
  min-height: 26px;
  max-height: 140px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  padding: 4px 0;
  outline: none;
  resize: none;
}
.cy-ai__send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--t-hover);
}
.cy-ai__send:hover { opacity: .85; }
.cy-ai__stop {
  flex: none;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-ai__stop:hover { background: var(--surface-sunk); }

.cy-ai__scopes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cy-ai__scopelabel,
.cy-ai__note {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-ai__note { margin-left: auto; letter-spacing: 0.1em; }
.cy-scopepill {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-scopepill:hover { border-color: var(--border-strong); color: var(--text-strong); }
.cy-scopepill.is-active {
  border-color: var(--text-strong);
  background: var(--text-strong);
  color: var(--bg);
}

/* ── The slash menu ─────────────────────────────────────────────────────── */
.cy-slash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.cy-slash[hidden] { display: none; }
.cy-slash__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cy-slash__row:last-child { border-bottom: 0; }
.cy-slash__row:hover,
.cy-slash__row.is-active { background: var(--text-strong); color: var(--bg); }
.cy-slash__cmd {
  flex: none;
  width: 88px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cy-slash__row:hover .cy-slash__cmd,
.cy-slash__row.is-active .cy-slash__cmd { color: var(--bg); opacity: .8; }
.cy-slash__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cy-slash__label { font-size: var(--t-small); font-weight: var(--w-semi); }
.cy-slash__desc { font-size: var(--t-caption); color: var(--text-muted); }
.cy-slash__row:hover .cy-slash__desc,
.cy-slash__row.is-active .cy-slash__desc { color: var(--bg); opacity: .75; }

/* ── Sub-rail: New chat, search, threads, fleet, connected ──────────────── */
.cy-newchat {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--action-bg);
  color: var(--action-fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: var(--t-hover);
}
.cy-newchat:hover { background: var(--action-bg-hover); }
.cy-newchat__plus { font-size: 15px; line-height: 1; }

.cy-railsearch { flex: none; display: block; margin-bottom: 12px; }
.cy-railsearch__input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--t-small);
  outline: none;
}
.cy-railsearch__input:focus { border-color: var(--text-strong); }

.cy-ai__threads {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cy-thread {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
  color: var(--text-body);
  font-family: inherit;
  transition: var(--t-hover);
}
.cy-thread:hover { background: var(--surface-sunk); }
.cy-thread.is-active { background: var(--text-strong); color: var(--bg); }
.cy-thread__title {
  width: 100%;
  font-size: var(--t-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-thread.is-active .cy-thread__title { font-weight: var(--w-semi); }
.cy-thread__meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-thread.is-active .cy-thread__meta { color: inherit; opacity: .7; }
.cy-thread__hit {
  width: 100%;
  font-size: var(--t-caption);
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The Agent fleet. Eleven personas in one system prompt — there is no on/off
   here and no telemetry, because nothing on this side can start, stop or
   measure a paragraph of a prompt. `Used` is derived from the reply's own text
   the same way the follow-up chips are. */
.cy-fleet {
  flex: none;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.cy-fleet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cy-fleet__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cy-fleet__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-fleet__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
}
.cy-fleet__legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint);
}
.cy-fleet__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}
.cy-fleet__dot.is-on { background: var(--text-strong); border-color: var(--text-strong); }
.cy-fleet__legend .cy-fleet__dot + .cy-fleet__dot { margin-left: 4px; }
.cy-fleet__toggle {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
}
.cy-fleet__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  max-height: min(280px, 38vh);
  overflow: auto;
}
.cy-fleet__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px;
  border-bottom: 1px solid var(--hairline);
}
.cy-fleet__code {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  color: var(--text-faint);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
}
.cy-fleet__code.is-on {
  border: 1.5px solid var(--text-strong);
  color: var(--text-strong);
  font-weight: var(--w-semi);
}
.cy-fleet__name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-fleet__used {
  flex: none;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: var(--w-semi);
}
.cy-fleet__note {
  margin: 0;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cy-connected {
  flex: none;
  margin-top: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 15px;
  background: var(--surface-sunk);
}
.cy-connected__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cy-connected__list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.cy-connected__row { display: flex; align-items: center; gap: 8px; }
.cy-connected__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-strong);
}
.cy-connected__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cy-connected__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
}

/* The help panel's key list. */
.cy-keys { display: flex; flex-direction: column; gap: 2px; }
.cy-keys__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.cy-keys__row:last-child { border-bottom: 0; }
.cy-keys__k { flex: none; width: 140px; display: flex; align-items: center; gap: 4px; }
.cy-keys__k kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-strong);
}
.cy-keys__d { flex: 1; font-size: var(--t-small); color: var(--text-body); }

@media (prefers-reduced-motion: reduce) {
  .cy-ai__think > i { animation: none !important; }
}

/* The dock and the sub-rail are chrome; a printed transcript is the document. */
@media print {
  .cy-ai__dock { display: none !important; }
  .cy-ai,
  .cy-ai__stage { height: auto !important; overflow: visible !important; }
}

/* ── § 34 Destructive actions ───────────────────────────────────────────────
   The system is monochrome, so "dangerous" cannot be signalled with red. It is
   carried by inversion instead: the confirm button is solid black where every
   other confirm is an outline, which makes it the heaviest thing in the dialog
   and impossible to hit by muscle memory looking for Cancel. The Delete that
   opens the dialog stays quiet — it is the second press that destroys, and only
   that one should feel loud. */
.cy-btn--danger {
  border-color: var(--border-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cy-btn--danger:hover { background: var(--action-bg); color: var(--action-fg); }

.cy-modal .cy-btn--danger {
  background: var(--action-bg);
  color: var(--action-fg);
  border-color: var(--border-strong);
  text-decoration: none;
}
.cy-modal .cy-btn--danger:hover { opacity: .85; }
.cy-modal .cy-btn--danger[disabled] { opacity: .45; pointer-events: none; }

/* The impact table: what this action will actually destroy, counted. */
.cy-kv { width: 100%; border-collapse: collapse; margin: 4px 0 2px; }
.cy-kv__k,
.cy-kv__v {
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  vertical-align: baseline;
}
.cy-kv__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cy-kv__v { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.cy-kv__v--ok { opacity: .55; }

/* `.cy-note` already exists in § 12 and is reused here as-is — redefining it
   at the bottom of the file would silently restyle every note in the app. */

/* The "create it" row at the foot of a picker that found nothing. Dashed rather
   than solid, because it is an offer to make something rather than one of the
   results — the difference should be visible before it is read. */
.cy-picker__row--create {
  border-top: 1px dashed var(--border-strong);
  font-style: normal;
}
.cy-picker__row--create .cy-picker__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cy-picker__row--create[disabled] { opacity: .5; pointer-events: none; }

/* ══ § 35 Narrow laptops ═════════════════════════════════════════════════════
   The shell spends 236px on the tool rail and 244px on the sub-rail — 480px of
   chrome before a single lead appears. On a 1920px desktop that is fine. On the
   1366×768 laptops most of the team actually carry it leaves 886px, and the CRM
   table, the eight-column board and the A4 report sheets were all measured
   against more than that.

   So the rails give way before the content does. Two steps rather than one,
   because they are not equally valuable: the sub-rail is per-tool navigation a
   salesperson uses a few times an hour, while the tool rail is how you know
   where you are. The sub-rail goes first.

   These rules set the *widths*; `app.js` mirrors them so the toggle buttons
   still read correctly and the user can override at any size. Keep the numbers
   in the two files the same — they are one decision written twice, and the
   comment in `App.autoCollapse()` says so too. */

/* Step one — 1400px. A 1366 laptop lands here on open. */
@media (max-width: 1400px) {
  .cy-shell { --cy-subrail-w: var(--cy-subrail-w-closed); }
  .cy-shell:not(.is-subrail-open) .cy-subrail__body,
  .cy-shell:not(.is-subrail-open) .cy-subrail__label { display: none; }
  /* Give the reclaimed space to the content rather than the gutters. */
  .cy-main { padding-left: clamp(16px, 2.4vw, 28px); padding-right: clamp(16px, 2.4vw, 28px); }
}

/* Step two — 1180px. Both rails become icon strips: 128px of chrome, not 480. */
@media (max-width: 1180px) {
  .cy-shell { --cy-rail-w: var(--cy-rail-w-closed); }
  .cy-shell:not(.is-rail-open) .cy-tool__label,
  .cy-shell:not(.is-rail-open) .cy-rail__head .cy-rail__label { display: none; }
  /* The wordmark and the tool name compete for the same row once the rail
     stops naming the tool. The vertical rule between them goes; both stay. */
  .cy-divider-v { display: none; }
}

/* Pin each child to its own column.
 *
 * Without this, taking a rail out of flow to overlay it collapses the layout:
 * the grid still defines three columns, but only two items remain, so `.cy-main`
 * slides left into the 64px strip the sub-rail used to occupy and the content
 * area becomes 64 pixels wide. Naming the columns means a floated rail simply
 * leaves its slot empty — which is what the strip underneath is for.
 *
 * `--norail` is the launcher, which has two columns and no sub-rail. */
.cy-shell > .cy-rail    { grid-column: 1; }
.cy-shell > .cy-subrail { grid-column: 2; }
.cy-shell > .cy-main    { grid-column: 3; }
.cy-shell--norail > .cy-main { grid-column: 2; }

/* A rail the user deliberately opens on a narrow screen overlays the content
   instead of squeezing it — squeezing is what made it collapse in the first
   place, so re-expanding in place would undo the fix.

   Each overlay lives at the same breakpoint as the collapse it undoes. The
   first version put both at 1180px, which meant that on a 1366 laptop — where
   the sub-rail *is* collapsed — pressing its toggle did nothing at all. */
.cy-rail--float,
.cy-subrail--float {
  position: fixed;
  top: var(--cy-header-h);
  bottom: 0;
  z-index: 40;
  width: 236px;
  box-shadow: 18px 0 40px -28px rgba(0, 0, 0, 0.45);
  background: var(--surface);
  overflow-y: auto;
}

@media (max-width: 1400px) {
  .cy-shell.is-subrail-open .cy-subrail {
    position: fixed;
    top: var(--cy-header-h);
    bottom: 0;
    left: var(--cy-rail-w);
    z-index: 40;
    width: 244px;
    box-shadow: 18px 0 40px -28px rgba(0, 0, 0, 0.45);
    background: var(--surface);
    overflow-y: auto;
  }
  .cy-shell.is-subrail-open .cy-subrail__body,
  .cy-shell.is-subrail-open .cy-subrail__label { display: revert; }
}

@media (max-width: 1180px) {
  .cy-shell.is-rail-open .cy-rail {
    position: fixed;
    top: var(--cy-header-h);
    bottom: 0;
    left: 0;
    z-index: 41;
    width: 236px;
    box-shadow: 18px 0 40px -28px rgba(0, 0, 0, 0.45);
    background: var(--surface);
    overflow-y: auto;
  }
  .cy-shell.is-rail-open .cy-tool__label,
  .cy-shell.is-rail-open .cy-rail__head .cy-rail__label { display: revert; }
  /* The sub-rail sits beside a rail that is itself only a strip here. */
  .cy-shell.is-subrail-open .cy-subrail { left: var(--cy-rail-w-closed); }
}

/* Below 900px the rails are strips and the content takes everything else. The
   board scrolls sideways rather than crushing its columns to unreadable. */
@media (max-width: 900px) {
  .cy-main { padding-top: 20px; padding-bottom: 48px; }
  .cy-h1 { font-size: clamp(38px, 9vw, 64px); }
  .cy-monthgrid { grid-template-columns: 1fr; }
  .cy-board { overflow-x: auto; }
}

/* ══ § 36 Modals that fit the window ═════════════════════════════════════════
   `.cy-modal` had no height limit and `.cy-overlay` centres it, so a tall
   dialog — the import review, the user editor, a Mark-lost list — grew past the
   viewport in both directions at once. On a 768px laptop that put the eyebrow
   off the top and, worse, the footer off the bottom: the Cancel and Save
   buttons were unreachable and the overlay did not scroll, so there was no way
   to get to them at all.

   The fix is not to shrink the dialog but to let the *body* scroll while the
   head and the foot stay put. Those two are where the title and the buttons
   live, and they are exactly what you need visible while you scroll through
   whatever is between them. */

.cy-overlay {
  /* A safety net for anything that still exceeds the cap below — and
     `overscroll-behavior` stops the page behind scrolling once this hits its
     end, which is what makes a long modal feel like a panel and not a trapdoor. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cy-modal {
  /* 100dvh follows mobile browser chrome as it hides and shows; the vh line
     above it is the fallback for anything that does not know dvh. */
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
}

/* Neither may shrink: the moment the head or the foot gives up height, the
   title or the buttons start disappearing instead of the content. */
.cy-modal__head,
.cy-modal__foot { flex: none; }

/* `min-height: 0` is what actually permits a flex child to scroll. Without it
   the body claims its full content height and overflows the parent regardless
   of any max-height set above. */
.cy-modal__body,
.cy-modal__grid {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

/* Short windows — a 768px laptop has roughly 640px once browser chrome is
   taken, and 40px of padding top and bottom is a tenth of that. Anchor to the
   top rather than centring, so the dialog opens where the eye already is. */
@media (max-height: 780px) {
  /* The 50px margin is kept — it is a floor, not a default that shorter
     windows may trade away. What gives instead is the dialog's own internal
     padding, which is the part nobody misses. */
  .cy-overlay { align-items: flex-start; padding: 50px 16px; }
  .cy-modal { max-height: calc(100dvh - 100px); }
  .cy-modal__head { padding: 16px 20px; }
  .cy-modal__body { padding: 16px 20px; }
  .cy-modal__foot { padding: 12px 20px; }
}

/* ══ § 37 The Organic Show tile ═══════════════════════════════════════════════
   The one piece of colour in a monochrome system, and it is an exception with a
   reason rather than a decoration. The Healthy Organic Show is somebody else's
   event living inside our portal; the green is the show's own — `--pine` and
   `--leaf` straight off theorganicshow.com — so the tile reads as a door out of
   Cycle rather than another Cycle tool.

   It is scoped to `.cy-tile--organic` alone. Nothing else in the portal may
   take these colours, because the moment a second thing is green the green
   stops meaning "this belongs to the show".

   Painted, not tinted: the whole tile carries the show's dark green in both
   themes. A surface that flips with the theme would drift away from the brand
   it exists to quote, and this tile is the one place where being consistent
   with *them* beats being consistent with *us*. */
.cy-tile--organic {
  --cy-pine: #0e3b28;
  --cy-leaf: #39b54a;
  --cy-mint: #e6f2dd;
  --cy-paper: #fbfaf5;

  background: var(--cy-pine);
  border-color: var(--cy-pine);
  color: var(--cy-paper);
}
.cy-tile--organic .cy-tile__index,
.cy-tile--organic .cy-tile__meta { color: var(--cy-leaf); }
.cy-tile--organic .cy-tile__desc { color: var(--cy-mint); }
.cy-tile--organic .cy-tile__lock { color: var(--cy-mint); opacity: .75; }

/* Hover borrows the leaf rather than the ink outline every other tile uses —
   a near-black border on a dark green field is invisible. */
.cy-tile--organic:hover { border-color: var(--cy-leaf); }

/* Keyboard selection has to be visible against the green too, so the ring is
   the leaf here instead of `--text-strong`. */
.cy-tile--organic.is-selected::after { border-color: var(--cy-leaf); }