/* CVeze — net-new component CSS.
 *
 * Populated phase-by-phase as new screen-specific components land.
 * Per Phase 1 plan: this file ships empty so the link tag is in place.
 *
 * Each phase appends a section:
 *   /* === Phase 1 — nav + footer === * /
 *   /* === Phase 2 — dashboard === * /
 *   ...
 */

/* === Mobile QA 2026-05 — defensive overflow-x guard ===
   Belt-and-braces against runaway horizontal scroll caused by inline
   styles, marquees, and wide tables that escape their wrappers on
   mobile. Scoped to html/body only — wrappers that legitimately need
   horizontal scroll (e.g. .cv-table-scroll, .cv-pricing-matrix-wrap)
   are not affected because they declare overflow-x: auto themselves. */
html, body { overflow-x: hidden; }

/* === Phase 1 — top nav and footer === */

.cv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cv-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.cv-nav__brand-mark {
  width: 11px;
  height: 11px;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.cv-nav__brand-text {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
}
.cv-nav__items {
  display: flex;
  gap: 4px;
  margin-left: 16px;
  align-items: center;
}
.cv-nav__item {
  padding: 6px 12px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-4);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.cv-nav__item:hover {
  color: var(--ink);
  text-decoration: none;
}
.cv-nav__item--active {
  background: var(--paper-2);
  color: var(--ink);
}
.cv-nav__spacer { flex: 1; }
.cv-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-4);
  font-size: 13px;
  min-width: 240px;
  cursor: text;
}
.cv-nav__search input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  padding: 0;
}
.cv-nav__search input::placeholder { color: var(--ink-4); }
.cv-nav__search-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-5);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 4px;
}
.cv-nav__icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  position: relative;
  cursor: pointer;
}
.cv-nav__icon-btn:hover { border-color: var(--rule-strong); color: var(--ink); }
.cv-nav__icon-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Tools dropdown — restyled, keeps original .ne-tools-* selectors so
 * the inline JS continues to work. */
.ne-tools { position: relative; }
.ne-tools-btn {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 6px 12px;
  height: 32px;
  border-radius: var(--r-sm);
  transition: background 0.12s, color 0.12s;
}
.ne-tools-btn:hover { color: var(--ink); }
.ne-tools-btn.active { color: var(--ink); background: var(--paper-2); }
.ne-tools-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  display: none;
  z-index: 200;
}
.ne-tools-menu.open { display: block; }
.ne-tools-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.ne-tools-menu a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.ne-tools-menu a.active { color: var(--ink); background: var(--paper-2); }
.ne-tools-menu .material-symbols-outlined { font-size: 18px; color: var(--ink-4); }
.ne-tools-menu a.active .material-symbols-outlined { color: var(--accent); }

/* CTA pill on the right (replaces .ne-cta) */
.cv-cta {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  height: 36px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.12s;
}
.cv-cta:hover { color: var(--paper); text-decoration: none; filter: brightness(1.1); }

/* Avatar */
.cv-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

/* Footer */
.cv-footer {
  margin-top: 4rem;
  padding: 3rem 2rem;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.cv-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.cv-footer__brand {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.02em;
}
.cv-footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 0.4rem;
}
.cv-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-width: 0;
}
.cv-footer__links a { color: var(--ink-4); transition: color 0.12s; text-decoration: none; }
.cv-footer__links a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 900px) {
  .cv-nav { padding: 0 16px; gap: 12px; }
  .cv-nav__items { gap: 2px; }
  .cv-nav__search { display: none; }
}
@media (max-width: 640px) {
  .cv-nav__items .cv-nav__item:not(.cv-nav__item--active) { display: none; }
  .cv-cta { padding: 0.4rem 0.8rem; font-size: 12.5px; }
  .cv-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cv-footer__links { justify-content: flex-start; gap: 12px 18px; max-width: 100%; }
}

/* === Phase 2 — Dashboard === */

.cv-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.cv-greeting {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.cv-greeting__copy { flex: 1 1 480px; min-width: 0; }
.cv-greeting__title {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
  margin: 12px 0 0;
}
.cv-greeting__title em { font-style: normal; color: var(--accent); }
.cv-greeting__actions { display: flex; gap: 8px; flex-shrink: 0; }

.cv-dashboard {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.cv-dashboard__main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.cv-dashboard__sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 960px) {
  .cv-dashboard { grid-template-columns: 1fr; }
  .cv-dashboard__sidebar { position: static; }
}

.cv-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.cv-section-header--accent { border-bottom-color: var(--accent-tint-2); }
.cv-section-header__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cv-section-header__count {
  font-size: 13px;
  color: var(--ink-4);
  font-weight: 400;
}
.cv-section-header__action {
  font-size: 13px;
  color: var(--ink-4);
  text-decoration: none;
}
.cv-section-header__action:hover { color: var(--accent); text-decoration: none; }

.cv-section-rows { display: flex; flex-direction: column; gap: 8px; }

/* Role row — used by Strong/Trajectory/Watching lanes. */
.cv-role-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  align-items: start;
}
.cv-role-row:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.cv-role-row--accent {
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--paper) 100%);
  border-color: var(--accent-tint-2);
}
.cv-role-row__ring { display: flex; align-items: flex-start; padding-top: 2px; }
.cv-role-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-role-row__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
}
.cv-role-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--ink-4);
}
.cv-role-row__sep { color: var(--ink-5); }
.cv-role-row__rationale {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.cv-role-row__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  flex-shrink: 0;
}
.cv-role-row__rate {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cv-role-row__badges { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .cv-role-row { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
  .cv-role-row__tags { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* Empty state inside a section. */
.cv-section-empty {
  padding: 28px 20px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-4);
  font-size: 14px;
  background: var(--paper-2);
}

/* Sidebar cards. */
.cv-side-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-side-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-side-card__title { font-size: 13px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; }

/* ProfileCard */
.cv-profile-card__row { display: flex; align-items: center; gap: 12px; }
.cv-profile-card__name { font-size: 15px; font-weight: 500; color: var(--ink); }
.cv-profile-card__sub { font-size: 12.5px; color: var(--ink-4); }
.cv-profile-card__bar {
  position: relative;
  height: 6px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.cv-profile-card__bar-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
.cv-profile-card__hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* PipelineCard */
.cv-pipeline-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  padding: 4px 0;
}
.cv-pipeline-row__dot { width: 8px; height: 8px; border-radius: 50%; }
.cv-pipeline-row__label { color: var(--ink-3); }
.cv-pipeline-row__count { color: var(--ink); font-size: 13px; font-weight: 500; }

/* AlertsCard */
.cv-alert-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.cv-alert-item:last-child { border-bottom: none; }
.cv-alert-item__dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; }
.cv-alert-item__label { font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.35; }
.cv-alert-item__detail { font-size: 12.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.45; }
.cv-alert-item__when { font-size: 11px; color: var(--ink-5); margin-top: 4px; letter-spacing: 0.04em; }

/* RateCard */
.cv-kpi { display: flex; flex-direction: column; gap: 4px; }
.cv-kpi__label { color: var(--ink-4); }
.cv-kpi__value { font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.cv-kpi__sub { font-size: 12.5px; color: var(--ink-4); }
.cv-spark { width: 100%; height: 36px; }

/* === Phase 3 — Discover === */

.cv-discover-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.cv-discover-header__title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.cv-discover-header__title em { font-style: normal; color: var(--accent); }
.cv-discover-header__sub {
  font-size: 14px;
  color: var(--ink-4);
}

.cv-pill-bar {
  position: sticky;
  top: 56px; /* nav height */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin: 0 -24px 16px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.cv-pill-bar__more {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-4);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  white-space: nowrap;
}
.cv-pill-bar__more:hover { color: var(--ink); border-color: var(--rule-strong); }
.cv-pill-bar__spacer { flex: 1; }

/* List/grid view toggle (segmented control). */
.cv-view-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--paper);
}
.cv-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-4);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.cv-view-toggle__btn:hover { color: var(--ink); text-decoration: none; }
.cv-view-toggle__btn--active { background: var(--ink); color: var(--paper); }
.cv-view-toggle__btn--active:hover { color: var(--paper); }

/* "More filters" / "AI shortlist" details disclosures. */
details.cv-disclosure {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  margin-bottom: 16px;
  overflow: hidden;
}
details.cv-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  user-select: none;
}
details.cv-disclosure[open] > summary { border-bottom-color: var(--rule); }
details.cv-disclosure > summary::-webkit-details-marker { display: none; }
details.cv-disclosure > summary .cv-disclosure__chev {
  transition: transform 0.18s;
  color: var(--ink-4);
}
details.cv-disclosure[open] > summary .cv-disclosure__chev { transform: rotate(180deg); }
details.cv-disclosure > .cv-disclosure__body { padding: 18px; }

/* Persona/engagement filter rows kept from legacy — restyle the buttons.
   Selectors .persona-filter-btn / .engagement-filter-btn are load-bearing
   for the inline JS in search.html. */
.persona-filter-btn,
.engagement-filter-btn {
  height: 28px;
  padding: 0 12px !important;
  border-radius: var(--r-pill) !important;
  background: var(--paper) !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--rule-strong) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.persona-filter-btn.active,
.engagement-filter-btn.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
  opacity: 1 !important;
}
.persona-filter-btn:not(.active):hover,
.engagement-filter-btn:not(.active):hover {
  border-color: var(--accent) !important;
  color: var(--ink) !important;
}

/* Multi-select toggle chips inside the "More filters" form (IR35,
   Engagement). Pure CSS: a visually-hidden checkbox drives its sibling
   <span> chip, so multiple values post as repeated query params with no
   JS. Mirrors .persona-filter-btn so it reads as one chip family. */
.cv-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cv-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.cv-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cv-chip span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cv-chip input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-chip input:not(:checked) + span:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.cv-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cv-chip-hint {
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: -0.005em;
}

/* AI shortlist controls inside the disclosure: reset legacy badge styling
   to match new tokens without touching DOM markup. */
.cv-ai-shortlist-controls input,
.cv-ai-shortlist-controls select {
  background: var(--paper);
  border-color: var(--rule-strong);
}

/* Grid view (cards) */
.cv-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cv-role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color 0.12s, box-shadow 0.12s;
  min-height: 200px;
}
.cv-role-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.cv-role-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cv-role-card__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.cv-role-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--ink-4);
}
.cv-role-card__sep { color: var(--ink-5); }
.cv-role-card__rationale {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  flex: 1;
}
.cv-role-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
}
.cv-role-card__rate {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}
.cv-role-card__badges {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .cv-role-grid { grid-template-columns: 1fr; }
  .cv-pill-bar { top: 0; }
}

/* === Phase 4 — Role detail (dossier) === */

.cv-dossier-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-4);
  text-decoration: none;
  margin-bottom: 20px;
}
.cv-dossier-back:hover { color: var(--ink); text-decoration: none; }

.cv-dossier-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.cv-dossier-head {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}
.cv-dossier-head__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 10px;
}
.cv-dossier-head__sub {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 16px;
}
.cv-dossier-head__rail {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}
.cv-dossier-head__rail-band {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: -6px;
}

@media (max-width: 960px) {
  .cv-dossier-head { grid-template-columns: 1fr; }
  .cv-dossier-head__rail { position: static; }
}

/* Dossier badge bar */
.cv-dossier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 20px;
}
.cv-dossier-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  min-width: 0;
}
.cv-dossier-badge--accent { border-color: var(--accent-tint-2); background: var(--accent-tint); }
.cv-dossier-badge--success { border-color: var(--success-tint); background: var(--success-tint); }
.cv-dossier-badge--danger { border-color: var(--danger-tint); background: var(--danger-tint); }
.cv-dossier-badge__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cv-dossier-badge__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-dossier-badge--success .cv-dossier-badge__value { color: var(--success); }
.cv-dossier-badge--danger .cv-dossier-badge__value { color: var(--danger); }
.cv-dossier-badge--accent .cv-dossier-badge__value { color: var(--accent); }

/* Match breakdown bars */
.cv-bdbar { display: flex; flex-direction: column; gap: 4px; }
.cv-bdbar__row { display: flex; justify-content: space-between; align-items: baseline; }
.cv-bdbar__label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.cv-bdbar__num { font-size: 12px; color: var(--ink-4); }
.cv-bdbar__track { position: relative; height: 4px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.cv-bdbar__fill { position: absolute; left: 0; top: 0; bottom: 0; }

/* CVEZE READ panel */
.cv-cveze-read {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.cv-cveze-read__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cv-cveze-read__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.cv-cveze-read__foot {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-top: 1px solid var(--accent-tint-2);
  padding-top: 10px;
}

/* 3-up reasoning grid */
.cv-reasoning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .cv-reasoning-grid { grid-template-columns: 1fr; }
}
.cv-reason-col {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
}
.cv-reason-col__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.cv-reason-col__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cv-reason-col__list li {
  padding-left: 14px;
  position: relative;
}
.cv-reason-col__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--ink-5);
  border-radius: 50%;
}
.cv-reason-col__empty { color: var(--ink-5); font-style: italic; }
.cv-reason-col__empty::before { display: none; }

/* === Phase 5 — Application flow (3-stage wrapper + tabs) === */

.cv-app-pack {
  margin-top: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cv-app-pack__header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cv-app-pack__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 0;
}
.cv-app-pack__sub {
  font-size: 13.5px;
  color: var(--ink-4);
  line-height: 1.5;
}

/* Step indicator */
.cv-step-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cv-step-indicator__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-5);
}
.cv-step-indicator__dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  border: 1px solid var(--rule-strong);
}
.cv-step-indicator__item--current .cv-step-indicator__dot {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.cv-step-indicator__item--current .cv-step-indicator__label {
  color: var(--ink);
  font-weight: 500;
}
.cv-step-indicator__item--done .cv-step-indicator__dot {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-step-indicator__item--done .cv-step-indicator__label { color: var(--ink-3); }

/* Tab bar */
.cv-tab-bar {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex-wrap: wrap;
}
.cv-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--ink-4);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
.cv-tab-btn:hover { color: var(--ink); }
.cv-tab-btn--active { color: var(--ink); }
.cv-tab-btn--active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.cv-tab-btn__badge {
  font-size: 10.5px;
  color: var(--ink-4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  letter-spacing: 0;
}
.cv-tab-btn--active .cv-tab-btn__badge {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: var(--accent-tint-2);
}

/* Tab panel — toggled by inline JS via data-cv-active. */
.cv-tab-panel { display: none; padding: 24px; }
.cv-tab-panel[data-cv-active="true"] { display: block; }

/* Per-tab empty state. */
.cv-app-empty {
  padding: 28px 20px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  background: var(--paper-2);
}
.cv-app-empty strong { color: var(--ink); font-weight: 500; }

/* === Phase 6 — Shortlist === */

.cv-shortlist-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.cv-shortlist-header__title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}
.cv-shortlist-header__title em { font-style: normal; color: var(--accent); }
.cv-shortlist-header__sub {
  font-size: 14px;
  color: var(--ink-4);
  line-height: 1.55;
}

/* Sticky action bar — always visible, condenses on scroll. */
.cv-shortlist-bar {
  position: sticky;
  top: 56px;
  z-index: 4;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.cv-shortlist-bar__left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cv-shortlist-bar__count {
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.cv-shortlist-bar__right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Group banner — toggle for review/applied/unsuitable/expired buckets. */
.cv-group {
  margin-bottom: 18px;
}
.cv-group__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.cv-group__toggle:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.cv-group__toggle--review { border-left: 3px solid var(--accent); }
.cv-group__toggle--applied { border-left: 3px solid var(--success); }
.cv-group__toggle--unsuitable { border-left: 3px solid var(--danger); }
.cv-group__toggle--expired { border-left: 3px solid var(--ink-5); }
.cv-group__chevron {
  display: inline-block;
  transition: transform 0.18s;
  font-size: 11px;
  color: var(--ink-4);
}
.cv-group__count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.cv-group__body {
  margin-top: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}

/* === Phase 7 — Landing (marketing surface) === */

.cv-landing { background: var(--paper); color: var(--ink); }
.cv-landing-section {
  padding: 96px 32px;
  border-bottom: 1px solid var(--rule);
}
.cv-landing-section--paper2 { background: var(--paper-2); }
.cv-landing-section--ink { background: var(--ink); color: var(--paper); }
.cv-landing-section__inner { max-width: 1280px; margin: 0 auto; }
.cv-landing-section__inner--narrow { max-width: 1080px; }
.cv-landing-section__inner--narrowest { max-width: 960px; }

.cv-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.cv-eyebrow-row__bar { width: 16px; height: 2px; background: var(--accent); }

/* Hero */
.cv-hero { position: relative; overflow: hidden; }
.cv-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 32px 96px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.cv-hero__title {
  font-size: 72px;
  line-height: 0.97;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 28px;
}
.cv-hero__title em { font-style: normal; color: var(--accent); }
.cv-hero__sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 540px;
  margin-bottom: 36px;
}
.cv-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.cv-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-4);
}
.cv-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.cv-hero__trust .indigo-dot { width: 4px; height: 4px; box-shadow: none; }

