/* ELEV8 ATS - app shell layout (prototype-only styles; tokens from product.css) */

/* Global box-sizing: border-box. There was no reset, so any width:100% (or fixed-width)
   element with padding overflowed its container by the padding — the class of bug behind the
   inbox conversation-row clipping timestamps on mobile. border-box makes padding count inside
   the declared width everywhere, which is the modern default every component already expects.
   Scoped to the app root; the inheritance pattern lets any subtree opt back to content-box. */
.e8-app, .elev8 { box-sizing: border-box; }
.e8-app *, .e8-app *::before, .e8-app *::after,
.elev8 *, .elev8 *::before, .elev8 *::after { box-sizing: inherit; }

html, body { margin: 0; height: 100%; }
.e8-app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ui-bg-app); }

/* ---------- Sidebar ---------- */
.e8-side {
  width: 272px; flex: none; display: flex; flex-direction: column;
  background: var(--ui-bg-app); border-right: 1px solid var(--ui-border);
  transition: width 180ms ease-out;
}
.e8-side-head { display: flex; align-items: center; gap: 7px; padding: 13px 14px 9px; }
.e8-logomark {
  width: 20px; height: 20px; border-radius: 6px; background: var(--ui-text);
  color: var(--ui-surface); font-size: var(--ui-text-sm); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.e8-logotype { font-size: var(--ui-text-base); font-weight: 600; letter-spacing: -0.01em; color: var(--ui-text); }
.e8-logo-sub { font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-side-search {
  margin: 2px 10px 4px; height: 28px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius); cursor: pointer; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm);
  box-shadow: var(--ui-shadow-1);
}
.e8-side-search:hover { border-color: var(--ui-border-strong); color: var(--ui-text-secondary); }
.e8-side-search .material-symbols-outlined { font-size: 15px; }
.e8-side-search .e8-kbd { margin-left: auto; }
.e8-side-scroll { flex: 1; overflow-y: auto; padding: 2px 10px 10px; }
.e8-side-group { margin-top: 16px; }
.e8-side-group-label { font-size: var(--ui-text-xs); font-weight: 550; text-transform: uppercase; letter-spacing: .05em; color: var(--ui-text-tertiary); padding: 0 9px 6px; }
.e8-nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 0 10px; border: none; background: transparent; border-radius: var(--ui-radius);
  font-size: var(--ui-text-base); font-weight: 480; color: var(--ui-text-secondary); cursor: pointer; text-align: left;
  transition: background 100ms ease-out, color 100ms ease-out;
}
.e8-nav-item:hover { background: var(--ui-fill); color: var(--ui-text); }
.e8-nav-item .material-symbols-outlined { font-size: 16px; flex: none; color: var(--ui-text-tertiary); }
.e8-nav-item:hover .material-symbols-outlined { color: var(--ui-text); }
.e8-nav-item.active { background: var(--ui-accent-tint); color: var(--ui-daybreak-text); font-weight: 550; }
.e8-nav-item.active .material-symbols-outlined { color: var(--ui-daybreak-text); }
.e8-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-nav-badge {
  margin-left: auto; font-size: var(--ui-text-xs); font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ui-text-tertiary); border-radius: var(--ui-radius-pill); padding: 1px 5.5px; flex: none;
  white-space: nowrap;
}
.e8-nav-badge.live { color: var(--ui-success-text); background: var(--ui-success-tint); display: inline-flex; align-items: center; gap: 4px; }
.e8-nav-badge.live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-success); }
.e8-nav-badge.due { color: var(--ui-warning-text); background: var(--ui-warning-tint); }
/* Cascade shim (historical) - product.css's type reset now sits at :where(.elev8) (0,0,1) and loses to class rules; kept as belt-and-braces. See the Type reset note in product.css. */
.elev8 .e8-side-group-label { font-size: var(--ui-text-xs); letter-spacing: .05em; }
.elev8 .e8-nav-item { font-size: var(--ui-text-base); }
.elev8 .e8-nav-badge { font-size: var(--ui-text-xs); }
.e8-side-foot { border-top: 1px solid var(--ui-border); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.e8-home-rail {
  width: 126px; align-items: center; background: color-mix(in srgb, var(--ui-bg-app) 82%, var(--ui-surface));
}
.e8-home-rail-brand {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 34px 0 28px;
  border-radius: 10px; background: var(--ui-text); color: var(--ui-surface); font-size: var(--ui-text-xl); font-weight: 700;
}
.e8-home-rail-items { display: flex; width: 100%; flex: 1; flex-direction: column; align-items: center; gap: 18px; padding: 0 13px; }
.e8-home-rail-item {
  display: flex; width: 100%; min-height: 82px; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ui-text); cursor: pointer;
  font: inherit; font-size: var(--ui-text-base);
}
.e8-home-rail-item:hover { background: var(--ui-fill); }
.e8-home-rail-item.active { border-color: var(--ui-border); background: var(--ui-success-tint); }
.e8-home-rail-item .material-symbols-outlined { color: var(--ui-text); font-size: var(--ui-text-metric); }
.e8-home-rail-search {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 18px;
  border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text-secondary); cursor: pointer;
}

/* ---------- Focused workspace ---------- */
.e8-workspace-nav-group { margin: 0 0 16px; }
.e8-workspace-nav-group > b { display: block; margin: 0 0 8px; color: var(--ui-text); font-size: var(--ui-text-sm); }
.e8-workspace-nav-grip { color: var(--ui-text-tertiary); cursor: grab; user-select: none; }
.e8-workspace-nav-row.is-dragging { opacity: .55; background: var(--ui-fill); }
.e8-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.e8-home-app .e8-main {
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--ui-warning-tint) 32%, transparent), transparent 34%),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--ui-accent-tint) 28%, transparent), transparent 38%),
    var(--ui-surface);
}
.e8-home { width: 100%; max-width: 1280px; margin: 0 auto; padding: 64px 70px 56px; }
.e8-home-hero { margin: 0 0 22px; }
.e8-home-hero .e8-h1 { margin: 0; font-size: var(--ui-text-home-hero); line-height: 1.04; letter-spacing: -.035em; }
.e8-home-greet { margin: 0 0 12px; color: var(--ui-text-secondary); font-size: var(--ui-text-3xl); }
.e8-home-canvas {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px 10px 24px;
  border: 1px solid var(--ui-border-strong); border-radius: 24px; background: color-mix(in srgb, var(--ui-surface) 92%, transparent); box-shadow: none;
}
.e8-home-spark { color: var(--ui-accent); font-size: var(--ui-text-3xl); }
.e8-home-canvas input {
  flex: 1; min-width: 0; border: none; background: transparent; color: var(--ui-text);
  font: inherit; font-size: var(--ui-text-3xl); outline: none;
}
.e8-home-go {
  display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: none;
  border: none; border-radius: 999px; background: var(--ui-text); color: var(--ui-surface); cursor: pointer;
}
.e8-home-go .material-symbols-outlined { font-size: var(--ui-text-metric); }
.e8-home-go:disabled { opacity: .35; cursor: default; }
.e8-home-safeguard {
  display: flex; align-items: center; gap: 7px; margin: 10px 10px 20px; color: var(--ui-text-tertiary); font-size: var(--ui-text-base);
}
.e8-home-safeguard .material-symbols-outlined { font-size: 16px; }
.e8-home-chips { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 42px; }
.e8-home-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 176px;
  border: 1px solid var(--ui-border); border-radius: 999px; padding: 11px 18px; background: var(--ui-surface);
  color: var(--ui-text); cursor: pointer; font: inherit; font-size: var(--ui-text-lg);
}
.e8-home-chip .material-symbols-outlined { font-size: var(--ui-text-3xl); }
.e8-home-chip.sage { background: color-mix(in srgb, var(--ui-success-tint) 55%, var(--ui-surface)); }
.e8-home-chip.lav { background: color-mix(in srgb, var(--ui-accent-tint) 55%, var(--ui-surface)); }
.e8-home-chip.peach { background: color-mix(in srgb, var(--ui-warning-tint) 50%, var(--ui-surface)); }
.e8-home-chip.sky { background: color-mix(in srgb, var(--ui-info-tint) 50%, var(--ui-surface)); }
.e8-home-panel, .e8-home-section { margin: 0 0 32px; }
.e8-home-panel {
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); padding: 14px 16px;
}
.e8-home-panel h2, .e8-home-section h2 { margin: 0 0 14px; font-size: var(--ui-text-3xl); color: var(--ui-text); }
.e8-home-actions { display: flex; gap: 8px; margin-top: 12px; }
.e8-home-actions.wrap { flex-wrap: wrap; }
.e8-home-btn {
  border: 1px solid var(--ui-border); border-radius: 999px; padding: 8px 13px; background: var(--ui-surface);
  color: var(--ui-text); cursor: pointer; font: inherit; font-size: var(--ui-text-base);
}
.e8-home-btn.primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-surface); }
.e8-home-note { margin: 0; color: var(--ui-text-tertiary); font-size: var(--ui-text-base); line-height: 1.4; }
.e8-home-focus, .e8-home-setup {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, .9fr); gap: 16px; align-items: stretch;
}
.e8-home-setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e8-home-card, .e8-home-pulse {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 214px; text-align: left;
  border: 1px solid var(--ui-border); border-radius: 18px; background: color-mix(in srgb, var(--ui-surface) 94%, transparent); padding: 18px;
  color: var(--ui-text); cursor: pointer; font: inherit;
}
.e8-home-card-main { display: flex; align-items: flex-start; gap: 12px; }
.e8-home-card-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 7px; }
.e8-home-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; background: var(--ui-fill); color: var(--ui-text-secondary); font-size: var(--ui-text-3xl);
}
.e8-home-card.success .e8-home-card-icon { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-home-card.warning .e8-home-card-icon, .e8-home-card.danger .e8-home-card-icon { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-home-card-title { display: block; font-size: var(--ui-text-xl); font-weight: 600; line-height: 1.25; }
.e8-home-card-why { display: block; color: var(--ui-text-tertiary); font-size: var(--ui-text-base); line-height: 1.4; }
.e8-home-card-action {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ui-border);
  color: var(--ui-text); font-size: var(--ui-text-lg); font-weight: 600;
}
.e8-home-pulse { cursor: default; }
.e8-home-pulse h3 { margin: 0 0 2px; font-size: var(--ui-text-3xl); }
.e8-home-pulse button {
  display: flex; align-items: center; gap: 8px; width: 100%; border: none; padding: 3px 0;
  background: transparent; color: var(--ui-text-tertiary); cursor: pointer; font: inherit; font-size: var(--ui-text-base); text-align: left;
}
.e8-home-pulse button .material-symbols-outlined {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 999px; background: var(--ui-success-tint); color: var(--ui-success-text); font-size: var(--ui-text-lg);
}
.e8-home-pulse button.warn .material-symbols-outlined { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-home-pulse button b { color: var(--ui-text); font-size: var(--ui-text-lg); }
.e8-home-pulse button.warn b { color: var(--ui-warning-text); }
.e8-home-recents {
  display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); overflow: hidden;
}
.e8-home-recents > button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; border-bottom: 1px solid var(--ui-border);
  padding: 12px 14px; background: transparent; color: var(--ui-text); cursor: pointer; font: inherit; font-size: var(--ui-text-base); text-align: left;
}
.e8-home-recents > button:last-child { border-bottom: none; }
.e8-home-recents > button > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-home-recents .material-symbols-outlined { color: var(--ui-text-tertiary); font-size: 18px; }
@media (max-width: 1100px) {
  .e8-home-focus { grid-template-columns: 1fr 1fr; }
  .e8-home-setup { grid-template-columns: 1fr; }
}
@media (max-width: 1280px) and (min-width: 841px) {
  .e8-home { padding: 48px 42px; }
}
@media (max-width: 720px) {
  .e8-home-focus { grid-template-columns: 1fr; }
  .e8-home-canvas { min-height: 48px; }
  .e8-home-canvas input { font-size: var(--ui-text-base); }
  .e8-home-chip { min-width: 0; }
  .e8-home-card, .e8-home-pulse { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .e8-home-go, .e8-home-chip, .e8-home-card { transition: none; }
}
.e8-more-nav { margin: 5px 0 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-1); }
.e8-more-nav-head { display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--ui-text); font-size: var(--ui-text-sm); }
.e8-more-nav-head input, .e8-more-nav-search { min-width: 0; flex: 1; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 5px 7px; background: var(--ui-bg-app); color: var(--ui-text); font: inherit; font-size: var(--ui-text-xs); }
.e8-more-nav-list { max-height: 260px; overflow-y: auto; padding: 2px; }
.e8-more-nav-list button { display: flex; align-items: center; width: 100%; gap: 8px; border: none; padding: 7px; background: transparent; border-radius: var(--ui-radius); color: var(--ui-text-secondary); cursor: pointer; font: inherit; font-size: var(--ui-text-sm); text-align: left; }
.e8-more-nav-list button:hover, .e8-more-nav-list button.active { background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-more-nav-list .material-symbols-outlined { font-size: var(--ui-text-lg); }
.e8-more-nav-list span:nth-child(2) { flex: 1; min-width: 0; }
.e8-workspace { width: min(620px, calc(100vw - 28px)); max-height: min(680px, calc(100dvh - 28px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-3); }
.e8-workspace header, .e8-workspace footer { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.e8-workspace header { border-bottom: 1px solid var(--ui-border); }
.e8-workspace header > div { flex: 1; }
.e8-workspace header b, .e8-workspace header small { display: block; }
.e8-workspace header b { color: var(--ui-text); font-size: var(--ui-text-md); }
.e8-workspace header small { margin-top: 2px; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); }
.e8-workspace-body { display: flex; flex: 1; flex-direction: column; gap: 14px; overflow-y: auto; padding: 16px; }
.e8-workspace-body > label { display: flex; flex-direction: column; gap: 6px; color: var(--ui-text-secondary); font-size: var(--ui-text-sm); }
.e8-workspace-inline { display: flex; align-items: center; gap: 8px; }
.e8-workspace-inline input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 0 8px; background: var(--ui-bg-app); color: var(--ui-text); font: inherit; font-size: var(--ui-text-sm); }
.e8-workspace-pins, .e8-workspace-nav, .e8-workspace-views { display: flex; flex-direction: column; gap: 8px; }
.e8-workspace-pins > b { color: var(--ui-text-secondary); font-size: var(--ui-text-sm); }
.e8-workspace-pins > p, .e8-workspace-nav > p, .e8-workspace-views > p { margin: 0; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); line-height: 1.45; }
.e8-workspace-pin, .e8-workspace-nav-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text); font-size: var(--ui-text-sm); }
.e8-workspace-pin > span:first-child, .e8-workspace-nav-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-workspace-pin button, .e8-workspace-nav-row button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: none; border-radius: var(--ui-radius); background: transparent; color: var(--ui-text-secondary); cursor: pointer; }
.e8-workspace-pin button:hover, .e8-workspace-nav-row button:hover { background: var(--ui-fill); color: var(--ui-text); }
.e8-workspace-pin button:disabled, .e8-workspace-nav-row button:disabled { color: var(--ui-text-tertiary); cursor: default; opacity: .5; }
.e8-workspace-pin button .material-symbols-outlined, .e8-workspace-nav-row button .material-symbols-outlined { font-size: var(--ui-text-lg); }
.e8-workspace-views { align-items: flex-start; }
.e8-workspace-views small { color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); line-height: 1.4; }
.e8-workspace-mobilefields { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.e8-workspace-mobilefields > b { color: var(--ui-text-secondary); font-size: var(--ui-text-sm); }
.e8-workspace-mobilefields > p { margin: 0 0 2px; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); line-height: 1.45; }
.e8-workspace-mobilefields > label { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text); font-size: var(--ui-text-sm); }
.e8-workspace footer { justify-content: space-between; border-top: 1px solid var(--ui-border); }
.e8-askai-btn {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px;
  border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius);
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); cursor: pointer; white-space: nowrap;
  box-shadow: var(--ui-shadow-1);
}
.e8-askai-btn:hover { border-color: var(--ui-daybreak); background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-askai-btn .e8-kbd { margin-left: auto; }
.e8-user-row { display: flex; align-items: center; gap: 9px; padding: 4px 8px 0; }
.e8-user-name { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); line-height: 1.25; white-space: nowrap; }
.e8-user-role { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.25; }

/* ELEV8 platform sync card (desktop sidebar foot) */
.e8-sync-card {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}
.e8-sync-main { flex: 1; min-width: 0; line-height: 1.3; }
.e8-sync-name { display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-sm); font-weight: 550; color: var(--ui-text); white-space: nowrap; }
.e8-sync-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-success); animation: e8-sync-pulse 2.4s infinite; flex: none; }
@keyframes e8-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.e8-sync-btn {
  width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--ui-radius); color: var(--ui-text-tertiary); cursor: pointer;
}
.e8-sync-btn:hover { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-sync-btn .material-symbols-outlined { font-size: 15px; }
.elev8 .e8-sync-name { font-size: var(--ui-text-sm); } /* cascade shims (span/div reset) */
.elev8 .e8-sync-meta { font-size: var(--ui-text-xs); }
@media (prefers-reduced-motion: reduce) { .e8-sync-dot { animation: none; } }

/* ---------- Main ---------- */
.e8-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ui-surface); }
.e8-topbar {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 126px 0 18px; border-bottom: 1px solid var(--ui-border);
}
.e8-crumb { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--ui-text-base); color: var(--ui-text-tertiary); }
.e8-crumb a { color: var(--ui-text-tertiary); text-decoration: none; cursor: pointer; white-space: nowrap; }
.e8-crumb a:hover { color: var(--ui-text); }
.e8-crumb b { color: var(--ui-text); font-size: var(--ui-text-md); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.e8-crumb .material-symbols-outlined { font-size: 14px; color: var(--ui-text-tertiary); flex: none; }
.elev8 .e8-crumb { font-size: var(--ui-text-base); } /* cascade shim (div reset) */
.e8-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.e8-global-inbox {
  position: fixed; top: 7px; right: 18px; z-index: 40; display: inline-flex; height: 32px; align-items: center; gap: 7px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 0 9px; background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1); color: var(--ui-text-secondary); cursor: pointer; font: inherit; font-size: var(--ui-text-sm); font-weight: 600;
}
.e8-global-inbox:hover { border-color: var(--ui-border-strong); background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-global-inbox.active { border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border)); background: var(--ui-accent-tint); color: var(--ui-daybreak-text); }
.e8-global-inbox > .material-symbols-outlined { font-size: var(--ui-text-xl); }
.e8-global-inbox-badge {
  display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: var(--ui-radius-pill);
  padding: 0 5px; background: var(--ui-accent); color: var(--ui-accent-text); font-size: var(--ui-text-xs); font-weight: 700;
}
.e8-home-app .e8-global-inbox { top: 50px; right: 32px; }
.e8-content { flex: 1; overflow-y: auto; }
.e8-page { padding: 18px 22px 48px; }
.e8-page-narrow { max-width: 880px; }

.e8-pagehead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.e8-pagehead h1 { font-size: var(--ui-text-2xl); white-space: nowrap; }
.e8-pagehead-sub { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 3px; }
/* Canonical page-title size - one source of truth, kills the 17/18/20 inline-style drift.
   Used by the shared PageHead component and any screen header. */
.e8-h1 { font-size: var(--ui-text-2xl); line-height: 1.25; letter-spacing: -0.01em; }
.e8-pagehead-main { flex: 1; min-width: 0; }
.e8-pagehead-actions { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Shared record-detail header (mark + title/badges + meta + actions) */
.e8-rechead { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.e8-rechead-mark { flex: none; }
.e8-rechead-main { flex: 1; min-width: 0; }
.e8-rechead-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.e8-rechead-meta { font-size: var(--ui-text-base); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-rechead-actions { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Shared AI-brief card - ONE premium, theme-adaptive treatment. Replaces the copy-pasted
   daybreak-wash "brief" cards (Morning brief / Relationship brief / Weekly briefing / etc.) that
   had drifted across 4 different paddings. Compound .e8-card.e8-aibrief beats the DS .e8-card rule
   (bundle injects .e8-card after app.css, so same specificity would lose on source order). */
.e8-card.e8-aibrief { position: relative; overflow: hidden; padding: 15px 17px; border-radius: var(--ui-radius-xl);
  border: 1px solid var(--ui-daybreak-tint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)), color-mix(in srgb, var(--ui-accent) 3%, var(--ui-surface)) 60%, var(--ui-surface));
  box-shadow: var(--ui-shadow-1); }
.e8-aibrief::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--ui-accent), color-mix(in srgb, var(--ui-accent) 35%, var(--ui-surface))); }
.e8-aibrief > * { position: relative; }

/* ---------- Right rail ---------- */
.e8-rail { width: 270px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.e8-rail-block { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 11px 13px; background: var(--ui-surface); }
.e8-rail-title { font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-tertiary); margin-bottom: 7px; white-space: nowrap; }
.e8-kv { display: flex; gap: 8px; font-size: var(--ui-text-sm); padding: 3px 0; }
.e8-kv-k { width: 88px; flex: none; color: var(--ui-text-tertiary); }
.e8-kv-v { color: var(--ui-text); min-width: 0; }

/* ---------- Ask AI panel ---------- */
.e8-ai-overlay {
  position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end;
  background: transparent; opacity: 0; visibility: hidden; pointer-events: none;
  transition: background-color 240ms ease, opacity 220ms ease, visibility 0s linear 280ms;
}
.e8-ai-overlay.is-open {
  background: var(--ui-scrim); opacity: 1; visibility: visible; pointer-events: auto;
  transition: background-color 240ms ease, opacity 220ms ease;
}
.e8-ai-panel {
  /* Floating drawer: 8px inset from the top/right/bottom edges (margins on a stretched flex child). */
  width: 360px; max-width: 92vw; margin: 8px; display: flex; flex-direction: column;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-2); overflow: hidden;
  transform: translateX(calc(100% + 16px)); transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.e8-ai-overlay.is-open .e8-ai-panel { transform: translateX(0); }
.e8-ai-overlay.is-open .e8-ai-body > * { animation: e8-ai-rise 340ms cubic-bezier(.22, 1, .36, 1) both; }
.e8-ai-overlay.is-open .e8-ai-body > *:nth-child(2) { animation-delay: 45ms; }
.e8-ai-overlay.is-open .e8-ai-body > *:nth-child(3) { animation-delay: 90ms; }
.e8-ai-overlay.is-open .e8-ai-body > *:nth-child(n+4) { animation-delay: 130ms; }
@keyframes e8-ai-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .e8-ai-overlay, .e8-ai-panel { transition: none; }
  .e8-ai-panel { transform: none; }
  .e8-ai-overlay:not(.is-open) { display: none; }
  .e8-ai-overlay.is-open .e8-ai-body > * { animation: none; }
}
.e8-ai-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); }
.e8-ai-head b { font-size: var(--ui-text-base); font-weight: 500; }
.e8-ai-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.e8-ai-msg { font-size: var(--ui-text-base); line-height: 1.5; border-radius: 10px; padding: 9px 12px; max-width: 92%; }
.e8-ai-msg.user { align-self: flex-end; background: var(--ui-fill); color: var(--ui-text); }
.e8-ai-msg.bot { align-self: flex-start; background: var(--ui-daybreak-wash); color: var(--ui-text); }
.e8-ai-context { display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-ai-suggest {
  border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius);
  padding: 7px 10px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); text-align: left; cursor: pointer;
}
.e8-ai-suggest:hover { border-color: var(--ui-daybreak); color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-ai-foot { padding: 12px 14px; border-top: 1px solid var(--ui-border); }
.e8-ai-universal { display: flex; align-items: center; gap: 6px; margin-top: 8px; border: none; padding: 3px 0; background: transparent; color: var(--ui-accent); cursor: pointer; font: inherit; font-size: var(--ui-text-xs); font-weight: 600; }
.e8-ai-universal .material-symbols-outlined { font-size: var(--ui-text-base); }

/* ---------- Command palette ---------- */
.e8-overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--ui-scrim, rgba(18, 18, 23, 0.32));
  backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.e8-cmdk {
  width: 560px; max-width: calc(100vw - 48px); background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2);
  overflow: hidden;
}
.e8-cmdk-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ui-border); }
.e8-cmdk-input input { flex: 1; border: none; outline: none; font-size: var(--ui-text-md); color: var(--ui-text); background: transparent; }
.e8-cmdk-input input:focus-visible { box-shadow: none !important; }
.e8-cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.e8-cmdk-group { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); padding: 8px 10px 3px; }
.e8-cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  border: none; background: transparent; border-radius: 7px; font-size: var(--ui-text-base); color: var(--ui-text);
  cursor: pointer; text-align: left;
}
.e8-cmdk-item:hover, .e8-cmdk-item.sel { background: var(--ui-fill-hover); }
.e8-cmdk-item .material-symbols-outlined { font-size: 17px; }
.e8-cmdk-item .e8-cmdk-hint { margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }

/* Owner stack - overlapping avatars + lead·+N */
.e8-ownerstack { display: inline-flex; align-items: center; gap: 7px; }

/* Wide jobs table scrolls horizontally within the page instead of clipping */
.e8-tablescroll { overflow-x: auto; }
.e8-tablescroll::-webkit-scrollbar { height: 8px; }
.e8-tablescroll::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: var(--ui-radius-pill); }

/* ---------- Jobs: candidates-by-stage breakdown (list) ---------- */
/* Flat & aligned: stage labels live once in the column header (.e8-stages-head),
   rows show just the numbers. Calm by default, color only where it carries meaning. */
.e8-stages { display: inline-flex; align-items: center; }
.e8-stage {
  width: 47px; flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
}
.e8-stage-n {
  font-size: var(--ui-text-base); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15;
  color: var(--ui-text-tertiary);
}
.e8-stage.on .e8-stage-n { color: var(--ui-text); }
.e8-stage.on.won .e8-stage-n { color: var(--ui-success-text); }
.e8-stage.on.lost .e8-stage-n { color: var(--ui-text-secondary); }

/* Header labels - aligned to the row numbers, shown once */
.e8-stages-head .e8-stage-l { font-size: var(--ui-text-xs); line-height: 1.1; color: var(--ui-text-tertiary); white-space: nowrap; font-weight: 400; }
.e8-stages-head .e8-stage.lost .e8-stage-l { color: var(--ui-text-tertiary); }

/* compact (board card): numbers in tinted chips, tighter */
.e8-stages.compact { gap: 3px; }
.e8-stages.compact .e8-stage {
  width: 21px; min-width: 21px; height: 19px; padding: 0 3px; border-radius: 5px;
  flex-direction: row; background: var(--ui-fill); gap: 0;
}
.e8-stages.compact .e8-stage-n { font-size: var(--ui-text-xs); }
.e8-stages.compact .e8-stage.on { background: var(--ui-daybreak-tint); }
.e8-stages.compact .e8-stage.on .e8-stage-n { color: var(--ui-daybreak-text); }
.e8-stages.compact .e8-stage.on.won { background: var(--ui-success-tint); }
.e8-stages.compact .e8-stage.on.won .e8-stage-n { color: var(--ui-success-text); }
.e8-stages.compact .e8-stage.on.lost { background: var(--ui-fill); }

/* Labeled, wrapping variant - used on the mobile job card. Each pill sizes to its
   (no-wrap) label with a rem-based min-width, and the row wraps to more lines as the
   text size grows or the screen narrows - never squishing or clipping. */
.e8-stages.compact.labeled { display: flex; flex-wrap: wrap; gap: 4px; }
.e8-stages.compact.labeled .e8-stage {
  flex: 1 1 auto; width: auto; min-width: 2.3rem; height: auto;
  flex-direction: column; gap: 1px; padding: 4px 6px 3px; border-radius: 7px;
}
.e8-stages.compact.labeled .e8-stage-n { font-size: var(--ui-text-sm); }
.e8-stages.compact.labeled .e8-stage-l {
  font-size: 0.56rem; line-height: 1.1; color: var(--ui-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.e8-stages.compact.labeled .e8-stage.on .e8-stage-l { color: var(--ui-text-secondary); }

/* Job detail has many tabs - let the bar scroll horizontally instead of wrapping. */
.e8-rail + *, .e8-page .e8-tabs { scrollbar-width: thin; }
.e8-page > div > div > .e8-tabs, .e8-page .e8-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.e8-page .e8-tabs::-webkit-scrollbar { height: 0; }
.e8-page .e8-tab { white-space: nowrap; }
.e8-job-groupnav { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.e8-job-groupnav .e8-subtabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }

/* ---------- Company Portal ---------- */
.e8-portal { max-width: 980px; }
.e8-portal-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1); margin-bottom: 12px;
}
.e8-portal-stats {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: var(--ui-text-xs); color: var(--ui-text-secondary); padding: 0 2px 14px;
}
.e8-portal-stats span { display: inline-flex; align-items: center; gap: 5px; }
.e8-portal-stats .material-symbols-outlined { color: var(--ui-text-tertiary); }
.e8-portal-hello {
  background: var(--ui-daybreak-wash); border: 1px solid var(--ui-daybreak-tint);
  border-radius: var(--ui-radius-lg); padding: 12px 16px; margin-bottom: 14px;
}
.e8-portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.e8-portal-card {
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1); padding: 14px 15px; display: flex; flex-direction: column;
}
.e8-portal-note {
  display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; padding: 8px 10px;
  background: var(--ui-bg-app); border-radius: var(--ui-radius); font-size: var(--ui-text-sm);
  color: var(--ui-text-secondary); line-height: 1.45;
}
.e8-portal-note .material-symbols-outlined { color: var(--ui-text-tertiary); flex: none; }
.e8-portal-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ui-border); }

/* ---------- Files list ---------- */
.e8-filerow {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.e8-filerow:last-child { border-bottom: none; }
.e8-fileicon {
  width: 30px; height: 30px; border-radius: 7px; flex: none; background: var(--ui-fill);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ui-text-secondary);
}
.e8-fileicon .material-symbols-outlined { font-size: 16px; }

/* ---------- Pipeline Kanban board ---------- */
.e8-pboard { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: stretch; }
.e8-pcol {
  flex: 0 0 224px; min-width: 224px; display: flex; flex-direction: column;
  background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.e8-pcol.over { border-color: var(--ui-daybreak); background: var(--ui-daybreak-wash); }
.e8-pcol-head {
  display: flex; align-items: center; gap: 7px; padding: 10px 11px 8px;
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary);
}
.e8-pcol-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-daybreak); flex: none; }
.e8-pcol-dot.won { background: var(--ui-success); }
.e8-pcol-dot.lost { background: var(--ui-text-tertiary); }
.e8-pcol-body { flex: 1; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 7px; min-height: 60px; }
.e8-pcol-empty {
  border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); margin: 2px 0;
  padding: 14px 8px; text-align: center; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary);
}

.e8-pcard {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-1); padding: 9px 10px; display: grid; gap: 4px; cursor: grab;
  transition: border-color 100ms ease-out, box-shadow 100ms ease-out, opacity 100ms ease-out;
}
.e8-pcard:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); }
.e8-pcard:active { cursor: grabbing; }
.e8-pcard.dragging { opacity: 0.4; }
.e8-pcard.rejected { cursor: default; box-shadow: none; background: var(--ui-bg-app); }
.e8-pcard.restricted { border-color: var(--ui-warning); background: var(--ui-warning-tint); }
.e8-pcard-line {
  display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.e8-pcard-line .material-symbols-outlined { font-size: 13px; flex: none; }
.e8-pcard-reason {
  display: flex; align-items: center; gap: 5px; margin-top: 3px; padding-top: 6px;
  border-top: 1px solid var(--ui-border); font-size: var(--ui-text-xs); color: var(--ui-text-secondary);
}
.e8-pcard-reason .material-symbols-outlined { color: var(--ui-danger-text); flex: none; }
.e8-pcard.restricted .e8-pcard-reason .material-symbols-outlined { color: var(--ui-warning-text); }
.e8-pcard-reason .e8-link { flex: none; font-size: var(--ui-text-xs); }

/* Rejected band under the board */
.e8-rejband {
  margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-lg); background: var(--ui-bg-app);
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.e8-rejband.over { border-color: var(--ui-danger); background: var(--ui-danger-tint); }
.e8-rejband-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 8px; }

