/* ── RESET & BASE ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;width:100%;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:#fafafa;color:#111;line-height:1.6;overflow-x:hidden;width:100%;position:relative;-webkit-overflow-scrolling:touch}
::selection{background:#111;color:#fff}

/* ── VARIABLES ────────────────────────────────────── */
:root{
  --black:#111;--white:#fff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;
  --gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;
  --radius:14px;--radius-sm:10px;--radius-xs:6px;
  --border:1px solid rgba(0,0,0,.06);
  --border-hover:1px solid rgba(0,0,0,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.03);
  --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.03);
  --shadow-lg:0 4px 24px rgba(0,0,0,.06);
  --transition:all .2s ease;
  --nav-width:300px;
  --search-width:420px;
  --mono:'Space Mono',monospace;
}

/* ── LAYOUT ───────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh}

/* ── TOP BAR ──────────────────────────────────────── */
.top-bar{
  background:var(--gray-900);padding:12px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.top-bar-brand{
  font-family:var(--mono);font-size:14px;font-weight:700;
  color:var(--white);letter-spacing:.1em;text-transform:uppercase;
}
.top-bar-right{display:flex;align-items:center;gap:16px}
.top-bar-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-500);
}

/* ── MODE SWITCHER ────────────────────────────────── */
.mode-bar{
  display:flex;align-items:center;gap:0;padding:0 40px;
  background:var(--white);border-bottom:1px solid rgba(0,0,0,.05);
}
.mode-btn{
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;
  padding:14px 24px;border:none;background:none;cursor:pointer;
  color:var(--gray-400);position:relative;transition:var(--transition);
}
.mode-btn:hover{color:var(--gray-600)}
.mode-btn.active{color:var(--black);font-weight:600}
.mode-btn.active::after{
  content:'';position:absolute;bottom:0;left:12px;right:12px;
  height:2px;background:var(--black);border-radius:2px;
}
.mode-btn .mode-icon{
  display:inline-flex;align-items:center;margin-right:8px;vertical-align:middle;
}
.mode-btn .mode-icon svg{width:16px;height:16px}

/* ── HERO ─────────────────────────────────────────── */
.hero{
  padding:40px 40px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  position:relative;background:var(--white);
}
.hero-content{flex:1;max-width:640px}
.hero-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:10px;
}
.hero h1{
  font-size:clamp(26px,3.5vw,38px);font-weight:700;line-height:1.1;
  letter-spacing:-.025em;margin-bottom:10px;color:var(--gray-900);
}
.hero p{font-size:14px;color:var(--gray-500);max-width:480px;line-height:1.7}
.hero-actions{display:flex;gap:10px;margin-top:18px;align-items:center}

/* ── TABS ─────────────────────────────────────────── */
.tab-bar{
  display:flex;padding:0 40px;gap:0;
  background:var(--white);position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.tab-btn{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:12px 20px;border:none;background:none;cursor:pointer;
  color:var(--gray-400);position:relative;transition:var(--transition);
}
.tab-btn:hover{color:var(--gray-700)}
.tab-btn.active{color:var(--black);font-weight:600}
.tab-btn.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--black);border-radius:2px;
}

/* ── MAIN CONTENT ─────────────────────────────────── */
.main-container{display:flex;flex:1;position:relative}
.nav-panel{
  width:var(--nav-width);min-width:var(--nav-width);
  padding:20px;overflow-y:auto;height:calc(100vh - 160px);
  position:sticky;top:48px;background:var(--white);
  border-right:1px solid rgba(0,0,0,.04);
}
.detail-panel{
  flex:1;padding:32px 40px;overflow-y:auto;min-height:calc(100vh - 160px);
  background:var(--gray-50);
}

/* ── GROUP CHIPS ──────────────────────────────────── */
.group-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.group-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  padding:5px 11px;border:1px solid var(--gray-200);border-radius:20px;
  cursor:pointer;transition:var(--transition);background:var(--white);
  text-transform:uppercase;color:var(--gray-500);
}
.group-chip:hover{border-color:var(--gray-400);color:var(--gray-700);background:var(--gray-50)}
.group-chip.active{background:var(--gray-900);color:var(--white);border-color:var(--gray-900)}

/* ── PROCESS LIST ─────────────────────────────────── */
.process-list{display:flex;flex-direction:column;gap:2px}
.process-item{
  padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;
  transition:var(--transition);border:1px solid transparent;
}
.process-item:hover{background:var(--gray-50)}
.process-item.active{background:var(--gray-100)}
.process-item-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);
  letter-spacing:.03em;margin-bottom:1px;
}
.process-item-name{font-size:13px;font-weight:500;color:var(--gray-700)}
.process-item-count{
  font-family:var(--mono);font-size:10px;color:var(--gray-400);
  margin-top:1px;text-transform:uppercase;letter-spacing:.06em;
}

/* ── DETAIL VIEW ──────────────────────────────────── */
.detail-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:60vh;text-align:center;
}
.detail-empty-icon{
  width:56px;height:56px;border-radius:50%;background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.detail-empty h3{font-size:15px;font-weight:500;color:var(--gray-400);margin-bottom:4px}
.detail-empty p{font-size:13px;color:var(--gray-400)}

.detail-header{margin-bottom:28px}
.detail-group-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:6px;
}
.detail-id{
  font-family:var(--mono);font-size:13px;color:var(--gray-400);
  margin-bottom:2px;letter-spacing:.02em;
}
.detail-name{font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px;color:var(--gray-900)}

.detail-section{margin-bottom:28px}
.detail-section-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:10px;
  padding-bottom:0;border-bottom:none;
}
.detail-purpose{
  font-size:14px;line-height:1.7;color:var(--gray-600);
  padding:16px 20px;background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);border:var(--border);
}
.outcome-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.outcome-item{
  display:flex;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--white);border:var(--border);font-size:13px;color:var(--gray-600);
  box-shadow:var(--shadow-sm);
}
.outcome-num{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);
  min-width:24px;padding-top:1px;
}

/* ── BP CARDS ─────────────────────────────────────── */
.bp-grid{display:flex;flex-direction:column;gap:10px}
.bp-card{
  padding:18px 22px;border-radius:var(--radius);border:var(--border);
  transition:var(--transition);background:var(--white);box-shadow:var(--shadow-sm);
}
.bp-card:hover{box-shadow:var(--shadow);border-color:rgba(0,0,0,.1)}
.bp-card-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.bp-num{
  width:32px;height:32px;border-radius:50%;background:var(--gray-100);
  color:var(--gray-600);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;flex-shrink:0;
}
.bp-label{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);
  letter-spacing:.04em;margin-bottom:2px;
}
.bp-title{font-size:14px;font-weight:600;color:var(--gray-900)}
.bp-desc{font-size:13px;color:var(--gray-600);line-height:1.7;padding-left:50px}
.bp-card.highlight{
  border-color:var(--black);box-shadow:0 0 0 1px var(--black);
  animation:bpHighlight 2s ease-out forwards;
}
@keyframes bpHighlight{
  0%{background:var(--gray-100)}
  100%{background:var(--white)}
}

/* ── GP VIEW ──────────────────────────────────────── */
.pa-selector{display:flex;flex-direction:column;gap:4px;margin-bottom:0}
.pa-item{
  padding:12px 14px;border-radius:var(--radius-sm);cursor:pointer;
  transition:var(--transition);border:1px solid transparent;
}
.pa-item:hover{background:var(--gray-50);border-color:var(--gray-200)}
.pa-item.active{background:var(--gray-100);border-color:var(--gray-300)}
.pa-item-level{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:2px;
}
.pa-item-id{
  font-family:var(--mono);font-size:12px;color:var(--gray-500);margin-bottom:1px;
}
.pa-item-name{font-size:13px;font-weight:500;color:var(--gray-800)}

.gp-card{
  padding:20px 24px;border-radius:var(--radius);border:var(--border);
  transition:var(--transition);background:var(--white);
}
.gp-card:hover{box-shadow:var(--shadow);border-color:var(--gray-300)}
.gp-card-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.gp-id{
  font-family:var(--mono);font-size:12px;color:var(--gray-400);
  letter-spacing:.04em;margin-bottom:2px;
}
.gp-title{font-size:14px;font-weight:600;color:var(--gray-900)}
.gp-desc{font-size:13px;color:var(--gray-600);line-height:1.7;padding-left:50px}
.gp-card.highlight{
  border-color:var(--black);box-shadow:0 0 0 1px var(--black);
  animation:bpHighlight 2s ease-out forwards;
}

/* ── ITEM NOTES (collapsible "See notes" block for BP/GP) ── */
.item-notes-wrap{margin:6px 0 0 50px}
.item-notes-toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:#F9FAFB;border:1px solid var(--gray-200);border-radius:4px;
  padding:3px 8px;font-size:11px;font-family:'DM Sans',sans-serif;font-weight:500;
  color:var(--gray-600);cursor:pointer;transition:var(--transition);
}
.item-notes-toggle:hover{background:#F3F4F6;border-color:var(--gray-300);color:var(--gray-800)}
.item-notes-toggle.open{background:#EEF2FF;border-color:#C7D2FE;color:#3730A3}
.item-notes-toggle svg{flex-shrink:0}
.item-notes-list{
  list-style:none;margin:6px 0 0;padding:10px 12px;
  background:#FFFBEB;border-left:3px solid #F59E0B;border-radius:0 4px 4px 0;
  font-size:12px;color:var(--gray-700);line-height:1.55;
}
.item-notes-list li{padding:3px 0}
.item-notes-list li + li{border-top:1px dashed rgba(245,158,11,.25);margin-top:3px;padding-top:6px}
.item-note-num{font-weight:600;color:#B45309;margin-right:4px}

@media(max-width:1024px){
  .item-notes-wrap{margin-left:0}
}

/* ── SEARCH BUTTON ────────────────────────────────── */
.search-toggle{
  display:flex;align-items:center;gap:8px;padding:10px 20px;
  background:var(--black);color:var(--white);border:none;
  border-radius:var(--radius-sm);cursor:pointer;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;transition:var(--transition);
}
.search-toggle:hover{background:var(--gray-800)}
.search-toggle svg{width:16px;height:16px}

/* ── SEARCH DRAWER ────────────────────────────────── */
.search-overlay{
  position:fixed;top:0;right:0;bottom:0;
  width:var(--search-width);background:var(--black);
  z-index:1000;transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.search-overlay.open{transform:translateX(0)}
.search-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:999;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.search-backdrop.open{opacity:1;pointer-events:all}

.search-header{
  padding:24px 24px 0;display:flex;align-items:center;
  justify-content:space-between;margin-bottom:16px;
}
.search-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-400);
}
.search-close{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--gray-700);
  background:none;color:var(--white);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);font-size:18px;
}
.search-close:hover{border-color:var(--gray-400);background:var(--gray-800)}

.search-input-wrap{padding:0 24px;margin-bottom:16px}
.search-input{
  width:100%;padding:14px 18px;background:var(--gray-900);
  border:1px solid var(--gray-700);border-radius:var(--radius-sm);
  color:var(--white);font-family:'DM Sans',sans-serif;font-size:14px;
  outline:none;transition:var(--transition);
}
.search-input::placeholder{color:var(--gray-500)}
.search-input:focus{border-color:var(--gray-400)}