/* Hero dossier card */
.cv-hero-dossier { position: relative; }
.cv-hero-dossier__sheet {
  position: absolute;
  top: 24px; right: -20px;
  width: 380px; height: 460px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.cv-hero-dossier__page {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cv-hero-dossier__head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cv-hero-dossier__title {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 500;
}
.cv-hero-dossier__sub { font-size: 13px; color: var(--ink-4); margin-top: 4px; }
.cv-hero-dossier__body { padding: 18px 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cv-hero-dossier__why-it-fits { margin-bottom: 16px; }
.cv-hero-dossier__list {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; color: var(--ink-3);
  margin-top: 4px;
}
.cv-hero-dossier__list li { display: flex; gap: 10px; }
.cv-hero-dossier__list .marker--warn { color: var(--warning); font-family: var(--font-mono); flex-shrink: 0; }
.cv-hero-dossier__list .marker--info { color: var(--ink-4); font-family: var(--font-mono); flex-shrink: 0; }
.cv-hero-dossier__foot {
  padding: 12px 24px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Sources strip */
.cv-sources-strip {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.cv-sources-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.cv-sources-strip__list {
  flex: 1;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* Display headline used across marketing sections */
.cv-display {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink);
}
.cv-display em { font-style: normal; color: var(--accent); }

/* Manifesto — three-up grid */
.cv-manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.cv-manifesto-grid h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.cv-manifesto-grid p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

/* Product preview wrapper */
.cv-product-preview {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cv-dossier-preview {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 540px;
}
.cv-dossier-preview__main {
  padding: 40px;
  border-right: 1px solid var(--rule);
}
.cv-dossier-preview__title {
  font-size: 36px;
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: 6px;
}
.cv-dossier-preview__score {
  font-size: 88px;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--accent);
  font-weight: 500;
}
.cv-dossier-preview__bars { flex: 1; padding-top: 14px; }
.cv-dossier-preview__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.cv-dossier-preview__bar-label { width: 110px; color: var(--ink-3); }
.cv-dossier-preview__bar-track {
  flex: 1; height: 4px; background: var(--paper-3); position: relative; overflow: hidden;
}
.cv-dossier-preview__bar-fill { position: absolute; inset: 0; }
.cv-dossier-preview__bar-num { width: 28px; color: var(--ink-3); text-align: right; }
.cv-dossier-preview__rail {
  background: var(--paper-2);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-dossier-preview__rail-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.cv-dossier-preview__rail-card:hover { border-color: var(--rule-strong); text-decoration: none; }
.cv-dossier-preview__rail-card-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.cv-dossier-preview__rail-card-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }

/* Problems solved grid */
.cv-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.cv-problems-grid__cell {
  padding: 32px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cv-problems-grid__cell:nth-child(3n) { border-right: none; }
.cv-problems-grid__cell:nth-last-child(-n+3) { border-bottom: none; }
.cv-problems-grid__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
.cv-problems-grid__title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-bottom: 12px;
}
.cv-problems-grid__body { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* How it works — 4-up steps */
.cv-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cv-step {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  position: relative;
}
.cv-step::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.cv-step__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 28px;
  font-weight: 500;
  text-transform: uppercase;
}
.cv-step__title {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  font-weight: 500;
}
.cv-step__body { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* Trust panel (dark section) */
.cv-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink-6);
}
.cv-trust-grid__cell {
  padding: 28px 24px;
  border-right: 1px solid var(--ink-6);
  border-bottom: 1px solid var(--ink-6);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cv-trust-grid__cell:nth-child(2n) { border-right: none; }
.cv-trust-grid__cell:nth-last-child(-n+2) { border-bottom: none; }
.cv-trust-grid__x { color: var(--accent-3); font-family: var(--font-mono); font-size: 18px; line-height: 1; margin-top: 2px; }
.cv-trust-grid__title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--paper);
}
.cv-trust-grid__body { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.cv-landing-section--ink .cv-display { color: var(--paper); }
.cv-landing-section--ink .cv-eyebrow-row { color: var(--accent-3); }

/* Pricing teaser */
.cv-pricing-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
.cv-tier-card {
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
}
.cv-tier-card--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  position: relative;
}
.cv-tier-card--featured .cv-tier-card__price-num,
.cv-tier-card--featured .cv-tier-card__features li { color: var(--paper); }
.cv-tier-card--featured .cv-tier-card__sub,
.cv-tier-card--featured .cv-tier-card__price-unit { color: var(--ink-5); }
.cv-tier-card__recommended {
  position: absolute;
  top: 24px; right: 24px;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  border-radius: 2px;
}
.cv-tier-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.cv-tier-card--featured .cv-tier-card__eyebrow { color: var(--ink-5); }
.cv-tier-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.cv-tier-card__price-num {
  font-size: 64px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
}
.cv-tier-card__price-unit { color: var(--ink-4); font-size: 14px; }
.cv-tier-card__sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; line-height: 1.55; }
.cv-tier-card__features {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; color: var(--ink-2); flex: 1; margin-bottom: 24px;
}
.cv-tier-card__features li { display: flex; gap: 10px; }
.cv-tier-card__features .plus { color: var(--accent); font-family: var(--font-mono); }
.cv-tier-card--featured .cv-tier-card__features .plus { color: var(--accent-3); }

/* Testimonial */
.cv-testimonial {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 32px;
  font-style: normal;
}
.cv-testimonial-author { display: inline-flex; align-items: center; gap: 14px; }
.cv-testimonial-author__name { font-size: 14px; font-weight: 500; }
.cv-testimonial-author__sub { font-size: 13px; color: var(--ink-4); }

/* FAQ */
.cv-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.cv-faq__title {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
}
details.cv-faq-item {
  border-top: 1px solid var(--rule);
  padding: 18px 0;
}
details.cv-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
details.cv-faq-item > summary::-webkit-details-marker { display: none; }
details.cv-faq-item > summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-4);
  transition: transform 0.18s;
}
details.cv-faq-item[open] > summary::after { content: '×'; }
details.cv-faq-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 12px;
  max-width: 620px;
}

/* Final CTA */
.cv-final-cta { text-align: center; }
.cv-final-cta__title {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 28px;
}
.cv-final-cta__title em { font-style: normal; color: var(--accent); }
.cv-final-cta__sub {
  font-size: 18px;
  color: var(--ink-3);
  margin: 0 auto 36px;
  line-height: 1.55;
  max-width: 640px;
}

/* Responsive — collapse heavy grids */
@media (max-width: 960px) {
  .cv-landing-section { padding: 64px 24px; }
  .cv-hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 48px 24px 64px; }
  .cv-hero__title { font-size: 48px; }
  .cv-display { font-size: 36px; }
  .cv-final-cta__title { font-size: 44px; }
  .cv-manifesto-grid,
  .cv-problems-grid,
  .cv-steps-grid,
  .cv-trust-grid,
  .cv-pricing-teaser-grid,
  .cv-faq-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .cv-problems-grid__cell { border-right: none !important; }
  .cv-trust-grid__cell { border-right: none !important; }
  .cv-dossier-preview { grid-template-columns: 1fr; }
  .cv-dossier-preview__main { border-right: none; border-bottom: 1px solid var(--rule); padding: 28px; }
  .cv-hero-dossier__sheet { display: none; }
}

/* === Phase 8 — Pricing page === */

.cv-pricing-hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 88px 32px 32px;
}
.cv-pricing-hero__title {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--ink);
}
.cv-pricing-hero__title em { font-style: normal; color: var(--accent); }
.cv-pricing-hero__sub {
  font-size: 17px;
  color: var(--ink-3);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* Annual / monthly toggle */
.cv-pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  gap: 4px;
}
.cv-pricing-toggle__btn {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--ink-4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
}
.cv-pricing-toggle__btn--active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.cv-pricing-toggle__discount {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}

/* 3-up tier grid (uses .cv-tier-card from Phase 7) */
.cv-pricing-tier-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cv-pricing-tier-grid .cv-tier-card { padding: 32px; }
.cv-pricing-tier-grid .cv-tier-card__price-num { font-size: 48px; }
.cv-pricing-tier-grid .cv-tier-card__features li.muted {
  color: var(--ink-5);
  text-decoration: line-through;
}
.cv-pricing-tier-grid .cv-tier-card__features .check {
  color: var(--success);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.cv-pricing-tier-grid .cv-tier-card--featured .cv-tier-card__features .check {
  color: var(--accent-3);
}

/* Comparison matrix */
.cv-pricing-matrix-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 96px;
}
.cv-pricing-matrix {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cv-pricing-matrix__header,
.cv-pricing-matrix__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 14px 24px;
  align-items: center;
}
.cv-pricing-matrix__header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cv-pricing-matrix__header span:nth-child(3) { color: var(--accent); }
.cv-pricing-matrix__header span:not(:first-child) { text-align: center; }
.cv-pricing-matrix__row { border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.cv-pricing-matrix__row:last-child { border-bottom: none; }
.cv-pricing-matrix__row span:not(:first-child) { text-align: center; color: var(--ink-3); }
.cv-pricing-matrix__row span:first-child { color: var(--ink-2); }
.cv-pricing-matrix__check { color: var(--success); font-family: var(--font-mono); }
.cv-pricing-matrix__dash { color: var(--ink-6); }

@media (max-width: 900px) {
  .cv-pricing-hero { padding: 56px 24px 16px; }
  .cv-pricing-hero__title { font-size: 38px; }
  .cv-pricing-tier-grid { grid-template-columns: 1fr; padding: 24px 24px 56px; gap: 16px; }
  .cv-pricing-matrix-wrap { padding: 0 24px 64px; }
  .cv-pricing-matrix__header,
  .cv-pricing-matrix__row { grid-template-columns: 1fr 0.6fr 0.8fr 0.6fr; padding: 12px 14px; font-size: 12.5px; }
}

/* === Phase 9 — Onboarding wizard === */

.cv-onb {
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.cv-onb__header {
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  gap: 24px;
}
.cv-onb__steps-strip {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cv-onb__step-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.cv-onb__step-chip-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cv-onb__step-chip-label {
  font-size: 13px;
  color: var(--ink-4);
  font-weight: 400;
}
.cv-onb__step-chip-rule {
  width: 24px;
  height: 1px;
  background: var(--rule-strong);
  margin-left: 4px;
}
.cv-onb__step-chip--current .cv-onb__step-chip-dot {
  border-color: var(--ink);
  color: var(--ink);
}
.cv-onb__step-chip--current .cv-onb__step-chip-label {
  color: var(--ink);
  font-weight: 500;
}
.cv-onb__step-chip--done .cv-onb__step-chip-dot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cv-onb__step-chip--done .cv-onb__step-chip-label { color: var(--ink-3); }

.cv-onb__body {
  flex: 1;
  display: flex;
  align-items: stretch;
}
.cv-onb__aside {
  width: 320px;
  padding: 40px 32px;
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
  flex-shrink: 0;
}
.cv-onb__aside-title {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 12px 0 16px;
  color: var(--ink);
}
.cv-onb__aside-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.cv-onb__why {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cv-onb__why-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--ai-tint);
  color: var(--ai);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cv-onb__why-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.cv-onb__why-body { font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }

.cv-onb__main {
  flex: 1;
  overflow: auto;
  padding: 48px 64px;
}
.cv-onb__main-inner { max-width: 640px; }
.cv-onb__step-title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--ink);
}
.cv-onb__step-title em { font-style: normal; color: var(--accent); }

/* Wizard nav (footer back/next) */
.cv-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  gap: 12px;
  flex-wrap: wrap;
}

/* Big radio cards (Intent step) */
.cv-radio-list { display: flex; flex-direction: column; gap: 12px; }
.cv-radio-card {
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--rule);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-sans);
  width: 100%;
  color: inherit;
  position: relative;
}
.cv-radio-card:hover { border-color: var(--rule-strong); }
.cv-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.cv-radio-card__pip {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cv-radio-card__pip-fill {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.12s;
}
.cv-radio-card__title { font-size: 16px; font-weight: 500; margin-bottom: 4px; color: var(--ink); }
.cv-radio-card__body { font-size: 13.5px; color: var(--ink-4); line-height: 1.45; }
.cv-radio-card:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-2);
}
.cv-radio-card:has(input:checked) .cv-radio-card__pip { border-color: var(--ink); }
.cv-radio-card:has(input:checked) .cv-radio-card__pip-fill { transform: scale(1); }

/* CV upload zone */
.cv-upload-zone {
  padding: 48px 32px;
  text-align: center;
  border: 1.5px dashed var(--rule-strong);
  background: var(--paper-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.cv-upload-zone:hover,
.cv-upload-zone--drag { border-color: var(--accent); background: var(--accent-tint); }
.cv-upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cv-upload-zone__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink-3);
}
.cv-upload-zone__label { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.cv-upload-zone__hint { font-size: 13px; color: var(--ink-4); }
.cv-upload-zone--done {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-tint);
  cursor: default;
}
.cv-upload-zone__check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}

/* Field stack (label + input + hint) */
.cv-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.cv-field__label { font-size: 13px; font-weight: 500; color: var(--ink); }
.cv-field__hint { font-size: 12.5px; color: var(--ink-4); }
.cv-field input[type=text],
.cv-field input[type=number],
.cv-field input[type=email],
.cv-field select,
.cv-field textarea {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  outline: none;
}
.cv-field input:focus,
.cv-field select:focus,
.cv-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.cv-field input[type=range] {
  flex: 1;
  accent-color: var(--accent);
}
.cv-field-row { display: flex; align-items: center; gap: 14px; }
.cv-field-row__readout {
  min-width: 100px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}

/* Chip toggle group (preferences/ambitions) */
.cv-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  position: relative;
}
.cv-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cv-chip-toggle:has(input:checked),
.cv-chip-toggle--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-chip-toggle:hover:not(:has(input:checked)):not(.cv-chip-toggle--active) {
  border-color: var(--accent);
  color: var(--ink);
}

/* Trajectory hint card on the Ambitions step */
.cv-traj-hint {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.cv-traj-hint__icon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cv-traj-hint__title { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.cv-traj-hint__body { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* Review step — label/value rows */
.cv-review-rows {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cv-review-rows__row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  font-size: 14px;
  gap: 12px;
}
.cv-review-rows__row:last-child { border-bottom: none; }
.cv-review-rows__label { color: var(--ink-4); font-size: 12.5px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.cv-review-rows__value { color: var(--ink); }
.cv-review-rows__edit {
  font-size: 12px;
  color: var(--ink-4);
  text-decoration: none;
}
.cv-review-rows__edit:hover { color: var(--accent); }

@media (max-width: 900px) {
  .cv-onb__steps-strip { display: none; }
  .cv-onb__body { flex-direction: column; }
  .cv-onb__aside { width: auto; border-right: none; border-bottom: 1px solid var(--rule); padding: 24px; }
  .cv-onb__main { padding: 32px 24px; }
  .cv-onb__step-title { font-size: 28px; }
  .cv-review-rows__row { grid-template-columns: 1fr auto; }
  .cv-review-rows__label { grid-column: 1 / -1; }
  .cv-review-rows__value { grid-column: 1 / 2; }
}

/* === Phase 10 — Profile chrome === */

.cv-profile-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.cv-profile-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: end;
  padding: 32px 0 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.cv-profile-hero__title {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  margin: 14px 0 10px;
}
.cv-profile-hero__title em { font-style: normal; color: var(--accent); }
.cv-profile-hero__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 560px;
}
.cv-profile-hero__status-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-profile-hero__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cv-profile-hero__bar {
  position: relative;
  height: 4px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.cv-profile-hero__bar-fill { position: absolute; inset: 0; background: var(--accent); }
.cv-profile-hero__sub-note { font-size: 12.5px; color: var(--ink-4); line-height: 1.5; }

/* Stat strip (replaces the dark stat pills) */
.cv-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.cv-profile-stats__cell {
  padding: 14px 16px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-profile-stats__cell:last-child { border-right: none; }
.cv-profile-stats__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.cv-profile-stats__value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cv-profile-stats__value--muted { color: var(--ink-4); font-weight: 400; }
.cv-profile-stats__value--accent { color: var(--accent); }

@media (max-width: 900px) {
  .cv-profile-hero { grid-template-columns: 1fr; gap: 24px; padding: 16px 0; }
  .cv-profile-hero__title { font-size: 32px; }
  .cv-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .cv-profile-stats__cell:nth-child(odd) { border-right: 1px solid var(--rule); }
  .cv-profile-stats__cell:nth-child(even) { border-right: none; }
}

/* === Phase 11 — Monitoring === */

.cv-mon-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}
.cv-mon-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cv-mon-header__title {
  font-size: 40px;
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 12px;
}
.cv-mon-header__title em { font-style: normal; color: var(--accent); }

.cv-mon-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}
@media (max-width: 960px) {
  .cv-mon-grid { grid-template-columns: 1fr; }
}

/* Criterion card row */
.cv-criterion {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 12px 1fr 100px auto;
  gap: 16px;
  align-items: center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cv-criterion:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
.cv-criterion__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-5);
  flex-shrink: 0;
}
.cv-criterion__dot--ai { background: var(--accent); }
.cv-criterion__dot--accent { background: var(--accent-3); }
.cv-criterion__dot--success { background: var(--success); }
.cv-criterion__body { min-width: 0; }
.cv-criterion__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cv-criterion__sub {
  font-size: 12.5px;
  color: var(--ink-4);
}
.cv-criterion__count {
  text-align: right;
}
.cv-criterion__count-num {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.cv-criterion__count-change {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-5);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.cv-criterion__count-change--up { color: var(--success); }
.cv-criterion__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cv-criterion__action-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  padding: 0;
}
.cv-criterion__action-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.cv-criterion__action-btn--danger:hover { color: var(--danger); border-color: var(--danger-tint); }

/* Sparkline strip beneath the criterion (server-side SVG) */
.cv-criterion__spark {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}

/* "New criterion" inline form */
details.cv-criteria-form {
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  padding: 14px 20px;
  margin-bottom: 16px;
}
details.cv-criteria-form[open] { border-style: solid; border-color: var(--accent-tint-2); background: var(--accent-tint); }
details.cv-criteria-form > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
details.cv-criteria-form > summary::-webkit-details-marker { display: none; }
details.cv-criteria-form > summary::before { content: '+'; color: var(--accent); font-family: var(--font-mono); font-size: 16px; }
details.cv-criteria-form[open] > summary::before { content: '×'; }
.cv-criteria-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.cv-criteria-form__grid .cv-field { margin-bottom: 0; }
.cv-criteria-form__grid--full { grid-column: 1 / -1; }
.cv-criteria-form__row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Trajectory analysis card */
.cv-trajectory-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) {
  .cv-trajectory-card { grid-template-columns: 1fr; }
}
.cv-trajectory-card__title {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.3;
}
.cv-trajectory-card__body { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.cv-trajectory-card__chart {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 14px;
}

/* Sidebar cards reuse .cv-side-card from Phase 2 */
.cv-mon-side-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}
.cv-mon-side-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}

/* === Phase 13 — Mobile polish (cross-cutting) ===
 * Final pass: tighten the few surfaces that look cramped or scroll
 * unexpectedly between 375 and 600px. Earlier phases each shipped
 * their own breakpoints; this section only adds rules that span
 * multiple components or fix narrow-viewport edge cases.
 */

@media (max-width: 600px) {
  /* Top nav at very narrow widths — drop nav items down to icon
     hierarchy: keep brand + Tools + avatar, hide labels on item links. */
  .cv-nav { padding: 0 12px; gap: 8px; }
  .cv-nav__brand-text { display: none; }
  .cv-nav__items { gap: 0; }
  .cv-nav__item:not(.cv-nav__item--active) { display: none; }
  .cv-cta { display: none; }
  /* Notification bell hidden at the narrowest widths — surfaced via
     sidebar/dashboard alerts instead. */
  .cv-nav__icon-btn { display: none; }
  /* Shortlist sticky action bar — stack the two halves vertically so
     the batch CTA gets a full-width tap target. */
  .cv-shortlist-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    top: 0;
  }
  .cv-shortlist-bar__left,
  .cv-shortlist-bar__right { width: 100%; justify-content: space-between; }
  .cv-shortlist-bar__right .btn { flex: 1; justify-content: center; }
  /* Monitoring criterion row — collapse 4-col into 2-col, push count
     under the body, keep actions inline. */
  .cv-criterion {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .cv-criterion__dot {
    position: absolute;
    top: 18px;
    left: 18px;
  }
  .cv-criterion { position: relative; padding-left: 36px; }
  .cv-criterion__count { grid-column: 1 / -1; text-align: left; padding-top: 4px; border-top: 1px dashed var(--rule); }
  .cv-criterion__count-num { font-size: 18px; display: inline-block; margin-right: 8px; }
  .cv-criterion__count-change { display: inline-block; }
  .cv-criterion__actions { align-self: start; }
  /* Dossier badge bar at narrow viewports — let the badges wrap into
     a tighter grid so each one stays readable. */
  .cv-dossier-badges { gap: 6px; }
  .cv-dossier-badge { padding: 5px 10px; }
  .cv-dossier-badge__value { font-size: 12.5px; }
  .cv-dossier-badge__label { font-size: 9.5px; letter-spacing: 0.1em; }
  /* Profile stat strip — drop to 2-cell minimum so stat values stay
     legible without horizontal scroll. */
  .cv-profile-stats { grid-template-columns: repeat(2, 1fr); }
  /* Onboarding step title shrinks more aggressively for legibility. */
  .cv-onb__step-title { font-size: 26px; }
  /* Pricing tier card padding tightens. */
  .cv-pricing-tier-grid .cv-tier-card { padding: 24px; }
  .cv-pricing-tier-grid .cv-tier-card__price-num { font-size: 40px; }
  /* Landing hero CTAs stack rather than wrap so they fit at 320px. */
  .cv-hero__ctas { flex-direction: column; align-items: stretch; }
  .cv-hero__ctas .cv-btn { width: 100%; justify-content: center; }
  /* Final CTA buttons stack too. */
  .cv-final-cta > div { flex-direction: column; align-items: stretch; gap: 10px; }
  .cv-final-cta > div .cv-btn { width: 100%; justify-content: center; }
  /* Pricing matrix — last-resort horizontal scroll wrapper so the
     four columns don't crush text at 320px. */
  .cv-pricing-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cv-pricing-matrix { min-width: 540px; }
  /* Dashboard greeting title shrinks to keep emphasis on key copy. */
  .cv-greeting__title { font-size: 28px; }
  .cv-page { padding-left: 16px; padding-right: 16px; }
  .cv-greeting__actions { width: 100%; flex-wrap: wrap; }
  .cv-greeting__actions .cv-btn,
  .cv-greeting__actions form { flex: 1 1 160px; }
  .cv-greeting__actions form .cv-btn { width: 100%; }
  .cv-pill-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .cv-pill-bar__spacer { display: none; }
  .cv-view-toggle { flex-shrink: 0; }
  .cv-criteria-form__grid { grid-template-columns: 1fr; }
  .cv-criteria-form__row { flex-direction: column; align-items: stretch; }
  .cv-field,
  .cv-field input,
  .cv-field select,
  .cv-field textarea { min-width: 0; width: 100%; }
}