/* Reject reason dialog */
.e8-reject {
  width: 460px; max-width: calc(100vw - 48px); background: var(--ui-surface);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); overflow: hidden;
}
.e8-confirm { width: 420px; }
.e8-confirm-glyph { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.e8-confirm-glyph .material-symbols-outlined { font-size: 21px; }
.e8-confirm-glyph.danger { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-confirm-glyph.primary { background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-reject-head { display: flex; align-items: center; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-reject-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.e8-reject-category {
  min-height: 42px; padding: 6px 8px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-text-secondary); font: inherit; font-size: var(--ui-text-sm); cursor: pointer;
}
.e8-reject-category:hover { color: var(--ui-text); }
.e8-reject-category.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); font-weight: 500; }
.e8-reason-chip {
  border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius-pill);
  padding: 5px 11px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); cursor: pointer;
  transition: all 100ms ease-out;
}
.e8-reason-chip:hover { border-color: var(--ui-border-strong); color: var(--ui-text); }
/* Stacked form field (label + control) used by create dialogs + the DS Field component */
.e8-field { display: flex; flex-direction: column; gap: 5px; }
/* Field text sizes live in components/ats-input/Input.jsx (12.5/12/12 + shims) - do not restate here. */
.e8-field-label { font-weight: 500; color: var(--ui-text-secondary); }
.e8-field-help { color: var(--ui-text-tertiary); }
.e8-field-error { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ui-danger-text); }
.e8-field.is-invalid .e8-input-wrap, .e8-field.is-invalid input, .e8-field.is-invalid textarea { border-color: var(--ui-danger); }
.e8-reason-chip.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); font-weight: 500; }
.e8-reject-note {
  width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius); padding: 8px 10px; font-family: var(--font-body); font-size: var(--ui-text-base);
  color: var(--ui-text); outline: none;
}
.e8-reject-note:focus-visible { box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }
.e8-restricted-notice {
  display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border: 1px solid var(--ui-warning);
  border-radius: var(--ui-radius); background: var(--ui-warning-tint); color: var(--ui-warning-text);
  font-size: var(--ui-text-sm); line-height: 1.4;
}
.e8-restricted-notice .material-symbols-outlined { flex: none; font-size: 17px; }
.e8-rejection-summary, .e8-applicant-rejection {
  display: inline-flex; align-items: center; gap: 5px; color: var(--ui-danger-text); font-size: var(--ui-text-xs);
}
.e8-rejection-summary .material-symbols-outlined, .e8-applicant-rejection .material-symbols-outlined { font-size: 14px; }
.e8-rejection-summary.restricted, .e8-applicant-rejection.restricted { color: var(--ui-warning-text); font-weight: 500; }
.e8-applicant-rejection { margin-top: 8px; font-size: var(--ui-text-sm); }

@media (max-width: 600px) {
  .e8-reject-categories { grid-template-columns: 1fr; }
}

/* ---------- Jobs: grouped list ---------- */
.e8-grouphead { display: flex; align-items: center; gap: 8px; padding: 2px 2px 7px; }
.e8-grouphead-label { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); }

/* ---------- Jobs: board view ---------- */
.e8-board {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(244px, 1fr);
  gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 16px;
}
.e8-board-colhead {
  display: flex; align-items: center; gap: 7px; padding: 2px 4px 8px;
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary);
}
.e8-board-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  padding: 11px 12px; box-shadow: var(--ui-shadow-1); cursor: pointer;
  display: grid; gap: 9px; margin-bottom: 8px;
  transition: border-color 100ms ease-out;
}
.e8-board-card:hover { border-color: var(--ui-border-strong); }
.e8-board-card[draggable] { cursor: grab; }
.e8-board-card.is-dragging { opacity: 0.45; cursor: grabbing; }
.e8-board-col { border-radius: var(--ui-radius-lg); transition: background 120ms ease, box-shadow 120ms ease; padding: 2px; }
.e8-board-col.is-dragover { background: var(--ui-accent-tint); box-shadow: inset 0 0 0 1.5px var(--ui-accent); }
.e8-board-empty {
  border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-lg);
  padding: 18px 12px; text-align: center; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary);
}

/* ---------- Candidates: Kanban board view ---------- */
.e8-cboard {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 16px; align-items: stretch;
}
.e8-cboard-col {
  flex: 0 0 236px; min-width: 236px; display: flex; flex-direction: column;
  background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.e8-cboard-col.is-dragover { border-color: var(--ui-daybreak); background: var(--ui-daybreak-wash); }
.e8-cboard-colhead {
  display: flex; align-items: center; gap: 7px; padding: 10px 11px 8px;
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary);
  border-bottom: 1px solid var(--ui-border);
}
.e8-cboard-colhead-count {
  margin-left: auto; font-size: var(--ui-text-xs); font-weight: 400; color: var(--ui-text-tertiary);
  background: var(--ui-fill); border-radius: var(--ui-radius-pill); padding: 1px 6px;
}
.e8-cboard-body {
  flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 80px;
}
.e8-cboard-empty {
  border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius);
  padding: 16px 8px; text-align: center; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary);
  margin: 2px 0;
}
.e8-cboard-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-1); padding: 9px 10px; display: grid; gap: 5px; cursor: grab;
  transition: border-color 100ms ease-out, box-shadow 100ms ease-out, opacity 100ms ease-out;
}
.e8-cboard-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); }
.e8-cboard-card:active { cursor: grabbing; }
.e8-cboard-card.is-dragging { opacity: 0.35; }
.e8-cboard-card-name {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.e8-cboard-card-name-text {
  font-size: var(--ui-text-sm); font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; min-width: 0;
}
.e8-cboard-card-sub {
  font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.e8-cboard-card-footer {
  display: flex; align-items: center; gap: 6px; margin-top: 1px; padding-top: 5px;
  border-top: 1px solid var(--ui-border);
}
.e8-cboard-card-last {
  margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap;
}

/* ---------- Clients: square company monogram ---------- */
.e8-clientmark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--ui-fill); border: 1px solid var(--ui-border);
  color: var(--ui-text-secondary); font-size: var(--ui-text-xs); font-weight: 600; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase;
}

/* ---------- Next-best-action buttons (job rail, inbox) ---------- */
.e8-nextaction {
  display: flex; align-items: flex-start; gap: 7px; width: 100%; text-align: left;
  border: 1px solid var(--ui-daybreak-tint); background: var(--ui-surface); border-radius: var(--ui-radius);
  padding: 7px 9px; font-size: var(--ui-text-sm); line-height: 1.35; color: var(--ui-text); cursor: pointer;
  transition: border-color 100ms ease-out, background 100ms ease-out;
}
.e8-nextaction:hover { border-color: var(--ui-daybreak); background: var(--ui-daybreak-wash); }
.e8-nextaction .material-symbols-outlined { margin-top: 1px; color: var(--ui-daybreak-text); flex: none; }
.e8-nextaction.primary { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-text); font-weight: 600; }
.e8-nextaction.primary:hover { border-color: var(--ui-accent-hover); background: var(--ui-accent-hover); }
.e8-nextaction.primary .material-symbols-outlined { color: inherit; }

/* ---------- Agents ---------- */
.e8-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.e8-agent-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  padding: 14px 16px; box-shadow: var(--ui-shadow-1); display: grid; gap: 11px; align-content: start;
}
.e8-agent-card.focus { border-color: var(--ui-daybreak); box-shadow: 0 0 0 3px var(--ui-daybreak-wash), var(--ui-shadow-1); }
.e8-agent-glyph {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--ui-daybreak-wash); border: 1px solid var(--ui-daybreak-tint); color: var(--ui-daybreak-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.e8-agent-glyph .material-symbols-outlined { font-size: 16px; }
.e8-agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- Inbox ---------- */
.e8-inbox-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  padding: 13px 15px; box-shadow: var(--ui-shadow-1);
}
.e8-inbox-glyph {
  width: 30px; height: 30px; border-radius: 8px; flex: none; margin-top: 1px;
  background: var(--ui-fill); color: var(--ui-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.e8-inbox-glyph .material-symbols-outlined { font-size: 16px; }

/* ---------- Unified inbox: layout ---------- */
.e8-msgs { flex: 1; min-height: 0; display: flex; background: var(--ui-surface); }
.e8-msgs-list { width: 290px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--ui-border); min-height: 0; }
.e8-msgs-list-scroll { flex: 1; overflow-y: auto; padding: 2px 6px 10px; }
.e8-msgs-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.e8-msgs-thread-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-msgs-banner {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 16px;
  background: var(--ui-daybreak-wash); border-bottom: 1px solid var(--ui-daybreak-tint);
  font-size: var(--ui-text-sm); color: var(--ui-text);
}
.e8-msgs-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.e8-msgs-rail { width: 264px; flex: none; overflow-y: auto; border-left: 1px solid var(--ui-border); padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Unified inbox: conversation rows ---------- */
.e8-convo {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; box-sizing: border-box;
  border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left;
}
.e8-convo:hover { background: var(--ui-fill-hover); }
.e8-convo.active { background: var(--ui-daybreak-wash); box-shadow: inset 2px 0 0 var(--ui-accent); }
.e8-convo-avatar { position: relative; flex: none; display: inline-flex; }
.e8-convo-avatar .e8-chdot { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--ui-surface); }
.e8-convo-top { display: flex; align-items: baseline; gap: 8px; }
.e8-convo-name { flex: 1; min-width: 0; font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 5px; }
.e8-convo.unread .e8-convo-name { font-weight: 600; }
.e8-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); flex: none; }
.e8-convo-when { flex: none; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-convo-preview { display: block; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* AI inbox triage intent chips (R54) - self-contained colors so they read on any theme */
.e8-intent { display: inline-flex; align-items: center; gap: 3px; font-size: var(--ui-text-xs); font-weight: 600; line-height: 1.6; padding: 0 6px; border-radius: var(--ui-radius-pill); white-space: nowrap; }
.e8-intent .material-symbols-outlined { font-size: 12px; }
.e8-intent.at_risk { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-intent.reschedule { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-intent.question { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-intent.scheduling { background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); }
.e8-intent.positive { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-intent.needs { background: var(--ui-fill); color: var(--ui-text-secondary); }
/* Team collaboration (R56): internal notes lane + @mentions */
.e8-mention { color: var(--ui-daybreak-text); font-weight: 600; }
.e8-teamnote { background: var(--ui-warning-tint); border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-surface)); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
/* Dark: brighten the @mention ink so it clears AA (4.5:1) on the amber team-note tint. */
:root[data-theme="dark"] .e8-mention { color: var(--ui-mention-text); }

/* ---------- Channels ---------- */
.e8-chdot {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--ui-fill); color: var(--ui-text-secondary);
}
.e8-chdot b { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: -0.02em; }
.e8-chdot.wa { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-chdot.sms { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-chdot.li { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-chdot.email { background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-chdot.call { background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); }
.e8-chchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs); font-weight: 500; background: var(--ui-fill); color: var(--ui-text-secondary); white-space: nowrap;
}
.e8-chchip b { font-size: var(--ui-text-xs); font-weight: 700; }
.e8-chchip.wa { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-chchip.sms { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-chchip.li { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-chchip.call { background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); }

/* ---------- Unified inbox: messages + composer ---------- */
.e8-msg { display: flex; align-items: flex-start; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; }
.e8-msg:hover { background: var(--ui-fill-hover); }
.e8-composer { flex: none; border-top: 1px solid var(--ui-border); padding: 10px 16px 12px; }
.e8-composer-meta { display: flex; flex-direction: column; gap: 5px; font-size: var(--ui-text-sm); margin-bottom: 9px; }
.e8-composer-row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.e8-composer-lbl { width: 34px; flex: none; color: var(--ui-text-tertiary); }
.e8-composer-from { display: inline-flex; align-items: center; gap: 7px; color: var(--ui-text-secondary); }
.e8-composer-from .e8-avatar { transform: scale(0.85); }
.e8-chpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-sm); color: var(--ui-text-secondary); cursor: pointer;
}
.e8-chpill b { color: var(--ui-text); font-weight: 500; }
.e8-chpill:hover { border-color: var(--ui-border-strong); }
.e8-chpicker {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px;
  box-shadow: var(--ui-shadow-2); padding: 4px; display: flex; flex-direction: column;
}
.e8-chpicker-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: none; background: transparent;
  border-radius: 7px; font-size: var(--ui-text-sm); color: var(--ui-text); cursor: pointer;
}
.e8-chpicker-item:hover { background: var(--ui-fill-hover); }
.e8-composer-input {
  width: 100%; box-sizing: border-box; resize: none; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--ui-text-base); line-height: 1.5; color: var(--ui-text); padding: 2px 0 6px;
}
.e8-composer-input:focus-visible { box-shadow: none !important; }
.e8-composer-foot { display: flex; align-items: center; gap: 4px; }

/* ---------- Sequences ---------- */
/* Sequence list card - flat, hairline-separated rows (header metrics / step flow + meter / footer).
   Header + metrics stack to full width on phones so nothing is clipped off the right edge. */
/* List head: search + count-aware "showing N of M" (R103 - keeps the list usable at 50k). */
.e8-seq-listhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.e8-seq-listhead-search { flex: 1 1 260px; min-width: 0; }
.e8-seq-count { flex: none; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); white-space: nowrap; }
/* Compact reply-rate meter used inside the scale table (the cards keep .e8-seq-meter). */
.e8-seqt-rate { display: inline-flex; align-items: center; gap: 8px; }
.e8-seqt-rate-track { display: inline-block; width: 64px; height: 5px; background: var(--ui-fill); border-radius: var(--ui-radius-pill); overflow: hidden; }
.e8-seqt-rate-fill { display: block; height: 100%; background: var(--ui-accent); border-radius: var(--ui-radius-pill); }
@media (max-width: 640px) { .e8-seq-listhead-search { flex-basis: 100%; } .e8-seq-count { margin-left: 2px; } }
.e8-seq-cards { display: grid; gap: 12px; }
.e8-seq-card { padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.e8-seq-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
.e8-seq-titlewrap { flex: 1 1 auto; min-width: 0; }
.e8-seq-titlerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.e8-seq-name { font-size: var(--ui-text-md); font-weight: 500; color: var(--ui-text); }
.e8-seq-sub { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 2px; }
.e8-seq-metrics { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.e8-seq-metric { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.e8-seq-metric-lbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-seq-metric-val { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); white-space: nowrap; }
.e8-seq-spark { width: 72px; flex: none; }
.e8-seq-owner { flex: none; }
.e8-seq-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.e8-seq-flow { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 2px 0; flex: 1 1 300px; min-width: 0; }
.e8-seq-step {
  display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 230px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 6px 11px 6px 8px;
  background: var(--ui-surface);
}
.e8-seq-step-day { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-seq-step-label { display: block; font-size: var(--ui-text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-seq-arrow { font-size: var(--ui-text-md); color: var(--ui-text-tertiary); flex: none; }
.e8-seq-meter { flex: none; width: 150px; }
.e8-seq-meter-head { display: flex; justify-content: space-between; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-bottom: 3px; }
.e8-seq-meter-track { display: block; height: 6px; background: var(--ui-fill); border-radius: var(--ui-radius-pill); overflow: hidden; }
.e8-seq-meter-fill { display: block; height: 100%; background: var(--ui-accent); border-radius: var(--ui-radius-pill); }
.e8-seq-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--ui-border); padding-top: 10px; flex-wrap: wrap; }
.e8-seq-note { flex: 1; min-width: 200px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); line-height: 1.45; }
.e8-seq-foot-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* Enroll-people dialog source picker */
.e8-seq-enroll-opts { display: grid; gap: 8px; }
.e8-seq-enroll-opt {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface);
  transition: border-color 100ms ease-out;
}
.e8-seq-enroll-opt:hover { border-color: var(--ui-text-tertiary); }
.e8-seq-enroll-opt:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }
.e8-seq-enroll-opt.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-seq-enroll-ic {
  flex: none; width: 32px; height: 32px; border-radius: var(--ui-radius); display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-fill); color: var(--ui-text-secondary);
}
.e8-seq-enroll-opt.on .e8-seq-enroll-ic { background: var(--ui-surface); color: var(--ui-accent); }
.e8-seq-enroll-ic .material-symbols-outlined { font-size: 18px; }
.e8-seq-enroll-lbl { display: block; font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); }
.e8-seq-enroll-sub { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-seq-enroll-chk { margin-left: auto; flex: none; font-size: var(--ui-text-2xl); color: var(--ui-text-tertiary); }
.e8-seq-enroll-opt.on .e8-seq-enroll-chk { color: var(--ui-accent); }
@media (max-width: 640px) {
  .e8-seq-metrics { margin-left: 0; width: 100%; gap: 8px; justify-content: space-between; }
  .e8-seq-metric { align-items: flex-start; text-align: left; }
  .e8-seq-spark, .e8-seq-owner { display: none; }
  .e8-seq-flow { flex-basis: 100%; flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .e8-seq-meter { width: 100%; }
  .e8-seq-foot-actions { flex-wrap: wrap; }
}

/* ---------- Notes ---------- */
.e8-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.e8-note-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  padding: 13px 15px; box-shadow: var(--ui-shadow-1); cursor: pointer;
  display: flex; flex-direction: column; gap: 9px; transition: border-color 100ms ease-out;
}
.e8-note-card:hover { border-color: var(--ui-border-strong); }
.e8-note-src {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--ui-radius-pill);
  background: var(--ui-fill); font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-secondary); white-space: nowrap;
}

/* ---------- List footer (row count) ---------- */
.e8-listfoot { padding: 12px 4px 2px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-listfoot .tnum { font-weight: 600; color: var(--ui-text); }

/* ---------- Candidate overview: two-column (details | why-matched) ---------- */
/* ============================================================================
   Shared visual-hierarchy primitives — app/primitives.jsx
   (FitScoreChip / InlineBanner / StatTile / ActionBar). Extracted from the
   Today + Candidate-record audits so the fixes are reused, not re-invented.
   ============================================================================ */

/* FitScoreChip — elevated, tier-colored score. Bigger + heavier than the chips beside it. */
.e8-fitchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 11px 4px; border-radius: var(--ui-radius-pill);
  background: var(--fitbg); border: 1px solid var(--fitbr); color: var(--fit); }
.e8-fitchip-score { font-size: var(--ui-text-2xl); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.e8-fitchip-label { font-size: var(--ui-text-xs); font-weight: 600; }
.e8-fitchip-sm .e8-fitchip-score { font-size: var(--ui-text-lg); }

/* InlineBanner — tone x emphasis. Default 'stripe' (low weight, left-accent) so secondary
   concerns never hijack the top of a screen; 'fill' reserved for true blockers. */
.e8-inlinebanner { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: var(--ui-radius-md); }
.e8-inlinebanner-ico { font-size: 20px; flex: none; }
.e8-inlinebanner-body { min-width: 0; flex: 1; }
.e8-inlinebanner-t { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e8-inlinebanner-sub { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); margin-top: 2px; line-height: 1.4; }
.e8-inlinebanner-acts { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.e8-inlinebanner.emph-stripe { border: 1px solid var(--ui-border); border-left-width: 3px; }
.e8-inlinebanner.emph-stripe.tone-info { border-left-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent-tint) 22%, var(--ui-surface)); }
.e8-inlinebanner.emph-stripe.tone-warning { border-left-color: var(--ui-warning); background: color-mix(in srgb, var(--ui-warning-tint) 22%, var(--ui-surface)); }
.e8-inlinebanner.emph-stripe.tone-danger { border-left-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger-tint) 22%, var(--ui-surface)); }
.e8-inlinebanner.emph-fill.tone-info { border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border)); background: color-mix(in srgb, var(--ui-accent-tint) 60%, transparent); }
.e8-inlinebanner.emph-fill.tone-warning { border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-border)); background: color-mix(in srgb, var(--ui-warning-tint) 60%, transparent); }
.e8-inlinebanner.emph-fill.tone-danger { border: 1px solid color-mix(in srgb, var(--ui-danger) 32%, var(--ui-border)); background: color-mix(in srgb, var(--ui-danger-tint) 60%, transparent); }
.e8-inlinebanner.tone-info .e8-inlinebanner-ico { color: var(--ui-accent); }
.e8-inlinebanner.tone-warning .e8-inlinebanner-ico { color: var(--ui-warning-text); }
.e8-inlinebanner.tone-danger .e8-inlinebanner-ico { color: var(--ui-danger-text); }
@media (max-width: 640px) {
  .e8-inlinebanner { flex-wrap: wrap; }
  .e8-inlinebanner-acts { width: 100%; }
  .e8-inlinebanner-acts > .e8-btn { flex: 1; justify-content: center; }
}

/* StatTile — frameless, optionally clickable dashboard stat. */
.e8-stattile { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 10px; }
.e8-stattile.is-link { cursor: pointer; transition: background .12s ease; }
.e8-stattile.is-link:hover { background: color-mix(in srgb, var(--ui-fill) 70%, transparent); }
.e8-stattile.is-link:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-stattile-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-fill); color: var(--ui-text-tertiary); }
.e8-stattile-ic .material-symbols-outlined { font-size: 19px; }
.e8-stattile.tone-danger .e8-stattile-ic { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-stattile.tone-warning .e8-stattile-ic { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-stattile.tone-success .e8-stattile-ic { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-stattile.tone-accent .e8-stattile-ic { background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-stattile-v { font-size: var(--ui-text-2xl); font-weight: 650; letter-spacing: -0.01em; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-stattile.tone-danger .e8-stattile-v { color: var(--ui-danger-text); }
.e8-stattile-l { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); margin-top: 2px; }

/* ActionBar — one dominant action; destructive quiet + separated by a divider. */
.e8-actionbar { display: inline-flex; align-items: center; gap: 7px; }
.e8-actionbar-div { width: 1px; height: 22px; background: var(--ui-border); margin: 0 3px; flex: none; }

/* Review bar: Accept is the single dominant action; Reject stays quiet and separated. */
.e8-reviewbar .e8-btn-accept { background: var(--ui-success); border-color: var(--ui-success); color: var(--ui-accent-text, #fff); }
.e8-reviewbar .e8-btn-accept:hover { background: color-mix(in srgb, var(--ui-success) 88%, var(--ui-bg-app)); border-color: color-mix(in srgb, var(--ui-success) 88%, var(--ui-bg-app)); }
.e8-reviewbar .e8-btn-reject { background: transparent; border-color: transparent; }
.e8-reviewbar .e8-btn-reject:hover { background: var(--ui-danger-tint); }

.e8-cand-overview { display: flex; gap: 24px; align-items: flex-start; }
.e8-cand-ov-main { flex: 1.4; min-width: 300px; display: grid; gap: 20px; }
.e8-cand-ov-why { flex: 1; min-width: 320px; background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 14px 16px; }
.e8-whypanel-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
@media (max-width: 1080px) { .e8-cand-overview { flex-direction: column; } .e8-cand-ov-why { width: 100%; box-sizing: border-box; } }

/* ---------- Candidate review bar (floating triage) ---------- */
.e8-reviewbar-wrap { position: fixed; left: 230px; right: 0; bottom: 18px; display: flex; justify-content: center; z-index: 30; pointer-events: none; }
.e8-reviewbar {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-pill);
  box-shadow: var(--ui-shadow-2); padding: 7px 10px;
}
.e8-rb-nav { width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--ui-text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.e8-rb-nav:hover { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-rb-nav .material-symbols-outlined { font-size: 19px; }
.e8-rb-div { width: 1px; height: 22px; background: var(--ui-border); margin: 0 3px; }
.e8-rb-kbd { margin: 0 4px 0 -1px; }
.e8-rb-back {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px;
  border: none; background: transparent; border-radius: var(--ui-radius-pill); cursor: pointer;
  color: var(--ui-text-secondary); font: inherit; font-size: var(--ui-text-sm); font-weight: 500; max-width: 220px;
}
.e8-rb-back:hover { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-rb-back .material-symbols-outlined { font-size: 17px; color: var(--ui-text-tertiary); }
.e8-rb-qlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Client company intelligence (SEC + ZoomInfo dossier) ---------- */
.e8-clientmark-lg { width: 46px; height: 46px; border-radius: 12px; font-size: var(--ui-text-xl); flex-shrink: 0; }
.e8-ticker {
  display: inline-flex; align-items: center; font: inherit; font-size: var(--ui-text-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--ui-text-secondary); background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 5px; padding: 1px 7px;
}
.e8-srcchip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-srcpill { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 1px 8px; }

.e8-intel { display: grid; gap: 16px; }
.e8-intel-snap {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 16px;
}
.e8-intel-desc { margin: 7px 0 9px; font-size: var(--ui-text-sm); line-height: 1.55; color: var(--ui-text-secondary); max-width: 640px; text-wrap: pretty; }
.e8-intel-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-intel-meta > a, .e8-intel-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.e8-intel-meta .material-symbols-outlined { color: var(--ui-text-tertiary); }
.e8-intel-sync { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.e8-intel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.e8-intel-tile { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); padding: 11px 14px; background: var(--ui-surface); }
.e8-intel-tile-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-intel-tile-v { font-size: var(--ui-text-2xl); font-weight: 600; margin-top: 3px; letter-spacing: -0.01em; }
.e8-intel-tile-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 2px; }

.e8-intel-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1180px) { .e8-intel-grid { grid-template-columns: 1fr; } .e8-intel-stats { grid-template-columns: repeat(2, 1fr); } }
.e8-intel-card { padding: 15px 16px; box-shadow: none; }
.e8-intel-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.e8-mini-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-mini-v { font-size: var(--ui-text-md); font-weight: 600; margin-top: 1px; }

.e8-filings { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.e8-filing {
  display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%;
  background: transparent; border: none; border-radius: var(--ui-radius); padding: 9px 8px; cursor: pointer;
}
.e8-filing:hover { background: var(--ui-fill-hover); }
.e8-filing-date { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; flex-shrink: 0; }
.e8-airead { margin-top: 12px; padding: 12px 13px; background: var(--ui-daybreak-wash); border: 1px solid var(--ui-daybreak-tint); border-radius: var(--ui-radius-lg); }
.e8-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.e8-intel-note { font-size: var(--ui-text-sm); line-height: 1.55; color: var(--ui-text-secondary); background: var(--ui-fill); border-radius: var(--ui-radius); padding: 11px 13px; }

.e8-techchip { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 6px; padding: 3px 9px; }

.e8-news-row { display: flex; gap: 9px; align-items: flex-start; }
.e8-news-tag { font-weight: 600; color: var(--ui-text-secondary); }

.e8-disc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ui-border); }
.e8-disc-row:first-child { border-top: none; }
.e8-disc-signal { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

.e8-intel-strip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 12px 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.e8-intel-strip:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); }
.e8-intel-strip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.e8-intel-strip-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-intel-strip-facts b { color: var(--ui-text); font-weight: 600; }

/* ---------- Hiring trend chips ---------- */
.e8-hire-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-secondary); background: var(--ui-fill); border-radius: var(--ui-radius-pill); padding: 1px 8px 1px 5px; white-space: nowrap; }
.e8-hire-zero { color: var(--ui-text-tertiary); padding: 1px 8px; }
.e8-hire-delta { font-size: var(--ui-text-xs); color: var(--ui-success-text); font-weight: 600; }
.e8-mutual { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 1px 9px 1px 2px; }

/* ---------- Org chart ---------- */
.e8-org-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.e8-org-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-org-cover b { color: var(--ui-text); }
.e8-org-key { display: inline-flex; align-items: center; gap: 5px; }
.e8-org-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.e8-org-key-crm { background: var(--ui-accent); }
.e8-org-key-gap { border: 1.5px dashed var(--ui-border-strong); }
.e8-org-scroll { overflow-x: auto; padding: 10px 4px 18px; }

.e8-org-tree { display: flex; justify-content: center; padding: 0; margin: 0; list-style: none; min-width: min-content; }
.e8-org-children { display: flex; justify-content: center; padding: 0; margin: 0; list-style: none; position: relative; padding-top: 22px; }
.e8-org-children::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--ui-border-strong); }
.e8-org-li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 22px 9px 0; }
.e8-org-li::before, .e8-org-li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--ui-border-strong); }
.e8-org-li::after { right: auto; left: 50%; border-left: 1.5px solid var(--ui-border-strong); }
.e8-org-li:only-child::before, .e8-org-li:only-child::after { display: none; }
.e8-org-li:first-child::before, .e8-org-li:last-child::after { border: 0 none; }
.e8-org-li:last-child::before { border-right: 1.5px solid var(--ui-border-strong); border-radius: 0 7px 0 0; }
.e8-org-li:first-child::after { border-radius: 7px 0 0 0; }
/* root has no connector above it */
.e8-org-tree > .e8-org-li { padding-top: 0; }
.e8-org-tree > .e8-org-li::before, .e8-org-tree > .e8-org-li::after { display: none; }

.e8-org-card { width: 212px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 10px 11px; cursor: pointer; box-shadow: var(--ui-shadow-1); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.e8-org-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); transform: translateY(-1px); }
.e8-org-card:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-org-card.is-crm { border-left: 3px solid var(--ui-accent); }
.e8-org-card.is-gap { border-style: dashed; background: var(--ui-bg-app); }
.e8-org-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.e8-org-name { font-size: var(--ui-text-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-org-role { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-org-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.e8-org-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--ui-text-xs); font-weight: 500; border-radius: var(--ui-radius-pill); padding: 1px 8px 1px 5px; white-space: nowrap; }
.e8-org-tag-crm { color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-org-tag-gap { color: var(--ui-text-secondary); background: var(--ui-fill); }

/* ---------- CSM cards ---------- */
.e8-csm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.e8-csm-card { display: flex; flex-direction: column; gap: 12px; text-align: left; cursor: pointer; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 15px; box-shadow: var(--ui-shadow-1); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; font: inherit; }
.e8-csm-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); transform: translateY(-1px); }
.e8-csm-card:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-csm-cardhead { display: flex; align-items: center; gap: 11px; }
.e8-csm-gm { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--ui-bg-app); border-radius: var(--ui-radius-lg); }
.e8-csm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.e8-csm-meters { display: flex; flex-direction: column; gap: 7px; }
.e8-csm-meter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.e8-csm-meter-k { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-csm-meter-v { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-sm); }
.e8-csm-focus { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Renewal stage funnel ---------- */
.e8-renew-stages { display: flex; align-items: stretch; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.e8-renew-stage { flex: 1; min-width: 116px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 11px 14px; background: var(--ui-surface); }
.e8-renew-stage.is-active { border-color: var(--ui-daybreak); background: var(--ui-daybreak-wash); }
.e8-renew-stage-n { font-size: var(--ui-text-2xl); font-weight: 600; line-height: 1.1; }
.e8-renew-stage-label { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 1px; }
.e8-renew-stage-val { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 3px; }
.e8-renew-arrow { align-self: center; color: var(--ui-text-tertiary); font-size: var(--ui-text-2xl); flex: 0 0 auto; }

/* ---------- Workflows config (management view) ---------- */
.e8-wf-mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 8px; }
.e8-wf-mgr-card { display: flex; flex-direction: column; gap: 10px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 15px; box-shadow: var(--ui-shadow-1); transition: border-color 120ms ease, box-shadow 120ms ease; }
.e8-wf-mgr-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); }
.e8-wf-mgr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.e8-wf-mgr-name { font-size: var(--ui-text-md); font-weight: 600; color: var(--ui-text); background: none; border: none; padding: 0; cursor: pointer; text-align: left; line-height: 1.3; flex: 1; min-width: 0; }
.e8-wf-mgr-name:hover { color: var(--ui-accent); text-decoration: underline; }
.e8-wf-mgr-desc { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.e8-wf-mgr-meta { display: flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-wf-mgr-stats { display: flex; align-items: center; gap: 14px; padding: 8px 10px; background: var(--ui-bg-app); border-radius: var(--ui-radius); }
.e8-wf-mgr-stat { display: flex; align-items: center; gap: 7px; }
.e8-wf-mgr-owner { display: flex; align-items: center; gap: 7px; }
.e8-wf-mgr-footer { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--ui-border); margin-top: 2px; }
.e8-wf-mgr-footer > span { flex: 1; }
/* Template gallery */
.e8-wf-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.e8-wf-tpl-card { display: flex; align-items: flex-start; gap: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 13px 14px; transition: border-color 120ms ease, box-shadow 120ms ease; }
.e8-wf-tpl-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-1); }
.e8-wf-tpl-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); }

