/* ===== 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;
  --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);
  --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 {
  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; }

.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: #fff;
  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: rgba(37,51,120,0.45);
  pointer-events: none;
}
.nav-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 26px 6px 28px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font);
  font-size: 12px;
  color: #253378;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search-input::placeholder { color: rgba(37,51,120,0.4); }
.nav-search-input:focus {
  border-color: #5398f6;
  box-shadow: 0 0 0 2px rgba(83,152,246,0.15);
}
.nav-search-clear {
  position: absolute;
  right: 4px;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(37,51,120,0.45);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.nav-search-clear:hover { color: #253378; }
.nav-search-empty {
  padding: 10px 14px;
  font-size: 11px;
  color: rgba(37,51,120,0.55);
  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;
}

.collapsed .nav-section-label {
  text-align: center;
  font-size: 0;
  padding: 8px 0;
}

.collapsed .nav-section-label::after {
  content: '•••';
  font-size: 8px;
  letter-spacing: 2px;
}

.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);
}

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

.collapsed .sidebar-footer .env-label { display: none; }

/* ===== 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;
}

.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);
}

/* ===== 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); }
.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);
  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); border-color: var(--accent); }
.filter-btn.active[data-status="blocked"] { background: #c1153a; border-color: #c1153a; }
.filter-btn.active[data-status="partial"] { background: var(--partial); border-color: var(--partial); }
.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); }
.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);
}

.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)}
/* 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}
/* 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}
/* 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}
}
/* 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: a corner dot 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}
.chat-icon-btn .runs-badge{position:absolute;top:0;right:0;min-width:13px;padding:0 3px;line-height:13px;font-size:8.5px;border-radius:7px;box-shadow:0 0 0 2px var(--bg)}
.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);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 */
.sidebar-header img, .sidebar img[alt="Activate"] {
  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; }
.req-table tbody tr:hover td { background:rgba(83,152,246,0.03); }
.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); }

/* ===== 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); 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-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); 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); }
.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; }

/* ===== 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,#5398f6); 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); 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-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:48px; }
.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); }

/* 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); }
.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); }

/* ====== 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); color:#fff; }
.ev-view-btn { display:inline-flex; align-items:center; gap:4px; background:var(--accent); 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); 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; }

.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; box-shadow:0 4px 16px rgba(0,0,0,0.2); opacity:0; transition:opacity 0.1s; pointer-events:none; }

/* ===== 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); 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; }
.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); 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; }

/* 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; }
.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; }

/* 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; padding:16px 20px; border-bottom:1px solid var(--border); }
.adopt-modal-header h3 { font-size:16px; font-weight:700; margin:0; }
.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.25);
}
.ait-placeholder-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
  animation: ait-float 3s ease-in-out infinite;
}
@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.35);
}
.ait-placeholder-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  line-height: 1.6;
  text-align: center;
}
.ait-placeholder-cmd {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: rgba(83,152,246,0.5);
  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);
}
.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);
}
.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);
  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);
  font-weight: 600;
}

/* --- Communications Calendar --- */
.comms-calendar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.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 {
  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);
}
.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;
}

/* --- Survey Funnel --- */
.survey-funnel {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  margin: 6px 0;
}
.survey-funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 6px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.survey-funnel-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.survey-funnel-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.survey-funnel-arrow {
  font-size: 20px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* --- 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); color: #fff; border-color: var(--accent); }
.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; } }

.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); }
.pi-matrix-sticky { position:sticky; left:0; background:var(--bg-card); text-align:left !important; z-index:1; }
.pi-matrix-name { font-weight:600; cursor:pointer; }
.pi-matrix-name:hover { color:var(--accent); }
.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; }
.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; }

/* 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; }