/* ===== Activate - Veridian Implementation Platform ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary: #253378;
  --primary-light: #474ecb;
  --primary-dark: #1a2456;
  --accent: #5398f6;
  --accent-light: #6ba8f7;
  --accent-soft: rgba(83,152,246,0.08);
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-secondary: #f8f9fc;
  --bg-page: #f8f9fc;
  --bg-input: #f8f9fc;
  --bg-hover: rgba(83,152,246,0.04);
  --bg-sidebar: #f4f5f7;
  --bg-sidebar-hover: rgba(37,51,120,0.06);
  --bg-sidebar-active: rgba(83,152,246,0.10);
  --text: #253378;
  --text-secondary: #676865;
  --text-sec: #676865;
  --text-muted: #94a3b8;
  --text-dim: rgba(103,104,101,0.5);
  --text-sidebar: #253378;
  --text-sidebar-active: #253378;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --pass: #3cc69a;
  --pass-bg: #c6ebdb;
  /* Readable green INK. --pass is a fill/border colour: #3cc69a on a white card
     is 2.1:1, too weak for text. This is the text-weight green. */
  --pass-ink: #047857;
  --fail: #c1153a;
  --fail-bg: #fce8ec;
  --red: #c1153a;
  --pending: #676865;
  --pending-bg: #f0f0ef;
  --partial: #faa938;
  --partial-bg: #fff5e6;
  --warning: #f55819;
  --not-testable: #676865;
  --not-testable-bg: #f9fafb;
  --blue: #474ecb;
  --blue-soft: rgba(71,78,203,0.08);
  /* Accent and purple chip surfaces. Both were literals inline in the Config
     Compare summary tiles (#e8f0fe / #a855f7 / #f5f3ff), which meant dark mode
     could not reach them; the light values here are those literals unchanged. */
  --accent-bg: #e8f0fe;
  --purple: #a855f7;
  --purple-bg: #f5f3ff;
  --orange: #f55819;
  --yellow: #faa938;
  --green: #3cc69a;
  --shadow-sm: 0 1px 2px rgba(37,51,120,0.05);
  --shadow: 0 1px 3px rgba(37,51,120,0.08);
  --shadow-md: 0 4px 6px -1px rgba(37,51,120,0.1), 0 2px 4px -2px rgba(37,51,120,0.06);
  --shadow-lg: 0 4px 16px rgba(37,51,120,0.12);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --sidebar-width: 232px;
  --sidebar-collapsed: 64px;
  --header-height: 56px;
  --transition: 0.2s ease;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
}