/* ---------- Config: shared ---------- */
.e8-cfg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; max-width: 580px; }
.e8-cfg-stat { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); padding: 10px 14px; background: var(--ui-surface); }
.e8-cfg-stat-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-cfg-stat-v { font-size: var(--ui-text-2xl); font-weight: 600; margin-top: 2px; }
.e8-cfg-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-cfg-sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.e8-cfg-sugg-item { display: flex; align-items: center; gap: 10px; background: var(--ui-surface); border: 1px solid var(--ui-daybreak-tint); border-radius: var(--ui-radius); padding: 9px 11px; }

/* Config dialogs (R105 Pass 2a: AddField/AddStage now route through the DS Modal shell -
   the .e8-cfg-dialog / .e8-cfg-dialog-head chrome they used is retired). */
.e8-cfg-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.e8-cfg-typebtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: 7px; padding: 7px 9px; cursor: pointer; }
.e8-cfg-typebtn:hover { background: var(--ui-fill-hover); }
.e8-cfg-typebtn.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-cfg-reqrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ui-bg-app); border-radius: var(--ui-radius); padding: 10px 12px; cursor: pointer; }
.e8-cfg-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; }
.e8-cfg-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: var(--ui-surface); cursor: pointer; color: var(--ui-text-secondary); }
.e8-cfg-stepper button:hover { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-cfg-stepper > span { min-width: 44px; text-align: center; font-size: var(--ui-text-base); font-weight: 600; }
.e8-cfg-stepper.sm button { width: 26px; height: 26px; }
.e8-cfg-stepper.sm > span { min-width: 40px; font-size: var(--ui-text-sm); }

/* ---------- Stage map viz (config Stages screen) ----------
   Renamed from .e8-stageflow - that name belongs to the DS StageFlow component
   (components/ats-stages), whose injected rules collided with this local block. */
.e8-stagemap { display: flex; align-items: stretch; min-width: min-content; }
.e8-stagemap-node { flex: 0 0 auto; min-width: 118px; border: 1px solid var(--ui-border); border-top: 3px solid var(--ui-accent); border-radius: var(--ui-radius-lg); padding: 11px 14px; background: var(--ui-surface); }
.e8-stagemap-node.is-won { border-top-color: var(--ui-success); }
.e8-stagemap-node.is-lost { border-top-color: var(--ui-text-tertiary); }
/* Metric numeral recipe at a node-friendly size (27px breaks the tight nodes) */
.e8-stagemap-count { font: 500 20px/1.15 var(--font-brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.e8-stagemap-name { font-size: var(--ui-text-sm); font-weight: 500; margin-top: 1px; }
.e8-stagemap-sla, .e8-stagemap-tag { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 2px; display: block; }
.e8-stagemap-arrow { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 9px; }
.e8-stagemap-arrow .tnum { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text-secondary); }
.e8-stagemap-arrow .material-symbols-outlined { font-size: 16px; color: var(--ui-text-tertiary); }
.e8-stagemap-gap { flex: 0 0 18px; }

/* ---------- Stage config cards ---------- */
.e8-stage-card { display: flex; align-items: center; gap: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 12px 14px; }
.e8-stage-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.e8-stage-main { flex: 1; min-width: 0; }
.e8-stage-autos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.e8-stage-auto { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); background: var(--ui-fill); border: none; border-radius: var(--ui-radius-pill); padding: 2px 8px; cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; }
.e8-stage-auto .material-symbols-outlined:first-child { color: var(--ui-accent); }
.e8-stage-auto:hover { background: var(--ui-fill-hover); }
.e8-stage-auto-x { opacity: 0; margin-left: -1px; }
.e8-stage-auto:hover .e8-stage-auto-x { opacity: 0.55; }
.e8-stage-sla { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.e8-stage-reorder { display: flex; flex-direction: column; flex: 0 0 auto; }
.e8-stage-reorder button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; border: none; background: transparent; cursor: pointer; color: var(--ui-text-tertiary); border-radius: 4px; }
.e8-stage-reorder button:hover:not(:disabled) { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-stage-reorder button:disabled { opacity: 0.3; cursor: default; }

/* ---------- Candidate record: collapsible rail ---------- */
.e8-rail-collapse-row { display: flex; align-items: center; gap: 6px; }
.e8-rail-collapse {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0;
  border: none; background: transparent; cursor: pointer; text-align: left;
}
.e8-rail-count {
  font-size: var(--ui-text-xs); font-variant-numeric: tabular-nums; color: var(--ui-text-tertiary);
  background: var(--ui-fill); border-radius: var(--ui-radius-pill); padding: 0 6px; min-width: 17px; text-align: center;
}
.e8-srcdot {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.e8-srcdot.li { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-srcdot.li b { font-size: var(--ui-text-xs); font-weight: 700; }

/* ---------- Candidate record: CV toolkit ---------- */
.e8-cv-toolbar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-app); padding: 9px 12px;
}

/* ---------- Candidate record: application / campaign rows ---------- */
.e8-applrow {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius);
  cursor: pointer; text-align: left; margin-bottom: 6px;
  transition: border-color 100ms ease-out;
}
.e8-applrow:last-child { margin-bottom: 0; }
.e8-applrow:hover { border-color: var(--ui-border-strong); }
.e8-listpill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: var(--ui-radius-pill);
  background: var(--ui-fill); font-size: var(--ui-text-xs); color: var(--ui-text-secondary);
}

/* ---------- Candidate record: Present mode overlay ---------- */
.e8-present {
  width: 640px; max-width: calc(100vw - 48px); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-2); overflow: hidden;
}
.e8-present-bar {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-bg-app);
}
.e8-present-body { overflow-y: auto; padding: 24px 28px 22px; }

/* ---------- Reports / charts ---------- */
.e8-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.e8-kpi {
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1); padding: 12px 14px;
}
/* KPI numeral - the MetricCard recipe (brand family, metric size, tabular) */
.e8-kpi-v { font: 500 var(--ui-text-metric)/1.15 var(--font-brand); letter-spacing: -0.02em; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.e8-ai-impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .e8-ai-impact, .e8-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* Activity heatmap */
.e8-heatmap { display: grid; gap: 4px; align-items: center; }
.e8-heat-day { text-align: center; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-heat-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); white-space: nowrap; }
.e8-heat-cell {
  height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: var(--ui-text-xs); font-variant-numeric: tabular-nums;
}

/* Audit log rows */
.e8-audit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border);
}
.e8-audit-row:last-child { border-bottom: none; }

/* ---------- Workflow editor ---------- */
.e8-wf { flex: 1; min-height: 0; display: flex; background: var(--ui-surface); }
.e8-wf-side { width: 232px; flex: none; border-right: 1px solid var(--ui-border); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.e8-wf-side-sec { display: flex; flex-direction: column; gap: 4px; }
.e8-wf-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.e8-wf-item:hover { background: var(--ui-fill-hover); }
.e8-wf-item.active { background: var(--ui-daybreak-wash); box-shadow: inset 2px 0 0 var(--ui-accent); }
.e8-wf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-text-tertiary); flex: none; }
.e8-wf-dot.on { background: var(--ui-success); }
.e8-wf-palette { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius); cursor: pointer; font-size: var(--ui-text-sm); color: var(--ui-text); text-align: left; }
.e8-wf-palette:hover { border-color: var(--ui-border-strong); background: var(--ui-fill-hover); }
.e8-wf-pal-dot { width: 24px; height: 24px; border-radius: 7px; flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* canvas */
.e8-wf-canvas {
  flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab;
  background-color: var(--ui-bg-app);
  background-image: radial-gradient(var(--ui-border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}
.e8-wf-canvas:active { cursor: grabbing; }
.e8-wf-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.e8-wf-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }

.e8-wf-node {
  position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: 11px; box-shadow: var(--ui-shadow-1); cursor: grab; user-select: none;
  border-left: 3px solid var(--nc);
  transition: box-shadow 120ms, border-color 120ms;
}
.e8-wf-node:hover { box-shadow: var(--ui-shadow-2); }
.e8-wf-node.sel { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-daybreak-wash), var(--ui-shadow-2); }
.e8-wf-node.run { box-shadow: 0 0 0 3px var(--ui-accent-tint), var(--ui-shadow-2); border-color: var(--ui-accent); }
.e8-wf-node.done { border-left-color: var(--ui-success); }
.e8-wf-node-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--nt); color: var(--nc); }
.e8-wf-handle { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-surface); border: 1.5px solid var(--ui-border-strong); transform: translateY(-50%); }
.e8-wf-handle.in { left: -5px; }
.e8-wf-handle.out { right: -5px; }
.e8-wf-node.sel .e8-wf-handle, .e8-wf-node:hover .e8-wf-handle { border-color: var(--ui-accent); }

.e8-wf-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 3px; box-shadow: var(--ui-shadow-1); }
.e8-wf-zoom button { width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--ui-text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.e8-wf-zoom button:hover { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-wf-zoom .material-symbols-outlined { font-size: 17px; }
.e8-wf-zoom .tnum { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); width: 38px; text-align: center; }

/* inspector */
.e8-wf-inspect { width: 280px; flex: none; border-left: 1px solid var(--ui-border); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; }
.e8-wf-field { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-bottom: 10px; }
.e8-wf-field input, .e8-wf-name { width: 100%; box-sizing: border-box; margin-top: 4px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); padding: 7px 9px; font-family: var(--font-body); font-size: var(--ui-text-base); color: var(--ui-text); outline: none; }
.e8-wf-field input:focus-visible, .e8-wf-name:focus-visible { box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }
.e8-wf-name { font-size: var(--ui-text-md); font-weight: 500; margin-bottom: 4px; }
.e8-wf-field-lbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-bottom: 4px; }
.e8-wf-tmpl { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 8px; border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius); cursor: pointer; text-align: left; margin-bottom: 6px; }
.e8-wf-tmpl:hover { border-color: var(--ui-daybreak); background: var(--ui-daybreak-wash); }

/* ---------- Sequences: templates gallery ---------- */
.e8-seq-tmpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.e8-seq-tmpl {
  text-align: left; border: 1px solid var(--ui-border); background: var(--ui-surface);
  border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-1); padding: 14px;
  cursor: pointer; transition: border-color 100ms, box-shadow 100ms;
}
.e8-seq-tmpl:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-2); }
.e8-seq-tmpl-blank { border-style: dashed; box-shadow: none; }
.e8-seq-tmpl-blank:hover { border-color: var(--ui-accent); }
.e8-seq-tmpl-icon {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text);
}
.e8-seq-tmpl-icon .material-symbols-outlined { font-size: 18px; }

/* ---------- Sequences: unified Replies inbox ---------- */
.e8-seqr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 14px; }
.e8-seqr-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; }
.e8-seqr-kpi-icon {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text);
}
.e8-seqr-kpi-icon .material-symbols-outlined { font-size: 17px; }
.e8-seqr-kpi-val { font-size: var(--ui-text-2xl); font-weight: 600; line-height: 1.1; color: var(--ui-text); }
.e8-seqr-kpi-lbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-seqr-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.e8-seqr-seqsel { width: 220px; flex: none; }
.e8-seqr-list { display: grid; overflow: hidden; }

/* R103 Task 4: sequence-filter typeahead (Replies inbox). A searchable combobox that renders only the
   current value plus up to 50 live matches, so it never builds a 50k-option dropdown at scale. */
.e8-seqta { position: relative; width: 100%; }
.e8-seqta-control { cursor: text; }
.e8-seqta-control.is-open { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-ring); }
.e8-seqta-control > .material-symbols-outlined { font-size: 16px; color: var(--ui-text-tertiary); flex: none; }
.e8-seqta-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--ui-text-base); color: var(--ui-text); height: 100%; }
.e8-seqta-input::placeholder { color: var(--ui-text-tertiary); }
.e8-seqta-caret { font-size: var(--ui-text-xl); color: var(--ui-text-tertiary); flex: none; }
.e8-seqta-menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 288px; overflow-y: auto; padding: 4px;
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-2);
}
.e8-seqta-opt {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 9px;
  border-radius: var(--ui-radius-sm); cursor: pointer;
}
.e8-seqta-opt.is-active { background: var(--ui-fill-hover); }
.e8-seqta-opt.is-sel { background: var(--ui-accent-tint); }
.e8-seqta-opt-name { font-size: var(--ui-text-base); color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-seqta-opt-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-seqta-empty, .e8-seqta-more { padding: 8px 9px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-seqta-more { border-top: 1px solid var(--ui-border); margin-top: 2px; }
.e8-seqr-row {
  display: flex; gap: 12px; padding: 14px 16px 14px 14px;
  border-bottom: 1px solid var(--ui-border); border-left: 2px solid transparent;
}
.e8-seqr-row:last-child { border-bottom: none; }
.e8-seqr-row.is-unhandled { border-left-color: var(--ui-accent); }
.e8-seqr-row.is-handled { opacity: 0.55; }
.e8-seqr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e8-seqr-name { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); }
.e8-seqr-sub { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-seqr-when { margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-seqr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--ui-radius-pill); font-size: var(--ui-text-xs); font-weight: 500; line-height: 1.7; }
.e8-seqr-chip .material-symbols-outlined { font-size: 13px; }
.e8-seqr-meta { display: flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-seqr-text { font-size: var(--ui-text-base); line-height: 1.5; color: var(--ui-text); }
.e8-seqr-ai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e8-seqr-ai-text { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-seqr-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
@media (max-width: 640px) {
  .e8-seqr-kpis { grid-template-columns: repeat(2, 1fr); }
  .e8-seqr-seqsel { width: 100%; }
  .e8-seqr-when { margin-left: 0; }
}

/* ---------- Sequence detail (funnel + enrolled + replies) ---------- */
.e8-seqd-metrics { display: flex; align-items: stretch; gap: 0; padding: 4px 0; margin: 4px 0 2px; }
.e8-seqd-metric { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border-left: 1px solid var(--ui-border); }
.e8-seqd-metric:first-child { border-left: none; }
.e8-seqd-metric-lbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-seqd-metric-val { font-size: var(--ui-text-2xl); font-weight: 600; line-height: 1.1; color: var(--ui-text); }
.e8-seqd-steps { display: grid; gap: 12px; }
.e8-seqd-step { padding: 14px 16px; display: grid; gap: 12px; }
.e8-seqd-step-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.e8-seqd-step-day { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); flex: none; }
.e8-seqd-step-label { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-seqd-step-rr { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.e8-seqd-step-rr-lbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-seqd-step-rr-val { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-daybreak-text); }
.e8-seqd-funnel { display: grid; gap: 7px; }
.e8-seqd-fun { display: flex; align-items: center; gap: 10px; }
.e8-seqd-fun-lbl { flex: none; width: 72px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); }
.e8-seqd-fun-track { flex: 1; min-width: 0; height: 8px; background: var(--ui-fill); border-radius: var(--ui-radius-pill); overflow: hidden; }
.e8-seqd-fun-fill { display: block; height: 100%; background: var(--ui-accent); border-radius: var(--ui-radius-pill); }
.e8-seqd-fun-val { flex: none; width: 36px; text-align: right; font-size: var(--ui-text-sm); color: var(--ui-text); }
.e8-seqd-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; margin-top: 12px; }
.e8-seqd-note-text { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.5; }
@media (max-width: 640px) {
  .e8-seqd-metrics { flex-wrap: wrap; }
  .e8-seqd-metric { flex: 1 1 30%; border-left: none; padding: 8px 10px; }
  .e8-seqd-fun-lbl { width: 60px; }
}

/* ---------- Sequence builder ---------- */
.e8-seqb { display: flex; gap: 20px; align-items: flex-start; }
.e8-seqb-cadence { width: 392px; flex: none; }
.e8-seqb-editor {
  flex: 1; min-width: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-1); padding: 16px 18px; align-self: stretch;
}

/* cadence timeline */
.e8-cadence { display: flex; flex-direction: column; }
.e8-cstep {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px 10px 10px 8px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius-lg);
  cursor: pointer; transition: border-color 100ms, box-shadow 100ms; position: relative;
}
.e8-cstep:hover { border-color: var(--ui-border-strong); }
.e8-cstep.sel { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-daybreak-wash); }
.e8-cstep-rail { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.e8-cstep-line { position: absolute; top: 28px; bottom: -22px; width: 2px; background: var(--ui-border); }
.e8-cstep-day { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-daybreak-text); background: var(--ui-daybreak-wash); border-radius: var(--ui-radius-pill); padding: 1px 7px; flex: none; }
.e8-cstep-acts { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity 100ms; }
.e8-cstep:hover .e8-cstep-acts, .e8-cstep.sel .e8-cstep-acts { opacity: 1; }
.e8-cstep-acts button { width: 22px; height: 22px; border: none; background: transparent; border-radius: 5px; cursor: pointer; color: var(--ui-text-tertiary); display: inline-flex; align-items: center; justify-content: center; }
.e8-cstep-acts button:hover:not(:disabled) { background: var(--ui-fill-hover); color: var(--ui-text); }
.e8-cstep-acts button:disabled { opacity: 0.3; cursor: default; }
.e8-cstep-acts .material-symbols-outlined { font-size: 15px; }
.e8-cadd {
  align-self: flex-start; margin: 4px 0 4px 14px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px dashed var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius-pill);
  padding: 3px 10px 3px 7px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); cursor: pointer;
}
.e8-cadd:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.e8-cadd .material-symbols-outlined { font-size: 14px; }
.e8-cend { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 4px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-seqb-settings-link {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 10px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius); cursor: pointer;
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary);
}
.e8-seqb-settings-link:hover { border-color: var(--ui-border-strong); }
.e8-seqb-settings-link.on { border-color: var(--ui-accent); background: var(--ui-daybreak-wash); color: var(--ui-accent); }

/* step editor */
.e8-seqb-lbl { font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-tertiary); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.04em; }
.e8-seqb-title { flex: 1; min-width: 0; border: none; border-bottom: 1px solid transparent; font-family: var(--font-body); font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); outline: none; padding: 2px 0; background: transparent; }
.e8-seqb-title:hover { border-bottom-color: var(--ui-border); }
.e8-seqb-title:focus-visible { border-bottom-color: var(--ui-accent); }
.e8-seqb-chans { display: flex; gap: 6px; flex-wrap: wrap; }
.e8-seqb-chan { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--ui-border-strong); background: var(--ui-surface); border-radius: var(--ui-radius-pill); font-size: var(--ui-text-sm); color: var(--ui-text-secondary); cursor: pointer; }
.e8-seqb-chan:hover { border-color: var(--ui-border-strong); }
.e8-seqb-chan.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); font-weight: 500; }
.e8-seqb-num { width: 52px; box-sizing: border-box; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); padding: 5px 8px; font-family: var(--font-body); font-size: var(--ui-text-sm); text-align: center; outline: none; }
.e8-seqb-num:focus-visible { box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }
.e8-seqb-subject, .e8-seqb-body { width: 100%; box-sizing: border-box; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); padding: 9px 11px; font-family: var(--font-body); font-size: var(--ui-text-base); color: var(--ui-text); outline: none; }
.e8-seqb-subject { margin-bottom: 8px; font-weight: 500; }
.e8-seqb-body { line-height: 1.5; resize: vertical; }
.e8-seqb-subject:focus-visible, .e8-seqb-body:focus-visible { box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }
.e8-token { border: 1px solid var(--ui-border); background: var(--ui-fill); border-radius: var(--ui-radius-pill); padding: 2px 9px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); cursor: pointer; font-family: var(--font-body); }
.e8-token:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-seqb-preview { border: 1px solid var(--ui-border); background: var(--ui-bg-app); border-radius: var(--ui-radius-lg); padding: 13px 14px; }
.e8-seqb-set { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ui-border); font-size: var(--ui-text-sm); color: var(--ui-text); }
.e8-seqb-set:last-of-type { border-bottom: none; }
.e8-seqb-set > span:first-child { flex: 1; min-width: 0; }

/* ---------- Misc ---------- */
/* Record-cell, why-card styles live in components/ats-records & ats-timeline */
.e8-link { color: var(--ui-daybreak-text); text-decoration: none; cursor: pointer; }
.e8-link:hover { text-decoration: underline; }
.e8-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 3px; }
/* Shared record detail layout: main column + right rail (replaces a brittle inline-style attribute selector). */
.e8-record-2col { display: flex; gap: 24px; align-items: flex-start; }
.e8-divider-v { width: 1px; align-self: stretch; background: var(--ui-border); }
.e8-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e8-sectionlabel { font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-text-secondary); white-space: nowrap; }

/* ---------- Forms config screen ---------- */
.e8-form-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
/* Form list (left pane) */
.e8-form-list { display: flex; flex-direction: column; gap: 2px; }
.e8-form-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); cursor: pointer; text-align: left; width: 100%;
  font-family: var(--font-body); transition: border-color 120ms ease, box-shadow 120ms ease;
}
.e8-form-row:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-1); }
.e8-form-row.is-active {
  border-color: var(--ui-accent); border-left-width: 3px;
  background: var(--ui-accent-tint); box-shadow: none;
}
.e8-form-row-main { min-width: 0; flex: 1; }
.e8-form-row-meta { flex: none; text-align: right; }
/* Form preview (right pane) */
.e8-form-preview { padding: 16px; }
.e8-form-fields-list { display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); overflow: hidden; margin-bottom: 14px; }
.e8-form-field-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface);
  font-size: var(--ui-text-base);
}
.e8-form-field-row:last-child { border-bottom: none; }
.e8-form-field-row:nth-child(odd) { background: var(--ui-bg-app); }
/* Stats strip inside preview */
.e8-form-stats-strip {
  display: flex; align-items: center; gap: 16px; padding: 12px 14px;
  background: var(--ui-bg-app); border-radius: var(--ui-radius-lg); margin-bottom: 14px;
}
.e8-form-stats-strip > div:last-child { text-align: right; }
.e8-form-stats-strip > div:nth-child(2) { flex: 1; }
/* Footer actions */
.e8-form-preview-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ui-border); }

/* ---------- Engagement case studies ---------- */
.e8-cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
.e8-cs-card { display: flex; flex-direction: column; gap: 13px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 16px; box-shadow: var(--ui-shadow-1); }
.e8-cs-head { display: flex; align-items: flex-start; gap: 10px; }
.e8-cs-ps { display: grid; gap: 9px; }
.e8-cs-block { border-radius: var(--ui-radius); padding: 9px 12px; }
.e8-cs-block-k { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.e8-cs-block-v { font-size: var(--ui-text-sm); line-height: 1.5; color: var(--ui-text); }
.e8-cs-problem { background: var(--ui-warning-tint); border: 1px solid color-mix(in srgb, var(--ui-warning) 28%, var(--ui-surface)); }
.e8-cs-problem .e8-cs-block-k { color: var(--ui-warning-text); }
.e8-cs-solution { background: var(--ui-daybreak-wash); border: 1px solid var(--ui-daybreak-tint); }
.e8-cs-solution .e8-cs-block-k { color: var(--ui-daybreak-text); }
.e8-cs-sub { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ui-text-tertiary); margin-bottom: 6px; }
.e8-cs-approach { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.e8-cs-approach li { display: flex; align-items: flex-start; gap: 7px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.4; }
.e8-cs-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.e8-cs-result { background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 10px 12px; text-align: center; }
.e8-cs-result-m { font-size: var(--ui-text-2xl); font-weight: 700; color: var(--ui-daybreak-text); letter-spacing: -0.01em; }
.e8-cs-result-l { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 2px; line-height: 1.25; }
.e8-cs-quote { display: flex; gap: 9px; background: var(--ui-bg-app); border-radius: var(--ui-radius-lg); padding: 12px 13px; }
.e8-cs-quotemark { font-size: var(--ui-text-3xl); color: var(--ui-daybreak); flex: 0 0 auto; }
.e8-cs-quote-t { font-size: var(--ui-text-base); font-style: italic; color: var(--ui-text); line-height: 1.5; }
.e8-cs-quote-a { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 5px; }
.e8-cs-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.e8-cs-ready { display: flex; align-items: center; gap: 10px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 10px 13px; }
.e8-cs-empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }

/* ---------- Candidates: filters popover ---------- */
.e8-candfilter { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 300px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-2); padding: 14px; display: grid; gap: 14px; }
.e8-candfilter-k { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ui-text-tertiary); margin-bottom: 7px; }
.e8-candfilter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--ui-border); }

/* ---------- Candidates: pipeline funnel ---------- */
.e8-candfunnel { display: flex; align-items: stretch; gap: 4px; margin: 0 0 14px; flex-wrap: wrap; }
.e8-candfunnel-stage { flex: 1; min-width: 120px; text-align: left; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 9px 12px; cursor: pointer; font: inherit; transition: border-color 120ms ease, background 120ms ease; }
.e8-candfunnel-stage:hover { border-color: var(--ui-border-strong); }
.e8-candfunnel-stage.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-candfunnel-n { font-size: var(--ui-text-2xl); font-weight: 600; line-height: 1.1; }
.e8-candfunnel-l { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); margin-top: 1px; }
.e8-candfunnel-bar { display: block; height: 4px; border-radius: 3px; background: var(--ui-fill); margin-top: 7px; overflow: hidden; }
.e8-candfunnel-bar > span { display: block; height: 100%; background: var(--ui-accent); border-radius: 3px; }
.e8-candfunnel-arrow { align-self: center; color: var(--ui-text-tertiary); font-size: var(--ui-text-2xl); flex: 0 0 auto; }

/* ---------- R110 T2: search-first candidates - true-count header + faceted rail ---------- */
/* The true-scale count header: a big honest total, or "N matching · showing <page> · of <total>". */
.e8-fac-count { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.e8-fac-count-n { font-size: var(--ui-text-3xl); font-weight: 700; color: var(--ui-text); letter-spacing: -0.01em; line-height: 1.1; }
.e8-fac-count-l { font-size: var(--ui-text-base); color: var(--ui-text-secondary); }
.e8-fac-count-sep { color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); }
.e8-fac-count-sub { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
/* Two-column search body: an always-visible rail + the results. min-width:0 lets the table scroll inside
   the grid track instead of pushing page-level horizontal overflow. */
.e8-fac-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.e8-fac-layout.is-mobile { display: block; }
.e8-fac-main { min-width: 0; }
.e8-fac-rail { position: sticky; top: 12px; align-self: start; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); padding: 10px 12px 12px; max-height: calc(100vh - 96px); overflow-y: auto; }
.e8-fac-railhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.e8-fac-railhead-t { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text); }
.e8-fac-railhead-n { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-fac-clear { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: var(--ui-text-xs); color: var(--ui-accent); cursor: pointer; }
.e8-fac-clear:hover { text-decoration: underline; }
.e8-fac-group { padding: 10px 0 8px; border-top: 1px solid var(--ui-border); }
.e8-fac-group:first-of-type { border-top: 0; padding-top: 6px; }
.e8-fac-k { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-text-tertiary); margin-bottom: 7px; }
.e8-fac-vals { display: flex; flex-direction: column; gap: 2px; }
.e8-fac-chip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: var(--ui-radius-md); padding: 5px 8px; font: inherit; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); cursor: pointer; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; }
.e8-fac-chip:hover { background: var(--ui-fill); color: var(--ui-text); }
.e8-fac-chip.on { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); font-weight: 500; }
.e8-fac-chip-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-fac-chip-c { flex: 0 0 auto; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); font-variant-numeric: tabular-nums; }
.e8-fac-chip.on .e8-fac-chip-c { color: var(--ui-accent); }
/* R110 T3: talent pools / saved searches - leads the desktop rail, and the mobile filter sheet. A row Runs
   the saved query; the kebab renames/deletes. All tokens (no hardcoded hex), so it adapts to theme + accent. */
.e8-pool { margin-bottom: 4px; }
.e8-pool-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.e8-pool-head-t { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text); }
.e8-pool-save { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: var(--ui-text-xs); color: var(--ui-accent); cursor: pointer; }
.e8-pool-save:hover { text-decoration: underline; }
.e8-pool-save .material-symbols-outlined { font-size: 15px; }
.e8-pool-list { display: flex; flex-direction: column; gap: 2px; }
.e8-pool-row { display: flex; align-items: center; gap: 2px; border-radius: var(--ui-radius-md); }
.e8-pool-row.on { background: var(--ui-accent-tint); }
.e8-pool-run { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid transparent; background: none; border-radius: var(--ui-radius-md); padding: 6px 8px; font: inherit; cursor: pointer; transition: background 100ms ease; }
.e8-pool-run:hover { background: var(--ui-fill); }
.e8-pool-row.on .e8-pool-run:hover { background: transparent; }
.e8-pool-name { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-pool-row.on .e8-pool-name { color: var(--ui-accent); }
.e8-pool-sub { display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-pool-count { color: var(--ui-text-secondary); font-variant-numeric: tabular-nums; }
.e8-pool-owner { position: relative; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-pool-owner::before { content: '·'; position: absolute; left: 0; }
.e8-pool-empty { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.5; padding: 2px 2px 4px; }
/* When the pool panel leads the rail, a divider sets the Refine facets apart. */
.e8-fac-railhead-refine { border-top: 1px solid var(--ui-border); margin-top: 10px; padding-top: 10px; }
/* The rail is desktop-only (rendered only when !isMobile); belt-and-suspenders collapse below the
   useIsMobile() breakpoint in case the layout class ever renders without JS re-evaluation. */
@media (max-width: 840px) {
  .e8-fac-layout { display: block; }
  .e8-fac-rail { display: none; }
}

/* ---------- Candidates: compare modal ---------- */
.e8-compare { width: min(880px, calc(100vw - 48px)); max-height: 84vh; overflow: auto; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); }
.e8-compare-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--ui-border); position: sticky; top: 0; background: var(--ui-surface); z-index: 1; }
.e8-compare-head > span:first-child { flex: 1; }
.e8-compare-grid { display: grid; align-items: start; }
.e8-compare-corner { position: sticky; top: 0; }
.e8-compare-person { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 14px 10px; border-left: 1px solid var(--ui-border); }
.e8-compare-k { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ui-text-tertiary); padding: 11px 12px; background: var(--ui-bg-app); border-top: 1px solid var(--ui-border); display: flex; align-items: center; }
.e8-compare-v { font-size: var(--ui-text-sm); color: var(--ui-text); padding: 11px 12px; border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); display: flex; align-items: center; }
.e8-compare-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ui-border); position: sticky; bottom: 0; background: var(--ui-surface); }

/* ---------- Candidate → ranked jobs (two-way matching) ---------- */
.e8-jobmatch { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 11px 13px; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.e8-jobmatch:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-1); }
.e8-jobmatch-why { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); }