/* iPhone SE / very narrow */
@media (max-width: 380px) {
  .cv-page,
  .cv-mon-page,
  .cv-profile-page { padding-left: 16px; padding-right: 16px; }
  .cv-pill-bar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .cv-pricing-hero__title { font-size: 32px; }
  .cv-display { font-size: 28px; }
  .cv-final-cta__title { font-size: 36px; }
  .cv-hero__title { font-size: 40px; }
}

/* === Phase 15 — Legacy surface convergence ===
 * Several operational screens still use the old .page/.card/.btn/form
 * vocabulary. These rules pull those screens toward the CVeze visual
 * system while their templates are migrated incrementally.
 */

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.page-header {
  margin: 0 0 28px;
}

.page-header h1 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-header p {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--ink-4);
  font-size: 15px;
  line-height: 1.6;
}

.card,
.ingest-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.card h3,
.ingest-card h4 {
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}

.btn,
button.btn,
a.btn {
  min-height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover,
a.btn:hover {
  border-color: var(--ink-5);
  text-decoration: none;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-group label,
.cv-field__label,
.cv-tool-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

input,
select,
textarea {
  max-width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
}

.cv-tool-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.cv-tool-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.cv-tool-title {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
  margin: 10px 0 0;
}

.cv-tool-title em {
  color: var(--accent);
  font-style: normal;
}

.cv-tool-sub {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--ink-4);
  font-size: 15px;
  line-height: 1.6;
}

.cv-tool-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  min-width: 0;
}

.cv-tool-card + .cv-tool-card {
  margin-top: 16px;
}

.cv-tool-card__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.cv-tool-card__title {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.cv-tool-card__body {
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.55;
}

.cv-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cv-table-scroll > table {
  margin: 0;
}

.cv-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  min-width: 0;
}

.cv-profile-management-grid,
.cv-profile-management-grid > *,
.cv-admin-grid > * {
  min-width: 0;
}

.cv-admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 700px) {
  .page,
  .cv-tool-page {
    padding: 24px 16px 56px;
  }
  .page-header h1,
  .cv-tool-title {
    font-size: 30px;
  }
  .page-header p,
  .cv-tool-sub {
    font-size: 14px;
  }
  .card,
  .ingest-card,
  .cv-tool-card {
    padding: 18px !important;
  }
  .form-row,
  .cv-admin-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-group,
  .form-row .form-group,
  .form-row input:not([type="checkbox"]):not([type="radio"]),
  .form-row select,
  .form-row button,
  .cv-admin-actions .btn,
  .cv-admin-actions .cv-btn {
    width: 100% !important;
  }
  .stats-grid,
  .cv-ingest-status-grid,
  .cv-ingest-two-col,
  .cv-conversation-grid,
  .cv-profile-management-grid {
    grid-template-columns: 1fr !important;
  }
  .cv-profile-page .card form > div[style*="display:flex"],
  .cv-tool-card > div[style*="display:flex"] {
    flex-direction: column;
    align-items: stretch !important;
  }
  .cv-profile-page .card form button,
  .cv-tool-card input:not([type="checkbox"]):not([type="radio"]),
  .cv-tool-card button {
    width: 100%;
  }
  .job-table {
    min-width: 760px;
  }
  .cv-ingest-keyword-table {
    display: block;
    min-width: 0 !important;
  }
  .cv-ingest-keyword-table thead {
    display: none;
  }
  .cv-ingest-keyword-table tbody,
  .cv-ingest-keyword-table tr,
  .cv-ingest-keyword-table td {
    display: block;
    width: 100% !important;
  }
  .cv-ingest-keyword-table tr {
    border: 1px solid var(--rule) !important;
    border-radius: var(--r-md);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--paper-2);
  }
  .cv-ingest-keyword-table td {
    padding: 8px 0 !important;
  }
  .cv-ingest-keyword-table td:last-child {
    text-align: left !important;
  }
  .badge-sector {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* === Phase 14a — Auth pages (login / signup) === */

.cv-auth-page {
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.cv-auth-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
  text-decoration: none;
}
.cv-auth-page__brand-mark {
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 2px;
}
.cv-auth-page__brand-text {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.cv-auth-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}
.cv-auth-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cv-auth-card__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--ink);
}
.cv-auth-card__title em { font-style: normal; color: var(--accent); }
.cv-auth-card__sub {
  font-size: 13.5px;
  color: var(--ink-4);
  line-height: 1.5;
  margin-bottom: 28px;
}
.cv-auth-form { display: flex; flex-direction: column; gap: 16px; }
.cv-auth-form__field { display: flex; flex-direction: column; gap: 6px; }
.cv-auth-form__field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
}
.cv-auth-form__field input {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  outline: none;
}
.cv-auth-form__field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.cv-auth-form__hint {
  font-size: 12px;
  color: var(--ink-4);
}
.cv-auth-form__submit {
  margin-top: 8px;
  height: 44px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cv-auth-form__submit:hover { filter: brightness(1.1); }
.cv-auth-card__error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid var(--danger-tint);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}
.cv-auth-card__footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
}
.cv-auth-card__footer a { color: var(--accent); text-decoration: none; }
.cv-auth-card__footer a:hover { color: var(--accent-2); text-decoration: underline; }

/* === Phase 14e — Auth-aware nav (user menu) === */

.cv-user-menu .cv-user-menu__trigger {
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cv-user-menu__trigger .cv-avatar {
  width: 28px; height: 28px;
  font-size: 11px;
}
.cv-user-menu__panel {
  min-width: 220px;
  padding: 6px;
}
.cv-user-menu__header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.cv-user-menu__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cv-user-menu__email {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 2px;
  word-break: break-all;
}
.cv-user-menu__logout-form { margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.cv-user-menu__logout-form button {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}
.cv-user-menu__logout-form button:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* Net-new component sections appended in later phases */




/* === Phase 9 — Landing motion layer ===
 * Functional motion only — every animation reinforces "the system is
 * alive and watching" without crossing into noise. CSS keyframes plus
 * a thin JS layer (see templates/landing.html scripts block) for
 * IntersectionObserver-driven reveals and the rotating scan feed.
 */

@keyframes cveze-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}
@keyframes cveze-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .5); }
  100% { box-shadow: 0 0 0 12px rgba(79, 70, 229, 0); }
}
@keyframes cveze-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes cveze-tick-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cveze-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cveze-aurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -20px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(.95); }
}

.cveze-pulse-dot { animation: cveze-pulse 1.6s ease-in-out infinite; }
.cveze-pulse-ring { position: relative; }
.cveze-pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: cveze-pulse-ring 2s ease-out infinite;
}

.cveze-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
}
.cveze-reveal.in { opacity: 1; transform: translateY(0); }

.cveze-card {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1);
}
.cveze-card:hover { transform: translateY(-4px); }

/* Specificity bumped (em.cveze-shimmer-text) so it overrides the
 * existing .cv-hero__title em colour rule from Phase 7. */
.cveze-shimmer-text,
em.cveze-shimmer-text,
.cv-hero__title em.cveze-shimmer-text {
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--ink) 40%,
    var(--accent) 50%,
    var(--ink) 60%,
    var(--ink) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
  animation: cveze-shimmer 8s linear infinite;
}

/* Aurora blobs in hero — a restrained indigo glow that drifts */
.cveze-aurora-blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
  animation: cveze-aurora 18s ease-in-out infinite;
  z-index: 0;
}
.cveze-aurora-blob--one {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(99, 102, 241, .45), transparent 60%);
}
.cveze-aurora-blob--two {
  top: 120px;
  right: -160px;
  background: radial-gradient(circle, rgba(139, 92, 246, .35), transparent 60%);
  animation-delay: -9s;
}
.cv-hero > .cv-hero__inner { position: relative; z-index: 1; }

/* LIVE pill — the count-up that sits above the headline */
.cveze-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin-bottom: 28px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cveze-live-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* LiveScanFeed — a rotating "currently scanning" feed under the sub copy */
.cveze-scan-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  width: fit-content;
  min-width: 360px;
  max-width: 100%;
  margin-bottom: 32px;
}
.cveze-scan-feed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.cveze-scan-feed__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.cveze-scan-feed__row[data-pos="0"] { opacity: 1; animation: cveze-tick-in .35s ease-out; }
.cveze-scan-feed__row[data-pos="1"] { opacity: 0.6; }
.cveze-scan-feed__row[data-pos="2"] { opacity: 0.3; }
.cveze-scan-feed__src {
  width: 64px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-transform: uppercase;
  flex-shrink: 0;
}
.cveze-scan-feed__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cveze-scan-feed__score {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
}
.cveze-scan-feed__score--strong { color: var(--accent); }

/* Sources strip — marquee version overrides flex-wrap on the list */
.cv-sources-strip__marquee {
  flex: 1;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.cv-sources-strip__track {
  display: flex;
  gap: 48px;
  width: max-content;
  font-size: 13.5px;
  color: var(--ink-3);
  animation: cveze-marquee 40s linear infinite;
  will-change: transform;
}
.cv-sources-strip__marquee:hover .cv-sources-strip__track { animation-play-state: paused; }
.cv-sources-strip__track > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cv-sources-strip__track > span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-5);
}

/* Reduced motion — honour user preference */
@media (prefers-reduced-motion: reduce) {
  .cveze-pulse-dot,
  .cveze-pulse-ring::after,
  .cv-sources-strip__track,
  .cveze-aurora-blob,
  .cveze-shimmer-text { animation: none !important; }
  .cveze-shimmer-text {
    background: none;
    -webkit-background-clip: initial;
            background-clip: initial;
    color: var(--accent);
  }
  .cveze-reveal { opacity: 1; transform: none; }
  .cveze-card { transition: none; }
}








/* ============================================================
   Application Questions tab — per-question card with answer
   editor, conversational refinement, and pending-diff blocks.
   Tokens-only; no new colours, no fixed pixel values that escape
   the existing scale.
   ============================================================ */

.cv-question-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Grid, not flex: the head sits inside `.cv-question-card` (itself a
   column flex item with no definite width). In that nesting a flex row
   resolves the text child against its content max-content and collapses
   it to 0 on narrow viewports regardless of `flex`/`min-width:0` — the
   eyebrow + question then shred one character per line. A grid track of
   `minmax(0, 1fr)` claims the free space with a true zero minimum,
   independent of content size, and `auto` keeps the delete button at its
   natural width. Correct at every viewport, so no media query needed. */
.cv-question-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.cv-question-card__head > div {
  min-width: 0;
}
.cv-question-card__text,
.cv-question-card .eyebrow {
  overflow-wrap: anywhere;
}

.cv-question-card__text {
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cv-question-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cv-question-meta-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-tint-2);
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cv-question-meta-chip--muted {
  background: var(--paper-2);
  color: var(--ink-5);
  border-color: var(--rule);
}
.cv-question-meta-chip--success {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-tint);
}
.cv-question-meta-chip--danger {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-tint);
}
.cv-question-meta-chip--neutral {
  background: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--rule);
}

.cv-question-card__delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, border-color 0.12s;
}
.cv-question-card__delete:hover {
  color: var(--danger);
  border-color: var(--danger-tint);
}

.cv-question-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 900px) {
  .cv-question-card__body {
    grid-template-columns: 1fr;
  }
}

.cv-question-card__panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cv-question-card__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 10px;
}

.cv-question-card__answer {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

.cv-answer-counter {
  font-size: 11.5px;
  color: var(--ink-5);
  letter-spacing: 0.02em;
}
.cv-answer-counter--warn {
  color: var(--danger);
  font-weight: 600;
}

.cv-question-card__chat-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
}

.cv-question-card__history {
  flex: 1;
  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px;
  margin-bottom: 10px;
}
.cv-question-card__history-empty {
  margin: 0;
  color: var(--ink-5);
  font-size: 13px;
  font-style: italic;
}
.cv-question-card__history-item {
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.cv-question-card__history-item--user {
  border-color: var(--accent-tint-2);
  background: var(--accent-tint);
}
.cv-question-card__history-body {
  margin-top: 4px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
}
.cv-question-card__history-body p:last-child { margin-bottom: 0; }

.cv-question-card__pending {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
}

.cv-question-card__diff {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--paper-2);
}
.cv-question-card__diff:last-child { margin-bottom: 0; }
.cv-question-card__diff[data-decision="accepted"] {
  border-color: var(--success);
  background: var(--success-tint);
}
.cv-question-card__diff[data-decision="rejected"] {
  border-color: var(--rule-strong);
  opacity: 0.7;
}

.cv-question-card__diff-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cv-question-card__diff-label {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.cv-question-card__diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .cv-question-card__diff-grid { grid-template-columns: 1fr; }
}
.cv-question-card__diff-grid pre {
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
}
.cv-question-card__diff-grid .cv-question-card__diff-new {
  border-color: var(--success);
  background: var(--success-tint);
}

/* ── Phase 3: Job detail two-column rail layout ─────────────── */
.cv-job-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.cv-job-detail-grid__main { min-width: 0; }
.cv-job-detail-grid__rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ── Phase 3: CV/CL conversation grid ───────────────────────── */
.cv-conversation-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

/* ── Phase 3: Pipeline progress SVG ────────────────────────── */
.cv-pipeline-svg {
  width: 100%;
  overflow-x: auto;
  padding: 4px 0 8px;
  color: var(--ink-5);
  -webkit-overflow-scrolling: touch;
}
.cv-pipeline-svg svg { display: block; min-width: 720px; }
.cv-pipeline-svg__node .cv-pipeline-svg__bg {
  transition: stroke 0.18s ease, fill 0.18s ease;
}
.cv-pipeline-svg__node--done .cv-pipeline-svg__bg {
  fill: var(--success-tint);
  stroke: var(--success);
}
.cv-pipeline-svg__node--done .cv-pipeline-svg__dot { fill: var(--success); }
.cv-pipeline-svg__node--done .cv-pipeline-svg__label { fill: var(--success); }
.cv-pipeline-svg__node--done .cv-pipeline-svg__title { fill: var(--ink); }
.cv-pipeline-svg__node--active .cv-pipeline-svg__bg {
  fill: var(--accent-tint);
  stroke: var(--accent);
  animation: cv-pipeline-pulse 1.6s ease-in-out infinite;
}
.cv-pipeline-svg__node--active .cv-pipeline-svg__dot { fill: var(--accent); }
.cv-pipeline-svg__node--active .cv-pipeline-svg__label { fill: var(--accent); }
.cv-pipeline-svg__node--active .cv-pipeline-svg__title { fill: var(--ink); font-weight: 600; }
@keyframes cv-pipeline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-pipeline-svg__node--active .cv-pipeline-svg__bg { animation: none; }
}

/* ── Phase 3c: Mobile reflow (single-column under 900px) ─────
   Conservative — only target rules where there IS visible breakage.
   Existing breakpoints handle .cv-dashboard (960px), .cv-dossier-head
   (960px), .cv-reasoning-grid (960px), .cv-shortlist-bar (800px) and
   the .stats-grid family (700px). Below covers the new Phase 3 grids
   plus the 2-column diff grid in cv_conversation. */
@media (max-width: 900px) {
  .cv-job-detail-grid { grid-template-columns: 1fr; gap: 16px; }
  .cv-conversation-grid { grid-template-columns: 1fr; }
  .cv-conversation-diff-grid { grid-template-columns: 1fr !important; }
}

/* ── Template gallery — shared rules for both per-job and admin galleries
   Spec: docs/superpowers/specs/2026-05-01-cv-template-stitch-agent-loop-design.md §10
   Owns: lift-and-scale hover, A4-aspect thumbnails, quick-look modal.
   Card classes: .job-template-card (per-job), .admin-template-card (admin).
   ──────────────────────────────────────────────────────────── */

/* §10.1 — Lift-and-scale on hover/focus, both galleries. */
.admin-template-card,
.job-template-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}
.admin-template-card:hover,
.admin-template-card:focus-within,
.job-template-card:hover,
.job-template-card:focus-within {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 28px 60px rgba(15, 23, 42, .18);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .admin-template-card,
  .job-template-card { transition: none; }
  .admin-template-card:hover,
  .admin-template-card:focus-within,
  .job-template-card:hover,
  .job-template-card:focus-within { transform: none; }
}

/* §10.3 — A4-aspect thumbnail frame. Wraps either an <img class="thumb">
   PNG (Stitch-generated) or a <img> SVG (built-ins). The frame enforces
   210:297 so cards read as A4 sheets regardless of source asset shape. */
.cv-template-thumb-frame {
  position: relative;
  aspect-ratio: 210 / 297;
  width: 100%;
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}
.cv-template-thumb-frame > img,
.cv-template-thumb-frame > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0; /* frame already rounds */
  background: transparent;
}

/* §10.2 — Quick-look modal (shared partial: _partials/template_quick_look.html).
   Lifted out of templates/job_template_gallery.html so admin gallery gets the
   same look without duplicating CSS. */
.job-template-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: none;
  align-items: stretch;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}
.job-template-modal.is-open { display: flex; }
.job-template-modal__panel {
  background: #ffffff;
  border-radius: 18px;
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.4);
}
.job-template-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  gap: .75rem;
}
.job-template-modal__title {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
}
.job-template-modal__nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.job-template-modal__step,
.job-template-modal__close {
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: .35rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
}
.job-template-modal__step:hover,
.job-template-modal__close:hover { background: var(--paper-3); }
.job-template-modal__body { flex: 1; min-height: 480px; }
.job-template-modal__iframe {
  width: 100%;
  height: 70vh;
  border: 0;
  background: #f8fafc;
}
.job-template-modal__foot {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--rule);
  justify-content: flex-end;
}

/* Quick-look trigger button on admin cards — keeps the link card behaviour
   intact while letting users open the preview without navigating. */
.admin-template-card__quicklook {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: .25rem .65rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .75rem;
  z-index: 3; /* above the lifted card */
}
.admin-template-card__quicklook:hover { background: #fff; }
.admin-template-card { position: relative; } /* anchor for absolute child */

/* Admin gallery card surface — replaces the bespoke inline <style> block in
   templates_index.html. Hangs the canonical .cv-admin-* card surface tokens
   off the .admin-template-card selector so the test_gallery e2e assertion
   on `class="admin-template-card"` keeps passing while the visual is on
   canon (var(--shadow-md), var(--r-lg), no slate-rgba hex). */
.admin-template-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.admin-template-card:hover { border-color: var(--accent); }

/* === Phase 18 — Admin component family, mobile nav drawer, empty match-ring ===
 *
 * Lifted from the bespoke inline <style> blocks of the three admin templates
 * (templates_index.html, templates_detail.html, templates_status.html) so the
 * agent-loop screens share the same canonical tokens (var(--shadow-md),
 * var(--r-lg), var(--accent-tint)) as the rest of the editorial UI.
 *
 * Mobile nav drawer fixes the < 640 px UX failure called out in audit
 * finding 11 (Discover/Shortlist/Monitoring unreachable; brand wordmark
 * missing). Empty match-ring placeholder addresses NIT 18 (the "0 / Weak match"
 * dossier card on freshly-signed-up accounts).
 *
 * No hardcoded hex / rgba — every value resolves through tokens.css. */

/* === cv-admin-* — admin card / panel family ============================== */

.cv-admin-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
}