.search-results{
  flex:1;overflow-y:auto;padding:0 24px 24px;
}
.search-result-count{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:12px;
}
.search-result-item{
  padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--gray-800);margin-bottom:8px;
  cursor:pointer;transition:var(--transition);
}
.search-result-item:hover{border-color:var(--gray-600);background:var(--gray-900)}
.search-result-type{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:4px;
}
.search-result-type.bp-type{color:#6ee7b7}
.search-result-type.gp-type{color:#93c5fd}
.search-result-type.note-type{color:#fbbf24}
.search-result-type.weakness-type{color:#fca5a5}
.search-result-type.strength-type{color:#6ee7b7}
.search-result-type.question-type{color:#fde68a}
.search-result-type.comment-type{color:#a3a3a3}
.search-result-id{
  font-family:var(--mono);font-size:13px;color:var(--white);
  font-weight:600;margin-bottom:3px;
}
.search-result-title{font-size:12px;color:var(--gray-400);line-height:1.5}
.search-result-context{
  font-family:var(--mono);font-size:10px;color:var(--gray-600);
  margin-top:4px;letter-spacing:.03em;
}
.search-empty{
  text-align:center;padding:48px 0;
}
.search-empty p{font-size:13px;color:var(--gray-500)}

/* ── NOTES (Explorer - Learning) ──────────────────── */
.note-area{margin-top:12px;padding-left:50px}
.notes-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.note-item{
  padding:10px 14px;border-radius:var(--radius-sm);
  font-size:13px;line-height:1.6;position:relative;
  white-space:pre-wrap;word-break:break-word;display:flex;align-items:flex-start;gap:10px;
}
.note-item.note-type-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.note-item.note-type-important{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.note-item.note-type-question{background:#fefce8;border:1px solid #fde68a;color:#854d0e}
.note-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;flex-shrink:0;padding-top:2px;
}
.note-tag-note{color:#60a5fa}
.note-tag-important{color:#ef4444}
.note-tag-question{color:#eab308}
.note-text{flex:1}
.note-item-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:var(--transition)}
.note-item:hover .note-item-actions{opacity:1}
.note-item-action{
  background:none;border:none;cursor:pointer;padding:1px;margin:0;
  color:inherit;opacity:.4;transition:var(--transition);line-height:1;
}
.note-item-action:hover{opacity:1}
.note-item-action.note-del:hover{color:#ef4444;opacity:1}
.note-item-action svg{width:12px;height:12px}

.note-add-row{display:flex;gap:6px;flex-wrap:wrap}
.note-add-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-xs);
  cursor:pointer;transition:var(--transition);border:1px dashed;background:none;
}
.note-add-btn.add-note{color:#3b82f6;border-color:#93c5fd}
.note-add-btn.add-note:hover{background:#eff6ff;border-color:#3b82f6}
.note-add-btn.add-important{color:#ef4444;border-color:#fca5a5}
.note-add-btn.add-important:hover{background:#fef2f2;border-color:#ef4444}
.note-add-btn.add-question{color:#eab308;border-color:#fde68a}
.note-add-btn.add-question:hover{background:#fefce8;border-color:#eab308}

.note-edit-area{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.note-textarea{
  width:100%;min-height:60px;padding:10px 14px;
  border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;
  resize:vertical;outline:none;transition:var(--transition);
}
.note-textarea.nt-note{background:#eff6ff;border:1px solid #93c5fd;color:#1e40af}
.note-textarea.nt-important{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
.note-textarea.nt-question{background:#fefce8;border:1px solid #fde68a;color:#854d0e}
.note-textarea:focus{box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.note-save-btn{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  padding:6px 14px;border-radius:var(--radius-xs);cursor:pointer;
  border:none;background:var(--black);color:var(--white);
  transition:var(--transition);align-self:flex-end;
}
.note-save-btn:hover{background:var(--gray-800)}

/* ── FAVOURITES ───────────────────────────────────── */
.fav-btn{
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--gray-300);transition:var(--transition);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fav-btn:hover{color:#f59e0b}
.fav-btn.active{color:#f59e0b}
.fav-btn svg{width:18px;height:18px}
.fav-btn.fav-btn-sm svg{width:16px;height:16px}

.fav-toggle-hero{
  display:flex;align-items:center;gap:8px;padding:10px 20px;
  background:var(--white);color:var(--black);border:var(--border);
  border-radius:var(--radius-sm);cursor:pointer;font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;transition:var(--transition);
}
.fav-toggle-hero:hover{background:var(--gray-50);border-color:var(--gray-300)}
.fav-toggle-hero svg{width:16px;height:16px;color:#f59e0b}
.fav-badge{
  font-family:var(--mono);font-size:10px;background:#fef3c7;
  color:#92400e;padding:1px 6px;border-radius:8px;margin-left:2px;
}

/* Favourites drawer (reuses search drawer pattern) */
.fav-overlay{
  position:fixed;top:0;right:0;bottom:0;
  width:var(--search-width);background:var(--white);
  z-index:1000;transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;border-left:var(--border);
  box-shadow:-8px 0 32px rgba(0,0,0,.08);
}
.fav-overlay.open{transform:translateX(0)}

.fav-header{
  padding:24px 24px 0;display:flex;align-items:center;
  justify-content:space-between;margin-bottom:8px;
}
.fav-title{
  font-size:16px;font-weight:600;color:var(--black);
  display:flex;align-items:center;gap:8px;
}
.fav-title svg{width:18px;height:18px;color:#f59e0b}
.fav-close{
  width:32px;height:32px;border-radius:50%;border:var(--border);
  background:none;color:var(--gray-600);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);font-size:18px;
}
.fav-close:hover{background:var(--gray-50);color:var(--black)}

.fav-tabs{
  display:flex;gap:0;padding:0 24px;border-bottom:var(--border);margin-bottom:0;
}
.fav-tab-btn{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  padding:10px 16px;border:none;background:none;cursor:pointer;
  color:var(--gray-400);position:relative;transition:var(--transition);
}
.fav-tab-btn:hover{color:var(--gray-700)}
.fav-tab-btn.active{color:var(--black);font-weight:600}
.fav-tab-btn.active::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:2px;background:var(--black);
}

.fav-list{
  flex:1;overflow-y:auto;padding:16px 24px 24px;
}
.fav-item{
  padding:14px 16px;border-radius:var(--radius-sm);
  border:var(--border);margin-bottom:8px;
  cursor:pointer;transition:var(--transition);
  display:flex;align-items:flex-start;gap:12px;
}
.fav-item:hover{background:var(--gray-50);border-color:var(--gray-300)}
.fav-item-content{flex:1;min-width:0}
.fav-item-type{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:2px;
}
.fav-item-id{
  font-family:var(--mono);font-size:12px;color:var(--gray-600);margin-bottom:1px;
}
.fav-item-name{font-size:13px;font-weight:500;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-item-remove{
  background:none;border:none;cursor:pointer;padding:2px;
  color:var(--gray-300);transition:var(--transition);flex-shrink:0;
}
.fav-item-remove:hover{color:#ef4444}
.fav-item-remove svg{width:14px;height:14px}
.fav-empty{
  text-align:center;padding:48px 16px;
}
.fav-empty p{font-size:13px;color:var(--gray-400);line-height:1.7}

/* Fav star in process item nav */
.process-item-row{display:flex;align-items:flex-start;gap:8px}
.process-item-row .process-item-info{flex:1;min-width:0}

/* ── SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}
.search-overlay ::-webkit-scrollbar-thumb{background:var(--gray-700)}
.search-overlay ::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}

/* ── LEVEL BADGES ─────────────────────────────────── */
.level-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:12px;
  background:var(--gray-100);color:var(--gray-600);border:var(--border);
}

/* ── ASSESSMENT PROJECTS ──────────────────────────── */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:32px 48px}
.project-card{
  padding:24px;border:var(--border);border-radius:var(--radius);
  cursor:pointer;transition:var(--transition);background:var(--white);
  position:relative;box-shadow:var(--shadow-sm);
}
.project-card:hover{box-shadow:var(--shadow);border-color:rgba(0,0,0,.1)}
.project-card-name{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--black)}
.project-card-project{font-size:13px;color:var(--gray-500);margin-bottom:8px}
.project-card-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-400);
  display:flex;gap:16px;flex-wrap:wrap;
}
.project-card-actions{
  position:absolute;top:16px;right:16px;display:flex;gap:4px;opacity:0;transition:var(--transition);
}
.project-card:hover .project-card-actions{opacity:1}
.project-card-action{
  background:none;border:none;cursor:pointer;padding:4px;color:var(--gray-400);transition:var(--transition);
}
.project-card-action:hover{color:var(--black)}
.project-card-action.delete-action:hover{color:#ef4444}
.project-card-action svg{width:14px;height:14px}
.project-card-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  padding:3px 8px;border-radius:8px;background:var(--gray-100);color:var(--gray-500);
}

/* New project card */
.project-card-new{
  border:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:140px;gap:8px;
  color:var(--white);background:var(--black);
}
.project-card-new:hover{background:var(--gray-800);color:var(--white)}
.project-card-new svg{width:32px;height:32px}
.project-card-new span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* Project form modal */
.project-modal-overlay{
  position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
.project-modal{
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.15);width:520px;max-width:90vw;
  padding:32px;
}
.project-modal h3{font-size:18px;font-weight:700;margin-bottom:20px}
.project-modal-field{margin-bottom:16px}
.project-modal-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:6px;display:block;
}
.project-modal-input{
  width:100%;padding:10px 14px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:var(--transition);
}
.project-modal-input:focus{border-color:var(--gray-400)}
.project-modal-textarea{
  width:100%;padding:10px 14px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;resize:vertical;
  min-height:60px;transition:var(--transition);
}
.project-modal-textarea:focus{border-color:var(--gray-400)}
.project-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}
.project-modal-btn{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:10px 24px;border-radius:var(--radius-sm);cursor:pointer;border:none;transition:var(--transition);
}
.project-modal-btn-primary{background:var(--black);color:var(--white)}
.project-modal-btn-primary:hover{background:var(--gray-800)}
.project-modal-btn-cancel{background:var(--gray-100);color:var(--gray-600);border:var(--border)}
.project-modal-btn-cancel:hover{background:var(--gray-200)}

/* Active project bar */
.active-project-bar{
  display:flex;align-items:center;gap:12px;padding:10px 40px;
  background:var(--white);border-bottom:1px solid rgba(0,0,0,.04);
}
.active-project-bar-name{font-size:14px;font-weight:600;color:var(--gray-800)}
.active-project-bar-info{font-size:12px;color:var(--gray-400);flex:1}
.active-project-bar-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--radius-xs);cursor:pointer;
  border:1px solid rgba(0,0,0,.08);background:var(--white);color:var(--gray-500);transition:var(--transition);
}
.active-project-bar-btn:hover{background:var(--gray-50);color:var(--gray-800);border-color:rgba(0,0,0,.15)}

/* Collapsible level sections */
.level-section{margin-bottom:10px;border:var(--border);border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm)}

/* ── OVERVIEW MATRIX ──────────────────────────────── */
.overview-panel{padding:32px 48px;overflow-x:auto;max-width:100%}
.overview-table{
  border-collapse:collapse;width:100%;font-size:12px;
}
.overview-table th,.overview-table td{
  padding:4px 2px;text-align:center;border:1px solid var(--gray-200);
  font-family:var(--mono);font-size:10px;
}
.overview-table th{
  background:var(--gray-50);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-600);position:sticky;top:0;z-index:2;
}
.overview-table th.ov-group{
  background:var(--black);color:var(--white);font-size:11px;letter-spacing:.06em;
}
.overview-table td.ov-process-name{
  text-align:left;font-family:'DM Sans',sans-serif;font-size:12px;
  font-weight:500;padding:6px 10px;white-space:nowrap;min-width:180px;
  color:var(--gray-800);
}
.overview-table td.ov-process-id{
  font-weight:600;padding:6px 8px;white-space:nowrap;color:var(--gray-600);
}
.overview-table td.ov-cap{
  font-weight:700;font-size:13px;padding:6px 8px;
}
.ov-cell{width:28px;height:24px;min-width:28px}
.ov-N{background:#ef4444;color:#fff}
.ov-P{background:#f97316;color:#fff}
.ov-L{background:#eab308;color:#fff}
.ov-F{background:#22c55e;color:#fff}
.ov-none{background:var(--gray-100);color:var(--gray-300)}
.ov-pa-cell{font-weight:700;font-size:11px}
.ov-sep{border-left:2px solid var(--gray-400) !important}
/* PA column headers - make them stand out */
.ov-pa-header{
  background:var(--gray-800) !important;color:var(--white) !important;
  font-size:10px !important;font-weight:700 !important;letter-spacing:.04em;
  min-width:36px !important;writing-mode:horizontal-tb;
}
/* PA data cells - wider with stronger border */
.ov-pa-data{
  min-width:36px !important;font-weight:700 !important;font-size:12px !important;
  border-left:2px solid var(--gray-400) !important;
  border-right:2px solid var(--gray-400) !important;
}
.overview-title{
  font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.02em;
  margin-bottom:4px;
}
.overview-subtitle{font-size:13px;color:var(--gray-500);margin-bottom:24px}
.overview-back-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  background:var(--white);border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:var(--transition);margin-bottom:20px;color:var(--gray-600);
}
.overview-back-btn:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--black)}
.overview-back-btn svg{width:16px;height:16px}
.level-section-header{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:var(--gray-50);cursor:pointer;transition:var(--transition);
  user-select:none;
}
.level-section-header:hover{background:var(--gray-100)}
.level-section-chevron{
  width:20px;height:20px;transition:transform .25s ease;flex-shrink:0;
  color:var(--gray-400);
}
.level-section.collapsed .level-section-chevron{transform:rotate(-90deg)}
.level-section-level{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:12px;
  background:var(--black);color:var(--white);flex-shrink:0;
}
.level-section-title{font-size:14px;font-weight:600;flex:1;color:var(--gray-800)}
.level-section-rating{
  font-family:var(--mono);font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--radius-xs);flex-shrink:0;
}
.level-section-body{padding:20px;display:block}
.level-section.collapsed .level-section-body{display:none}
.level-section-inherited{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-400);
  padding:2px 8px;border-radius:8px;background:var(--gray-100);
  flex-shrink:0;
}

/* Link dropdown */
.link-dropdown-overlay{  position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
.link-dropdown{
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.15);width:440px;max-height:500px;
  display:flex;flex-direction:column;overflow:hidden;
}
.link-dropdown-header{
  padding:16px 20px 0;display:flex;align-items:center;justify-content:space-between;
}
.link-dropdown-title{font-size:14px;font-weight:600;color:var(--black)}
.link-dropdown-close{
  background:none;border:none;cursor:pointer;font-size:18px;
  color:var(--gray-400);padding:4px;
}
.link-dropdown-close:hover{color:var(--black)}
.link-dropdown-search{
  margin:12px 20px;padding:10px 14px;border:var(--border);
  border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;
  font-size:13px;outline:none;width:calc(100% - 40px);
}
.link-dropdown-search:focus{border-color:var(--gray-400)}
.link-dropdown-list{
  flex:1;overflow-y:auto;padding:0 20px 16px;
}
.link-dropdown-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);
  font-size:13px;
}
.link-dropdown-item:hover{background:var(--gray-50)}
.link-dropdown-item.selected{background:#eff6ff;border:1px solid #bfdbfe}
.link-dropdown-item-check{
  width:18px;height:18px;border-radius:4px;border:1.5px solid var(--gray-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:var(--transition);font-size:12px;color:var(--white);
}
.link-dropdown-item.selected .link-dropdown-item-check{
  background:var(--black);border-color:var(--black);
}
.link-dropdown-item-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-500);min-width:80px;
}
.link-dropdown-item-name{color:var(--gray-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-dropdown-done{
  margin:0 20px 16px;padding:10px;border:none;border-radius:var(--radius-sm);
  background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);
}
.link-dropdown-done:hover{background:var(--gray-800)}

/* ── RESPONSIVE: TABLET (≤1024px) ─────────────────── */
@media(max-width:1024px){
  .hero{padding:28px 24px}
  .hero h1{font-size:24px}
  .overview-wrapper,.evidence-panel-wrapper{padding:16px 20px}
  .project-grid{padding:0 24px 24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}

/* ── RESPONSIVE: TABLET/SMALL LAPTOP STACK (≤1024px) ──── */
@media(max-width:1024px){
  /* GLOBAL: prevent ANY horizontal overflow */
  *{max-width:100vw}
  .app{overflow-x:hidden;width:100vw}

  /* Top bar */
  .top-bar{padding:10px 12px;gap:6px}
  .top-bar-brand{font-size:11px;letter-spacing:.06em}
  .top-bar-label{display:none}
  .user-name{display:none}
  .user-avatar{width:26px;height:26px;font-size:11px}
  .role-badge{font-size:8px;padding:2px 5px}
  .user-menu-trigger svg{display:none}

  /* Mode switcher */
  .mode-bar{padding:0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mode-btn{padding:10px 14px;font-size:12px;white-space:nowrap}
  .mode-btn .mode-icon{display:none}

  /* Hero */
  .hero{padding:20px 14px 16px;flex-direction:column;align-items:flex-start}
  .hero h1{font-size:18px}
  .hero p{font-size:12px}
  .hero-actions{flex-wrap:wrap;gap:6px}
  .search-toggle,.fav-toggle-hero{font-size:12px;padding:8px 14px}

  /* Tabs */
  .tab-bar{padding:0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-btn{padding:10px 12px;font-size:11px;white-space:nowrap}

  /* Main layout: stack vertically */
  .main-container,.assess-container{flex-direction:column}
  .nav-panel,.assess-nav{
    width:100%!important;min-width:100%!important;
    border-right:none!important;border-bottom:var(--border);
    height:auto!important;max-height:200px;position:relative!important;top:0!important;
    padding:10px;overflow-y:auto;
  }
  .detail-panel,.assess-detail{padding:14px!important;min-height:auto!important}

  /* Group chips */
  .group-chips{flex-wrap:wrap;gap:3px;margin-bottom:8px}
  .group-chip{padding:4px 8px;font-size:9px}

  /* Process list */
  .process-item{padding:7px 8px}
  .process-item-id{font-size:10px}
  .process-item-name{font-size:11px}
  .process-item-count{font-size:8px}

  /* Detail */
  .detail-header{margin-bottom:16px}
  .detail-group-label{font-size:9px}
  .detail-name{font-size:17px!important;letter-spacing:-.01em}
  .detail-purpose{padding:10px 12px;font-size:12px}
  .detail-section{margin-bottom:16px}
  .outcome-item{padding:8px 10px;font-size:12px}

  /* BP/GP cards */
  .bp-grid{gap:8px}
  .bp-card,.gp-card{padding:12px 14px}
  .bp-card-header{flex-wrap:wrap;gap:4px}
  .bp-num{width:26px;height:26px;font-size:11px}
  .bp-label,.gp-id{font-size:10px}
  .bp-title,.gp-title{font-size:12px}
  .bp-desc,.gp-desc{font-size:11px;line-height:1.5}

  /* Rating pills — touch friendly */
  .rating-pills{gap:3px;flex-shrink:0}
  .rating-pill{padding:5px 9px;font-size:10px;min-width:30px;text-align:center}

  /* Assessment action bar — horizontal scroll */
  .assess-action-bar{
    padding:6px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:5px;flex-wrap:nowrap;
  }
  .action-btn{padding:6px 10px;font-size:10px;white-space:nowrap;flex-shrink:0}
  .action-btn svg{width:11px;height:11px}

  /* Active project bar */
  .active-project-bar{padding:8px 12px}
  .project-bar-name{font-size:13px}
  .project-bar-meta{font-size:11px}

  /* PA rating bar */
  .pa-rating-bar{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 10px}
  .pa-rating-label{font-size:12px}
  .pa-rating-values{flex-wrap:wrap;gap:6px;font-size:11px}

  /* Assess level */
  .assess-level-header{padding:8px 10px;font-size:12px}
  .assess-level-body{padding:10px 0}

  /* Findings — stack vertically on mobile */
  .finding-item{padding:8px 10px}
  .finding-top{flex-direction:column;gap:6px}
  .finding-right{flex-direction:row;align-items:center;gap:8px}
  .finding-text{font-size:12px}
  .finding-add-row{flex-wrap:wrap;gap:4px}
  .finding-add-btn{font-size:10px;padding:4px 8px}
  .finding-textarea{font-size:13px;min-height:80px;width:100%}
  .finding-edit-area{flex-direction:column}
  .finding-edit-actions{flex-wrap:wrap;gap:6px}

  /* Capability panel */
  .cap-level-panel{padding:14px}
  .cap-level-display{flex-direction:column;gap:8px}
  .cap-level-number{font-size:24px;width:44px;height:44px}

  /* Project cards */
  .project-grid{padding:0 12px 16px;grid-template-columns:1fr;gap:10px}
  .project-card{padding:14px}
  .project-card-new{min-height:80px}
  .project-card-title{font-size:14px}

  /* Overview & Evidence panels */
  .overview-wrapper,.evidence-panel-wrapper{padding:10px 12px}
  .overview-header h3,.evidence-header h3{font-size:15px}
  .overview-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .overview-table{min-width:500px}
  .overview-table th,.overview-table td{padding:2px 3px;font-size:7px}
  .evidence-table{font-size:11px}
  .evidence-table th,.evidence-table td{padding:5px 6px}

  /* Search & Favourites drawers — full width */
  :root{--search-width:100vw}
  .search-overlay,.fav-overlay{width:100vw!important;max-width:100vw!important;right:0!important}
  .search-header,.fav-header{padding:12px 14px}
  .search-input-wrap{padding:10px 14px}

  /* Admin */
  .admin-content{padding:0 12px 20px}
  .admin-section-header{flex-direction:column;align-items:flex-start;gap:8px}
  .invite-form{padding:14px}
  .invite-form .form-row{flex-direction:column;gap:0}
  .admin-table{font-size:11px;display:block;overflow-x:auto}
  .admin-table th,.admin-table td{padding:6px 8px;white-space:nowrap}
  .admin-actions{flex-wrap:wrap}

  /* Modals — full width */
  .modal,.modal-sm,.project-modal{width:96%!important;max-width:96%!important;max-height:92vh}
  .modal-header{padding:14px 16px}
  .modal-header h2{font-size:16px}
  .modal-body{padding:14px 16px}
  .form-row{flex-direction:column;gap:0}
  .form-actions{flex-wrap:wrap}

  /* Chat */
  .chat-pill{bottom:16px;right:12px;padding:10px 14px;font-size:11px}
  .chat-panel{
    width:calc(100vw - 12px)!important;right:6px!important;bottom:6px!important;
    height:calc(100vh - 56px);max-height:none!important;
    border-radius:var(--radius-sm);
  }

  /* Login */
  .login-card{padding:32px 20px;max-width:100%}

  /* Notes */
  .note-textarea{font-size:13px;min-height:60px}
  .note-add-row{flex-wrap:wrap;gap:4px}
  .note-add-btn{font-size:10px;padding:3px 8px}

  /* Scope selector */
  .scope-selector{max-height:180px}
  .scope-process{font-size:11px}

  /* Assessor selector */
  .assessor-chips{gap:4px}
  .chip{font-size:11px;padding:3px 8px}

  /* Data tree */
  .data-tree-item{font-size:11px}
  .data-tree-group-header{font-size:12px}
}

/* ── ASSESSMENT SECTION ───────────────────────────── */
.assess-container{display:flex;flex:1;position:relative}
.assess-nav{
  width:var(--nav-width);min-width:var(--nav-width);
  padding:20px;overflow-y:auto;height:calc(100vh - 160px);
  position:sticky;top:48px;background:var(--white);
  border-right:1px solid rgba(0,0,0,.04);
}
.assess-detail{flex:1;padding:32px 40px;overflow-y:auto;min-height:calc(100vh - 160px);background:var(--gray-50)}

/* Rating pills */
.rating-group{display:flex;gap:3px;align-items:center}
.rating-pill{
  font-family:var(--mono);font-size:11px;font-weight:700;
  width:32px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);
  border:1px solid rgba(0,0,0,.08);background:var(--white);color:var(--gray-400);
}
.rating-pill:hover{border-color:rgba(0,0,0,.2);background:var(--gray-50)}
.rating-pill.selected-N{background:#fef2f2;color:#dc2626;border-color:#fca5a5}
.rating-pill.selected-P{background:#fff7ed;color:#ea580c;border-color:#fdba74}
.rating-pill.selected-L{background:#fefce8;color:#a16207;border-color:#fde68a}
.rating-pill.selected-F{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.rating-pill.selected-none{background:var(--gray-100);color:var(--gray-400);border-color:var(--gray-300)}

/* Process rating summary bar */
.assess-process-header{
  padding:20px 24px;background:var(--gray-50);border:var(--border);
  border-radius:var(--radius);margin-bottom:24px;
}
.assess-process-rating{
  display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap;
}
.assess-rating-rec{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-500);
  display:flex;align-items:center;gap:6px;
}
.assess-rating-rec-value{
  font-size:14px;font-weight:700;padding:4px 10px;border-radius:var(--radius-xs);
}
.assess-override-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-400);
}

/* Findings (comments, weaknesses, strengths, questions) */
/* .findings-area, .finding-item — overridden in production styles below */
.findings-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.finding-item.finding-comment{background:#f9fafb;border:1px solid rgba(0,0,0,.05);color:var(--gray-600)}
.finding-item.finding-weakness{background:#fef2f2;border:1px solid rgba(239,68,68,.15);color:#991b1b}
.finding-item.finding-strength{background:#f0fdf4;border:1px solid rgba(34,197,94,.15);color:#166534}
.finding-item.finding-question{background:#fefce8;border:1px solid rgba(234,179,8,.2);color:#854d0e}
.finding-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;flex-shrink:0;padding-top:2px;min-width:20px;
}
.finding-tag-comment{color:var(--gray-400)}
.finding-tag-weakness{color:#ef4444}
.finding-tag-strength{color:#22c55e}
.finding-tag-question{color:#eab308}
/* .finding-text — overridden in production styles below */
/* Finding actions: handled in production styles section */

/* Add finding buttons */
.finding-add-row{display:flex;gap:6px;flex-wrap:wrap}
.finding-add-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-xs);
  cursor:pointer;transition:var(--transition);border:1px dashed;background:none;
}
.finding-add-btn.add-comment{color:var(--gray-400);border-color:var(--gray-300)}
.finding-add-btn.add-comment:hover{background:#f5f5f5;border-color:var(--gray-400)}
.finding-add-btn.add-weakness{color:#ef4444;border-color:#fca5a5}
.finding-add-btn.add-weakness:hover{background:#fef2f2;border-color:#ef4444}
.finding-add-btn.add-strength{color:#22c55e;border-color:#86efac}
.finding-add-btn.add-strength:hover{background:#f0fdf4;border-color:#22c55e}
.finding-add-btn.add-question{color:#eab308;border-color:#fde68a}
.finding-add-btn.add-question:hover{background:#fefce8;border-color:#eab308}

.finding-edit-area{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.finding-input{
  flex:1;padding:8px 12px;border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
  transition:var(--transition);resize:none;min-height:36px;
}
.finding-input-comment{background:#f5f5f5;border:1px solid var(--gray-300);color:var(--gray-700)}
.finding-input-weakness{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
.finding-input-strength{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.finding-input-question{background:#fefce8;border:1px solid #fde68a;color:#854d0e}
.finding-input:focus{box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.finding-save-btn{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  padding:6px 14px;border-radius:var(--radius-xs);cursor:pointer;
  border:none;background:var(--black);color:var(--white);
  transition:var(--transition);align-self:flex-end;
}
.finding-save-btn:hover{background:var(--gray-800)}

/* Link/map finding to multiple items */
.finding-links{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;
}
.finding-link-chip{
  font-family:var(--mono);font-size:9px;letter-spacing:.03em;
  padding:2px 6px;border-radius:4px;background:var(--gray-100);
  color:var(--gray-500);border:1px solid var(--gray-200);
}

/* Link dropdown */
.link-dropdown{
  position:fixed;z-index:1100;width:340px;max-height:360px;
  background:var(--white);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
}
.link-dropdown-header{
  padding:12px 14px 8px;border-bottom:var(--border);
}
.link-dropdown-input{
  width:100%;padding:8px 12px;border:var(--border);border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
}
.link-dropdown-input:focus{border-color:var(--gray-400)}
.link-dropdown-list{
  flex:1;overflow-y:auto;padding:6px;
}
.link-dropdown-item{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);
  font-size:12px;
}
.link-dropdown-item:hover{background:var(--gray-50)}
.link-dropdown-item.selected{background:#eff6ff;border:1px solid #bfdbfe}
.link-dropdown-item-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-600);min-width:90px;
}
.link-dropdown-item-name{color:var(--gray-500);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-dropdown-check{width:16px;height:16px;border:1px solid var(--gray-300);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#2563eb}
.link-dropdown-check.checked{background:#eff6ff;border-color:#93c5fd}
.link-dropdown-footer{
  padding:8px 14px;border-top:var(--border);display:flex;justify-content:flex-end;gap:6px;
}
.link-dropdown-backdrop{
  position:fixed;inset:0;z-index:1099;
}

/* Capability level result panel */
.cap-level-panel{
  margin-top:28px;padding:20px 24px;background:var(--white);
  border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.cap-level-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:12px;
}
.cap-level-grid{display:flex;flex-direction:column;gap:6px}
.cap-level-row{
  display:flex;align-items:center;gap:12px;padding:8px 12px;
  border-radius:var(--radius-sm);background:var(--gray-50);border:none;
}
.cap-level-pa{font-family:var(--mono);font-size:11px;color:var(--gray-500);min-width:50px}
.cap-level-name{font-size:13px;color:var(--gray-600);flex:1}
.cap-level-rating{
  font-family:var(--mono);font-size:13px;font-weight:700;
  min-width:28px;text-align:center;
}
.cap-level-req{
  font-family:var(--mono);font-size:10px;color:var(--gray-400);
  letter-spacing:.04em;min-width:60px;text-align:right;
}
.cap-level-check{font-size:14px;min-width:20px;text-align:center}
.cap-result{
  margin-top:12px;padding:12px 16px;border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.cap-result.pass-F{background:#f0fdf4;color:#166534;border:none}
.cap-result.pass-L{background:#fefce8;color:#854d0e;border:none}
.cap-result.fail{background:#fef2f2;color:#991b1b;border:none}

/* Assessment nav item with rating indicator */
.assess-nav-item{
  padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;
  transition:var(--transition);border:1px solid transparent;
  display:flex;align-items:center;gap:10px;
}
.assess-nav-item:hover{background:var(--gray-50)}
.assess-nav-item.active{background:var(--gray-100)}
.assess-nav-info{flex:1;min-width:0}
.assess-nav-rating{
  font-family:var(--mono);font-size:11px;font-weight:700;
  width:24px;height:24px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.assess-nav-rating.r-N{background:#fef2f2;color:#dc2626}
.assess-nav-rating.r-P{background:#fff7ed;color:#ea580c}
.assess-nav-rating.r-L{background:#fefce8;color:#a16207}
.assess-nav-rating.r-F{background:#f0fdf4;color:#16a34a}
.assess-nav-rating.r-none{background:var(--gray-100);color:var(--gray-400)}

/* Level badge in nav */
.assess-nav-level{
  display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
}
.assess-nav-level-badges{display:flex;gap:2px}
.level-dot{
  width:20px;height:20px;border-radius:4px;
  font-family:var(--mono);font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-200);color:var(--gray-300);background:var(--white);
}
.level-dot.achieved-F{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.level-dot.achieved-L{background:#fefce8;color:#a16207;border-color:#fde68a}
.level-dot.not-achieved{background:var(--white);color:var(--gray-300);border-color:var(--gray-200)}

/* ── ANIMATIONS ───────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease forwards}


/* ═══════════════════════════════════════════════════════
   PRODUCTION APP ADDITIONS
   Additional styles for multi-user production features
   ═══════════════════════════════════════════════════════ */

/* ── AUTH STYLES ─────────────────────────────────────── */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);
}
.auth-card{
  width:420px;max-width:90vw;padding:40px;background:var(--white);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);border:var(--border);
}
.auth-card-logo{
  font-family:var(--mono);font-size:16px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--black);
  text-align:center;margin-bottom:8px;
}
.auth-card-title{
  font-size:22px;font-weight:700;text-align:center;
  margin-bottom:4px;color:var(--gray-900);
}
.auth-card-subtitle{
  font-size:13px;color:var(--gray-500);text-align:center;
  margin-bottom:28px;line-height:1.6;
}
.auth-field{margin-bottom:16px}
.auth-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:6px;display:block;
}
.auth-input{
  width:100%;padding:12px 16px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;outline:none;
  transition:var(--transition);background:var(--white);
}
.auth-input:focus{border-color:var(--gray-400);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.auth-input.auth-input-error{border-color:#ef4444}
.auth-error{font-size:12px;color:#ef4444;margin-top:4px}
.auth-btn{
  width:100%;padding:12px;border:none;border-radius:var(--radius-sm);
  background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);
  margin-top:8px;
}
.auth-btn:hover{background:var(--gray-800)}
.auth-btn:disabled{background:var(--gray-300);cursor:not-allowed}
.auth-link{
  display:block;text-align:center;margin-top:16px;
  font-size:13px;color:var(--gray-500);
}
.auth-link a{color:var(--black);font-weight:500;text-decoration:none}
.auth-link a:hover{text-decoration:underline}
.auth-divider{
  display:flex;align-items:center;gap:12px;margin:20px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-400);
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--gray-200);
}

/* Role badges */
.role-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 10px;border-radius:12px;
  font-weight:600;
}
.role-badge-admin{background:#f3e8ff;color:#7c3aed;border:1px solid #ddd6fe}
.role-badge-assessor{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.role-badge-user{background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}

/* User avatar in top bar */
.top-bar-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--gray-700);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;cursor:pointer;
  transition:var(--transition);
}
.top-bar-avatar:hover{background:var(--gray-600)}
.top-bar-user-menu{
  position:absolute;top:100%;right:0;margin-top:8px;
  width:220px;background:var(--white);border:var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  z-index:1200;overflow:hidden;
}
.top-bar-user-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  font-size:13px;color:var(--gray-700);cursor:pointer;
  transition:var(--transition);border:none;background:none;width:100%;
  text-align:left;font-family:'DM Sans',sans-serif;
}
.top-bar-user-menu-item:hover{background:var(--gray-50)}
.top-bar-user-menu-item svg{width:16px;height:16px;color:var(--gray-400)}
.top-bar-user-menu-divider{height:1px;background:var(--gray-100);margin:4px 0}


/* ── ADMIN PANEL STYLES ──────────────────────────────── */
.admin-panel{padding:32px 48px}
.admin-panel-title{
  font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.02em;
  margin-bottom:4px;color:var(--gray-900);
}
.admin-panel-subtitle{font-size:13px;color:var(--gray-500);margin-bottom:24px}

/* Admin tabs */
.admin-tabs{
  display:flex;gap:0;border-bottom:1px solid rgba(0,0,0,.05);margin-bottom:24px;
}
.admin-tab-btn{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  padding:12px 20px;border:none;background:none;cursor:pointer;
  color:var(--gray-400);position:relative;transition:var(--transition);
}
.admin-tab-btn:hover{color:var(--gray-700)}
.admin-tab-btn.active{color:var(--black);font-weight:600}
.admin-tab-btn.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--black);border-radius:2px;
}

/* User management table */
.admin-table-wrap{
  background:var(--white);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);
  padding:12px 16px;text-align:left;background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
}
.admin-table td{
  padding:12px 16px;font-size:13px;color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--gray-50)}
.admin-table-actions{display:flex;gap:6px}
.admin-table-action{
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--gray-400);transition:var(--transition);
}
.admin-table-action:hover{color:var(--black)}
.admin-table-action.danger:hover{color:#ef4444}
.admin-table-action svg{width:14px;height:14px}
.admin-user-cell{display:flex;align-items:center;gap:10px}
.admin-user-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--gray-200);
  color:var(--gray-600);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:700;flex-shrink:0;
}
.admin-user-name{font-weight:500;color:var(--gray-800)}
.admin-user-email{font-size:12px;color:var(--gray-400)}
.admin-status-active{color:#16a34a}
.admin-status-pending{color:#eab308}
.admin-status-disabled{color:var(--gray-400)}

/* Invite form */
.admin-invite-form{
  display:flex;gap:10px;align-items:flex-end;margin-bottom:20px;
  padding:20px;background:var(--white);border:var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.admin-invite-field{flex:1}
.admin-invite-field label{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:4px;display:block;
}
.admin-invite-field input,
.admin-invite-field select{
  width:100%;padding:10px 14px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
  transition:var(--transition);background:var(--white);
}
.admin-invite-field input:focus,
.admin-invite-field select:focus{border-color:var(--gray-400)}
.admin-invite-btn{
  padding:10px 20px;border:none;border-radius:var(--radius-sm);
  background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.admin-invite-btn:hover{background:var(--gray-800)}

/* Data management tree view */
.admin-tree{
  padding:16px;background:var(--white);border:var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.admin-tree-node{padding-left:0}
.admin-tree-node .admin-tree-node{padding-left:20px}
.admin-tree-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);
}
.admin-tree-item:hover{background:var(--gray-50)}
.admin-tree-chevron{
  width:16px;height:16px;color:var(--gray-400);transition:transform .2s ease;
  flex-shrink:0;
}
.admin-tree-chevron.collapsed{transform:rotate(-90deg)}
.admin-tree-icon{
  width:20px;height:20px;color:var(--gray-400);flex-shrink:0;
}
.admin-tree-label{font-size:13px;color:var(--gray-700);flex:1}
.admin-tree-count{
  font-family:var(--mono);font-size:10px;color:var(--gray-400);
  padding:2px 6px;border-radius:8px;background:var(--gray-100);
}
.admin-tree-children{overflow:hidden}
.admin-tree-children.collapsed{display:none}

/* CSV import/export buttons */
.admin-data-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.admin-data-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:var(--transition);
}
.admin-data-btn svg{width:16px;height:16px}
.admin-data-btn-import{
  background:var(--white);color:var(--gray-700);border:var(--border);
}
.admin-data-btn-import:hover{background:var(--gray-50);border-color:var(--gray-300)}
.admin-data-btn-export{
  background:var(--black);color:var(--white);border:none;
}
.admin-data-btn-export:hover{background:var(--gray-800)}
.admin-data-dropzone{
  border:2px dashed var(--gray-300);border-radius:var(--radius);
  padding:32px;text-align:center;transition:var(--transition);
  margin-bottom:16px;
}
.admin-data-dropzone:hover,.admin-data-dropzone.dragover{
  border-color:var(--gray-500);background:var(--gray-50);
}
.admin-data-dropzone p{font-size:13px;color:var(--gray-500);margin-bottom:8px}
.admin-data-dropzone span{font-size:12px;color:var(--gray-400)}


/* ── EVIDENCE STYLES ─────────────────────────────────── */
.evidence-table-wrap{
  background:var(--white);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-top:16px;
}
.evidence-table{width:100%;border-collapse:collapse}
.evidence-table th{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);
  padding:10px 14px;text-align:left;background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
}
.evidence-table td{
  padding:10px 14px;font-size:13px;color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);vertical-align:middle;
}
.evidence-table tr:last-child td{border-bottom:none}
.evidence-table tr:hover td{background:var(--gray-50);cursor:pointer}
.evidence-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);
}
.evidence-title{font-weight:500;color:var(--gray-800)}
.evidence-date{font-family:var(--mono);font-size:11px;color:var(--gray-400)}
.evidence-status{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 8px;border-radius:8px;
}
.evidence-status-draft{background:var(--gray-100);color:var(--gray-500)}
.evidence-status-submitted{background:#eff6ff;color:#2563eb}
.evidence-status-accepted{background:#f0fdf4;color:#16a34a}
.evidence-status-rejected{background:#fef2f2;color:#dc2626}

/* Evidence modal */
.evidence-modal-overlay{
  position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
.evidence-modal{
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.18);width:640px;max-width:90vw;
  max-height:85vh;display:flex;flex-direction:column;overflow:hidden;
}
.evidence-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 16px;border-bottom:var(--border);
}
.evidence-modal-title{font-size:16px;font-weight:700;color:var(--gray-900)}
.evidence-modal-close{
  width:32px;height:32px;border-radius:50%;border:var(--border);
  background:none;color:var(--gray-500);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);font-size:18px;
}
.evidence-modal-close:hover{background:var(--gray-50);color:var(--black)}
.evidence-modal-body{
  flex:1;overflow-y:auto;padding:20px 24px;
}
.evidence-modal-field{margin-bottom:16px}
.evidence-modal-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:6px;display:block;
}
.evidence-modal-input{
  width:100%;padding:10px 14px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:14px;outline:none;
  transition:var(--transition);
}
.evidence-modal-input:focus{border-color:var(--gray-400)}
.evidence-modal-textarea{
  width:100%;padding:12px 14px;border:var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
  resize:vertical;min-height:100px;transition:var(--transition);line-height:1.7;
}
.evidence-modal-textarea:focus{border-color:var(--gray-400)}
.evidence-modal-footer{
  display:flex;gap:8px;justify-content:flex-end;
  padding:16px 24px;border-top:var(--border);
}

/* @-mention autocomplete dropdown */
.mention-dropdown{
  position:absolute;z-index:1200;width:260px;max-height:200px;
  background:var(--white);border:var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);overflow-y:auto;
}
.mention-dropdown-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  cursor:pointer;transition:var(--transition);font-size:13px;
}
.mention-dropdown-item:hover,.mention-dropdown-item.active{
  background:var(--gray-50);
}
.mention-dropdown-avatar{
  width:24px;height:24px;border-radius:50%;background:var(--gray-200);
  color:var(--gray-600);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:700;flex-shrink:0;
}
.mention-dropdown-name{font-weight:500;color:var(--gray-800)}
.mention-dropdown-role{
  font-family:var(--mono);font-size:10px;color:var(--gray-400);margin-left:auto;
}

/* Evidence chip pills (in findings) */
.evidence-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.03em;
  padding:2px 8px;border-radius:10px;background:#eff6ff;
  color:#2563eb;border:1px solid #bfdbfe;cursor:pointer;
  transition:var(--transition);
}
.evidence-chip:hover{background:#dbeafe;border-color:#93c5fd}
.evidence-chip svg{width:12px;height:12px}
.evidence-chip-remove{
  background:none;border:none;cursor:pointer;padding:0;margin-left:2px;
  color:#93c5fd;transition:var(--transition);line-height:1;font-size:14px;
}
.evidence-chip-remove:hover{color:#2563eb}


/* ── CHAT STYLES ─────────────────────────────────────── */

/* Minimized chat pill */
.chat-pill{
  position:fixed;bottom:24px;right:24px;z-index:900;
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;background:var(--black);color:var(--white);
  border:none;border-radius:24px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-lg);transition:var(--transition);
}
.chat-pill:hover{background:var(--gray-800);transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,0,0,.12)}
.chat-pill svg{width:18px;height:18px}
/* Red notification dot — no number */
.chat-dot{
  width:10px;height:10px;border-radius:50%;background:#ef4444;flex-shrink:0;
  animation:chatDotPulse 2s infinite;
}
@keyframes chatDotPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Chat panel */
.chat-panel{
  position:fixed;bottom:24px;right:24px;z-index:950;
  width:380px;height:480px;max-height:calc(100vh - 48px);
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  display:flex;flex-direction:column;overflow:hidden;
  animation:chatSlideUp .2s ease;
}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.chat-panel-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;background:var(--gray-900);color:var(--white);flex-shrink:0;
}
.chat-panel-header-info{flex:1;min-width:0}
.chat-panel-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-panel-meta{font-family:var(--mono);font-size:10px;color:var(--gray-400);margin-top:2px}
.chat-panel-minimize{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--gray-700);
  background:none;color:var(--white);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.chat-panel-minimize:hover{border-color:var(--gray-500);background:var(--gray-800)}
.chat-header-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--gray-700);
  background:none;color:var(--white);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.chat-header-btn:hover{border-color:var(--gray-500);background:var(--gray-800)}

/* Chat search bar */
.chat-search-bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-bottom:1px solid var(--gray-100);
  background:var(--gray-50);flex-shrink:0;
}
.chat-search-input{
  flex:1;padding:6px 10px;border:1px solid var(--gray-200);border-radius:16px;
  font-family:'DM Sans',sans-serif;font-size:12px;outline:none;
  background:var(--white);
}
.chat-search-input:focus{border-color:var(--gray-400)}
.chat-search-close{
  background:none;border:none;cursor:pointer;font-size:18px;
  color:var(--gray-400);padding:0 4px;line-height:1;
}
.chat-search-close:hover{color:var(--gray-700)}
.chat-highlight{background:#fef08a;color:#111;border-radius:2px;padding:0 1px}

/* Messages area — clean white */
.chat-messages{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--white);
}

/* Date separator */
.chat-date-sep{display:flex;align-items:center;justify-content:center;margin:12px 0 8px}
.chat-date-sep span{
  font-size:11px;font-weight:500;color:var(--gray-500);
  background:var(--gray-100);padding:3px 12px;border-radius:6px;
}

/* Message rows */
.chat-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px}
.chat-row-own{justify-content:flex-end}
.chat-row-other{justify-content:flex-start}
.chat-row-own + .chat-row-other,.chat-row-other + .chat-row-own{margin-top:12px}

/* Avatar (others only) */
.chat-avatar-col{width:28px;flex-shrink:0}
.chat-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.chat-avatar-spacer{width:28px;height:1px}

/* Bubble */
.chat-bubble{max-width:72%;padding:8px 12px;font-size:13px;line-height:1.45;word-break:break-word}
.chat-bubble-own{background:var(--gray-900);color:var(--white);border-radius:14px 14px 4px 14px}
.chat-bubble-other{background:var(--gray-50);color:var(--gray-800);border-radius:14px 14px 14px 4px}
.chat-bubble-name{font-size:11px;font-weight:600;margin-bottom:2px}
.chat-bubble-text{white-space:pre-wrap}
.chat-bubble-time{font-family:var(--mono);font-size:9px;margin-top:4px;text-align:right;opacity:.45}

/* Empty */
.chat-empty{text-align:center;color:var(--gray-400);font-size:13px;padding:40px 16px}

/* Input */
.chat-input-area{
  display:flex;align-items:flex-end;gap:8px;
  padding:12px 14px;border-top:1px solid var(--gray-100);background:var(--white);flex-shrink:0;
}
.chat-input{
  flex:1;padding:10px 14px;border:1px solid var(--gray-200);border-radius:20px;
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
  resize:none;max-height:80px;min-height:38px;line-height:1.5;transition:var(--transition);
}
.chat-input:focus{border-color:var(--gray-400)}
.chat-input::placeholder{color:var(--gray-400)}
.chat-send-btn{
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--black);color:var(--white);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;
}
.chat-send-btn:hover{background:var(--gray-800)}
.chat-send-btn svg{width:16px;height:16px}

/* Responsive */
@media(max-width:480px){
  .chat-panel{width:calc(100vw - 16px);right:8px;bottom:8px;height:calc(100vh - 16px);max-height:none;border-radius:var(--radius-sm)}
  .chat-pill{bottom:16px;right:16px}
}

/* ═══════════════════════════════════════════════════ */
/* ADDITIONAL PRODUCTION STYLES                       */
/* Login, forms, modals, toasts, loading, etc.        */
/* ═══════════════════════════════════════════════════ */

/* ── LOGIN SCREEN ─────────────────────────────────── */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);padding:20px;
}
.login-card{
  background:var(--white);border-radius:var(--radius);padding:48px 40px;
  width:100%;max-width:400px;box-shadow:var(--shadow-lg);
}
.login-brand{
  font-family:var(--mono);font-size:16px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--black);margin-bottom:4px;
}
.login-subtitle{
  font-size:13px;color:var(--gray-400);text-align:center;margin-bottom:32px;
}
.login-forgot{
  text-align:center;margin-top:16px;
}
.login-forgot a{
  font-size:13px;color:var(--gray-500);text-decoration:none;
}
.login-forgot a:hover{color:var(--black)}

/* ── FORMS ────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{
  display:block;font-size:12px;font-weight:600;color:var(--gray-600);
  margin-bottom:6px;letter-spacing:.02em;
}
.form-input{
  width:100%;padding:10px 14px;border:var(--border);border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--black);
  outline:none;transition:var(--transition);background:var(--white);
}
.form-input:focus{border-color:var(--gray-400);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.form-input::placeholder{color:var(--gray-400)}
.form-input[readonly]{background:var(--gray-50);color:var(--gray-500);cursor:not-allowed}
textarea.form-input{resize:vertical;min-height:60px}
select.form-input{cursor:pointer}
.form-row{display:flex;gap:16px}
.form-row .form-group{flex:1}
.form-hint{font-size:13px;color:var(--gray-500);margin-bottom:16px;line-height:1.6}
.form-error{
  font-size:13px;color:#ef4444;background:#fef2f2;padding:10px 14px;
  border-radius:var(--radius-xs);margin-bottom:12px;
}
.form-success{
  font-size:13px;color:#22c55e;background:#f0fdf4;padding:10px 14px;
  border-radius:var(--radius-xs);margin-bottom:12px;
}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}

/* ── BUTTONS ──────────────────────────────────────── */
.btn{
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  padding:10px 20px;border-radius:var(--radius-xs);border:none;cursor:pointer;
  transition:var(--transition);display:inline-flex;align-items:center;gap:6px;
}
.btn-primary{background:var(--black);color:var(--white)}
.btn-primary:hover{background:var(--gray-800)}
.btn-primary:disabled{background:var(--gray-300);cursor:not-allowed}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:var(--border)}
.btn-secondary:hover{background:var(--gray-200)}
.btn-danger{background:#ef4444;color:var(--white)}
.btn-danger:hover{background:#dc2626}
.btn-full{width:100%;justify-content:center}
.btn-sm{font-size:12px;padding:6px 14px}
.btn-icon{
  background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius-xs);
  color:var(--gray-500);transition:var(--transition);display:inline-flex;align-items:center;
}
.btn-icon:hover{background:var(--gray-100);color:var(--black)}
.btn-danger-icon:hover{color:#ef4444;background:#fef2f2}

/* ── USER INFO (Top Bar) ──────────────────────────── */
.user-info{
  display:flex;align-items:center;gap:10px;
  position:relative;
}
.user-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--gray-700);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
}
.user-name{
  font-size:13px;color:var(--gray-300);font-weight:500;
}
.role-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;font-weight:600;
}
/* ── USER MENU DROPDOWN ────────────────────────────── */
.user-menu-trigger{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:4px 8px;border-radius:var(--radius-xs);transition:var(--transition);
}
.user-menu-trigger:hover{background:rgba(255,255,255,.1)}
.user-menu{
  display:none;position:absolute;top:100%;right:0;margin-top:6px;
  background:var(--white);border-radius:var(--radius-sm);
  box-shadow:0 8px 30px rgba(0,0,0,.15);min-width:200px;
  overflow:hidden;z-index:500;
}
.user-menu.open{display:block}
.user-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 16px;border:none;background:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--gray-700);
  transition:var(--transition);text-align:left;
}
.user-menu-item:hover{background:var(--gray-50)}
.user-menu-item svg{flex-shrink:0;color:var(--gray-400)}
.user-menu-logout{color:#ef4444;border-top:1px solid var(--gray-100)}
.user-menu-logout:hover{background:#fef2f2}
.user-menu-logout svg{color:#ef4444}

.role-admin{background:#ede9fe;color:#7c3aed}
.role-assessor{background:#dbeafe;color:#2563eb}
.role-user{background:var(--gray-100);color:var(--gray-500)}

/* ── MODALS ───────────────────────────────────────── */
.modal-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);
  z-index:1000;animation:fadeIn .2s ease;
}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--white);border-radius:var(--radius);
  width:90%;max-width:700px;max-height:90vh;overflow-y:auto;
  z-index:1001;box-shadow:var(--shadow-lg);animation:slideUp .2s ease;
}
.modal-sm{max-width:480px}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:var(--border);
}
.modal-header h2{font-size:18px;font-weight:600}
.modal-close{
  background:none;border:none;font-size:24px;cursor:pointer;
  color:var(--gray-400);padding:4px;line-height:1;
}
.modal-close:hover{color:var(--black)}
.modal-body{padding:24px}
.project-modal{max-width:800px}

/* ── TOASTS ───────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--gray-900);color:var(--white);padding:12px 24px;
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  z-index:10000;opacity:0;transition:all .3s ease;pointer-events:none;
  box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-error{background:#ef4444}
.toast-info{background:var(--gray-800)}

/* ── LOADING ──────────────────────────────────────── */
.loading-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.8);z-index:9999;
  display:flex;align-items:center;justify-content:center;
}
.loading-spinner{
  width:36px;height:36px;border:3px solid var(--gray-200);
  border-top-color:var(--black);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translate(-50%,-48%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}

/* ── REGISTER PAGE ────────────────────────────────── */
.register-status{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0;
}
.register-status h3{font-size:16px;margin:12px 0 4px}
.register-status p{font-size:13px;color:var(--gray-500)}
.status-icon{
  width:56px;height:56px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
}
.status-error{background:#fef2f2;color:#ef4444}
.status-success{background:#f0fdf4;color:#22c55e}
.role-display{padding:8px 0}

/* ── ADMIN PANEL ──────────────────────────────────── */
.admin-content{padding:20px 40px 40px}
.admin-section{margin-bottom:32px}
.admin-section-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.admin-section-header h3{font-size:16px;font-weight:600}
.admin-actions{display:flex;gap:8px}
.invite-form{background:var(--white);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:var(--border)}
.admin-table{
  width:100%;border-collapse:collapse;background:var(--white);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:var(--border);
}
.admin-table th{
  text-align:left;padding:10px 16px;background:var(--gray-50);
  font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;
  letter-spacing:.04em;border-bottom:var(--border);
}
.admin-table td{
  padding:10px 16px;font-size:13px;border-bottom:var(--border);vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none}
.role-select{
  font-size:12px;padding:4px 8px;border:var(--border);border-radius:var(--radius-xs);
  background:var(--white);cursor:pointer;
}
.status-badge{
  font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;
}
.status-pending{background:#fefce8;color:#eab308}
.status-used{background:#f0fdf4;color:#22c55e}
.status-expired{background:var(--gray-100);color:var(--gray-400)}
.avatar-sm{
  width:28px;height:28px;border-radius:50%;background:var(--gray-200);
  color:var(--gray-600);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;
}
.avatar-more{background:var(--gray-100);color:var(--gray-400);font-size:10px}

/* ── CHIPS ────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--gray-100);color:var(--gray-700);
  padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;
}
.chip-remove{
  background:none;border:none;cursor:pointer;font-size:14px;
  color:var(--gray-400);padding:0 0 0 4px;line-height:1;
}
.chip-remove:hover{color:#ef4444}

/* ── ASSESSOR SELECTOR ────────────────────────────── */
.assessor-selector{position:relative}
.assessor-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.assessor-dropdown{
  position:absolute;top:100%;left:0;right:0;background:var(--white);
  border:var(--border);border-radius:var(--radius-xs);box-shadow:var(--shadow-lg);
  max-height:200px;overflow-y:auto;z-index:10;
}
.assessor-option{
  display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
  font-size:13px;transition:var(--transition);
}
.assessor-option:hover{background:var(--gray-50)}
.assessor-option input[type=checkbox]{cursor:pointer}

/* ── SCOPE SELECTOR ───────────────────────────────── */
.scope-selector{
  max-height:300px;overflow-y:auto;border:var(--border);
  border-radius:var(--radius-xs);padding:12px;
}
.scope-group{margin-bottom:8px}
.scope-group-toggle{
  display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;
  padding:6px 0;
}
.scope-processes{padding-left:24px}
.scope-process{
  display:block;font-size:12px;color:var(--gray-600);padding:3px 0;cursor:pointer;
}

/* ── PROJECT CARDS ────────────────────────────────── */
/* Top gap so the first folder/grid doesn't sit flush with the hero border */
#assess-project-list{padding-top:24px}
.project-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;padding:0 40px 40px;
}
.project-card{
  background:var(--white);border-radius:var(--radius);padding:20px;
  border:var(--border);cursor:pointer;transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.project-card:hover{box-shadow:var(--shadow);border-color:rgba(0,0,0,.1)}
.project-card-new{
  border:2px dashed var(--gray-200);display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:150px;
  background:var(--gray-50);
}
.project-card-new:hover{border-color:var(--gray-400);background:var(--white)}
.project-card-new-icon{color:var(--gray-400);margin-bottom:8px}
.project-card-new-label{font-size:14px;font-weight:500;color:var(--gray-500)}
.project-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.project-card-title{font-size:15px;font-weight:600;margin-bottom:4px}
.project-card-meta{font-size:12px;color:var(--gray-400);margin-bottom:12px}
.project-card-details{
  display:flex;gap:12px;font-size:11px;font-family:var(--mono);
  color:var(--gray-500);margin-bottom:12px;
}
.project-card-level{
  background:var(--gray-100);padding:2px 8px;border-radius:4px;font-weight:600;
}
.project-card-assessors{display:flex;gap:-4px}
.project-card-assessors .avatar-sm{margin-left:-4px;border:2px solid var(--white)}
.project-card-assessors .avatar-sm:first-child{margin-left:0}

/* Project folders */
.project-folder{
  margin:0 40px 16px;background:var(--white);border:var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.project-folder-header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  cursor:pointer;user-select:none;transition:var(--transition);
}
.project-folder-header:hover{background:var(--gray-50)}
.project-folder-header svg:first-child{color:#f59e0b;flex-shrink:0}
.project-folder-name{font-size:15px;font-weight:600;flex:1}
.project-folder-count{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);
  background:var(--gray-100);padding:2px 8px;border-radius:10px;
}
.project-folder-arrow{color:var(--gray-400);transition:transform .2s ease;flex-shrink:0}
.project-folder.collapsed .project-folder-arrow{transform:rotate(-90deg)}
.project-folder-content{padding:0 8px 8px}
.project-folder.collapsed .project-folder-content{display:none}
.project-folder .project-grid{padding:0 10px 10px}

/* ── ACTIVE PROJECT BAR ───────────────────────────── */
.active-project-bar{
  padding:12px 40px;background:var(--white);border-bottom:var(--border);
}
.project-bar-content{display:flex;align-items:center;gap:12px}
.project-bar-name{font-size:15px;font-weight:600}
.project-bar-meta{font-size:12px;color:var(--gray-400)}

/* ── ASSESSMENT ACTION BAR ────────────────────────── */
.assess-action-bar{
  display:flex;align-items:center;gap:8px;padding:8px 40px;
  border-bottom:var(--border);background:var(--white);
}
.action-btn{
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  padding:8px 16px;border:var(--border);border-radius:var(--radius-xs);
  background:var(--white);cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:6px;color:var(--gray-600);
}
.action-btn:hover{background:var(--gray-50);border-color:var(--gray-300)}
.action-btn svg{width:14px;height:14px}
.action-btn-active{background:var(--black);color:var(--white);border-color:var(--black)}
.action-btn-active:hover{background:var(--gray-800);border-color:var(--gray-800)}

/* Badge on the top "Rules" action-button showing assessment-wide warning state */
#action-btn-rules{position:relative}
.rules-btn-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;line-height:1;
  color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  pointer-events:none;
}
.rules-btn-badge.has-warnings{background:#EF4444}
.rules-btn-badge.all-clear{background:#16A34A;font-size:11px}
.action-btn-active .rules-btn-badge{border-color:#111}

/* Warnings-view scope toggle — segmented sliding pill */
.rules-warnings-scope{
  padding:10px 12px 14px;background:var(--white);
  border-bottom:1px solid var(--gray-100);
  margin-bottom:10px;
}
.scope-pill{
  position:relative;display:flex;width:100%;
  background:var(--gray-100);border:1px solid var(--gray-200);border-radius:999px;
  padding:3px;overflow:hidden;
}
.scope-pill[data-disabled="true"]{opacity:.85}
.scope-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  background:var(--black);border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:0;
}
.scope-pill[data-scope="process"] .scope-thumb{
  transform:translateX(100%);
}
.scope-seg{
  position:relative;z-index:1;flex:1;min-width:0;
  padding:7px 10px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  background:transparent;border:none;border-radius:999px;cursor:pointer;
  color:var(--gray-500);transition:color .22s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.scope-seg:hover:not(:disabled):not(.active){color:var(--gray-800)}
.scope-seg.active{color:var(--white)}
.scope-seg:disabled{cursor:not-allowed;color:var(--gray-400)}
.action-btn-dark{background:var(--gray-800);color:var(--white);border-color:var(--gray-800)}
.action-btn-dark:hover{background:var(--gray-700)}

/* Export dropdown */
.export-dropdown-wrap{position:relative}
.export-dropdown{
  position:absolute;top:100%;right:0;margin-top:4px;
  background:var(--white);border:var(--border);border-radius:var(--radius-xs);
  box-shadow:var(--shadow-lg);min-width:200px;z-index:50;overflow:hidden;
}
.export-dropdown-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;
  border:none;background:none;cursor:pointer;font-family:'DM Sans',sans-serif;
  font-size:13px;color:var(--gray-700);transition:var(--transition);text-align:left;
}
.export-dropdown-item:hover{background:var(--gray-50)}
.export-dropdown-item svg{flex-shrink:0;color:var(--gray-400)}

/* ── ASSESS LEVEL SECTIONS ────────────────────────── */
.assess-level-section{margin-bottom:24px}
.assess-level-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--gray-100);border-radius:var(--radius-sm);
  cursor:pointer;user-select:none;font-weight:600;font-size:14px;
}
.assess-level-header:hover{background:var(--gray-200)}
.assess-level-toggle{font-size:16px;color:var(--gray-400)}
.assess-level-body{padding:16px 0}

/* ── PA RATING BAR ────────────────────────────────── */
.pa-rating-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--white);border:var(--border);
  border-radius:var(--radius-sm);margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.pa-rating-label{font-size:13px;font-weight:600;color:var(--gray-700)}
.pa-rating-values{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--gray-500)}
.pa-calc,.pa-override,.pa-effective{display:flex;align-items:center;gap:4px}
.pa-section{margin-bottom:16px}
.gp-grid{display:flex;flex-direction:column;gap:8px}
.override-select{
  font-size:11px;padding:3px 6px;border:var(--border);border-radius:4px;
  background:var(--white);cursor:pointer;
}

/* ── RATING PILLS ─────────────────────────────────── */
.rating-pills{display:flex;gap:4px}
.rating-pill{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:4px;cursor:pointer;border:1px solid transparent;
  transition:var(--transition);
}
.rating-pill:disabled{cursor:not-allowed;opacity:.6}
.rating-pill.r-N{color:#ef4444;background:#fef2f2;border-color:#fecaca}
.rating-pill.r-P{color:#f97316;background:#fff7ed;border-color:#fed7aa}
.rating-pill.r-L{color:#eab308;background:#fefce8;border-color:#fef08a}
.rating-pill.r-F{color:#22c55e;background:#f0fdf4;border-color:#bbf7d0}
.rating-pill.r-none{color:var(--gray-400);background:var(--gray-50)}
.r-unrated{color:var(--gray-300)}
.rating-pill.selected{font-weight:700;box-shadow:0 0 0 2px currentColor}
.r-cell{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600;text-align:center}
.r-cell.r-N{background:#fef2f2;color:#ef4444}
.r-cell.r-P{background:#fff7ed;color:#f97316}
.r-cell.r-L{background:#fefce8;color:#eab308}
.r-cell.r-F{background:#f0fdf4;color:#22c55e}

/* ── FINDINGS (2-column top + chips bottom) ──────── */
/*
 * Top row: LEFT = [ID] + text + author/date  |  RIGHT = buttons + report toggle
 * Bottom:  linked BP/GP chips (only if links exist)
 */
.findings-area{margin-top:12px}
.finding-item{
  display:block;padding:10px 14px;border-radius:var(--radius-xs);margin-bottom:6px;
}
.finding-in-report{border-left:3px solid var(--black)}

/* Top: two columns */
.finding-top{display:flex;gap:12px;align-items:flex-start}

/* Left column: wide — ID + text + meta.
   Uses flex-row so when the finding text wraps, all lines align to the
   start of the text column (not under the ID/badge). Matches the Gap
   Analysis view's .finding-header layout. */
.finding-left{
  flex:1;min-width:0;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 8px;
}
.finding-id{
  font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap;
  padding:2px 6px;border-radius:4px;flex-shrink:0;
}
.finding-type-comment{background:var(--gray-200);color:var(--gray-600)}
.finding-type-weakness{background:#fecaca;color:#dc2626}
.finding-type-strength{background:#bbf7d0;color:#16a34a}
.finding-type-question{background:#fef08a;color:#ca8a04}
/* .finding-text is now a flex child so the whole paragraph lives in its
   own column — wrapped lines align under the first line, not under the ID. */
.finding-text{
  flex:1 1 260px;min-width:0;
  font-size:13px;color:var(--gray-700);line-height:1.5;
  word-break:break-word;overflow-wrap:anywhere;
}
/* Meta (author · date · imported-from) spans the full width below */
.finding-meta{
  flex-basis:100%;
  font-size:11px;color:var(--gray-400);margin-top:4px;
}

/* Right column: narrow — actions + report toggle */
.finding-right{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  padding-top:2px;
}
.finding-actions{display:flex;gap:2px}
.finding-action-btn{
  background:none;border:none;cursor:pointer;padding:4px;
  color:var(--gray-400);border-radius:4px;transition:var(--transition);
}
.finding-action-btn:hover{background:var(--gray-100);color:var(--gray-700)}
.finding-action-btn.finding-del:hover{color:#ef4444}
.finding-action-btn svg{width:14px;height:14px}
.finding-report-toggle{
  display:flex;align-items:center;gap:5px;cursor:pointer;font-size:10px;color:var(--gray-500);
  user-select:none;white-space:nowrap;
}
.finding-report-toggle input[type=checkbox]{cursor:pointer;accent-color:var(--black)}
.finding-report-label{transition:var(--transition)}
.finding-report-toggle:hover .finding-report-label{color:var(--gray-700)}
.finding-report-badge{
  font-size:10px;font-weight:600;color:var(--gray-500);background:var(--gray-100);
  padding:2px 8px;border-radius:4px;
}

/* Bottom: linked chips */
.finding-chips{
  display:flex;flex-wrap:wrap;gap:3px;margin-top:8px;
  padding-top:6px;border-top:1px solid rgba(0,0,0,.04);
}
.finding-link-chip{
  font-family:var(--mono);font-size:9px;background:var(--gray-100);
  color:var(--gray-600);padding:2px 6px;border-radius:4px;
}
.evidence-chip,.evidence-chip-inline{
  font-family:var(--mono);font-size:9px;background:#ede9fe;
  color:#7c3aed;padding:2px 6px;border-radius:4px;cursor:help;
}

/* Add finding buttons + textarea */
.finding-add-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.finding-add-btn{
  font-size:11px;padding:4px 12px;border:1px dashed var(--gray-300);
  border-radius:var(--radius-xs);background:none;cursor:pointer;
  color:var(--gray-500);transition:var(--transition);
}
.finding-add-btn:hover{border-color:var(--gray-400);color:var(--gray-700);background:var(--gray-50)}
.finding-add-comment:hover{border-color:var(--gray-400)}
.finding-add-weakness:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
.finding-add-strength:hover{border-color:#86efac;color:#22c55e;background:#f0fdf4}
.finding-add-question:hover{border-color:#fde047;color:#eab308;background:#fefce8}
.finding-edit-area{margin-top:8px}
.finding-textarea{
  width:100%;padding:10px;border:var(--border);border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:13px;resize:vertical;
  min-height:60px;outline:none;
}
.finding-textarea:focus{border-color:var(--gray-400)}
.finding-edit-actions{display:flex;gap:8px;margin-top:8px}

/* ── CAPABILITY LEVEL PANEL ───────────────────────── */
.cap-level-panel{
  background:var(--white);border:var(--border);border-radius:var(--radius);
  padding:20px;margin-top:24px;box-shadow:var(--shadow-sm);
}
.cap-level-display{display:flex;align-items:center;gap:16px;margin-top:12px}
.cap-level-number{
  font-family:var(--mono);font-size:36px;font-weight:700;
  width:60px;height:60px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
}
.cap-level-number.cap-F{background:#f0fdf4;color:#22c55e}
.cap-level-number.cap-L{background:#fefce8;color:#eab308}
.cap-level-number.cap-none{background:var(--gray-100);color:var(--gray-400)}
.cap-level-badges{display:flex;flex-direction:column;gap:4px}
.cap-level-badge{font-size:12px;padding:4px 12px;border-radius:var(--radius-xs)}
.cap-level-badge.achieved-F{background:#f0fdf4;color:#22c55e}
.cap-level-badge.achieved-L{background:#fefce8;color:#eab308}
.cap-level-badge.not-achieved{background:var(--gray-50);color:var(--gray-400)}
.cap-badge{
  font-family:var(--mono);font-size:10px;font-weight:700;
  width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
}
.cap-badge.cap-F,.cap-badge.cap-green{background:#f0fdf4;color:#22c55e}
.cap-badge.cap-L,.cap-badge.cap-yellow{background:#fefce8;color:#eab308}
.cap-badge.cap-none,.cap-badge.cap-gray{background:var(--gray-100);color:var(--gray-400)}
.cap-badge.cap-unrated{background:transparent;color:var(--gray-300);font-weight:400;font-size:12px}

/* ── OVERVIEW TABLE ───────────────────────────────── */
.overview-wrapper{padding:20px 40px}
.overview-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.overview-header h3{font-size:18px;font-weight:600}
.overview-table-wrap{overflow-x:auto;max-width:100%}
.overview-table{
  width:100%;border-collapse:collapse;font-size:10px;
  background:var(--white);border:var(--border);border-radius:var(--radius-xs);
}
.overview-table th{
  padding:6px 8px;background:var(--gray-50);font-weight:600;
  text-align:center;border:1px solid var(--gray-200);
  font-family:var(--mono);font-size:9px;letter-spacing:.02em;
}
.overview-table td{
  padding:4px 6px;text-align:center;border:1px solid var(--gray-200);
}
.overview-table .pa-col{
  background:var(--gray-900);color:var(--white);font-weight:700;
  border-color:var(--gray-700);
}
.overview-table th.pa-col{background:var(--gray-800);color:var(--white)}
.overview-table .cap-cell{font-weight:700;font-size:12px}
.overview-process{
  text-align:left;font-family:var(--mono);font-size:10px;font-weight:600;
  white-space:nowrap;
}
.overview-group-row td{
  text-align:left;background:var(--gray-50);font-weight:600;
  font-family:var(--mono);font-size:10px;color:var(--gray-500);
  letter-spacing:.04em;text-transform:uppercase;padding:8px;
}

/* ── EVIDENCE PANEL ───────────────────────────────── */
.evidence-panel-wrapper{padding:20px 40px}
.evidence-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.evidence-header h3{font-size:18px;font-weight:600}
.evidence-search{margin-bottom:12px}
.evidence-empty{
  text-align:center;padding:40px;color:var(--gray-400);font-size:13px;
}
.evidence-table{
  width:100%;border-collapse:collapse;background:var(--white);
  border:var(--border);border-radius:var(--radius-xs);overflow:hidden;
}
.evidence-table th{
  text-align:left;padding:8px 12px;background:var(--gray-50);
  font-size:11px;font-weight:600;color:var(--gray-500);
  text-transform:uppercase;letter-spacing:.04em;border-bottom:var(--border);
}
.evidence-table td{
  padding:8px 12px;font-size:13px;border-bottom:var(--border);
}
.evidence-table tr:last-child td{border-bottom:none}
.ev-id{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gray-500)}
.ev-actions{white-space:nowrap}

/* ── @-MENTION DROPDOWN ───────────────────────────── */
.at-mention-dropdown{
  position:absolute;top:100%;left:0;right:0;max-height:220px;
  overflow-y:auto;background:var(--white);border:var(--border);
  border-radius:var(--radius-xs);box-shadow:var(--shadow-lg);z-index:200;
  -webkit-overflow-scrolling:touch;
}
.at-dropdown-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;
  font-size:12px;transition:var(--transition);
}
.at-dropdown-item:hover,.at-dropdown-item.active{background:var(--gray-50)}
.at-ev-id{font-family:var(--mono);font-weight:600;color:var(--gray-500);min-width:50px}
.at-ev-title{color:var(--gray-700)}
.at-dropdown-empty{padding:12px;text-align:center;color:var(--gray-400);font-size:12px}
.at-dropdown-create{
  padding:8px 12px;cursor:pointer;color:#2563eb;font-size:12px;
  border-top:var(--border);position:sticky;bottom:0;
  background:var(--white);font-weight:500;
}
.at-dropdown-create:hover{background:#dbeafe}

/* ── DATA MANAGEMENT TREE ─────────────────────────── */
.data-tree{padding:0}
.data-tree-section{margin-bottom:24px}
.data-tree-section h4{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--gray-700)}
.data-tree-group{margin-bottom:8px}
.data-tree-group-header{
  padding:8px 12px;background:var(--gray-50);border-radius:var(--radius-xs);
  font-size:13px;margin-bottom:4px;
}
.data-tree-children{padding-left:24px}
.data-tree-item{
  display:flex;gap:8px;padding:4px 8px;font-size:12px;color:var(--gray-600);
}
.data-tree-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-400);min-width:80px;
}

/* ── RATING RULES PANEL (right sidebar, pushes content left) ─── */
.rules-panel{
  position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;
  background:var(--white);border-left:1px solid var(--gray-200);
  box-shadow:-4px 0 20px rgba(0,0,0,.08);z-index:200;
  display:flex;flex-direction:column;animation:rulesSlideIn .2s ease;
}
@keyframes rulesSlideIn{from{transform:translateX(100%)}to{transform:none}}
/* When rules panel is open, shrink the main content */
body.rules-open .assess-detail{margin-right:380px}
body.rules-open .assess-nav{max-width:200px}
.rules-panel-header{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:var(--border);flex-shrink:0;
}
.rules-panel-title{
  display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;flex:1;
}
.rules-panel-meta{font-family:var(--mono);font-size:10px;color:var(--gray-400)}
.rules-panel-close{
  background:none;border:none;font-size:20px;cursor:pointer;color:var(--gray-400);
  padding:0 4px;line-height:1;
}
.rules-panel-close:hover{color:var(--black)}
.rules-search{padding:8px 12px;border-bottom:var(--border);flex-shrink:0}
.rules-search-input{
  width:100%;padding:8px 12px;border:1px solid var(--gray-200);border-radius:20px;
  font-size:12px;outline:none;font-family:'DM Sans',sans-serif;
}
.rules-search-input:focus{border-color:var(--gray-400)}
.rules-list{flex:1;overflow-y:auto;padding:8px 8px 80px}
.rules-empty{text-align:center;color:var(--gray-400);font-size:12px;padding:24px}

/* Type filter buttons */
.rules-type-filters{
  display:flex;gap:4px;padding:6px 12px;border-bottom:var(--border);flex-shrink:0;flex-wrap:wrap;
}
.rules-type-btn{
  font-size:10px;padding:3px 10px;border:1px solid var(--gray-200);border-radius:14px;
  background:var(--white);cursor:pointer;color:var(--gray-500);transition:var(--transition);
  font-family:'DM Sans',sans-serif;
}
.rules-type-btn:hover{border-color:var(--gray-400);color:var(--gray-700)}
.rules-type-btn.active{background:var(--black);color:var(--white);border-color:var(--black)}

/* Search all toggle */
.rules-search-all-toggle{
  display:flex;align-items:center;gap:3px;font-size:10px;color:var(--gray-500);
  cursor:pointer;white-space:nowrap;user-select:none;
}
.rules-search-all-toggle input{cursor:pointer;accent-color:var(--black)}

/* Violation warning */
.rule-violation{border-left-color:#EF4444!important;box-shadow:inset 0 0 0 1px rgba(239,68,68,.15);background:#FEF2F2!important}
.rule-warning{font-size:14px;flex-shrink:0}
.rule-warning-overridden{position:relative;opacity:.5}
.rule-warning-overridden::after{
  content:'';position:absolute;top:50%;left:-2px;right:-2px;
  height:2px;background:#EF4444;transform:rotate(-45deg);
}
.rule-override-btn{
  background:none;border:1px solid var(--gray-300);border-radius:4px;
  cursor:pointer;padding:2px 6px;color:var(--gray-400);transition:var(--transition);
  display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap;
}
.rule-override-btn:hover{border-color:var(--gray-500);color:var(--gray-700)}
.rule-override-btn.overridden{border-color:#22c55e;color:#22c55e;background:#F0FDF4}
.rule-override-label{font-family:'DM Sans',sans-serif;font-weight:500}

.rules-section-header{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);
  padding:10px 8px 4px;margin-top:4px;border-bottom:1px solid var(--gray-100);
}

.rule-item{
  padding:10px 12px;border-radius:var(--radius-xs);margin-bottom:6px;
  transition:var(--transition);
}
.rule-item.rule-checked{opacity:.5;background:#F3F4F6!important;border-left-color:#D1D5DB!important}
.rule-item.rule-checked .rule-id,.rule-item.rule-checked .rule-text,.rule-item.rule-checked .rule-type-badge{color:#9CA3AF!important}
.rule-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.rule-id{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gray-600)}
.rule-type-badge{
  font-size:8px;font-weight:600;padding:1px 6px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.03em;
}
.rule-check-toggle{margin-left:auto;cursor:pointer}
.rule-check-toggle input{cursor:pointer;accent-color:var(--black)}
.rule-checked-badge{margin-left:auto;color:#22c55e;font-size:14px}
.rule-text{font-size:11px;color:var(--gray-700);line-height:1.5}
.rule-affects{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.rule-affect-chip{
  font-family:var(--mono);font-size:8px;background:var(--gray-100);
  color:var(--gray-600);padding:1px 5px;border-radius:3px;
}
.rule-check-meta{font-size:9px;color:var(--gray-400);margin-top:3px}

@media(max-width:1024px){
  .rules-panel{width:100vw;max-width:100vw}
  body.rules-open .assess-detail{margin-right:0}
  body.rules-open .assess-nav{max-width:none}
}

/* assess-container styles are defined above in the Assessment Section */

/* ═══════════════════════════════════════════════════ */
/* AI GAP ANALYSIS MODE                                */
/* ═══════════════════════════════════════════════════ */

/* AI Gap Analysis mode button — distinctive purple colouring on desktop
   AND mobile so users can spot the AI tab at a glance. Stays purple whether
   active or inactive; active state just gets extra weight + the underline
   (inherited from .mode-btn.active::after). */
.mode-btn[data-mode="gap"]{color:#7C3AED;font-weight:600}
.mode-btn[data-mode="gap"]:hover{color:#6D28D9}
.mode-btn[data-mode="gap"].active{color:#6D28D9}
.mode-btn[data-mode="gap"] .mode-icon{color:#7C3AED}
/* On mobile the mode bar collapses the icons; keep the label purple */
@media (max-width: 1024px){
  .mode-btn[data-mode="gap"]{color:#7C3AED !important}
  .mode-btn[data-mode="gap"].active{color:#6D28D9 !important}
}

/* Container re-uses .project-grid / .project-folder / .active-project-bar
   from the assessment styling — #gap-project-list behaves identically. */
#gap-project-list{padding-top:24px}

/* AI action buttons — purple (same accent as the AI badge) so users
   immediately recognise them as AI-triggering actions. Two variants:
   .btn-ai       → inline button inside a card (Analyse with AI)
   .action-btn-ai → top action bar (Run AI on all processes) */
.btn-ai{
  background:#7C3AED;color:#fff;border:1px solid #7C3AED;
  padding:6px 14px;border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-weight:500;font-size:12px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:var(--transition);
}
.btn-ai:hover{background:#6D28D9;border-color:#6D28D9}
.btn-ai:disabled{background:#C4B5FD;border-color:#C4B5FD;cursor:not-allowed}

.action-btn-ai{background:#7C3AED;color:#fff;border-color:#7C3AED}
.action-btn-ai:hover{background:#6D28D9;border-color:#6D28D9;color:#fff}
.action-btn-ai svg{color:#fff}

/* AI badge — used on findings marked source='ai' */
.ai-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:#7C3AED;color:#fff;
  font-family:'DM Sans',sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;
  padding:2px 6px;border-radius:3px;margin:0 6px 0 4px;
  flex-shrink:0;
}
/* Inside the assessment's flex-row .finding-left, the surrounding `gap`
   already handles spacing — neutralise the badge's own margins so it
   doesn't double up and push the text column. */
.finding-left .ai-badge{margin:0}

/* AI finding accent — purple left border + tinted background override */
.finding-ai{
  border-left:3px solid #7C3AED !important;
  background:linear-gradient(90deg, #F5F3FF 0%, transparent 20%) !important;
}
.finding-ai .finding-id{color:#5B21B6}

/* Gap documents panel */
.gap-doc-uploader{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px;border:1px dashed var(--gray-300);border-radius:var(--radius);
  background:var(--gray-50);margin-bottom:12px;
}
.gap-doc-drop{
  flex:1;min-width:260px;display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:10px 12px;border-radius:var(--radius-sm);transition:var(--transition);
}
.gap-doc-drop:hover, .gap-doc-drop.dragover{background:var(--white);box-shadow:inset 0 0 0 2px #7C3AED}
.gap-doc-drop svg{color:#7C3AED;flex-shrink:0}
.gap-doc-drop-label{flex:1}
.gap-doc-drop-label strong{display:block;color:var(--gray-900);font-size:14px}
.gap-doc-drop-hint{color:var(--gray-400);font-size:12px;margin-top:2px}
.gap-doc-keep-opt{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-600);
  user-select:none;cursor:pointer;
}
.gap-upload-status{font-size:12px;color:var(--gray-500);flex-basis:100%}

/* Small grey "i" info tip — click to toggle a positioned popup. Works on
   touch, keyboard and mouse. Uses <button> (not a span with title=) so
   tap events on phones actually surface the info text. */
.gap-doc-info-tip{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--gray-300);color:var(--white);border:none;padding:0;
  font-family:Georgia, 'Times New Roman', serif;font-size:11px;font-style:italic;font-weight:700;
  line-height:1;cursor:pointer;user-select:none;
  margin-left:4px;
  transition:background-color .15s ease;
}
.gap-doc-info-tip:hover,
.gap-doc-info-tip:focus{background:var(--gray-500);outline:none}
.gap-doc-info-tip:focus-visible{box-shadow:0 0 0 2px #C4B5FD}

/* Info popup (opened on click) — positioned absolutely by JS, arrow flips
   to point at the button whether the popup ended up above or below it. */
.gap-info-popup{
  position:absolute;z-index:10000;
  max-width:320px;min-width:220px;
  padding:10px 12px;
  background:#111;color:#f3f4f6;border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.45;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.gap-info-popup-arrow{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-5px;
  width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:6px solid #111;
}
.gap-info-popup.gap-info-popup-below .gap-info-popup-arrow{
  bottom:auto;top:-5px;
  border-top:none;border-bottom:6px solid #111;
}

.gap-doc-list{display:flex;flex-direction:column;gap:6px}
.gap-doc-card{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);
}
.gap-doc-icon{color:var(--gray-500);flex-shrink:0}
.gap-doc-info{flex:1;min-width:0}
.gap-doc-name{font-size:13px;font-weight:500;color:var(--gray-900);word-break:break-all}
.gap-doc-meta{font-size:11px;color:var(--gray-400);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gap-doc-status{
  padding:1px 6px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;
}
.gap-doc-stored{background:#DCFCE7;color:#166534}
.gap-doc-parsed{background:var(--gray-100);color:var(--gray-600)}
/* AI-extraction status: green if the AI has readable text, amber if very
   little was extracted, red if extraction failed entirely. Gives assessors
   an at-a-glance view of what the AI will actually read for each file. */
.gap-doc-ai-ok{background:#EDE9FE;color:#5B21B6}
.gap-doc-ai-partial{background:#FEF3C7;color:#92400E}
.gap-doc-ai-fail{background:#FEE2E2;color:#B91C1C}
.gap-doc-actions{display:flex;gap:4px;flex-shrink:0}

/* Per-BP findings list inside gap detail view */
.gap-findings-list{margin:8px 0;display:flex;flex-direction:column;gap:6px}

/* All-findings tab: add page-level padding so the layout feels consistent
   with the other tabs (detail view / docs tab). */
.gap-findings-tab{padding:16px 40px}
.gap-findings-tab .detail-section{margin-bottom:24px}

/* Per-BP / per-process gap finding row
   Color strategy:
   - Background tint + left-border color differentiate type (C/W/S/Q)
   - AI rows override only the LEFT-BORDER (to purple) so the type
     tint is still visible behind
   - A pill next to the finding ID restates the type in words for clarity */
.gap-findings-list .finding-item{
  display:block;margin:0;padding:10px 12px;
  border-left:3px solid var(--gray-300);
  background:var(--gray-50);border-radius:0 6px 6px 0;font-size:13px;
  transition:var(--transition);
}
.gap-findings-list .finding-C{border-left-color:#9ca3af;background:#f9fafb}
.gap-findings-list .finding-W{border-left-color:#EF4444;background:#FEF2F2}
.gap-findings-list .finding-S{border-left-color:#16a34a;background:#F0FDF4}
.gap-findings-list .finding-Q{border-left-color:#ca8a04;background:#FEFCE8}
.gap-findings-list .finding-item.finding-ai{border-left-color:#7C3AED !important}

/* Row layout: [id] [type chip] [AI badge] [text fills remaining width]
   Wrapping the header in flex with nowrap-text-column lets the text stay
   on the same visual line as the badges, but also wrap under them when
   the row is narrow. */
.gap-findings-list .finding-header{
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
}
.gap-findings-list .finding-id{
  font-family:var(--mono);font-size:11px;color:var(--gray-600);
  flex-shrink:0;padding-top:3px;
}
.gap-findings-list .finding-text{
  flex:1 1 220px;min-width:0;color:var(--gray-800);line-height:1.5;
  word-break:break-word;overflow-wrap:anywhere;
}
/* Align the "Based on:" row and the author meta line to the LEFT edge of
   the finding card (same left padding as the text itself), not to the
   end of the chip cluster. Cleaner and consistent across both views. */
.gap-findings-list .gap-finding-cited{
  margin-top:8px;padding-left:0;
  font-size:11px;color:var(--gray-500);
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
}
.gap-findings-list .finding-author{
  font-size:10px;color:var(--gray-400);margin-top:6px;padding-left:0;
}
.gap-findings-list .finding-actions{
  display:flex;gap:6px;align-items:center;flex-shrink:0;
}

/* Process-nav doc / finding chips — text labels, NOT green number badges
   (which would collide with capability-level semantics in Assessment mode). */
.gap-nav-docs{
  display:inline-block;padding:1px 7px;border-radius:3px;
  background:#EEF2FF;color:#3730A3;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
  line-height:1.4;white-space:nowrap;
}
.gap-nav-docs.gap-nav-docs-empty{background:var(--gray-100);color:var(--gray-400)}
.gap-nav-findings{
  display:inline-block;padding:1px 7px;border-radius:3px;
  background:#F5F3FF;color:#5B21B6;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
  line-height:1.4;white-space:nowrap;
}

/* Cited-document chips shown under AI findings so assessors can see
   which files a given finding references. Hover title shows the DB id.
   The .gap-findings-list scoped rule further down overrides padding for
   consistency with the author meta line. */
.gap-finding-cited{
  margin:6px 0 0;
  font-size:11px;color:var(--gray-500);
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
}
.gap-cited-chip{
  background:#F3F4F6;color:var(--gray-700);
  padding:2px 8px;border-radius:10px;
  font-family:var(--mono);font-size:10px;
  word-break:break-all;
}

/* Color-coded type chip — matches the background tint of its row */
.gap-finding-type-chip{
  display:inline-block;padding:2px 7px;border-radius:3px;flex-shrink:0;
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.3;
}
.gap-type-comment  {background:#e5e7eb;color:#4b5563}
.gap-type-weakness {background:#fee2e2;color:#b91c1c}
.gap-type-strength {background:#dcfce7;color:#15803d}
.gap-type-question {background:#fef3c7;color:#a16207}

/* Inline "Add Comment / Weakness / …" editor — styled to match assessment mode */
.finding-edit-area{
  margin:10px 0 4px;padding:10px 12px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:6px;
}
.finding-edit-label{
  font-size:11px;font-weight:600;color:var(--gray-600);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:6px;
}
.finding-edit-area-weakness{border-left:3px solid #EF4444}
.finding-edit-area-weakness .finding-edit-label{color:#b91c1c}
.finding-edit-area-strength{border-left:3px solid #16a34a}
.finding-edit-area-strength .finding-edit-label{color:#15803d}
.finding-edit-area-question{border-left:3px solid #ca8a04}
.finding-edit-area-question .finding-edit-label{color:#a16207}
.finding-edit-area-comment {border-left:3px solid #9ca3af}
.finding-edit-area-comment .finding-edit-label{color:#4b5563}
.finding-edit-area .finding-textarea{
  width:100%;padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;
  resize:vertical;min-height:72px;outline:none;box-sizing:border-box;
}
.finding-edit-area .finding-textarea:focus{border-color:var(--gray-500)}
.finding-edit-area .finding-edit-actions{display:flex;gap:8px;margin-top:8px}

/* Import-to-assessment modal
   Layout: sticky header (target + filter + primary actions) stays visible
   while the user scrolls the list of findings underneath. Fixes the original
   UX where Cancel/Import lived at the bottom below 30+ rows. */
.gap-import-modal{max-width:960px;display:flex;flex-direction:column;max-height:90vh}
.gap-import-sticky{
  position:sticky;top:0;z-index:2;padding:14px 20px 10px;
  background:var(--white);border-bottom:1px solid var(--gray-200);
}
.gap-import-filterbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.gap-import-count{
  font-size:11px;color:var(--gray-500);padding:2px 8px;
  background:var(--gray-100);border-radius:9px;
  align-self:center;line-height:1.3;
}
.gap-import-hint{
  margin-top:6px;font-size:11px;color:#5B21B6;background:#F5F3FF;
  padding:5px 10px;border-radius:4px;display:inline-block;
}
.gap-import-body{padding-top:10px}
.gap-import-list{
  max-height:60vh;overflow-y:auto;padding:6px;
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);background:var(--gray-50);
}
.gap-import-row{
  display:grid;grid-template-columns:20px 70px 70px 40px minmax(0,1fr) minmax(0,2fr);
  gap:8px;align-items:start;
  padding:10px 12px;margin:4px 0;background:var(--white);border-radius:var(--radius-sm);
  border-left:3px solid var(--gray-300);cursor:pointer;transition:var(--transition);
  font-size:12px;
}
/* `min-width: 0` (via minmax above) lets grid cells shrink below their
   intrinsic content size; without this, long text pushes the row wider
   than its parent and the grey card extends past its container. */
.gap-import-row .gap-import-text,
.gap-import-row .gap-import-links{min-width:0;word-break:break-word;overflow-wrap:anywhere}
.gap-import-row:hover{background:var(--gray-100)}
.gap-import-row.finding-C{border-left-color:#9ca3af}
.gap-import-row.finding-W{border-left-color:#EF4444}
.gap-import-row.finding-S{border-left-color:#16a34a}
.gap-import-row.finding-Q{border-left-color:#ca8a04}
.gap-import-row.finding-ai{border-left-color:#7C3AED}
/* Pre-selected rows get a subtle purple left-to-right tint + ring so the
   user instantly sees "these were already selected from prior work". */
.gap-import-row.is-preselected{
  background:linear-gradient(90deg, #F5F3FF 0%, var(--white) 30%);
  box-shadow:inset 0 0 0 1px #DDD6FE;
}
.gap-import-row .ai-badge{grid-column:4}
.gap-import-links{font-family:var(--mono);font-size:10px;color:var(--gray-500);overflow:hidden;text-overflow:ellipsis}
.gap-import-text{color:var(--gray-700)}

/* Imported-from-gap-analysis findings — subtle purple inset stripe on the
   left, matches the existing finding style (the attribution line lives in
   .finding-meta alongside author + date, not as a separate pill). */
.finding-item.finding-imported{
  box-shadow:inset 3px 0 0 #7C3AED;
}

/* AI progress overlay (full-screen block while Claude is running) */
.gap-ai-overlay{
  position:fixed;inset:0;background:rgba(17,17,17,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:9999;
}
.gap-ai-overlay-box{
  background:var(--white);padding:32px 40px;border-radius:var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.3);text-align:center;max-width:420px;
}
.gap-ai-overlay-msg{font-size:16px;font-weight:600;color:var(--gray-900);margin-top:14px}
.gap-ai-overlay-hint{font-size:12px;color:var(--gray-500);margin-top:8px}
.gap-ai-spinner{
  width:40px;height:40px;margin:0 auto;border:3px solid var(--gray-200);border-top-color:#7C3AED;
  border-radius:50%;animation:ai-spin 1s linear infinite;
}
@keyframes ai-spin{to{transform:rotate(360deg)}}