/* ---------- Matching tab: criteria chip + queue-refreshed line ---------- */
.e8-mcrit {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 9px;
  border: none; border-radius: var(--ui-radius-pill); cursor: pointer; white-space: nowrap;
  font-size: var(--ui-text-sm); font-weight: 550; color: var(--ui-daybreak-text); background: var(--ui-daybreak-wash);
}
.e8-mcrit:hover { background: var(--ui-daybreak-tint); }
.e8-mcrit:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-mcrit .material-symbols-outlined { font-size: 14px; color: inherit; }
.e8-qrefresh { display: flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-qrefresh .material-symbols-outlined { font-size: 14px; color: inherit; }
/* Cascade shim (historical) - product.css's type reset now sits at :where(.elev8) (0,0,1) and loses to class rules; kept as belt-and-braces. See the Type reset note in product.css. */
.elev8 .e8-mcrit { font-size: var(--ui-text-sm); }
.elev8 .e8-qrefresh { font-size: var(--ui-text-sm); }

/* ---------- Job orders: analytics strip ---------- */
/* Stat strip - a grid of canonical KpiCard tiles (.e8-kpi). */
.e8-jobstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 14px; }
@media (max-width: 1100px) { .e8-jobstats { grid-template-columns: repeat(3, 1fr); } }

/* ===================== Mobile / PWA chrome ===================== */
/* Desktop defaults: hide mobile-only chrome. */
.e8-mobilebar, .e8-tabbar, .e8-fab, .e8-msheet, .e8-msheet-backdrop, .e8-createsheet, .e8-side-close { display: none; }
.e8-install-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px;
  border: 1px solid var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent);
  border-radius: var(--ui-radius); font: inherit; font-size: var(--ui-text-sm); font-weight: 500; cursor: pointer;
}
.e8-install-btn:hover { background: var(--ui-accent); color: var(--ui-accent-text); }