.cv-admin-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cv-admin-card--accent {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.cv-admin-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.cv-admin-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.cv-admin-card__body { display: flex; flex-direction: column; gap: 0.5rem; }
.cv-admin-card__footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.cv-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.cv-admin-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.cv-admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}
.cv-admin-field label {
  font-size: 0.8rem;
  color: var(--ink-4);
  font-weight: 600;
}
.cv-admin-field input,
.cv-admin-field textarea,
.cv-admin-field select {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0.55rem 0.75rem;
  font: inherit;
  background: var(--paper-2);
  color: var(--ink);
}
.cv-admin-field textarea { min-height: 90px; resize: vertical; }
.cv-admin-field input:focus,
.cv-admin-field textarea:focus,
.cv-admin-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.cv-admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.cv-admin-tabs__btn {
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-3);
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cv-admin-tabs__btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.cv-admin-tabs__btn--active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.cv-admin-tab-panel { display: none; margin-top: 1rem; }
.cv-admin-tab-panel--active { display: block; }

.cv-admin-flash {
  margin-top: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  font-size: 0.9rem;
}
.cv-admin-flash--info {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-color: var(--accent);
}
.cv-admin-flash--error {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger);
}

.cv-admin-prompt-feedback {
  font-size: 0.8rem;
  color: var(--ink-4);
  display: block;
}
.cv-admin-prompt-feedback[data-kind="error"] { color: var(--danger); }
.cv-admin-prompt-feedback[data-kind="info"] { color: var(--accent-deep); }

.cv-admin-meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
  margin: 0;
}
.cv-admin-meta-grid dt { color: var(--ink-4); font-weight: 600; }
.cv-admin-meta-grid dd { margin: 0; word-break: break-word; color: var(--ink-2); }

.cv-admin-status-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  background: var(--paper-3);
  color: var(--ink-4);
  border: 1px solid var(--rule);
}
.cv-admin-status-pill--ok {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success);
}
.cv-admin-status-pill--needs-attention {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: var(--warning);
}
.cv-admin-status-pill--error {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger);
}
.cv-admin-status-pill--idle {
  background: var(--paper-3);
  color: var(--ink-4);
  border-color: var(--rule);
}
.cv-admin-status-pill--running,
.cv-admin-status-pill--pending {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-color: var(--accent);
}

.cv-admin-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 560px;
  overflow-y: auto;
}
.cv-admin-history-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: 0.8rem;
}
.cv-admin-history-row__thumb {
  width: 56px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--paper-3);
}
.cv-admin-history-row__thumb-placeholder {
  width: 56px;
  height: 80px;
  border-radius: var(--r-sm);
  background: var(--paper-3);
}
.cv-admin-history-row__ts {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.cv-admin-history-row__summary { color: var(--ink-2); }
.cv-admin-history-row__actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.cv-admin-history-row__actions form { margin: 0; }

.cv-admin-detail-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .cv-admin-detail-grid { grid-template-columns: 1fr; }
}

.cv-admin-pre {
  background: var(--paper-3);
  border-radius: var(--r-md);
  padding: 1rem;
  overflow: auto;
  max-height: 360px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-2);
}

/* Admin preview iframes are sized at native A4 dimensions internally
 * (820 × 1160 px ≈ 210mm × 297mm at 96dpi) so the rendered layout never
 * sees a narrow viewport — no responsive reflow ever fires. The shell
 * wrapper below visually scales the iframe to fit the available column
 * width via `transform: scale()` while preserving exact print
 * proportions. The user sees the actual A4 paper, just smaller.
 */
.cv-admin-preview-shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 820 / 1160;
  background: var(--paper-3, #e5e7eb);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}

.cv-admin-preview-frame {
  /* Fixed internal layout viewport — A4 width 820px (≈210mm @ 96dpi) +
   * generous height for one A4 sheet. Multi-page documents scroll
   * inside the iframe. */
  width: 820px;
  height: 1160px;
  border: 0;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  /* Visual scale: shell width / iframe logical width. Clamped at 1 so
   * desktop renders at 1:1 (shell.max-width is also 820px). */
  transform-origin: top left;
  transform: scale(min(1, calc(100cqi / 820px)));
}

.cv-admin-thumb {
  width: 100%;
  border-radius: var(--r-md);
  background: var(--paper-3);
}

.cv-admin-iter-row {
  font-size: 0.85rem;
  color: var(--ink-3);
}

.cv-admin-diag-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cv-admin-diag-list li {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.cv-admin-diag-list li[data-severity="error"] { border-color: var(--danger); }
.cv-admin-diag-list .code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
}

.cv-admin-intermediate-thumb {
  max-width: 100%;
  max-height: 480px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-3);
}

/* === cv-nav__hamburger + drawer — mobile nav (<640px) ==================== */

.cv-nav__hamburger {
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-direction: column;
  gap: 4px;
}
.cv-nav__hamburger:hover { border-color: var(--rule-strong); color: var(--ink); }
.cv-nav__hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}

.cv-nav__drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.42);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
}
.cv-nav__drawer-backdrop.cv-nav__drawer-backdrop--open {
  opacity: 1;
  visibility: visible;
}

.cv-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  overflow-y: auto;
}
.cv-nav__drawer.cv-nav__drawer--open { transform: translateX(0); }

.cv-nav__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.cv-nav__drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cv-nav__drawer-close:hover { border-color: var(--rule-strong); color: var(--ink); }

.cv-nav__drawer-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-nav__drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  padding: 4px 8px;
}
.cv-nav__drawer-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.cv-nav__drawer-link:hover {
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}
.cv-nav__drawer-link--active {
  background: var(--paper-2);
  color: var(--ink);
}

.cv-nav__drawer-divider {
  height: 1px;
  background: var(--rule);
  margin: 4px 0;
}

@media (max-width: 640px) {
  .cv-nav__hamburger { display: inline-flex; }
  /* Override the existing cveze.css:277 rule that hides nav items at <640px
     so the brand wordmark can stay visible while inline items collapse to
     the drawer. Inline Tools / search / icon-btn / avatar still hide here;
     the drawer surfaces them all. */
  .cv-nav__items { display: none; }
  .cv-nav__items .cv-nav__item:not(.cv-nav__item--active) { display: none; }
  .cv-nav .ne-tools:not(.cv-user-menu) { display: none; }
  .cv-nav__icon-btn { display: none; }
  .cv-nav__brand-text { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-nav__drawer,
  .cv-nav__drawer-backdrop { transition: none; }
}

/* === cv-match-ring--empty — empty-state placeholder (NIT 18) ============= */

.cv-match-ring--empty {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--accent-tint);
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  color: var(--ink-3);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  min-width: 64px;
  transition: background 0.12s, border-color 0.12s;
}
.cv-match-ring--empty:hover {
  background: var(--accent-tint-2);
  border-color: var(--accent-2);
  text-decoration: none;
  color: var(--ink);
}
.cv-match-ring--empty .cv-match-ring__cta-label {
  font-weight: 600;
  color: var(--ink);
}
.cv-match-ring--empty .cv-match-ring__cta-arrow {
  font-size: 14px;
  color: var(--accent);
  margin-left: 4px;
}
.cv-match-ring--empty .cv-match-ring__cta-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============================================================
   Job advert v0.7 "Lab" surface
   Added when the standalone Stitch mock for the role detail page
   was promoted into production. Composition is borderless article
   sections in the LEFT column + a single sticky apply card and
   reference cards in the RIGHT rail. Reuses --paper / --ink /
   --accent / --rule tokens established in base.html.
   ============================================================ */

/* Breadcrumb path above the hero */
.cv-dossier-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cv-dossier-crumbs a,
.cv-dossier-crumbs button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-4);
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-decoration: none;
}
.cv-dossier-crumbs a:hover,
.cv-dossier-crumbs button:hover { color: var(--ink-2); text-decoration: none; }
.cv-dossier-crumbs__sep { color: var(--ink-5); }
.cv-dossier-crumbs__current { color: var(--ink-2); }

/* Hero — company avatar tile + title block */
.cv-dossier-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.cv-dossier-hero__tile {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.cv-dossier-hero__body { flex: 1; min-width: 0; }
.cv-dossier-hero__company {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.cv-dossier-hero__title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--ink);
  margin: 2px 0 0;
}
@media (max-width: 700px) {
  .cv-dossier-hero__title { font-size: 28px; }
  .cv-dossier-hero__tile { width: 44px; height: 44px; font-size: 18px; }
}

/* Outline pill row (replaces the boxed dossier_badge bar in the new design).
   The boxed cv-dossier-badge stays available for callers that want the
   labelled stack — this is a flatter inline variant. */
.cv-dossier-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.cv-dossier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cv-dossier-pill svg { color: currentColor; flex-shrink: 0; }
.cv-dossier-pill--success {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-tint);
}
.cv-dossier-pill--danger {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-tint);
}
.cv-dossier-pill--accent {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent-tint-2);
}

/* Compact match strip (replaces the boxed sticky match-rail in head) */
.cv-match-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  margin-bottom: 32px;
}
.cv-match-strip__body { flex: 1; min-width: 0; }
.cv-match-strip__band {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--ink);
}
.cv-match-strip__band-detail { color: var(--ink-4); font-weight: 400; margin-left: 8px; }
.cv-match-strip__meta {
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cv-match-strip__cta {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.cv-match-strip__cta:hover {
  border-color: var(--ink-3);
  color: var(--ink);
  text-decoration: none;
}
@media (max-width: 700px) {
  .cv-match-strip { flex-wrap: wrap; gap: 12px; }
  .cv-match-strip__cta { width: 100%; justify-content: center; }
}

/* Borderless article section — used in the LEFT column to give the
   advert an editorial rhythm without bordered panels. */
.cv-job-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.cv-job-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.cv-job-section__head { margin-bottom: 18px; }
.cv-job-section__head .eyebrow { display: block; margin-bottom: 6px; }
.cv-job-section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.cv-job-section__lede {
  font-size: 14px;
  color: var(--ink-3);
  margin: -6px 0 20px;
  line-height: 1.55;
}

/* Match-dossier "AI takeaway" call-out — the indigo sparkle panel */
.cv-ai-call {
  padding: 14px 16px;
  background: var(--ai-tint);
  border: 1px solid var(--accent-tint-2);
  border-radius: var(--r-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cv-ai-call__mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cv-ai-call__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cv-ai-call__body strong { color: var(--ink); font-weight: 600; }

/* Step-card thumbnail picker (Choose a CV template).
   Distinct from the legacy .cv-template-card in this file (which is the
   admin/list variant) and from .job-template-card (the existing per-job
   gallery). This is the Stitch-mock-aligned variant for the advert. */
.cv-step-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .cv-step-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cv-step-cards { grid-template-columns: 1fr; } }
.cv-step-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: left;
  padding: 0;
  font-family: inherit;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cv-step-card:hover { border-color: var(--rule-strong); }
.cv-step-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-sm);
}
.cv-step-card__stage {
  padding: 16px;
  background: var(--paper-3);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
}
.cv-step-card__thumb {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 210 / 297;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(9,9,11,0.08), 0 1px 2px rgba(9,9,11,0.06);
}
.cv-step-card__thumb img,
.cv-step-card__thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cv-step-card__meta { padding: 14px; }
.cv-step-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}
.cv-step-card__name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.cv-step-card__score {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-4);
}
.cv-step-card__score--good { color: var(--success); }
.cv-step-card__score--mid { color: var(--accent); }
.cv-step-card__desc {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.5;
  margin-bottom: 8px;
  min-height: 32px;
}
.cv-step-card__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cv-step-card__tag {
  font-size: 10.5px;
  padding: 2px 6px;
  background: var(--paper-2);
  color: var(--ink-4);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.cv-step-card__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.cv-step-card__flag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 500;
  text-transform: uppercase;
}
.cv-step-card__radio { position: absolute; opacity: 0; pointer-events: none; }

/* Toggle card pair (Cover letter Yes / Skip) */
.cv-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px) { .cv-toggle-grid { grid-template-columns: 1fr; } }
.cv-toggle-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.cv-toggle-card:hover { border-color: var(--rule-strong); }
.cv-toggle-card--selected {
  background: var(--paper-2);
  border-color: var(--ink);
}
.cv-toggle-card__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
.cv-toggle-card--selected .cv-toggle-card__dot {
  border-color: var(--ink);
  background: var(--ink);
}
.cv-toggle-card--selected .cv-toggle-card__dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--paper);
}
.cv-toggle-card__body { flex: 1; min-width: 0; }
.cv-toggle-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 8px;
}
.cv-toggle-card__title { font-size: 14px; font-weight: 500; color: var(--ink); }
.cv-toggle-card__meta {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-4);
}
.cv-toggle-card__desc {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
}
.cv-toggle-card__radio { position: absolute; opacity: 0; pointer-events: none; }

/* Apply card — sticky right rail anchor */
.cv-apply-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.cv-apply-card__section {
  padding: 18px;
  border-bottom: 1px solid var(--rule);
}
.cv-apply-card__section:last-child { border-bottom: none; }
.cv-apply-card__section--paper2 { background: var(--paper-2); }
.cv-apply-card__preview-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cv-apply-card__preview-thumb {
  flex-shrink: 0;
  width: 64px;
  aspect-ratio: 210 / 297;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(9,9,11,0.08);
}
.cv-apply-card__preview-thumb img,
.cv-apply-card__preview-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.cv-apply-card__preview-body { flex: 1; min-width: 0; }
.cv-apply-card__preview-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--ink);
}
.cv-apply-card__preview-sub {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.45;
  margin-bottom: 6px;
}
.cv-apply-card__preview-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cv-apply-card__hint {
  font-size: 11.5px;
  color: var(--ink-4);
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}
.cv-apply-card__btn-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.cv-apply-card__btn-row > * { flex: 1; }
.cv-apply-card__sticky {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Submit-via radio row */
.cv-radio-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
.cv-radio-row + .cv-radio-row { margin-top: 6px; }
.cv-radio-row:hover { border-color: var(--rule-strong); }
.cv-radio-row--selected {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.cv-radio-row__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
.cv-radio-row--selected .cv-radio-row__dot { border-color: var(--accent); }
.cv-radio-row--selected .cv-radio-row__dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.cv-radio-row__body { flex: 1; min-width: 0; }
.cv-radio-row__title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--ink);
}
.cv-radio-row__desc {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.45;
}
.cv-radio-row__radio { position: absolute; opacity: 0; pointer-events: none; }

/* Compact key/value list for the Role details rail card */
.cv-detail-list {
  display: flex;
  flex-direction: column;
}
.cv-detail-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--rule);
  gap: 12px;
}
.cv-detail-list__row:first-child { border-top: none; }
.cv-detail-list__label { color: var(--ink-4); }
.cv-detail-list__value {
  color: var(--ink-2);
  font-family: var(--font-mono);
  text-align: right;
  word-break: break-word;
}
.cv-detail-list__value--accent { color: var(--accent); }
.cv-detail-list__value--success { color: var(--success); }
.cv-detail-list__value--danger { color: var(--danger); }

/* Compact rail card (Match breakdown / Role details / Reference data).
   Lighter than .cv-tool-card so the rail reads as a stack of small cards
   under the apply anchor without the heavy padding of the workflow surface. */
.cv-rail-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.cv-rail-card .eyebrow { display: block; margin-bottom: 12px; }
.cv-rail-card__bd-stack { display: flex; flex-direction: column; gap: 9px; }

/* ============================================================
   May 2026 design bundle — per-phase additions
   Each phase block is owned by a single agent during the parallel
   rollout. Append CSS BETWEEN the START / END markers of your phase.
   Phase A is owned by the lead and lives above this block.
   ============================================================ */

/* === PHASE B START · Commercial conversion === */
/* Owned by: commercial-coder. Components for landing.html, pricing.html,
   auth/*.html, checkout.html. Reference: bundle/screens/{landing,pricing,auth,checkout}.jsx
   Tokens used here are the canonical ones from tokens.css — paper / ink /
   accent indigo / Inter / JetBrains Mono. No serif. */

/* ============================================================
   Checkout page (templates/checkout.html)
   Mirrors the bundle's screens/checkout.jsx: a calm, single-page
   surface with a left workspace (role / template / what's included)
   and a sticky right summary rail. The whole page sits on var(--paper)
   and reuses the Phase 8 .cv-tier-card / Phase 9 .cv-hero lexicon.
   ============================================================ */

.cv-checkout {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  padding: 56px 32px 96px;
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--font-sans);
}

.cv-checkout__head { margin-bottom: 48px; }
.cv-checkout__crumb {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cv-checkout__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-3);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.cv-checkout__back:hover { border-color: var(--rule-strong); color: var(--ink); }
.cv-checkout__crumb-step { color: var(--ink-4); }

.cv-checkout__title {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
}
.cv-checkout__title em { font-style: normal; color: var(--accent); }
.cv-checkout__sub {
  font-size: 17px; line-height: 1.55;
  color: var(--ink-3);
  max-width: 640px;
}

.cv-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ----- Left column ------------------------------------------- */

.cv-checkout__workspace {
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
}

.cv-checkout-role,
.cv-checkout-template,
.cv-checkout-included {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.cv-checkout-role__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.cv-checkout-role__title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 6px;
  color: var(--ink);
}
.cv-checkout-role__meta {
  font-size: 14px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.cv-checkout-role__sep { color: var(--ink-5); }
.cv-checkout-role__ring { flex-shrink: 0; }
.cv-checkout-role__badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.cv-checkout-role__why {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 4px;
}
.cv-checkout-role__why p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 8px;
}

/* ----- Selected template ------------------------------------- */

.cv-checkout-template__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.cv-checkout-template__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
  color: var(--ink);
}
.cv-checkout-template__category {
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.cv-checkout-template__change {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.cv-checkout-template__change:hover { color: var(--accent-2); text-decoration: underline; }

.cv-checkout-template__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.cv-checkout-template__thumb {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.cv-checkout-template__sheet {
  width: 100%; aspect-ratio: 1 / 1.414; /* A4 portrait */
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  overflow: hidden;
}
.cv-checkout-template__sheet-band {
  height: 16px; width: 50%;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 8px;
}
.cv-checkout-template__sheet-band--thin {
  height: 8px; width: 30%; background: var(--ink); margin: 8px 0 6px;
}
.cv-checkout-template__sheet-line {
  height: 4px;
  background: var(--rule-strong);
  border-radius: 1px;
}
.cv-checkout-template__sheet-line--short { width: 65%; }
.cv-checkout-template__thumb-caption { color: var(--ink-5); }

.cv-checkout-template__detail {
  display: flex; flex-direction: column; gap: 18px;
}
.cv-checkout-template__desc {
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
}
.cv-checkout-template__list .eyebrow { display: block; margin-bottom: 8px; }
.cv-checkout-template__list ul {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; color: var(--ink-3);
}
.cv-checkout-template__list li {
  display: flex; gap: 8px; align-items: baseline;
}
.cv-checkout-template__plus { color: var(--accent); width: 12px; flex-shrink: 0; }
.cv-checkout-template__minus { color: var(--ink-5); width: 12px; flex-shrink: 0; }
.cv-checkout-template__list--muted ul { color: var(--ink-4); }

/* ----- What's included --------------------------------------- */

.cv-checkout-included .eyebrow { display: block; margin-bottom: 18px; }
.cv-checkout-included__list {
  display: flex; flex-direction: column; gap: 18px;
}
.cv-checkout-included__row {
  display: flex; align-items: flex-start; gap: 14px;
}
.cv-checkout-included__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.cv-checkout-included__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-checkout-included__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ----- Right summary rail ------------------------------------ */

.cv-checkout-summary { min-width: 0; }
.cv-checkout-summary__sticky {
  position: sticky;
  top: 24px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
}
.cv-checkout-summary__sticky > .eyebrow { color: var(--ink-4); }

.cv-checkout-summary__line {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-3);
}
.cv-checkout-summary__line:last-of-type { border-bottom: none; padding-bottom: 0; }
.cv-checkout-summary__line--head .cv-checkout-summary__line-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.cv-checkout-summary__line-sub {
  font-size: 12.5px; color: var(--ink-4);
  margin-top: 3px;
}
.cv-checkout-summary__line-amount {
  font-size: 14.5px; color: var(--ink-2);
  white-space: nowrap;
}

.cv-checkout-summary__total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--ink);
  margin-top: 4px;
}
.cv-checkout-summary__total-label {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cv-checkout-summary__total-amount {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.cv-checkout-summary__form { margin: 4px 0 4px; }
.cv-checkout-summary__pay {
  width: 100%;
  height: 52px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.06s;
}
.cv-checkout-summary__pay:hover { filter: brightness(1.06); }
.cv-checkout-summary__pay:active { transform: translateY(1px); }
.cv-checkout-summary__pay--loading {
  background: var(--ink); border-color: var(--ink); cursor: progress;
}

.cv-checkout-summary__trust {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px; color: var(--ink-4);
}
.cv-checkout-summary__trust li {
  display: flex; align-items: center; gap: 8px;
}
.cv-checkout-summary__trust .indigo-dot {
  width: 6px; height: 6px; box-shadow: none;
}

.cv-checkout-summary__upsell {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 6px;
}
.cv-checkout-summary__upsell .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
}
.cv-checkout-summary__upsell p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.cv-checkout-summary__upsell-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--accent);
  text-decoration: none;
}
.cv-checkout-summary__upsell-link:hover { color: var(--accent-2); text-decoration: underline; }