/* ===== LAYOUT ===== */
.app-layout {
  display: flex;
  height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  z-index: 100;
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar-header {
  padding: 10px 20px;
  border-bottom: 1px solid #e2e8f0;
  line-height: 0;
}

.sidebar-header img:not(.sidebar-mark) {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

.sidebar-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: filter 0.4s ease, transform 0.3s ease;
  filter: brightness(1) drop-shadow(0 0 0px transparent);
}

.sidebar-logo:hover {
  transform: scale(1.04);
  filter: brightness(1.1) drop-shadow(0 2px 12px rgba(37,51,120,0.25));
  animation: logo-shimmer 0.8s ease-in-out;
}

@keyframes logo-shimmer {
  0% { filter: brightness(1.1) drop-shadow(0 2px 12px rgba(37,51,120,0.25)); }
  40% { filter: brightness(1.25) drop-shadow(0 2px 16px rgba(83,152,246,0.35)); }
  100% { filter: brightness(1.1) drop-shadow(0 2px 12px rgba(37,51,120,0.25)); }
}

.sidebar-brand {
  width: 100%;
  line-height: 0;
  font-size: 0;
}

.sidebar-brand h1 {
  font-size: 15px;
  font-weight: 700;
  color: #253378;
  letter-spacing: -0.2px;
  font-family: var(--font);
}

.sidebar-brand .subtitle {
  font-size: 10px;
  color: rgba(37,51,120,0.4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.collapsed .sidebar-brand { display: none; }

/* The wordmark doesn't survive a 64px rail, so the hexagon mark stands in.
   Kept out of .sidebar-brand so the brand's own onerror text fallback stays
   hidden with it. */
/* Scoped through .sidebar-header on purpose: the bare `.sidebar-mark` loses to
   `.sidebar-header img { width:100%; display:block }` above, which blows the
   mark up to the full width of whichever sidebar it is in. */
.sidebar-header .sidebar-mark {
  display: none;
  width: 26px;
  height: 26px;
}

.collapsed .sidebar-header .sidebar-mark { display: block; }

.collapsed .sidebar-header {
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  border: 2px solid var(--border);
  color: var(--text-sidebar);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 101;
  transition: var(--transition);
}

.sidebar-toggle:hover {
  background: #e2e8f0;
  color: #253378;
  border-color: #e2e8f0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
}

/* ===== Left-nav search (filter menu options in real time) ===== */
.nav-search {
  padding: 8px 10px 6px;
  position: sticky;
  top: 0;
  background: var(--bg-sidebar);
  z-index: 2;
}
/* Visually-hidden label kept for screen readers (input also has aria-label). */
.nav-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nav-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search-icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  pointer-events: none;
}
.nav-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 26px 6px 28px;
  /* Tokens, not literals (§10.2): the hardcoded #fff/#253378 pair painted a
     light input into the dark sidebar — no dark sheet covered .nav-search. */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search-input::placeholder { color: var(--text-muted); }
.nav-search-input:focus {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.nav-search-clear {
  position: absolute;
  right: 4px;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.nav-search-clear:hover { color: var(--text-primary); }
.nav-search-empty {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
/* No search UI when the rail is collapsed to icons. */
.collapsed .nav-search { display: none; }
/* Items/sections filtered out by the active query. */
.nav-item.nav-search-hidden,
.nav-section.nav-search-hidden { display: none !important; }
/* Force a matching section open so its results are visible without changing
   the user's manual expand/collapse state (driven by .expanded). */
.nav-section.nav-search-expand .nav-section-items {
  max-height: 1000px;
  opacity: 1;
  overflow: visible;
}

.nav-section {
  padding: 0 8px;
  margin-bottom: 0;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(37,51,120,0.5);
  padding: 6px 12px 3px;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.nav-section-label:hover {
  color: rgba(37,51,120,0.75);
}

.nav-section-arrow {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  transition: transform 0.2s ease;
  opacity: 0.5;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-section.expanded .nav-section-arrow {
  transform: rotate(90deg);
}

.nav-section-items {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.15s ease-out, opacity 0.12s ease-out;
}

.nav-section.expanded .nav-section-items {
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.2s ease-in, opacity 0.15s ease-in;
}


.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  cursor: pointer;
  transition: var(--transition);
  font-size: 12px;
  font-weight: 500;
  position: relative;
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-left: 4px;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar);
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  font-weight: 600;
  border-left-color: #5398f6;
}

.nav-item .icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: inherit;
  opacity: 0.6;
}

.nav-item .icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.nav-item.active .icon {
  opacity: 0.85;
}

/* The label absorbs the row's free space, so everything after it (badge, star)
   is pinned to the right edge instead of trailing the text. min-width:0 lets a
   long label actually shrink to an ellipsis inside the flex row rather than
   overflowing and shoving the star past the edge (item 3c8f2e6d). */
.nav-item .label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsed .nav-item .label { display: none; }

.nav-item .badge {
  margin-left: auto;
  background: rgba(83,152,246,0.2);
  color: #5398f6;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.collapsed .nav-item .badge { display: none; }

/* ===== Favorite menu items (v72): star toggle + condensed quick-nav ===== */
/* Star sits at the far right of a nav item; hidden until hover so a menu with
   no favorites looks unchanged. A favorited item keeps its star lit. */
.nav-fav-star {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  color: rgba(37,51,120,0.4);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, transform 0.1s;
}
.nav-item:hover .nav-fav-star { opacity: 0.65; }
.nav-fav-star:hover { color: #f5a623; opacity: 1; transform: scale(1.15); }
.nav-fav-star.is-fav { opacity: 1; color: #f5a623; }
/* NB: do NOT re-add a `.badge + .nav-fav-star { margin-left: <length> }` rule to
   space the star off a visible badge. `+` matches on DOM adjacency, and the main
   nav emits its badge span on EVERY item (hidden with display:none until it has
   a count), so such a rule out-specifies `margin-left:auto` above on every row
   and drops the star back beside the label text — the reported bug (item
   3c8f2e6d). The row's `gap` already separates badge from star. */
.collapsed .nav-fav-star { display: none; }

/* Condensed favorites panel — reuses .nav-section layout/animation. */
.nav-favorites { margin-top: 2px; }
.nav-favorites .nav-fav-title-icon {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  color: #f5a623;
  stroke-width: 2;
}
.nav-fav-item[draggable="true"] { cursor: pointer; }
.nav-fav-item.nav-fav-dragover { box-shadow: inset 0 2px 0 #5398f6; }
.nav-fav-item.nav-fav-flash { background: var(--bg-sidebar-hover); }
.nav-fav-item:focus-visible {
  outline: 2px solid #5398f6;
  outline-offset: -2px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-footer .env-badge {
  background: rgba(60,198,154,0.15);
  color: #3cc69a;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--mono);
}

/* The signed-in user row. Declared here rather than inline on the markup so
   the collapsed rail can restack it. */
.sidebar-user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-text {
  min-width: 0;
  flex: 1;
}

.sidebar-user-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
}

.sidebar-user-btn:hover { color: var(--text); }

.sidebar-footer-logo {
  width: 100px;
  height: auto;
  opacity: 0.85;
  margin-top: 4px;
  filter: none;
  image-rendering: auto;
}

/* ===== COLLAPSED RAIL =====
   64px of icons. Everything that needs words — the wordmark, the section
   headings, item labels, badges, stars, the environment picker, the user
   block — is dropped, and what stays is centred with a tooltip to name it.
   Rules live together because the rail is one look, not a set of hidings. */

/* Section headings would render as a column of unreadable stubs (they used to
   render as literal '•••'), so a hairline carries the grouping instead. */
.collapsed .nav-section-label { display: none; }

.collapsed .nav-section { padding: 4px 6px; }

.collapsed .nav-section + .nav-section { border-top: 1px solid var(--border); }

/* Every item shows, whatever its section's expand state. Sections are collapsed
   by default, so honouring that here left a rail of chevrons and no icons. */
.collapsed .nav-section-items {
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: none;
}

.collapsed .nav-item {
  justify-content: center;
  gap: 0;
  padding: 7px 0;
  margin: 1px 0;
  border-left: 0;
}

.collapsed .nav-item .icon { opacity: 0.72; }
.collapsed .nav-item.active .icon { opacity: 1; }
/* The expanded rail nudges an icon right on hover to lead the eye into the
   label; in the rail there is no label to lead into and it just wobbles. */
.collapsed .nav-item:hover .icon { transform: none; }

.collapsed .sidebar-footer {
  padding: 12px 6px;
  gap: 10px;
}

/* Named in the footer markup app.js renders. */
.collapsed .sidebar-env-select,
.collapsed .sidebar-user-text { display: none; }

.collapsed .sidebar-user {
  flex-direction: column;
  gap: 10px;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ===== HEADER ===== */
.header {
  height: var(--header-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}

/* Menu show/hide. A panel glyph, not a hamburger: the button toggles the left
   pane, and ☰ promised a menu that drops out of the header. */
.sidebar-toggle-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.sidebar-toggle-btn:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

.sidebar-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #253378;
  font-family: var(--font);
}

.header-breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
}

.header-breadcrumb span {
  color: var(--text);
  font-weight: 500;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .env-tag {
  background: #253378;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--mono);
}

/* ===== COMPACT HEADER (full-bleed screens) =====
   Co-Pilot and the AI Tester fill the viewport, and the header used to be
   hidden outright on them — which stranded Tiva, Report a bug, notifications,
   My Identity and Help, the header being their only entry point. The header
   stays, shorter: the SUBTITLE is what goes, since the two-line description is
   what the 56px is for. The action pills are NOT shrunk with it — guideline #23
   (design-review.css §12) puts a 40px minimum touch target on .hdr-icon, so the
   bar is sized to fit them rather than the other way round: 40px of control
   plus 4px of breathing room top and bottom. Re-pointing --header-height on
   <body> (not on .header) means the screens' own
   `calc(100vh - var(--header-height))` maths follows it down. */
body.full-bleed-view { --header-height: 48px; }

.header.header-compact { padding: 0 14px; gap: 12px; }
/* !important because renderHeader() writes `display:-webkit-box` INLINE on the
   subtitle (the two-line clamp), and an inline declaration outranks any
   stylesheet rule that isn't important. Without it the description keeps both
   lines and spills straight out of the shorter bar. The full text is still
   reachable — navigate() also hangs it off the title as a tooltip. */
.header.header-compact .header-subtitle { display: none !important; }
.header.header-compact .header-title { font-size: 14px; }
/* NB no .fb-menu rule here. The feedback menu does not hang off the header —
   its containing block is the position:relative wrapper around the Feedback
   button — so a compact-only offset would just make the menu sit 6px lower on
   these two screens than on every other one. Its real off-by-4px is fixed at
   the base rule in renderHeader()'s <style> block. */

/* ===== CONTENT AREA ===== */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ===== DASHBOARD ===== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card .stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-card .stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.stat-card.pass { border-left: 4px solid var(--pass); }
.stat-card.pass .stat-value { color: var(--pass-ink, #047857); }
.stat-card.fail { border-left: 4px solid var(--fail); }
.stat-card.fail .stat-value { color: var(--fail); }
.stat-card.pending { border-left: 4px solid var(--pending); }
.stat-card.pending .stat-value { color: var(--pending); }
.stat-card.total { border-left: 4px solid var(--accent); }
.stat-card.total .stat-value { color: var(--accent); }

.progress-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.progress-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.progress-bar-container {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.progress-bar-container .segment {
  height: 100%;
  transition: width 0.5s ease;
}

.segment.pass { background: var(--pass); }
.segment.fail { background: var(--fail); }
.segment.partial { background: var(--partial); }
.segment.pending { background: var(--pending); }
.segment.not-testable { background: var(--not-testable); }

.progress-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.progress-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ===== SECTION CARDS ===== */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.section-card-header {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
}

.section-card-body {
  padding: 16px 20px;
}

/* ===== TEST FILTER BAR ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-card);
  transition: var(--transition);
  position: relative;
}

.search-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-wrapper .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 14px;
  pointer-events: none;
}

.search-input:focus {
  outline: none;
  border-color: #5398f6;
  box-shadow: 0 0 0 3px rgba(83,152,246,0.12);
}

.filter-buttons {
  display: flex;
  gap: 4px;
}

.filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: #fff;
}

.filter-btn.active[data-status="pass"] { background: #3cc69a; border-color: #3cc69a; }
.filter-btn.active[data-status="fail"] { background: #c1153a; border-color: #c1153a; }
.filter-btn.active[data-status="pending"] { background: #676865; border-color: #676865; }
.filter-btn.active[data-status="in-progress"] { background: var(--accent-fill); border-color: var(--accent-fill); }
.filter-btn.active[data-status="blocked"] { background: #c1153a; border-color: #c1153a; }
.filter-btn.active[data-status="partial"] { background: var(--partial); border-color: #b45309; }
.filter-btn.active[data-status="not-testable"] { background: var(--not-testable); border-color: var(--not-testable); }

/* Live per-status count badge inside each filter chip (item 407ebac2). */
.filter-btn .chip-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  background: rgba(0,0,0,0.08);
  color: inherit;
}
.filter-btn.active .chip-count { background: rgba(255,255,255,0.28); }

.test-count-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* ===== TEST AREA GROUPS ===== */
.test-area-group {
  margin-bottom: 20px;
}

.test-area-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.test-area-header:hover {
  opacity: 0.8;
}

.test-area-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.test-area-header .area-count {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Per-area "select every test in this subset" checkbox (item ec06ee45). It sits
   inside the collapse-toggling header, so its own click is stopped in the markup.
   Every declaration here was measured in chromium, because two of them look
   redundant and are not:
     - cursor is NOT inherited onto either node. The UA stylesheet sets
       `cursor: default` on both `label` and `input`, and a UA specified value
       beats the header's inherited `cursor: pointer` — drop these two and the
       checkbox shows an arrow while the header around it shows a hand.
     - inline-flex stops the label being blockified into a line box: as a plain
       flex item it grows to 25.6px (font leading) against the 13px checkbox,
       which pushes the header 2.4px taller and rides the box 1.3px above the
       title's centre.
   `align-items` and `flex-shrink` were dropped: with a single 13px child that
   min-width:auto already floors, neither changed a pixel at any viewport. */
.test-area-header .test-area-select {
  display: inline-flex;
  cursor: pointer;
}

.test-area-header .test-area-select-cb {
  cursor: pointer;
}

.test-area-header .area-stats {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.area-stats .mini-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.mini-badge.pass { background: var(--pass-bg); color: var(--pass-ink, #047857); }
.mini-badge.fail { background: var(--fail-bg); color: var(--fail); }
.mini-badge.pending { background: var(--pending-bg); color: var(--pending); }

.collapse-icon {
  transition: transform var(--transition);
  font-size: 12px;
  color: var(--text-secondary);
}

.test-area-group.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

.test-area-group.collapsed .test-list {
  display: none;
}

/* ===== TEST CARDS ===== */
.test-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  transition: var(--transition);
  overflow: hidden;
}

.test-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

.test-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

.test-card-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 120px;
  flex-shrink: 0;
}

.test-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-card-method {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.status-badge.pass { background: #3cc69a; color: #fff; }
.status-badge.fail { background: #c1153a; color: #fff; }
.status-badge.pending { background: #676865; color: #fff; }
.status-badge.partial { background: #faa938; color: #253378; }
.status-badge.not-testable { background: var(--not-testable-bg); color: var(--not-testable); }
.status-badge.executed { background: #5398f6; color: #fff; }
.status-badge.inconclusive { background: #faa938; color: #253378; }
.status-badge.in-progress { background: #5398f6; color: #fff; }
.status-badge.blocked { background: #8a1226; color: #fff; }

/* Status badge as a one-click editor (item 2877ed7a) — click/keyboard opens
   the inline status picker instead of routing every change through Edit. */
.status-badge-btn { cursor: pointer; }
.status-badge-btn:hover { filter: brightness(1.08); }
.status-badge-btn:focus-visible { outline: 2px solid var(--accent, #5398f6); outline-offset: 1px; }

/* Inline status picker popover */
.status-picker-pop {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 8px;
  min-width: 190px;
  /* Cap height and let the option list scroll so the actions row (Save/Cancel)
     stays pinned inside the popover, never pushed below the fold (item 9cae051b). */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 16px);
  overflow: hidden;
}
.status-picker-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #64748b);
  padding: 2px 6px 6px;
  flex-shrink: 0;
}
.status-picker-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.status-picker-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.status-picker-opt:hover { background: var(--bg-secondary, #f1f5f9); }
.status-picker-opt.selected { background: var(--bg-secondary, #eef2ff); box-shadow: inset 0 0 0 1px var(--accent, #5398f6); }
.status-picker-opt:focus-visible { outline: 2px solid var(--accent, #5398f6); outline-offset: -2px; }
.status-picker-cur { font-size: 10px; color: var(--text-secondary, #64748b); }
.status-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}

/* Run-mode picker (item 6dfc76eb): stacks a bold label over a muted hint per
   option; reuses .status-picker-pop/.status-picker-opt layout otherwise. */
.run-mode-pop { min-width: 220px; }
.run-mode-opt { flex-direction: column; align-items: stretch; gap: 1px; }
.run-mode-opt-label { font-weight: 600; }

/* Multi-select bulk actions (item 612f3ccb) */
.test-select-cb { margin-right: 8px; cursor: pointer; flex-shrink: 0; }
.test-card.selected {
  box-shadow: inset 3px 0 0 var(--accent, #5398f6);
  background: var(--bg-secondary, #f4f7ff);
}
.test-select-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  white-space: nowrap;
}
.test-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--bg-secondary, #eef2ff);
  border: 1px solid var(--accent, #5398f6);
  border-radius: 10px;
}
.test-bulk-bar .tbb-count { font-size: 13px; color: var(--text-primary, #1e293b); }
.tbb-status-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.tbb-status-opt:hover { background: var(--bg-secondary, #f1f5f9); }

.test-expand-icon {
  color: var(--text-secondary);
  font-size: 12px;
  transition: transform var(--transition);
}

.test-card.expanded .test-expand-icon {
  transform: rotate(90deg);
}

.test-card-details {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border-light);
}

.test-card.expanded .test-card-details {
  display: block;
}

.detail-section {
  margin-top: 12px;
}

.detail-section h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.detail-section p,
.detail-section li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

/* Free-text fields on the test detail panel (Description, Preconditions, Notes,
   Spec Reference, Data Required, the Test Data rows) come straight from
   textareas, so they carry the line breaks and blank lines the user typed.
   Steps/Expected never showed this bug because they render one <li> per entry
   and so break lines regardless of CSS. This single rule is the mechanism
   for all of them (item 965b46c5) — narrowing it or shadowing it with an inline
   white-space on one field reintroduces the field report. Guarded by
   tests/test_tests_description_whitespace.js. */
.detail-section p {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Same reason, one panel lower: the recorded-runs rows (Actual / Test data /
   Notes) are also textarea-sourced free text, but they render as <div>s inside
   .execution-item, so the .detail-section p rule above cannot reach them. */
.execution-item .run-freetext {
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-section ul {
  list-style: none;
  padding: 0;
}

.detail-section li {
  padding: 3px 0;
  padding-left: 16px;
  position: relative;
}

.detail-section li::before {
  content: '›';
  position: absolute;
  left: 2px;
  color: var(--text-secondary);
  font-weight: 600;
}

.detail-section .validation-item {
  padding-left: 16px;
}

.detail-section .validation-item::before {
  content: '✓';
  color: var(--pass-ink, #047857);
}

.detail-section .config-block {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Evidence thumbnails grid */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.evidence-thumb {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  transition: box-shadow 0.15s, transform 0.15s;
}
.evidence-thumb:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.evidence-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}
.evidence-thumb.evidence-broken img {
  display: none;
}
.evidence-thumb.evidence-broken::before {
  content: '🖼 Not found';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 11px;
  color: var(--text-secondary);
  background: #f8fafc;
}
.evidence-label {
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--border-light);
}

/* Evidence lightbox */
.evidence-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.evidence-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
}
.evidence-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.evidence-lightbox-content img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.evidence-lightbox-caption {
  margin-top: 10px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  max-width: 600px;
}
.evidence-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.evidence-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}

/* ===== ISSUES TABLE ===== */
.issues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.issues-table th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.issues-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.issues-table tr:hover td {
  background: #fafbfc;
}

.severity-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.severity-badge.CRITICAL { background: #fce8ec; color: #c1153a; }
.severity-badge.HIGH { background: #fee8e0; color: #f55819; }
.severity-badge.MEDIUM { background: #fff5e6; color: #faa938; }
.severity-badge.LOW { background: #c6ebdb; color: #2abc87; }

/* ===== DOCUMENTS ===== */
.doc-viewer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 32px;
  line-height: 1.8;
  max-width: 900px;
}

.doc-viewer h1 { font-size: 24px; margin-bottom: 16px; }
.doc-viewer h2 { font-size: 18px; margin: 24px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.doc-viewer h3 { font-size: 15px; margin: 16px 0 8px; }
.doc-viewer p { margin-bottom: 12px; }
.doc-viewer code {
  font-family: 'JetBrains Mono', monospace;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* ===== PLACEHOLDER PANELS ===== */
.placeholder-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.placeholder-panel .icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.placeholder-panel h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.placeholder-panel p {
  font-size: 14px;
  max-width: 400px;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.empty-state .icon { font-size: 36px; margin-bottom: 8px; opacity: 0.4; }
.empty-state h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-state p { font-size: 13px; }

/* ===== EXECUTION TIMELINE ===== */
.execution-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}

.execution-date {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  white-space: nowrap;
}

.execution-status {
  font-weight: 600;
}

.execution-detail {
  color: var(--text-secondary);
  flex: 1;
}

/* ===== VIRTUAL SCROLL ===== */
.test-list-container {
  max-height: none;
}

.test-list-container.paginated .load-more-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.load-more-btn:hover {
  background: var(--partial-bg);
  border-color: var(--accent);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.sidebar ::-webkit-scrollbar-thumb { background: rgba(37,51,120,0.12); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(37,51,120,0.2); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -260px;
    height: 100vh;
    z-index: 200;
    transition: left var(--transition);
  }
  .sidebar.mobile-open { left: 0; }
  .sidebar-backdrop { position:fixed; inset:0; background:rgba(37,51,120,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity 0.2s; }
  .sidebar-backdrop.visible { opacity:1; pointer-events:auto; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .content-area { padding: 16px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-wrapper { min-width: 100%; }
}

/* ===== LOADING ===== */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ===== DASHBOARD EXTRAS ===== */
.type-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.type-card {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition);
}

.type-card:hover {
  border-color: #5398f6;
  background: rgba(83,152,246,0.04);
}

.type-card .type-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.type-card .type-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.type-card .type-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.type-card .type-bar-fill {
  height: 100%;
  background: var(--pass);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Issues summary on dashboard */
.issue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.issue-row:last-child { border-bottom: none; }

.issue-row .issue-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Logo fix */
.header .logo-img, .sidebar .logo-img, img[alt="Veridian"] {
  width: 120px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  border-radius: 0;
}
/* Tiva panel — user-resizable. --tiva-w/--tiva-h are set by chat.js from the
   user's saved size; the defaults here are the original fixed geometry, so a
   user who never drags sees exactly what they saw before. Anchored
   bottom-right, so the panel grows LEFT and UP from its corner. */
.chat-panel{position:fixed;right:24px;bottom:84px;
  width:var(--tiva-w,420px);height:var(--tiva-h,auto);/* Stop below the app header rather than under it: the header sits at a higher
     stacking level, and covering the nav/env selector to read a chat answer is a
     bad trade. --app-header-h is measured at runtime by chat.js. */
  max-height:calc(100vh - 84px - var(--app-header-h,56px) - 12px);max-width:calc(100vw - 48px);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.15);z-index:520;display:none;flex-direction:column;overflow:hidden}
.chat-panel.open{display:flex}
/* Moved by the user: position from the top-left instead of the bottom-right
   corner, so the panel can sit anywhere on screen. */
.chat-panel.floating{right:auto;bottom:auto;left:var(--tiva-x,24px);top:var(--tiva-y,80px)}
.chat-panel .chat-header{cursor:grab;touch-action:none}
.chat-panel.resizing .chat-header{cursor:grabbing}
body.tiva-dragging{user-select:none;cursor:grabbing}
/* While dragging: no text selection, no transition lag, and the iframe/canvas
   under the cursor must not steal the pointer. */
.chat-panel.resizing{user-select:none}
body.tiva-resizing{cursor:nwse-resize;user-select:none}
/* Grab strips, inside the panel's clipped box. Wider than they look so the
   target is forgiving without a visible chrome change. */
.tiva-grip{position:absolute;z-index:6;touch-action:none}
.tiva-grip-l{left:0;top:0;bottom:0;width:8px;cursor:ew-resize}
.tiva-grip-t{left:0;right:0;top:0;height:6px;cursor:ns-resize}
.tiva-grip-c{left:0;top:0;width:18px;height:18px;cursor:nwse-resize;z-index:7}
/* A quiet corner affordance so the panel reads as resizable without shouting. */
.tiva-grip-c::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;
  border-left:2px solid var(--text-dim,#94a3b8);border-top:2px solid var(--text-dim,#94a3b8);
  border-radius:2px 0 0 0;opacity:.45}
.chat-panel:hover .tiva-grip-c::after{opacity:.85}
/* Light header: the panel's one bold element is the Tiva coin — everything
   else is quiet chrome that matches the rest of the app. position:relative
   anchors the ⋯ options popover. */
.chat-header{position:relative;padding:9px 8px 9px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);color:var(--text);border-radius:var(--radius) var(--radius) 0 0}
.chat-ident{display:flex;align-items:center;gap:9px;min-width:0}
.chat-ident-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.chat-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.tiva-coin{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,#232b63,#4180f2);color:#fff;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(35,43,99,.30);user-select:none}
.tiva-coin-lg{width:44px;height:44px;border-radius:14px;font-size:19px}
.chat-tools{display:flex;align-items:center;gap:2px;flex-shrink:0}
.chat-icon-btn{position:relative;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.chat-icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.chat-icon-btn.big{color:var(--blue);background:var(--blue-soft,var(--bg-hover))}
.chat-icon-btn svg{width:15px;height:15px}
/* ⋯ options popover */
.tiva-menu{position:absolute;top:calc(100% + 4px);right:8px;z-index:30;width:232px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.16);padding:10px;display:flex;flex-direction:column;gap:7px}
.tiva-menu[hidden]{display:none}
.tiva-menu-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}
.tiva-menu-select{width:100%;font-size:11.5px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:var(--font)}
.tiva-menu-item{border:none;background:transparent;text-align:left;font-size:11.5px;color:var(--text);padding:6px 8px;border-radius:8px;cursor:pointer;font-family:var(--font)}
.tiva-menu-item:hover{background:var(--bg-hover)}
.tiva-menu-hint{font-size:10px;line-height:1.4;color:var(--text-dim);margin:-2px 0 2px}
/* The transcript takes whatever height the panel has. It used to be capped at
   50vh independently of the panel, so a taller panel just grew dead space —
   and Tiva's answers are now endpoint tables and JSON bodies that need the
   room. min-height:0 is what lets a flex child actually scroll. */
.chat-messages{flex:1 1 auto;min-height:180px;overflow-y:auto;padding:12px 16px}
/* With an explicit panel height every flex child is shrinkable by default, so
   the header, notice and composer got squeezed to slivers. Only the transcript
   may flex; the chrome keeps its natural height. */
.chat-panel > .chat-header,
.chat-panel > .chat-item-bar,
.chat-panel > .chat-drawer,
.chat-panel > .chat-attach-tray,
.chat-panel > .chat-input-wrap{flex:0 0 auto}
/* When the panel has an EXPLICIT height (user resized), the transcript must be
   free to shrink below that floor so the composer is never pushed off. */
.chat-panel[style*="--tiva-h"] .chat-messages{min-height:0}
/* A wider panel should let tables and code use the width, not stay in a
   narrow column sized for chit-chat. */
.chat-panel .chat-msg .chat-bubble{max-width:min(88%, 900px)}
.chat-msg{margin-bottom:12px;display:flex;gap:8px}
.chat-msg.user{flex-direction:row-reverse}
/* Assistant messages carry the Tiva coin; user bubbles have no avatar. The
   layout stays in this rule, the coin look comes from .tiva-coin. */
.chat-msg .chat-avatar{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.chat-msg .chat-bubble{max-width:80%;padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.6;color:var(--text-sec)}
.chat-msg.user .chat-bubble{background:var(--accent-soft);border-bottom-right-radius:4px}
.chat-msg.assistant .chat-bubble{background:var(--bg-input);border-bottom-left-radius:4px}
.chat-msg.assistant .chat-bubble pre{background:var(--bg);padding:6px 8px;border-radius:4px;font-size:11px;overflow-x:auto;margin:4px 0}
.chat-msg.assistant .chat-bubble code{font-family:var(--mono);font-size:11px}
/* A 'system' message is the app reporting on ITSELF (the assistant could not be
   reached), not an answer from Tiva. It gets a warning-toned surface and a bar
   down its leading edge so it cannot be skim-read as an assistant reply — the
   Wayfair incident, where an offline keyword listing in a normal bubble was
   reported as another user's data. Cosmetics are the point here, not decoration. */
.chat-msg.system .chat-avatar{color:var(--warning);font-weight:700;font-size:14px}
.chat-msg.system .chat-bubble{background:var(--bg-secondary);color:var(--text);border:1px solid var(--warning);border-left-width:3px;border-radius:8px}
.chat-msg.system .chat-bubble hr{border:0;border-top:1px solid var(--border);margin:8px 0}
.chat-msg.system .chat-bubble pre{background:var(--bg);padding:6px 8px;border-radius:4px;font-size:11px;overflow-x:auto;margin:4px 0}
.chat-msg.system .chat-bubble code{font-family:var(--mono);font-size:11px}
/* Styled markdown tables — copilot/tiva pipe-tables rendered via chat.js renderMarkdown.
   Standalone class (no existing table rule uses it) so it won't bleed onto other tables. */
.md-styled-table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;border:1px solid var(--border,#e2e8f0);border-radius:8px;overflow:hidden}
.md-styled-table thead th{background:var(--bg,#f5f7fa);color:var(--text,#1a2233);font-weight:600;text-align:left;padding:7px 12px;border-bottom:2px solid var(--border,#e2e8f0)}
.md-styled-table td{padding:7px 12px;border-top:1px solid var(--border,#e2e8f0);vertical-align:top}
.md-styled-table tbody tr:nth-child(even){background:var(--accent-soft,rgba(0,0,0,0.02))}
.md-styled-table th,.md-styled-table td{border-right:1px solid var(--border,#e2e8f0)}
.md-styled-table th:last-child,.md-styled-table td:last-child{border-right:none}
.chat-typing{display:flex;gap:4px;padding:8px 12px}.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:chatBounce .6s infinite alternate}
.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}
.chat-progress{display:none;padding:0 12px 8px;font-size:10.5px;font-style:italic;color:var(--text-dim);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes chatBounce{to{transform:translateY(-4px);opacity:.5}}
.chat-input-wrap{padding:10px 16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;background:var(--bg)}
/* Textarea, not an input: multi-line questions and pasted line breaks survive.
   It grows with the text up to _CHAT_INPUT_MAX_H (chat.js), then scrolls. */
.chat-input{flex:1;border:1px solid var(--border);border-radius:18px;padding:8px 14px;font-size:12px;font-family:var(--font);line-height:1.5;outline:none;color:var(--text);background:var(--bg);resize:none;max-height:120px;overflow-y:auto}
.chat-input.is-multiline{border-radius:12px}

/* ---- Tiva attachments (screenshots + documents) ------------------------- */
/* The tray sits directly above the composer so staged files read as part of the
   message being written, and disappears entirely when nothing is staged. */
.chat-attach-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);cursor:pointer;font-size:13px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.chat-attach-btn svg{width:14px;height:14px}
.chat-send svg{width:14px;height:14px}
.chat-attach-btn:hover{background:var(--bg-page);color:var(--text);border-color:var(--blue)}
.chat-attach-tray{display:none;gap:6px;flex-wrap:wrap;padding:8px 16px 0;background:var(--bg)}
.chat-attach-tray.open{display:flex}
.chat-attach-chip{display:flex;align-items:center;gap:6px;max-width:190px;background:var(--bg-page);border:1px solid var(--border);border-radius:10px;padding:4px 6px 4px 4px;font-size:10.5px;color:var(--text)}
.chat-attach-chip img{width:26px;height:26px;object-fit:cover;border-radius:6px;flex-shrink:0;border:1px solid var(--border)}
.chat-attach-chip .cac-doc{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);font-size:12px}
/* Name over size, never side by side: the children are spans, so they must be
   made block-level or a long filename and its size render on the same line and
   collide. */
.chat-attach-chip .cac-body{min-width:0;line-height:1.25;display:flex;flex-direction:column;overflow:hidden}
.chat-attach-chip .cac-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.chat-attach-chip .cac-size{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim);font-size:9.5px}
.chat-attach-chip.bad .cac-size{color:var(--red,#dc2626)}
.chat-attach-chip .cac-x{border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:12px;padding:0 2px;flex-shrink:0}
.chat-attach-chip .cac-x:hover{color:var(--red,#dc2626)}
.chat-attach-chip.bad{border-color:var(--red,#dc2626);color:var(--red,#dc2626)}
/* Drop target overlay — only while a file is dragged over the panel. */
/* The label has to stay legible over whatever transcript is behind it, so the
   backdrop is the panel surface at high opacity rather than a light tint. */
.chat-drop-hint{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;background:color-mix(in srgb, var(--bg) 88%, var(--blue));border:2px dashed var(--blue);border-radius:inherit;font-size:13px;font-weight:600;color:var(--blue);pointer-events:none}
.chat-panel.dropping .chat-drop-hint{display:flex}
/* Folded audit lists under an answer (tools used, sources). Shut by default —
   the count line is the summary, the chips are one click away. */
.chat-meta-fold{margin:2px 0 0 38px}
.chat-meta-fold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--text-secondary,#64748b);user-select:none}
.chat-meta-fold>summary::-webkit-details-marker{display:none}
.chat-meta-fold>summary::before{content:'\25B8';font-size:9px;color:var(--text-muted,#94a3b8);transition:transform .12s}
.chat-meta-fold[open]>summary::before{transform:rotate(90deg)}
.chat-meta-fold>summary:hover{color:var(--text,#1a2233)}
.chat-meta-fold .cmf-alert{font-weight:600;color:var(--red,#dc2626)}
.chat-meta-fold .cmf-body{padding:2px 0 1px}
/* Launch button for a Co-Pilot session Tiva prepared. */
.chat-launch{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;margin:2px 6px 2px 0}
.chat-launch:hover{opacity:.9}
.chat-launch .cl-mode{font-weight:500;opacity:.8;font-size:10px}
/* Secondary launch (e.g. 'try this one call in the Explorer') — same shape,
   quieter, so the primary action still reads first. */
.chat-launch.chat-launch-alt{background:var(--bg-page,#f1f5f9);color:var(--text,#1a2233);border:1px solid var(--border,#e2e8f0)}
.chat-launch.chat-launch-alt:hover{background:var(--bg,#fff);opacity:1}
.chat-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,0.1)}
.chat-send{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.chat-send:hover{opacity:.9}
.chat-send:disabled{opacity:.4;cursor:default}
/* Narrow viewports: the panel hugs the screen and any saved desktop size is
   ignored (chat.js clamps too, but CSS must hold if JS hasn't run yet). */
@media (max-width: 700px){
  .chat-panel{right:8px;left:8px;bottom:72px;width:auto !important;max-width:none;max-height:calc(100vh - 88px)}
  .tiva-grip{display:none}
}
/* ---- Detached: the chat in its own browser window (item 2312d0c6) ----------
   Two states, mutually exclusive by construction: `detached-host` is the panel
   INSIDE the pop-out (tiva-window.html), `detached-away` is the in-app panel
   while the conversation is over there.
   These sit after the narrow-viewport block on purpose — a pop-out is usually
   under 700px wide, so it matches that media query, and the corner-anchored
   geometry it applies is exactly what a window-filling panel must undo. Width
   is left at `auto` rather than fought with a second !important: a static block
   already fills its container.
   Height is a flex share of the page, NOT 100vh: tiva-window.html can show a
   banner above the panel when the main window has gone, and a hard 100vh under
   `body{overflow:hidden}` pushed the composer off the bottom of the window with
   no way to scroll to it — the error arrived and took the input box with it. */
.chat-panel.detached-host{position:static;top:auto;right:auto;bottom:auto;left:auto;
  width:auto;max-width:none;height:auto;max-height:none;
  flex:1 1 auto;min-height:0;
  border:0;border-radius:0;box-shadow:none}
.chat-panel.detached-host .chat-header{cursor:default;border-radius:0}
/* The placeholder COVERS the panel rather than replacing it: every node the
   chat queries by id stays in the DOM, so bringing the conversation back is a
   class removal, not a rebuild. Hiding every child and re-showing two is
   deliberate — an allow-list of children to hide would silently leak the next
   one added, and the model bar, context meter and follow-ups bar are already
   injected at runtime rather than being in the markup.

   !important, and measured rather than assumed. Without it FOUR children stay
   painted over the placeholder (Chrome, 2026-08-24):
     * #tiva-context, #tiva-followups and .tiva-model-bar are revealed by
       chat.js writing `style.display='block'` — an inline style that no class
       rule can outrank;
     * .chat-item-bar.open and .chat-drawer.open tie this rule's specificity and
       are declared LATER in this file, so source order hands them the win.
   Those are precisely the runtime-shown children a hide-everything rule exists
   to cover, so it has to outrank both. The two re-showing rules are !important
   as well, and win against it on specificity. */
.chat-panel.detached-away > *{display:none !important}
.chat-panel.detached-away > .chat-header{display:flex !important}
.chat-panel.detached-away > .chat-detached-note{display:flex !important}
/* The header stays, so the panel is still recognisably Tiva — but its controls
   act on a conversation that is not here: ✎ would start a new thread AND forget
   the session id the pop-out is reading, ⟳ would open a drawer behind the
   placeholder, ⋯ a menu of layout options for a panel with no layout, ⤢ a
   resize of a box showing one paragraph. The pop-out control stays: while
   detached it focuses the window. */
.chat-panel.detached-away #chat-new-convo,
.chat-panel.detached-away #chat-runs-btn,
.chat-panel.detached-away #chat-menu-btn,
.chat-panel.detached-away #chat-expand{display:none !important}
.chat-detached-note{display:none;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:38px 24px;color:var(--text-dim)}
.chat-detached-note svg{width:26px;height:26px;color:var(--text-muted,#94a3b8)}
.chat-detached-title{margin:0;font-size:13px;font-weight:600;color:var(--text)}
.chat-detached-sub{margin:0;font-size:11.5px;line-height:1.5;max-width:36ch}
/* Thread state lives in the header subtitle — no dedicated strip. */
.chat-thread{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread.active{color:var(--blue)}
/* Hero empty state — replaces the permanent notice strip and the canned
   greeting bubble; gone the moment the first real message lands. */
.chat-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 24px 18px}
.chat-hello-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.chat-hello-sub{font-size:11.5px;line-height:1.6;color:var(--text-dim);max-width:300px}
.chat-hello-chips{display:flex;flex-direction:column;gap:6px;margin-top:4px;width:100%;max-width:280px}
.chat-hello-chip{border:1px solid var(--border);background:var(--bg);border-radius:999px;padding:7px 14px;font-size:11px;font-family:var(--font);color:var(--text-sec);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chat-hello-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft,var(--bg-hover))}
/* Bound-report bar (feedback-chat.js): shown only while the panel is talking
   about one filed bug/suggestion, so the user can always see WHICH report
   their words are being attached to. */
.chat-item-bar{display:none}
.chat-item-bar.open{display:block;border-bottom:1px solid var(--border);background:var(--bg-page)}
.fbc-bar-inner{display:flex;align-items:center;gap:7px;padding:6px 12px}
.fbc-icon{font-size:12px;line-height:1}
.fbc-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;color:var(--blue);white-space:nowrap}
.fbc-title{flex:1;min-width:0;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbc-turns{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);white-space:nowrap}
.fbc-exit{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:12px;line-height:1;padding:0 2px;font-family:inherit}
.fbc-exit:hover{color:var(--text)}
/* Conversation history switcher — collapsed by default, opens under the header */
/* Activity drawer: conversations + background runs behind one pair of tabs. */
.chat-drawer{display:none;border-bottom:1px solid var(--border);background:var(--bg-page)}
.chat-drawer.open{display:block}
.chat-drawer-tabs{display:flex;gap:4px;padding:8px 10px 6px}
.chat-drawer-tab{flex:1;border:none;background:transparent;font-size:11px;font-weight:600;font-family:var(--font);color:var(--text-dim);padding:6px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.chat-drawer-tab:hover{color:var(--text)}
.chat-drawer-tab.active{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chat-history{display:none;max-height:38vh;overflow-y:auto}
.chat-history.open{display:block}
/* Background runs — same drawer pattern as the history list */
.chat-runs{display:none;max-height:44vh;overflow-y:auto}
.chat-runs.open{display:block}
.chat-run-item{padding:8px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.chat-run-item:hover{background:var(--bg-hover)}
.chat-run-top{display:flex;align-items:center;gap:8px}
.chat-run-goal{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-run-id{font-size:10px;color:var(--text-dim);font-weight:500}
.chat-run-status{font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.03em}
.chat-run-status.running{background:#dcfce7;color:#166534}
.chat-run-status.waiting{background:#dbeafe;color:#1e40af}
.chat-run-status.queued{background:#e0e7ff;color:#3730a3}
.chat-run-status.paused{background:#fef9c3;color:#854d0e}
.chat-run-status.done{background:#f1f5f9;color:#334155}
.chat-run-status.failed{background:#fee2e2;color:#991b1b}
.chat-run-status.cancelled{background:#f1f5f9;color:#64748b}
.chat-run-sub{font-size:11px;color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-run-detail{display:none;margin-top:8px}
.chat-run-item.open .chat-run-detail{display:block}
.chat-run-notes{max-height:180px;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:8px;margin:6px 0}
.chat-run-note{font-size:11px;margin-bottom:8px;white-space:pre-wrap;word-break:break-word}
.chat-run-note .when{color:var(--text-dim);font-size:10px;display:block}
.chat-run-note.user-note{color:var(--text-dim);font-style:italic}
.chat-run-approval{background:#fff7ed;border:1px solid #fdba74;border-radius:6px;padding:8px;margin:6px 0;font-size:11px}
[data-theme="dark"] .chat-run-approval{background:#3b2a17;border-color:#9a5b1f}
.chat-run-approval code{font-size:10px;word-break:break-all}
.chat-run-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chat-run-btn{font-size:11px;padding:3px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);cursor:pointer}
.chat-run-btn:hover{background:var(--bg-hover)}
.chat-run-btn.approve{background:#16a34a;border-color:#16a34a;color:#fff}
.chat-run-btn.deny{background:#dc2626;border-color:#dc2626;color:#fff}
.chat-run-steer{display:flex;gap:6px;margin-top:6px}
.chat-run-steer input{flex:1;min-width:0;font-size:11px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text)}
.chat-runs-empty{font-size:11px;color:var(--text-dim);text-align:center;padding:16px}
/* One badge, two homes: beside the glyph on the header Activity button, inline
   on the Background-runs tab. Amber only when a run needs the user's decision. */
.runs-badge{display:inline-block;min-width:14px;padding:0 4px;border-radius:8px;background:var(--blue);color:#fff;font-size:9px;font-weight:800;line-height:14px;text-align:center}
.runs-badge[hidden]{display:none}
.runs-badge.urgent{background:#f59e0b;color:#1f2937}
/* The Activity (⟳) button's badge was a corner overlay — position:absolute,
   top/right 0 — but the button is a 28px square and the glyph inside it is
   15px centred, so the badge covered the icon's top-right quadrant: 6.5px of
   it for a one-digit count, 9px for two, at EVERY panel width (item 8d210e39).
   Lay the button out as a row instead, so the glyph keeps its own box and the
   badge sits next to it behind a real gap. width:auto lets the button grow only
   while there is a count to show and collapse back to the shared 28px square
   the moment _renderRunsBadge sets [hidden] — so the header does not
   permanently reserve space for a badge that is usually absent. */
#chat-runs-btn{width:auto;min-width:28px;padding:0 4px;gap:4px}
#chat-runs-btn .runs-badge{position:static;flex-shrink:0;min-width:13px;padding:0 3px;line-height:13px;font-size:8.5px;border-radius:7px}
.chat-hist-empty{font-size:11px;color:var(--text-dim);text-align:center;padding:16px}
.chat-hist-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.chat-hist-item:hover{background:var(--bg-hover)}
.chat-hist-item.active{background:var(--bg-hover);box-shadow:inset 3px 0 0 var(--blue)}
.chat-hist-body{flex:1;min-width:0}
.chat-hist-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-hist-sub{font-size:10px;color:var(--text-dim);margin-top:1px}
.chat-hist-del{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0}
.chat-hist-del:hover{background:var(--red);color:#fff}

/* Export */
/* The anchor must OWN a stacking level: with z-index:auto, any later sibling
   that forms a stacking context (summary tiles, sticky toggles, transformed
   cards) paints OVER the open menu even though the menu says z-index:300 —
   the owner hit this on the Issues screen 2026-07-14 (and Config Explorer
   before it). 500 sits above content chrome, below drawers/modals. */
.export-wrap{position:relative;display:inline-block;z-index:500}
.export-btn{padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text-sec);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:5px}
.export-btn:hover{border-color:var(--accent);color:var(--accent)}
.export-btn svg{width:14px;height:14px}
.export-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.1);z-index:300;min-width:200px;padding:4px 0}
.export-menu.open{display:block}
.export-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:var(--text-sec);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:var(--font)}
.export-item:hover{background:var(--bg-hover);color:var(--text)}
.export-item .export-icon{font-size:14px;width:20px;text-align:center}
.export-item .export-label{flex:1}
.export-item .export-desc{font-size:10px;color:var(--text-dim)}
.export-sep{height:1px;background:var(--border);margin:4px 0}

/* Comments */
/* Chat Bot FAB */
.chat-btn{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;background:#f55819;color:#fff;border:none;font-size:22px;cursor:pointer;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chat-btn:hover{transform:scale(1.08)}
/* Comment FAB - stacked above chat */
.comment-btn{position:fixed;bottom:86px;right:28px;width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);font-size:18px;cursor:pointer;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.comment-btn:hover{transform:scale(1.08)}
.comment-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.comment-panel{position:fixed;right:24px;bottom:84px;width:380px;max-height:60vh;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.12);z-index:200;display:none;flex-direction:column;overflow:hidden}
.comment-panel.open{display:flex}
.comment-panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.comment-panel-header h3{font-size:13px;font-weight:700;color:var(--text)}
.comment-panel-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--text-muted);padding:4px 8px}
.comment-list{flex:1;overflow-y:auto;padding:12px 16px}
.comment-item{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--bg-page)}
.comment-item:last-child{border-bottom:none}
.comment-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.comment-author{font-size:11px;font-weight:600;color:var(--accent)}
.comment-time{font-size:10px;color:var(--text-dim)}
.comment-context{font-size:10px;color:var(--blue);background:var(--blue-soft);padding:2px 6px;border-radius:3px;margin-bottom:4px;display:inline-block}
.comment-text{font-size:12px;color:var(--text-sec);line-height:1.6}
.comment-delete{background:none;border:none;font-size:10px;color:var(--text-dim);cursor:pointer;padding:2px 4px}
.comment-delete:hover{color:var(--red)}
.comment-form{padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-page)}
.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;font-family:var(--font);background:var(--bg);color:var(--text);outline:none;margin-bottom:6px;resize:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.comment-form button{background:var(--accent-fill);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 14px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font)}
.comment-form button:hover{opacity:.9}
.comment-context-select{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.comment-context-select button{padding:3px 8px;font-size:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-muted);cursor:pointer;font-family:var(--font)}
.comment-context-select button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.comment-empty{text-align:center;padding:30px 20px;color:var(--text-dim);font-size:12px}
.comment-filter{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.comment-filter button{padding:3px 8px;font-size:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-muted);cursor:pointer;font-family:var(--font)}
.comment-filter button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}


/* ========== DASHBOARD TAB ========== */
.dash-header{text-align:center;margin-bottom:24px}
.dash-header h1{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.dash-header .dash-sub{font-size:12px;color:var(--text-muted);display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.dash-header .dash-sub .env-badge{font-size:10px}
.dash-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.dash-ring-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;transition:box-shadow .15s}
.dash-ring-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.dash-ring-card .ring-label{font-size:11px;font-weight:600;color:var(--text-sec);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.dash-ring-card svg.donut{width:80px;height:80px;display:block;margin:0 auto 8px}
.dash-ring-card .ring-counts{font-size:10px;color:var(--text-muted);display:flex;gap:8px;justify-content:center}
.dash-ring-card .ring-counts span{display:flex;align-items:center;gap:3px}
.dash-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.dash-stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center}

/* Fix squished logo.
   :not(.sidebar-mark) because this is about the WORDMARK. Both selectors also
   matched the rail's hexagon mark (same alt text, same parent), and !important
   beats any specificity a sizing rule for the mark could reach — which is how
   the mark once rendered 221px tall under the wordmark in the expanded menu. */
.sidebar-header img:not(.sidebar-mark), .sidebar img[alt="Activate"]:not(.sidebar-mark) {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 0 !important;
}

/* ===== Document Viewer ===== */
.doc-layout { display:flex; gap:0; height:calc(100vh - 120px); }
.doc-toc { width:260px; flex-shrink:0; overflow-y:auto; padding:16px 0; border-right:1px solid var(--border); background:var(--bg-page); position:sticky; top:0; }
.doc-toc .toc-title { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; padding:0 16px 10px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.doc-toc ul { list-style:none; padding:0; margin:0; }
.doc-toc li a { display:block; padding:4px 16px; font-size:12px; color:var(--text-muted); text-decoration:none; border-left:2px solid transparent; line-height:1.5; transition:all .1s; }
.doc-toc li a:hover { color:var(--accent); background:var(--accent-soft); border-left-color:var(--accent); }
.doc-toc li.toc-h2 a { padding-left:16px; }
.doc-toc li.toc-h3 a { padding-left:28px; font-size:11px; color:var(--text-dim); }
.doc-toc li.toc-active a { color:var(--accent); border-left-color:var(--accent); font-weight:600; }

.doc-body { flex:1; overflow-y:auto; padding:24px 40px; background:var(--bg); max-width:900px; line-height:1.7; }
.doc-body h1 { font-size:24px; font-weight:700; margin:32px 0 16px; padding-bottom:8px; border-bottom:2px solid var(--border); }
.doc-body h1:first-child { margin-top:0; }
.doc-body h2 { font-size:20px; font-weight:700; margin:28px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.doc-body h3 { font-size:16px; font-weight:600; margin:24px 0 10px; }
.doc-body h4 { font-size:14px; font-weight:600; color:var(--text-sec); margin:20px 0 8px; }
.doc-body p { font-size:14px; color:var(--text-sec); margin:0 0 12px; }
.doc-body ul, .doc-body ol { padding-left:24px; margin:0 0 12px; }
.doc-body li { font-size:14px; color:var(--text-sec); line-height:1.8; margin:2px 0; }
.doc-body strong { color:var(--text); font-weight:600; }
.doc-body code { font-family:var(--mono); font-size:12px; background:var(--bg-input); padding:2px 6px; border-radius:3px; color:var(--accent); }
.doc-body pre { background:var(--bg-input); border:1px solid var(--border); border-radius:6px; padding:14px 16px; margin:0 0 16px; overflow-x:auto; }
.doc-body pre code { background:none; padding:0; font-size:11px; line-height:1.6; color:var(--text-sec); }
.doc-body blockquote { border-left:3px solid var(--accent); padding:8px 16px; margin:0 0 12px; background:var(--accent-soft); border-radius:0 6px 6px 0; }
.doc-body blockquote p { margin:0; }
.doc-body table { width:100%; border-collapse:collapse; font-size:12px; border:1px solid var(--border); border-radius:6px; margin:0 0 16px; }
.doc-body th { text-align:left; font-size:11px; font-weight:600; padding:8px 12px; border-bottom:2px solid var(--border); background:var(--bg-page); }
.doc-body td { padding:6px 12px; border-bottom:1px solid var(--border); color:var(--text-sec); }
.doc-body tr:hover td { background:var(--bg-hover); }
.doc-body hr { border:none; border-top:1px solid var(--border); margin:24px 0; }
.doc-body a { color:var(--blue); text-decoration:none; }
.doc-body a:hover { text-decoration:underline; }
.doc-body img { max-width:100%; border-radius:6px; }

@media(max-width:768px) {
  .doc-toc { display:none; }
  .doc-body { padding:16px 20px; }
}

/* ===== REQUIREMENTS PAGE ===== */
.req-page { max-width:1200px; }
.req-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.req-header h2 { font-size:20px; font-weight:700; margin:0; }
.req-subtitle { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.req-header-actions { display:flex; gap:8px; align-items:center; }
.btn-primary { background:#f55819; color:#fff; border:none; border-radius:var(--radius-sm); padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); transition:var(--transition); text-transform:uppercase; letter-spacing:0.5px; }
.btn-primary:hover { background:#e04d12; }
.btn-secondary { background:#fff; color:#5398f6; border:1px solid #5398f6; border-radius:var(--radius-sm); padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); transition:var(--transition); text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary:hover { background:rgba(83,152,246,0.06); }

.req-uploads-bar { font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.req-uploads-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.req-upload-chip { display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:12px; }
.req-upload-icon { font-size:14px; }
.req-upload-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.req-upload-size { color:var(--text-secondary); font-size:11px; }
.req-upload-remove { background:none; border:none; cursor:pointer; color:var(--text-secondary); font-size:12px; padding:0 2px; }
.req-upload-remove:hover { color:var(--fail); }

.req-table-wrap { overflow-x:auto; }
.req-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); font-size:13px; }
.req-table thead th { text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); padding:10px 12px; border-bottom:2px solid var(--border); background:var(--border-light); white-space:nowrap; }
.req-table tbody td { padding:8px 12px; border-bottom:1px solid var(--border-light); vertical-align:middle; transition:background-color .3s ease; }
.req-table tbody tr:hover td { background:rgba(83,152,246,0.03); }
/* Item 014f9919 — the row a new requirement lands in (scrolled into view right
   after Add) gets a brief flash so it reads as "here it is", not "did that
   work?" on a long list. Class is added then removed on a timer; the base
   rule's transition above eases the fade both ways. */
.req-table tbody tr.req-row-flash td { background-color:#fef3c7; }
.req-id { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--accent); }
/* Item 3bf67df6 — a bug report's referenceable short id (uuid prefix), shown in
   the Application Feedback bug list + detail header. Monospace so it reads as an
   identifier; user-select:all makes one click select the whole token to copy,
   and clicking it copies the full uuid (see bugs.js copyId). */
.bug-id { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text-secondary); background:var(--border-light); border:1px solid var(--border); border-radius:6px; padding:1px 7px; cursor:pointer; white-space:nowrap; user-select:all; }
.bug-id:hover { color:var(--text); border-color:var(--accent); }
.req-name { outline:none; min-height:20px; }
.req-name:focus { background:rgba(83,152,246,0.05); border-radius:3px; padding:2px 4px; margin:-2px -4px; }
.req-select, .req-status-select { border:1px solid transparent; background:transparent; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; padding:2px 4px; border-radius:4px; }
.req-select:hover, .req-status-select:hover { border-color:var(--border); background:var(--bg); }
.req-trace-input { border:1px solid transparent; background:transparent; font-size:12px; padding:4px 6px; width:100%; font-family:inherit; border-radius:4px; }
.req-trace-input:hover { border-color:var(--border); }
.req-trace-input:focus { border-color:var(--accent); background:var(--bg); outline:none; }

/* Searchable trace picker (item cdf196be): a 🔍 button beside each free-text
   trace field opens a server-backed searchable dropdown of designs/configs/
   tests. The input stays editable as a manual-entry fallback. */
.trace-field { display:flex; align-items:center; gap:4px; width:100%; }
.trace-field > input { flex:1 1 auto; min-width:0; }
.trace-pick-btn { flex:0 0 auto; border:1px solid transparent; background:transparent; cursor:pointer; font-size:12px; line-height:1; padding:3px 5px; border-radius:4px; opacity:0.5; transition:var(--transition); }
.trace-pick-btn:hover { opacity:1; border-color:var(--border); background:var(--bg); }
.trace-picker-pop { position:absolute; width:280px; max-width:90vw; background:var(--bg-card,#fff); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.18); padding:6px; box-sizing:border-box; }
.trace-picker-pop .tp-search { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:12px; font-family:inherit; background:var(--bg,#fff); color:inherit; }
.trace-picker-pop .tp-list { max-height:220px; overflow-y:auto; margin-top:6px; }
.trace-picker-pop .tp-opt { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; }
.trace-picker-pop .tp-opt:hover, .trace-picker-pop .tp-opt.active { background:rgba(83,152,246,0.12); }
.trace-picker-pop .tp-label { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trace-picker-pop .tp-sub { flex:0 0 auto; font-size:10px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; }
.trace-picker-pop .tp-empty { padding:10px 8px; font-size:12px; color:var(--text-secondary); text-align:center; }
.req-delete-btn { background:none; border:none; cursor:pointer; font-size:14px; opacity:0.4; transition:var(--transition); }
.req-delete-btn:hover { opacity:1; }

.req-empty { text-align:center; padding:48px 20px; }
.req-empty-icon { font-size:40px; margin-bottom:12px; }
.req-empty-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:4px; }
.req-empty-text { font-size:13px; color:var(--text-secondary); }
.req-empty-row td { border:none !important; }

.req-footer { display:flex; justify-content:space-between; padding:12px 0; font-size:12px; color:var(--text-secondary); }
.req-count { font-weight:600; }

/* Story multi-select (item 17997f3d) — checkbox column + bulk toolbar, styled
   to sit quietly alongside the story cards (mirrors the requirements table). */
.story-select-cb, #st-select-all-cb { accent-color:var(--accent); margin:0; }
.st-bulk-controls #st-bulk-bar { box-shadow:var(--shadow-sm); }
.st-bulk-controls .btn-secondary { padding:5px 14px; }

/* ===== EXTENSIONS PAGE ===== */
.ext-page { max-width:1000px; }
.ext-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.ext-empty { text-align:center; padding:60px 20px; background:var(--bg-card); border:2px dashed var(--border); border-radius:var(--radius-lg); }
.ext-examples { display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.ext-example-card { background:var(--border-light); border:1px solid var(--border); border-radius:var(--radius); padding:12px 20px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--text-secondary); }
.ext-ex-icon { font-size:18px; }
.ext-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; transition:var(--transition); }
.ext-card:hover { box-shadow:var(--shadow-md); }
.ext-card-header { display:flex; align-items:center; gap:12px; }
.ext-card-icon { font-size:24px; }
.ext-card-info { flex:1; }
.ext-card-name { font-weight:600; font-size:14px; }
.ext-card-meta { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.ext-card-status { margin-top:10px; }
.ext-badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; }
.ext-badge-installed { background:rgba(34,197,94,0.1); color:var(--pass-ink,#047857); }

/* ===== KANBAN / PROJECT MANAGEMENT ===== */
.kb-page { height:calc(100vh - var(--header-height) - 48px); display:flex; flex-direction:column; }
.kb-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:16px; flex-wrap:wrap; flex-shrink:0; }
.kb-header h2 { font-size:20px; font-weight:700; margin:0; }
.kb-subtitle { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.kb-header-actions { display:flex; gap:8px; align-items:center; }
.kb-view-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.kb-view-btn { background:var(--bg-card); border:none; padding:6px 10px; cursor:pointer; font-size:14px; color:var(--text-secondary); }
.kb-view-btn.active { background:var(--accent-fill); color:#fff; }
.kb-view-btn:hover:not(.active) { background:var(--border-light); }

.kb-board { display:flex; gap:12px; flex:1; overflow-x:auto; padding-bottom:8px; }
.kb-column { flex:1; min-width:220px; max-width:320px; background:var(--border-light); border-radius:var(--radius); display:flex; flex-direction:column; }
.kb-col-header { display:flex; align-items:center; gap:8px; padding:12px 14px 10px; }
.kb-col-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.kb-col-label { font-size:13px; font-weight:600; flex:1; }
.kb-col-count { font-size:11px; color:var(--text-secondary); background:var(--bg-card); border-radius:10px; padding:1px 7px; font-weight:600; }
.kb-col-add { background:none; border:none; font-size:18px; color:var(--text-secondary); cursor:pointer; padding:0 4px; line-height:1; }
.kb-col-add:hover { color:var(--accent); }
.kb-col-body { flex:1; overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:8px; min-height:60px; }
.kb-col-dragover { background:rgba(83,152,246,0.08); }

.kb-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; cursor:pointer; transition:var(--transition); }
.kb-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kb-card-dragging { opacity:0.5; }
.kb-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.kb-card-id { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary); }
.kb-card-points { font-size:10px; font-weight:700; color:var(--text-secondary); background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 6px; }
.kb-card-priority { font-size:12px; }
.kb-card-title { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:4px; }
.kb-card-desc { font-size:11px; color:var(--text-secondary); line-height:1.4; margin-bottom:8px; }
.kb-card-bottom { display:flex; justify-content:space-between; align-items:center; }
.kb-card-tags { display:flex; gap:4px; flex-wrap:wrap; }
.kb-card-tag { font-size:10px; background:rgba(83,152,246,0.08); color:#5398f6; padding:2px 6px; border-radius:3px; font-weight:500; }
.kb-card-meta { display:flex; align-items:center; gap:6px; }
.kb-card-avatar { width:22px; height:22px; border-radius:50%; background:var(--accent-fill); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.kb-card-due { font-size:10px; color:var(--text-secondary); }
.kb-card-due.overdue { color:var(--fail); font-weight:600; }

/* Kanban list mode */
.kb-board.kb-list-mode { flex-direction:column; }
.kb-board.kb-list-mode .kb-column { max-width:none; min-width:0; }
.kb-board.kb-list-mode .kb-col-body { flex-direction:row; flex-wrap:wrap; gap:8px; }
.kb-board.kb-list-mode .kb-card { min-width:280px; flex:1; max-width:400px; }

/* Kanban modal */
.kb-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(37,51,120,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
.kb-modal { background:var(--bg-card); border-radius:var(--radius-lg); width:540px; max-width:90vw; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.kb-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.kb-modal-header h3 { font-size:16px; font-weight:700; margin:0; }
.kb-modal-header button { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-secondary); }
.kb-modal-body { padding:20px; }
.kb-field { margin-bottom:14px; }
.kb-field label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.3px; }
.kb-input { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; font-family:inherit; background:var(--bg); color:var(--text); outline:none; }
.kb-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(83,152,246,0.1); }
textarea.kb-input { resize:vertical; }
.kb-field-row { display:flex; gap:12px; }
.kb-field-row .kb-field { flex:1; }
.kb-tag-picker { display:flex; gap:6px; flex-wrap:wrap; }
.kb-tag-opt { font-size:11px; padding:4px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:var(--transition); }
.kb-tag-opt.active { background:rgba(83,152,246,0.1); border-color:var(--accent); color:var(--accent); }
.kb-tag-opt:hover { border-color:var(--accent); }
/* The persona reach figure inside a picker chip ("3 of 20 linked"). Muted and
   set off by a rule so the persona NAME still reads as the label of the chip. */
.kb-tag-reach { margin-left:6px; padding-left:6px; border-left:1px solid var(--border); opacity:0.75; font-variant-numeric:tabular-nums; }
/* ...and the running total + explanation under that picker. A real rule rather
   than inline styles, so theme-luxe.css can restyle it the way it restyles
   .kb-tag-opt — inline declarations would need !important to override. */
.survey-reach-note { margin-top:8px; font-size:12px; color:var(--text-secondary); line-height:1.5; }
.survey-reach-note #as-reach-total { font-weight:600; color:var(--text); }
.kb-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border); }

/* ===== FILES PAGE ===== */
.files-page { max-width:1100px; }
.files-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.files-header h2 { font-size:20px; font-weight:700; margin:0; }
.files-subtitle { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.files-header-actions { display:flex; gap:8px; }

.files-context-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-bottom:20px; }
.files-context-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.files-context-icon { font-size:28px; }
.files-context-title { font-size:16px; font-weight:700; }
.files-context-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.files-context-meta strong { color:var(--text); }
.files-stats-row { display:flex; gap:16px; flex-wrap:wrap; }
.files-stat { flex:1; min-width:100px; background:var(--border-light); border-radius:var(--radius-sm); padding:12px 16px; text-align:center; }
.files-stat-val { font-size:24px; font-weight:700; color:var(--accent); }
.files-stat-label { font-size:11px; color:var(--text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }

.files-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.files-section-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border-light); }
.files-section-header h3 { font-size:14px; font-weight:600; margin:0; }
.files-section-count { font-size:11px; font-weight:600; background:var(--border-light); padding:2px 8px; border-radius:10px; color:var(--text-secondary); }

.files-table-wrap { overflow-x:auto; }
.files-table { width:100%; border-collapse:collapse; font-size:13px; }
.files-table thead th { text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); padding:8px 12px; border-bottom:1px solid var(--border-light); }
.files-table tbody td { padding:8px 12px; border-bottom:1px solid var(--border-light); }
.files-table tbody tr:hover td { background:rgba(83,152,246,0.03); }
.files-table tbody tr:last-child td { border-bottom:none; }
.files-name { font-weight:500; }
.files-type { color:var(--text-secondary); font-size:12px; }
.files-size { color:var(--text-secondary); font-size:12px; font-family:'JetBrains Mono',monospace; }
.files-date { color:var(--text-secondary); font-size:12px; }
/* Document ID — the id Tiva cites. Monospace so an 8-char hex reads cleanly,
   clamped so a long deterministic id (config-spec-<env_id>) can't push the
   Title and action columns off a narrow viewport; the full value stays in the
   title tooltip and on the clipboard.
   130px is measured, not chosen. The Context Notes table's min-content width
   is 656px on main and the wrapper gives it 810px at a 1100px viewport; a
   170px clamp took the table to 850 and started horizontal-scrolling it at a
   width that never scrolled before, where 130px lands on 810 exactly. Below
   900px the table already scrolled on main, and no clamp small enough to
   change that would still show an id. */
.files-id { display:inline-block; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; color:var(--text-secondary); font-size:12px; font-family:var(--mono); cursor:pointer; }
.files-id:hover { color:var(--text); text-decoration:underline dotted; }
.files-id-none, .files-id-none:hover { cursor:default; color:var(--text-secondary); text-decoration:none; }
@media (max-width:900px) { .files-id { max-width:96px; } }

/* ===== Evidence Modal (ev-*) ===== */

/* --- Overlay & Modal Shell --- */
.ev-modal-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; }
.ev-backdrop { position:absolute; inset:0; background:rgba(37,51,120,0.5); backdrop-filter:blur(2px); }
.ev-modal { position:relative; width:95vw; max-width:1200px; max-height:92vh; background:var(--bg-card,#fff); border-radius:var(--radius-lg,12px); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.ev-modal-body { flex:1; overflow-y:auto; min-height:0; }

/* --- Header --- */
.ev-modal-header { display:flex; align-items:center; gap:12px; padding:14px 48px 14px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; position:relative; }
.ev-header-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.ev-header-id { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--accent); background:var(--partial-bg,#e8f0fe); padding:2px 8px; border-radius:4px; }
.ev-header-name { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-header-meta { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; }
.ev-meta-sep { color:var(--border); }
.ev-run-id { font-family:'JetBrains Mono',monospace; font-size:10px; opacity:0.6; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-export-btn { background:var(--accent-fill, #3566e0); color:#fff; border:none; padding:5px 14px; border-radius:var(--radius-sm,4px); font-size:11px; font-weight:700; font-family:var(--font); letter-spacing:0.04em; cursor:pointer; transition:background 0.15s; }
.ev-export-btn:hover { background:var(--accent-hover,#474ecb); }
.ev-close-btn { position:absolute; top:10px; right:14px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-secondary); padding:4px 8px; border-radius:4px; z-index:2; }
.ev-close-btn:hover { background:var(--border-light); color:var(--text); }

/* --- Tabs --- */
.ev-modal-tabs { display:flex; gap:0; padding:0 16px; border-bottom:1px solid var(--border); background:var(--bg-card,#fff); overflow-x:auto; flex-shrink:0; z-index:1; }
.ev-tab { background:none; border:none; padding:10px 16px; font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color 0.15s; text-transform:uppercase; letter-spacing:0.04em; }
.ev-tab:hover { color:var(--text); }
.ev-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* --- Content area --- */
.ev-modal-content { padding:20px; min-height:300px; }

/* --- Badge variants --- */
.ev-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.ev-badge-pass { background:var(--pass-bg,#c6ebdb); color:var(--pass,#3cc69a); }
.ev-badge-fail { background:var(--fail-bg,#fce8ec); color:var(--fail,#c1153a); }
.ev-badge-error { background:var(--fail-bg,#fce8ec); color:var(--fail,#c1153a); }
.ev-badge-partial { background:var(--partial-bg,#e8f0fe); color:var(--partial,#5398f6); }
.ev-badge-pending { background:var(--pending-bg,#f0f0ef); color:var(--pending,#faa938); }
.ev-badge-get { background:#e8f0fe; color:#5398f6; }
.ev-badge-post { background:#c6ebdb; color:#3cc69a; }
.ev-badge-put { background:#f0f0ef; color:#faa938; }
.ev-badge-delete { background:#fce8ec; color:#c1153a; }
.ev-badge-warn, .ev-badge-warning { background:#f0f0ef; color:#faa938; }
.ev-badge-info { background:#e8f0fe; color:#5398f6; }
.ev-badge-log { background:var(--border-light,#f1f5f9); color:var(--text-secondary); }
.ev-badge-debug { background:var(--border-light,#f1f5f9); color:var(--text-secondary); }

/* --- Empty state --- */
.ev-empty { text-align:center; padding:48px 20px; color:var(--text-secondary); }
.ev-empty-icon { font-size:18px; margin-bottom:8px; color:var(--text-secondary); font-weight:300; }
.ev-empty p { font-size:14px; }

/* --- Error text --- */
.ev-error-text { color:var(--fail,#c1153a); font-weight:500; }

/* --- Toggle bar --- */
.ev-toggle-bar { display:flex; gap:4px; margin-bottom:12px; }
.ev-toggle-btn { background:var(--border-light,#f1f5f9); border:1px solid var(--border); padding:5px 12px; border-radius:var(--radius-sm,6px); font-size:12px; cursor:pointer; color:var(--text-secondary); }
.ev-toggle-btn:hover { background:var(--border); }
.ev-toggle-btn.active { background:var(--accent-fill); color:#fff; border-color:var(--accent); }

/* --- Section titles --- */
.ev-section-title { font-size:14px; font-weight:600; margin:20px 0 10px; }
.ev-sub-heading { font-size:12px; font-weight:600; margin:12px 0 6px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }

/* ====== Screenshots Tab ====== */
.ev-capture-legend { font-size:12px; line-height:1.5; color:var(--text-secondary); background:var(--bg,#f8fafc); border:1px solid var(--border); border-radius:var(--radius,8px); padding:10px 14px; margin-bottom:12px; }
.ev-screenshot-timeline { display:flex; flex-direction:column; gap:12px; }
.ev-step-card { border:1px solid var(--border); border-radius:var(--radius,8px); overflow:hidden; background:var(--bg-card); }
.ev-step-card.ev-step-fail { border-color:var(--fail,#c1153a); }
.ev-step-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg,#f8fafc); border-bottom:1px solid var(--border); }
.ev-step-num { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--accent); min-width:72px; }
.ev-step-action { font-size:13px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-screenshot-wrap { cursor:pointer; padding:8px; text-align:center; background:var(--border-light,#f1f5f9); }
.ev-screenshot-wrap img { max-width:100%; max-height:400px; border-radius:4px; box-shadow:var(--shadow-sm); }
.ev-screenshot-wrap:hover img { box-shadow:var(--shadow-md); }
.ev-img-placeholder { padding:40px; color:var(--text-secondary); font-size:13px; }
.ev-step-error { padding:8px 14px; font-size:12px; color:var(--fail); background:var(--fail-bg); }
.ev-step-timing { padding:6px 14px; font-size:11px; color:var(--text-secondary); border-top:1px solid var(--border); }

/* ====== Transcript Tab + pool-session Outcome ====== */
.ev-transcript { display:flex; flex-direction:column; gap:8px; }
.ev-msg { border:1px solid var(--border); border-radius:var(--radius,8px); background:var(--bg-card); padding:8px 12px; max-width:100%; }
.ev-msg-head { display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:4px; color:var(--text-secondary); }
.ev-msg-role { font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.ev-msg-name { font-family:'JetBrains Mono',monospace; }
.ev-msg-at { margin-left:auto; font-family:'JetBrains Mono',monospace; }
.ev-msg-text { font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.ev-msg-user { background:var(--bg,#f8fafc); }
.ev-msg-assistant { border-left:4px solid var(--accent,#253378); }
.ev-msg-action, .ev-msg-tool { padding:6px 12px; }
.ev-msg-action .ev-msg-text, .ev-msg-tool .ev-msg-text, .ev-msg-fold summary { font-family:'JetBrains Mono',monospace; font-size:11.5px; }
.ev-msg-system { color:var(--text-secondary); background:var(--border-light,#f1f5f9); }
.ev-msg-system .ev-msg-text { font-size:12px; }
.ev-msg-error { border-color:var(--fail,#c1153a); }
.ev-msg-fold summary { cursor:pointer; color:var(--text-secondary); list-style:none; }
.ev-msg-fold summary::before { content:"▸ "; }
.ev-msg-fold[open] summary::before { content:"▾ "; }
.ev-msg-fold[open] summary { margin-bottom:6px; }
.ev-session-report { font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; border:1px solid var(--border); border-radius:var(--radius,8px); padding:10px 12px; background:var(--bg-card); }
.ev-session-facts { border-collapse:collapse; font-size:12px; }
.ev-session-facts th { text-align:left; padding:4px 14px 4px 0; color:var(--text-secondary); font-weight:600; white-space:nowrap; }
.ev-session-facts td { padding:4px 0; font-family:'JetBrains Mono',monospace; word-break:break-all; }
.ev-empty-inline { color:var(--text-secondary); }

/* Screenshot lightbox */
.ev-screenshot-lightbox { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; }
.ev-screenshot-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.8); }
.ev-screenshot-content { position:relative; max-width:95vw; max-height:95vh; }
.ev-screenshot-content img { max-width:95vw; max-height:90vh; border-radius:8px; box-shadow:0 0 40px rgba(0,0,0,0.4); }
.ev-screenshot-caption { text-align:center; color:#fff; font-size:13px; margin-top:8px; }
.ev-screenshot-close { position:absolute; top:-10px; right:-10px; background:rgba(0,0,0,0.7); color:#fff; border:none; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ev-screenshot-close:hover { background:var(--fail); }

/* ====== Screen State Tab ====== */
.ev-accordion { display:flex; flex-direction:column; gap:4px; }
.ev-accordion-item { border:1px solid var(--border); border-radius:var(--radius-sm,6px); overflow:hidden; }
.ev-accordion-header { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; background:var(--bg,#f8fafc); }
.ev-accordion-header:hover { background:var(--border-light); }
.ev-acc-arrow { font-size:10px; color:var(--text-secondary); transition:transform 0.15s; }
.ev-accordion-item.open .ev-acc-arrow { transform:rotate(90deg); }
.ev-acc-title { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-accordion-body { display:none; padding:12px 14px; border-top:1px solid var(--border); }
.ev-accordion-item.open .ev-accordion-body { display:block; }
.ev-state-table { width:100%; font-size:12px; border-collapse:collapse; }
.ev-state-table td { padding:4px 8px; border-bottom:1px solid var(--border-light); vertical-align:top; }
.ev-state-label { font-weight:500; color:var(--text-secondary); width:120px; white-space:nowrap; }
.ev-button-list { display:flex; gap:6px; flex-wrap:wrap; }
.ev-btn-tag { font-size:11px; padding:3px 10px; border-radius:4px; background:var(--border-light,#f1f5f9); border:1px solid var(--border); }
.ev-btn-disabled { opacity:0.4; text-decoration:line-through; }
.ev-popup-notice { margin-top:8px; padding:8px 12px; background:var(--pending-bg); border:1px solid var(--pending); border-radius:var(--radius-sm); font-size:12px; color:var(--pending); }

/* ====== Network Tab ====== */
.ev-network-summary { display:flex; gap:20px; padding:10px 14px; background:var(--bg,#f8fafc); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:12px; font-size:13px; }
.ev-network-waterfall { display:flex; flex-direction:column; gap:2px; }
.ev-network-entry { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.ev-network-row { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:12px; }
.ev-network-row:hover { background:var(--border-light); }
.ev-network-url { flex:1; font-family:'JetBrains Mono',monospace; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-network-status { font-family:'JetBrains Mono',monospace; font-weight:600; min-width:32px; text-align:center; }
.ev-status-ok { color:var(--pass-ink,#047857); }
.ev-status-warn { color:var(--pending); }
.ev-status-error { color:var(--fail); }
.ev-network-duration { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-secondary); min-width:60px; text-align:right; }
.ev-network-step { font-size:10px; color:var(--text-secondary); min-width:48px; text-align:right; }
.ev-network-details { display:none; padding:12px; border-top:1px solid var(--border); background:var(--bg); }
.ev-network-entry.expanded .ev-network-details { display:block; }
.ev-detail-block { margin-bottom:10px; }
.ev-detail-block h5 { font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.4px; }
.ev-detail-block pre { font-size:11px; font-family:'JetBrains Mono',monospace; background:var(--bg-card); border:1px solid var(--border); border-radius:4px; padding:8px; overflow-x:auto; max-height:300px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; }

/* ====== Console Tab ====== */
.ev-console-summary { display:flex; gap:16px; padding:8px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:12px; font-size:13px; }
.ev-console-log { display:flex; flex-direction:column; gap:2px; }
.ev-console-entry { display:flex; align-items:flex-start; gap:8px; padding:6px 12px; font-size:12px; border-radius:4px; }
.ev-console-error { background:var(--fail-bg); }
.ev-console-warn, .ev-console-warning { background:var(--pending-bg); }
.ev-console-text { flex:1; font-family:'JetBrains Mono',monospace; font-size:11px; word-break:break-all; }
.ev-console-source { font-size:10px; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-console-step { font-size:10px; color:var(--text-secondary); min-width:48px; text-align:right; }

/* ====== DOM Tab ====== */
.ev-dom-controls { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ev-dom-controls label { font-size:13px; font-weight:500; }
.ev-dom-select { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; background:var(--bg-card); }
.ev-dom-frame-wrap { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.ev-dom-frame { width:100%; height:500px; border:none; }

/* ====== Timing Tab ====== */
.ev-timing-summary { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.ev-timing-stat { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; text-align:center; min-width:120px; }
.ev-timing-value { display:block; font-size:18px; font-weight:700; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.ev-timing-label { font-size:11px; color:var(--text-secondary); text-transform:uppercase; }
.ev-timing-chart { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.ev-timing-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.ev-timing-step { min-width:48px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-secondary); }
.ev-timing-action-label { min-width:100px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.ev-timing-bar-wrap { flex:1; height:18px; background:var(--border-light); border-radius:4px; display:flex; overflow:hidden; }
.ev-timing-bar { height:100%; transition:width 0.3s; }
.ev-timing-bar-action { background:var(--accent,#5398f6); }
.ev-timing-bar-network { background:var(--pass,#3cc69a); }
.ev-timing-ms { min-width:60px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-secondary); }
.ev-timing-legend { display:flex; gap:16px; font-size:11px; color:var(--text-secondary); margin-bottom:16px; }
.ev-legend-swatch { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.ev-legend-action { background:var(--accent,#5398f6); }
.ev-legend-network { background:var(--pass,#3cc69a); }
.ev-timing-table { width:100%; font-size:12px; border-collapse:collapse; }
.ev-timing-table th { text-align:left; padding:6px 8px; background:var(--bg); border-bottom:2px solid var(--border); font-weight:600; font-size:11px; text-transform:uppercase; color:var(--text-secondary); }
.ev-timing-table td { padding:6px 8px; border-bottom:1px solid var(--border-light); }
.ev-mono { font-family:'JetBrains Mono',monospace; font-size:11px; }

/* ====== Diff Tab ====== */
.ev-diff-view { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.ev-diff-pane { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.ev-diff-title { padding:8px 12px; font-size:12px; font-weight:600; background:var(--bg); border-bottom:1px solid var(--border); }
.ev-diff-pane .ev-json-viewer { margin:0; border:none; border-radius:0; max-height:400px; overflow:auto; font-size:11px; padding:10px; }
.ev-diff-changes { font-family:'JetBrains Mono',monospace; font-size:11px; }
.ev-diff-added { background:#c6ebdb; color:#2abc87; padding:2px 8px; border-left:3px solid var(--pass); }
.ev-diff-removed { background:#fce8ec; color:#c1153a; padding:2px 8px; border-left:3px solid var(--fail); }
.ev-diff-changed { background:#f0f0ef; color:#faa938; padding:2px 8px; border-left:3px solid var(--pending); }
.ev-diff-no-changes { text-align:center; color:var(--text-secondary); font-size:13px; padding:16px; }

/* ====== JSON Viewer ====== */
.ev-json-viewer { font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; line-height:1.5; }
.ev-json-key { color:var(--primary,#253378); font-weight:500; }
.ev-json-string { color:#2abc87; }
.ev-json-number { color:var(--accent,#5398f6); }
.ev-json-bool { color:#faa938; }
.ev-json-null { color:var(--text-secondary); }

/* ====== Per-step editor in the Add/Edit Test modal (item 37a740f4) ======
   One input per step, numbered from its position — the tester never types or
   maintains the numbering. The number is a fixed-width badge so the inputs keep
   one left edge from step 1 through step 10 and beyond. */
.test-step-rows { display:flex; flex-direction:column; gap:6px; }
/* flex-start, not center (item 8e8fd8c3): a step with four expected results
   makes its row tall, and centring would float the step input and the ✕ in the
   middle of it, away from the row they belong to. */
.test-step-row { display:flex; align-items:flex-start; gap:8px; }
.test-step-num { flex:0 0 26px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px;
  font-weight:600; color:var(--text-secondary); background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-sm,6px); padding:4px 0; }
/* Drag to reorder (item 2de596df). The BADGE is the grab handle, not the row —
   see the comment in tests.js: a draggable row takes the pointer away from the
   step's own text boxes, so the tester could no longer select a word of it.
   user-select stops the gesture painting the digit blue on the way past. */
.test-step-num { cursor:grab; user-select:none; -webkit-user-select:none; }
.test-step-num:active { cursor:grabbing; }
/* The dragged row stays where it is and dims. The list deliberately does not
   reflow under the pointer — the drop line is the only thing that moves. */
.test-step-row.test-step-dragging { opacity:.45; }
/* The drop line lives in the 6px gap between rows, drawn as an OUTER box-shadow
   rather than a border so that showing it shifts nothing. */
.test-step-row.test-step-drop-before { box-shadow:0 -2px 0 var(--accent); }
.test-step-row.test-step-drop-after { box-shadow:0 2px 0 var(--accent); }
/* A textarea rather than an input since item f37aade7, so a long step stays
   readable while it is edited. Height is set per box from its scrollHeight.
   overflow:auto, NOT hidden — the sizer clamps at a share of the viewport, so a
   very long value genuinely has more text than the box shows, and hiding the
   scrollbar there would leave it unreachable with no affordance at all: the
   reported symptom, reintroduced. Below the clamp the box is exactly as tall as
   its text and no scrollbar appears. resize:vertical still lets it be dragged,
   and a dragged box keeps the height the user chose. */
.test-step-text { flex:1 1 0; min-width:0; padding:7px 10px; border:1px solid var(--border);
  border-radius:var(--radius,8px); font-size:12px; font-family:inherit; box-sizing:border-box;
  background:var(--bg-card); color:var(--text); line-height:1.45; overflow:auto;
  resize:vertical; display:block; }
.test-step-text:focus { outline:none; border-color:var(--accent); }
/* The expected-result column (item 8e8fd8c3). Same flex basis as the step input
   so the two read as an even pair of columns whatever the dialog is scaled to,
   and its own vertical stack because a step may expect several things. */
/* Slightly wider basis than the step input, not equal — this column also holds
   the per-result delete button, so an equal basis leaves the TEXT boxes
   visibly uneven. Matches the v2 twin. */
.test-step-exp { flex:1.2 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* flex-start, not center: an expected result that wraps to three lines would
   otherwise float its ✕ in the middle of them. */
.test-step-exp-row { display:flex; align-items:flex-start; gap:4px; }
/* overflow:auto for the same reason as .test-step-text above — a value held at
   the clamp has to stay reachable. */
.test-step-exp-text { flex:1 1 0; min-width:0; padding:7px 10px; border:1px solid var(--border);
  border-radius:var(--radius,8px); font-size:12px; font-family:'JetBrains Mono',monospace;
  box-sizing:border-box; background:var(--bg-card); color:var(--text); line-height:1.45;
  overflow:auto; resize:vertical; display:block; }
.test-step-exp-text:focus { outline:none; border-color:var(--accent); }
.test-step-exp .test-step-exp-add { align-self:flex-start; font-size:10px; padding:2px 6px;
  color:var(--text-secondary); }
.test-step-ops { display:flex; align-items:center; gap:4px; }
/* The column headings above the rows — without them the second box is just an
   unexplained input, and the placeholder alone is gone the moment it is typed in. */
.test-step-head { display:flex; gap:8px; padding:0 0 4px 34px; font-size:10px; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; }
.test-step-head-step, .test-step-head-exp { flex:1 1 0; min-width:0; }
/* The arrows, the ✕ and the add button keep their own width: a flex row would
   otherwise shrink them until the labels wrapped mid-word as steps are added. */
.test-step-row .a-btn, .test-step-add { flex:0 0 auto; padding:4px 8px; white-space:nowrap; }
.test-step-row .a-btn.test-step-del, .test-step-row .a-btn.test-step-exp-del { color:var(--fail,#c1153a); }
/* Disable a step without deleting or moving it (item aec18c6e). The row stays
   in place and fully editable — only its number, text and expected results
   dim, so it still reads as "here, but skipped" rather than "gone". */
.test-step-row-disabled .test-step-num, .test-step-row-disabled .test-step-text,
.test-step-row-disabled .test-step-exp { opacity:.5; }
.test-step-row-disabled .test-step-text { text-decoration:line-through; text-decoration-color:var(--text-secondary); }
/* Carries the expand panel's refusals ("this JSON cannot be put back on one
   line"). It used to also carry the steps/expected pairing warning, which item
   8e8fd8c3 removed along with the flat list the pairing was against. */
.test-step-warn { font-size:10px; line-height:1.45; margin-top:6px; padding:6px 9px;
  border-radius:var(--radius-sm,6px); background:var(--partial-bg,rgba(217,119,6,.1));
  border:1px solid var(--pending,#d97706); color:var(--pending,#d97706); }

/* The read-only Steps list on the detail panel numbers ITSELF (item 37a740f4):
   the ordinals used to be typed into the stored text, and the editor no longer
   keeps them there. Overrides the chevron .detail-section li::before draws —
   the v2 layout already numbers its Script tab with a `twstep` counter. */
.detail-section ol.detail-step-list { list-style:none; padding:0; counter-reset:dstep; }
.detail-section ol.detail-step-list li { counter-increment:dstep; padding-left:24px; }
.detail-section ol.detail-step-list li::before {
  content:counter(dstep) '.'; left:2px; font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--text-secondary); font-weight:600; }

/* ====== Evidence indicator on test cards ====== */
.ev-indicator { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--accent); background:var(--partial-bg,#e8f0fe); padding:2px 7px; border-radius:4px; cursor:pointer; margin-left:6px; }
.ev-indicator:hover { background:var(--accent-fill); color:#fff; }
.ev-view-btn { display:inline-flex; align-items:center; gap:4px; background:var(--accent-fill); color:#fff; border:none; padding:6px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; cursor:pointer; margin-top:8px; }
.ev-view-btn:hover { background:var(--accent-light); }

/* ====== Responsive ====== */
/* ====== Assertions Tab ====== */
.ev-assertions-summary { background:var(--bg,#f8fafc); border:1px solid var(--border); border-radius:var(--radius-sm,6px); padding:14px 18px; margin-bottom:16px; }
.ev-assertions-summary-header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.ev-assertions-counts { display:flex; gap:12px; font-size:13px; font-weight:500; }
.ev-acount-pass { color:var(--pass,#3cc69a); }
.ev-acount-fail { color:var(--fail,#c1153a); }
.ev-acount-inconclusive { color:var(--pending,#faa938); }
.ev-assertions-meta { font-size:12px; color:var(--text-secondary); margin-left:auto; }
.ev-assertions-meta strong { color:var(--text); }
.ev-assertions-progress { height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; display:flex; }
.ev-aprog-pass { background:var(--pass,#3cc69a); height:100%; transition:width 0.3s; }
.ev-aprog-fail { background:var(--fail,#c1153a); height:100%; transition:width 0.3s; }
.ev-aprog-inconclusive { background:var(--pending,#faa938); height:100%; transition:width 0.3s; }

.ev-assertion-list { display:flex; flex-direction:column; gap:10px; }
.ev-assertion-card { border:1px solid var(--border); border-radius:var(--radius,8px); overflow:hidden; background:var(--bg-card); transition:border-color 0.15s; }
.ev-assertion-card.pass { border-left:4px solid var(--pass,#3cc69a); }
.ev-assertion-card.fail { border-left:4px solid var(--fail,#c1153a); }
.ev-assertion-card.inconclusive { border-left:4px solid var(--pending,#faa938); }
.ev-assertion-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg,#f8fafc); border-bottom:1px solid var(--border-light); }
.ev-assertion-num { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--text-secondary); min-width:28px; }
.ev-assertion-text { flex:1; font-size:13px; font-weight:500; color:var(--text); }
.ev-assertion-body { padding:10px 14px; }
.ev-assertion-reasoning { font-size:12px; color:var(--text-secondary); line-height:1.6; margin-bottom:8px; }
.ev-assertion-meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ev-assertion-evidence-ref { font-size:11px; color:var(--accent); font-family:'JetBrains Mono',monospace; max-width:400px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ev-confidence-badge { display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:0.3px; }
.ev-confidence-badge.high { background:var(--pass-bg,#c6ebdb); color:var(--pass,#3cc69a); }
.ev-confidence-badge.medium { background:var(--partial-bg,#e8f0fe); color:var(--partial,#5398f6); }
.ev-confidence-badge.low { background:var(--pending-bg,#f0f0ef); color:var(--pending,#faa938); }

.ev-evidence-type-badge { display:inline-block; font-size:10px; font-weight:500; padding:2px 7px; border-radius:10px; background:var(--border-light,#f1f5f9); color:var(--text-secondary); }

.ev-awaiting-validation { text-align:center; padding:48px 20px; color:var(--text-secondary); }
.ev-awaiting-validation .ev-empty-icon { font-size:18px; margin-bottom:12px; color:var(--text-secondary); }
.ev-awaiting-validation h4 { font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px; }
.ev-awaiting-validation p { font-size:13px; max-width:500px; margin:0 auto 16px; }
.ev-pending-validations { text-align:left; max-width:500px; margin:0 auto; background:var(--bg,#f8fafc); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; }
.ev-pending-validations h5 { font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.ev-pending-validations ul { list-style:none; padding:0; }
.ev-pending-validations li { font-size:12px; padding:3px 0; padding-left:14px; position:relative; }
.ev-pending-validations li::before { content:'○'; position:absolute; left:0; color:var(--pending); }

/* Assertion chip on test cards */
.ev-assertion-chip { display:inline-flex; align-items:center; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; background:var(--partial-bg,#e8f0fe); color:var(--accent); font-family:'JetBrains Mono',monospace; margin-left:4px; }

/* Badge variants for executed/inconclusive in evidence modal */
.ev-badge-executed { background:#e8f0fe; color:#5398f6; }
.ev-badge-inconclusive { background:#f0f0ef; color:#faa938; }

@media (max-width:1024px) {
  .ev-modal { max-width:98vw; max-height:96vh; }
  .ev-diff-view { grid-template-columns:1fr; }
  .ev-timing-summary { flex-direction:column; gap:8px; }
  .ev-timing-stat { min-width:auto; }
}

/* ===== Pipeline Status Bar (pl-*) ===== */

/* -- Compact inline pipeline dots (header) -- */
.pl-compact { display:inline-flex; align-items:center; gap:2px; margin-left:6px; }
.pl-dot { width:8px; height:8px; border-radius:50%; background:var(--border,#e2e8f0); flex-shrink:0; transition:background 0.15s; }
.pl-dot.success { background:var(--pass,#3cc69a); }
.pl-dot.error { background:var(--fail,#c1153a); }
.pl-dot.pending { background:var(--border,#e2e8f0); }
.pl-dot.skipped { background:var(--border,#e2e8f0); }
.pl-dot.inconclusive { background:var(--pending,#faa938); }
.pl-dot-sep { width:4px; height:1px; background:var(--border,#e2e8f0); flex-shrink:0; }
.pl-dot-label { font-size:8px; color:var(--text-secondary); font-weight:600; letter-spacing:-0.2px; }

/* -- Expanded pipeline detail (inside card) -- */
.pl-bar { display:flex; align-items:stretch; gap:0; margin:12px 0 8px; }
.pl-phase { flex:1; border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-sm,6px); padding:10px 12px; text-align:center; min-width:0; position:relative; transition:border-color 0.15s; }
.pl-phase.success { border-color:var(--pass,#3cc69a); }
.pl-phase.error { border-color:var(--fail,#c1153a); }
.pl-phase.pending { border-color:var(--border,#e2e8f0); }
.pl-phase.skipped { border-color:var(--border,#e2e8f0); opacity:0.5; }
.pl-phase.inconclusive { border-color:var(--pending,#faa938); }
.pl-phase-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-secondary); margin-bottom:4px; }
.pl-phase-status { font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:4px; }
.pl-phase.success .pl-phase-status { color:var(--pass,#3cc69a); }
.pl-phase.error .pl-phase-status { color:var(--fail,#c1153a); }
.pl-phase.pending .pl-phase-status { color:var(--text-secondary); }
.pl-phase.inconclusive .pl-phase-status { color:var(--pending,#faa938); }
.pl-phase-summary { font-size:10px; color:var(--text-secondary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-connector { display:flex; align-items:center; justify-content:center; width:24px; flex-shrink:0; color:var(--border,#e2e8f0); font-size:14px; font-weight:600; }

/* -- Pipeline detail section title -- */
.pl-section-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); margin-bottom:4px; }

@media (max-width:600px) {
  .pl-bar { flex-direction:column; gap:6px; }
  .pl-connector { width:auto; height:16px; transform:rotate(90deg); }
  .pl-compact { display:none; }
}

/* ===== PROJECT PLAN (Gantt) ===== */
.pp-page { height:calc(100vh - var(--header-height) - 48px); display:flex; flex-direction:column; }
.pp-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:16px; flex-wrap:wrap; flex-shrink:0; }
.pp-header h2 { font-size:20px; font-weight:700; margin:0; }
.pp-subtitle { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.pp-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pp-view-toggle, .pp-zoom-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.pp-view-btn, .pp-zoom-btn { background:var(--bg-card); border:none; padding:5px 12px; cursor:pointer; font-size:12px; font-weight:500; color:var(--text-secondary); font-family:inherit; }
.pp-view-btn.active, .pp-zoom-btn.active { background:var(--accent-fill); color:#fff; }
.pp-view-btn:hover:not(.active), .pp-zoom-btn:hover:not(.active) { background:var(--border-light); }

.pp-container { display:flex; flex:1; overflow:hidden; gap:0; }
.pp-container.pp-table-only .pp-gantt-wrap { display:none; }

/* Width is set inline per-render from the persisted split (see project-plan.js
   tableWidth/attachSplitHandle) — this 580px is just the first-load default,
   used before JS applies the saved/dragged flex-basis. */
.pp-table { flex-shrink:0; width:580px; min-width:360px; max-width:900px; overflow-y:auto; border-right:2px solid var(--border); }

/* Drag gutter between the task list and the Gantt chart. */
.pp-split-handle { flex:0 0 6px; align-self:stretch; cursor:col-resize; display:flex; align-items:center; justify-content:center; background:var(--border-light); }
.pp-split-handle:hover, .pp-split-handle:active { background:var(--accent); }
.pp-split-grip { width:2px; height:32px; border-radius:2px; background:var(--border); pointer-events:none; }
.pp-split-handle:hover .pp-split-grip, .pp-split-handle:active .pp-split-grip { background:#fff; }
.pp-table-header { display:flex; align-items:center; background:var(--border-light); border-bottom:2px solid var(--border); position:sticky; top:0; z-index:2; }
.pp-th { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); padding:8px 6px; white-space:nowrap; }
.pp-col-name { flex:2; min-width:180px; padding-left:12px; }
.pp-col-start, .pp-col-end { width:70px; flex-shrink:0; }
.pp-col-dur { width:40px; flex-shrink:0; text-align:center; }
.pp-col-progress { width:60px; flex-shrink:0; text-align:center; }
.pp-col-status { width:80px; flex-shrink:0; }
.pp-col-owner { width:70px; flex-shrink:0; }
.pp-col-deps { width:45px; flex-shrink:0; }

.pp-row { display:flex; align-items:center; height:36px; border-bottom:1px solid var(--border-light); cursor:pointer; transition:background 0.1s; }
.pp-row:hover { background:rgba(83,152,246,0.04); }
.pp-row-phase { background:var(--border-light); font-weight:600; }
.pp-row-phase:hover { background:rgba(83,152,246,0.08); }
.pp-row-milestone .pp-task-name { font-style:italic; }
.pp-row-highlight { background:rgba(83,152,246,0.12) !important; transition:background 0.3s; }
.pp-td { font-size:12px; padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-td.pp-col-name { display:flex; align-items:center; gap:4px; flex:2; min-width:180px; }
.pp-td.pp-col-start, .pp-td.pp-col-end { width:70px; flex-shrink:0; color:var(--text-secondary); font-size:11px; }
.pp-td.pp-col-dur { width:40px; flex-shrink:0; text-align:center; color:var(--text-secondary); font-size:11px; }
.pp-td.pp-col-progress { width:60px; flex-shrink:0; display:flex; align-items:center; gap:4px; }
.pp-td.pp-col-status { width:80px; flex-shrink:0; }
.pp-td.pp-col-owner { width:70px; flex-shrink:0; font-size:11px; color:var(--text-secondary); }
.pp-td.pp-col-deps { width:45px; flex-shrink:0; font-size:11px; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }

.pp-collapse-icon { font-size:8px; color:var(--text-secondary); transition:transform 0.15s; cursor:pointer; flex-shrink:0; width:12px; text-align:center; }
.pp-milestone-icon { font-size:10px; color:var(--accent); flex-shrink:0; }
.pp-task-name { overflow:hidden; text-overflow:ellipsis; }

.pp-progress-mini { width:32px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; flex-shrink:0; }
.pp-progress-fill { height:100%; border-radius:2px; transition:width 0.3s; }
.pp-progress-text { font-size:10px; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }

.pp-status-badge { font-size:10px; font-weight:600; padding:2px 6px; border-radius:3px; text-transform:capitalize; white-space:nowrap; }

/* Gantt chart */
.pp-gantt-wrap { flex:1; overflow-x:auto; overflow-y:auto; position:relative; }
.pp-gantt { position:relative; min-height:100%; }
.pp-gantt-header { position:sticky; top:0; z-index:2; background:var(--bg); border-bottom:2px solid var(--border); }
.pp-timeline-months { display:flex; border-bottom:1px solid var(--border-light); }
.pp-month-label { font-size:11px; font-weight:600; color:var(--text-secondary); padding:6px 8px; border-right:1px solid var(--border-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-timeline-days { display:flex; }
.pp-day-cell { font-size:9px; color:var(--text-secondary); text-align:center; padding:2px 0; border-right:1px solid rgba(226,232,240,0.3); }
.pp-day-cell.pp-week-start { border-right:1px solid var(--border); }

.pp-gantt-body { position:relative; }
.pp-gantt-row { height:36px; position:relative; border-bottom:1px solid var(--border-light); }
.pp-gantt-bar { position:absolute; top:10px; height:16px; }
.pp-gantt-bar-fill { height:100%; }
.pp-gantt-phase-bar { position:absolute; top:12px; height:12px; }
.pp-gantt-milestone { position:absolute; top:8px; font-size:16px; }

/* Phase color legend + picker — a toolbar dropdown (same open/close idiom as
   .export-wrap/.export-menu) instead of a strip between the table and Gantt. */
.pp-legend-wrap { position:relative; display:inline-block; }
.pp-legend-btn { padding:5px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; }
.pp-legend-btn:hover { border-color:var(--accent); color:var(--accent); }
.pp-legend-panel { display:none; position:absolute; right:0; top:calc(100% + 4px); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,0.1); z-index:300; min-width:200px; padding:10px 12px; }
.pp-legend-panel.open { display:block; }
.pp-legend { display:flex; flex-direction:column; gap:8px; padding:0 0 10px; }
.pp-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.pp-legend-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.pp-legend-edit { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 10px; font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; font-family:inherit; }
.pp-legend-edit:hover { background:var(--border-light); }
.pp-color-hint { font-size:12px; color:var(--text-secondary); margin:0 0 12px; }
.pp-color-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--border-light); }
.pp-color-name { flex:0 0 120px; font-size:13px; font-weight:500; }
.pp-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.pp-swatch { width:22px; height:22px; border-radius:4px; border:2px solid transparent; cursor:pointer; padding:0; }
.pp-swatch.active { border-color:var(--text-primary); box-shadow:0 0 0 1px #fff inset; }
.pp-color-custom { width:34px; height:26px; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; background:none; margin-left:auto; }

.pp-today-line { position:absolute; top:0; width:2px; background:#c1153a; z-index:1; pointer-events:none; }
.pp-today-label { position:absolute; top:-18px; left:-14px; font-size:9px; font-weight:600; color:#c1153a; white-space:nowrap; }

.pp-dep-svg { pointer-events:none; }

/* Dependency (predecessor) picker in the add/edit task modals */
.pp-dep-list { max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; display:flex; flex-direction:column; gap:2px; }
.pp-dep-opt { display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 2px; cursor:pointer; }
.pp-dep-opt input { width:auto; margin:0; }
.pp-dep-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-dep-id { color:var(--text-secondary); font-size:11px; font-variant-numeric:tabular-nums; }
.pp-dep-empty { font-size:12px; color:var(--text-secondary); margin:4px 0; }

.pp-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(37,51,120,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; }

/* ===== HELP & DOCUMENTATION ===== */
.hd-page { max-width:1100px; }
.hd-header { margin-bottom:24px; }
.hd-header h2 { font-size:20px; font-weight:700; margin:0; }
.hd-subtitle { font-size:13px; color:var(--text-secondary); margin-top:4px; }

.hd-layout { display:flex; gap:0; }
.hd-toc { width:200px; flex-shrink:0; position:sticky; top:0; align-self:flex-start; padding-right:20px; border-right:1px solid var(--border); }
.hd-toc-title { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-secondary); padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.hd-toc-link { display:block; font-size:12px; color:var(--text-secondary); text-decoration:none; padding:4px 0; transition:color 0.1s; }
.hd-toc-link:hover { color:var(--accent); }

.hd-body { flex:1; padding-left:24px; }
.hd-section { margin-bottom:8px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:box-shadow 0.2s; }
.hd-section-highlight { box-shadow:0 0 0 2px var(--accent), var(--shadow-md); }
.hd-section-header { display:flex; align-items:center; gap:8px; padding:14px 20px; cursor:pointer; user-select:none; }
.hd-section-header:hover { background:var(--border-light); }
.hd-section-header h3 { font-size:15px; font-weight:600; margin:0; }
.hd-section-arrow { font-size:10px; color:var(--text-secondary); transition:transform 0.15s; flex-shrink:0; width:14px; text-align:center; }
.hd-section-content { padding:0 20px 16px; font-size:13px; line-height:1.7; color:var(--text); }
.hd-section-content p { margin:0 0 10px; }
.hd-section-content ul, .hd-section-content ol { padding-left:20px; margin:0 0 10px; }
.hd-section-content li { margin:3px 0; }
.hd-section-content h4 { font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--text); }
.hd-section-content code { font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--border-light); padding:1px 5px; border-radius:3px; color:var(--accent); }
.hd-section-content table { width:100%; border-collapse:collapse; margin:8px 0; }
.hd-section-content th { text-align:left; font-size:11px; font-weight:600; padding:6px 10px; border-bottom:2px solid var(--border); background:var(--border-light); }
.hd-section-content td { padding:6px 10px; border-bottom:1px solid var(--border-light); font-size:12px; }

.hd-tip { background:#d7e9ff; border:1px solid rgba(83,152,246,0.2); border-radius:var(--radius-sm); padding:10px 14px; font-size:12px; color:var(--text-secondary); margin:10px 0; }
.hd-tip::before { content:'Tip: '; font-weight:600; color:#474ecb; }

@media(max-width:768px) {
  .hd-toc { display:none; }
  .hd-body { padding-left:0; }
  /* !important: .pp-table carries an inline width from the draggable split
     (see project-plan.js tableWidth) which would otherwise win here. That
     inline style deliberately sets width only — never flex-basis: a definite
     flex-basis decides a flex item's base size and makes `width` (even
     !important) inert, which would keep the task list at its desktop width
     inside .pp-container{overflow:hidden} and clip its right-hand columns. */
  .pp-table { width:100% !important; min-width:0 !important; flex-basis:auto !important; }
  .pp-gantt-wrap, .pp-split-handle { display:none; }
}

/* ===== HELP TOOLTIPS ===== */
.help-tip { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:10px; color:var(--text-secondary); cursor:help; opacity:0.35; transition:opacity 0.15s; margin-left:4px; vertical-align:middle; }
*:hover > .help-tip, .help-tip:hover { opacity:0.6; }
.help-tip:hover { opacity:1; }

/* A tip long enough to overflow the viewport scrolls inside itself (item
   b50da537). The max-height here is the backstop; help.js narrows it to the
   space that actually exists beside the trigger and switches pointer-events on
   for those bubbles only, so a short tip stays click-through as before. The
   bubble is dark navy in EVERY theme (app.css #253378, theme-luxe.css #1d2554,
   and theme-dark.css does not restyle it), so one light thumb reads correctly
   in light and dark alike — the UA default is near-invisible on it. The
   ::-webkit- block below repeats the same colours for engines that predate
   `scrollbar-color`; where both are understood the standard property wins.
   overflow-wrap comes WITH the scroll: `overflow-y:auto` makes overflow-x
   compute to auto too, so an unbreakable token (a URL in a DB-published tip)
   would turn into a horizontal scrollbar that pointer-events:none puts out of
   reach. Wrapping it means that never arises. */
.help-tooltip { position:fixed; z-index:10050; background:#253378; color:#e2e8f0; padding:8px 12px; border-radius:var(--radius-sm); font-size:12px; line-height:1.5; max-width:280px; max-height:calc(100vh - 16px); overflow-y:auto; overscroll-behavior:contain; overflow-wrap:break-word; scrollbar-width:thin; scrollbar-color:rgba(226,232,240,0.45) transparent; box-shadow:0 4px 16px rgba(0,0,0,0.2); opacity:0; transition:opacity 0.1s; pointer-events:none; }
.help-tooltip::-webkit-scrollbar { width:10px; }
.help-tooltip::-webkit-scrollbar-track { background:transparent; }
.help-tooltip::-webkit-scrollbar-thumb { background:rgba(226,232,240,0.45); background-clip:content-box; border:3px solid transparent; border-radius:999px; }
.help-tooltip:hover::-webkit-scrollbar-thumb { background:rgba(226,232,240,0.75); background-clip:content-box; }

/* ===== ADOPT MODULE ===== */

/* Page wrapper */
.adopt-page { max-width:1400px; }
.adopt-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.adopt-page-header h2 { font-size:20px; font-weight:700; margin-bottom:2px; }
.adopt-subtitle { font-size:13px; color:var(--text-secondary); }
.adopt-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.adopt-empty { padding:40px; text-align:center; color:var(--text-secondary); font-size:13px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }

/* Persona grid */
.persona-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
.persona-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; cursor:pointer; transition:var(--transition); }
.persona-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.persona-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.persona-card-avatar { width:38px; height:38px; border-radius:50%; background:var(--accent-fill); color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.persona-card-info { flex:1; min-width:0; }
.persona-card-name { font-size:14px; font-weight:600; margin-bottom:2px; }
.persona-card-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.persona-card:hover .persona-card-actions { opacity:1; }
.adopt-icon-btn { background:none; border:none; cursor:pointer; padding:4px 6px; font-size:14px; color:var(--text-secondary); border-radius:var(--radius-sm); transition:var(--transition); }
.adopt-icon-btn:hover { background:var(--border-light); color:var(--text); }
.persona-card-desc { font-size:12px; color:var(--text-secondary); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.persona-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:12px; }
.persona-meta-item { display:flex; flex-direction:column; gap:1px; }
.persona-meta-label { font-size:10px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.3px; }
.persona-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
/* The audience an AI-generated plan named for a survey (item 3110ecdf). Prose,
   not persona ids, so it sits below the two-column meta grid rather than in it
   — a role list is routinely longer than a grid cell. */
.survey-card-audience { margin-top:8px; font-size:12px; color:var(--text); line-height:1.45; }
.survey-card-audience .persona-meta-label { margin-right:4px; }
.persona-linked-count { font-weight:600; color:var(--accent); }
.persona-detail-panel { margin-top:16px; }

/* Impact badges + status badges */
.adopt-impact-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.adopt-status-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:3px; white-space:nowrap; display:inline-block; }

/* Persona chips */
.adopt-persona-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; background:rgba(83,152,246,0.08); padding:2px 8px 2px 2px; border-radius:12px; white-space:nowrap; margin:1px 2px; }
.adopt-persona-avatar { width:20px; height:20px; border-radius:50%; background:var(--accent-fill); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Source chips */
.adopt-source-chip { display:inline-block; font-size:11px; padding:3px 8px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); margin:2px 4px 2px 0; color:var(--text-secondary); font-family:var(--mono); cursor:pointer; }
.adopt-source-chip:hover { border-color:var(--accent); color:var(--accent); }

/* Filter bar */
.adopt-filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.adopt-select { padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:11px; font-family:inherit; background:var(--bg); color:var(--text); cursor:pointer; }

/* Impact table */
.impact-table { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.adopt-table-header { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.3px; }
.adopt-th { font-size:11px; font-weight:600; }
.impact-row { border-bottom:1px solid var(--border-light); }
.impact-row:last-child { border-bottom:none; }
.impact-row-summary { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; transition:background .1s; }
.impact-row-summary:hover { background:var(--bg-hover); }
.impact-row-detail { padding:16px 20px; background:var(--bg-secondary); border-top:1px solid var(--border-light); }
.impact-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px; }
.impact-detail-section h4 { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--text-secondary); margin-bottom:4px; letter-spacing:.3px; }
.impact-detail-section p { font-size:13px; color:var(--text); line-height:1.5; }
.impact-detail-sources { margin-bottom:12px; }
.impact-detail-sources h4 { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--text-secondary); margin-bottom:6px; letter-spacing:.3px; }
.impact-detail-actions { display:flex; gap:6px; padding-top:8px; border-top:1px solid var(--border-light); }

/* Training layout */
.training-layout { display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-card); min-height:600px; }
.training-sidebar { border-right:1px solid var(--border); background:var(--bg-secondary); padding:12px; overflow-y:auto; }
.training-list { display:flex; flex-direction:column; gap:4px; }
.training-list-item { padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); border:1px solid transparent; }
.training-list-item:hover { background:var(--bg-hover); }
.training-list-item.active { background:var(--bg-card); border-color:var(--accent); box-shadow:var(--shadow-sm); }
.training-item-type { font-size:10px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
.training-item-title { font-size:13px; font-weight:500; margin-bottom:4px; line-height:1.3; }
.training-item-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.training-editor { padding:0; display:flex; flex-direction:column; }
.training-editor-header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.training-title-input { flex:1; border:none; font-size:16px; font-weight:600; font-family:inherit; background:transparent; color:var(--text); outline:none; min-width:200px; }
.training-title-input:focus { border-bottom:2px solid var(--accent); }
.training-editor-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Rich editor + toolbar */
.editor-toolbar { display:flex; align-items:center; gap:2px; padding:6px 12px; background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.editor-toolbar button { background:none; border:1px solid transparent; cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); font-size:13px; color:var(--text); font-family:inherit; transition:var(--transition); }
.editor-toolbar button:hover { background:var(--border-light); border-color:var(--border); }
.editor-toolbar-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.rich-editor { flex:1; padding:16px 20px; outline:none; font-size:14px; line-height:1.7; color:var(--text); overflow-y:auto; min-height:300px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); }
.rich-editor:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(83,152,246,0.12); }
.rich-editor h2 { font-size:18px; font-weight:700; margin:16px 0 8px; }
.rich-editor h3 { font-size:15px; font-weight:600; margin:12px 0 6px; }
.rich-editor p { margin-bottom:8px; }
.rich-editor ul, .rich-editor ol { margin:8px 0; padding-left:24px; }
.rich-editor li { margin-bottom:4px; }
.rich-editor strong { font-weight:600; }
/* The composer's AI-assist suggestion panel (item 863b7dbf) previews exactly
   what Insert will put into the editor, so it has to paint the same tag set the
   same way — an un-indented bullet list in the preview is a promise the editor
   then breaks. Deliberately NOT .rich-editor itself: that carries a border, a
   300px min-height and a focus ring, none of which belong on a read-only
   panel. Keep these in step with the four .rich-editor content rules above. */
.comm-ai-preview p { margin-bottom:8px; }
.comm-ai-preview ul, .comm-ai-preview ol { margin:8px 0; padding-left:24px; }
.comm-ai-preview li { margin-bottom:4px; }
.comm-ai-preview strong { font-weight:600; }
/* Hint text for an empty rich editor. A contenteditable cannot use the
   placeholder attribute, and seeding the hint as real content means the user
   has to delete it before typing — and, if they don't, it SAVES as the body
   (item 0275b5bf). Render it from data-placeholder instead: no attribute means
   attr() is empty and nothing paints, so editors without a hint are unchanged.
   The :has() arm covers the browser leaving a bare <br> after a select-all
   delete, which is not :empty.
   The two arms are DELIBERATELY separate rules with a duplicated declaration
   block rather than one selector list: a selector list is not forgiving, so a
   browser that does not understand :has() would throw away the whole rule and
   paint no hint at all — including on a genuinely :empty editor, which is the
   common case. Split, the :has() arm degrades on its own and :empty survives.
   Same reasoning as .tw-row in tests-v2.css. */
.rich-editor:empty::before { content:attr(data-placeholder); color:var(--text-secondary); pointer-events:none; }
.rich-editor:has(> br:only-child)::before { content:attr(data-placeholder); color:var(--text-secondary); pointer-events:none; }

/* Adoptability badges */
.adopt-adoptability-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.adopt-adoptability-badge.easy { color:#3cc69a; background:#c6ebdb; }
.adopt-adoptability-badge.medium { color:#faa938; background:#fff5e6; }
.adopt-adoptability-badge.hard { color:#c1153a; background:#fce8ec; }
/* "What is this?" help for the Adoptability block on the persona form */
.adopt-help-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.adopt-help-btn { background:none; border:none; padding:0; cursor:pointer; font-size:11px; font-weight:600; color:var(--primary); white-space:nowrap; }
.adopt-help-btn:hover { text-decoration:underline; }
/* No max-height here on purpose: .adopt-modal already scrolls (max-height:85vh,
   overflow-y:auto), and a nested scrollbox inside it steals the wheel from the
   modal. The panel is collapsed by default, so it only grows the form for
   someone who asked to read it. */
.adopt-help-panel { border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:4px; background:var(--bg-secondary); padding:10px 12px; margin-bottom:10px; font-size:12px; line-height:1.5; color:var(--text-secondary); }
.adopt-help-panel p { margin:0 0 6px; }
.adopt-help-panel p:last-child { margin-bottom:0; }
.adopt-help-panel ul { margin:0 0 8px; padding-left:18px; }
.adopt-help-panel li { margin-bottom:3px; }
.adopt-help-panel strong { color:var(--text-primary); }
.adopt-help-caveat { border-top:1px solid var(--border); padding-top:6px; }
.adoptability-factors { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px; margin-top:8px; }
.adoptability-factor { display:flex; align-items:center; gap:6px; }
.adoptability-factor-label { color:var(--text-secondary); font-size:11px; }
.adoptability-factor-value { font-weight:600; font-size:11px; }

/* Editor.js container */
.editorjs-container { border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 20px; min-height:400px; background:#fff; font-size:14px; line-height:1.6; flex:1; overflow-y:auto; }
.editorjs-container:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(83,152,246,0.12); }
.editorjs-container .ce-block__content { max-width:100%; }
.editorjs-container .ce-toolbar__content { max-width:100%; }
.editorjs-container .ce-paragraph { font-size:14px; line-height:1.6; }
.editorjs-container h2.ce-header { font-size:20px; font-weight:600; margin:16px 0 8px; }
.editorjs-container h3.ce-header { font-size:16px; font-weight:600; margin:12px 0 6px; }
.editorjs-container h4.ce-header { font-size:14px; font-weight:600; margin:10px 0 4px; }
.editorjs-container .ce-toolbar__plus, .editorjs-container .ce-toolbar__settings-btn { color:var(--text-secondary); }
.editorjs-container .cdx-warning { background:var(--partial-bg); border-left:3px solid var(--partial); padding:12px 16px; border-radius:var(--radius-sm); }
.training-video-field { display:flex; align-items:center; gap:10px; padding:10px 0 12px; border-top:1px solid var(--border); }
.training-video-field label { flex:0 0 130px; font-size:11px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.training-video-field input { flex:1; min-width:0; font-size:12px; }
.training-video-panel { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-secondary); padding:12px; margin-bottom:12px; }
.training-video-player { width:100%; max-height:360px; display:block; border-radius:var(--radius-sm); background:#111827; margin-bottom:10px; }
.h5p-block-editor { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-secondary); padding:14px; margin:8px 0; }
.h5p-block-editor-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.h5p-block-editor-head strong { font-size:13px; color:var(--text); }
.h5p-block-editor-head span { font-size:11px; color:var(--text-secondary); }
.h5p-block-field { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.h5p-block-field label { font-size:10px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.h5p-block-field input { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--text); padding:7px 9px; font-family:var(--font); font-size:12px; }
.h5p-block-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(83,152,246,0.12); }
.h5p-block-row { display:grid; grid-template-columns:120px 1fr; gap:10px; }
.h5p-block-empty { border:1px dashed var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:12px; padding:14px; background:#fff; }
.h5p-preview { border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; overflow:hidden; margin-top:10px; }
.h5p-preview iframe { width:100%; border:0; display:block; }
.quiz-generator-grid .kb-field { margin-bottom:12px; }
.quiz-generator-note { font-size:11px; color:var(--text-secondary); padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-secondary); }

/* Communications timeline */
.comms-timeline { position:relative; padding:20px 0 20px 40px; }
.comms-timeline-line { position:absolute; left:19px; top:0; bottom:0; width:2px; background:var(--border); }
.comms-timeline-item { position:relative; margin-bottom:20px; cursor:pointer; }
.comms-timeline-dot { position:absolute; left:-29px; top:12px; width:14px; height:14px; border-radius:50%; border:3px solid var(--bg-card); box-shadow:0 0 0 2px var(--border); z-index:1; }
.comms-timeline-date { font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; font-family:var(--mono); }
.comms-timeline-card { padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); transition:var(--transition); }
.comms-timeline-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.comms-timeline-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.comms-timeline-card-title { font-size:14px; font-weight:600; margin-bottom:6px; }
.comms-timeline-card-audience { display:flex; flex-wrap:wrap; gap:4px; }

/* Communications -> Plan tab (item dea5a181). The comprehensive AI-generated
   plan is a DOCUMENT, not a card in a grid: full width, prose measure, and the
   body renders the saved HTML with the heading/list rhythm the AI dialog showed
   it in. */
/* Surveys -> Plan tab (item 3110ecdf) is the same document on a second screen,
   so it shares the box and reuses the header/body classes inside it. */
.comms-plan-doc, .survey-plan-doc {
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-card); padding:18px 22px; margin-bottom:14px;
}
.comms-plan-doc-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border-light); }
.comms-plan-doc-title { font-size:15px; font-weight:700; color:var(--text); line-height:1.35; }
.comms-plan-doc-meta { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:11px; color:var(--text-secondary); }
.comms-plan-doc-body { font-size:13px; line-height:1.7; color:var(--text); }
/* The saved body carries its own inline margins from the AI dialog's renderer;
   these only bound what that does not set. */
.comms-plan-doc-body h2 { font-size:15px; }
.comms-plan-doc-body h3 { font-size:14px; }
.comms-plan-doc-body h4 { font-size:13px; }
.comms-plan-doc-body ul { padding-left:4px; }
.comms-plan-doc-body li { margin:3px 0; }
/* .persona-card-actions is hidden until ITS card is hovered; a plan is one row
   on a tab of its own, so its controls stay visible. Specificity 0,2,0 beats the
   base .persona-card-actions{opacity:0}, and a .comms-plan-doc is not a
   .persona-card so no hover rule competes. */
.comms-plan-doc .persona-card-actions, .survey-plan-doc .persona-card-actions { opacity:1; }

/* A button that reads as a link. The inline copy of these six declarations was
   repeated at ~20 call sites across the app with no shared class; the empty
   Tasks tab needs one to point at the Plan tab, so it gets a real rule. */
.link-btn {
  border:none; background:none; padding:0;
  color:var(--accent); font-weight:600; font-size:inherit; font-family:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover { filter:brightness(1.15); }

/* Adopt view toggle */
.adopt-view-toggle { display:flex; gap:0; }
.adopt-view-toggle .filter-btn { border-radius:0; }
.adopt-view-toggle .filter-btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.adopt-view-toggle .filter-btn:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

/* Survey results mini */
.survey-results-mini { margin-top:10px; padding-top:10px; border-top:1px solid var(--border-light); }
.survey-result-item { margin-bottom:8px; }
.survey-result-question { font-size:11px; color:var(--text-secondary); margin-bottom:4px; line-height:1.3; }
.survey-result-bars { display:flex; align-items:flex-end; gap:3px; height:40px; }
.survey-bar-col { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.survey-bar-col span { font-size:9px; color:var(--text-secondary); }
.survey-bar { width:100%; border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
.survey-result-avg { font-size:11px; color:var(--text-secondary); margin-top:4px; }

/* Survey question builder */
.survey-question-builder { cursor:default; }

/* Readiness Dashboard */
.readiness-ai-narrative { display:flex; gap:12px; padding:16px 20px; background:linear-gradient(135deg, rgba(83,152,246,0.06) 0%, rgba(139,92,246,0.06) 100%); border:1px solid rgba(83,152,246,0.2); border-radius:var(--radius); margin-bottom:20px; }
.readiness-ai-icon { font-size:24px; flex-shrink:0; }
.readiness-ai-text { font-size:13px; line-height:1.5; color:var(--text); }
.readiness-ai-text strong { display:block; margin-bottom:4px; font-size:14px; }
.readiness-ai-text p { color:var(--text-secondary); margin:0; }

.readiness-top-grid { display:grid; grid-template-columns:200px 1fr; gap:20px; margin-bottom:20px; }
.readiness-gauge-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.readiness-gauge { width:140px; height:140px; }
.readiness-gauge-svg { width:100%; height:100%; }
.readiness-gauge-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-top:8px; }

.readiness-dimensions { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.readiness-dim { display:flex; align-items:center; gap:10px; }
.readiness-dim-label { font-size:12px; font-weight:500; min-width:160px; white-space:nowrap; }
.readiness-dim-weight { font-size:10px; color:var(--text-muted); font-weight:400; }
.readiness-dim-bar-track { flex:1; height:10px; background:var(--border-light); border-radius:5px; overflow:hidden; }
.readiness-dim-bar-fill { height:100%; border-radius:5px; transition:width .5s ease; }
.readiness-dim-score { font-size:13px; font-weight:700; min-width:40px; text-align:right; }

.readiness-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }

/* Heatmap */
.readiness-heatmap { width:100%; border-collapse:collapse; font-size:11px; }
.readiness-heatmap th { padding:6px 8px; text-align:center; font-weight:600; color:var(--text-secondary); font-size:10px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.readiness-heatmap td { padding:8px 10px; text-align:center; font-weight:600; font-size:12px; }
.readiness-heatmap .hm-persona { text-align:left; font-weight:500; color:var(--text); white-space:nowrap; font-size:12px; }
.readiness-heatmap .hm-cell { border-radius:3px; min-width:48px; }
.readiness-heatmap .hm-na { color:var(--text-muted); background:transparent; font-weight:400; }

/* Trend */
.readiness-trend { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:140px; padding:10px 0; }
.readiness-trend-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.readiness-trend-value { font-size:11px; font-weight:600; color:var(--text); }
.readiness-trend-bar { width:100%; max-width:36px; border-radius:4px 4px 0 0; transition:height .5s ease; min-height:4px; }
.readiness-trend-label { font-size:10px; color:var(--text-secondary); }

/* Risk items */
.readiness-risk-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-light); }
.readiness-risk-item:last-child { border-bottom:none; }
.readiness-risk-level { font-size:9px; font-weight:700; padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; margin-top:2px; }
.readiness-risk-level.high { color:#c1153a; background:#fce8ec; }
.readiness-risk-level.medium { color:#faa938; background:#fff5e6; }
.readiness-risk-level.low { color:#676865; background:#f0f0ef; }
.readiness-risk-body { flex:1; }
.readiness-risk-msg { font-size:13px; font-weight:500; margin-bottom:2px; }
.readiness-risk-action { font-size:12px; color:var(--accent); }

/* AI action buttons */
.adopt-ai-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1px solid rgba(83,152,246,0.3); border-radius:var(--radius-sm); background:linear-gradient(135deg, rgba(83,152,246,0.08) 0%, rgba(139,92,246,0.08) 100%); color:var(--accent); font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.adopt-ai-btn:hover { background:linear-gradient(135deg, rgba(83,152,246,0.15) 0%, rgba(139,92,246,0.15) 100%); border-color:var(--accent); box-shadow:0 2px 8px rgba(83,152,246,0.15); }
.adopt-ai-btn svg { flex-shrink:0; }
.adopt-ai-sub { font-weight:400; margin-left:2px; opacity:0.7; }

/* AI dropdown */
.adopt-ai-dropdown { position:relative; display:inline-block; }
.adopt-ai-dropdown:hover .adopt-ai-menu, .adopt-ai-dropdown.open .adopt-ai-menu { display:block; }
.adopt-ai-menu { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:200px; z-index:100; overflow:hidden; }
.adopt-ai-menu button { display:block; width:100%; text-align:left; padding:8px 14px; border:none; background:none; font-size:12px; font-family:inherit; color:var(--text); cursor:pointer; transition:background .1s; }
.adopt-ai-menu button:hover { background:var(--bg-hover); }

/* Package split control (Import / Export as two sibling menu items) */
.adopt-pkg-dropdown { position:relative; display:inline-block; }
.adopt-pkg-dropdown:hover .adopt-pkg-menu, .adopt-pkg-dropdown.open .adopt-pkg-menu { display:block; }
.adopt-pkg-menu { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:180px; z-index:100; overflow:hidden; }
.adopt-pkg-menu button { display:block; width:100%; text-align:left; padding:8px 14px; border:none; background:none; font-size:12px; font-family:inherit; color:var(--text); cursor:pointer; transition:background .1s; }
.adopt-pkg-menu button:hover, .adopt-pkg-menu button:focus-visible { background:var(--bg-hover); outline:none; }

/* Adopt modal */
.adopt-modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(37,51,120,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.adopt-modal { background:var(--bg-card); border-radius:var(--radius-lg); width:540px; max-width:92vw; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.adopt-modal-header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); }
/* flex:1 keeps the row "title, then buttons" once FormDock inserts its minimize
   control — space-between alone would strand it in the middle of the header. */
.adopt-modal-header h3 { font-size:16px; font-weight:700; margin:0; flex:1; }
.adopt-modal-header button { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-secondary); padding:0; line-height:1; }
.adopt-modal-body { padding:20px; }
.adopt-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border); }

/* Responsive adopt */
@media (max-width:900px) {
  .readiness-top-grid { grid-template-columns:1fr; }
  .readiness-bottom-grid { grid-template-columns:1fr; }
  .training-layout { grid-template-columns:1fr; }
  .training-sidebar { border-right:none; border-bottom:1px solid var(--border); max-height:200px; }
  .persona-grid { grid-template-columns:1fr; }
  .impact-detail-grid { grid-template-columns:1fr; }
}

/* ===== AI ACTION BUTTONS ===== */
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(83,152,246,0.3);
  background: linear-gradient(135deg, rgba(83,152,246,0.08), rgba(71,78,203,0.08));
  color: #474ecb;
  font-family: inherit;
  transition: all 0.15s;
}
.ai-btn:hover {
  background: linear-gradient(135deg, rgba(83,152,246,0.15), rgba(71,78,203,0.15));
  border-color: rgba(83,152,246,0.5);
  box-shadow: 0 2px 8px rgba(83,152,246,0.15);
}
.ai-btn .ai-sparkle {
  width: 14px;
  height: 14px;
}
.ai-btn-dropdown {
  position: relative;
  display: inline-block;
}
.ai-btn-dropdown .ai-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  /* .ai-btn-dropdown is position:relative with no z-index, so this menu
     competes directly in the root stacking context. At its old value of 100
     the "AI Generate" options on doc-config were occluded by the page-section
     content and lost to the mobile sidebar (which stacks at 200). Raise above
     both, while staying below modal overlays (1000). Matches .export-menu. */
  z-index: 300;
  padding: 4px;
}
.ai-btn-dropdown.open .ai-dropdown-menu {
  display: block;
}
.ai-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text, #253378);
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.ai-dropdown-item:hover {
  background: rgba(83,152,246,0.08);
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #474ecb;
  background: rgba(83,152,246,0.1);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ===== AI TESTER ===== */

.ait-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
}

/* Command Bar */
.ait-command-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.ait-command-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ait-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.ait-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--primary-light);
  pointer-events: none;
}
.ait-command-input {
  width: 100%;
  padding: 12px 48px 12px 42px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-input);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.ait-command-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(71,78,203,0.08);
}
.ait-command-input::placeholder {
  color: var(--text-muted);
  font-size: 13px;
}
.ait-presets-wrap {
  position: absolute;
  right: 8px;
}
.ait-presets-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.ait-presets-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ait-presets-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  z-index: 100;
  padding: 4px;
}
.ait-presets-dropdown.open { display: block; }
.ait-preset-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  border-radius: 6px;
}
.ait-preset-item:hover {
  background: var(--bg-hover);
}

/* Controls */
.ait-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ait-mode-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border);
}
.ait-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  border-radius: 4px;
  transition: all 0.15s;
  white-space: nowrap;
}
.ait-mode-btn.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.ait-run-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: none;
  background: #3cc69a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.ait-run-btn:hover { background: #33b389; transform: translateY(-1px); }
.ait-run-btn:active { transform: translateY(0); }
.ait-stop-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: none;
  background: #c1153a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.ait-stop-btn:hover { background: #a8112f; }

/* Main Split View */
.ait-main {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Video Panel */
.ait-video-panel {
  flex: 0 0 75%;
  display: flex;
  flex-direction: column;
  background: #1a1b2e;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.ait-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ait-video-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ait-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
}
.ait-status-badge .ait-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.ait-status-badge.connected .ait-status-dot,
.ait-status-badge.live .ait-status-dot {
  background: #3cc69a;
  box-shadow: 0 0 6px rgba(60,198,154,0.5);
  animation: ait-pulse 2s infinite;
}
.ait-status-badge.live {
  background: rgba(60,198,154,0.12);
  color: #3cc69a;
}
.ait-status-badge.completed {
  background: rgba(60,198,154,0.12);
  color: #3cc69a;
}
.ait-status-badge.completed .ait-status-dot {
  background: #3cc69a;
  animation: none;
}
.ait-status-badge.error {
  background: rgba(193,21,58,0.12);
  color: #ff6b7f;
}
.ait-status-badge.error .ait-status-dot {
  background: #c1153a;
  animation: none;
}
.ait-status-badge.stopped {
  background: rgba(250,169,56,0.12);
  color: #faa938;
}
.ait-status-badge.stopped .ait-status-dot {
  background: #faa938;
  animation: none;
}

@keyframes ait-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ait-video-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12131f;
  overflow: hidden;
}
#ait-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ait-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.62);
}
.ait-placeholder-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
  animation: none;
}
@keyframes ait-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.ait-placeholder-text {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
}
.ait-placeholder-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  text-align: center;
}
.ait-placeholder-cmd {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #9ec2f7;
  background: rgba(255,255,255,0.05);
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-top: 8px;
}
.ait-video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  pointer-events: none;
}
.ait-overlay-screen {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.ait-overlay-step {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Log Panel */
.ait-log-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.ait-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ait-log-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ait-step-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.ait-log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ait-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--text-muted);
  font-size: 12px;
}
.ait-log-entry {
  padding: 5px 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color 0.15s;
  animation: ait-slideIn 0.2s ease-out;
}
.ait-log-entry:hover {
  border-color: var(--border);
}
.ait-log-entry.done {
  background: rgba(60,198,154,0.06);
  border-color: rgba(60,198,154,0.2);
}
.ait-log-entry.error {
  background: rgba(193,21,58,0.04);
  border-color: rgba(193,21,58,0.15);
}
@keyframes ait-slideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ait-log-entry-header {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ait-log-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.ait-log-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ait-log-value {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ait-log-screen {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  padding-left: 60px;
}
.ait-log-error {
  color: #c1153a;
  font-weight: 600;
}

/* Evidence Indicators */
.ait-evidence-badge {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: auto;
  flex-shrink: 0;
  cursor: default;
  letter-spacing: 1px;
}
.ait-evidence-summary {
  margin: 8px 0;
  padding: 12px;
  background: rgba(71, 78, 203, 0.06);
  border: 1px solid rgba(71, 78, 203, 0.15);
  border-radius: 8px;
}
.ait-evidence-summary-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ait-evidence-icon {
  font-size: 14px;
}
.ait-evidence-title {
  font-size: 12px;
}
.ait-evidence-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ait-evidence-path {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.7;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  word-break: break-all;
}

/* Status Bar */
.ait-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}
.ait-status-left, .ait-status-center, .ait-status-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.ait-status-sep {
  color: var(--border);
}
.ait-conn-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ait-conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ait-conn-dot.connected { background: #3cc69a; box-shadow: 0 0 4px rgba(60,198,154,0.4); }
.ait-conn-dot.connecting { background: #faa938; animation: ait-pulse 1s infinite; }
.ait-conn-dot.disconnected { background: #94a3b8; }
#ait-model-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}

/* History Section */
.ait-history-section {
  margin-top: 8px;
  flex-shrink: 0;
}
.ait-history-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  transition: background 0.15s;
}
.ait-history-toggle:hover {
  background: var(--bg-secondary);
}
.ait-history-count {
  color: var(--text-muted);
  font-weight: 500;
}
#ait-history-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}
.ait-history-list {
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.ait-history-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.ait-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-light);
}
.ait-history-item:last-child { border-bottom: none; }
.ait-history-item:hover { background: var(--bg-hover); }
.ait-history-result {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ait-history-result.pass {
  background: rgba(60,198,154,0.12);
  color: #3cc69a;
}
.ait-history-result.fail {
  background: rgba(193,21,58,0.1);
  color: #c1153a;
}
.ait-history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ait-history-cmd {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ait-history-meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .ait-main { flex-direction: column; }
  .ait-video-panel { flex: none; height: 50%; }
  .ait-command-row { flex-wrap: wrap; }
  .ait-controls { width: 100%; justify-content: flex-end; }
}

/* ===== ADOPT MODULE UPGRADES ===== */

/* --- Mitigation Plan --- */
.mitigation-plan-section {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}
.mitigation-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.mitigation-plan-header h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.mitigation-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mitigation-item {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.mitigation-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mitigation-item-action {
  flex: 1;
  font-size: 12px;
  min-width: 200px;
}
.mitigation-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.adopt-mitigation-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}

/* --- Mini Progress Bar --- */
.adopt-mini-progress {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.adopt-mini-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* --- Channel Badges --- */
.adopt-channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: default;
}

/* --- Personas Table --- */
.adopt-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.adopt-data-table thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.adopt-data-table thead th.sortable {
  cursor: pointer;
}
.adopt-data-table thead th.sortable:hover {
  color: var(--accent);
}
.adopt-data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.adopt-data-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* --- Training Tabs --- */
.adopt-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.adopt-tab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, border-color 0.2s;
}
.adopt-tab:hover {
  color: var(--text);
}
.adopt-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- Learning Paths --- */
.learning-paths-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.learning-path-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--bg);
}
.learning-path-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.learning-path-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.learning-path-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.learning-path-pct {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
.learning-path-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 8px;
}
.learning-path-module {
  display: flex;
  align-items: stretch;
  min-height: 60px;
}
.lp-module-connector {
  width: 3px;
  min-height: 100%;
  margin-right: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lp-module-node {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left-width: 3px;
  transition: box-shadow 0.2s;
}
.lp-module-node:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.lp-module-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.lp-module-body {
  flex: 1;
  min-width: 0;
}
.lp-module-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.lp-module-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.lp-content-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.lp-assessment-chip {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #8b5cf6;
}
.lp-module-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.learning-path-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* --- Module Lock States --- */
.lp-module-node.lp-locked {
  background: var(--bg-secondary);
  opacity: 0.65;
  border-color: var(--border);
  border-left-color: var(--border);
}
.lp-module-node.lp-locked .lp-module-number {
  background: var(--border) !important;
}
.lp-module-node.lp-available {
  border-left-color: var(--accent);
}
.lp-module-node.lp-completed {
  border-left-color: var(--pass-ink, #047857);
}
.lp-lock-icon {
  font-size: 12px;
  margin-left: 4px;
}
.lp-lock-reason {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}
.lp-module-status-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.lp-module-status-label.lp-status-locked {
  background: #f0f0ef;
  color: #676865;
}
.lp-module-status-label.lp-status-available {
  background: var(--accent-soft);
  color: var(--accent);
}
.lp-module-status-label.lp-status-complete {
  background: #c6ebdb;
  color: var(--pass-ink, #047857);
}
.lp-access-rules-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.lp-access-rules-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lp-connector-locked {
  background: var(--border) !important;
  border-style: dashed;
}
.lp-connector-available {
  background: var(--accent) !important;
}
.lp-connector-completed {
  background: var(--pass) !important;
}

/* --- Access Rules Modal --- */
.access-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.access-rule-row select, .access-rule-row input {
  font-size: 11px;
  padding: 4px 8px;
}
.access-rule-remove {
  background: none;
  border: none;
  color: var(--fail);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.access-operator-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}
.access-operator-toggle button {
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--bg);
  color: var(--text-secondary);
  transition: all 0.15s;
}
.access-operator-toggle button.active {
  background: var(--accent-fill);
  color: #fff;
}

/* --- Video Progress Tracking --- */
.video-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.video-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.video-progress-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.video-complete-badge {
  color: var(--pass-ink, #047857);
  font-weight: 600;
}

/* --- Communications Calendar --- */
.comms-calendar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Every Communications tab states its own rule above the view (item 3fab4370).
   Timeline's and Cards' legends are siblings of their containers rather than
   children — .comms-timeline-line is absolutely positioned top:0/bottom:0
   against .comms-timeline, and .persona-grid would lay a <p> out as a grid
   cell — so those two carry the bottom margin themselves. */
.comms-view-legend {
  margin: 0 0 16px;
}
/* The calendar's legend is the exception: it sits INSIDE .comms-calendar, a
   24px-gap flex column, so its own margin would stack on top of that gap and
   push the first month a line and a half down. Must stay AFTER the rule above
   — same specificity, so source order decides. */
.comms-cal-legend {
  margin: 0;
}
.comms-cal-month {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comms-cal-month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.comms-cal-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.comms-cal-card {
  position: relative;   /* anchors .comms-del-btn */
  flex: 0 0 auto;
  width: 260px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.1s;
}
.comms-cal-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
/* Delete, for the Calendar and Timeline views. Deliberately NOT
   .persona-card-actions: that class is opacity:0 until `.persona-card:hover`
   matches, and neither of these cards is a .persona-card, so reusing it would
   paint the button at opacity 0 forever with nothing throwing — the same trap
   already documented for the journey header (item fa524c76). Each rule below
   names the container the button is actually inside. Delete used to exist only
   in the Cards view, so on the default Calendar view there was no way to remove
   a communication at all (item 5ba48db1). */
.comms-del-btn { opacity: 0; transition: opacity .15s; }
.comms-cal-card:hover .comms-del-btn,
.comms-timeline-item:hover .comms-del-btn,
.comms-del-btn:focus-visible { opacity: 1; }
.comms-cal-card .comms-del-btn { position: absolute; top: 4px; right: 4px; line-height: 1; }
.comms-timeline-card-header .comms-del-btn { margin-left: auto; }
.comms-cal-card-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.comms-cal-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.comms-cal-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.comms-cal-card-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* --- Communications: delivery (execution) --- */
/* Lives here with the rest of the Communications rules (Calendar / Timeline
   above), not at the end of the file. Tokens only: every colour is a --token
   that theme-dark.css restates, so there is no per-rule dark override to keep
   in step. The badges themselves are design-review.css §11 .badge-* classes,
   picked in adopt.js :: deliveryBadge. */
/* The 📨 control beside the delete X on the Calendar and Timeline cards. Unlike
   .comms-del-btn it is always visible: sending is the card's primary action
   now, and an affordance that only appears on hover is one nobody finds. */
.comms-cal-card .comms-send-btn { position: absolute; top: 4px; right: 26px; line-height: 1; }
.comms-timeline-card-header .comms-send-btn { margin-left: auto; }
.comms-timeline-card-header .comms-send-btn + .comms-del-btn { margin-left: 0; }
/* Sits beside .adopt-status-badge (10px, inline-block) in the same meta row;
   the shared badge is inline-flex at 20px, so align it on the text line. */
.adopt-delivery-badge { vertical-align: middle; }

/* Composer: extra recipients and webhooks. The chip reuses .adopt-persona-chip;
   .acom-chip-x is deliberately un-normalised (data-no-norm) — a 30px pill
   inside an 18px chip is not a chip any more. */
.acom-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 6px; }
.acom-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 8px; margin-bottom: 6px; }
.acom-extra-chip { padding-left: 8px; }
.acom-chip-x { background: none; border: none; cursor: pointer; padding: 0 2px; margin-left: 4px; font-size: 13px; line-height: 1; color: var(--text-secondary); font-family: inherit; }
.acom-chip-x:hover { color: var(--text); }
.acom-add-row { display: flex; gap: 8px; align-items: center; }
.acom-add-row .kb-input { flex: 1; }
.acom-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.acom-webhook-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.acom-webhook-row .acom-wh-label { flex: 0 0 160px; }
.acom-webhook-row .acom-wh-url { flex: 1; }

/* Delivery drawer */
.comm-delivery-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.comm-delivery-facts { font-size: 12px; color: var(--text-secondary); }
/* Amber, the way the app's other "partial" surfaces say it (--partial /
   --partial-bg, e.g. .segment.partial, .ev-badge-partial): a tinted panel with
   an amber edge and ordinary text ink, since --partial itself is a fill colour
   and does not pass AA as text. */
.comm-delivery-warn { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--partial-bg); border-left: 3px solid var(--partial); color: var(--text); font-size: 12px; margin-bottom: 8px; }
.comm-delivery-section { padding: 12px 0; border-top: 1px solid var(--border); }
.comm-delivery-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .4px; margin-bottom: 8px; }
.comm-recipient-group { padding: 6px 0; }
.comm-recipient-group-name { font-weight: 600; font-size: 12.5px; margin-bottom: 2px; }
.comm-recipient { font-size: 12px; color: var(--text); }
.comm-recipient-email { color: var(--text-secondary); }
.comm-recipient-muted { color: var(--text-secondary); font-weight: 400; }
.comm-delivery-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.comm-send-channels { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.comm-send-ch-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.comm-send-resend { margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); }
.comm-delivery-empty { padding: 16px; margin-bottom: 10px; }
.comm-delivery-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comm-delivery-reason { font-size: 12px; color: var(--text-secondary); }
.comm-schedule-panel { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); }
/* The panel opens with the Schedule… button (adopt.js :: _commScheduleToggle flips
   the `hidden` attribute). `display:flex` above outranks the UA's [hidden] rule, so
   without this line the panel is painted on arrival and for drafts that cannot
   schedule at all — seen in the rig 2026-09-05. There is no global [hidden]
   rule in this stylesheet to lean on; the other display:flex panels
   (.tiva-menu, .runs-badge, .tw-bulkbar) each carry their own. */
.comm-schedule-panel[hidden] { display: none; }
.comm-schedule-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.comm-schedule-field .kb-input { width: auto; }
.comm-ledger td { text-align: left; font-weight: 400; vertical-align: middle; }
.comm-ledger th { text-align: left; }
.comm-ledger-actions { white-space: nowrap; }
/* The action buttons are composed without a text node between them. */
.comm-ledger-actions .u-btn + .u-btn { margin-left: 4px; }
/* Red the way .mini-badge.fail / .ev-step-error say it: --fail is an ink token
   here, and theme-dark.css restates it for dark. */
.comm-ledger-error { color: var(--fail); font-size: 12px; }
.comms-coverage-toggle { margin-bottom: 8px; }
.comms-coverage-legend { margin: 0 0 10px; }

/* The .survey-funnel* rules were removed with the Sent › Opened › Completed
   block they styled (item c3de2c1f); adopt.js was their only caller. */

/* --- Survey Share Link --- */
.survey-share-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin: 4px 0;
}
.survey-share-url {
  font-size: 10px;
  color: var(--accent);
  font-family: monospace;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Readiness AI Narrative v2 --- */
.readiness-ai-narrative-v2 {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg) 100%);
}
.readiness-ai-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.readiness-ai-sparkle {
  font-size: 18px;
}
.readiness-ai-narrative-v2 p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
  line-height: 1.5;
}
.readiness-ai-bullets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.readiness-ai-bullets strong {
  color: var(--text);
}

/* --- Heatmap Polish --- */
.hm-cell.hm-score {
  border-radius: 6px;
  font-weight: 600;
  cursor: default;
  transition: transform 0.15s;
}
.hm-cell.hm-score:hover {
  transform: scale(1.1);
  z-index: 1;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Unified button system (owner ask 2026-07-12: "way too many types of
   buttons"). Four intents, one pill shape; modules migrate screen by screen
   (tests.js first). Use these instead of per-button inline styles. ── */
.a-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s; border: 1px solid transparent; line-height: 1.2; }
.a-btn-primary { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }
.a-btn-primary:hover { filter: brightness(1.08); }
.a-btn-secondary { background: var(--bg-card, #fff); color: var(--accent); border-color: var(--accent); }
.a-btn-secondary:hover { background: var(--accent-soft, rgba(65,128,242,.08)); }
.a-btn-danger { background: var(--bg-card, #fff); color: #c1153a; border-color: #f3c2cd; }
.a-btn-danger:hover { background: #fef2f2; }
.a-btn-ghost { background: none; color: var(--text-secondary, #64748b); border-color: transparent; }
.a-btn-ghost:hover { color: var(--text-primary, #1e293b); background: var(--bg-secondary, #f1f5f9); }
.a-btn-sm { padding: 4px 11px; font-size: 11px; }
.a-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== Personas & Impact (merged workbench) ===== */
.pi-layout { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
@media (max-width: 980px) { .pi-layout { grid-template-columns:1fr; } }
/* A grid item defaults to min-width:auto, so .pi-main refuses to shrink below the
   min-content width of what it holds. The change heatmap is a nowrap table one
   column per process area, so with a real programme (21 areas on verds-mao) it is
   ~4400px wide: .pi-main grew to match, the 1fr track grew with it, and the whole
   page slid sideways in .content-area instead. That defeats BOTH of the matrix's
   own affordances below — .pi-matrix-scroll never became the scroller, so its
   overflow-x never engaged, and .pi-matrix-sticky had no scrollport to stick to,
   so the persona name column scrolled off with the data and the cells could no
   longer be attributed to anyone (item ec89c396). min-width:0 caps the track. */
.pi-main { min-width:0; }

.pi-rail { display:flex; flex-direction:column; gap:8px; }
.pi-rail-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.pi-rail-item:hover { border-color:var(--accent); }
.pi-rail-item.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pi-rail-all-title { font-size:13px; font-weight:700; }
.pi-rail-all-sub { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.pi-rail-head { display:flex; align-items:center; gap:8px; }
.pi-rail-head .persona-card-avatar { width:28px; height:28px; font-size:12px; }
.pi-rail-name-wrap { flex:1; min-width:0; }
.pi-rail-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pi-rail-sub { font-size:11px; color:var(--text-secondary); }
.pi-risk-flag { font-size:13px; flex-shrink:0; }
.pi-load-track { margin-top:8px; height:6px; border-radius:3px; background:var(--bg-secondary); overflow:hidden; }
.pi-load-bar { height:100%; display:flex; border-radius:3px; overflow:hidden; }
.pi-load-seg.high { background:#c1153a; }
.pi-load-seg.medium { background:#faa938; }
.pi-load-seg.low { background:#3cc69a; }
.pi-rail-foot { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--text-secondary); }

/* Matrix */
.pi-matrix-scroll { overflow-x:auto; }
.pi-matrix { border-collapse:collapse; width:100%; font-size:12px; }
.pi-matrix th, .pi-matrix td { padding:6px 8px; text-align:center; border-bottom:1px solid var(--border); white-space:nowrap; }
.pi-matrix thead th { font-size:11px; font-weight:600; color:var(--text-secondary); }
/* What made this table thousands of pixels wide was never the cells — a cell is
   a 28px .pi-cell holding a one- or two-digit count. It was the LABELS: nowrap
   headers grow a column to the width of its longest name, and on the reporting
   instance the process areas run to "Capacity, profile, reason-code and location
   upkeep" (50 characters) across 21 columns — 4387px measured, inside a card
   1082px wide. So a label on the COLUMN axis is paid for once per column, and it
   dwarfs the data it heads (item ec89c396). Bounded and wrapping, a column costs
   roughly what its cells need. Nothing is truncated and no text is lost: it
   wraps, and every cell's tooltip names both of its axes in full.

   overflow-wrap is the last resort, not the normal case — a word that fits is
   never touched, and most labels wrap at their spaces. It is load-bearing
   though: a table cell honours max-width even against its own min-content, so a
   token wider than the cap spills OUT of the header and lands on top of the next
   column's text instead of widening its column. "Manager/Supervisor" has no
   space to break at, and column labels are user-supplied, so that is not
   hypothetical. The cost is that a long word in a narrow column does break
   mid-word: on the reporting instance 2 of the 10 persona headers do. Legible
   and contained beats untruncated and off-screen, which is what was reported.

   Both selectors have to out-specify `.pi-matrix th, .pi-matrix td` above
   (0,1,1) or the nowrap wins and the label overflows its cell into the first
   data column instead of wrapping inside it. */
.pi-matrix thead th.pi-matrix-head { white-space:normal; max-width:104px; min-width:44px; line-height:1.3; vertical-align:bottom; overflow-wrap:break-word; }
/* Same reasoning on the row axis, with more room to spend: this label is paid
   for once for the whole table, not once per column. */
.pi-matrix-sticky { position:sticky; left:0; background:var(--bg-card); text-align:left !important; z-index:1; }
.pi-matrix td.pi-matrix-sticky { white-space:normal; max-width:220px; line-height:1.3; }
.pi-matrix-name { font-weight:600; cursor:pointer; }
.pi-matrix-name:hover { color:var(--accent); }
.pi-matrix-caption { padding:0 20px 10px; font-size:11px; color:var(--text-secondary); }
/* Sits in the .section-card-header flex row, pushed to the trailing edge.
   Deliberately only layout: this button is inside #content-area and outside the
   table's data-no-norm, so ui-normalize.js sweeps it and design-review.css
   dresses it as a .u-btn--neutral with !important. Declaring a size, fill or
   border here would be dead weight that reads as though it were in effect —
   measured: font-size 11px -> 13px, padding 4px 10px -> 0 15px. Letting the
   design system own the chrome is also what keeps it consistent with every
   other header control; only the swatches inside the table opt out, and they
   opt out because their fill IS the data (item 46ae18f5). */
.pi-matrix-swap { margin-left:auto; white-space:nowrap; }
.pi-matrix-note { color:var(--text-secondary); font-style:italic; }
.pi-cell { width:28px; height:24px; border-radius:6px; border:none; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.pi-cell.high { background:#fce8ec; color:#c1153a; }
.pi-cell.medium { background:#fff5e6; color:#b97908; }
.pi-cell.low { background:#c6ebdb; color:#1d7a5a; }
.pi-cell.uncovered { box-shadow:0 0 0 2px #c1153a55; }
.pi-cell:hover { filter:brightness(0.94); }
.pi-cell-empty { color:var(--text-secondary); opacity:.5; }
.pi-matrix-legend { display:flex; gap:14px; padding:10px 14px; font-size:11px; color:var(--text-secondary); align-items:center; flex-wrap:wrap; }
.pi-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.pi-dot.high { background:#fce8ec; box-shadow:inset 0 0 0 2px #c1153a; }
.pi-dot.medium { background:#fff5e6; box-shadow:inset 0 0 0 2px #faa938; }
.pi-dot.low { background:#c6ebdb; box-shadow:inset 0 0 0 2px #3cc69a; }
.pi-dot.uncovered { background:transparent; box-shadow:0 0 0 2px #c1153a55; }
.pi-risk-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; font-size:12px; cursor:pointer; }
.pi-risk-row:hover { border-color:var(--accent); }

/* Journey delta */
.pi-journey-head { display:flex; gap:14px; }
/* The journey header reuses .persona-card-actions, which is opacity:0 until
   `.persona-card:hover` reveals it — and nothing here is a .persona-card, so
   Edit/Delete were painted at opacity 0 forever (item fa524c76: "there was no
   mechanism to edit or delete an existing persona"). This is a header, not a
   hover-reveal card, so the actions simply stay visible. */
.pi-journey-head .persona-card-actions { opacity:1; }
.pi-journey-avatar { width:44px; height:44px; font-size:18px; }
.pi-journey-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pi-journey-desc { font-size:12px; color:var(--text-secondary); margin:4px 0 8px; }
.pi-journey-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--text-secondary); }
.pi-journey-meta b { color:var(--text-primary); font-size:12px; }
.pi-area-group { margin-top:16px; }
.pi-area-title { font-size:13px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.pi-area-count { font-size:11px; font-weight:600; color:var(--text-secondary); background:var(--bg-secondary); border-radius:10px; padding:1px 8px; }
.pi-strip { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; }
.pi-strip-main { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; padding:12px 14px; cursor:pointer; align-items:center; }
@media (max-width: 720px) { .pi-strip-main { grid-template-columns:1fr; } }
.pi-strip-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); margin-bottom:3px; }
.pi-strip-state p { font-size:12.5px; line-height:1.45; margin:0; }
.pi-strip-connector { display:flex; flex-direction:column; align-items:center; gap:3px; }
.pi-strip-arrow { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; }
.pi-strip-type { font-size:10px; color:var(--text-secondary); white-space:nowrap; }
.pi-strip-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 14px; border-top:1px solid var(--border); font-size:11px; }
.pi-strip-mit { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); }
.pi-strip-mit-none { color:#c1153a; font-weight:600; }
.pi-strip-shared { color:var(--text-secondary); font-style:italic; }
.pi-strip-detail { padding:0 14px 12px; }
.pi-ai-chip { font-size:10px; font-weight:700; padding:1px 7px; border-radius:9px; background:var(--accent-soft, #eef2ff); color:var(--accent); }
.pi-ai-chip.new { background:#c6ebdb; color:#1d7a5a; }

/* Suggested personas (item b3f01663). A persona the analysis drafted is not a
   finished one: it carries the warning amber the rest of the screen uses for a
   medium-severity change rather than the accent blue of the AI chips, because
   what it has to say is that somebody must act on it -- not that a machine
   wrote it.

   Both colours of every pair are literal, the way .pi-ai-chip.new pins its
   own: the panel keeps its cream background under theme-dark.css, which
   overrides no .pi-* rule but does flip --text-secondary to #a8adbd — light
   grey on cream, i.e. the notice the whole change exists to make unmissable,
   unreadable for half the users. */
.pi-needs-chip { display:inline-block; margin-top:3px; font-size:10px; font-weight:700; padding:1px 7px; border-radius:9px; background:#fdf0d9; color:#8a5a00; }
.pi-needs-banner, .pi-needs-input { border:1px solid #f0c987; background:#fdf7ec; border-radius:var(--radius-sm); padding:10px 12px; margin:8px 0 10px; }
.pi-needs-banner-title { font-size:12.5px; font-weight:700; color:#8a5a00; }
.pi-needs-banner p, .pi-needs-input p { font-size:12px; color:#6b5636; line-height:1.45; margin:5px 0 0; }
.pi-needs-list { margin:6px 0 8px 16px; font-size:12px; color:#6b5636; line-height:1.5; }
.pi-needs-list strong { color:#4a3a1e; }
.pi-needs-confirm { display:flex; align-items:flex-start; gap:8px; font-size:12px; font-weight:600; color:#6b4c00; cursor:pointer; }
.pi-needs-confirm input { margin-top:2px; flex-shrink:0; }

/* AI analysis drawer */
.pi-ai-body { font-size:13px; }
.pi-ai-intro { color:var(--text-secondary); font-size:12.5px; line-height:1.5; margin-bottom:12px; }
.pi-ai-sources { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.pi-ai-source { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; }
.pi-ai-source.disabled { opacity:.5; cursor:default; }
.pi-ai-source-label { flex:1; font-size:12px; font-weight:600; }
.pi-ai-source-count { font-size:11px; color:var(--text-secondary); background:var(--bg-secondary); border-radius:10px; padding:1px 8px; }
.pi-ai-warn { color:#c1153a; font-size:12px; margin-top:10px; }
.pi-ai-note { font-size:11px; color:var(--text-secondary); margin-top:10px; }
.pi-ai-progress { padding:14px 0; }
.pi-ai-progress-detail { font-size:12px; font-weight:600; margin-bottom:8px; }
.pi-ai-progress-track { height:8px; border-radius:4px; background:var(--bg-secondary); overflow:hidden; }
.pi-ai-progress-bar { height:100%; background:var(--accent); border-radius:4px; transition:width .5s ease; }
.pi-ai-findings { max-height:52vh; overflow-y:auto; padding-right:4px; }
.pi-ai-findings h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin-bottom:8px; }
.pi-finding { display:flex; gap:10px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.pi-finding:has(input:not(:checked)) { opacity:.5; }
.pi-finding input { margin-top:3px; flex-shrink:0; }
.pi-finding-body { flex:1; min-width:0; }
.pi-finding-title { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pi-finding-body p { font-size:12px; color:var(--text-secondary); margin:4px 0; line-height:1.45; }
.pi-finding-refs { display:flex; gap:4px; flex-wrap:wrap; }

/* ============================ Data Set runs ============================ */
/* The run band replaces the six status pills a card used to show. One tick per
   run, oldest left: height and colour carry status, a hairline carries the week
   boundary. Everything else is behind the run-history drawer. */
.ds-band-wrap { border-top:1px solid var(--border-light); padding-top:11px; }
.ds-band-head { display:flex; align-items:baseline; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.ds-eyebrow { font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.ds-band-stat { font-size:11.5px; color:var(--text-secondary); font-weight:600; }
.ds-band-stat b { font-family:var(--mono); font-weight:700; color:var(--text); }
.ds-band-dot { color:var(--border); }
.ds-band-scope { margin-left:auto; font-size:10.5px; color:var(--text-muted); }
.ds-band { position:relative; display:flex; align-items:flex-end; gap:1px; height:30px; padding-bottom:5px;
  border-bottom:1px solid var(--border); overflow:hidden; }

/* The card's run marks. One labelled chip per run, wrapping into rows — a data
   set gets run hundreds of times and a single line can only ever show a slice
   of that. The band above is still what the HISTORY DRAWER draws, where a
   continuous strip of the full history is the point.

   overflow-x is pinned hidden and every flex ancestor gets min-width:0: a flex
   item's default min-width is `auto`, so ONE unbreakable child (a long id, a
   nowrap pill) makes the row refuse to shrink and pushes the whole card past
   the viewport instead of wrapping. That is the "going off the page" report,
   and it is a whole CLASS of bug rather than one element — so it is closed
   here at the container, not chased per child. */
.ds-runs { display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px;
  min-width:0; max-width:100%; overflow-x:hidden; overflow-y:auto;
  max-height:106px;                      /* ~4 rows, then it scrolls */
  padding:3px 1px; scrollbar-width:thin; }
.ds-chip { flex:0 0 auto; min-width:0; border:1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background:color-mix(in srgb, var(--c) 8%, transparent); color:var(--c);
  border-radius:999px; padding:1px 7px; font-family:var(--mono); font-size:10.5px;
  font-weight:700; line-height:1.65; cursor:pointer; white-space:nowrap;
  transition:transform .08s, box-shadow .08s; }
/* A failure is FILLED, so a bad patch reads as a block of red without reading a
   single number — the one thing the tick band did better than pills. */
.ds-chip.loud { background:var(--c); color:#fff;
  border-color:color-mix(in srgb, var(--c) 70%, #000); }
.ds-chip:hover { transform:translateY(-1px);
  box-shadow:0 1px 4px color-mix(in srgb, var(--c) 35%, transparent); }
.ds-chip:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ds-tick { flex:0 0 auto; border:0; padding:0; border-radius:1px 1px 0 0; cursor:pointer; transition:opacity .1s; }
.ds-tick:hover { opacity:1 !important; }
.ds-tick:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ds-band-wk { flex:0 0 auto; width:5px; align-self:stretch; border-left:1px solid var(--border); margin:0 1px; }
.ds-band-foot { display:flex; align-items:center; gap:9px; margin-top:9px; flex-wrap:wrap; }
.ds-latest-btn { display:inline-flex; align-items:center; gap:9px; background:transparent; border:1px solid transparent;
  border-radius:var(--radius); padding:4px 8px; margin-left:-8px; text-align:left; color:inherit; cursor:pointer; font-family:inherit; }
.ds-latest-btn:hover { background:var(--bg-hover); border-color:var(--border); }
.ds-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ds-latest { font-size:12px; font-weight:600; }
.ds-num { font-family:var(--mono); font-weight:700; }
.ds-sep { color:var(--text-muted); margin:0 5px; }
.ds-dim { color:var(--text-secondary); font-weight:500; }

/* run-history drawer */
.ds-hist-scrim { position:fixed; inset:0; background:rgba(15,23,42,.32); z-index:1200; }
.ds-hist { position:fixed; top:0; right:0; bottom:0; width:min(960px,96vw); background:var(--bg-card,#fff); z-index:1201;
  box-shadow:-12px 0 40px rgba(15,23,42,.18); display:flex; flex-direction:column; }
.ds-hist-head { padding:16px 20px 12px; border-bottom:1px solid var(--border); }
.ds-hist-title { display:flex; align-items:center; gap:10px; }
.ds-hist-title h2 { margin:0; font-size:15px; font-weight:700; }
.ds-hist-sum { margin-top:5px; font-size:11.5px; color:var(--text-secondary); font-weight:600; }
.ds-hist-sum b { font-family:var(--mono); color:var(--text); }
.ds-hist-sum .sp { color:var(--border); margin:0 7px; }
.ds-hist-band { padding:13px 20px 4px; border-bottom:1px solid var(--border-light); background:var(--bg-secondary); }
.ds-hist-axis { display:flex; justify-content:space-between; align-items:center; padding:6px 0 9px; font-size:10.5px; color:var(--text-muted); }
.ds-legend { display:inline-flex; align-items:flex-end; gap:5px; font-size:10px; color:var(--text-muted); }
.ds-legend i { width:3px; border-radius:1px 1px 0 0; margin-left:7px; margin-bottom:1px; display:inline-block; }
.ds-legend .wkk { height:13px; width:0; border-left:1px solid var(--border); }
.ds-hist-tools { display:flex; align-items:center; gap:9px; padding:11px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.ds-hist-tools label { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--text-secondary); }
.ds-hist-insight { margin:12px 20px 0; border:1px solid rgba(217,119,6,.35); background:rgba(217,119,6,.07); border-radius:10px;
  padding:9px 12px; font-size:11.5px; color:#92400e; display:flex; align-items:center; gap:9px; }
.ds-hist-insight b { font-family:var(--mono); }
.ds-hist-body { flex:1; overflow:auto; }
.ds-day { position:sticky; top:0; background:var(--bg-card,#fff); z-index:2; display:flex; align-items:baseline; gap:9px;
  padding:13px 20px 6px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid var(--border-light); }
.ds-day span { letter-spacing:0; text-transform:none; font-weight:600; color:var(--text-secondary); font-size:11px; }
.ds-row { display:grid; grid-template-columns:22px 56px 88px minmax(150px,1fr) 92px 60px 104px 122px; align-items:center; gap:8px;
  padding:8px 20px; border-bottom:1px solid var(--border-light); font-size:12px; }
.ds-row:hover { background:var(--bg-hover); }
.ds-row.sel { background:rgba(83,152,246,.1); }
.ds-row .rn { font-family:var(--mono); font-weight:700; }
.ds-st { display:inline-flex; align-items:center; gap:6px; font-weight:600; text-transform:capitalize; }
.ds-stock { display:flex; align-items:center; gap:9px; padding-right:10px; }
.ds-meter { flex:0 0 78px; height:6px; border-radius:3px; background:#e8edf6; overflow:hidden; display:flex; }
.ds-meter i { display:block; height:100%; }
.ds-meter .fresh { background:var(--accent); opacity:.55; }
.ds-meter .recycled { background:var(--primary); opacity:.7; }
.ds-meter .held { background:var(--partial); opacity:.85; }
.ds-stock small { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
.ds-pfx { font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); cursor:copy; }
.ds-pfx:hover { color:var(--accent); }
.ds-who { font-size:11.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-row-actions { display:flex; gap:5px; justify-content:flex-end; opacity:0; transition:.12s; }
.ds-row:hover .ds-row-actions, .ds-row:focus-within .ds-row-actions { opacity:1; }
.ds-err { grid-column:2/-1; font-size:11px; color:#dc2626; font-family:var(--mono); margin-top:-3px; padding-bottom:2px; }
.ds-hist-foot { border-top:1px solid var(--border); padding:11px 20px; display:flex; align-items:center; gap:12px;
  font-size:11.5px; color:var(--text-secondary); font-weight:600; }
.ds-bulk { display:flex; align-items:center; gap:9px; padding:9px 20px; background:var(--primary); color:#fff; font-size:12px; font-weight:600; }
.ds-bulk .a-btn { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; }
.ds-bulk .a-btn:hover { background:rgba(255,255,255,.24); }
.ds-hist-empty { padding:44px 20px; text-align:center; color:var(--text-secondary); }

/* cleanup sheet */
.ds-clean { position:absolute; inset:0; background:rgba(15,23,42,.34); display:flex; align-items:flex-start;
  justify-content:center; padding:34px 20px; overflow:auto; z-index:6; }
.ds-clean-in { background:var(--bg-card,#fff); border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.26); width:100%; max-width:560px; padding:20px 22px 18px; }
.ds-clean-in h3 { margin:0; font-size:15px; font-weight:700; }
.ds-clean-sub { margin:5px 0 15px; font-size:12px; color:var(--text-secondary); }
.ds-opt { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  margin-bottom:8px; cursor:pointer; }
.ds-opt:hover { border-color:#cbd5e1; background:var(--bg-hover); }
.ds-opt:has(input:checked) { border-color:rgba(193,21,58,.4); background:rgba(193,21,58,.04); }
.ds-opt > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; flex:1; }
.ds-opt b { font-size:12.5px; font-weight:600; }
.ds-opt em { font-style:normal; font-size:11px; color:var(--text-secondary); }
.ds-opt .n { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text); }
.ds-floor { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); font-weight:600;
  padding:9px 12px; border:1px dashed var(--border); border-radius:10px; margin:2px 0 12px; }
.ds-guard { font-size:11.5px; border-radius:10px; padding:10px 12px; margin-bottom:12px;
  background:rgba(250,169,56,.1); border:1px solid rgba(250,169,56,.45); color:#8a5200; }
.ds-guard b { font-family:var(--mono); }
.ds-guard .choices { display:flex; gap:14px; margin-top:7px; font-weight:600; flex-wrap:wrap; }
.ds-guard label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ds-outcome { border:1px solid var(--border); border-radius:10px; padding:11px 12px 9px; margin-bottom:12px; background:var(--bg-secondary); }
.ds-outcome-h { font-size:12.5px; font-weight:700; margin-bottom:8px; }
.ds-outcome-h b { font-family:var(--mono); }
.ds-outcome .ds-band { border-bottom:0; height:26px; }
.ds-outcome-f { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.ds-clean-scope { font-size:11.5px; color:var(--text-secondary); line-height:1.6; margin:0 0 12px; }
.ds-clean-rule { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; padding:9px 12px;
  border:1px solid var(--border); border-radius:10px; margin-bottom:15px; cursor:pointer; }
.ds-clean-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ── Application Feedback: the unified detail page (item 76c172ed) ──
   One item — bug or suggestion — reads as two columns: what was reported on the
   left, the status/actions rail on the right. A grid class rather than inline
   styles because the collapse to one column is a media query, which an inline
   style cannot express; below 900px the rail becomes the last block of a single
   readable column instead of a 340px sliver. */
.afb-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-4, 16px);
  align-items: start;
}
.afb-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  min-width: 0;
}
@media (max-width: 900px) {
  .afb-detail { grid-template-columns: minmax(0, 1fr); }
}

/* FormDock — minimized-form chips (item 49daf45d). The dock only exists while a
   form is parked; it is created on demand and removed to display:none when the
   last chip goes. z-index clears the tallest modal overlay in the app (Data Sets
   sits at 10001) so a chip stays reachable while another form is open. */
#form-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10060;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.fd-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  pointer-events: auto;
}
.fd-chip:hover { border-color: var(--primary, #5398f6); }
.fd-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--partial, #e8a33d);
}
.fd-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
/* The excerpt that tells two chips of the same kind apart. */
.fd-chip-hint {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-secondary);
  border-left: 1px solid var(--border);
  padding-left: 8px;
}
.fd-chip-x {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.fd-chip-x:hover { color: var(--fail, #d6455d); }
/* The minimize control a guarded modal grows in its header. It is hidden until
   the form is dirty, so a read-only viewer never shows one. */
.fd-min { font-size: 20px; line-height: 1; padding: 0 4px; }
/* The pulse a non-parkable form plays when a backdrop click is refused, so the
   click reads as "your work is still here" instead of as a dead UI. */
@keyframes fdNudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.fd-nudge { animation: fdNudge .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .fd-nudge { animation: none; outline: 2px solid var(--primary, #5398f6); }
}