@media (max-width: 840px) {
  /* Top app bar */
  .e8-mobilebar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0;
    background: var(--ui-surface-frost); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px);
    border-bottom: 1px solid var(--ui-border);
  }
  .e8-mobilebar-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; color: var(--ui-text-secondary); cursor: pointer; }
  .e8-mobilebar-btn:active { background: var(--ui-fill); }
  .e8-mobilebar-btn .material-symbols-outlined { font-size: 22px; }
  .e8-mobilebar-brand { display: inline-flex; align-items: center; gap: 7px; }
  .e8-mobilebar-actions { margin-left: auto; display: flex; gap: 2px; }

  /* Sidebar is replaced by the mobile menu sheet on phones */
  .e8-side { display: none; }

  /* Main fills width; reserve space for the fixed top + bottom bars */
  .e8-main { padding-top: calc(52px + env(safe-area-inset-top, 0px)); padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .e8-page { padding: 14px 14px 28px; }
  .e8-topbar { height: auto; min-height: 46px; padding: 8px 14px; flex-wrap: wrap; row-gap: 6px; }
  .e8-topbar-actions { flex-wrap: wrap; gap: 6px; row-gap: 6px; }
  .e8-global-inbox { display: none; }

  /* Keep toasts (and their Undo button) clear of the bottom tab bar on phones */
  .e8-toast-stack { left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .e8-toast-stack .e8-toast { width: 100%; }

  /* Bottom tab bar - frosted, with an active pill + filled icon */
  .e8-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(58px + env(safe-area-inset-bottom, 0px)); padding: 5px 6px env(safe-area-inset-bottom, 0px);
    background: var(--ui-surface-frost); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px);
    border-top: 1px solid var(--ui-border); box-shadow: 0 -1px 14px rgba(18, 18, 23, 0.05);
  }
  .e8-tabbar .e8-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: var(--ui-text-tertiary); cursor: pointer; font: inherit; min-width: 0; padding: 2px 0; -webkit-tap-highlight-color: transparent; }
  .e8-tabbar .e8-tab-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 30px; border-radius: var(--ui-radius-pill); transition: background 160ms ease; }
  .e8-tabbar .e8-tab-ic .material-symbols-outlined { font-size: 23px; transition: color 140ms ease; }
  .e8-tabbar .e8-tab-label { font-size: var(--ui-text-xs); font-weight: 500; transition: color 140ms ease; }
  .e8-tabbar .e8-tab.active { color: var(--ui-accent); }
  .e8-tabbar .e8-tab.active .e8-tab-ic { background: var(--ui-accent-tint); }
  .e8-tabbar .e8-tab.active .material-symbols-outlined { color: var(--ui-accent); font-variation-settings: 'FILL' 1; }
  .e8-tabbar .e8-tab-badge { position: absolute; top: -2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--ui-radius-pill); background: var(--ui-danger); color: var(--ui-accent-text); font-size: var(--ui-text-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--ui-bg-app); }

  /* Quick-create FAB */
  .e8-fab {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 16px; z-index: 55;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px); width: 52px; height: 52px; border-radius: 16px;
    border: none; background: var(--ui-accent); color: var(--ui-accent-text); box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent, #4F46E5) 42%, transparent); cursor: pointer;
    transition: transform 120ms ease;
  }
  .e8-fab .material-symbols-outlined { font-size: 27px; }
  .e8-fab:active { transform: scale(0.95); }

  /* Bottom sheets: mobile menu + quick create */
  .e8-msheet-backdrop { display: block; position: fixed; inset: 0; z-index: 85; background: var(--ui-scrim, rgba(18, 18, 23, 0.45)); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms; }
  .e8-msheet-backdrop.is-open { opacity: 1; visibility: visible; }
  .e8-msheet, .e8-createsheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
    background: var(--ui-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 44px rgba(18, 18, 23, 0.24);
    transform: translateY(102%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .e8-msheet { max-height: 88vh; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .e8-createsheet { padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
  .e8-msheet.is-open, .e8-createsheet.is-open { transform: translateY(0); }
  .e8-msheet-grab { width: 38px; height: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-border-strong); margin: 8px auto 4px; flex: none; cursor: pointer; }
  .e8-msheet-head { display: flex; align-items: center; gap: 11px; padding: 8px 16px 12px; }
  .e8-msheet-close { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--ui-fill); border-radius: var(--ui-radius-pill); color: var(--ui-text-secondary); cursor: pointer; }
  .e8-msheet-search { display: flex; align-items: center; gap: 9px; margin: 0 16px 6px; height: 40px; padding: 0 12px; background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: 10px; color: var(--ui-text-tertiary); font: inherit; font-size: var(--ui-text-base); cursor: pointer; }
  .e8-msheet-search .material-symbols-outlined { font-size: 18px; }
  .e8-msheet-search .e8-kbd { margin-left: auto; }
  .e8-msheet-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 12px; }
  .e8-msheet-group { margin-top: 6px; }
  .e8-msheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: none; background: transparent; border-radius: 12px; cursor: pointer; text-align: left; }
  .e8-msheet-item:active { background: var(--ui-fill); }
  .e8-msheet-item.active { background: var(--ui-accent-tint); }
  .e8-msheet-ic { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ui-fill); color: var(--ui-text-secondary); }
  .e8-msheet-item.active .e8-msheet-ic { background: var(--ui-accent); color: var(--ui-accent-text); }
  .e8-msheet-ic .material-symbols-outlined { font-size: 19px; }
  .e8-msheet-label { flex: 1; min-width: 0; font-size: var(--ui-text-md); color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .e8-msheet-item.active .e8-msheet-label { font-weight: 600; color: var(--ui-accent); }
  .e8-msheet-chev { font-size: var(--ui-text-2xl); color: var(--ui-text-tertiary); flex: none; }
  .e8-msheet-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--ui-border); }
  .e8-msheet-foot .e8-askai-btn, .e8-msheet-foot .e8-install-btn { height: 42px; justify-content: center; font-size: var(--ui-text-base); }
  .e8-more-nav.mobile { margin: 0; border: none; box-shadow: none; }
  .e8-more-nav.mobile .e8-more-nav-head { padding: 0 4px 8px; }
  .e8-more-nav.mobile .e8-more-nav-list { max-height: none; }
  .e8-createsheet-title { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px 8px; }
  .e8-create-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: none; background: transparent; border-radius: 12px; cursor: pointer; }
  .e8-create-item:active { background: var(--ui-fill); }
  .e8-create-ic { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--ui-accent-tint); color: var(--ui-accent); }
  .e8-create-ic .material-symbols-outlined { font-size: 21px; }
  .e8-create-label { display: block; font-size: var(--ui-text-md); font-weight: 500; color: var(--ui-text); }
  .e8-create-sub { display: block; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }

  /* Stack detail layouts: main column + right rail */
  .e8-record-2col { flex-direction: column; }
  .e8-rail { width: 100%; }
  .e8-cand-overview { grid-template-columns: 1fr; }
  .e8-intel-grid { grid-template-columns: 1fr; }

  /* Ask AI panel - full-screen slide-up overlay on mobile (undo the desktop float) */
  .e8-ai-panel { width: 100%; max-width: 100%; margin: 0; border: none; border-radius: 0; transform: translateY(100%); padding-top: env(safe-area-inset-top, 0px); }
  .e8-ai-overlay.is-open .e8-ai-panel { transform: translateY(0); }

  /* Tables: let dense grids scroll horizontally rather than overflow the page */
  .e8-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Denser KPI / stat grids */
  .e8-kpi-row, .e8-cfg-stats, .e8-intel-stats, .e8-cs-results { grid-template-columns: repeat(2, 1fr); }
  .e8-jobstats { grid-template-columns: repeat(2, 1fr); }

  /* Candidate review bar clears the tab bar and the (now absent) sidebar */
  .e8-reviewbar-wrap { left: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 10px); }

  /* Page headers wrap instead of forcing nowrap */
  .e8-pagehead h1 { white-space: normal; }
  /* R101: scoped - let the "Viewing as" action row drop below the title on narrow screens
     instead of squeezing the title/subtitle column. Opt-in via .e8-pagehead-wrap. */
  .e8-pagehead-wrap { flex-wrap: wrap; }
  .e8-pagehead-wrap .e8-pagehead-actions { width: 100%; justify-content: flex-start; margin-top: 4px; }

  /* Stack common two-column dashboard / reports / sequences grids */
  .e8-content [style*="1fr 300px"], .e8-content [style*="1fr 320px"], .e8-content [style*="1fr 340px"], .e8-content [style*="1fr 360px"],
  .e8-content [style*="300px 1fr"], .e8-content [style*="320px 1fr"],
  .e8-content [style*="1.35fr"], .e8-content [style*="2fr 1fr"],
  .e8-content [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Collapse dense KPI / metric grids to two columns */
  .e8-content [style*="repeat(6, 1fr)"], .e8-content [style*="repeat(5, 1fr)"], .e8-content [style*="repeat(4, 1fr)"], .e8-content [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Mobile card rows ---- */
  .e8-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
  .e8-swipe { position: relative; border-radius: var(--ui-radius-xl); overflow: hidden; }
  .e8-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
  .e8-swipe-act { width: 64px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ui-accent-text); font-size: var(--ui-text-xs); font-weight: 600; cursor: pointer; }
  .e8-swipe-act .material-symbols-outlined { font-size: 20px; }
  .e8-swipe-card { position: relative; background: var(--ui-surface, #fff); will-change: transform; }
  .e8-swipe-card.dragging { transition: none; }
  .e8-swipe-card:not(.dragging) { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }

  .e8-mcard { display: flex; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #ECECEF); border-radius: var(--ui-radius-xl); overflow: hidden; box-shadow: var(--ui-shadow-1); }
  .e8-mcard-rail { width: 4px; flex: 0 0 auto; }
  .e8-mcard-body { flex: 1; min-width: 0; padding: 11px 12px; }
  .e8-mcard-top { display: flex; align-items: center; gap: 10px; }
  .e8-mcard-name { font-weight: 650; font-size: var(--ui-text-md); color: var(--ui-text, #16181F); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e8-mcard-role { font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #6B7280); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e8-mcard-meta { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); margin-top: 7px; }
  .e8-mcard-skills { margin-top: 7px; }
  .e8-mcard-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ui-border-subtle, #F0F0F2); }
  .e8-mcard-when { margin-left: auto; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); display: inline-flex; align-items: center; }
  .e8-mjob-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
  .e8-mjob-next { display: grid; gap: 6px; margin-top: 11px; }
  .e8-mjob-next button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 42px; padding: 8px 10px; border: none; border-radius: var(--ui-radius); background: var(--ui-accent); color: var(--ui-accent-text); font: inherit; font-size: var(--ui-text-sm); font-weight: 600; text-align: left; cursor: pointer; }
  .e8-mjob-next button:active { background: var(--ui-accent-hover); }
  .e8-mjob-next .material-symbols-outlined { flex: none; font-size: var(--ui-text-lg); }
  .e8-mjob-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-border-subtle); }
  .e8-mjob-field { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
  .e8-mjob-field > span:first-child { color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); }
  .e8-mjob-field > b { max-width: 100%; overflow: hidden; color: var(--ui-text-secondary); font-size: var(--ui-text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .e8-mjob-pipeline { grid-column: 1 / -1; }
  .e8-mjob-forecast { display: flex; align-items: center; gap: 7px; width: 100%; }
  .e8-mjob-forecast > span { display: inline-flex; width: 44px; }
  .e8-mjob-forecast > b { color: var(--ui-text-secondary); font-size: var(--ui-text-sm); }

  /* ---- Contextual top-bar action ---- */
  .e8-mobilebar-ctx { position: relative; }
  .e8-mobilebar-ctx-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--ui-radius-pill); background: var(--ui-accent, #4F46E5); color: var(--ui-accent-text); font-size: var(--ui-text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }

  /* ---- Hide desktop list toolbars on mobile (function moves to the top-bar action) ---- */
  .e8-list-toolbar-desktop { display: none !important; }

  /* ---- Filter sheet groups (reuses .e8-createsheet shell) ---- */
  .e8-fsheet-group { padding: 12px 2px; border-top: 1px solid var(--ui-border-subtle, #F0F0F2); }
  .e8-fsheet-group:first-child { border-top: 0; }
  .e8-fsheet-k { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary, #9097A1); margin-bottom: 8px; }
  .e8-fsheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* Keyboard focus ring on real focusable controls (a11y - visible Tab navigation) */
.elev8 button:focus-visible,
.elev8 input:focus-visible,
.elev8 textarea:focus-visible,
.elev8 select:focus-visible,
.elev8 a[href]:focus-visible,
.elev8 [tabindex]:focus-visible { outline: none; box-shadow: var(--ui-focus-ring, 0 0 0 2px #FFFFFF, 0 0 0 4px #4F46E5); }

/* ---------- UI flexibility: configurable columns ---------- */
/* Generic mobile fallback cards for ConfigurableTable record lists. Namespaced .e8-rcard to avoid
   colliding with the candidate-specific .e8-mcard. Rendered (JS isMobile) only on narrow screens. */
.e8-rcardlist { display: flex; flex-direction: column; gap: 9px; }
.e8-rcard { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); padding: 12px 13px; box-shadow: var(--ui-shadow-1); }
.e8-rcard.is-click { cursor: pointer; transition: transform .12s ease, border-color .12s ease; -webkit-tap-highlight-color: transparent; }
.e8-rcard.is-click:hover { border-color: var(--ui-border-strong); }
.e8-rcard.is-click:active { transform: scale(.985); }
.e8-rcard.is-click:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.e8-rcard-title { font-size: var(--ui-text-md); font-weight: 500; color: var(--ui-text); margin-bottom: 8px; line-height: 1.25; }
.e8-rcard-rows { display: flex; flex-direction: column; gap: 5px; }
.e8-rcard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--ui-text-sm); min-width: 0; }
.e8-rcard-k { color: var(--ui-text-tertiary); flex: none; }
.e8-rcard-v { color: var(--ui-text-secondary); min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* Sortable column headers (DataTable opt-in via column.sortable) */
.e8-th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; letter-spacing: inherit; text-transform: inherit; }
.e8-th-sort:hover { color: var(--ui-text); }
.e8-th-sort:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: 4px; }
.e8-th-sortglyph { font-size: var(--ui-text-md); opacity: .35; transition: opacity .12s ease; }
.e8-th-sort:hover .e8-th-sortglyph { opacity: .7; }
.e8-th-sort.is-sorted .e8-th-sortglyph { opacity: 1; color: var(--ui-accent); }
.e8-table th.num .e8-th-sort { flex-direction: row-reverse; }
.e8-table th.e8-col-draggable { user-select: none; }
.e8-table th.e8-col-dragover { box-shadow: inset 3px 0 var(--ui-accent); }

.e8-ctable-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.e8-ctable-toolbar-left { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.e8-colswrap { position: relative; display: inline-block; }
.e8-colsmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 248px;
  background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #ECECEF); border-radius: 10px;
  box-shadow: var(--ui-shadow-pop); padding: 6px; }
.e8-colsmenu-h { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary, #9097A1); padding: 6px 8px 4px; }
.e8-colsmenu-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; }
.e8-colsmenu-row:hover { background: var(--ui-fill, #F4F4F6); }
.e8-colsmenu-lab { display: flex; align-items: center; gap: 8px; flex: 1; font-size: var(--ui-text-base); color: var(--ui-text, #16181F); cursor: pointer; }
.e8-iconbtn { border: 1px solid var(--ui-border, #ECECEF); background: var(--ui-surface, #fff); border-radius: 6px; width: 22px; height: 22px; line-height: 1; cursor: pointer; color: var(--ui-text-secondary, #6B7280); }
.e8-iconbtn:disabled { opacity: .35; cursor: default; }
.e8-colsmenu-reset { margin-top: 4px; width: 100%; border: 0; background: none; color: var(--ui-accent, #4F46E5); font-size: var(--ui-text-sm); padding: 7px 8px; cursor: pointer; text-align: left; border-radius: 6px; }
.e8-colsmenu-reset:hover { background: var(--ui-accent-tint, #EEF0FE); }
.e8-density-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 2px 6px 6px; }
.e8-density-options button { height: 30px; border: 1px solid var(--ui-border, #ECECEF); border-radius: 7px; background: var(--ui-surface, #fff); color: var(--ui-text-secondary); font-size: var(--ui-text-sm); cursor: pointer; }
.e8-density-options button[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-tint); color: var(--ui-accent); font-weight: 600; }
.e8-views-empty { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary, #9097A1); padding: 4px 8px 8px; max-width: 220px; line-height: 1.4; }
.e8-views-apply { flex: 1; text-align: left; border: 0; background: none; font-size: var(--ui-text-base); color: var(--ui-text, #16181F); padding: 4px 2px; cursor: pointer; border-radius: 6px; min-width: 0; }
.e8-views-apply:hover { color: var(--ui-accent, #4F46E5); }
.e8-views-save { display: flex; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ui-border, #F0F0F2); }
.e8-views-save input { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--ui-border, #ECECEF); border-radius: 7px; padding: 0 8px; font-size: var(--ui-text-sm); background: var(--ui-surface, #fff); color: var(--ui-text, #16181F); }
.e8-views-savebtn { border: 0; background: var(--ui-accent, #4F46E5); color: var(--ui-accent-text); border-radius: 7px; padding: 0 12px; font-size: var(--ui-text-sm); font-weight: 600; cursor: pointer; }
.e8-views-savebtn:disabled { opacity: .4; cursor: default; }

/* ---------- UI flexibility: configurable dashboard ---------- */
.e8-dashgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; }
.e8-dashcell.span-2 { grid-column: span 2; } .e8-dashcell.span-3 { grid-column: span 3; }
.e8-dashcell.span-4 { grid-column: span 4; } .e8-dashcell.span-6 { grid-column: span 6; }
.e8-dashcell.editing { outline: 1px dashed var(--ui-border-strong, #C9CCD6); outline-offset: 4px; border-radius: 12px; }
.e8-dashcell-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.e8-dashcell-bar > span:first-child { font-size: var(--ui-text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary, #9097A1); }
.e8-dashcell-bar > span:last-child { display: inline-flex; gap: 4px; }
.e8-addcard { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 16px; border: 1px dashed var(--ui-border-strong, #C9CCD6); border-radius: var(--ui-radius-xl); background: var(--ui-fill, #F8F8FA); }
.e8-addcard-chip { border: 1px solid var(--ui-border, #ECECEF); background: var(--ui-surface, #fff); border-radius: var(--ui-radius-pill); padding: 5px 12px; font-size: var(--ui-text-sm); cursor: pointer; color: var(--ui-text, #16181F); }
.e8-addcard-chip:hover { border-color: var(--ui-accent, #4F46E5); color: var(--ui-accent, #4F46E5); }
@media (max-width: 840px) { .e8-dashgrid { grid-template-columns: minmax(0, 1fr); } .e8-dashcell { grid-column: span 1 !important; min-width: 0; } .e8-dashcell * { min-width: 0; } .e8-dashcell svg { max-width: 100%; } }
.e8-pinned-empty { display: grid; gap: 8px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-pinned-empty button { padding: 0; border: 0; background: none; color: var(--ui-accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Engagement command center ---------- */
.e8-eng-hd { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
/* Right-aligned trend zone: label over sparkline, using the header's otherwise-empty right side. */
.e8-eng-hd-trend { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding-right: 4px; min-width: 0; }
.e8-eng-hd-trend-l { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary); white-space: nowrap; }
@media (max-width: 840px) {
  .e8-eng-hd { flex-wrap: wrap; }
  .e8-eng-hd-trend { margin-left: 0; width: 100%; flex-direction: row; align-items: center; gap: 10px; padding-right: 0; }
}
.e8-ring { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.e8-ring-in { width: 60px; height: 60px; border-radius: 50%; background: var(--ui-surface, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.e8-ring-in b { font-size: var(--ui-text-3xl); color: var(--ui-text, #16181F); line-height: 1; }
.e8-ring-in span { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); letter-spacing: .04em; }
.e8-eng-factor { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: var(--ui-text-sm); }
.e8-eng-factor-n { width: 110px; flex: 0 0 auto; color: var(--ui-text-secondary, #374151); }
.e8-eng-factor-bar { flex: 1; height: 7px; background: var(--ui-fill, #F0F0F2); border-radius: 4px; overflow: hidden; }
.e8-eng-factor-bar > span { display: block; height: 100%; border-radius: 4px; }
.e8-eng-factor-v { width: 42px; text-align: right; font-weight: 600; font-size: var(--ui-text-xs); flex: 0 0 auto; }
/* Consumed-runway color is tone-aware (--runway-c/-tint, set inline): danger only when the PO
   runs dry before SOW end; a healthy burn reads success so the bar agrees with the copy under it. */
.e8-eng-runway { height: 30px; border-radius: 8px; position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--runway-c, var(--ui-danger)) 55%, var(--ui-surface)) 0 var(--burn, 71%), var(--runway-tint, var(--ui-danger-tint)) var(--burn, 71%) 100%); }
.e8-eng-mark { position: absolute; top: -6px; bottom: -6px; width: 0; }
.e8-eng-mark > i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; }
.e8-eng-mark > b { position: absolute; top: -16px; left: 0; transform: translateX(-50%); font-size: var(--ui-text-xs); font-weight: 600; white-space: nowrap; }
.e8-eng-mark-end > b { transform: translateX(-100%); }
.e8-eng-mem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ui-border, #F0F0F2); cursor: pointer; }
.e8-eng-mem:first-of-type { border-top: 0; }
.e8-eng-mem:hover { background: var(--ui-fill, #FBFBFC); }
.e8-eng-membar { width: 64px; height: 6px; background: var(--ui-fill, #F0F0F2); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.e8-eng-membar > span { display: block; height: 100%; border-radius: 4px; }
.e8-eng-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.e8-eng-act { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ui-border, #F4F4F6); }
.e8-eng-act:first-of-type { border-top: 0; }
.e8-eng-act-ic { font-size: var(--ui-text-2xl); color: var(--ui-accent, #4644B8); background: var(--ui-accent-tint, #EEF0FE); border-radius: 7px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.e8-eng-tl { display: grid; gap: 4px 3px; align-items: center; overflow-x: auto; }
.e8-eng-tlh { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); text-align: center; }
.e8-eng-tlname { font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #23262F); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-eng-seg { height: 16px; border-radius: 4px; }
.e8-eng-seg.on { background: var(--ui-accent); } .e8-eng-seg.ramp { background: var(--ui-daybreak); }
.e8-eng-seg.risk { background: color-mix(in srgb, var(--ui-danger) 60%, var(--ui-surface)); } .e8-eng-seg.gap { background: var(--ui-fill, #F2F2F4); }
.e8-eng-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary, #6B7280); }
.e8-eng-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.e8-eng-white { background: linear-gradient(90deg, var(--ui-accent-tint), var(--ui-surface)); border-color: var(--ui-daybreak-tint); }
.e8-eng-ms { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.e8-eng-ms-ic { width: 16px; text-align: center; flex: 0 0 auto; }
.e8-eng-2col { display: flex; gap: 14px; align-items: start; }
.e8-eng-2col > .e8-card { flex: 1 1 0; min-width: 0; }
/* Stacked mode must also stretch: align-items:start is right for the side-by-side row, but in
   column direction it becomes the horizontal axis and shrink-wraps each card to its content. */
@media (max-width: 840px) { .e8-eng-2col { flex-direction: column; align-items: stretch; } .e8-eng-2col > .e8-card { flex: 1 1 auto; } }

/* ---------- Engagement command center: PO ledger, CSAT, economics, utilization (R58) ---------- */
.e8-eng-ledger { margin-top: 16px; border-top: 1px solid var(--ui-border, #ECECEF); padding-top: 12px; }
.e8-eng-ledger-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); margin-bottom: 8px; }
.e8-eng-po { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.e8-eng-po-name { width: 160px; flex: 0 0 auto; font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-eng-po-bar { flex: 1; height: 7px; background: var(--ui-fill, #F0F0F2); border-radius: 4px; overflow: hidden; }
.e8-eng-po-bar > span { display: block; height: 100%; border-radius: 4px; }
.e8-eng-po-amt { width: 118px; flex: 0 0 auto; text-align: right; font-size: var(--ui-text-xs); color: var(--ui-text-secondary, #6B7280); }

.e8-eng-csat { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.e8-eng-csat-score { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.e8-eng-csat-big { font: 500 var(--ui-text-metric)/1.15 var(--font-brand); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.e8-eng-csat-big i { font-size: var(--ui-text-lg); font-weight: 500; font-style: normal; color: var(--ui-text-tertiary, #9097A1); margin-left: 2px; }
.e8-eng-csat-meta { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); margin-top: 6px; }
.e8-eng-csat-note { font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #6B7280); font-style: italic; }
.e8-eng-csat-chart { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.e8-eng-cbar { width: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.e8-eng-cbar > span { width: 100%; min-height: 4px; border-radius: 4px 4px 0 0; }
.e8-eng-cbar > em { font-size: var(--ui-text-xs); font-style: normal; color: var(--ui-text-tertiary, #B0B3BD); margin-top: 4px; }
.e8-eng-surveys { margin-top: 14px; border-top: 1px solid var(--ui-border, #ECECEF); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.e8-eng-survey { display: flex; gap: 10px; align-items: flex-start; }
.e8-eng-survey-score { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: var(--ui-text-sm); font-weight: 700; }

.e8-eng-econ { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.e8-eng-econ-stat { background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.e8-eng-econ-stat b { font-size: var(--ui-text-xl); }
.e8-eng-econ-stat span { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-eng-margin-bar { position: relative; height: 8px; background: var(--ui-fill, #F0F0F2); border-radius: 5px; }
.e8-eng-margin-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--ui-accent); }
.e8-eng-margin-bar > i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ui-text); border-radius: 2px; transform: translateX(-1px); }

.e8-eng-util { display: flex; flex-direction: column; gap: 7px; }
.e8-eng-util-row { display: flex; align-items: center; gap: 10px; }
.e8-eng-util-name { width: 110px; flex: 0 0 auto; font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-eng-util-cells { flex: 1; display: flex; gap: 4px; }
.e8-eng-util-cells i { flex: 1; height: 18px; border-radius: 4px; }
.e8-eng-util-pct { width: 40px; flex: 0 0 auto; text-align: right; font-size: var(--ui-text-xs); font-weight: 600; }

/* ---------- Engagements portfolio band + program cards (R59) ---------- */
/* Portfolio band - a grid of canonical KpiCard tiles (.e8-kpi). */
.e8-eng-portfolio { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 980px) { .e8-eng-portfolio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .e8-eng-portfolio { grid-template-columns: repeat(2, 1fr); } }
.e8-prog-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(90deg, var(--ui-accent-tint, #EEF0FE), var(--ui-surface, #fff)); border-color: var(--ui-daybreak-soft, #DDE3FE); }
.e8-prog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .e8-prog-grid { grid-template-columns: 1fr; } }
.e8-prog-card { padding: 12px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.e8-prog-card:hover { border-color: var(--ui-daybreak-soft, #C7D2FE); box-shadow: var(--ui-shadow-2h); }
.e8-prog-stats { display: flex; gap: 16px; }
.e8-prog-stats > div { display: flex; flex-direction: column; }
.e8-prog-stats b { font-size: var(--ui-text-lg); }
.e8-prog-stats span { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); }

/* ---------- Commissions / Sales ---------- */
.e8-comm-chain { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.e8-comm-step { flex: 1; min-width: 124px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); padding: 12px 14px; }
.e8-comm-step-v { font-size: var(--ui-text-2xl); font-weight: 700; margin-top: 6px; }
.e8-comm-step-k { font-size: var(--ui-text-sm); font-weight: 500; margin-top: 2px; }
.e8-comm-step-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-comm-arrow { align-self: center; color: var(--ui-text-tertiary); font-size: var(--ui-text-2xl); }
.e8-comm-pendbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; background: var(--ui-warning-tint); border-radius: 10px; }
.e8-comm-reps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .e8-comm-reps { grid-template-columns: 1fr; } }
.e8-comm-rep { text-align: left; border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: var(--ui-radius-xl); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; font: inherit; color: var(--ui-text); }
.e8-comm-rep:hover { border-color: var(--ui-border-strong); }
.e8-comm-rep.sel { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.e8-comm-rep-h { display: flex; align-items: center; gap: 9px; }
.e8-comm-bar { position: relative; height: 8px; background: var(--ui-fill); border-radius: 5px; }
.e8-comm-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ui-accent); border-radius: 5px; }
.e8-comm-bar-ghost { position: absolute; top: 0; bottom: 0; background: var(--ui-daybreak); opacity: .55; border-radius: 5px; }
.e8-comm-bar-quota { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ui-text); transform: translateX(-1px); }
.e8-comm-rep-f { display: flex; justify-content: space-between; font-size: var(--ui-text-sm); gap: 8px; }
.e8-comm-rep-k { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary); margin-right: 5px; }
.e8-comm-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--ui-border); cursor: pointer; }
.e8-comm-row:first-child { border-top: 0; }
.e8-comm-row:hover { background: var(--ui-fill); }
.e8-comm-row-n { width: 92px; flex: 0 0 auto; text-align: right; font-size: var(--ui-text-sm); }
.e8-comm-row-n .e8-comm-rep-k { display: block; text-align: right; margin: 0 0 1px; }

/* ---------- Timesheet status dot (consultant record) ---------- */
.e8-ts-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.e8-ts-dot.approved { background: var(--ui-success); }
.e8-ts-dot.submitted { background: var(--ui-warning); }
.e8-ts-dot.pending { background: var(--ui-text-tertiary); }

/* ---------- Time entry sheet (consultant) ---------- */
.e8-tsheet { display: grid; gap: 14px; padding: 15px 16px; }
.e8-tsheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.e8-tsheet-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 3px; }
.e8-tsheet-prior { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 11px; background: var(--ui-fill); border-radius: 9px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-tsheet-prior-w { display: inline-flex; gap: 4px; align-items: baseline; }
.e8-tsheet-prior-w i { font-style: normal; }
.e8-tsheet-prior-w b { color: var(--ui-text-secondary); }
.e8-tsheet-prior-sum { margin-left: auto; color: var(--ui-text-secondary); font-weight: 600; }
.e8-tsheet-scroll { overflow-x: auto; }
.e8-tsheet-grid { min-width: 520px; border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; }
.e8-tsheet-row { display: grid; grid-template-columns: minmax(148px, 1.6fr) repeat(7, 1fr) 46px; border-top: 1px solid var(--ui-border); }
.e8-tsheet-row:first-child { border-top: none; }
.e8-tsheet-cell { padding: 7px 8px; font-size: var(--ui-text-sm); display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--ui-border); }
.e8-tsheet-lh { border-left: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.e8-tsheet-lh b { font-size: var(--ui-text-sm); font-weight: 600; line-height: 1.2; }
.e8-tsheet-task { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-tsheet-hrow { background: var(--ui-fill); }
.e8-tsheet-hrow .e8-tsheet-cell { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-text-tertiary); font-weight: 600; }
.e8-tsheet-hrow .e8-tsheet-lh { align-items: flex-start; }
.e8-tsheet-dh.wknd { background: color-mix(in srgb, var(--ui-fill) 55%, var(--ui-surface)); color: var(--ui-text-secondary); }
.e8-tsheet-dc { font-variant-numeric: tabular-nums; }
.e8-tsheet-dc.z { color: var(--ui-border-strong); }
.e8-tsheet-dc.wknd { background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); font-weight: 600; }
.e8-tsheet-tc { font-weight: 600; background: var(--ui-fill); font-variant-numeric: tabular-nums; }
.e8-tsheet-in { width: 100%; box-sizing: border-box; border: 1px solid var(--ui-border-strong); border-radius: 6px; padding: 4px 2px; text-align: center; font: inherit; font-size: var(--ui-text-sm); background: var(--ui-surface); color: var(--ui-text); -moz-appearance: textfield; }
.e8-tsheet-in:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-tint); }
.e8-tsheet-clsrow { background: color-mix(in srgb, var(--ui-fill) 45%, var(--ui-surface)); }
.e8-tsheet-clsrow .e8-tsheet-lh { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-text-tertiary); }
.e8-tsheet-pips { display: flex; gap: 2px; }
.e8-tsheet-z { color: var(--ui-border-strong); }
.e8-pip { font-style: normal; font-size: var(--ui-text-xs); font-weight: 700; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cc) 18%, var(--ui-surface)); color: var(--cc); }
.e8-tsheet .cat-reg, .e8-thub .cat-reg, .e8-tsum .cat-reg { --cc: var(--ui-text-tertiary); }
.e8-tsheet .cat-ot, .e8-thub .cat-ot, .e8-tsum .cat-ot { --cc: var(--ui-warning); }
.e8-tsheet .cat-dt, .e8-thub .cat-dt, .e8-tsum .cat-dt { --cc: var(--ui-danger); }
.e8-tsheet .cat-oncall, .e8-thub .cat-oncall, .e8-tsum .cat-oncall { --cc: var(--ui-accent); }
.e8-tsheet .cat-hol, .e8-thub .cat-hol, .e8-tsum .cat-hol { --cc: var(--ui-accent); }
.e8-tsheet .cat-pto, .e8-thub .cat-pto, .e8-tsum .cat-pto { --cc: var(--ui-text-tertiary); }
.e8-tsheet .cat-weekend, .e8-thub .cat-weekend, .e8-tsum .cat-weekend { --cc: var(--ui-accent); }
.e8-pip.cat-reg { color: var(--ui-text-secondary); background: var(--ui-fill); }
.e8-tsheet-cats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.e8-tsheet-chip { font-size: var(--ui-text-xs); padding: 3px 8px; border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--cc) 13%, var(--ui-surface)); color: var(--cc); border: 1px solid color-mix(in srgb, var(--cc) 28%, transparent); }
.e8-tsheet-chip.cat-reg { color: var(--ui-text-secondary); }
.e8-tsheet-chip b { font-weight: 700; }
.e8-tsheet-chip-x { opacity: 0.7; font-size: var(--ui-text-xs); }
.e8-tsheet-flagsep { width: 1px; height: 16px; background: var(--ui-border); margin: 0 2px; }
.e8-tsheet-flag { font-size: var(--ui-text-xs); padding: 3px 8px; border-radius: 6px; font-weight: 600; background: color-mix(in srgb, var(--cc) 14%, var(--ui-surface)); color: var(--cc); }
.e8-tsheet-tag { font-size: var(--ui-text-xs); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--cc) 16%, var(--ui-surface)); color: var(--cc); align-self: flex-start; }
.e8-tsheet-proj-roll { border: 1px solid var(--ui-border); border-radius: 9px; padding: 9px 11px; display: grid; gap: 4px; }
.e8-tsheet-proj-h { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-text-tertiary); font-weight: 600; margin-bottom: 2px; }
.e8-tsheet-proj-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--ui-text-sm); padding: 2px 0; }
.e8-tsheet-proj-row.link { cursor: pointer; }
.e8-tsheet-proj-row.link:hover { color: var(--ui-accent); }
.e8-tsheet-proj-n { font-weight: 600; }
.e8-tsheet-tot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.e8-tsheet-tot > div { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--ui-border); padding-left: 10px; }
.e8-tsheet-tot > div:nth-child(3) { border-left-color: var(--ui-success); }
.e8-tsheet-tot-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-tsheet-tot-v { font-size: var(--ui-text-lg); font-weight: 600; }
.e8-tsheet-note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); background: var(--ui-fill); border-radius: 8px; padding: 8px 10px; }
.e8-tsheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.e8-tsheet-metaline { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-tsheet-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.e8-tsheet-rep { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ui-border); padding-top: 10px; }
.e8-tsheet-rep-pend { font-size: var(--ui-text-xs); color: var(--ui-warning-text); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .e8-tsheet-tot { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Time hub (manager view) ---------- */
.e8-thub-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 4px 0 14px; }
.e8-thub-kpi { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); }
.e8-thub-kpi-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-thub-kpi-v { font-size: var(--ui-text-xl); font-weight: 600; }
.e8-thub-kpi-pend { background: var(--ui-warning-tint); border-color: transparent; }
@media (max-width: 900px) { .e8-thub-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .e8-thub-kpis { grid-template-columns: repeat(2, 1fr); } }
.e8-thub-mix { margin-bottom: 14px; }
.e8-thub-mixbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--ui-fill); }
.e8-thub-mixseg { height: 100%; background: var(--cc); }
.e8-thub-mixleg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: var(--ui-text-xs); color: var(--ui-text-secondary); }
.e8-thub-mixlegi { display: inline-flex; align-items: center; gap: 5px; }
.e8-thub-mixlegi i { width: 9px; height: 9px; border-radius: 3px; background: var(--cc); display: inline-block; }
.e8-thub-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.e8-thub-chip { font-size: var(--ui-text-sm); padding: 5px 11px; border-radius: var(--ui-radius-pill); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-secondary); cursor: pointer; }
.e8-thub-chip:hover { border-color: var(--ui-border-strong); }
.e8-thub-chip.on { background: var(--ui-accent); color: var(--ui-accent-text, #fff); border-color: var(--ui-accent); }
.e8-thub-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .e8-thub-cols { grid-template-columns: 1fr; } }
.e8-thub-queue { display: grid; gap: 8px; }
.e8-thub-row { display: grid; grid-template-columns: minmax(170px, 2fr) 96px 84px 104px auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px; }
.e8-thub-row-id { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.e8-thub-row-n { font-size: var(--ui-text-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.e8-thub-row-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-thub-castate { font-size: var(--ui-text-xs); font-weight: 700; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)); color: var(--ui-accent); }
.e8-thub-row-hrs { display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-base); }
.e8-thub-row-pips { display: flex; gap: 2px; }
.e8-thub-row-bill { font-size: var(--ui-text-base); font-weight: 600; text-align: right; }
.e8-thub-row-acts { display: flex; gap: 4px; justify-content: flex-end; }
.e8-thub-empty { padding: 24px; text-align: center; color: var(--ui-text-tertiary); font-size: var(--ui-text-base); background: var(--ui-surface); border: 1px dashed var(--ui-border); border-radius: 10px; }
.e8-thub-side { display: grid; gap: 12px; }
.e8-thub-sidecard { display: grid; gap: 6px; }
.e8-thub-side-h { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-text-tertiary); font-weight: 600; }
.e8-thub-side-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--ui-text-sm); padding: 2px 0; }
.e8-thub-side-row.link { cursor: pointer; }
.e8-thub-side-row.link:hover { color: var(--ui-accent); }
.e8-thub-pendcard { background: var(--ui-warning-tint); }
.e8-thub-pendbig { font-size: var(--ui-text-metric); font-weight: 700; }
.e8-thub-pendsub { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-bottom: 4px; }
.e8-thub-rulelbl { color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); }

/* ---------- AreaTrend chart overlays (crisp HTML labels over the stretched SVG) ---------- */
.e8-areatrend-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--dotc, var(--ui-accent)); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dotc, var(--ui-accent)) 20%, transparent); pointer-events: none; }
.e8-areatrend-val { position: absolute; top: 6px; right: 8px; font-size: var(--ui-text-base); font-weight: 700; color: var(--ui-text); padding: 1px 8px; border-radius: var(--ui-radius-pill); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); }
.e8-areatrend-x { position: absolute; left: 8px; right: 8px; bottom: 2px; display: flex; pointer-events: none; }
.e8-areatrend-xl { flex: 1; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); text-align: center; }
.e8-areatrend-xl:first-child { text-align: left; }
.e8-areatrend-xl:last-child { text-align: right; }

/* ---------- Consultant overview: compact time summary (daily rhythm) ---------- */
.e8-tsum { cursor: pointer; transition: border-color 0.12s ease; padding: 15px 16px; }
.e8-tsum:hover { border-color: var(--ui-border-strong); }
.e8-tsum-hero { display: flex; align-items: flex-end; gap: 18px; margin-top: 12px; }
.e8-tsum-hero-h { flex: none; }
.e8-tsum-hero-n { font-size: var(--ui-text-metric); font-weight: 600; line-height: 1; }
.e8-tsum-hero-u { font-size: var(--ui-text-xl); font-weight: 500; margin-left: 1px; }
.e8-tsum-hero-l { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 3px; }
.e8-tsum-days { flex: 1; display: flex; gap: 6px; }
.e8-tsum-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.e8-tsum-daycol { width: 100%; height: 40px; display: flex; align-items: flex-end; }
.e8-tsum-daybar { width: 100%; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 4px; }
.e8-tsum-daybar.empty { height: 14%; background: var(--ui-border); }
.e8-tsum-seg-reg { background: var(--ui-accent); }
.e8-tsum-seg-ot { background: var(--ui-warning); }
.e8-tsum-seg-dt { background: var(--ui-danger); }
.e8-tsum-daylbl { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-tsum-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.e8-tsum-money { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-border); font-size: var(--ui-text-base); }
.e8-tsum-money b { font-weight: 600; }
.e8-tsum-money-k { color: var(--ui-text-tertiary); }
.e8-tsum-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.e8-tsum-appr { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-tsum-open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-accent); }
@media (max-width: 560px) { .e8-tsum-hero { gap: 12px; } .e8-tsum-hero-n { font-size: var(--ui-text-metric); } }
@media (max-width: 620px) { .e8-thub-row { display: flex; flex-wrap: wrap; } .e8-thub-row-id { flex: 1 1 100%; } .e8-thub-row-bill { text-align: left; } }

/* ---------- Templates hub + editor ---------- */
.e8-tpl-toolbar { margin: 14px 0; max-width: 380px; }
.e8-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 740px) { .e8-tpl-grid { grid-template-columns: 1fr; } }
.e8-tpl-foot { margin-top: 16px; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary, #9097A1); }
.e8-te-ta { width: 100%; min-height: 150px; box-sizing: border-box; border: 1px solid var(--ui-border, #E5E7EB); border-radius: 10px; padding: 12px; font: inherit; font-size: var(--ui-text-base); line-height: 1.55; resize: vertical; color: var(--ui-text, #1A1A1A); background: var(--ui-surface, #fff); }
.e8-te-ta:focus { outline: none; border-color: var(--ui-accent, #6366F1); box-shadow: 0 0 0 3px var(--ui-accent-tint, #EEF0FE); }
.e8-te-builder { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; background: var(--ui-bg-app, #FBFBFD); border: 1px solid var(--ui-border, #F0F0F2); border-radius: 10px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary, #6B7280); }
.e8-tpl-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--ui-border, #F0F0F2); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.e8-tpl-card:hover { border-color: var(--ui-border-strong, #DDE0E8); }
.e8-tpl-type { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: .03em; padding: 3px 7px; border-radius: 6px; height: fit-content; white-space: nowrap; flex: 0 0 auto; }
.e8-tpl-type.t-email { background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-tpl-type.t-sms { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-tpl-type.t-sequence { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-tpl-type.t-form { background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); }
.e8-tpl-type.t-scorecard { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-tpl-type.t-document { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-tpl-type.t-casestudy { background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-tpl-name { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text, #16181F); }
.e8-tpl-prev { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary, #8A909B); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-tpl-meta { display: flex; gap: 12px; margin-top: 7px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary, #9097A1); align-items: center; flex-wrap: wrap; }
.e8-tpl-perf { color: var(--ui-success-text); font-weight: 600; }
.e8-tpl-nudge { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: var(--ui-text-xs); color: var(--ui-warning-text); background: var(--ui-warning-tint); border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-surface)); border-radius: 7px; padding: 3px 6px 3px 10px; margin-top: 8px; }
.e8-te-wrap { display: grid; grid-template-columns: 1fr 300px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #ECECEF); border-radius: var(--ui-radius-xl); overflow: hidden; }
.e8-te-edit { padding: 16px; border-right: 1px solid var(--ui-border, #F0F0F2); }
.e8-te-l { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary, #9097A1); font-weight: 600; margin: 12px 0 5px; }
.e8-te-body { border: 1px solid var(--ui-border, #ECECEF); border-radius: 8px; padding: 12px; font-size: var(--ui-text-base); color: var(--ui-text-secondary, #374151); line-height: 1.6; min-height: 150px; }
.e8-mf { background: var(--ui-accent-tint, #EEF0FE); color: var(--ui-daybreak-text); border-radius: 5px; padding: 1px 5px; font-size: var(--ui-text-sm); font-weight: 500; white-space: nowrap; }
.e8-te-palette { margin-top: 12px; }
.e8-te-chip { display: inline-block; font-size: var(--ui-text-xs); color: var(--ui-daybreak-text); background: var(--ui-accent-tint, #F4F4FB); border: 1px solid var(--ui-border-subtle); border-radius: 6px; padding: 3px 8px; margin: 0 5px 5px 0; cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; }
.e8-te-rail { padding: 14px; background: var(--ui-bg-app, #FBFBFD); }
.e8-te-sug { border: 1px solid var(--ui-daybreak-tint); background: var(--ui-accent-tint); border-radius: 9px; padding: 10px; font-size: var(--ui-text-sm); color: var(--ui-daybreak-text); margin-bottom: 8px; }
.e8-te-airow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.e8-te-ab { border: 1px solid var(--ui-border, #F0F0F2); border-radius: 9px; padding: 10px; margin-bottom: 8px; }
.e8-te-ab.win { border-color: color-mix(in srgb, var(--ui-success) 40%, var(--ui-surface)); background: var(--ui-success-tint); }
.e8-te-ab-h { display: flex; align-items: center; justify-content: space-between; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text, #16181F); }
.e8-te-ab-bar { height: 6px; background: var(--ui-fill, #EAEAEE); border-radius: 4px; overflow: hidden; margin-top: 7px; }
.e8-te-ab-bar > span { display: block; height: 100%; }
.e8-te-ab-s { font-size: var(--ui-text-xs); color: var(--ui-text-secondary, #6B7280); margin-top: 5px; }
.e8-te-win { font-size: var(--ui-text-xs); font-weight: 700; color: var(--ui-success-text); background: var(--ui-success-tint); padding: 2px 6px; border-radius: 5px; }
@media (max-width: 840px) { .e8-te-wrap { grid-template-columns: 1fr; } .e8-te-edit { border-right: 0; border-bottom: 1px solid var(--ui-border, #F0F0F2); } }

/* ---------- Enrichment (provider-agnostic; namespaced .e8-enr-* / .e8-enr-wf-* - distinct from the
   workflow builder .e8-wf-* and R109 .e8-dup-* / .e8-merge-*) ---------- */
.e8-enr-hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-enr-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--ui-accent); color: var(--ui-accent-text); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.e8-enr-title { font-size: var(--ui-text-md); font-weight: 650; color: var(--ui-text); }
.e8-enr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.e8-enr-field { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ui-border); }
.e8-enr-field-k { width: 92px; flex: 0 0 auto; font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-enr-field-v { font-weight: 600; font-size: var(--ui-text-base); color: var(--ui-text); }
.e8-enr-prov { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); background: var(--ui-fill); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.e8-enr-intent { display: flex; align-items: center; gap: 8px; font-size: var(--ui-text-sm); padding: 5px 0; }
.e8-enr-bar { height: 6px; width: 96px; background: var(--ui-fill); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.e8-enr-bar > span { display: block; height: 100%; background: var(--ui-accent); }
.e8-enr-sug { display: flex; align-items: center; gap: 8px; background: var(--ui-warning-tint); border: 1px solid color-mix(in srgb, var(--ui-warning) 32%, var(--ui-surface)); border-radius: 8px; padding: 6px 8px 6px 11px; margin-bottom: 7px; font-size: var(--ui-text-sm); color: var(--ui-warning-text); }
.e8-enr-wf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 8px; padding: 8px 10px; font-size: var(--ui-text-sm); }
.e8-enr-wf-label { color: var(--ui-text-secondary); margin-right: 2px; }
.e8-enr-wf-arrow { color: var(--ui-text-tertiary); }
.e8-enr-wf-step { padding: 2px 8px; border-radius: var(--ui-radius-pill); font-size: var(--ui-text-xs); }
.e8-enr-wf-step.miss { background: var(--ui-fill); color: var(--ui-text-tertiary); text-decoration: line-through; }
.e8-enr-wf-step.hit { background: var(--ui-success-tint); color: var(--ui-success-text); font-weight: 600; }
.e8-enr-hubrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.e8-enr-meter { display: block; height: 8px; background: var(--ui-fill); border-radius: 5px; overflow: hidden; margin: 10px 0 6px; }
.e8-enr-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ui-daybreak), var(--ui-accent)); }
.e8-enr-qrow { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-enr-qrec { width: 130px; flex: 0 0 auto; font-weight: 600; font-size: var(--ui-text-sm); color: var(--ui-text); }
.e8-enr-conf { font-size: var(--ui-text-xs); font-weight: 650; padding: 2px 8px; border-radius: var(--ui-radius-pill); background: var(--ui-warning-tint); color: var(--ui-warning-text); }
/* the honest, always-visible caveat line */
.e8-enr-caveat { font-size: var(--ui-text-xs); line-height: 1.45; color: var(--ui-text-tertiary); }
/* per-record cost / coverage readout */
.e8-enr-readout { background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; }
.e8-enr-readout-row { display: flex; align-items: baseline; gap: 8px; font-size: var(--ui-text-sm); }
.e8-enr-readout-k { width: 108px; flex: 0 0 auto; color: var(--ui-text-tertiary); }
.e8-enr-readout-v { color: var(--ui-text-secondary); font-weight: 500; }
/* the two-layer provider stack */
.e8-enr-layer { border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.e8-enr-layer-hd { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--ui-bg-app); border-bottom: 1px solid var(--ui-border); }
.e8-enr-layer-ico { font-size: var(--ui-text-2xl); color: var(--ui-accent); flex: 0 0 auto; }
.e8-enr-layer-t { font-size: var(--ui-text-sm); font-weight: 650; color: var(--ui-text); }
.e8-enr-layer-d { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-enr-prov-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
.e8-enr-prov-row:last-child { border-bottom: 0; }
.e8-enr-prov-row.off { opacity: 0.55; }
.e8-enr-prov-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.e8-enr-prov-name { display: flex; align-items: center; gap: 6px; font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-enr-prov-ord { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; background: var(--ui-daybreak-wash); color: var(--ui-daybreak-text); font-size: var(--ui-text-xs); font-weight: 700; flex: 0 0 auto; }
.e8-enr-prov-region { font-size: var(--ui-text-xs); font-weight: 650; padding: 1px 6px; border-radius: var(--ui-radius-pill); background: var(--ui-info-tint); color: var(--ui-info-text); }
.e8-enr-prov-role { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-enr-prov-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.e8-enr-prov-cost { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text-tertiary); white-space: nowrap; }
/* compliance posture rows */
.e8-enr-posture-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-enr-posture-row:last-child { border-bottom: 0; }
.e8-enr-posture-ico { font-size: var(--ui-text-xl); color: var(--ui-text-tertiary); align-self: center; flex: 0 0 auto; }
.e8-enr-posture-k { width: 140px; flex: 0 0 auto; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text); }
.e8-enr-posture-v { flex: 1; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; }
/* candidate run - skipped rows */
.e8-enr-skiphd { font-size: var(--ui-text-sm); font-weight: 650; color: var(--ui-warning-text); margin-bottom: 7px; }
.e8-enr-skip { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 6px; }
.e8-enr-blocked { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 11px 12px; background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: 8px; }
/* R108 T3: a review-queue row held by provenance precedence (candidate-verified / recruiter-entered) -
   both values, provenance, and an explicit override vs keep. Namespaced .e8-enr-conflict-* (distinct from
   the workflow builder .e8-wf-*). */
.e8-enr-conflict { display: block; padding: 12px 16px; background: var(--ui-warning-tint); border-left: 3px solid var(--ui-warning); }
.e8-enr-conflict-hd { display: flex; align-items: center; gap: 8px; }
.e8-enr-conflict-ico { font-size: var(--ui-text-2xl); color: var(--ui-warning-text); flex: 0 0 auto; }
.e8-enr-conflict-field { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary); }
.e8-enr-conflict-note { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; margin: 7px 0 9px; }
.e8-enr-conflict-vals { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.e8-enr-conflict-val { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; padding: 7px 10px; }
.e8-enr-conflict-val b { font-size: var(--ui-text-base); color: var(--ui-text); word-break: break-word; }
.e8-enr-conflict-k { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ui-text-tertiary); }
.e8-enr-conflict-arrow { align-self: center; font-size: var(--ui-text-2xl); color: var(--ui-text-tertiary); flex: 0 0 auto; }
.e8-enr-conflict-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 840px) {
  .e8-enr-grid, .e8-enr-hubrow { grid-template-columns: 1fr; }
  .e8-enr-qrow { flex-wrap: wrap; } .e8-enr-qrec { width: auto; }
  .e8-enr-posture-k, .e8-enr-readout-k { width: auto; }
  .e8-enr-posture-row { flex-wrap: wrap; }
  .e8-enr-conflict-arrow { transform: rotate(90deg); }
}

/* ---------- Voice/Type capture ---------- */
.e8-cap-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: transparent; opacity: 0; visibility: hidden; pointer-events: none;
  transition: background-color 220ms ease, opacity 200ms ease, visibility 0s linear 240ms; }
.e8-cap-overlay.is-open { background: var(--ui-scrim); opacity: 1; visibility: visible; pointer-events: auto; transition: background-color 220ms ease, opacity 200ms ease; }
.e8-cap-sheet { width: 720px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #ECECEF); border-radius: 16px; box-shadow: var(--ui-shadow-2);
  transform: translateY(12px) scale(.98); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.e8-cap-overlay.is-open .e8-cap-sheet { transform: translateY(0) scale(1); }
.e8-cap-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ui-border, #F0F0F2); }
.e8-cap-head b { font-size: var(--ui-text-md); }
.e8-cap-seg { margin-left: auto; display: flex; gap: 3px; background: var(--ui-fill, #F4F4F6); border-radius: 9px; padding: 3px; }
.e8-cap-seg button { border: 0; background: none; font-size: var(--ui-text-sm); padding: 5px 12px; border-radius: 7px; color: var(--ui-text-secondary, #6B7280); cursor: pointer; }
.e8-cap-seg button.on { background: var(--ui-surface, #fff); color: var(--ui-text, #16181F); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.e8-cap-body { padding: 16px; overflow-y: auto; }
.e8-cap-2col { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.e8-cap-convo { min-height: 240px; }
.e8-cap-rec { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-danger-text); margin-bottom: 12px; }
.e8-cap-rec.done { color: var(--ui-success-text); }
.e8-cap-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ui-danger); animation: e8-cap-pulse 1.1s ease-in-out infinite; }
@keyframes e8-cap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.e8-cap-msg { font-size: var(--ui-text-base); line-height: 1.5; border-radius: 10px; padding: 8px 11px; margin-bottom: 9px; max-width: 88%; }
.e8-cap-msg.ai { background: var(--ui-fill, #F7F7F9); color: var(--ui-text, #23262F); }
.e8-cap-msg.me { background: var(--ui-accent-tint, #EEF0FE); color: var(--ui-daybreak-text); margin-left: auto; }
.e8-cap-rail { background: var(--ui-bg-app, #FBFBFD); border: 1px solid var(--ui-border, #F0F0F2); border-radius: 10px; padding: 12px; align-self: start; }
.e8-cap-f { padding: 7px 0; border-bottom: 1px solid var(--ui-border, #F0F0F2); }
.e8-cap-f-k { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--ui-text-tertiary, #9097A1); }
.e8-cap-f-v { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text, #16181F); margin-top: 2px; display: flex; align-items: center; gap: 7px; }
.e8-cap-f.pending .e8-cap-f-v { color: var(--ui-text-tertiary, #C0C3CC); font-weight: 400; font-style: italic; }
.e8-cap-heard { font-size: var(--ui-text-xs); font-weight: 650; padding: 1px 6px; border-radius: 5px; background: var(--ui-success-tint); color: var(--ui-success-text); }
/* (Removed R98: the old form-based capture rules .e8-cap-form/-tf/-tf-k/-tf-i - the intake
   agent's conversation/checklist replaced them.) */
.e8-cap-transcript { font-size: var(--ui-text-base); line-height: 1.6; color: var(--ui-text-secondary, #374151); background: var(--ui-fill, #F7F7F9); border-radius: 10px; padding: 12px; }
.e8-cap-struct { margin-top: 14px; border-top: 1px solid var(--ui-border, #F0F0F2); padding-top: 14px; }
.e8-cap-textarea { width: 100%; box-sizing: border-box; min-height: 160px; border: 1px solid var(--ui-border, #ECECEF); border-radius: 10px; padding: 12px; font-size: var(--ui-text-base); font-family: inherit; resize: vertical; background: var(--ui-surface, #fff); color: var(--ui-text, #16181F); }
.e8-cap-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ui-border, #F0F0F2); flex-wrap: wrap; }
/* R98 job intake agent: conversation pane + live checklist + review notes. */
.e8-cap-turns { overflow-y: auto; max-height: 300px; min-height: 140px; display: flex; flex-direction: column; padding: 2px; }
.e8-cap-send { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.e8-cap-hint { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0; }
.e8-cap-f-click { cursor: pointer; border-radius: 7px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.e8-cap-f-click:hover, .e8-cap-f-click:focus-visible { background: var(--ui-fill); outline: none; }
.e8-cap-f-i { width: 100%; box-sizing: border-box; height: 28px; margin-top: 3px; border: 1px solid var(--ui-border); border-radius: 7px; padding: 0 8px; font-size: var(--ui-text-sm); font-family: inherit; background: var(--ui-surface); color: var(--ui-text); }
.e8-cap-reading { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-text-sm); font-style: italic; font-weight: 400; color: var(--ui-text-tertiary); }
.e8-cap-review { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: 10px; padding: 4px 14px 8px; }
.e8-cap-note { display: flex; align-items: flex-start; gap: 7px; font-size: var(--ui-text-sm); line-height: 1.5; border-radius: 9px; padding: 8px 10px; margin-top: 10px; }
.e8-cap-note.ok { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-cap-note.warn { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-cap-note button { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: inherit; text-decoration: underline; cursor: pointer; }
/* R98 5A candidate résumé intake: drop-zone, inline manual-entry link, duplicate panel. */
.e8-cap-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; border: 1.5px dashed var(--ui-border-strong, #D5D7DE); border-radius: 12px; background: var(--ui-bg-app); color: var(--ui-text-secondary); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.e8-cap-drop:hover, .e8-cap-drop:focus-visible { border-color: var(--ui-accent); background: var(--ui-accent-tint); outline: none; }
.e8-cap-drop .material-symbols-outlined { font-size: 30px; color: var(--ui-accent); }
.e8-cap-drop-t { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-cap-drop-s { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); line-height: 1.5; max-width: 340px; }
.e8-cap-link { border: 0; background: none; padding: 0; font: inherit; font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-accent); text-decoration: underline; cursor: pointer; }
.e8-cap-dup { margin-top: 12px; border: 1px solid var(--ui-warning-br, var(--ui-warning)); border-radius: 11px; background: var(--ui-warning-tint); padding: 11px 13px; }
.e8-cap-dup.hard { border-color: var(--ui-danger-br, var(--ui-danger)); background: var(--ui-danger-tint); }
.e8-cap-dup-head { display: flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); font-weight: 650; color: var(--ui-warning-text); }
.e8-cap-dup.hard .e8-cap-dup-head { color: var(--ui-danger-text); }
.e8-cap-dup-head .material-symbols-outlined { font-size: 16px; }
.e8-cap-dup-body { font-size: var(--ui-text-sm); line-height: 1.5; color: var(--ui-text-secondary); margin: 5px 0 10px; }
.e8-cap-dup-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.e8-resume-raw { font-family: var(--ui-font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: var(--ui-text-sm); line-height: 1.6; color: var(--ui-text-secondary); white-space: pre-wrap; word-break: break-word; margin: 0; }
@media (max-width: 840px) { .e8-cap-overlay { align-items: flex-end; padding: 0; } .e8-cap-sheet { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; transform: translateY(100%); } .e8-cap-2col, .e8-cap-review { grid-template-columns: 1fr; } .e8-cap-turns { max-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .e8-cap-overlay, .e8-cap-sheet { transition: none; } .e8-cap-sheet { transform: none; } .e8-cap-overlay:not(.is-open) { display: none; } }

/* ===================== R99: structured requisition form (screens-req.jsx) ===================== */
/* z-index 95 matches .e8-overlay so the later-in-DOM discard ConfirmDialog stacks above the sheet. */
.e8-reqform-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ui-scrim); }
.e8-reqform-sheet { width: 780px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow-2); }
.e8-reqform-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-reqform-head b { font-size: var(--ui-text-md); color: var(--ui-text); }
.e8-reqform-hint { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 2px; }
.e8-reqform-head > :last-child { margin-left: auto; }
.e8-reqform-steps { display: flex; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--ui-border); overflow-x: auto; }
.e8-reqform-step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: max-content; border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: var(--ui-radius); color: var(--ui-text-tertiary); font-family: inherit; }
.e8-reqform-step:hover { background: var(--ui-fill-hover); }
.e8-reqform-step.on { color: var(--ui-text); background: var(--ui-accent-tint); }
.e8-reqform-step-num { flex: none; width: 20px; height: 20px; border-radius: var(--ui-radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ui-text-xs); font-weight: 600; background: var(--ui-fill); color: var(--ui-text-tertiary); }
.e8-reqform-step.on .e8-reqform-step-num { background: var(--ui-accent); color: var(--ui-accent-text); }
.e8-reqform-step.done .e8-reqform-step-num { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-reqform-step-num .material-symbols-outlined { font-size: 14px; }
.e8-reqform-step-label { font-size: var(--ui-text-sm); font-weight: 500; white-space: nowrap; }
.e8-reqform-body { padding: 16px; overflow-y: auto; }
.e8-reqform-sec { display: grid; gap: 14px; max-width: 660px; }
.e8-reqform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.e8-reqform-subhead { font-size: var(--ui-text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary); }
.e8-reqform-subnote { font-size: var(--ui-text-xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ui-text-tertiary); }
.e8-reqform-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 9px 11px; font-size: var(--ui-text-base); font-family: inherit; line-height: 1.55; resize: vertical; background: var(--ui-surface); color: var(--ui-text); }
.e8-reqform-textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-tint); }
.e8-reqform-rows { display: grid; gap: 8px; }
.e8-reqform-row { display: flex; align-items: center; gap: 8px; }
.e8-reqform-round { display: flex; align-items: center; gap: 8px; }
.e8-reqform-round-num { flex: none; width: 22px; height: 22px; border-radius: var(--ui-radius-pill); background: var(--ui-accent-tint); color: var(--ui-daybreak-text); font-size: var(--ui-text-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.e8-reqform-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-fill); }
.e8-reqform-toggle-label { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); }
.e8-reqform-toggle-help { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-reqform-compliance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.e8-reqform-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.e8-reqform-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text-secondary); font-size: var(--ui-text-sm); font-weight: 500; font-family: inherit; cursor: pointer; }
.e8-reqform-seg-btn:hover { background: var(--ui-fill-hover); }
.e8-reqform-seg-btn.on { background: var(--ui-accent-tint); border-color: var(--ui-daybreak-tint); color: var(--ui-daybreak-text); }
.e8-reqform-seg-btn .material-symbols-outlined { font-size: 16px; }
.e8-reqform-days { display: flex; flex-wrap: wrap; gap: 6px; }
.e8-reqform-day { font-size: var(--ui-text-sm); font-weight: 500; padding: 6px 12px; border-radius: var(--ui-radius-pill); border: 1px solid var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text-tertiary); min-width: 44px; text-align: center; cursor: pointer; font-family: inherit; }
.e8-reqform-day:hover { background: var(--ui-fill-hover); }
.e8-reqform-day.on { background: var(--ui-accent-tint); border-color: var(--ui-daybreak-tint); color: var(--ui-daybreak-text); }
.e8-reqform-margin { display: flex; align-items: center; gap: 8px; font-size: var(--ui-text-sm); color: var(--ui-success-text); background: var(--ui-success-tint); border-radius: var(--ui-radius); padding: 8px 11px; }
.e8-reqform-margin .material-symbols-outlined { font-size: 16px; }
.e8-reqform-margin.bad { color: var(--ui-danger-text); background: var(--ui-danger-tint); }
.e8-reqform-review { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-fill); padding: 14px 16px; }
.e8-reqform-review-title { font-size: var(--ui-text-lg); font-weight: 600; color: var(--ui-text); }
.e8-reqform-review-sub { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-reqform-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ui-border); }
.e8-reqform-foot-hint { flex: 1; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); text-align: center; }
@media (max-width: 840px) {
  .e8-reqform-overlay { align-items: flex-end; padding: 0; }
  .e8-reqform-sheet { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; }
  .e8-reqform-grid, .e8-reqform-compliance { grid-template-columns: 1fr; }
  .e8-reqform-step-label { display: none; }
  .e8-reqform-step { flex: none; }
}

/* ===================== Mobile native revamp - Round 1 ===================== */
/* Touch feedback: every tap feels instant + physical (the web stand-in for iOS haptics) */
.elev8 { -webkit-tap-highlight-color: transparent; }
.elev8 button, .elev8 a, .elev8 [role="button"], .e8-mcard, .e8-triage-card, .e8-tab, .e8-fab, .e8-create-item, .e8-msheet-item { touch-action: manipulation; }

/* ===================== Home operating layer ===================== */
.e8-home-rail { width: 112px; }
.e8-home-rail-brand { margin: 28px 0 24px; }
.e8-home-rail-items { gap: 10px; padding: 0 10px; }
.e8-home-rail-item { min-height: 70px; gap: 6px; border-radius: 14px; font-size: var(--ui-text-sm); }
.e8-home-rail-item .material-symbols-outlined { font-size: var(--ui-text-3xl); }
.e8-home-app .e8-main {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--ui-warning-tint) 24%, transparent), transparent 29%),
    radial-gradient(circle at 96% 7%, color-mix(in srgb, var(--ui-accent-tint) 22%, transparent), transparent 34%),
    var(--ui-surface);
}
.e8-home { max-width: 1240px; padding: 52px 56px 64px; }
.e8-home-hero { margin-bottom: 20px; }
.e8-home-greeting-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.e8-home-greet { margin: 0; font-size: var(--ui-text-xl); }
.e8-home-role {
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 3px 8px;
  background: color-mix(in srgb, var(--ui-surface) 72%, transparent); color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); font-weight: 600;
}
.e8-home-hero .e8-h1 { max-width: none; font-size: clamp(38px, 3.8vw, 56px); }
.e8-home-canvas { min-height: 64px; border-radius: 21px; padding-left: 20px; background: color-mix(in srgb, var(--ui-surface) 94%, transparent); }
.e8-home-canvas:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-focus-ring); }
.e8-home-canvas input { font-size: var(--ui-text-xl); }
.e8-home-go { width: 46px; height: 46px; }
.e8-home-safeguard { margin: 9px 10px 14px; font-size: var(--ui-text-sm); }
.e8-home-chips { flex-wrap: nowrap; gap: 10px; margin-bottom: 34px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.e8-home-chips::-webkit-scrollbar { display: none; }
.e8-home-chip { min-width: auto; flex: none; padding: 9px 14px; font-size: var(--ui-text-base); }
.e8-home-chip .material-symbols-outlined { font-size: var(--ui-text-xl); }
.e8-home-panel, .e8-home-section { margin-bottom: 28px; }
.e8-home-panel { padding: 18px 20px; }
.e8-home-panel h2, .e8-home-section h2 { margin: 3px 0 0; font-size: var(--ui-text-3xl); }
.e8-home-panel p { margin: 8px 0 0; color: var(--ui-text-secondary); line-height: 1.5; }
.e8-home-panel ol { margin: 12px 0 0; padding-left: 20px; color: var(--ui-text-secondary); line-height: 1.65; }
.e8-home-panel-kicker, .e8-home-eyebrow {
  display: block; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.e8-home-review-panel { border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border)); background: color-mix(in srgb, var(--ui-accent-tint) 24%, var(--ui-surface)); }
.e8-home-command-note { margin: -14px 0 26px; }
.e8-home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.e8-home-section-head p { max-width: 710px; margin: 7px 0 0; color: var(--ui-text-secondary); line-height: 1.45; }
.e8-home-text-btn {
  flex: none; border: none; padding: 7px 0; background: transparent; color: var(--ui-accent); cursor: pointer; font: inherit; font-size: var(--ui-text-sm); font-weight: 600;
}
.e8-home-text-btn:hover { text-decoration: underline; }
.e8-home-onboarding { border: 1px solid var(--ui-border); border-radius: 18px; padding: 18px; background: color-mix(in srgb, var(--ui-surface) 90%, transparent); }
.e8-home-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.e8-home-setup-card {
  display: flex; min-width: 0; min-height: 142px; flex-direction: column; gap: 7px; border: 1px solid var(--ui-border); border-radius: 14px;
  padding: 14px; background: var(--ui-surface); color: var(--ui-text); cursor: pointer; font: inherit; text-align: left;
}
.e8-home-setup-card:hover, .e8-home-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-1); transform: translateY(-1px); }
.e8-home-setup-card .e8-home-card-title { font-size: var(--ui-text-base); }
.e8-home-setup-card .e8-home-card-why { font-size: var(--ui-text-sm); }
.e8-home-setup-card .e8-home-card-action { font-size: var(--ui-text-sm); }
.e8-home-tour-note { margin: 12px 2px 0; color: var(--ui-text-secondary); font-size: var(--ui-text-sm); line-height: 1.5; }
.e8-home-changes {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 28px; border: 1px solid var(--ui-border);
  border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--ui-accent-tint) 25%, var(--ui-surface)); color: var(--ui-text-secondary); font-size: var(--ui-text-sm);
}
.e8-home-changes > .material-symbols-outlined { color: var(--ui-accent); font-size: var(--ui-text-xl); }
.e8-home-changes b { margin-right: 8px; color: var(--ui-text); }
.e8-home-changes button { border: none; background: transparent; color: var(--ui-accent); cursor: pointer; font: inherit; font-size: var(--ui-text-sm); font-weight: 600; }
.e8-home-focus-controls { display: flex; align-items: center; gap: 16px; }
.e8-home-focus-set { display: flex; align-items: center; gap: 7px; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); }
.e8-home-focus-set select {
  height: 32px; max-width: 180px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); padding: 0 28px 0 10px;
  background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: var(--ui-text-sm);
}
.e8-home-focus { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: stretch; }
.e8-home-priority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.e8-home-card, .e8-home-pulse { min-height: 218px; border-radius: 16px; padding: 16px; }
.e8-home-card { position: relative; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.e8-home-priority-number { color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); font-weight: 650; letter-spacing: .06em; }
.e8-home-card-title { font-size: var(--ui-text-lg); }
.e8-home-card-why { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--ui-text-sm); }
.e8-home-card-action { padding-top: 11px; font-size: var(--ui-text-base); }
.e8-home-pulse { gap: 8px; cursor: default; background: color-mix(in srgb, var(--ui-surface) 93%, transparent); }
.e8-home-pulse h3 { margin: 2px 0 7px; font-size: var(--ui-text-xl); }
.e8-home-health-list { display: flex; flex-direction: column; gap: 2px; }
.e8-home-pulse .e8-home-health-list button { gap: 9px; border-radius: 10px; padding: 6px; }
.e8-home-pulse .e8-home-health-list button:hover { background: var(--ui-fill); }
.e8-home-pulse .e8-home-health-list button > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.e8-home-pulse .e8-home-health-list button b { font-size: var(--ui-text-lg); line-height: 1.1; }
.e8-home-pulse .e8-home-health-list button small { overflow: hidden; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.e8-home-pulse .e8-home-health-list .e8-home-health-arrow { width: auto; height: auto; margin-left: auto; background: transparent; color: var(--ui-text-tertiary); font-size: var(--ui-text-xl); }
.e8-home-pulse > p { margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--ui-border); color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); line-height: 1.4; }
.e8-home-empty { display: flex; min-height: 160px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px dashed var(--ui-border-strong); border-radius: 16px; padding: 18px; color: var(--ui-text-secondary); text-align: center; }
.e8-home-empty > .material-symbols-outlined { color: var(--ui-success); }
.e8-home-empty p { margin: 0; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); }
.e8-home-continue-section { max-width: calc(100% - 284px); }
.e8-home-recents { border-radius: 14px; }
.e8-home-recents > button { padding: 11px 13px; }
.e8-home-recent-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--ui-fill); }
.e8-home-recent-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.e8-home-recent-copy b, .e8-home-recent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-home-recent-copy b { font-size: var(--ui-text-sm); font-weight: 600; }
.e8-home-recent-copy small { margin-top: 2px; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); }
.e8-home-saved-badge { border-radius: var(--ui-radius-pill); padding: 3px 7px; background: var(--ui-success-tint); color: var(--ui-success-text); font-size: var(--ui-text-xs); font-weight: 600; }
.e8-home-empty-inline { min-height: 92px; align-items: center; justify-content: flex-start; flex-direction: row; text-align: left; }
.e8-home-empty-inline > .material-symbols-outlined { font-size: var(--ui-text-3xl); }

@media (max-width: 1120px) and (min-width: 841px) {
  .e8-home { padding: 42px 36px 56px; }
  .e8-home-focus { grid-template-columns: 1fr; }
  .e8-home-pulse { min-height: 0; }
  .e8-home-health-list { display: grid; grid-template-columns: repeat(3, 1fr); }
  .e8-home-continue-section { max-width: 100%; }
}

@media (max-width: 840px) {
  .e8-home-app .e8-main { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  .e8-home { padding: 24px 16px 32px; }
  .e8-home-hero { margin-bottom: 15px; }
  .e8-home-greeting-row { margin-bottom: 7px; }
  .e8-home-greet { font-size: var(--ui-text-base); }
  .e8-home-role { padding: 2px 7px; }
  .e8-home-hero .e8-h1 { font-size: clamp(32px, 10vw, 42px); line-height: 1.03; }
  .e8-home-canvas { min-height: 54px; border-radius: 18px; padding: 7px 8px 7px 15px; }
  .e8-home-canvas input { font-size: var(--ui-text-base); }
  .e8-home-spark { font-size: var(--ui-text-xl); }
  .e8-home-go { width: 40px; height: 40px; }
  .e8-home-safeguard { align-items: flex-start; margin: 8px 4px 12px; font-size: var(--ui-text-xs); line-height: 1.35; }
  .e8-home-chips { margin-right: -16px; margin-bottom: 24px; padding-right: 16px; }
  .e8-home-chip { padding: 8px 12px; font-size: var(--ui-text-sm); }
  .e8-home-section-head { align-items: flex-start; }
  .e8-home-onboarding { padding: 15px; }
  .e8-home-setup { display: flex; margin-right: -15px; overflow-x: auto; padding-right: 15px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .e8-home-setup::-webkit-scrollbar { display: none; }
  .e8-home-setup-card { width: min(76vw, 292px); min-height: 118px; flex: none; scroll-snap-align: start; }
  .e8-home-changes { grid-template-columns: auto 1fr; }
  .e8-home-changes button { grid-column: 2; justify-self: start; padding: 0; }
  .e8-home-changes b { display: block; margin: 0 0 2px; }
  .e8-home-priority-head { flex-direction: column; }
  .e8-home-focus-controls { width: 100%; justify-content: space-between; }
  .e8-home-focus { grid-template-columns: 1fr; }
  .e8-home-priority-grid { display: flex; margin-right: -16px; overflow-x: auto; padding-right: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .e8-home-priority-grid::-webkit-scrollbar { display: none; }
  .e8-home-card { width: min(82vw, 310px); min-height: 208px; flex: none; scroll-snap-align: start; }
  .e8-home-pulse { min-height: 0; }
  .e8-home-continue-section { max-width: 100%; }
  .e8-home-continue-section .e8-home-section-head { align-items: flex-end; }
  .e8-home-recents > button { padding: 10px; }
  .e8-home-saved-badge { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .e8-mcard, .e8-create-item, .e8-msheet-item, .e8-qa-btn, .e8-bsheet-primary { transition: transform .12s ease; cursor: pointer; }
  .e8-mcard:active, .e8-create-item:active, .e8-msheet-item:active, .e8-qa-btn:active, .e8-bsheet-primary:active { transform: scale(.97); }
}

/* Swipe-to-triage row */
.e8-triage { position: relative; border-radius: var(--ui-radius-xl); overflow: hidden; }
.e8-triage-pad { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ui-accent-text); font-size: var(--ui-text-sm); font-weight: 600; overflow: hidden; }
.e8-triage-pad.left { left: 0; align-items: flex-start; padding-left: 18px; }
.e8-triage-pad.right { right: 0; align-items: flex-end; padding-right: 18px; }
.e8-triage-pad .material-symbols-outlined { font-size: 22px; }
.e8-triage-pad .e8-triage-lbl { white-space: nowrap; }
.e8-triage-pad.armed { filter: saturate(1.25) brightness(1.06); }
.e8-triage-card { position: relative; background: var(--ui-surface, #fff); will-change: transform; }
.e8-triage-card.dragging { transition: none; }
.e8-triage-card:not(.dragging) { transition: transform .26s cubic-bezier(.32, .72, 0, 1); }
/* Conversation swipe rows read as a flat full-bleed list, not rounded triage cards */
.e8-convo-swipe, .e8-convo-swipe .e8-convo { border-radius: 0; }

/* Detent bottom sheet */
/* Scrim color from the token; the sheet's drag JS drives element opacity 0->1 (alpha lives in --ui-scrim). */
.e8-bsheet-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--ui-scrim); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.e8-bsheet-backdrop.is-open { visibility: visible; }
.e8-bsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; height: 92vh; height: 92dvh; display: flex; flex-direction: column; background: var(--ui-surface, #fff); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 48px rgba(18, 18, 23, .26); transform: translateY(102%); transition: transform .34s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.e8-bsheet.dragging { transition: none; }
.e8-bsheet-grab { width: 38px; height: 5px; border-radius: var(--ui-radius-pill); background: var(--ui-border-strong, #C9CCD6); margin: 8px auto 2px; flex: none; touch-action: none; }
.e8-bsheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; touch-action: none; }
.e8-bsheet-title { flex: 1; min-width: 0; font-size: var(--ui-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-tertiary, #9097A1); }
.e8-bsheet-close { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--ui-fill, #F4F4F6); border-radius: var(--ui-radius-pill); color: var(--ui-text-secondary, #6B7280); cursor: pointer; }
.e8-bsheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 16px 16px; }
.e8-bsheet-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ui-border, #ECECEF); }
.e8-bsheet-primary { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 44px; border: none; border-radius: 11px; background: var(--ui-accent, #4F46E5); color: var(--ui-accent-text); font: inherit; font-size: var(--ui-text-md); font-weight: 600; cursor: pointer; }
.e8-bsheet-primary .material-symbols-outlined { font-size: 19px; }

/* Quick-view sheet content */
.e8-qv-head { display: flex; align-items: center; gap: 11px; }
.e8-qv-actions { display: flex; gap: 6px; margin-top: 14px; }
.e8-qa-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--ui-border, #ECECEF); border-radius: 11px; background: var(--ui-surface, #fff); color: var(--ui-text-secondary, #6B7280); font: inherit; font-size: var(--ui-text-xs); font-weight: 500; text-decoration: none; cursor: pointer; }
.e8-qa-btn .material-symbols-outlined { font-size: 19px; color: var(--ui-accent, #4F46E5); }

@media (prefers-reduced-motion: reduce) {
  .e8-triage-card:not(.dragging), .e8-bsheet { transition: none; }
}

/* ===================== Mobile native revamp - Round 2: Messages ===================== */
@media (max-width: 840px) {
  /* List view: the conversation list fills the screen; thread + rail hidden */
  .e8-msgs-m-list .e8-msgs-list { flex: 1; width: auto; min-width: 0; border-right: 0; }
  .e8-msgs-m-list .e8-convo { min-width: 0; }
  .e8-msgs-m-list .e8-msgs-thread, .e8-msgs-m-list .e8-msgs-rail { display: none; }
  /* Thread view: a full-screen panel above the chrome, with its own header + composer */
  .e8-msgs-m-thread .e8-msgs-list { display: none; }
  .e8-msgs-m-thread .e8-msgs-thread { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 70; background: var(--ui-surface); }
  .e8-msgs-m-thread .e8-msgs-thread-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .e8-msgs-m-thread .e8-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .e8-msgs-back { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; color: var(--ui-text-secondary); cursor: pointer; margin-right: 2px; }
  .e8-msgs-back:active { background: var(--ui-fill); }
  .e8-msgs-back .material-symbols-outlined { font-size: 22px; }
}

/* ===================== Mobile native revamp - Round 3: Records ===================== */
@media (max-width: 840px) {
  /* Stack the record main + right rail full-width on mobile. The inline align-items:flex-start
     otherwise lets the main column keep its desktop max-content width and clip the text. */
  .e8-record-2col > * { width: 100%; min-width: 0; }
  /* Kill horizontal clip in the candidate + contact/client record overviews (min-width:auto blowout) */
  .e8-cand-overview, .e8-cand-overview *, .e8-content [style*="max-width: 760"], .e8-content [style*="max-width: 760"] * { min-width: 0; }
  /* Review bar fits a phone: drop the queue label + keyboard hints */
  .e8-reviewbar .e8-rb-qlabel, .e8-reviewbar .e8-rb-kbd { display: none; }
  .e8-reviewbar { max-width: calc(100vw - 20px); }
}

/* ===================== Mobile native revamp - Round 4: nav + capture + command ===================== */
@media (max-width: 840px) {
  /* Centre capture button raised into the tab bar */
  .e8-tab-create { overflow: visible; }
  .e8-tab-fab { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -16px; border-radius: 50%; background: var(--ui-accent, #4F46E5); color: var(--ui-accent-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--ui-accent, #4F46E5) 42%, transparent); transition: transform .12s ease; }
  .e8-tab-fab .material-symbols-outlined { font-size: 26px; }
  .e8-tab-create:active .e8-tab-fab { transform: scale(0.92); }
  /* Mobile command palette: top-anchored + dvh-sized so the keyboard never covers it */
  .e8-overlay:has(.e8-cmdk) { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .e8-cmdk { width: calc(100vw - 20px); max-width: 100%; max-height: 80dvh; }
  .e8-cmdk-list { max-height: calc(80dvh - 64px); }
}

/* ===================== Mobile native revamp - Round 5: the living deck ===================== */
.e8-ptr { position: fixed; top: calc(52px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 55; display: flex; justify-content: center; pointer-events: none; }
.e8-ptr-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--ui-radius-pill); background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #ECECEF); box-shadow: var(--ui-shadow-1); font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary, #6B7280); transition: opacity .2s ease; }
.e8-ptr-pill .material-symbols-outlined { font-size: 18px; color: var(--ui-accent, #4F46E5); }
.e8-ptr-spin { animation: e8-spin .8s linear infinite; }
/* Any button/icon showing a spinner glyph actually spins (was previously static). */
.e8-spin-icon { animation: e8-spin .8s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .e8-spin-icon, .e8-ptr-spin { animation-duration: 1.6s; } }
@keyframes e8-spin { to { transform: rotate(360deg); } }
@keyframes e8-cardin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 840px) and (prefers-reduced-motion: no-preference) {
  .e8-cards > * { animation: e8-cardin .34s cubic-bezier(.22, .61, .36, 1) both; }
  .e8-cards > *:nth-child(1) { animation-delay: .01s; }
  .e8-cards > *:nth-child(2) { animation-delay: .05s; }
  .e8-cards > *:nth-child(3) { animation-delay: .09s; }
  .e8-cards > *:nth-child(4) { animation-delay: .13s; }
  .e8-cards > *:nth-child(5) { animation-delay: .17s; }
  .e8-cards > *:nth-child(6) { animation-delay: .21s; }
}

/* ===================== Mobile audit fixes - Round 44 (a11y + polish) ===================== */
@media (max-width: 840px) {
  /* iOS: >=16px inputs stop zoom-on-focus (esp. the messages composer) */
  .elev8 input:not([type="range"]), .elev8 textarea, .elev8 select { font-size: var(--ui-text-xl); }
  /* Touch targets: lift sheet close + back buttons toward 44px */
  .e8-bsheet-close, .e8-msheet-close, .e8-msgs-back { width: 40px; height: 40px; }
  .e8-qa-btn { min-height: 44px; }
}
/* Reduced-motion: stop the two infinite loops the per-component guards missed */
@media (prefers-reduced-motion: reduce) {
  .e8-cap-pulse, .e8-ptr-spin { animation: none; }
}
/* Reject action in the candidate quick-view footer (tap fallback for the left-swipe) */
.e8-bsheet-reject { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; flex: none; border: 1px solid var(--ui-border, #ECECEF); border-radius: 11px; background: var(--ui-surface, #fff); color: var(--ui-danger-text, #B42323); font: inherit; font-size: var(--ui-text-md); font-weight: 600; cursor: pointer; }
.e8-bsheet-reject .material-symbols-outlined { font-size: 18px; }

/* ===================== Mobile deferred polish - Round 45 ===================== */
@media (max-width: 840px) {
  /* Record tab strips: a soft right fade hints there are more tabs to scroll to */
  .e8-page .e8-tabs { -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent); mask-image: linear-gradient(to right, black calc(100% - 18px), transparent); }
  /* Internal design-system reference page: let wide specimens shrink instead of scrolling the page */
  .elev8 [style*="min-width: 380"], .elev8 [style*="min-width: 320"], .elev8 [style*="width: 340"] { min-width: 0 !important; max-width: 100% !important; }
}

/* ============================================================
   Dark appearance (R62). Base tokens live on :root in product.css;
   this beats them at higher specificity (:root[data-theme="dark"])
   regardless of stylesheet load order. color-mix derives the
   accent/status/tier tints from the live tokens, so the dark
   palette tracks whichever accent theme the user picked. Browsers
   without color-mix fall back to the inherited light value.
   ============================================================ */
:root[data-theme="dark"] {
  --ui-bg-app: #0F0F14;
  --ui-surface: #17171E;
  --ui-text: #F0F0F4;
  --ui-text-secondary: #A5A5B3;
  --ui-text-tertiary: #70707E;
  --ui-border: #26262F;
  --ui-border-strong: #33333F;
  --ui-fill: #22222B;
  --ui-fill-hover: #1B1B23;
  --ui-shadow-1: 0 1px 1px rgba(0, 0, 0, 0.22);
  --ui-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.4), 0 14px 44px rgba(0, 0, 0, 0.5);
  --ui-shadow-2h: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
  --ui-shadow-pop: 0 0 0 1px var(--ui-border-strong), 0 8px 24px rgba(0, 0, 0, 0.5);
  --ui-scrim: rgba(5, 5, 10, 0.6);
  --ui-surface-frost: rgba(23, 23, 30, 0.82);
  --ui-focus-ring: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-accent);
  --ui-chart: #60A5FA;
  --ui-link: #6FB4FF;
  /* Brighter accent-ink for @mentions on the amber team-note tint: --ui-daybreak-text (64%
     accent) lands ~3.8:1 on .e8-teamnote in dark; 46% accent clears 4.5:1 across every accent. */
  --ui-mention-text: color-mix(in srgb, var(--ui-accent) 46%, #FFFFFF);
  /* Provenance-mark glyph flips to white in dark: the .e8-pm chip bg is
     color-mix(accent 58%, surface) here, and the light ink lands at 1.6-2.9:1. */
  --ui-pm-glyph: #FFFFFF;

  --ui-accent-hover: color-mix(in srgb, var(--ui-accent) 82%, #FFFFFF);
  --ui-accent-tint: color-mix(in srgb, var(--ui-accent) 26%, var(--ui-surface));
  --ui-accent-tint-2: color-mix(in srgb, var(--ui-accent) 24%, transparent);
  --ui-ring: color-mix(in srgb, var(--ui-accent) 40%, transparent);
  --ui-daybreak: color-mix(in srgb, var(--ui-accent) 58%, var(--ui-surface));
  --ui-daybreak-tint: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-surface));
  --ui-daybreak-wash: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-surface));
  --ui-daybreak-text: color-mix(in srgb, var(--ui-accent) 64%, #FFFFFF);
  --ui-daybreak-soft: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-surface));
  --ui-border-subtle: color-mix(in srgb, var(--ui-border) 58%, var(--ui-surface));

  /* -text = readable ink for badge/label text on the matching -tint bg */
  --ui-success: #2FBE6C; --ui-success-tint: color-mix(in srgb, var(--ui-success) 13%, transparent); --ui-success-text: #5AD68E;
  --ui-danger: #F26D6D;  --ui-danger-tint:  color-mix(in srgb, var(--ui-danger) 12%, transparent);  --ui-danger-text:  #F79090;
  --ui-warning: #EDB53E; --ui-warning-tint: color-mix(in srgb, var(--ui-warning) 12%, transparent); --ui-warning-text: #F0C566;
  --ui-info: #4DA3FF;    --ui-info-tint:    color-mix(in srgb, var(--ui-info) 12%, transparent);    --ui-info-text:    #7BBBFF;

  --ui-prov-drafted-bg: color-mix(in srgb, #6366F1 26%, var(--ui-surface)); --ui-prov-drafted-text: color-mix(in srgb, #6366F1 56%, #FFFFFF);
  --ui-prov-advised-bg: color-mix(in srgb, #3B82F6 26%, var(--ui-surface)); --ui-prov-advised-text: color-mix(in srgb, #3B82F6 56%, #FFFFFF);
  --ui-prov-qa-bg:      color-mix(in srgb, #14B8A6 26%, var(--ui-surface)); --ui-prov-qa-text:      color-mix(in srgb, #14B8A6 58%, #FFFFFF);
  --ui-prov-human-bg:   color-mix(in srgb, #9C9CA6 22%, var(--ui-surface)); --ui-prov-human-text:   #C4C4CC;

  --ui-cat-1-bg: color-mix(in srgb, #6366F1 24%, var(--ui-surface)); --ui-cat-1-text: color-mix(in srgb, #6366F1 56%, #FFFFFF);
  --ui-cat-2-bg: color-mix(in srgb, #3B82F6 24%, var(--ui-surface)); --ui-cat-2-text: color-mix(in srgb, #3B82F6 56%, #FFFFFF);
  --ui-cat-3-bg: color-mix(in srgb, #14B8A6 24%, var(--ui-surface)); --ui-cat-3-text: color-mix(in srgb, #14B8A6 58%, #FFFFFF);
  --ui-cat-4-bg: color-mix(in srgb, #22C55E 24%, var(--ui-surface)); --ui-cat-4-text: color-mix(in srgb, #22C55E 56%, #FFFFFF);
  --ui-cat-5-bg: color-mix(in srgb, #EAB308 24%, var(--ui-surface)); --ui-cat-5-text: color-mix(in srgb, #EAB308 62%, #FFFFFF);
  --ui-cat-6-bg: color-mix(in srgb, #F97316 24%, var(--ui-surface)); --ui-cat-6-text: color-mix(in srgb, #F97316 58%, #FFFFFF);
  --ui-cat-7-bg: color-mix(in srgb, #EC4899 24%, var(--ui-surface)); --ui-cat-7-text: color-mix(in srgb, #EC4899 58%, #FFFFFF);
  --ui-cat-8-bg: color-mix(in srgb, #9C9CA6 20%, var(--ui-surface)); --ui-cat-8-text: #C4C4CC;
  --ui-cat-9-bg:  color-mix(in srgb, #38B4D1 24%, var(--ui-surface)); --ui-cat-9-text:  color-mix(in srgb, #38B4D1 58%, #FFFFFF);
  --ui-cat-10-bg: color-mix(in srgb, #E664D2 24%, var(--ui-surface)); --ui-cat-10-text: color-mix(in srgb, #E664D2 58%, #FFFFFF);
  --ui-cat-11-bg: color-mix(in srgb, #9369FF 24%, var(--ui-surface)); --ui-cat-11-text: color-mix(in srgb, #9369FF 56%, #FFFFFF);

  /* tier-1 = best match (green). Design-source t5..t1 maps to tier-1..tier-5 - do not renumber. */
  --ui-tier-1: #6EDD9C; --ui-tier-1-tint: color-mix(in srgb, var(--ui-tier-1-dot) 13%, transparent); --ui-tier-1-dot: #2FBE6C; --ui-tier-1-br: color-mix(in srgb, var(--ui-tier-1-dot) 30%, transparent);
  --ui-tier-2: #BCDC6B; --ui-tier-2-tint: color-mix(in srgb, var(--ui-tier-2-dot) 13%, transparent); --ui-tier-2-dot: #98C334; --ui-tier-2-br: color-mix(in srgb, var(--ui-tier-2-dot) 30%, transparent);
  --ui-tier-3: #F0C566; --ui-tier-3-tint: color-mix(in srgb, var(--ui-tier-3-dot) 12%, transparent); --ui-tier-3-dot: #EDB53E; --ui-tier-3-br: color-mix(in srgb, var(--ui-tier-3-dot) 30%, transparent);
  --ui-tier-4: #F8AB7C; --ui-tier-4-tint: color-mix(in srgb, var(--ui-tier-4-dot) 12%, transparent); --ui-tier-4-dot: #F58A4B; --ui-tier-4-br: color-mix(in srgb, var(--ui-tier-4-dot) 30%, transparent);
  --ui-tier-5: #F79090; --ui-tier-5-tint: color-mix(in srgb, var(--ui-tier-5-dot) 12%, transparent); --ui-tier-5-dot: #F26D6D; --ui-tier-5-br: color-mix(in srgb, var(--ui-tier-5-dot) 30%, transparent);
}

/* Base definitions for two tokens that were previously only inline fallbacks.
   The accent/border come from the bundle's injected light tokens; the dark block
   above overrides these at higher specificity. */
:root {
  --ui-daybreak-soft: color-mix(in srgb, var(--ui-accent, #4F46E5) 22%, var(--ui-surface, #fff));
  --ui-border-subtle: color-mix(in srgb, var(--ui-border, #ECECEF) 55%, var(--ui-surface, #fff));
  /* Frosted glass fill for fixed mobile bars - translucent so backdrop-blur reads. Dark override in the dark block above. */
  --ui-surface-frost: rgba(249, 249, 250, 0.85);
}

/* In-app Appearance + theme control (sidebar + mobile menu) */
.e8-appr { position: relative; }
.e8-appr-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); cursor: pointer; }
.e8-appr-btn:hover { background: var(--ui-fill); }
.e8-appr-dot { width: 12px; height: 12px; border-radius: 50%; margin-left: auto; box-shadow: 0 0 0 2px var(--ui-surface); }
.e8-appr-pop { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-2); padding: 10px; z-index: 60; }
.e8-appr-h { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ui-text-tertiary); margin: 4px 2px 6px; }
.e8-appr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.e8-appr-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--ui-surface); color: var(--ui-text-secondary); font: inherit; font-size: var(--ui-text-xs); cursor: pointer; }
.e8-appr-mode:hover { background: var(--ui-fill); }
.e8-appr-mode.on { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-appr-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
.e8-appr-sw { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--ui-border-strong); }
.e8-appr-sw.on { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-text); }
.e8-appr-sw .material-symbols-outlined { color: var(--ui-accent-text); font-size: 16px; }
/* Platform-signals toggle (provenance marks kill switch) */
.e8-appr-sig {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 10px; padding: 7px 8px;
  border: none; border-radius: 9px; background: none; cursor: pointer; text-align: left; font: inherit;
}
.e8-appr-sig:hover { background: var(--ui-fill); }
.e8-appr-sig-txt { flex: 1; min-width: 0; }
.e8-appr-sig-t { display: block; font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); }
.e8-appr-sig-d { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-appr-sig-track { width: 28px; height: 17px; flex: none; border-radius: var(--ui-radius-pill); background: var(--ui-border-strong); position: relative; transition: background 140ms ease; }
.e8-appr-sig-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ui-surface); box-shadow: var(--ui-shadow-1); transition: transform 140ms ease;
}
.e8-appr-sig.on .e8-appr-sig-track { background: var(--ui-accent); }
.e8-appr-sig.on .e8-appr-sig-track::after { transform: translateX(11px); }
.elev8 .e8-appr-sig-t { font-size: var(--ui-text-sm); } /* cascade shims (span reset) */
.elev8 .e8-appr-sig-d { font-size: var(--ui-text-xs); }

/* ===================== Applicants (inbound triage) ===================== */
.e8-ap-h1 { font-size: var(--ui-text-2xl); }
.e8-ap-prov { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--ui-border); }
.e8-ap-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.e8-ap-stats { font-size: var(--ui-text-base); color: var(--ui-text-secondary); flex: 1; min-width: 200px; }
.e8-ap-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.e8-ap-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.e8-ap-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.e8-ap-filter { font: inherit; font-size: var(--ui-text-sm); color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
.e8-ap-filter:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }

/* Source chip */
.e8-ap-src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); white-space: nowrap; }
.e8-ap-src .material-symbols-outlined { font-size: 15px; color: var(--ui-text-tertiary); }
.e8-ap-dupe { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-daybreak-text); background: var(--ui-daybreak-tint); border-radius: 5px; padding: 0 5px; margin-left: 3px; }
.e8-ap-ko { font-size: var(--ui-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ui-danger-text); background: var(--ui-danger-tint); border-radius: 5px; padding: 1px 5px; }

/* AI-screen verdict pill - the tier dot-pill recipe (mirrors MatchBadge's look; separate component) */
.e8-ap-verdict {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px 0 7px;
  box-sizing: border-box; /* design source assumes border-box; keeps bordered pills at spec height */
  border-radius: var(--ui-radius-pill); font-size: var(--ui-text-sm); font-weight: 550; letter-spacing: -0.003em;
  white-space: nowrap; border: 1px solid transparent;
}
.e8-ap-verdict-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Cascade shim (historical) - product.css's type reset now sits at :where(.elev8) (0,0,1) and loses to class rules; kept as belt-and-braces. See the Type reset note in product.css. */
.elev8 .e8-ap-verdict { font-size: var(--ui-text-sm); letter-spacing: -0.003em; }

/* AI reasons (why) */
.e8-ap-reasons { display: flex; flex-direction: column; gap: 5px; }
.e8-ap-reason { display: flex; align-items: flex-start; gap: 7px; font-size: var(--ui-text-sm); line-height: 1.4; color: var(--ui-text-secondary); }
.e8-ap-reason .material-symbols-outlined { font-size: 16px; margin-top: 1px; flex: none; }
.e8-ap-reason.pos .material-symbols-outlined { color: var(--ui-success-text); }
.e8-ap-reason.neg .material-symbols-outlined { color: var(--ui-danger-text); }

/* Autonomy dial (segmented) */
.e8-ap-autonomy { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--ui-fill); border-radius: 9px; }
.e8-ap-autonomy-lab { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: .04em; color: var(--ui-text-tertiary); padding: 0 6px 0 4px; }
.e8-ap-auton-btn { font: inherit; font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary); background: transparent; border: 0; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.e8-ap-auton-btn:hover { color: var(--ui-text); }
.e8-ap-auton-btn.on { background: var(--ui-surface); color: var(--ui-accent); box-shadow: var(--ui-shadow-1); }
.e8-ap-auton-btn:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }

/* Applicant detail drawer */
.e8-ap-drawer { width: 520px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); overflow: hidden; }
.e8-ap-drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--ui-border); }
.e8-ap-drawer-name { font-size: var(--ui-text-xl); font-weight: 600; color: var(--ui-text); }
.e8-ap-drawer-sub { font-size: var(--ui-text-base); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-ap-drawer-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.e8-ap-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.e8-ap-screen-card { border: 1px solid var(--ui-border); border-radius: 11px; padding: 13px 14px; background: var(--ui-bg-app); }
.e8-ap-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--ui-border); }

/* Review mode */
.e8-ap-review { max-width: 560px; margin: 0 auto; }
.e8-ap-review-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.e8-ap-rcard { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-1); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.e8-ap-rcard-top { display: flex; align-items: center; gap: 12px; }
.e8-ap-rcard-name { font-size: var(--ui-text-xl); font-weight: 600; color: var(--ui-text); }
.e8-ap-rcard-sub { font-size: var(--ui-text-base); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-ap-rcard-meta { display: flex; align-items: center; gap: 8px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); flex-wrap: wrap; }
.e8-ap-review-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
@media (max-width: 840px) { .e8-ap-toolbar { gap: 8px; } .e8-ap-filters { margin-left: 0; width: 100%; } .e8-ap-filter { flex: 1; } .e8-ap-filters .e8-input-wrap { flex: 1; } .e8-ap-drawer-grid { grid-template-columns: 1fr; } }

/* Applicant detail: résumé / past applications / notes sections */
.e8-ap-sec { border-top: 1px solid var(--ui-border); padding-top: 14px; }
.e8-ap-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.e8-ap-parsed { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-ap-count { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-ap-resume { display: flex; flex-direction: column; gap: 12px; }
.e8-ap-resume-sum { font-size: var(--ui-text-base); line-height: 1.5; color: var(--ui-text-secondary); }
.e8-ap-resume-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.e8-ap-resume-exp { display: flex; flex-direction: column; gap: 11px; }
.e8-ap-exp { border-left: 2px solid var(--ui-border-strong); padding-left: 11px; }
.e8-ap-exp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.e8-ap-exp-role { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-ap-exp-span { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); flex: none; }
.e8-ap-exp-org { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 1px; }
.e8-ap-exp-bullet { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; margin-top: 4px; }
.e8-ap-edu { display: flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-ap-edu .material-symbols-outlined { font-size: 16px; color: var(--ui-text-tertiary); }
.e8-ap-hist { display: flex; flex-direction: column; gap: 6px; }
.e8-ap-histrow { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--ui-border); border-radius: 9px; cursor: pointer; transition: border-color .12s ease; }
.e8-ap-histrow:hover { border-color: var(--ui-border-strong); }
.e8-ap-histrow .material-symbols-outlined { font-size: 17px; color: var(--ui-text-tertiary); flex: none; }
.e8-ap-histrole { display: block; font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-ap-histsub { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-ap-empty-line { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-ap-notes { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.e8-ap-note { background: var(--ui-bg-app); border: 1px solid var(--ui-border); border-radius: 9px; padding: 9px 11px; }
.e8-ap-note-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.e8-ap-note-when { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-ap-note-text { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; }
.e8-ap-noteadd { display: flex; gap: 6px; }
.e8-ap-noteinput { flex: 1; min-width: 0; font: inherit; font-size: var(--ui-text-sm); color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; padding: 6px 10px; }
.e8-ap-noteinput:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-color: var(--ui-accent); }

/* Full-page résumé viewer */
.e8-resume-doc { width: 720px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2); overflow: hidden; }
.e8-resume-bar { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-resume-scroll { overflow-y: auto; padding: 22px; background: var(--ui-bg-app); }
.e8-resume-page { max-width: 600px; margin: 0 auto; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; box-shadow: var(--ui-shadow-1); padding: 36px 40px; }
.e8-resume-name { font-size: var(--ui-text-3xl); font-weight: 650; letter-spacing: -0.02em; color: var(--ui-text); }
.e8-resume-role { font-size: var(--ui-text-md); color: var(--ui-accent); font-weight: 500; margin-top: 2px; }
.e8-resume-contact { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
.e8-resume-block { margin-top: 18px; }
.e8-resume-bh { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-accent); margin-bottom: 8px; }
.e8-resume-p { font-size: var(--ui-text-base); line-height: 1.55; color: var(--ui-text-secondary); margin: 0; }
.e8-resume-job { margin-bottom: 14px; }
.e8-resume-job-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.e8-resume-job-role { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-resume-job-span { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); flex: none; }
.e8-resume-ul { margin: 5px 0 0; padding-left: 18px; }
.e8-resume-ul li { font-size: var(--ui-text-sm); line-height: 1.5; color: var(--ui-text-secondary); margin-bottom: 3px; }

/* ===================== Today - role-aware command center ===================== */
.e8-td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.e8-td-head .e8-h1 { font-size: var(--ui-text-2xl); font-weight: 600; }
.e8-td-head .e8-pagehead-sub { margin-top: 4px; }

/* Persona switcher - premium segmented control */
.e8-td-switch { display: inline-flex; align-items: center; gap: 3px; padding: 4px; background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); flex-wrap: wrap; }
.e8-td-switch-lab { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-tertiary); padding: 0 7px 0 9px; }
.e8-td-persona { position: relative; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-secondary); background: transparent; border: 0; border-radius: 10px; padding: 6px 12px 6px 6px; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.e8-td-persona:hover { color: var(--ui-text); }
.e8-td-persona .material-symbols-outlined { font-size: 16px; opacity: .85; }
.e8-td-persona.on { background: var(--ui-surface); color: var(--ui-accent); box-shadow: var(--ui-shadow-1), inset 0 0 0 1px var(--ui-border); }
.e8-td-persona:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-td-persona-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ui-text-xs); font-weight: 700; background: var(--ui-fill-hover); color: var(--ui-text-secondary); transition: background .16s ease, color .16s ease; }
.e8-td-persona.on .e8-td-persona-av { background: var(--ui-accent); color: var(--ui-accent-text, #fff); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--ui-accent) 60%, transparent); }

/* Action-first hierarchy. */
.e8-card.e8-td-needs, .e8-card.e8-td-signals, .e8-card.e8-td-desk-context { margin-bottom: 14px; padding: 14px 16px; }
.e8-td-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.e8-td-section-head h2 { margin: 2px 0 0; color: var(--ui-text); font-size: var(--ui-text-lg); font-weight: 650; }
.e8-td-section-count { flex: none; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); }
.e8-td-needs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.e8-td-needs-list .e8-td-task { min-width: 0; border-color: var(--ui-border); background: var(--ui-surface); }
.e8-td-needs-list .e8-td-task-ic { display: none; }
.e8-td-needs-list .e8-td-task > .e8-btn { align-self: center; }
.e8-td-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.e8-td-signal { display: flex; align-items: flex-start; gap: 10px; min-width: 0; border: 0; border-radius: var(--ui-radius); padding: 8px; background: transparent; color: var(--ui-text); font: inherit; text-align: left; cursor: pointer; }
.e8-td-signal:hover { background: var(--ui-fill); }
.e8-td-signal:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-td-signal > span:nth-child(2) { flex: 1; min-width: 0; }
.e8-td-signal b, .e8-td-signal small { display: block; }
.e8-td-signal b { font-size: var(--ui-text-sm); font-weight: 600; line-height: 1.35; }
.e8-td-signal small { margin-top: 2px; overflow: hidden; color: var(--ui-text-tertiary); font-size: var(--ui-text-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.e8-td-signal > .material-symbols-outlined { flex: none; color: var(--ui-text-tertiary); font-size: var(--ui-text-lg); }
.e8-td-clear { margin: 0; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); line-height: 1.45; }
.e8-td-desk-context .e8-td-section-head { margin-bottom: 7px; }
.e8-td-pin-links { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.e8-td-pin-links button { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; flex: none; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 6px 9px; background: var(--ui-bg-app); color: var(--ui-text-secondary); font: inherit; font-size: var(--ui-text-sm); cursor: pointer; }
.e8-td-pin-links button:hover { border-color: var(--ui-border-strong); color: var(--ui-text); }
.e8-td-pin-links button:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-td-pin-links .material-symbols-outlined { flex: none; color: var(--ui-text-tertiary); font-size: var(--ui-text-lg); }
.e8-td-pin-links button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed AI brief - full narrative and stats expand in place.
   Compound selector beats the DS .e8-card rule injected after app.css. */
.e8-card.e8-td-brief { position: relative; overflow: hidden; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--ui-radius-xl);
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-accent) 4%, var(--ui-surface));
  box-shadow: var(--ui-shadow-1); }
.e8-td-brief::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--ui-accent), color-mix(in srgb, var(--ui-accent) 40%, var(--ui-surface))); }
.e8-td-brief-head { position: relative; display: flex; align-items: center; gap: 9px; }
.e8-td-brief-head .e8-sectionlabel { color: var(--ui-daybreak-text); }
.e8-td-brief-head .e8-badge { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent); }
.e8-td-brief-when { min-width: 0; overflow: hidden; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.e8-td-brief-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.e8-td-brief-summary { margin: 8px 0 0; overflow: hidden; color: var(--ui-text-secondary); font-size: var(--ui-text-sm); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.e8-td-brief-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.e8-td-brief-text { position: relative; margin: 0; font-size: var(--ui-text-base); line-height: 1.65; color: var(--ui-text); max-width: 1000px; text-wrap: pretty; }

/* Vital-sign stat tiles - deliberately frameless: grouped by whitespace, not nested boxes
   (they sit inside the already-bordered brief card). */
.e8-td-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; margin-top: 16px; }
.e8-td-stats > * { min-width: 0; }
.e8-td-stat { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 10px; }
.e8-td-stat.is-link { cursor: pointer; transition: background .12s ease; }
.e8-td-stat.is-link:hover { background: color-mix(in srgb, var(--ui-fill) 70%, transparent); }
.e8-td-stat.is-link:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-td-stat-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-fill); color: var(--ui-text-tertiary); }
.e8-td-stat-ic .material-symbols-outlined { font-size: 19px; }
.e8-td-stat.danger .e8-td-stat-ic { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-td-stat.warning .e8-td-stat-ic { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-td-stat.success .e8-td-stat-ic { background: var(--ui-success-tint); color: var(--ui-success-text); }
.e8-td-stat.accent .e8-td-stat-ic { background: var(--ui-accent-tint); color: var(--ui-accent); }
.e8-td-stat-v { font-size: var(--ui-text-2xl); font-weight: 650; letter-spacing: -0.01em; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-td-stat.danger .e8-td-stat-v { color: var(--ui-danger-text); }
.e8-td-stat-l { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); margin-top: 2px; }

.e8-td-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* The queue - the hero list */
.e8-td-queue { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-1); padding: 8px 8px 12px; }
.e8-td-queue-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px; }
.e8-td-queue-title { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ui-text-base); font-weight: 650; color: var(--ui-text); }
.e8-td-queue-title .material-symbols-outlined { font-size: 18px; color: var(--ui-accent); }
.e8-td-queue-empty { padding: 4px 12px 8px; color: var(--ui-text-tertiary); font-size: var(--ui-text-sm); }
.e8-td-queue-empty button { border: 0; padding: 0; background: none; color: var(--ui-accent); font: inherit; cursor: pointer; }
.e8-td-progwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.e8-td-ring-bg { fill: none; stroke: var(--ui-border); stroke-width: 3; }
.e8-td-ring-fg { fill: none; stroke: var(--ui-accent); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1); }
.e8-td-progress { position: absolute; font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text); }
.e8-td-progress-tot { color: var(--ui-text-tertiary); font-weight: 400; }

.e8-td-group { padding: 2px 4px 6px; border-radius: var(--ui-radius-xl); }
.e8-td-group-now { background: color-mix(in srgb, var(--ui-danger) 5%, var(--ui-surface)); box-shadow: inset 3px 0 0 var(--ui-danger); }
.e8-td-group-h { display: flex; align-items: center; gap: 8px; padding: 9px 10px 6px; }
.e8-td-group-n { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-td-urg { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.e8-td-urg.danger { color: var(--ui-danger-text); background: var(--ui-danger-tint); }
.e8-td-urg.warning { color: var(--ui-warning-text); background: var(--ui-warning-tint); }
.e8-td-urg.neutral { color: var(--ui-text-secondary); background: var(--ui-fill); }

.e8-td-task { display: flex; align-items: flex-start; gap: 11px; padding: 11px 10px; border-radius: var(--ui-radius-xl); border: 1px solid transparent; transition: background .12s ease, border-color .12s ease, transform .08s ease; }
.e8-td-task:hover { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-1); }
.e8-td-task:hover > .e8-btn { background: var(--ui-accent); color: var(--ui-accent-text, #fff); border-color: var(--ui-accent); }
.e8-td-task.is-done { opacity: 0.52; }
.e8-td-task.is-done:hover { box-shadow: none; }
.e8-td-task.is-done .e8-td-task-title { text-decoration: line-through; }
.e8-td-check { flex: none; border: 0; background: none; cursor: pointer; padding: 0; color: var(--ui-border-strong); margin-top: 2px; transition: color .12s ease, transform .12s ease; }
.e8-td-check:hover { color: var(--ui-accent); transform: scale(1.12); }
.e8-td-check .material-symbols-outlined { font-size: 22px; }
.e8-td-task.is-done .e8-td-check { color: var(--ui-success-text); }
.e8-td-task-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.e8-td-task-ic .material-symbols-outlined { font-size: 18px; }
.e8-td-task-ic.danger { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-td-task-ic.warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-td-task-ic.neutral { background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-td-task-main { flex: 1; min-width: 0; cursor: pointer; }
.e8-td-task-main:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: 6px; }
.e8-td-task-title { font-size: var(--ui-text-base); font-weight: 550; color: var(--ui-text); line-height: 1.4; }
.e8-td-ai { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--ui-accent); animation: e8-td-twinkle 3.4s ease-in-out infinite; }
.e8-td-ai .material-symbols-outlined { font-size: 14px; }
.e8-td-task-why { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); line-height: 1.45; margin-top: 3px; }
.e8-td-task > .e8-btn { flex: none; margin-top: 2px; transition: background .12s ease, color .12s ease, border-color .12s ease; }
@keyframes e8-td-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .e8-td-ai { animation: none; opacity: .8; } }

/* Intel cards */
.e8-td-cards { display: flex; flex-direction: column; gap: 14px; }
/* Curated cohort cards: full-width horizontal grid below the queue+rail row, so they
   complement the primary task queue rather than towering beside it. */
.e8-td-intel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 640px) { .e8-td-intel-cards { grid-template-columns: 1fr; } }
.e8-td-card { padding: 14px 15px; border-radius: var(--ui-radius-xl); transition: transform .12s ease, box-shadow .12s ease; }
.e8-td-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-2); }
.e8-td-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.e8-td-card-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-fill); color: var(--ui-text-tertiary); }
.e8-td-card-ic .material-symbols-outlined { font-size: 16px; }
.e8-td-card-title { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); flex: 1; min-width: 0; }
.e8-td-card-all { font: inherit; font-size: var(--ui-text-xs); font-weight: 500; color: var(--ui-accent); background: none; border: 0; cursor: pointer; flex: none; opacity: .85; }
.e8-td-card-all:hover { opacity: 1; }
.e8-td-metric { padding: 2px 2px 2px; }
.e8-td-metric-v { font: 500 var(--ui-text-metric)/1.15 var(--font-brand); letter-spacing: -0.02em; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.e8-td-metric-l { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-td-metric-d { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); }
.e8-td-metric-d.up { color: var(--ui-success-text); }
.e8-td-card-list { display: flex; flex-direction: column; gap: 1px; }
.e8-td-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; transition: background .1s ease; }
.e8-td-item:hover { background: var(--ui-fill); }
.e8-td-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--ui-text-tertiary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-text-tertiary) 14%, transparent); }
.e8-td-dot.success { background: var(--ui-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-success) 16%, transparent); }
.e8-td-dot.warning { background: var(--ui-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-warning) 16%, transparent); }
.e8-td-dot.danger { background: var(--ui-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, transparent); }
.e8-td-dot.accent { background: var(--ui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 16%, transparent); }
.e8-td-item-main { min-width: 0; }
.e8-td-item-l { display: block; font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); line-height: 1.35; }
.e8-td-item-s { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }

@media (prefers-reduced-motion: no-preference) {
  .e8-td-needs, .e8-td-signals, .e8-td-desk-context, .e8-td-brief, .e8-td-grid > * { animation: e8-cardin .4s cubic-bezier(.22,.61,.36,1) both; }
  .e8-td-grid > *:nth-child(2) { animation-delay: .06s; }
}
/* Stats crowd (esp. "JO-44087 · 4d") before the layout breakpoint - drop to 2-col earlier. */
@media (max-width: 1180px) {
  .e8-td-needs-list { grid-template-columns: 1fr; }
  .e8-td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .e8-td-grid { grid-template-columns: 1fr; }
  .e8-td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e8-td-head { flex-direction: column; }
  .e8-td-switch { width: 100%; }
}
@media (max-width: 640px) {
  .e8-card.e8-td-needs, .e8-card.e8-td-signals, .e8-card.e8-td-desk-context, .e8-card.e8-td-brief { padding: 12px; }
  .e8-td-signal-grid { grid-template-columns: 1fr; }
  .e8-td-desk-context .e8-td-section-head { align-items: flex-start; }
  .e8-td-desk-context .e8-deskset { flex-direction: column; align-items: flex-start; }
  .e8-td-brief-head { align-items: flex-start; flex-wrap: wrap; }
  .e8-td-brief-when { order: 3; width: 100%; }
  .e8-td-brief-actions { order: 4; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .e8-td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 4px; }
  .e8-td-stats .e8-stattile { min-width: 0; gap: 7px; padding: 5px 3px; }
  .e8-td-stats .e8-stattile-ic { width: 30px; height: 30px; }
}

/* ---------- Redeployment radar (Today card + dashboard widget) ---------- */
.e8-rdr { padding: 0; overflow: hidden; }
.e8-rdr-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--ui-border); }
.e8-rdr-head-main { flex: 1; min-width: 0; }
.e8-rdr-title { font-weight: 600; color: var(--ui-text); }
.e8-rdr-sub { color: var(--ui-text-tertiary); margin-top: 1px; text-wrap: pretty; }
.e8-rdr-bench {
  font: inherit; font-weight: 500; color: var(--ui-daybreak-text); background: none; border: 0;
  padding: 4px 6px; border-radius: var(--ui-radius-sm); cursor: pointer; white-space: nowrap; flex: none;
}
.e8-rdr-bench:hover { background: var(--ui-accent-tint); }
.e8-rdr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px 16px; }
.e8-rdr-item {
  display: flex; flex-direction: column; gap: 9px; padding: 13px; min-width: 0;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); background: var(--ui-surface);
  cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
.e8-rdr-item:hover { box-shadow: var(--ui-shadow-2h); border-color: var(--ui-border-strong); }
.e8-rdr-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.e8-rdr-id { flex: 1; min-width: 0; }
.e8-rdr-name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ui-text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-rdr-role { color: var(--ui-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-rdr-rolloff {
  display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: flex-start;
  padding: 2.5px 8px; border-radius: var(--ui-radius-pill);
  background: var(--ui-warning-tint); color: var(--ui-warning-text); font-weight: 550; white-space: nowrap;
}
.e8-rdr-rolloff::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-warning); }
.e8-rdr-meta { display: flex; align-items: center; gap: 6px; color: var(--ui-text-secondary); min-width: 0; }
.e8-rdr-meta .material-symbols-outlined { font-size: 14px; color: var(--ui-text-tertiary); flex: none; }
.e8-rdr-meta-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-rdr-pulserow { display: flex; align-items: center; gap: 6px 8px; min-width: 0; flex-wrap: wrap; }
.e8-rdr-pulse { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ui-success-text); }
.e8-rdr-pulse.warn { color: var(--ui-warning-text); }
.e8-rdr-pulse.risk { color: var(--ui-danger-text); }
.e8-rdr-pulse-l { color: var(--ui-text-tertiary); white-space: nowrap; }
.e8-rdr-cta {
  display: flex; align-items: center; gap: 7px; margin-top: auto; min-width: 0;
  font: inherit; font-weight: 550; color: var(--ui-daybreak-text); background: transparent;
  border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; padding: 9px 0 1px; cursor: pointer; transition: color .12s ease;
}
.e8-rdr-cta:hover { color: var(--ui-accent); background: transparent; }
.e8-rdr-cta .material-symbols-outlined { font-size: 14px; flex: none; }
.e8-rdr-cta-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Cascade shim (historical) - product.css's type reset now sits at :where(.elev8) (0,0,1) and loses to class rules; kept as belt-and-braces. See the Type reset note in product.css. */
.elev8 .e8-rdr-title { font-size: var(--ui-text-base); }
.elev8 .e8-rdr-sub { font-size: var(--ui-text-sm); }
.elev8 .e8-rdr-bench { font-size: var(--ui-text-sm); }
.elev8 .e8-rdr-name { font-size: var(--ui-text-base); }
.elev8 .e8-rdr-role { font-size: var(--ui-text-sm); }
.elev8 .e8-rdr-rolloff { font-size: var(--ui-text-xs); }
.elev8 .e8-rdr-meta { font-size: var(--ui-text-sm); }
.elev8 .e8-rdr-pulse { font-size: var(--ui-text-base); }
.elev8 .e8-rdr-pulse-l { font-size: var(--ui-text-xs); }
.elev8 .e8-rdr-cta { font-size: var(--ui-text-sm); }

/* ---------- Jobs list: compact pipeline meter (columns-picker option) ---------- */
.e8-pipemeter {
  display: inline-flex; width: 90px; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--ui-fill); vertical-align: middle;
}
.e8-pipemeter > span { display: block; height: 100%; flex-basis: 0; min-width: 3px; }

/* ---------- Matching tab: redeployment matches strip (radar -> queue loop) ---------- */
.e8-rdm {
  border: 1px solid var(--ui-daybreak-tint); border-radius: var(--ui-radius-xl);
  background: var(--ui-daybreak-wash); padding: 10px 14px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.e8-rdm-head { display: flex; align-items: baseline; gap: 7px; padding: 2px 0 6px; flex-wrap: wrap; }
.e8-rdm-head .e8-pm { align-self: center; }
.e8-rdm-title { font-weight: 600; color: var(--ui-text); }
.e8-rdm-sub { color: var(--ui-text-tertiary); }
.e8-rdm-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 0; border-top: 1px solid var(--ui-daybreak-tint); }
.e8-rdm-id { display: flex; flex-direction: column; min-width: 0; flex: none; width: 200px; }
.e8-rdm-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-rdm-role { color: var(--ui-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-rdm-rolloff {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 8px; border-radius: var(--ui-radius-pill);
  background: var(--ui-warning-tint); color: var(--ui-warning-text); font-weight: 550; white-space: nowrap;
}
.e8-rdm-rolloff::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-warning); }
/* Cascade shim - product.css resets font-size on .elev8 span/div (0,1,1); restate at (0,2,0). */
.elev8 .e8-rdm-title { font-size: var(--ui-text-sm); }
.elev8 .e8-rdm-sub { font-size: var(--ui-text-xs); }
.elev8 .e8-rdm-name { font-size: var(--ui-text-base); }
.elev8 .e8-rdm-role { font-size: var(--ui-text-xs); }
.elev8 .e8-rdm-rolloff { font-size: var(--ui-text-xs); }
@media (max-width: 720px) {
  .e8-rdm-row { flex-wrap: wrap; }
  .e8-rdm-id { width: auto; flex: 1; }
}

/* ============ R98: Tasks (#/tasks) - the one task queue (.e8-tk-*) ============
   Rows mirror Today's queue look; grep confirmed the .e8-tk- prefix was unused. */
.e8-tk-page { max-width: 1060px; }

/* Needs review - read-through of the approvals queue + Watchtower, links out only. */
.e8-tk-review { padding: 8px 8px 8px; margin-bottom: 14px; }
.e8-tk-review-head { display: flex; align-items: center; gap: 9px; padding: 6px 8px 8px; flex-wrap: wrap; }
.e8-tk-review-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ui-text); }
.e8-tk-review-title .material-symbols-outlined { font-size: 17px; color: var(--ui-warning-text); }
.e8-tk-review-n { color: var(--ui-text-tertiary); }
.e8-tk-review-all { margin-left: auto; border: 0; background: none; cursor: pointer; font-weight: 550; color: var(--ui-accent); padding: 4px 8px; border-radius: var(--ui-radius); }
.e8-tk-review-all:hover { background: var(--ui-accent-tint); }
.e8-tk-review-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; }
.e8-tk-review-row:hover { background: var(--ui-fill-hover); }
.e8-tk-review-row:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-tk-review-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-tk-review-ic .material-symbols-outlined { font-size: 15px; }
.e8-tk-review-ic.danger { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-tk-review-t { flex: 1; min-width: 0; font-weight: 500; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-tk-review-s { flex: none; color: var(--ui-text-tertiary); }
.e8-tk-review-chev { color: var(--ui-text-tertiary); font-size: var(--ui-text-xl); }
.e8-tk-review-more { display: block; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 7px 8px 3px; color: var(--ui-text-secondary); font-weight: 500; border-radius: 8px; }
.e8-tk-review-more:hover { color: var(--ui-accent); }

/* Filter bar: sub-tabs left, quick-add right. */
.e8-tk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
.e8-tk-add { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.e8-tk-add-input { width: 250px; }

/* The board: one surface, urgency bands inside (same bones as Today's queue). */
.e8-tk-board { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-1); padding: 8px 8px 12px; }
.e8-tk-group { padding: 2px 4px 6px; border-radius: 12px; }
.e8-tk-group-now { background: color-mix(in srgb, var(--ui-danger) 5%, var(--ui-surface)); box-shadow: inset 3px 0 0 var(--ui-danger); }
.e8-tk-group-h { display: flex; align-items: center; gap: 8px; padding: 9px 10px 6px; }
.e8-tk-group-n { color: var(--ui-text-tertiary); }
.e8-tk-urg { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.e8-tk-urg.danger { color: var(--ui-danger-text); background: var(--ui-danger-tint); }
.e8-tk-urg.warning { color: var(--ui-warning-text); background: var(--ui-warning-tint); }
.e8-tk-urg.neutral { color: var(--ui-text-secondary); background: var(--ui-fill); }

/* Rows. */
.e8-tk-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 10px; border-radius: var(--ui-radius-xl); border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; }
.e8-tk-row:hover { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-1); }
.e8-tk-row.is-done { opacity: 0.6; }
.e8-tk-row.is-done .e8-tk-title { text-decoration: line-through; }
.e8-tk-row.is-done:hover { box-shadow: none; }
.e8-tk-check { flex: none; border: 0; background: none; cursor: pointer; padding: 0; color: var(--ui-border-strong); margin-top: 2px; transition: color .12s ease, transform .12s ease; }
.e8-tk-check:hover { color: var(--ui-accent); transform: scale(1.1); }
.e8-tk-check .material-symbols-outlined { font-size: 22px; }
.e8-tk-row.is-done .e8-tk-check { color: var(--ui-success-text); }
.e8-tk-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.e8-tk-ic .material-symbols-outlined { font-size: 18px; }
.e8-tk-ic.danger { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-tk-ic.warning { background: var(--ui-warning-tint); color: var(--ui-warning-text); }
.e8-tk-ic.neutral { background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-tk-main { flex: 1; min-width: 0; cursor: pointer; }
.e8-tk-main.no-link { cursor: default; }
.e8-tk-main:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: 6px; }
.e8-tk-title { font-weight: 550; color: var(--ui-text); line-height: 1.4; }
.e8-tk-ai { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--ui-accent); }
.e8-tk-ai .material-symbols-outlined { font-size: 14px; }
.e8-tk-sub { color: var(--ui-text-tertiary); line-height: 1.45; margin-top: 3px; }

/* Meta line under the text: related-record chip, owner, snooze/done notes. */
.e8-tk-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.e8-tk-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--ui-radius-pill); border: 1px solid var(--ui-border); background: var(--ui-fill); color: var(--ui-text-secondary); font-weight: 500; cursor: pointer; max-width: 240px; transition: background .12s ease, color .12s ease; }
.e8-tk-chip .material-symbols-outlined { font-size: 13px; flex: none; }
.e8-tk-chip-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e8-tk-chip:hover { background: var(--ui-accent-tint); color: var(--ui-daybreak-text); border-color: transparent; }
.e8-tk-chip:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.e8-tk-owner { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-text-secondary); font-weight: 500; }
.e8-tk-note { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-text-tertiary); }
.e8-tk-note .material-symbols-outlined { font-size: 13px; }

/* Cascade shim - product.css resets font-size on .elev8 span/div (0,1,1); restate at (0,2,0). */
.elev8 .e8-tk-review-title { font-size: var(--ui-text-base); }
.elev8 .e8-tk-review-n { font-size: var(--ui-text-xs); }
.elev8 .e8-tk-review-all { font-size: var(--ui-text-sm); }
.elev8 .e8-tk-review-t { font-size: var(--ui-text-base); }
.elev8 .e8-tk-review-s { font-size: var(--ui-text-xs); }
.elev8 .e8-tk-review-more { font-size: var(--ui-text-sm); }
.elev8 .e8-tk-group-n { font-size: var(--ui-text-xs); }
.elev8 .e8-tk-urg { font-size: var(--ui-text-xs); }
.elev8 .e8-tk-title { font-size: var(--ui-text-base); }
.elev8 .e8-tk-sub { font-size: var(--ui-text-sm); }
.elev8 .e8-tk-chip { font-size: var(--ui-text-sm); }
.elev8 .e8-tk-owner { font-size: var(--ui-text-sm); }
.elev8 .e8-tk-note { font-size: var(--ui-text-xs); }

@media (max-width: 840px) {
  .e8-tk-bar { align-items: stretch; }
  .e8-tk-add { margin-left: 0; width: 100%; }
  .e8-tk-add-input { flex: 1; width: auto; min-width: 140px; }
  .e8-tk-review-s { display: none; }
}

/* R98 Task 5 - compact task list for a record detail rail (reuses .e8-tk-check). */
.e8-rtk-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.e8-rtk-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }
.e8-rtk-check { margin-top: 0; }
.e8-rtk-check .material-symbols-outlined { font-size: 18px; }
.e8-rtk-main { flex: 1; min-width: 0; }
.elev8 .e8-rtk-title { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); line-height: 1.35; }
.e8-rtk-title .e8-tk-ai { margin-left: 4px; }
.e8-rtk-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.elev8 .e8-rtk-urg { font-size: var(--ui-text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.e8-rtk-urg.danger { color: var(--ui-danger-text); }
.e8-rtk-urg.warning { color: var(--ui-warning-text); }
.e8-rtk-urg.neutral { color: var(--ui-text-tertiary); }
.e8-rtk-owner { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.elev8 .e8-rtk-empty { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); padding: 2px 0; }
.e8-rtk-add { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.e8-rtk-input { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--ui-border); border-radius: 8px; padding: 0 9px; font-size: var(--ui-text-sm); font-family: inherit; background: var(--ui-surface); color: var(--ui-text); }
.e8-rtk-input:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus-ring); }
.e8-rtk-addbtn { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface); color: var(--ui-text-secondary); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.e8-rtk-addbtn:hover:not(:disabled) { background: var(--ui-accent-tint); color: var(--ui-accent); border-color: transparent; }
.e8-rtk-addbtn:disabled { opacity: .5; cursor: default; }
.e8-rtk-addbtn .material-symbols-outlined { font-size: 18px; }

/* ---------- R98 Task 6: data modes, pagination, first-run ---------- */
/* Show more (paginated lists + card lists + inbox) */
.e8-showmore { display: flex; justify-content: center; padding: 12px 0 4px; }
.e8-showmore-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); background: var(--ui-surface);
  color: var(--ui-text-secondary); font: inherit; font-size: var(--ui-text-sm); font-weight: 500; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.e8-showmore-btn:hover { background: var(--ui-accent-tint); color: var(--ui-accent); border-color: transparent; }
.e8-showmore-n { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-showmore-btn:hover .e8-showmore-n { color: var(--ui-accent); }

/* Board column "+N more" tail (jobs board + candidates board) */
.e8-board-more, .e8-cboard-more {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius);
  padding: 9px 8px; text-align: center; font-size: var(--ui-text-xs); font-weight: 500;
  color: var(--ui-text-secondary); cursor: pointer; margin: 2px 0;
  background: none; font-family: inherit; appearance: none; -webkit-appearance: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.e8-board-more:hover, .e8-cboard-more:hover { background: var(--ui-accent-tint); color: var(--ui-accent); border-color: transparent; }

/* Data-mode segmented row: reuses .e8-appr-modes/.e8-appr-mode; tighten for 3 word labels */
.e8-appr-data .e8-appr-mode { font-size: var(--ui-text-xs); padding: 8px 2px; }

/* Getting-started first-run card */
.e8-gs { padding: 16px 18px; }
.e8-gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.e8-gs-title { font-size: var(--ui-text-md); font-weight: 650; color: var(--ui-text); }
.e8-gs-sub { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 2px; }
.e8-gs-dismiss {
  flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ui-text-tertiary); cursor: pointer;
}
.e8-gs-dismiss:hover { background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-gs-dismiss .material-symbols-outlined { font-size: 18px; }
.e8-gs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.e8-gs-step {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.e8-gs-step:hover { border-color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-gs-step.done { cursor: default; opacity: .72; }
.e8-gs-step.done:hover { border-color: var(--ui-border); background: var(--ui-surface); }
.e8-gs-step:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus-ring); }
.e8-gs-check { flex: none; display: inline-flex; color: var(--ui-text-tertiary); }
.e8-gs-step.done .e8-gs-check { color: var(--ui-success-text); }
.e8-gs-check .material-symbols-outlined { font-size: 20px; }
.e8-gs-ic { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ui-fill); color: var(--ui-text-secondary); }
.e8-gs-ic .material-symbols-outlined { font-size: 17px; }
.e8-gs-txt { flex: 1; min-width: 0; }
.e8-gs-l { display: block; font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); }
.e8-gs-step.done .e8-gs-l { text-decoration: line-through; text-decoration-color: var(--ui-text-tertiary); }
.e8-gs-d { display: block; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-gs-chev { flex: none; font-size: var(--ui-text-2xl); color: var(--ui-text-tertiary); }

/* ===== R99 Task 2: rich requisition (Overview tab) ===== */
.e8-req { display: grid; gap: 26px; max-width: 780px; }
.e8-req-sec { display: grid; gap: 10px; }
.e8-req-head { display: flex; align-items: center; gap: 8px; }
.e8-req-subhead { display: flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary); margin-bottom: 7px; }
.e8-req-jd p { margin: 0 0 10px; font-size: var(--ui-text-base); line-height: 1.65; color: var(--ui-text-secondary); text-wrap: pretty; }
.e8-req-jd p:last-child { margin-bottom: 0; }
.e8-req-para { margin: 0; font-size: var(--ui-text-base); line-height: 1.6; color: var(--ui-text-secondary); text-wrap: pretty; }

/* Labeled fact grid */
.e8-req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; }
.e8-req-fact { min-width: 0; }
.e8-req-k { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-req-v { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); margin-top: 2px; }
.e8-req-computed { font-size: var(--ui-text-xs); font-weight: 400; color: var(--ui-text-tertiary); }

/* Location & schedule block - the star */
.e8-req-loc { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-fill); padding: 14px 16px; display: grid; gap: 12px; }
.e8-req-loc-head { display: flex; align-items: flex-start; gap: 10px; }
.e8-req-loc-icon { font-size: var(--ui-text-2xl); color: var(--ui-daybreak-text); flex: none; margin-top: 1px; }
.e8-req-loc-title { font-size: var(--ui-text-md); font-weight: 600; color: var(--ui-text); }
.e8-req-loc-sub { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); margin-top: 2px; }
.e8-req-loc-note { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); }
.e8-req-days { display: flex; flex-wrap: wrap; gap: 6px; }
.e8-req-day { font-size: var(--ui-text-sm); font-weight: 500; padding: 4px 10px; border-radius: var(--ui-radius-pill); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text-tertiary); min-width: 40px; text-align: center; }
.e8-req-day.on { background: var(--ui-accent-tint); border-color: var(--ui-daybreak-tint); color: var(--ui-daybreak-text); }

/* Must-haves list + nice-to-have chips */
.e8-req-list { display: grid; gap: 7px; }
.e8-req-li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ui-text-base); color: var(--ui-text); }
.e8-req-check { font-size: var(--ui-text-xl); color: var(--ui-success-text); flex: none; margin-top: 1px; }
.e8-req-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Numbered interview rounds */
.e8-req-rounds { display: grid; gap: 10px; }
.e8-req-round { display: flex; align-items: flex-start; gap: 12px; }
.e8-req-num { flex: none; width: 24px; height: 24px; border-radius: var(--ui-radius-pill); background: var(--ui-accent-tint); color: var(--ui-daybreak-text); font-size: var(--ui-text-sm); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.e8-req-round-fmt { font-size: var(--ui-text-base); font-weight: 500; color: var(--ui-text); }
.e8-req-round-who { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 1px; }

/* Compliance status chips */
.e8-req-status { display: flex; flex-wrap: wrap; gap: 8px; }
.e8-req-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); font-weight: 500; padding: 4px 10px; border-radius: var(--ui-radius-pill); }
.e8-req-tag .material-symbols-outlined { font-size: 14px; }
.e8-req-tag.ok { color: var(--ui-success-text); background: var(--ui-success-tint); }
.e8-req-tag.missing { color: var(--ui-warning-text); background: var(--ui-warning-tint); }

/* Hiring-manager contact card */
.e8-req-hm { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.e8-req-hm-name { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-req-hm-title { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-req-hm-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; }
.e8-req-hm-link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-daybreak-text); text-decoration: none; }
.e8-req-hm-link:hover { text-decoration: underline; }
.e8-req-hm-link .material-symbols-outlined { font-size: 15px; }

/* R101: consultant ownership - "Viewing as" persona control + orphan warning chip. */
.e8-cown-viewas { display: inline-flex; align-items: center; gap: 8px; }
.e8-cown-viewas-lab { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary); white-space: nowrap; }
.e8-cown-orphan { display: inline-flex; align-items: center; gap: 3px; font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-warning-text); background: var(--ui-warning-tint); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.e8-cown-orphan .material-symbols-outlined { font-size: 13px; }

/* R101 Task 3: orphan-pool attention card + reassign dialog. Warning-tinted, tokens only. */
.e8-cown-attn { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 11px 14px; border-left: 3px solid var(--ui-warning); background: var(--ui-warning-tint); box-shadow: none; }
.e8-cown-attn-glyph { flex: none; font-size: var(--ui-text-3xl); color: var(--ui-warning-text); }
.e8-cown-attn-title { font-size: var(--ui-text-base); font-weight: 600; color: var(--ui-text); }
.e8-cown-attn-sub { font-size: var(--ui-text-sm); color: var(--ui-text-tertiary); margin-top: 2px; }
.e8-cown-dlg { width: 440px; max-width: calc(100vw - 32px); }
.e8-cown-dlg-list { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.e8-cown-dlg-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.e8-cown-dlg-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--ui-text-sm); color: var(--ui-warning-text); background: var(--ui-warning-tint); border-radius: 6px; padding: 6px 9px; }
.e8-cown-dlg-hint .material-symbols-outlined { font-size: 15px; }

/* ---------- R107 candidate self-service portal (chrome-free, mobile-first) ---------- */
/* Rendered by main.jsx OUTSIDE the app shell - a full-screen candidate surface with no sidebar /
   topbar / mobile tab bar / cmdk. Unique .e8-cportal-* prefix (the job-share "company portal"
   owns .e8-portal-*). Token-only so it tracks appearance + accent in light and dark. */
.e8-cportal-root {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  background: var(--ui-bg-app); color: var(--ui-text);
  font-family: var(--font-body, 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif);
  -webkit-overflow-scrolling: touch;
}
.e8-cportal {
  box-sizing: border-box; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
}
.e8-cportal-card {
  box-sizing: border-box; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 32px 28px;
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-2);
}
.e8-cportal-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.e8-cportal-logomark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--ui-text); color: var(--ui-surface);
  font-size: var(--ui-text-lg); font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.e8-cportal-wordmark { font-size: var(--ui-text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ui-text); }
.e8-cportal-glyph { font-size: 40px; color: var(--ui-accent); margin-bottom: 14px; }
.e8-cportal-glyph-ok { color: var(--ui-success-text); }
.e8-cportal-glyph-muted { color: var(--ui-text-tertiary); }
.e8-cportal-title {
  font-size: var(--ui-text-xl); font-weight: 650; letter-spacing: -0.01em;
  color: var(--ui-text); margin: 0 0 8px; line-height: 1.25;
}
.e8-cportal-sub {
  font-size: var(--ui-text-sm); line-height: 1.55; color: var(--ui-text-secondary);
  margin: 0 0 22px; max-width: 34ch;
}
.e8-cportal-email { color: var(--ui-text); font-weight: 600; white-space: nowrap; }
.e8-cportal-cta { width: 100%; justify-content: center; }
.e8-cportal-passkey {
  width: 100%; margin-top: 10px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius); cursor: pointer; font-family: inherit;
  font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary);
  transition: border-color 120ms ease-out, background 120ms ease-out, color 120ms ease-out;
}
.e8-cportal-passkey:hover { border-color: var(--ui-text-tertiary); color: var(--ui-text); background: var(--ui-fill); }
.e8-cportal-passkey .material-symbols-outlined { font-size: 18px; }
.e8-cportal-textlink {
  margin-top: 14px; background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-tertiary);
}
.e8-cportal-textlink:hover { color: var(--ui-text-secondary); text-decoration: underline; }
.e8-cportal-fine {
  font-size: var(--ui-text-xs); line-height: 1.5; color: var(--ui-text-tertiary);
  margin: 16px 0 0; max-width: 32ch;
}
@media (max-width: 480px) {
  .e8-cportal { padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .e8-cportal-card { padding: 26px 20px; border-radius: var(--ui-radius-lg); }
}

/* ---------- R107 Task 2: the verify form + confirmation recap (chrome-free, mobile-first) ---------- */
/* The form is a tall card - top-align the surface so it scrolls from the top instead of clipping. */
.e8-cportal-tall { align-items: flex-start; }
.e8-cportal-form {
  max-width: 500px; align-items: stretch; text-align: left;
}
.e8-cportal-form .e8-cportal-brand { align-self: flex-start; }
.e8-cportal-lede { margin-bottom: 8px; }
.e8-cportal-title-left { text-align: left; }
.e8-cportal-sub-left { text-align: left; max-width: none; margin-bottom: 4px; }

.e8-cportal-section {
  padding: 18px 0; border-top: 1px solid var(--ui-border);
}
.e8-cportal-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.e8-cportal-section-icon { font-size: var(--ui-text-2xl); color: var(--ui-accent); flex: none; }
.e8-cportal-section-title {
  font-size: var(--ui-text-sm); font-weight: 650; letter-spacing: -0.01em; color: var(--ui-text);
}
.e8-cportal-section-hint {
  font-size: var(--ui-text-xs); line-height: 1.5; color: var(--ui-text-tertiary); margin: -6px 0 10px;
}
.e8-cportal-fields { display: grid; gap: 12px; }

/* Removable skill chips (assessive - flagged for recruiter review on the ATS side). */
.e8-cportal-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.e8-cportal-chips-empty { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-cportal-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px; border-radius: var(--ui-radius-pill);
  background: var(--ui-fill); border: 1px solid var(--ui-border);
  font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text); line-height: 1;
}
.e8-cportal-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ui-text-tertiary); cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.e8-cportal-chip-x:hover { background: var(--ui-danger-tint); color: var(--ui-danger-text); }
.e8-cportal-chip-x .material-symbols-outlined { font-size: 14px; }
.e8-cportal-skilladd { display: flex; align-items: center; gap: 8px; }

/* Resume attach - honest attach control + note, no fake parse. */
.e8-cportal-filebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 40px; padding: 0 12px; cursor: pointer; font-family: inherit;
  font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary);
  background: transparent; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius);
  transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}
.e8-cportal-filebtn:hover { border-color: var(--ui-accent); color: var(--ui-text); background: var(--ui-fill); }
.e8-cportal-filebtn .material-symbols-outlined { font-size: 18px; }
.e8-cportal-filenote {
  display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0;
  font-size: var(--ui-text-xs); line-height: 1.5; color: var(--ui-success-text);
}
.e8-cportal-filenote b { color: var(--ui-text); font-weight: 600; }
.e8-cportal-filenote .material-symbols-outlined { font-size: 15px; flex: none; margin-top: 1px; }

/* Consent checkbox row. */
.e8-cportal-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: var(--ui-text-sm); line-height: 1.45; color: var(--ui-text); margin-bottom: 12px;
}
.e8-cportal-check .e8-checkbox { margin-top: 1px; }

.e8-cportal-actions {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ui-border);
}
.e8-cportal-hint {
  font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin: 10px 0 0; text-align: center;
}

/* Confirmation recap - a subtle "what we updated" box built from the receiver's returned diff. */
.e8-cportal-recap {
  width: 100%; margin: 4px 0 4px; padding: 14px 16px; text-align: left;
  background: var(--ui-fill); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
}
.e8-cportal-recap-title {
  font-size: var(--ui-text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ui-text-tertiary); margin-bottom: 8px;
}
.e8-cportal-recap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.e8-cportal-recap-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--ui-text-sm); line-height: 1.4;
}
.e8-cportal-recap-item-note {
  display: block; color: var(--ui-text-secondary); font-size: var(--ui-text-xs);
}
.e8-cportal-recap-field { font-weight: 600; color: var(--ui-text); flex: none; }
.e8-cportal-recap-val { color: var(--ui-text-secondary); text-align: right; word-break: break-word; }
.e8-cportal-recap-note {
  font-size: var(--ui-text-sm); line-height: 1.5; color: var(--ui-text-secondary);
  margin: 10px 0 0;
}
.e8-cportal-recap-list + .e8-cportal-recap-note { margin-top: 12px; }

@media (max-width: 480px) {
  .e8-cportal-form { padding: 24px 18px; }
  .e8-cportal-section { padding: 16px 0; }
}

/* ======================= R109 T2: possible-duplicates review queue + record flag =======================
   Suspected same-person PAIRS on the Candidates screen (matcher + possibleDuplicateOf, persona-scoped),
   plus a compact flag on the candidate record. Tokens only (color-mix on --ui-* where a tint is needed). */
/* R109 pair-row marks - shared by the R111 Duplicates page (the inline queue + lower-rail flag they were
   originally built for moved to their own page / an upper banner, but the row marks themselves are reused). */
.e8-dup-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 13px; border-top: 1px solid var(--ui-border); }
.e8-dup-people { display: flex; align-items: center; gap: 8px; min-width: 0; }
.e8-dup-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.e8-dup-vs { font-size: var(--ui-text-xl); color: var(--ui-text-tertiary); flex: none; }
.e8-dup-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.e8-dup-sigs { display: flex; gap: 5px; flex-wrap: wrap; }
.e8-dup-sig { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ui-border); background: var(--ui-surface); font-size: var(--ui-text-xs); color: var(--ui-text-secondary); white-space: nowrap; }
.e8-dup-acts { display: flex; align-items: center; gap: 7px; margin-left: auto; flex: none; }
@media (max-width: 640px) {
  .e8-dup-acts { margin-left: 0; }
}

/* R111: the slim candidates-list entry to the dedicated Duplicates page (replaces the big inline queue
   block). A single flat warning-tint row - a count + a Review affordance - never a heavy panel. */
.e8-dupentry {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 2px; padding: 9px 12px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-warning-tint) 55%, transparent);
  font: inherit; text-align: left; cursor: pointer; color: var(--ui-text);
  transition: background .12s ease, border-color .12s ease;
}
.e8-dupentry:hover { background: color-mix(in srgb, var(--ui-warning-tint) 85%, transparent); border-color: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-border)); }
.e8-dupentry-ico { font-size: var(--ui-text-2xl); color: var(--ui-warning-text); flex: none; }
.e8-dupentry-t { font-size: var(--ui-text-sm); color: var(--ui-text); min-width: 0; }
.e8-dupentry-t b { font-weight: 700; }
.e8-dupentry-go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-accent); }
.e8-dupentry-arrow { font-size: var(--ui-text-2xl); }

/* R111: the dedicated Duplicates PAGE. Reuses the R109 .e8-dup-row / .e8-dup-people / .e8-dup-sig marks
   inside a paged list; these are the page chrome (header + count + list frame + empty state) only. */
.e8-dupscreen-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.e8-dupscreen-head-l { min-width: 0; flex: 1; }
.e8-dupscreen-sub { margin: 4px 0 0; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.45; }
.e8-dupscreen-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 10px;
  border-radius: var(--ui-radius-pill); font-size: var(--ui-text-sm); font-weight: 700; flex: none;
  color: var(--ui-warning-text); background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
}
.e8-dupscreen-list { display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); overflow: hidden; }
.e8-dupscreen-list .e8-dup-row:first-child { border-top: 0; }
.e8-dupscreen-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 56px 24px; border: 1px dashed var(--ui-border); border-radius: 12px; background: var(--ui-surface);
}
.e8-dupscreen-empty-ico { font-size: 36px; color: color-mix(in srgb, var(--ui-success) 70%, var(--ui-text-tertiary)); }
.e8-dupscreen-empty-t { font-size: var(--ui-text-md); font-weight: 650; color: var(--ui-text); }
.e8-dupscreen-empty-sub { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); max-width: 360px; line-height: 1.45; margin-bottom: 6px; }

/* R111: the candidate-record possible-duplicate banner. Prominent but FLAT - a warning-tint bar with a
   hairline directly under the record header, spanning the main content width (moved off the lower rail). */
.e8-dup-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-warning); border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-warning-tint) 22%, var(--ui-surface));
}
.e8-dup-banner-ico { font-size: var(--ui-text-2xl); color: var(--ui-warning-text); flex: none; }
.e8-dup-banner-body { min-width: 0; flex: 1; }
.e8-dup-banner-t { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.e8-dup-banner-name { font-weight: 600; }
.e8-dup-banner-score {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs); font-weight: 700; color: var(--ui-warning-text); background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
}
.e8-dup-banner-sub { font-size: var(--ui-text-xs); color: var(--ui-text-secondary); margin-top: 2px; line-height: 1.4; }
.e8-dup-banner-acts { display: inline-flex; align-items: center; gap: 7px; flex: none; }
@media (max-width: 640px) {
  .e8-dup-banner { flex-wrap: wrap; }
  .e8-dup-banner-acts { width: 100%; }
  .e8-dup-banner-acts > .e8-btn { flex: 1; justify-content: center; }
  .e8-dupentry-t { line-height: 1.3; }
}