/* ----- Responsive -------------------------------------------- */

@media (max-width: 960px) {
  .cv-checkout { padding: 40px 20px 72px; }
  .cv-checkout__title { font-size: 40px; }
  .cv-checkout__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cv-checkout-summary__sticky { position: static; top: auto; }
  .cv-checkout-template__body {
    grid-template-columns: 140px 1fr;
    gap: 20px;
  }
  .cv-checkout-role__head { flex-direction: column; gap: 14px; }
  .cv-checkout-role__title { font-size: 22px; }
}

@media (max-width: 540px) {
  .cv-checkout__title { font-size: 32px; }
  .cv-checkout__sub { font-size: 15px; }
  .cv-checkout-role,
  .cv-checkout-template,
  .cv-checkout-included,
  .cv-checkout-summary__sticky { padding: 22px 20px; }
  .cv-checkout-template__body { grid-template-columns: 1fr; }
  .cv-checkout-template__thumb { max-width: 200px; margin: 0 auto; }
  .cv-checkout-summary__total-amount { font-size: 30px; }
}

/* === PHASE B END === */

/* === PHASE C START · Authenticated core === */
/* Owned by: workspace-coder. Components for dashboard.html, search.html,
   job_template_gallery.html, job_add.html, application_questions_tab.html,
   document_editor.html, onboarding/*.html.
   Reference: bundle/screens/{dashboard,discover,p2-workspace,onboarding}.jsx
   Tokens: --paper, --ink, --accent, --rule, --rule-strong, --r-md, --r-lg.
   Naming: cv-* — never bare element selectors except where the legacy
   markup (.persona-filter-btn / .col-chooser-*) is reused intact for
   sort/filter JS in templates/base.html. */

/* ── C1. Dashboard — ingest-status mini ──────────────────────
   Surfaces the most recent ingest run as a quiet rail card on
   the authenticated dashboard. Sits in the existing .cv-side-card
   stack so users can see whether matches are fresh without
   leaving the page. */
.cv-ingest-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cv-ingest-mini__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
}
.cv-ingest-mini__row-label { color: var(--ink-4); }
.cv-ingest-mini__row-value {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.cv-ingest-mini__bar {
  position: relative;
  height: 4px;
  background: var(--paper-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-ingest-mini__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 0.3s ease;
}
.cv-ingest-mini__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.cv-ingest-mini__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-5);
}
.cv-ingest-mini__status--running::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
  animation: cv-ingest-pulse 1.4s ease-in-out infinite;
}
.cv-ingest-mini__status--ok::before { background: var(--success); }
.cv-ingest-mini__status--warn::before { background: var(--warning); }
.cv-ingest-mini__status--error::before { background: var(--danger); }
@keyframes cv-ingest-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-ingest-mini__status--running::before { animation: none; }
}

/* ── C2. Discover (search.html) — AI shortlist polish ─────────
   The base discover header / pill bar / view toggle live higher
   up in this file. These rules reskin the persona / engagement
   filter buttons and the column-chooser dropdown so the legacy
   .persona-filter-btn / .engagement-filter-btn / .col-chooser-*
   classes stay readable on the v0.7 Lab surface. JS on these
   elements is in templates/base.html — restyling only here. */
.cv-discover-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.cv-discover-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-discover-toolbar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.cv-discover-toolbar__count {
  font-size: 13px;
  color: var(--ink-3);
  margin-right: auto;
}
.cv-discover-toolbar__count strong { color: var(--ink); font-weight: 500; }

.persona-filter-btn,
.engagement-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.persona-filter-btn:hover,
.engagement-filter-btn:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.persona-filter-btn.active,
.engagement-filter-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* AI Shortlist run controls live in a .cv-disclosure on /search.
   These rules keep the dense form chrome readable without rewriting
   the input scaffolding inline (which would risk drifting from the
   IDs the JS looks up: #ai-shortlist-run-btn, #ai-job-type-mode, etc.). */
.cv-ai-shortlist-controls .ai-pill-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cv-ai-shortlist-controls .ai-pill-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cv-ai-shortlist-controls .ai-pill-row select,
.cv-ai-shortlist-controls .ai-pill-row input[type="number"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--font-sans);
}

/* Column-chooser polish — the dropdown is JS-driven from base.html
   and stores per-page checkbox state in localStorage (key
   colChooser_<pathname>). We only restyle it here, the open/close
   behaviour is already wired and must not be touched. */
.col-chooser { position: relative; }
.col-chooser-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.col-chooser-btn:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ── C3. Job add (URL ingest) progress states ───────────────── */
.cv-job-add-status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}
.cv-job-add-status[data-state] { display: block; }
.cv-job-add-status[data-state="working"] {
  background: var(--accent-tint);
  color: var(--accent-2);
  border-color: var(--accent-tint-2);
}
.cv-job-add-status[data-state="success"] {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-tint);
}
.cv-job-add-status[data-state="error"] {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-tint);
}
.cv-job-add-status__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-bottom: 4px;
}
.cv-job-add-status__head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.cv-job-add-status[data-state="working"] .cv-job-add-status__head::before {
  animation: cv-ingest-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cv-job-add-status[data-state="working"] .cv-job-add-status__head::before { animation: none; }
}
.cv-job-add-status__body { font-family: var(--font-mono); font-size: 12.5px; }
.cv-job-add-status__link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent-tint-2);
  text-underline-offset: 2px;
}
.cv-job-add-status__link:hover { text-decoration-color: var(--accent); }

.cv-job-add-sources {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cv-job-add-sources span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--ink-4);
  background: var(--paper);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── C4. Job template gallery (per-job CV picker) ───────────── */
.cv-tplgallery-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.cv-tplgallery-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cv-tplgallery-head__copy { flex: 1 1 480px; min-width: 0; }
.cv-tplgallery-head__title {
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink);
  margin: 10px 0 0;
}
.cv-tplgallery-head__title em { color: var(--accent); font-style: normal; }
.cv-tplgallery-head__sub {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--ink-4);
  font-size: 14.5px;
  line-height: 1.55;
}
.cv-tplgallery-head__back {
  font-size: 13px;
  color: var(--ink-4);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}
.cv-tplgallery-head__back:hover { color: var(--ink); text-decoration: none; }
.cv-tplgallery-head__selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--accent-tint);
  color: var(--accent-2);
  border: 1px solid var(--accent-tint-2);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
}
.cv-tplgallery-head__selected .mono {
  font-size: 11.5px;
  color: var(--accent);
}

.cv-tplgallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 1024px) {
  .cv-tplgallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cv-tplgallery-grid { grid-template-columns: 1fr; }
  .cv-tplgallery-head__title { font-size: 28px; }
}

.cv-tplgallery-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.cv-tplgallery-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
}
.cv-tplgallery-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint), var(--shadow-md);
}
.cv-tplgallery-card__pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent);
  color: var(--paper);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 3;
}
.cv-tplgallery-card__category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.cv-tplgallery-card__name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cv-tplgallery-card__desc {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
  min-height: 2.6em;
}
.cv-tplgallery-card__exports {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.cv-tplgallery-card__fit-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}
.cv-tplgallery-card__fit-ok::before {
  content: "✓";
  font-weight: 600;
}
.cv-tplgallery-card__fit-warn {
  background: var(--warning-tint);
  color: var(--warning);
  border: 1px solid var(--warning-tint);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.cv-tplgallery-card__fit-warn strong { font-weight: 500; }
.cv-tplgallery-card__fit-warn ul { margin: 6px 0 0; padding-left: 16px; }
.cv-tplgallery-card__trim {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
}
.cv-tplgallery-card__trim:hover { background: var(--warning-tint); }
.cv-tplgallery-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.cv-tplgallery-card__open {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-4);
  text-decoration: none;
}
.cv-tplgallery-card__open:hover { color: var(--ink); }
.cv-tplgallery-card__preview-trigger {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
}
.cv-tplgallery-card__preview-trigger:hover {
  background: var(--paper-2);
  border-color: var(--ink-5);
  color: var(--ink);
}

/* ── C5. Document editor (NEW · /job/<key>/document/<tid>) ───
   Mirrors p2-workspace.jsx <DocumentEditor>: A4 viewport on the
   left, version-history rail on the right, export dock at the
   foot of the rail. Built around .cv-doc-editor-* — the inline
   editable slots inside the rendered document still use
   .editable-slot[data-field-path] from
   render_application_document_html so the existing patch-collect
   JS contract is preserved (tests assert collectEditablePatch and
   data-field-path="candidate.name" both appear in the response). */
.cv-doc-editor {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.cv-doc-editor__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cv-doc-editor__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-4);
}
.cv-doc-editor__crumbs a { color: var(--ink-4); text-decoration: none; }
.cv-doc-editor__crumbs a:hover { color: var(--ink); }
.cv-doc-editor__crumbs-sep { color: var(--ink-5); }
.cv-doc-editor__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cv-doc-editor__template-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.cv-doc-editor__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cv-doc-editor__shell { grid-template-columns: 1fr; }
}

/* The A4 paper viewport. We constrain the rendered template HTML
   so it always reads as a sheet, with a soft shadow against the
   light viewport bg. */
.cv-doc-editor__viewport {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  min-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cv-doc-editor__paper {
  margin: 0 auto;
  width: 100%;
  max-width: 820px;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 24px 48px rgba(9, 9, 11, 0.10), 0 4px 12px rgba(9, 9, 11, 0.05);
  overflow: hidden;
}
.cv-doc-editor__paper > * { width: 100%; }
.cv-doc-editor__paper .editable-slot {
  outline: 1px dashed transparent;
  outline-offset: 2px;
  border-radius: 3px;
  transition: outline-color 0.12s, background 0.12s;
}
.cv-doc-editor__paper .editable-slot:hover {
  outline-color: var(--accent-tint-2);
  background: var(--accent-tint);
}
.cv-doc-editor__paper .editable-slot:focus {
  outline-color: var(--accent);
  background: var(--paper);
}

/* === Mobile canvas + focus editing (document_editor_canvas.js) === */
.cv-canvas-zoom { position: sticky; bottom: 12px; display: flex; gap: 8px; justify-content: center; margin-top: 8px; z-index: 5; }
.cv-canvas-zoom button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); font-size: 20px; }
@media (min-width: 1025px) and (pointer: fine) { .cv-canvas-zoom { display: none; } }

.cv-focus-overlay { position: fixed; inset: 0; background: var(--paper); z-index: 50; display: none; flex-direction: column; }
body[data-cv-focus] { overflow: hidden; }
body[data-cv-focus] .cv-focus-overlay { display: flex; }
.cv-focus-overlay__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.cv-focus-overlay__bar button, .cv-focus-overlay__menu { font-size: 22px; background: none; border: 0; text-decoration: none; color: inherit; cursor: pointer; }
.cv-focus-overlay__title { font-weight: 600; flex: 1; text-align: center; }
.cv-focus-overlay__stage { flex: 1; overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
/* Re-establish document base typography for a relocated section (focus risk #1). */
.cv-focus-overlay__stage { font-family: 'Lato', system-ui, sans-serif; color: #303642; font-size: 12pt; line-height: 1.5; }
.cv-focus-overlay__stage .editable-slot { padding: 8px; min-height: 36px; }
.cv-focus-overlay__nav { display: flex; justify-content: space-between; padding: 8px 14px; }
.cv-focus-overlay__save { margin: 0 14px 16px; padding: 14px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font-size: 16px; }

/* The right-hand rail collects the toolbar, fit-status banner,
   version history list, manual JSON patch escape hatch, and the
   export dock. */
.cv-doc-editor__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  align-self: start;
}
.cv-doc-editor__rail-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.cv-doc-editor__rail-card .eyebrow { display: block; margin-bottom: 10px; }
.cv-doc-editor__rail-card-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.cv-doc-editor__rail-card-body {
  color: var(--ink-4);
  font-size: 12.5px;
  line-height: 1.5;
}

.cv-doc-editor__toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-doc-editor__toolbar-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-doc-editor__toolbar-row > * { flex: 1 1 auto; }

.cv-doc-editor__fit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.cv-doc-editor__fit--ok {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-tint);
}
.cv-doc-editor__fit--warn {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: var(--warning-tint);
}
.cv-doc-editor__fit-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  flex-shrink: 0;
}
.cv-doc-editor__fit-body strong { font-weight: 500; }
.cv-doc-editor__fit-body ul { margin: 4px 0 0; padding-left: 16px; }

.cv-doc-editor__history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.cv-doc-editor__history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--paper-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cv-doc-editor__history-item:hover {
  background: var(--accent-tint);
  border-color: var(--accent-tint-2);
}
.cv-doc-editor__history-item--current {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-tint);
}
.cv-doc-editor__history-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.cv-doc-editor__history-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.cv-doc-editor__history-empty {
  font-size: 12.5px;
  color: var(--ink-4);
  font-style: italic;
  padding: 8px 0;
}

.cv-doc-editor__patch {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.cv-doc-editor__patch:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}

.cv-doc-editor__exports {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.cv-doc-editor__export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  font-family: var(--font-sans);
  transition: border-color 0.12s, background 0.12s;
}
.cv-doc-editor__export:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-2);
  text-decoration: none;
}
.cv-doc-editor__export-fmt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.cv-doc-editor__status {
  display: none;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--ink-4);
  margin-top: 4px;
}
.cv-doc-editor__status[data-tone="success"] { color: var(--success); display: block; }
.cv-doc-editor__status[data-tone="error"] { color: var(--danger); display: block; }
.cv-doc-editor__status[data-tone="working"] { color: var(--accent); display: block; }
/* === PHASE C END === */

/* === PHASE D START · Personal & monitoring === */
/* Owned by: personal-coder. Components for profile, cv_conversation,
   shortlist, batch_review, ai_shortlist_*, monitoring, recruiter_pack,
   monitoring_edit, trajectory, alerts_prefs.
   Reference: bundle/screens/{p3-p4-personal,p5-p6-monitoring-account}.jsx
   Tokens: --paper, --ink, --accent, --rule, --rule-strong, --r-md, --r-lg.
   Naming: cv-* — never bare element selectors. */

/* ----- D1. Page shell — shared by recruiter_pack, monitoring_edit,
   trajectory_view, alerts_prefs, refreshed cv_conversation. Mirrors the
   .cv-page / .cv-mon-page padding rhythm without re-declaring it. */
.cv-personal-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}
.cv-personal-header {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.cv-personal-header__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: 36px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 6px 0 10px;
}
.cv-personal-header__title em {
  font-style: normal;
  color: var(--accent);
}
.cv-personal-header__sub {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}
.cv-personal-header__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----- D2. Two-column rhythm used by recruiter_pack + alerts_prefs +
   monitoring_edit. Sidebar collapses below 960px. */
.cv-personal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.cv-personal-grid--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  .cv-personal-grid { grid-template-columns: 1fr; }
}

/* ----- D3. Recruiter pack workshop. The page is conceptually a 3-step
   workshop: brief → generate → output. Reuses .cv-tool-card chrome and
   adds a step-strip + dual-pane output. */
.cv-recruiter-steps {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.cv-recruiter-steps__cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.cv-recruiter-steps__cell:last-child { border-right: none; }
.cv-recruiter-steps__cell--active {
  background: var(--paper-2);
}
.cv-recruiter-steps__cell--done .cv-recruiter-steps__num {
  background: var(--success);
  color: var(--paper);
  border-color: var(--success);
}
.cv-recruiter-steps__cell--active .cv-recruiter-steps__num {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.cv-recruiter-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  background: var(--paper);
  margin-bottom: 4px;
}
.cv-recruiter-steps__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-recruiter-steps__hint {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.45;
}

.cv-recruiter-mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.cv-recruiter-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cv-recruiter-mode-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cv-recruiter-mode-pill--active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.cv-recruiter-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 1024px) {
  .cv-recruiter-output { grid-template-columns: 1fr; }
}
.cv-recruiter-pane {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  overflow: hidden;
}
.cv-recruiter-pane__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.cv-recruiter-pane__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.cv-recruiter-pane__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cv-recruiter-pane__body {
  flex: 1;
  padding: 18px 22px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
}
.cv-recruiter-pane__body p { margin: .5em 0; }
.cv-recruiter-pane__body h1,
.cv-recruiter-pane__body h2,
.cv-recruiter-pane__body h3 {
  font-family: var(--font-display, var(--font-sans));
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 1.1em 0 .35em;
}
.cv-recruiter-pane__editor {
  flex: 1;
  width: 100%;
  padding: 18px 22px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  resize: none;
  outline: none;
}
.cv-recruiter-empty {
  padding: 36px 22px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.6;
  font-style: italic;
}

.cv-recruiter-progress {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: pre-wrap;
  min-height: 18px;
  line-height: 1.55;
}
.cv-recruiter-progress--idle { display: none; }

/* ----- D4. Shared "side card" tweaks for the alerts/recruiter context.
   Existing .cv-side-card already styled in Phase 2 — only add an
   inline list helper. */
.cv-side-card__divider {
  border-top: 1px solid var(--rule);
  margin: 12px -18px;
}

/* ----- D5. Monitoring edit form. Reuses .cv-criteria-form fields but
   without the disclosure chrome and split into sections for clarity. */
.cv-monedit-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.cv-monedit-card + .cv-monedit-card { margin-top: 18px; }
.cv-monedit-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.cv-monedit-card__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
}
.cv-monedit-card__sub {
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.55;
  margin: 0 0 14px;
}
.cv-monedit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.cv-monedit-grid--full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .cv-monedit-grid { grid-template-columns: 1fr; }
}
.cv-monedit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.cv-monedit-actions__spacer { flex: 1; }

/* ----- D6. Trajectory view — single-criterion deep look. The big chart
   surface, the snapshot list, and an explanation column. */
.cv-traj-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}
@media (max-width: 960px) {
  .cv-traj-hero { grid-template-columns: 1fr; }
}
.cv-traj-chart {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  min-height: 320px;
}
.cv-traj-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.cv-traj-chart__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cv-traj-chart__num {
  font-family: var(--font-display, var(--font-sans));
  font-size: 38px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.cv-traj-chart__delta {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-4);
}
.cv-traj-chart__delta--up { color: var(--success); }
.cv-traj-chart__delta--down { color: var(--danger); }
.cv-traj-chart__svg-wrap {
  flex: 1;
  width: 100%;
  position: relative;
  min-height: 220px;
}
.cv-traj-chart__svg-wrap svg { display: block; width: 100%; height: 220px; }

.cv-traj-explain {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cv-traj-explain__heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-family: var(--font-mono);
  margin: 0;
}
.cv-traj-explain p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0;
}
.cv-traj-explain__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cv-traj-explain__list li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}
.cv-traj-explain__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}

.cv-traj-snapshots {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.cv-traj-snapshots__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cv-traj-snapshots__row {
  display: grid;
  grid-template-columns: 110px 1fr 100px;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
  align-items: baseline;
}
.cv-traj-snapshots__row:first-of-type { border-top: none; }
.cv-traj-snapshots__row--head {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  background: var(--paper);
}
.cv-traj-snapshots__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}
.cv-traj-snapshots__count {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

/* ----- D7. Alerts preferences — segmented rows with channel toggles
   and a digest preview. Reuses .cv-side-card on the right. */
.cv-alerts-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  align-items: center;
}
.cv-alerts-row + .cv-alerts-row { margin-top: 10px; }
.cv-alerts-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cv-alerts-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 2px;
}
.cv-alerts-row__sub {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
  margin: 0;
}
.cv-alerts-row__control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* iOS-style toggle */
.cv-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.cv-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cv-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.cv-toggle__track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, background .15s;
}
.cv-toggle input:checked + .cv-toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}
.cv-toggle input:checked + .cv-toggle__track::before {
  transform: translateX(16px);
}
.cv-toggle input:focus-visible + .cv-toggle__track {
  outline: 2px solid var(--accent-tint-2);
  outline-offset: 2px;
}

.cv-alerts-section {
  margin-bottom: 28px;
}
.cv-alerts-section__heading {
  display: block;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.cv-alerts-digest {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 20px 22px;
}
.cv-alerts-digest h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.cv-alerts-digest p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.55;
}
.cv-alerts-digest__sample {
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  padding: 12px 14px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ----- D8. cv_conversation grid (already used inline by template).
   Promote it to a real class so the layout stays consistent and the
   inline grid declaration in the template can simplify over time. */
.cv-conversation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1024px) {
  .cv-conversation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cv-conversation-diff-grid { grid-template-columns: 1fr !important; }
}

/* ----- D9. Empty / loading helpers shared across recruiter, trajectory,
   alerts. */
.cv-empty-block {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 36px 28px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.6;
}
.cv-empty-block__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}
.cv-loading-bar {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  overflow: hidden;
}
.cv-loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30%;
  background: var(--accent);
  border-radius: inherit;
  animation: cv-loading-slide 1.4s ease-in-out infinite;
}
@keyframes cv-loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}
/* === PHASE D END === */

/* === PHASE E START · Account, billing, notifications === */
/* Owned by: account-coder. Components for account, billing, notifications,
   shared SettingsShell pattern.
   Reference: bundle/screens/p5-p6-monitoring-account.jsx

   Naming: every component prefixed `cv-settings-` (or `cv-invoice-row`
   per the brief). The shell uses a 240px sticky left nav and a fluid
   content column with a max-width so long forms don't sprawl. The
   account/billing/notifications pages all extend
   `_partials/settings_shell.html` so this block holds the cross-page
   layout and the per-card / per-row variations. */

/* ---- Page wrapper ------------------------------------------------ */
.cv-settings-page {
  background: var(--paper);
  min-height: calc(100vh - 56px);
  padding: 32px 24px 64px;
  max-width: 1240px;
  margin: 0 auto;
}

/* ---- Shell ------------------------------------------------------- */
.cv-settings-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cv-settings-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 22px;
}
.cv-settings-shell__title {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 8px 0 8px;
  line-height: 1.05;
}
.cv-settings-shell__lede {
  color: var(--ink-4);
  font-size: 15px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}
.cv-settings-shell__header-aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-settings-shell__header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.cv-settings-shell__header-link:hover {
  background: var(--paper-2);
  border-color: var(--ink-5);
}
.cv-settings-shell__body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ---- Left nav ---------------------------------------------------- */
.cv-settings-nav {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.cv-settings-nav__eyebrow {
  padding: 0 4px 8px;
  color: var(--ink-5);
}
.cv-settings-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-settings-nav__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink-3);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cv-settings-nav__item:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.cv-settings-nav__item--active {
  background: var(--accent-tint);
  border-color: var(--accent-tint-2);
  color: var(--accent);
}
.cv-settings-nav__item--active:hover {
  background: var(--accent-tint);
  color: var(--accent);
}
.cv-settings-nav__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cv-settings-nav__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cv-settings-nav__item-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
}
.cv-settings-nav__item-sub {
  font-size: 11.5px;
  color: var(--ink-5);
  line-height: 1.35;
}
.cv-settings-nav__item--active .cv-settings-nav__item-sub {
  color: var(--accent);
  opacity: 0.78;
}
.cv-settings-nav__hint {
  margin-top: 14px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--ink-5);
  word-break: break-all;
}

/* ---- Content column --------------------------------------------- */
.cv-settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 720px;
}

/* ---- Flash messages --------------------------------------------- */
.cv-settings-flash {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-settings-flash__item {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--ink);
}
.cv-settings-flash__item--success {
  background: var(--success-tint);
  border-color: var(--success-tint);
  color: var(--success);
}
.cv-settings-flash__item--error,
.cv-settings-flash__item--danger {
  background: var(--danger-tint);
  border-color: var(--danger-tint);
  color: var(--danger);
}
.cv-settings-flash__item--warning {
  background: var(--warning-tint);
  border-color: var(--warning-tint);
  color: var(--warning);
}

/* ---- Card -------------------------------------------------------- */
.cv-settings-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cv-settings-card--danger {
  border-color: var(--danger-tint);
  background: linear-gradient(180deg, var(--paper) 0%, #fff7f7 100%);
}
.cv-settings-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cv-settings-card__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 4px 0 0;
}
.cv-settings-card__sub {
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: 460px;
}
.cv-settings-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

/* ---- Form rows -------------------------------------------------- */
.cv-settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cv-settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-settings-row__label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
}
.cv-settings-row__input {
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cv-settings-row__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.cv-settings-row__input--locked {
  background: var(--paper-2);
  color: var(--ink-3);
}
.cv-settings-row__hint {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.5;
  margin: 0;
}
.cv-settings-row__hint a {
  color: var(--accent);
  text-decoration: none;
}
.cv-settings-row__hint a:hover {
  text-decoration: underline;
}
.cv-settings-form__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px dashed var(--rule);
  margin-top: 6px;
  padding-top: 16px;
}

/* ---- Sessions list (account.html) ------------------------------- */
.cv-settings-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cv-settings-session {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.cv-settings-session:last-child {
  border-bottom: none;
}
.cv-settings-session__primary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cv-settings-session__device {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.cv-settings-session__meta {
  font-size: 11.5px;
  color: var(--ink-5);
}
.cv-settings-session--empty {
  background: var(--paper-2);
}

/* ---- Plan grid (billing.html) ----------------------------------- */
.cv-settings-plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.cv-settings-plan__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-settings-plan__label {
  color: var(--ink-5);
}
.cv-settings-plan__value {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cv-settings-plan__sub {
  font-size: 11.5px;
  color: var(--ink-4);
}
.cv-settings-plan__features {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.cv-settings-plan__features ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
}
.cv-settings-plan__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.cv-settings-plan__features-empty {
  color: var(--ink-5);
  font-style: italic;
}

/* ---- Payment method (billing.html) ------------------------------ */
.cv-settings-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.cv-settings-payment__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cv-settings-payment__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cv-settings-payment__line {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.05em;
}
.cv-settings-payment__sub {
  font-size: 11.5px;
  color: var(--ink-5);
  margin-top: 2px;
}
.cv-settings-payment__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cv-settings-payment--empty {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 24px;
}
.cv-settings-payment__empty-copy {
  margin: 0 0 12px;
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---- Invoices table (billing.html) ------------------------------ */
.cv-settings-invoices {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cv-invoice-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 110px 100px 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  transition: background 0.12s;
}
.cv-invoice-row:last-child {
  border-bottom: none;
}
.cv-invoice-row:hover {
  background: var(--paper-2);
}
.cv-invoice-row--head {
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-5);
}
.cv-invoice-row--head:hover {
  background: var(--paper-2);
}
.cv-invoice-row__date {
  font-size: 12.5px;
  color: var(--ink-3);
}
.cv-invoice-row__desc {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-invoice-row__amount {
  font-size: 13.5px;
  color: var(--ink);
  text-align: right;
}
.cv-invoice-row__status {
  display: flex;
  justify-content: flex-start;
}
.cv-invoice-row__actions {
  display: flex;
  justify-content: flex-end;
}
.cv-invoice-row__actions-head {
  display: flex;
  justify-content: flex-end;
}
.cv-invoice-row__download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cv-invoice-row__download:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-invoice-row__download[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Notifications page ----------------------------------------- */
.cv-settings-notif-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.cv-settings-notif-toolbar__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cv-settings-notif-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cv-settings-notif-filter:hover {
  background: var(--paper-3);
  color: var(--ink);
}
.cv-settings-notif-filter--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-settings-notif-filter--active:hover {
  background: var(--ink-2);
  color: var(--paper);
}
.cv-settings-notif-filter__count {
  font-size: 11px;
  opacity: 0.65;
}
.cv-settings-notif-filter--active .cv-settings-notif-filter__count {
  opacity: 0.75;
}
.cv-settings-notif-toolbar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cv-settings-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.cv-settings-notif {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
  transition: background 0.12s;
}
.cv-settings-notif:last-child {
  border-bottom: none;
}
.cv-settings-notif:hover {
  background: var(--paper-2);
}
.cv-settings-notif--unread {
  background: var(--accent-tint);
}
.cv-settings-notif--unread:hover {
  background: var(--accent-tint-2);
}
.cv-settings-notif__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 7px;
  box-shadow: 0 0 0 3px var(--paper);
}
.cv-settings-notif--unread .cv-settings-notif__dot {
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.cv-settings-notif__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cv-settings-notif__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.cv-settings-notif__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-settings-notif--unread .cv-settings-notif__title {
  font-weight: 600;
}
.cv-settings-notif__when {
  font-size: 11px;
  color: var(--ink-5);
  flex-shrink: 0;
}
.cv-settings-notif__detail {
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.5;
  margin: 0;
}
.cv-settings-notif__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.cv-settings-notif__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}
.cv-settings-notif__link:hover {
  text-decoration: underline;
}
.cv-settings-notif__mark-form {
  margin: 0;
  flex-shrink: 0;
}
.cv-settings-notif__mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-4);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cv-settings-notif__mark-btn:hover {
  background: var(--success);
  color: var(--paper);
  border-color: var(--success);
}

/* ---- Empty states ----------------------------------------------- */
.cv-settings-empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: 32px 24px;
  text-align: center;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.cv-settings-empty__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-settings-empty__copy {
  font-size: 13px;
  color: var(--ink-4);
  line-height: 1.55;
  max-width: 420px;
  margin: 0;
}
.cv-settings-empty__actions {
  margin-top: 8px;
}
.cv-settings-empty__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.cv-settings-empty__link:hover {
  text-decoration: underline;
}

/* ---- Mobile / narrow widths ------------------------------------- */
@media (max-width: 880px) {
  .cv-settings-page {
    padding: 24px 16px 56px;
  }
  .cv-settings-shell__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .cv-settings-shell__title {
    font-size: 28px;
  }
  .cv-settings-shell__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .cv-settings-nav {
    position: static;
    overflow-x: auto;
    flex-direction: row;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
  }
  .cv-settings-nav__eyebrow {
    display: none;
  }
  .cv-settings-nav__list {
    flex-direction: row;
    gap: 6px;
  }
  .cv-settings-nav__item {
    padding: 8px 10px;
    flex-shrink: 0;
  }
  .cv-settings-nav__item-text {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
  .cv-settings-nav__item-sub {
    display: none;
  }
  .cv-settings-nav__hint {
    display: none;
  }
  .cv-settings-content {
    max-width: none;
  }
  .cv-settings-card {
    padding: 18px;
  }
  .cv-settings-card__head {
    flex-direction: column;
    gap: 8px;
  }
  .cv-invoice-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    grid-template-areas:
      "desc   amount"
      "date   status"
      "act    act";
    gap: 4px 12px;
  }
  .cv-invoice-row--head {
    display: none;
  }
  .cv-invoice-row__desc { grid-area: desc; white-space: normal; }
  .cv-invoice-row__amount { grid-area: amount; text-align: right; }
  .cv-invoice-row__date { grid-area: date; }
  .cv-invoice-row__status { grid-area: status; justify-content: flex-end; }
  .cv-invoice-row__actions { grid-area: act; justify-content: flex-start; padding-top: 6px; }
  .cv-settings-payment {
    flex-direction: column;
    align-items: flex-start;
  }
  .cv-settings-payment__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .cv-settings-notif {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .cv-settings-notif__mark-form {
    grid-column: 2;
    justify-self: end;
    margin-top: 6px;
  }
}
/* === PHASE E END === */

/* === PHASE F START · Admin & operations === */
/* Owned by: admin-coder. Components for the dark operator chrome
   (#0d0d10 sidebar), operator_home, activity_log, ingest_status (priority),
   admin/templates_status (priority Stitch tracker), ingest, browse,
   prompt_lab, admin/templates_index, admin/templates_detail,
   master_profile_debug.
   Reference: bundle/screens/p7-admin.jsx
   Naming:
     .cv-admin-*    — dark operator chrome (sidebar, content area, nav, tiles)
     .cv-pipeline-* — Stitch pipeline tracker (templates_status)
     .cv-progress-* — progress bars + per-source rows (ingest_status)
*/

/* ---------- App shell ---------- */

.cv-admin-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--paper-2);
}

.cv-admin-sidebar {
  background: #0d0d10;
  color: #e5e5e7;
  padding: 1.25rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.cv-admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.9rem;
  text-decoration: none;
  color: #e5e5e7;
  border-bottom: 1px solid #1f1f23;
  margin-bottom: 0.35rem;
}
.cv-admin-sidebar__brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.cv-admin-sidebar__brand-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.cv-admin-sidebar__brand-suffix {
  color: #71717a;
  font-weight: 500;
}

.cv-admin-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cv-admin-sidebar__group-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #71717a;
  padding: 0.55rem 0.5rem 0.25rem;
}

.cv-admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  color: #d4d4d8;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.cv-admin-nav-item:hover {
  background: #1a1a1f;
  color: #fff;
}
.cv-admin-nav-item--active {
  background: #1f1f24;
  color: #fff;
  box-shadow: inset 2px 0 0 var(--accent-3);
}
.cv-admin-nav-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.85rem;
  color: #a1a1aa;
}
.cv-admin-nav-item--active .cv-admin-nav-item__icon { color: var(--accent-3); }
.cv-admin-nav-item__pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: var(--accent);
  color: #fff;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: cv-admin-pulse 1.4s infinite;
}

@keyframes cv-admin-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.cv-admin-sidebar__spacer { flex: 1; }

.cv-admin-sidebar__footer {
  border-top: 1px solid #1f1f23;
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.78rem;
}
.cv-admin-sidebar__health {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #d4d4d8;
}
.cv-admin-sidebar__health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
  animation: cv-admin-pulse 2s infinite;
}
.cv-admin-sidebar__version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}
.cv-admin-sidebar__version-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: #1f1f24;
  color: #a1a1aa;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.cv-admin-sidebar__exit {
  font-size: 0.75rem;
  color: #71717a;
  text-decoration: none;
}
.cv-admin-sidebar__exit:hover { color: var(--accent-3); }

.cv-admin-content {
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cv-admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.cv-admin-topbar__heading { display: flex; flex-direction: column; gap: 0.25rem; }
.cv-admin-topbar__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.cv-admin-topbar__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}
.cv-admin-topbar__sub {
  margin: 0.25rem 0 0;
  color: var(--ink-4);
  font-size: 0.92rem;
  max-width: 70ch;
}
.cv-admin-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cv-admin-topbar__btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.cv-admin-content__body {
  padding: 1.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 1240px;
}

@media (max-width: 900px) {
  .cv-admin-app { grid-template-columns: 1fr; }
  .cv-admin-sidebar {
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    position: relative;
  }
  .cv-admin-sidebar__brand { padding: 0.2rem 0.5rem; border-bottom: none; margin: 0; }
  .cv-admin-sidebar__group { flex-direction: row; gap: 0.25rem; }
  .cv-admin-sidebar__group-label { display: none; }
  .cv-admin-nav-item { padding: 0.35rem 0.55rem; }
  .cv-admin-sidebar__spacer { display: none; }
  .cv-admin-sidebar__footer {
    flex-direction: row;
    align-items: center;
    border: none;
    padding: 0;
    margin-left: auto;
    gap: 0.6rem;
  }
  .cv-admin-topbar { padding: 1rem 1rem 0.65rem; }
  .cv-admin-content__body { padding: 1rem 1rem 2rem; }
}

/* ---------- Operator-home tiles & inflight rows ---------- */

.cv-admin-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}
.cv-admin-tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-sm);
}
.cv-admin-tile__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cv-admin-tile__value {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-family: var(--font-sans);
}
.cv-admin-tile__value[data-kind="error"] { color: var(--danger); }
.cv-admin-tile__value[data-kind="ok"] { color: var(--success); }
.cv-admin-tile__value[data-kind="running"] { color: var(--accent); }
.cv-admin-tile__value[data-kind="paused"] { color: var(--warning); }
.cv-admin-tile__value[data-kind="idle"] { color: var(--ink-4); }
.cv-admin-tile__sub { font-size: 0.78rem; color: var(--ink-5); }

.cv-admin-card--operator { background: var(--paper); }

.cv-admin-inflight-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.cv-admin-inflight-row {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cv-admin-inflight-row__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cv-admin-inflight-row__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cv-admin-inflight-row__link {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.cv-admin-inflight-row__link:hover { color: var(--accent-deep); text-decoration: underline; }
.cv-admin-inflight-row__bar {
  height: 6px;
  background: var(--paper-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cv-admin-inflight-row__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
  min-width: 2px;
}
.cv-admin-inflight-row__meta {
  font-size: 0.78rem;
  color: var(--ink-4);
  font-family: var(--font-mono);
}
.cv-admin-inflight-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-4);
  font-style: italic;
}

.cv-admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .cv-admin-two-col { grid-template-columns: 1fr; }
}

.cv-admin-card__link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.cv-admin-card__link:hover { color: var(--accent-deep); text-decoration: underline; }
.cv-admin-card__empty {
  margin: 0.25rem 0 0;
  color: var(--ink-4);
  font-size: 0.85rem;
  font-style: italic;
}

.cv-admin-failure-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cv-admin-failure-row {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 0.6rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.cv-admin-failure-row__title { font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.cv-admin-failure-row__sub { font-size: 0.78rem; color: var(--ink-4); margin-top: 0.15rem; }
.cv-admin-failure-row__ts { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-5); }

.cv-admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.cv-admin-quick-action {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.cv-admin-quick-action:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-1px);
}
.cv-admin-quick-action__icon { font-size: 1.1rem; color: var(--accent); }
.cv-admin-quick-action__title { font-weight: 600; font-size: 0.9rem; }
.cv-admin-quick-action__sub { font-size: 0.76rem; color: var(--ink-4); }

/* ---------- Activity log ---------- */

.cv-admin-card--filter { padding: 0.8rem 0.95rem; }
.cv-admin-filter-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr auto;
  gap: 0.65rem;
  align-items: center;
}
@media (max-width: 720px) {
  .cv-admin-filter-row { grid-template-columns: 1fr; }
}
.cv-admin-filter-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 0.65rem;
}
.cv-admin-filter-search__icon { color: var(--ink-5); font-size: 1rem; }
.cv-admin-filter-search input {
  border: none;
  background: transparent;
  height: 36px;
  flex: 1;
  font: inherit;
  outline: none;
  color: var(--ink);
}
.cv-admin-filter-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.cv-admin-chip {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: all 0.12s;
}
.cv-admin-chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.cv-admin-chip--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cv-admin-filter-status {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.cv-admin-filter-status select {
  height: 36px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 0.6rem;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
}

.cv-admin-livetail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.cv-admin-livetail-toggle input { display: none; }
.cv-admin-livetail-toggle__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-5);
  transition: background 0.12s, box-shadow 0.12s;
}
.cv-admin-livetail-toggle input:checked + .cv-admin-livetail-toggle__dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
  animation: cv-admin-pulse 1.4s infinite;
}