/* R109 T3: the human-reviewed merge review dialog. Side-by-side of two records of the same person, field-
   by-field, with per-field provenance + a precedence-preselected winner the human can override. Reuses the
   DS Modal shell (.e8-reject); these styles are the body + the two-column field grid only. */
.e8-merge-dlg { width: min(760px, 94vw); max-width: 760px; }
.e8-merge-body { padding: 14px 16px 4px; max-height: min(64vh, 620px); overflow-y: auto; }
.e8-merge-intro { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); line-height: 1.5; margin-bottom: 12px; }
.e8-merge-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.e8-merge-rec { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-surface); }
.e8-merge-rec-on { border-color: var(--ui-accent); background: var(--ui-accent-tint); }
.e8-merge-rec-name { font-size: var(--ui-text-base); font-weight: 650; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-merge-rec-sub { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-merge-rec-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.e8-merge-rec-c { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-merge-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 16%, transparent); }
.e8-merge-grid { display: flex; flex-direction: column; border: 1px solid var(--ui-border); border-radius: 11px; overflow: hidden; }
.e8-merge-frow { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: stretch; padding: 8px 10px; border-top: 1px solid var(--ui-border); }
.e8-merge-frow:first-child { border-top: 0; }
.e8-merge-frow-same { background: color-mix(in srgb, var(--ui-border) 16%, transparent); }
.e8-merge-flabel { display: flex; flex-direction: column; gap: 3px; align-self: center; font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-text-secondary); }
.e8-merge-same { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.e8-merge-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.e8-merge-cell { display: flex; align-items: flex-start; gap: 7px; padding: 7px 9px; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--ui-surface); text-align: left; cursor: pointer; font: inherit; color: var(--ui-text); width: 100%; }
.e8-merge-cell:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.e8-merge-cell-on { border-color: var(--ui-accent); background: var(--ui-accent-tint); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.e8-merge-cell-check { font-size: var(--ui-text-xl); flex: none; color: var(--ui-text-tertiary); margin-top: 1px; }
.e8-merge-cell-on .e8-merge-cell-check { color: var(--ui-accent); }
.e8-merge-cell-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e8-merge-cell-val { font-size: var(--ui-text-sm); font-weight: 550; color: var(--ui-text); word-break: break-word; line-height: 1.35; }
.e8-merge-cell-prov { font-size: var(--ui-text-xs); font-weight: 600; color: var(--ui-text-tertiary); }
.e8-merge-k-candidate { color: var(--ui-success-text); }
.e8-merge-k-recruiter { color: var(--ui-info-text); }
.e8-merge-k-enrichment { color: var(--ui-warning-text); }
.e8-merge-k-none { color: var(--ui-text-tertiary); }
.e8-merge-counts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-merge-count { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: var(--ui-text-xs); font-weight: 650; color: var(--ui-text); background: color-mix(in srgb, var(--ui-border) 32%, transparent); }
.e8-merge-foot { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--ui-border); }
.e8-merge-foot-note { flex: 1; min-width: 0; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
@media (max-width: 640px) {
  .e8-merge-head { grid-template-columns: 1fr; }
  .e8-merge-frow { grid-template-columns: 1fr; gap: 6px; }
  .e8-merge-flabel { flex-direction: row; align-items: baseline; gap: 6px; }
  .e8-merge-foot-note { display: none; }
}

/* ============================== RATE LIBRARY (R-rates) ============================== */
/* Geo-aware rate intelligence: search + geo filter, trend chart, benchmark bars. */
.e8-rl-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.e8-rl-search { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.e8-rl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 14px; max-width: 920px; }
.e8-rl-geochip { display: inline-flex; align-items: center; font-size: var(--ui-text-xs); font-weight: 600; padding: 2px 9px; border-radius: var(--ui-radius-pill); white-space: nowrap; }
.e8-rl-qlabels { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-rl-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.e8-rl-leg { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-rl-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.e8-rl-leg b { color: var(--ui-text); font-weight: 600; }
.e8-rl-bench-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; transition: opacity .18s ease; }
.e8-rl-bench-row + .e8-rl-bench-row { border-top: 1px solid var(--ui-border); }
.e8-rl-bench-row .e8-rl-geochip { width: 64px; justify-content: center; flex: none; }
.e8-rl-bench-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--ui-fill); overflow: hidden; min-width: 60px; }
.e8-rl-bench-bar > i { display: block; height: 100%; border-radius: 5px; transition: width .25s ease; }
.e8-rl-bench-val { width: 74px; text-align: right; font-weight: 600; flex: none; }
.e8-rl-bench-delta { width: 88px; text-align: right; font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); flex: none; }
@media (max-width: 900px) {
  .e8-rl-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .e8-rl-q-alt { display: none; } /* every-other quarter label on narrow screens */
  .e8-rl-bench-delta { width: auto; }
}
/* Purpose-built mobile rate card: geo chip rides the title line, rates read as one strip,
   freshness + provenance close the card (instead of generic label/value rows). */