.cv-admin-card--log { padding: 0; overflow: hidden; }
.cv-admin-log-table-wrap { overflow-x: auto; }
.cv-admin-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.cv-admin-log-table thead th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 1;
}
.cv-admin-log-table tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}
.cv-admin-log-table tbody tr:hover td { background: var(--paper-2); }
.cv-admin-log-table-wrap[data-cv-log-density="compact"] tbody td {
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
}
.cv-admin-log-table-wrap--live { border-top: 2px solid #34d399; }
.cv-admin-log-table__time { font-family: var(--font-mono); color: var(--ink-4); white-space: nowrap; }
.cv-admin-log-table__job-title { font-weight: 600; color: var(--ink); }
.cv-admin-log-table__job-id { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-5); margin-top: 0.1rem; }
.cv-admin-log-table__event { color: var(--ink-3); }
.cv-admin-log-table__action { white-space: nowrap; text-align: right; }
.cv-admin-log-table__open { font-size: 0.78rem; color: var(--accent); text-decoration: none; font-weight: 500; }
.cv-admin-log-table__open:hover { text-decoration: underline; color: var(--accent-deep); }

.cv-admin-log-level {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  background: var(--paper-3);
  color: var(--ink-3);
}
.cv-admin-log-level--info { background: var(--accent-tint); color: var(--accent-deep); }
.cv-admin-log-level--warn { background: var(--warning-tint); color: var(--warning); }
.cv-admin-log-level--error { background: var(--danger-tint); color: var(--danger); }

.cv-admin-log-kind {
  display: inline-block;
  font-size: 0.74rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--ink-3);
  font-weight: 500;
}
.cv-admin-log-kind--ingest { background: #e0f2fe; color: #0369a1; }
.cv-admin-log-kind--template { background: #fce7f3; color: #9d174d; }
.cv-admin-log-kind--post-process { background: #fef3c7; color: #92400e; }
.cv-admin-log-kind--ai-shortlist { background: #ede9fe; color: #5b21b6; }
.cv-admin-log-kind--monitoring { background: #d1fae5; color: #065f46; }
.cv-admin-log-kind--profile { background: #e0e7ff; color: #3730a3; }
.cv-admin-log-kind--batch { background: #fed7aa; color: #9a3412; }

.cv-admin-log-empty { padding: 2.5rem 1rem; text-align: center; }
.cv-admin-log-empty__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.cv-admin-log-empty__sub { color: var(--ink-4); margin: 0; }
.cv-admin-log-meta {
  margin: 0.55rem 0.95rem 0.85rem;
  font-size: 0.76rem;
  color: var(--ink-5);
  font-family: var(--font-mono);
}

/* ---------- Master profile debug ---------- */

.cv-admin-fact-list, .cv-admin-conflict-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cv-admin-fact-row {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cv-admin-fact-row__path {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  background: var(--paper-3);
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.cv-admin-fact-row__value {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}
.cv-admin-fact-row__provenance summary {
  font-size: 0.78rem;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.cv-admin-fact-row__provenance ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cv-admin-fact-row__provenance li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.cv-admin-fact-row__source-kind {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cv-admin-fact-row__source-label { font-weight: 500; }
.cv-admin-fact-row__provenance time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-5); }
.cv-admin-fact-row__provenance blockquote {
  margin: 0.25rem 0 0;
  padding: 0.35rem 0.6rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.78rem;
}

.cv-admin-conflict-row {
  background: var(--warning-tint);
  border: 1px solid var(--warning);
  border-radius: var(--r-md);
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cv-admin-conflict-row > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cv-admin-conflict-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cv-admin-conflict-options li {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 0.5rem;
  font-size: 0.82rem;
  align-items: baseline;
}
.cv-admin-conflict-options__value { color: var(--ink); font-weight: 500; }
.cv-admin-conflict-options__source { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.74rem; }
.cv-admin-conflict-options time { color: var(--ink-5); font-family: var(--font-mono); font-size: 0.72rem; }

.cv-admin-source-timeline {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cv-admin-source-timeline li {
  display: grid;
  grid-template-columns: 16px max-content 1fr max-content;
  gap: 0.55rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  font-size: 0.84rem;
}
.cv-admin-source-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.cv-admin-source-timeline__dot[data-kind="cv"] { background: var(--accent-3); }
.cv-admin-source-timeline__dot[data-kind="form"] { background: var(--success); }
.cv-admin-source-timeline__dot[data-kind="persona"] { background: var(--warning); }
.cv-admin-source-timeline__kind {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cv-admin-source-timeline__label { color: var(--ink); }
.cv-admin-source-timeline time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-5); }

/* ---------- Pipeline tracker (templates_status) ---------- */

.cv-pipeline-summary__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.cv-pipeline-summary__meta strong { color: var(--ink); font-weight: 600; }
.cv-pipeline-summary__error {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  color: var(--danger);
  font-size: 0.85rem;
}
.cv-pipeline-summary__traceback summary {
  font-size: 0.82rem;
  color: var(--ink-3);
  cursor: pointer;
  margin-top: 0.4rem;
}
.cv-pipeline-summary__traceback pre {
  max-height: 420px;
  overflow: auto;
  font-size: 0.74rem;
  margin-top: 0.35rem;
}

.cv-pipeline-tracker { padding: 1.1rem 1.25rem; }

.cv-pipeline-steps {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cv-pipeline-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.85rem;
  padding: 0;
  position: relative;
}
.cv-pipeline-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 0.25rem;
}
.cv-pipeline-step__index {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--paper-3);
  color: var(--ink-4);
  border: 2px solid var(--rule);
  position: relative;
  z-index: 1;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cv-pipeline-step__connector {
  width: 2px;
  flex: 1;
  background: var(--rule);
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  min-height: 20px;
}
.cv-pipeline-step:last-child .cv-pipeline-step__connector { display: none; }

.cv-pipeline-step--succeeded .cv-pipeline-step__index {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success);
  font-size: 0.95rem;
}
.cv-pipeline-step--succeeded .cv-pipeline-step__connector { background: var(--success); }
.cv-pipeline-step--running .cv-pipeline-step__index {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-color: var(--accent);
  animation: cv-admin-pulse 1.4s infinite;
}
.cv-pipeline-step--failed .cv-pipeline-step__index {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger);
}
.cv-pipeline-step--failed .cv-pipeline-step__connector { background: var(--danger); opacity: 0.5; }
.cv-pipeline-step--skipped .cv-pipeline-step__index {
  background: var(--paper-3);
  color: var(--ink-5);
  border-color: var(--rule);
  text-decoration: line-through;
}

.cv-pipeline-step__body {
  padding: 0.4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cv-pipeline-step__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cv-pipeline-step__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.cv-pipeline-step__status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--ink-4);
}
.cv-pipeline-step--running .cv-pipeline-step__status { background: var(--accent-tint); color: var(--accent-deep); }
.cv-pipeline-step--succeeded .cv-pipeline-step__status { background: var(--success-tint); color: var(--success); }
.cv-pipeline-step--failed .cv-pipeline-step__status { background: var(--danger-tint); color: var(--danger); }
.cv-pipeline-step--skipped .cv-pipeline-step__status { background: var(--paper-3); color: var(--ink-5); }

.cv-pipeline-step__elapsed {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-5);
  margin-left: auto;
}
.cv-pipeline-step__blurb { margin: 0; font-size: 0.82rem; color: var(--ink-4); }
.cv-pipeline-step__actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.cv-pipeline-step__artefact,
.cv-pipeline-step__log-toggle,
.cv-pipeline-step__retry {
  font-size: 0.76rem;
  padding: 0.25rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
}
.cv-pipeline-step__artefact:hover,
.cv-pipeline-step__log-toggle:hover { color: var(--accent); border-color: var(--accent); }
.cv-pipeline-step__retry { color: var(--danger); border-color: var(--danger); }
.cv-pipeline-step__retry:hover { background: var(--danger-tint); }
.cv-pipeline-step__log {
  margin: 0.25rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--ink);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: var(--r-md);
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Progress bars (ingest_status) ---------- */

.cv-progress-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
}
.cv-progress-active-badge__spinner {
  width: 11px;
  height: 11px;
  border: 2px solid var(--accent-tint-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cv-progress-spin 0.85s linear infinite;
}
@keyframes cv-progress-spin { to { transform: rotate(360deg); } }
.cv-progress-elapsed-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}

.cv-progress-hero { padding: 1rem 1.25rem; }
.cv-progress-hero__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cv-progress-hero__message {
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.cv-progress-hero__percent {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  font-family: var(--font-mono);
}

.cv-progress-track {
  background: var(--paper-3);
  border-radius: var(--r-pill);
  height: 8px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cv-progress-track--lg { height: 16px; }
.cv-progress-track--inline { flex: 1; }
.cv-progress-track__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
  min-width: 2px;
}
.cv-progress-track__fill--success {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.cv-progress-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (max-width: 900px) {
  .cv-progress-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .cv-progress-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cv-progress-stat {
  background: var(--paper-2);
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  text-align: center;
  min-width: 0;
}
.cv-progress-stat__label {
  font-size: 0.66rem;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
}
.cv-progress-stat__value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.1;
}
.cv-progress-stat__sub { font-size: 0.7rem; color: var(--ink-5); margin-top: 2px; font-family: var(--font-mono); }
.cv-progress-stat--accent .cv-progress-stat__value { color: var(--accent); }
.cv-progress-stat--muted .cv-progress-stat__value { color: var(--ink-5); }

.cv-progress-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .cv-progress-two-col { grid-template-columns: 1fr; }
}

.cv-progress-source-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
}
.cv-progress-source-empty {
  font-size: 0.85rem;
  color: var(--ink-4);
  font-style: italic;
  margin: 0;
}
.cv-progress-source-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  padding: 0.3rem 0.1rem;
}
.cv-progress-source-row--active { background: var(--accent-tint); border-radius: var(--r-sm); padding: 0.3rem 0.45rem; }
.cv-progress-source-row__name {
  min-width: 130px;
  color: var(--ink-2);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cv-progress-source-row__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: cv-admin-pulse 1.2s infinite;
}
.cv-progress-source-row__count {
  min-width: 42px;
  text-align: right;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.84rem;
  font-family: var(--font-mono);
}

.cv-progress-phase-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cv-progress-phase-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--rule);
}
.cv-progress-phase-row:last-child { border-bottom: none; }
.cv-progress-phase-row__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cv-progress-phase-row__dot--done { background: var(--success); }
.cv-progress-phase-row__dot--active { background: var(--accent); animation: cv-admin-pulse 1.1s infinite; }
.cv-progress-phase-row__dot--pending { background: var(--rule); }
.cv-progress-phase-row__name { flex: 1; color: var(--ink-3); }
.cv-progress-phase-row__time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-5); min-width: 56px; text-align: right; }

.cv-progress-detail-panel { padding: 1rem 1.25rem; }
.cv-progress-detail-pct { font-weight: 600; font-size: 0.85rem; color: var(--accent); font-family: var(--font-mono); }
.cv-progress-detail-meta { font-size: 0.82rem; color: var(--ink-4); margin: 0 0 0.4rem; }
.cv-progress-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.cv-progress-detail-grid__item {
  text-align: center;
  padding: 0.55rem;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
}
.cv-progress-detail-grid__val {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-sans);
}
.cv-progress-detail-grid__lbl {
  font-size: 0.65rem;
  color: var(--ink-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

.cv-progress-conflict-badge {
  font-size: 0.74rem;
  background: var(--success-tint);
  color: var(--success);
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.cv-progress-conflict-badge--muted { background: var(--paper-3); color: var(--ink-4); }

.cv-progress-event-card { padding: 1rem 1.25rem; }
.cv-progress-event-card__autoscroll {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--ink-4);
}
.cv-progress-event-log {
  background: var(--ink);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  height: 280px;
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid var(--ink-3);
}
.cv-progress-event-log__row { display: block; padding: 0.05rem 0; }
.cv-progress-event-log__time { color: #71717a; margin-right: 0.55rem; }
.cv-progress-event-log__phase { color: var(--accent-3); margin-right: 0.55rem; font-weight: 600; }
.cv-progress-event-log__text { color: #e4e4e7; }
.cv-progress-event-log__error { color: #fca5a5; }
.cv-progress-event-log__indent { color: #71717a; }

.cv-progress-error-card { border-color: var(--danger) !important; }
.cv-progress-error-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: var(--danger);
  max-height: 180px;
  overflow-y: auto;
}
.cv-progress-error-list__row {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--danger-tint);
}

.cv-progress-controls {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.85rem;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}
.cv-progress-controls__danger { color: var(--danger); border-color: var(--rule); }
.cv-progress-controls__danger:hover { background: var(--danger-tint); border-color: var(--danger); }

.cv-progress-run-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.cv-progress-run-table thead th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule);
}
.cv-progress-run-table tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.cv-progress-location-body { font-size: 0.84rem; color: var(--ink-3); }
.cv-progress-location-group { margin-bottom: 0.6rem; }
.cv-progress-location-group__source { font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.cv-progress-location-group__row { padding-left: 0.45rem; color: var(--ink-3); }
.cv-progress-location-group__count { color: var(--ink-5); }

/* ---------- Ingest configuration ---------- */

.cv-admin-import-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.cv-admin-import-row__input {
  flex: 1;
  height: 38px;
  padding: 0 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font: inherit;
}
.cv-admin-import-row__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.cv-admin-import-row__status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-4); }
.cv-admin-import-row__status[data-kind="success"] { color: var(--success); }
.cv-admin-import-row__status[data-kind="error"] { color: var(--danger); }
.cv-admin-import-row__status[data-kind="info"] { color: var(--accent-deep); }

.cv-admin-keyword-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.88rem; }
.cv-admin-keyword-table thead th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule);
}
.cv-admin-keyword-table__on { width: 50px; }
.cv-admin-keyword-table__kw { width: 240px; }
.cv-admin-keyword-table__action { width: 50px; text-align: right; }
.cv-admin-keyword-table tbody td {
  padding: 0.7rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cv-admin-keyword-table__text {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font: inherit;
}
.cv-admin-keyword-table__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.cv-admin-keyword-table__source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  cursor: pointer;
}
.cv-admin-keyword-table__remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.cv-admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.cv-admin-field small {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--ink-5);
}
.cv-admin-field__inline {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.cv-admin-field__inline input[type="number"] { flex: 1; }
.cv-admin-field__inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
}

.cv-admin-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
}
.cv-admin-source-grid__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  cursor: pointer;
}

.cv-admin-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: 0.86rem;
  color: var(--ink-2);
  cursor: pointer;
}
.cv-admin-toggle input { width: 16px; height: 16px; }
.cv-admin-execute-btn { width: 100%; margin-top: 1rem; height: 44px; font-size: 0.95rem; }

/* ---------- Ingest restructure (2026-05) ----------
   Pill-style global source picker, collapsed per-keyword
   source override, advanced disclosure, and sticky action
   footer. Scoped via cv-pillbar / cv-srcpicker / cv-advanced /
   cv-ingest-footer / cv-ingest-summary so existing admin
   surfaces are unaffected. */

.cv-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.cv-link-btn:hover { text-decoration: underline; }

.cv-admin-card__header-action { margin-left: auto; }

/* --- Global sources pillbar --- */
.cv-pillbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.cv-pillbar__bulk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-5);
}
.cv-pillbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.cv-pillbar__chip input { margin: 0; }
.cv-pillbar__chip:has(input:checked) {
  background: var(--accent-tint);
  border-color: var(--accent-tint-2);
  color: var(--accent);
}
.cv-pillbar__chip:hover { border-color: var(--accent); }

/* --- Per-row collapsed source override --- */
.cv-kwrow__sources { min-width: 220px; }

.cv-srcpicker { position: relative; }
.cv-srcpicker__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  max-width: 100%;
}
.cv-srcpicker__pill::-webkit-details-marker { display: none; }
.cv-srcpicker__pill:hover { border-color: var(--accent); }
.cv-srcpicker[open] > .cv-srcpicker__pill {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}
.cv-srcpicker__summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.cv-srcpicker__summary--empty { color: var(--ink-5); font-style: italic; }
.cv-srcpicker__chev {
  font-size: 0.7rem;
  color: var(--ink-5);
  transition: transform 0.15s ease;
}
.cv-srcpicker[open] > .cv-srcpicker__pill .cv-srcpicker__chev { transform: rotate(180deg); }

.cv-srcpicker__panel {
  margin-top: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}
.cv-srcpicker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.35rem 0.7rem;
}
.cv-srcpicker__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-2);
  cursor: pointer;
}
.cv-srcpicker__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}
.cv-srcpicker__done {
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
}

/* --- Wider single field (locations) --- */
.cv-admin-field--wide { margin-top: 0.5rem; }
.cv-admin-field--wide input { width: 100%; }

/* --- Advanced disclosure --- */
.cv-advanced {
  margin-top: 0.9rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
}
.cv-advanced__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ink-3);
  user-select: none;
}
.cv-advanced__summary::-webkit-details-marker { display: none; }
.cv-advanced__chev {
  font-size: 0.7rem;
  color: var(--ink-5);
  transition: transform 0.15s ease;
}
.cv-advanced[open] > .cv-advanced__summary .cv-advanced__chev { transform: rotate(180deg); }
.cv-advanced__body {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* --- Sticky action footer + live summary --- */
.cv-ingest-footer {
  position: sticky;
  bottom: 0;
  margin-top: 1.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 10;
}
.cv-ingest-summary {
  flex: 1;
  font-size: 0.8rem;
  color: var(--ink-3);
  line-height: 1.4;
  min-width: 240px;
}
.cv-ingest-summary strong { color: var(--ink); font-weight: 600; }
.cv-ingest-footer__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .cv-ingest-footer {
    position: static;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
  }
  .cv-ingest-footer__actions { justify-content: stretch; }
  .cv-ingest-footer__actions .cv-btn { flex: 1; }
  .cv-kwrow__sources { min-width: 0; }
  .cv-srcpicker__summary { max-width: 140px; }
}

/* ---------- Browse table tweaks ---------- */

.cv-admin-browse-filter-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: end;
}

/* ---------- Prompt lab ---------- */

.cv-prompt-lab-card { padding: 1.25rem; }
.cv-prompt-lab-table { width: 100%; border-collapse: collapse; }
.cv-prompt-lab-table thead th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule);
}
.cv-prompt-lab-table tbody td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

/* === PHASE F END === */

/* === PHASE G START · Mobile === */
/* Owned by: mobile-coder. Media queries and responsive overrides for
   priority pages (dashboard, role detail, discover, pricing, onboarding,
   auth). Admin surfaces stay desktop-first per the brief and are not
   addressed here.
   Reference: bundle/screens/mobile.jsx
   Breakpoints follow the existing cveze.css ladder:
     ≤1100px  — tablet / narrow desktop reflow
     ≤700px   — phone single-column reflow
   All overrides preserve token usage (no new colors) and aim for a 40px
   minimum tap target on interactive primitives. */

/* ── G.1  Tablet ladder (≤1100px) ─────────────────────────────
   Reflow two-column page chromes (job-detail rail, dashboard rail,
   pricing trio) before they crush to a phone column. */
@media (max-width: 1100px) {
  /* Job detail: 2fr 1fr → single column; sticky rail becomes inline. */
  .cv-job-detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .cv-job-detail-grid__rail { order: 2; }
  .cv-apply-card__sticky { position: static; top: auto; }

  /* Dashboard: 1fr 320px → single column; sidebar slides under main. */
  .cv-dashboard { grid-template-columns: 1fr; gap: 24px; }
  .cv-dashboard__sidebar { position: static; top: auto; }

  /* Pricing trio: 3 tiers → 2-up at tablet so the featured tier still
     reads as the centerpiece without overflowing. */
  .cv-pricing-tier-grid { grid-template-columns: repeat(2, 1fr); padding: 28px 24px 64px; }

  /* Discover/search: shed the lowest-priority columns at tablet so the
     job-card table fits without horizontal scroll. data-col attributes
     are owned by base.html JS for show/hide; CSS only suppresses the
     least-actionable columns here. */
  .job-card td[data-col="col-source"],
  .job-card td[data-col="col-expires"],
  thead th[data-col="col-source"],
  thead th[data-col="col-expires"] { display: none; }

  /* Dossier head: keep the existing 960px collapse but tighten the rail
     gap so the badge row breathes at iPad widths. */
  .cv-dossier-head { gap: 24px; }

  /* Onboarding: trim the aside column at tablet so the main step area
     gets a full reading width. */
  .cv-onb__aside { width: 280px; padding: 32px 24px; }
  .cv-onb__main { padding: 36px 40px; }
}

/* ── G.2  Phone ladder (≤700px) ───────────────────────────────
   Single-column reflow, condensed nav, full-width CTAs, and tap-target
   floor for interactive primitives. iOS-frame styling cues from the
   mobile.jsx reference: stacked cards, condensed nav, generous padding
   on touch surfaces. */
@media (max-width: 700px) {
  /* Page chrome: tighten gutters across the major page wrappers so card
     edges don't kiss the viewport. */
  .cv-page { padding: 20px 16px 56px; }

  /* Job-detail tab panels: the questions/CV/CL tabs render inside
     `.cv-tab-panel` (24px) which itself wraps tool-cards with their own
     padding — a doubled gutter that crushes the question card on phones.
     Trim the panel gutter; the inner `#cv-questions-root` inline 24px is
     overridden in the job_detail scoped <style> (id beats class+media). */
  .cv-tab-panel { padding: 16px; }
  .cv-question-card__head { gap: 8px; }

  /* Application-questions tab — flatten the box-in-box nesting on phones.
     Desktop stacks tool-card › question-card › panel › history › message
     (up to 5 bordered/filled shells, several sharing the same background),
     which cramps the viewport. On phones the screen shows one question at a
     time, so the nested chrome is pure overhead: strip the redundant outer
     shells and let the `.page` gutter + section labels + hairline dividers
     carry the hierarchy. The only surviving boxes are the actual input
     fields (textareas), which *should* read as fields. */
  #cv-questions-root {
    border: 0; background: none; box-shadow: none;
    border-radius: 0; padding: 0;
  }
  .cv-question-card {
    border: 0; background: none; border-radius: 0; padding: 0; gap: 18px;
  }
  .cv-question-card + .cv-question-card {
    border-top: 1px solid var(--rule); padding-top: 20px;
  }
  .cv-question-card__body { gap: 22px; }
  .cv-question-card__panel {
    border: 0; background: none; border-radius: 0; padding: 0;
  }
  .cv-question-card__panel + .cv-question-card__panel {
    border-top: 1px solid var(--rule); padding-top: 18px;
  }
  .cv-question-card__history {
    border: 0; background: none; border-radius: 0; padding: 0;
  }
  .cv-question-card__history-item {
    border: 0; border-left: 2px solid var(--rule);
    border-radius: 0; background: none; padding: 2px 0 2px 10px;
  }
  .cv-question-card__history-item--user {
    border-left-color: var(--accent); background: none;
  }

  /* Greeting: stack title and actions, full-width CTAs. */
  .cv-greeting { gap: 16px; margin-bottom: 24px; }
  .cv-greeting__title { font-size: 30px; }
  .cv-greeting__actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .cv-greeting__actions > * { flex: 1 1 100%; }
  .cv-greeting__actions .btn,
  .cv-greeting__actions .cv-btn,
  .cv-greeting__actions form { width: 100%; }
  .cv-greeting__actions form .btn,
  .cv-greeting__actions form .cv-btn { width: 100%; }

  /* Dashboard cards: matches / leads / watchlist stacks vertically; the
     sidebar cards dissolve into the main feed beneath them. */
  .cv-dashboard__main { gap: 28px; }
  .cv-dashboard__sidebar { gap: 12px; }
  .cv-side-card { padding: 16px; }

  /* Section header — keep title + action on one row, drop bottom margin. */
  .cv-section-header { gap: 8px; padding-bottom: 10px; margin-bottom: 12px; }
  .cv-section-header__title { font-size: 19px; }

  /* Job detail dossier — already collapses at 960px; reinforce here and
     trim the title/hero so they fit a 375px viewport without truncation. */
  .cv-dossier-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
  .cv-dossier-head__title { font-size: 30px; }
  .cv-dossier-head__rail { position: static; padding: 16px; }
  .cv-dossier-hero { gap: 12px; margin-bottom: 12px; }
  .cv-dossier-hero__title { font-size: 26px; }

  /* Apply card rail: full-width, generous padding so the primary CTA
     hits the 40px tap-target floor naturally. */
  .cv-apply-card__sticky { position: static; gap: 12px; }
  .cv-apply-card__btn-row { flex-direction: column; gap: 8px; }
  .cv-apply-card__btn-row > * { flex: 1 1 100%; }
  .cv-radio-row { padding: 14px; }

  /* Reasoning grid (3-up cv-reason-col) → single column under 700px. */
  .cv-reasoning-grid { gap: 12px; margin-bottom: 24px; }

  /* Discover/search ─ collapse the filter row, hide low-priority columns,
     keep the job-card table scrollable as a last resort.
     data-col groups are sorted from highest churn (rate, score, action)
     down to ancillary metadata (tags, posted, persona). */
  .cv-discover-header { margin-bottom: 16px; gap: 6px; }
  .cv-discover-header__title { font-size: 26px; }
  .cv-discover-header__sub { font-size: 13px; }

  /* Filter row — pills overflow horizontally with native momentum; the
     "more filters" disclosure becomes a full-width tappable summary. */
  details.cv-disclosure > summary { padding: 14px 16px; min-height: 44px; }
  details.cv-disclosure > .cv-disclosure__body { padding: 16px; }
  .cv-pill-bar { gap: 6px; padding: 10px 16px; margin-left: -16px; margin-right: -16px; }

  /* Search/discover table: hide ancillary columns; keep title, company,
     score, action visible. */
  .job-card td[data-col="col-tags"],
  .job-card td[data-col="col-posted"],
  .job-card td[data-col="col-expires"],
  .job-card td[data-col="col-source"],
  .job-card td[data-col="col-status"],
  .job-card td[data-col="col-persona"],
  .job-card td[data-col="col-location"],
  thead th[data-col="col-tags"],
  thead th[data-col="col-posted"],
  thead th[data-col="col-expires"],
  thead th[data-col="col-source"],
  thead th[data-col="col-status"],
  thead th[data-col="col-persona"],
  thead th[data-col="col-location"] { display: none; }

  /* Role grid view — single column for thumb-driven scanning. */
  .cv-role-grid { grid-template-columns: 1fr; gap: 12px; }
  .cv-role-card { padding: 16px; min-height: 0; }

  /* Pricing: stack the three tiers, tighten hero copy, keep matrix
     scrollable as a final resort. */
  .cv-pricing-hero { padding: 48px 16px 12px; }
  .cv-pricing-hero__title { font-size: 32px; }
  .cv-pricing-hero__sub { font-size: 14px; }
  .cv-pricing-tier-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 16px 48px;
  }
  .cv-pricing-tier-grid .cv-tier-card { padding: 24px; }
  .cv-pricing-tier-grid .cv-tier-card__price-num { font-size: 40px; }
  .cv-pricing-toggle { width: 100%; justify-content: center; }
  .cv-pricing-toggle__btn { min-height: 40px; }
  .cv-pricing-matrix-wrap {
    padding: 0 16px 56px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cv-pricing-matrix { min-width: 540px; }

  /* Onboarding ─ keep the progress strip visible per the brief
     (overrides the 900px breakpoint that hid it), but reduce padding so
     it fits a phone width. The strip wraps gracefully because of its
     existing flex-wrap rule. */
  .cv-onb__header {
    height: auto;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .cv-onb__steps-strip {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
  }
  /* Compress chip labels at phone widths — keep the dot + index visible
     for orientation, hide the long label only on non-current chips. */
  .cv-onb__step-chip { padding: 2px 4px; gap: 6px; }
  .cv-onb__step-chip-rule { display: none; }
  .cv-onb__step-chip:not(.cv-onb__step-chip--current) .cv-onb__step-chip-label { display: none; }
  .cv-onb__body { flex-direction: column; }
  .cv-onb__aside {
    width: auto;
    padding: 20px 16px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .cv-onb__main { padding: 24px 16px; }
  .cv-onb__step-title { font-size: 24px; }
  .cv-onb__why { padding: 12px; }
  .cv-review-rows__row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; }
  .cv-review-rows__label { grid-column: 1 / -1; }
  .cv-review-rows__value { grid-column: 1 / 2; }
  .cv-review-rows__edit { grid-column: 2 / 3; align-self: start; }

  /* Auth ─ comfortable tap targets; max-width relaxes; full-width CTA. */
  .cv-auth-page { padding: 24px 16px; min-height: 100vh; }
  .cv-auth-page__brand { margin-bottom: 24px; }
  .cv-auth-card {
    padding: 28px 20px;
    max-width: 100%;
    box-shadow: none;
  }
  .cv-auth-card__title { font-size: 24px; }
  .cv-auth-card__sub { margin-bottom: 20px; }
  .cv-auth-form { gap: 14px; }
  .cv-auth-form__field input {
    /* 16px input prevents iOS Safari zoom on focus, and 44px height
       gives a comfortable tap target. */
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
  }
  .cv-auth-form__submit { width: 100%; min-height: 44px; }
  .cv-auth-card__footer { margin-top: 20px; padding-top: 16px; }

  /* Tap-target floor for the shared button primitive. The desktop
     32px height is fine for cursor input but cramped on touch. */
  .btn,
  button.btn,
  a.btn {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .cv-cta { min-height: 40px; }

  /* Form field tap targets — applies to inline forms across the app
     (criteria, AI shortlist, etc.). Inputs/selects in the new design
     are already comfortable; nudge buttons inside .cv-field to 40px. */
  .cv-field input,
  .cv-field select,
  .cv-field textarea {
    font-size: 16px;
    min-height: 40px;
  }
}

/* ── G.3  Narrow phone (≤380px) reinforcements ───────────────
   Keep the existing iPhone SE block (line 2543) authoritative; only
   add Phase G targets it didn't cover. */
@media (max-width: 380px) {
  .cv-greeting__title { font-size: 26px; }
  .cv-dossier-head__title { font-size: 26px; }
  .cv-dossier-hero__title { font-size: 22px; }
  .cv-pricing-hero__title { font-size: 28px; }
  .cv-onb__step-title { font-size: 22px; }
  .cv-auth-card { padding: 24px 16px; }
}
/* === PHASE G END === */

/* === Mobile QA 2026-05 — global fixes (Wave 1) ============================
   Cross-cutting mobile remediations. See docs/qa/mobile-bugs.md sections
   G1–G9. Appended at end-of-file so the override cascade wins against
   earlier rules without rewriting them. Every rule below is gated to
   mobile widths (<=640px primarily, <=393px for the narrow phone reset,
   plus tablet (<=1100px) resets for sticky elements). Desktop behaviour
   is untouched.
   ========================================================================= */

/* ── G1 · Horizontal-scroll offenders ───────────────────────────────────
   The defensive `html, body { overflow-x: hidden }` near the top of this
   file is the backstop. The rules below remove the actual width-forcing
   declarations on mobile so the page does not silently scroll under the
   clip. */
@media (max-width: 640px) {
  /* Hero LiveScanFeed — desktop min-width: 360px (cveze.css:3180) forces
     the entire page wider than a 360px viewport. Drop the floor on phone
     so the card simply fills its column. */
  .cveze-scan-feed { min-width: 0; max-width: 100%; }

  /* Hero aurora blobs (cveze.css:3124-3145) — 520x520 with right:-160px
     pokes ~360px past the right edge of any clipping ancestor that does
     not declare overflow:hidden. Hide entirely on phones; they're pure
     decoration. */
  .cveze-aurora-blob { display: none; }

  /* Sources strip marquee (cveze.css:3230) — the inner .__track has
     width: max-content so its bounding box reports the full repeated
     content (~2934px scrollWidth). Force the marquee to be a strict
     clipping wrapper that cannot grow its parent. */
  .cv-sources-strip { overflow: hidden; }
  .cv-sources-strip__inner { max-width: 100%; min-width: 0; }
  .cv-sources-strip__marquee {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    contain: content;
  }
  .cv-sources-strip__list { min-width: 0; max-width: 100%; }

  /* .cv-admin-app (cveze.css:7582) — desktop grid is 240px + 1fr but at
     <=900px it collapses to 1fr. Belt-and-braces: clamp the wrapper to
     viewport width so an oversized child cannot push the page wider. */
  .cv-admin-app {
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }
  .cv-admin-content, .cv-admin-content__body { min-width: 0; max-width: 100%; }

  /* .cv-pill-bar — already has horizontal scroll inside its own wrapper
     at <=600px (cveze.css:2523). Reinforce min-width:0 on flex children
     so it cannot push the outer page width. */
  .cv-pill-bar { min-width: 0; max-width: 100%; }

  /* .cv-settings-nav (cveze.css:7490) — already drops to a horizontal
     scroller, but the inner list reports scrollWidth=573 against a 328px
     parent. Clip + reset flex children. */
  .cv-settings-nav { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cv-settings-nav__list { min-width: 0; }

  /* .cv-pricing-matrix-wrap — already has overflow-x: auto at <=600px,
     just guard against parent push-through. */
  .cv-pricing-matrix-wrap { min-width: 0; max-width: 100%; }

  /* Profile route — main wrapper reports scrollWidth=1574 on a 393px
     screen because at least one descendant declares a wider min-width
     or pixel grid. The slice agents own the inline-style refactor; here
     we clip the page so the user is never scrolling sideways. */
  main.cv-profile-page,
  .cv-profile-page { max-width: 100%; min-width: 0; overflow-x: hidden; }

  /* Hero product preview overflowed by ~15px (browser-live). Clip. */
  .cv-product-preview, .cv-hero, .cv-hero__inner { min-width: 0; max-width: 100%; }
}

/* ── G2 · iOS Safari auto-zoom on focused form controls ─────────────────
   iOS auto-zooms if a focused input/textarea/select has font-size < 16px.
   The fix is to bump form-control font-size to 16px at the same widths
   where iOS Safari is the dominant browser. Scoped to form controls only
   so body copy is unaffected. !important is needed because several
   pages set per-field font-size inline. */
@media (max-width: 640px) {
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Targets that get explicitly named so the rule survives a specificity
     fight with their per-component declarations. */
  .cv-auth-form__field input,
  .cv-field input,
  .cv-field select,
  .cv-field textarea,
  .cv-settings-row__input,
  .cv-doc-editor__patch,
  #job-status-select { font-size: 16px !important; }
}

/* ── G3 · Sticky elements with no responsive reset ──────────────────────
   At desktop these elements are sticky rails inside multi-column grids.
   When the grid collapses to a single column they keep trying to stick
   and either block scroll or overlap content. Reset them where the
   layout collapses. */

/* document_editor right rail collapses at <=1100px (cveze.css:5839). */
@media (max-width: 1100px) {
  .cv-doc-editor__rail {
    position: static;
    top: auto;
    align-self: stretch;
  }
}

/* batch_review.html .review-advert is declared in a per-template style
   block with position: sticky; top: 76px. The template's own <=900px
   block does not reset it. Override globally with !important so the
   inline-style cascade cannot win. */
@media (max-width: 900px) {
  .review-advert {
    position: static !important;
    top: auto !important;
  }
}

/* Shortlist sticky bar already overrides top to 0 at <=600px but its
   z-index (4) sits below the nav (100), so the nav covers it. Lift it
   back under the nav with the original 56px offset, and bump z-index
   to the nav's level so it does not get visually clipped. */
@media (max-width: 600px) {
  .cv-shortlist-bar { top: 56px; z-index: 99; }
}

/* ── G4 · Tap-target floor (WCAG 2.5.5 / Apple HIG 44x44) ───────────────
   The existing Phase G rule sets .btn to 40px min-height which still
   misses the 44px WCAG floor. Bump everything user-tappable to 44px on
   touch viewports. Inline height: declarations on .btn / size='sm'
   button macros need !important to win the cascade. */
@media (max-width: 640px) {
  .btn,
  button.btn,
  a.btn,
  .btn-sm,
  button.btn-sm,
  a.btn-sm,
  .cv-btn,
  button.cv-btn,
  a.cv-btn,
  button[type=submit],
  button[type=button],
  input[type=submit],
  input[type=button],
  .cv-pricing-toggle__btn,
  .cv-invoice-row__download {
    min-height: 44px !important;
    min-width: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Nav hamburger + user-menu trigger — bump from 32x32. */
  .cv-nav__hamburger,
  .cv-nav__icon-btn,
  .cv-nav__drawer-close,
  .cv-user-menu__trigger,
  .ne-tools-btn.cv-user-menu__trigger {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px;
    height: 44px;
  }

  /* Footer link tap zone — bump font + vertical padding so an 11px
     uppercase link presents a ≥32px hit zone. */
  .cv-footer__links { gap: 14px 18px; }
  .cv-footer__links a {
    font-size: 12.5px;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}

/* G6 — `.btn-sm` previously excluded from the Phase G tap-target floor.
   Folded into the G4 selector block above. Reinforced as a single rule
   for clarity. */
@media (max-width: 640px) {
  .btn.btn-sm,
  a.btn.btn-sm,
  button.btn.btn-sm { min-height: 44px !important; padding: 10px 14px; }
}

/* ── G5 · Hover-lift transforms must not fire on touch ──────────────────
   On touch devices a tap also sets :focus and :focus-within, so a
   :hover/:focus-within transform fires unintentionally. Gate every
   transform-based lift behind (hover: hover) and (pointer: fine).
   Easiest cross-cutting fix: at touch breakpoints, unset the transform
   on the documented offenders. */
@media (hover: none), (pointer: coarse) {
  .cveze-card:hover,
  .admin-template-card:hover,
  .admin-template-card:focus-within,
  .job-template-card:hover,
  .job-template-card:focus-within,
  .cv-step-card:hover,
  .cv-tplgallery-card:hover,
  .cv-admin-quick-action:hover {
    transform: none !important;
  }
}

/* ── G8 · Nav-collapse breakpoint consolidation ─────────────────────────
   `.cv-cta` hides at <=600px (cveze.css:2461) but the hamburger only
   appears at <=640px (cveze.css:4269), so between 601–640px users see
   both "Sign up — free" and an active hamburger with no inline nav.
   Hide the inline CTA at the same breakpoint the hamburger takes over.
   Equally hide the notification bell rule duplication. */
@media (max-width: 640px) {
  .cv-cta { display: none; }
  .cv-nav { padding: 0 12px; gap: 8px; }
}

/* ── G1 / iPhone SE-class extra clamps (<=393px) ────────────────────────
   Reinforce overflow clamping at the very narrow widths captured in the
   browser-live evidence. */
@media (max-width: 393px) {
  /* Profile, browse, prompt_lab, account — clamp wrappers reported as
     overflowing past the viewport. */
  .cv-profile-page,
  .cv-admin-app,
  .cv-page,
  .cv-mon-page { max-width: 100vw; min-width: 0; }

  /* Wider strip-of-cards layouts: prevent any flex child of common
     wrappers from stretching the parent. */
  .cv-pill-bar > *,
  .cv-settings-nav__list > * { min-width: 0; }
}

/* === Mobile QA 2026-05 END ============================================== */