.e8-rl-mcard { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.e8-rl-mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.e8-rl-mcard-role { font-weight: 600; color: var(--ui-text); min-width: 0; }
.e8-rl-mcard-meta { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-rl-mcard-rates { display: flex; align-items: center; gap: 10px; margin-top: 7px; min-width: 0; }
.e8-rl-mcard-bill { font-size: var(--ui-text-xl); font-weight: 650; color: var(--ui-text); letter-spacing: -0.01em; }
.e8-rl-mcard-unit { font-size: var(--ui-text-sm); font-weight: 500; color: var(--ui-text-tertiary); }
.e8-rl-mcard-pay { font-size: var(--ui-text-sm); color: var(--ui-text-secondary); }
.e8-rl-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); }
.e8-rl-mcard-mkt { font-size: var(--ui-text-xs); color: var(--ui-text-tertiary); margin-top: 5px; }
.e8-rl-mcard-mkt b { font-weight: 600; }

/* vs-market band: p25-p75 range, median tick, card-rate dot + delta. */
.e8-rl-band { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.e8-rl-band-track { position: relative; width: 92px; height: 8px; flex: none; background: var(--ui-fill); border-radius: 4px; }
.e8-rl-band-range { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-text-tertiary) 22%, transparent); border-radius: 4px; }
.e8-rl-band-mid { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ui-text-tertiary); border-radius: 1px; transform: translateX(-50%); }
.e8-rl-band-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--ui-surface); }
.e8-rl-band-delta { font-size: var(--ui-text-xs); font-weight: 600; }